Custom JavaScript examples

[serkank]

can i access to a visulation object properties with javasciript ? 

for example  if i add a button from visulation object  , can i get/Set  Name , Grup , Touch icon , On icon , Off icon ?

[admin]

You cannot change these properties from the JavaScript side. You can only access the mapped object / status group address via "object" and "status-object" data properties of each element.
Can you explain what exactly are you trying to achieve?

[serkank]

You cannot change these properties from the JavaScript side. You can only access the mapped object / status group address via "object" and "status-object" data properties of each element.
Can you explain what exactly are you trying to achieve?

I want add a object  in visulation and with javascript  i change this object with <Div> ,<img>  , <input>  and Css Style 
For Example 
 

1. Add a visulation object with MainObject(2/1/100 Sensor Time )
   
2. Acces it Javascipt and get GrupAdress 
   
3. Delete or Hide This object 
   
4. add html  input text box 
   
5. if user write a value it  , its send to grup adress Directly  
   

Another Example
   i want a button Send a 1 byte value  (1=Comfort Mode , 4=Protection Mode )

1. From Visulation a object with MainObject (2/3/1 MODE)
   
2. Access it javascript and get grup adress
   
3. if its pressed change value 1 or 4 
   

i want get MainObject from visulation object and use this adress directly without use any virtual object

[tigi]

I haven't read the full thread, so maybe it's already asked,...

1. How can I make a certain 'text label object' align from the center out instead from the left.
Now when a value gets updated with a longer string it is ankered at the left and expands at the right.

2. How can I make a certain 'text label object' center it's object to the page size, so it is always centered
Now when I load the visualisation on a pc and smartphone the text object shifts in the left-right direction, probably based on resolution differences and the rendering of text I guess.
It doesn't do that with other objects.

[admin]

See this: https://forum.logicmachine.net/showthread.php?tid=56

[khalil]

Hi,

