Auto opening widget, Changing camera view in 1 small widget

[buuuudzik]

How Can I do the automatic opening a widget on a site? I want to add a custom widget with alert messages.

Are there any possibilities in LM to do some list or a space on a site with a scrolling function e.g. for a changing the camera view?

[admin]

This can be created with SVG and JavaScript, but it's not quite easy to do right now. Wait for next FW with custom JavaScript support, it will be much easier then.

[buuuudzik]

This can be created with SVG and JavaScript, but it's not quite easy to do right now. Wait for next FW with custom JavaScript support, it will be much easier then.

Thak you for the answer Do you know when the new FW will be released?

And I have w different new questions: how can I do an autoopening site for example when somebody's calling by the intercom? And is there any solution for taking a screenshot from camera which is connected to LM via LAN and it is visible in "Camera" object?

[edgars]

Here are two examples created by our community member Erwin van der Zwart

1. The script to get snapshot from IP camera and send it to mailbox.

Code:

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101

--***********************************************************-- --** Email image attachment created by Erwin van der Zwart **-- --***********************************************************-- --******************* Start of parameters *******************-- --***********************************************************-- --Gmail (smtp) username !IMPORTANT! user = 'YOUR.ADDRESS@GMAIL.COM' --Gmail (smtp) password !IMPORTANT! password = 'YOUR GMAIL PASSWORD' --Sender for e-mail from = '<your.address@gmail.com>' alias_from = 'YOUR FULL NAME' --Recipient for e-mail to = '<recipient@domain.com>' alias_to = 'recipient full name' --Subject for e-mail subject = 'Snapshot from camera automaticly send by homeLYnk' --Attachment and filetype (set filetype as 'gif', 'png', 'bmp', 'jpg' or 'jpeg' according image source) image_type = 'jpeg' image_name_attachment = 'snapshot' source_image_url = 'http://your.camara.ip/snapshot.jpeg' image_description = 'Snapshot from IP Camera' --Message on bottom of email (will only be showed when client don't understand attachment) epilogue = 'End of message' --***********************************************************-- --******************** End of parameters ********************-- --***********************************************************-- --********** DON'T CHANGE ANYTHING UNDER THIS LINE **********-- --***********************************************************-- --Get remote (from HTTP) image and put image file to HL (will be deleted when end of script) os.execute('wget -O /www/scada/vis/' .. image_name_attachment .. '.' .. image_type .. ' ' .. source_image_url .. '') --Create filename and location local fileName = '/www/scada/vis/' .. image_name_attachment .. '.' .. image_type --Create table to include mail settings local settings = {    from = from,    rcpt = to,    user = user,    password = password,    server = 'smtp.gmail.com',    port = 465,    secure = 'sslv23', } --Load required modules to send email with attachment local smtp = require("socket.smtp") local mime = require("mime") local ltn12 = require("ltn12") --Create e-mail header settings.source = smtp.message{ headers = {          from = '' .. alias_from .. ' ' .. from .. '',          to = '' .. alias_to .. ' ' .. to .. '',          subject = subject }, --Load attachment inside body     body = { preamble = "", [1] = {        headers = {        ["content-type"] = 'image/' .. image_type .. '; name="' .. image_name_attachment .. '.' .. image_type .. '"',        ["content-disposition"] = 'attachment; filename="' .. image_name_attachment .. '.' .. image_type .. '"',        ["content-description"] = '' .. image_description .. '',        ["content-transfer-encoding"] = "BASE64"      },                    body = ltn12.source.chain(      ltn12.source.file(io.open(fileName, "rb")),      ltn12.filter.chain(      mime.encode("base64"),      mime.wrap()        )      )    },      epilogue = epilogue  } } --Send the email r, e = smtp.send(settings) --Create alert when sending gives an error with error message if (e) then     alert("Could not send email: ", e, "\n") end --Delete downloaded image file from HL os.remove(fileName)

2. Another script allows to perform a jump to a specific visualization page when call from intercom is received. You need to write page number to the object and visualization will jump to it automatically.

Code:

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140

-- * Jump to Page Module Version 1.2 Created by Erwin van der Zwart * -- -- * This script perform automaticly all needed actions to support jump to page * -- --  After running script once refresh browser and write value to object for result -- -- ******************************** SET PARAMETERS ****************************** -- -- Group address to trigger the page jump(s) Trigger_Group_Address = '0/0/33' -- !! MUST BE A 2 BYTE UNSIGNED INTEGER OBJECT !! -- Create automaticly iframe with jumps.html on startpage Create_Automatic = true -- Set to false to disable auto create and run script once -- Delete HTML jump function from controller Delete_HTML = false -- Set to true to delete this function and run script once -- ******************************** END PARAMETERS ****************************** -- -- ********************* DON'T CHANGE ANYTHING UNDER THIS LINE ****************** -- -- Create HTML content page = [[ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>homeLYnk Page Jumps</title> <style type="text/css"> body {     background-color: transparent; } </style> </head> <body> <script type="text/javascript"> // ***** Make link to parent from iframe ***** var p = window.parent, root, addr; var ip = location.host; var URL = "http://" + ip + "/scada/resources/img/"; if (p && p.objectStore) {     addr = p.Scada.encodeGroupAddress(']] .. Trigger_Group_Address .. [[');         p.objectStore.addListener(addr, function(obj, type) {         /* to avoid jump on opening page */       if (type == 'init') {           return;      }         if (obj.value == 0) {           return;      }         if ( p.currentPlanId != obj.value ){             p.showPlan(obj.value);         }                  if ( obj.value != 0  ){             p.setObjectValue({ address: ']] .. Trigger_Group_Address .. [[', rawdatatype: 7 }, 0, 'text');         }     }); } </script> </div> </body> </html> ]] -- Create HTML file to write to controller io.writefile("/www/scada/resources/img/jumps.html", page) -- use this as frame URL -> /scada/resources/img/jumps.html -- Check if html must be automaticly created inside iframe with jumps.html on startpage if Create_Automatic == true then  -- Get default startpage  query = 'SELECT id, usermode_param FROM visfloors'     for _, floor in ipairs(db:getall(query)) do         if floor.usermode_param == "D" then        default_startpage = floor.id         end     end    -- Check if default page excists else exit script  if default_startpage == nil then    alert("Default page does not excists, exit HTML creation")    --Exit script    return  end    -- Check if object already exist  object_exists = false  query = 'SELECT floor, type, name, params FROM visobjects'  for _, visobject in ipairs(db:getall(query)) do    if visobject.floor == default_startpage and (visobject.type == 9 or visobject.type == "9") and visobject.name == "jumps" then      object_exists = true        end     end    -- Create if object doesn't exist  if object_exists == false then          db:insert('visobjects', {floor = default_startpage, type = 9, params = '{"source":"url","url":"/scada/resources/img/jumps.html","width":50,"height":50}', locx = 0 , locy = 0, name = "jumps", notouch = 1, nobg = 1,})  end   end -- Check if HTML logout function must be deleted from the controller if Delete_HTML == true then     -- Get default startpage  query = 'SELECT id, usermode_param FROM visfloors'     for _, floor in ipairs(db:getall(query)) do         if floor.usermode_param == "D" then        default_startpage = floor.id         end     end    -- Check if default page excists else exit script  if default_startpage == nil then    alert("Default page does not excists, exit HTML deletion")    --Exit script    return  end  -- Select all entrys from DB inside table 'visobjects'  query = 'SELECT id, floor, type, name, params FROM visobjects'     for _, visobject in ipairs(db:getall(query)) do      if visobject.floor == default_startpage and (visobject.type == 9 or visobject.type == "9") and visobject.name == "jumps" then      current = visobject.id      db:delete('visobjects', { id = current })    end  end    --Delete HTML file from HL dir  os.remove("/www/scada/resources/img/jumps.html") end -- Disable script when done automaticly script.disable(_SCRIPTNAME)

[Vesel]

Thanks for the examples. I'm trying to run the first script, the one that sends an email. However I get the following error while trying to execute the script: "Lua syntax error at line 47: '}' expected (to close '{' at line 46) near ' from'" I am quite new to Lua, could you help me out figuring what the error is? 


I believe the comma at the end of line 53 should be removed? However it does not change anything with regards to the error message.

[admin]

Looks like another case of copy-paste issue of Google Chrome. Copy the source code to notepad, then copy it from there and paste to LM code editor.

[Vesel]

Looks like another case of copy-paste issue of Google Chrome. Copy the source code to notepad, then copy it from there and paste to LM code editor.

You were right, however copy pasting it into a text editor did not solve the problem. I still had to manually remove blank spaces. I'm now facing a new problem, instead of showing an actual image the sent mail just displays a lot of text. I have tried with both .png, .jpg and .jpeg and still get the same result. Any tips? 

I guess this doesn't really matter, but I don't have an actual camera connected to my home network. So I just using some random image urls from the web.

[Angeles]

Hi;
I've tested the code and two errors happend:

* the image doesn't save in LM - I don't delete it for trying  it.
* the email doesn't send itself - I think that it's for the first one. There is no file then error.

My version is 17/9/2015.
I put the os.execute in log  - result : * number 0

[buuuudzik]

Maybe something changed and now is there a possibility to auto open widget at opening site?

[Erwin van der Zwart]

Hi Buuuudzik,

There is nothing changed, but with custom JavaScript it's possible.

Here is a sample on how to do that:

You have to check the widget id of your widget, in this sample it's id: 'widget-1' 

Code:

1234567891011121314151617181920212223242526

$(function(){    // Open widget on load  $("#widget-1").removeClass("hide");    // Optional: Position widget (absolute position)  //document.getElementById("widget-1").style.top = "100px";  //document.getElementById("widget-1").style.left = "100px";    // Open widget on KNX command  grp.listen('1/1/1', function(object, state) {     if (state == 'value' && object.value == true ) {         // Command to show widget         $("#widget-1").removeClass("hide");    }  }, true); // set to true to execute on same object value    // Close widget on KNX command  grp.listen('1/1/1', function(object, state) {     if (state == 'value' && object.value == false ) {         // Command to hide widget         $("#widget-1").addClass("hide");    }  }, true); // set to true to execute on same object value   });

BR,

Erwin van der Zwart

[buuuudzik]

I've tried but unfortunately widget opens with other dimensions and open not only on page 174 where it is placed but also on homepage where there isn't. I've tried to change a little this script to use only this function which is for opening widget only on load page.

This are widget parameters:
widget ID: "widget-177"
top: 130px
left: 0px
width: 720px
height: 1024px
plan ID: 174

I've tried this script but it has some error:

Code:

1234567891011

$(function(){    // Open widget on load  $("#widget-177").removeClass("hide");    // Optional: Position widget (absolute position)  document.getElementById("widget-177").style.top = "130px";  document.getElementById("widget-177").style.left = "0px";  document.getElementById("widget-177").style.width = "720px";  document.getElementById("widget-177").style.height = "1024px";  });

[Erwin van der Zwart]

Hi Buuuudzik,

Thats correct, in your request you ask to open widget on opening site, that's what happens now (;

If you want to open widget on a specific page we need to add a extra condition.

To avoid miscomunication again, can you discribe exactly what you want to achieve?

PS: All pages are loaded at once, so you need to use a condition to determine current page, the height and width commands you added are correct so should work ..

BR,

Erwin van der Zwart

[buuuudzik]

I have widget 177 on a page 174. This widget is only placed on page 174. I want open it by default.

I added the attachement with 1. Without widget and with opened widget.

[Erwin van der Zwart]

Hi Buuuudzik,

Try this:

Code:

1234567891011121314151617181920212223242526272829303132

$(function(){    var openwidget = false;    function openWidget(){    if (currentPlanId == 4){      if (openwidget == false){          openwidget = true;           // Open widget      $("#widget-5").removeClass("hide");          // Position widget (absolute positioned)      document.getElementById("widget-5").style.top = "150px";      document.getElementById("widget-5").style.left = "150px";      document.getElementById("widget-5").style.width = "1024px";      document.getElementById("widget-5").style.height = "600px";      }  } else {      // Condition to hide widget      $("#widget-5").addClass("hide");      openwidget = false;    }  }  // Initial execution if needed  openWidget();  // Add event listener to control elements only for checking on each user input  $('.item-control').on( "click", function() {      openWidget();  });   });

BR,

Erwin van der Zwart

[buuuudzik]

In the Inspector window I see that there is such problem:
"ReferenceError: currentPlanId is not defined".

[Erwin van der Zwart]

Hi Buuuudzik,

This code should work, i run it exactly the same in my device. (i use a spaceLYnk for testing but should be the same)

What FW do you run?

BR,

Erwin

[buuuudzik]

I am using LM Load Balancer 20160301.

[miro.suchanek]

Dear Erwin, 

I would like to ask you for advice. I would like to show notification widget after the KNX object is changed. 

I used your javascript code: 

Code:

123456789101112131415

$(function(){  if (typeof objectStore !== 'undefined') {        grp.listen('14/7/1', function(object, state){      if (state == 'value' && object.value == true ) {        $("#widget-69").removeClass("hide");            }    }, true);        grp.listen('14/7/1', function(object, state){      if (state == 'value' && object.value == false ) {        $("#widget-69").addClass("hide");            }    }, true);  } });

But after clicking outside the widget, the widget hides - its ok. After that, control of showing the widget from KNX object is not possible.

Thank you

[admin]

What kind of notifications do you want to display, do you want them to be visible on every page? It might be easier just to create a div element and show notifications there than to use a widget.

[miro.suchanek]

What kind of notifications do you want to display, do you want them to be visible on every page? It might be easier just to create a div element and show notifications there than to use a widget.

Hi, 

i would like to display a alarm notification independently of the current page. I would like to use in the notification window (widget) controls and also trends.