Sorry, i tested with only 1 widget and then it works, but when having more then 1 widget i does not work (:

Here is a updated version for multiple widgets:

Code:

$(function(){
   setInterval(function() {
    var WidgetVisible = false;
    $('.layer-widget').each(function( index, element ) {
      if ( $(this).is(':visible') == true) {
        WidgetVisible = true;
      }
    });
    if (WidgetVisible == true){     
      $(".plan").css("opacity", 0.4);
      $(".plan").css("transition", "opacity 1s ease-in-out");
      $(".plan").css("-moz-transition", "opacity 1s ease-in-out");
      $(".plan").css("webkit-transition", "opacity 1s ease-in-out");
      $(".plan-background").css("opacity", 0.4);
      $(".plan-background").css("transition", "opacity 1s ease-in-out");
      $(".plan-background").css("-moz-transition", "opacity 1s ease-in-out");
      $(".plan-background").css("webkit-transition", "opacity 1s ease-in-out");
      $(".layout").css("opacity", 0.4);
      $(".layout").css("transition", "opacity 1s ease-in-out");
      $(".layout").css("-moz-transition", "opacity 1s ease-in-out");
      $(".layout").css("webkit-transition", "opacity 1s ease-in-out");
    } else {
      $(".plan").css("opacity", 1);
      $(".plan-background").css("opacity", 1);
      $(".layout").css("opacity", 1);
    }
  }, 500);     
});

The 500 refers to the interval, every 0.5 seconds the browser non stop checks for any open widgets.

BR,

Erwin

thanks for this good JS
how to make the background read-only, means if I click outside the widget -where there are lights, shutters,....- the widget will close and nothing will be changed in the background
Please see the attached Built-in 251.600 6 byte DALI RGBW object widget

any idea @ admin

[tigi]

See this: https://forum.logicmachine.net/showthread.php?tid=56

Thank you, however this didn't solve the problem completely when viewing the visualization on a pc or smartphone, there was still shifting of the text field itself
I ended up making a custom .lp file with html, css, embedded lua code, saved it in user dir and loaded it as iframe, now cross-devices it shows the same.

I would like to implement more this way but I'm currently struggling to find a wysiwyg html5 editor which I can use to design those pages.
I found Bluegriffon, which is in a sense very good but it's auto-correction feature messes up the lua embedded code, it can only handle php embedded code.
Now I'm using placeholder text and replace these afterwards in notepad++ with the lua embedded code, not really convenient.

Can anyone suggest a good (free) wysiwyg html(5) editor that leaves lua embedded code intact?

[mitja.perko]

Hello everyone 
I would like to program a calculation for a heating curve and also display it. This should look similar to the normal trends. Can someone tell me which frameworks or libraries the trends were realized with?

[admin]

See this: https://forum.logicmachine.net/showthread.php?tid=4202

[mitja.perko]

See this: https://forum.logicmachine.net/showthread.php?tid=4202

Can't I use the css and js that are already included on the logicmachine. It should look the same, just slightly modified.

[admin]

You can but we don't have any documentation or examples on how to use trends library for custom charts.

[Joep]

Hi,

No, that would be to easy (:

Add this after line 24:

Code:

$(location).attr("href", "/logout");

So result looks like:

Code:

 var SE_Goto_Startpage = No_Usage_Detected(function(e) {
    if ( currentPlanId != SE_Startpage ) {
        showPlan(SE_Startpage);
        $(location).attr("href", "/logout");
    }
  }, SE_Timeout);

BR,

Erwin

Hi Erwin,

I've modified your example to a version that only does the logout part without the goto startpage part as you can see in the script below. Only issue is that the iframe part is not working any longer and i can't figure out how to solve this. Do you have any idea?

Code:

$(function() {
 
  // Logout after x seconds (in miliseconds)
  var SE_Timeout = 90000; // adjust this timer value if needed (90 seconds in miliseconds)
  var eventlist = 'vclick vmousedown vmouseout touchend';
 
  // Timer function no usage detected
  function No_Usage_Detected(callback, timeout, _this) {
    var timer;
    return function(e) {
      var _that = this;
      if (timer)
          clearTimeout(timer);
      timer = setTimeout(function() {
          callback.call(_this || _that, e);
      }, timeout);
    }
  }
 
  // Logout when timer elapsed
  var SE_Goto_Login = No_Usage_Detected(function(e) {
    $(location).attr("href", "/logout");
  }, SE_Timeout);
 
  // Add event listener to document to detect user input
  $(document).on(eventlist, function() {
    SE_Goto_Login();
  });
 
  // Add event listener to all iframes to detect user input inside iframes
  $('iframe').load(function() {
    var iframe = $('iframe').contents().find('html');
    iframe.on(eventlist, function(event) {
     SE_Goto_Login();
    });
  });
 
});

[sgraystar]

Joep, try changing this

Code:

$('iframe').load(function() {

to

Code:

$('iframe').on('load', function() {

Others may also comment on whether .one is better than .on

[sgraystar]

Hi Erwin,

Thank you for the many useful posts on these forums.

A question on the timeout to home page in combination with edgar's doorbell script.

If I open the doorbell page manually by clicking a button the timeout script works, but if I open the same page by the doorbell script with showPlan(id) the timeout script does not work.
Is this expected?

I have implemented a workaround by adding an invisible button to auto click and open an invisible widget on the doorbell page.
Is there a better way?

Cheers

[admin]

Use this revised version. The timeout timer is reset when a plan changes (either by user interaction or by calling showPlan):

Code:

$(function() {
  var timeout = 5 // in seconds
  var ticks = 0  
  var events = 'vclick vmousedown vmouseout touchend'

  setInterval(function() {
    ticks++

    if (ticks == timeout) {
      window.location = '/logout'
    }
  }, 1000)

  function reset() {
    ticks = 0
  }

  $(document).on(events, reset)
  $(document.body).on('showplan', reset)
  
  $('iframe').on('load', function() {
    try {
      $(this).contents().find('html').on(events, reset)
    } catch (e) {}
  })
})

[Joep]

Use this revised version. The timeout timer is reset when a plan changes (either by user interaction or by calling showPlan):

Code:

$(function() {
  var timeout = 5 // in seconds
  var ticks = 0 
  var events = 'vclick vmousedown vmouseout touchend'

  setInterval(function() {
    ticks++

    if (ticks == timeout) {
      window.location = '/logout'
    }
  }, 1000)

  function reset() {
    ticks = 0
  }

  $(document).on(events, reset)
  $(document.body).on('showplan', reset)
 
  $('iframe').load(function() {
    try {
      $(this).contents().find('html').on(events, reset)
    } catch (e) {}
  })
})

It still doesn't work for iframes unfortunately.

[admin]

It should be $('iframe').on('load', ... instead of $('iframe').load(...
But keep in mind that this won't work for iframes that are on a different IP/domain due to browser's security policies.

[sgraystar]

Thanks admin

[iridium]

Hello,
Is it possible to modify the group addresses of an object?
I need 70 identical widgets that only change the group addresses. Is it possible to modify these addresses according to the object that calls the widget?

Thanks

[admin]

Check this: https://forum.logicmachine.net/showthrea...2#pid17512