This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm that you accept these cookies being set.

Custom JavaScript examples
Hi,

I need to hide some buttons depending on active user. I've seen examples where to use "hide" property on object change so, can I get user logged some way?

Thank you
Reply
Hi,

Erwin wrote a really nice JS as follows: "Another nice custom Javascript feature: Back to startpage after x seconds when there is no user input" earlier in this thread.

I would like to accomplish something similar, but have it close any popups (widgets) that are open on the startpage. In other words, if the current page IS the Startpage, but a widget is open (covering a large section of the Startpage), I would like that widget to closeout after x seconds. Can we do that? It could be as part of the script referred to above, or perhaps a separate script that closes widgets after n seconds.

Also, really sweet, would be the ability to fade the underlying screen when a widget pops up, to give extra prominence to the widget (i.e. to direct the user obviously to the widget). Can that be done?

Thanks for the great help on this forum by all. I will turn into a contributor soon as I get more competence!

Thanks!
Reply
Hi,

I think you are looking for this: https://forum.logicmachine.net/showthrea...1#pid10711

For the fading on active widget you can try this:

Code:
$(function(){
   setInterval(function() {
    $('.layer-widget').each(function( index, element ) {
      if ( $(this).is(':visible') == 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"); 
      } else {
        $(".plan").css("opacity", 1);
      } 
    });
  }, 500);     
});


BR,

Erwin
Reply
Hi Erwin,

Thanks for your prompt response, as always! I didn't manage to get your fading background JS to work. Have you tried it? Also, what does the 500 refer to?

Just so I explain myself properly, I have two images below - one without the widget, and one with the widget. You can see that when the widget is displayed, everything in the background fades.

I will try the auto-closing widgets thread tomorrow.

Thanks.

Attached Files Thumbnail(s)
       
Reply
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
Reply
(11.10.2019, 19:46)Erwin van der Zwart Wrote: 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:
<your code above>
The 500 refers to the interval, every 0.5 seconds the browser non stop checks for any open widgets.

BR,

Erwin
This works perfectly for me - the fade in/out is super! Thanks!
Reply
Good morning, I want to create a widget to control "sonos" music with "back / Play-Pause / next" without using mosaic. How can I switch the value 1 and 2 of "1 byte" on a button?
Reply
When you add a player to a group in the sonos app it will create objects in LM to control them. You can use those objects to add to widget.
------------------------------
Ctrl+F5
Reply
(03.03.2020, 10:22)Daniel. Wrote: When you add a player to a group in the sonos app it will create objects in LM to control them. You can use those objects to add to widget.
Hi Daniel, indeed. I created a widget with 3 buttons, (4 = Back) / (1 = Play, 2 = Pause) / (3 = next) and they all use the same group address. The problem I have is that I want to make a toggle with the value 1 and 2 depending on its state. It's possible? Thank you
Reply
Then you need another objects which will write a value you want to the 1byte object via script.
------------------------------
Ctrl+F5
Reply
good morning everyone, I ask for help for this script that I have tagged for the control of two variables "setpoint" and "temp", the goal is to activate a booster when the condition occurs ("delta" <= "setpoint" - "temp" ), where the "delta" is chosen by the system manager.
When changing the "setpoint", it is verified that the mathematical condition is active (sometimes for 1 pulse, other times for a few seconds) and then deactivates the two output groups. There is no perfect answer to the mathematical condition that I believe works perfectly by reading the impulse / temporary activation of the outgoing groups from the bus monitor.

value_1 = grp.getvalue ('7/0/0') - summer / winter
value_2 = grp.getvalue ('3/3/2') - set speed
value_3 = grp.getvalue ('6/0/2') - maunal command

temp = grp.getvalue ('2/2/7')
setpoint = grp.getvalue ('2/2/17')
delta = grp.getvalue ('3/1/202')

if (delta <= (setpoint-temp)) and (value_1 == true) and (value_3 == false) then
grp.write ('2/0/92', true)
grp.write ('6/0/92', value_2)

else
  grp.write ('2/0/92', false)
  grp.write ('6/0/92', 0) - byte to 0
   
end
Reply
Please create a separate topic as your question is not about Custom JavaScript.
Reply
(11.10.2019, 19:46)Erwin van der Zwart Wrote: 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
If you have a background on your layout, you should add a few lines in order to fade the layout background too.
The code should be like this:
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.1);
      $(".plan").css("transition", "opacity 0.5s ease-in-out");
      $(".plan").css("-moz-transition", "opacity 0.5s ease-in-out");
      $(".plan").css("webkit-transition", "opacity 0.5s ease-in-out");
      $(".plan-background").css("opacity", 0.1);
      $(".plan-background").css("transition", "opacity 0.5s ease-in-out");
      $(".plan-background").css("-moz-transition", "opacity 0.5s ease-in-out");
      $(".plan-background").css("webkit-transition", "opacity 0.5s ease-in-out");
      $(".layout").css("opacity", 0.1);
      $(".layout").css("transition", "opacity 0.5s ease-in-out");
      $(".layout").css("-moz-transition", "opacity 0.5s ease-in-out");
      $(".layout").css("webkit-transition", "opacity 0.5s ease-in-out");
      $(".layout-background").css("opacity", 0.1);
      $(".layout-background").css("transition", "opacity 0.5s ease-in-out");
      $(".layout-background").css("-moz-transition", "opacity 0.5s ease-in-out");
      $(".layout-background").css("webkit-transition", "opacity 0.5s ease-in-out");
    } else {
      $(".plan").css("opacity", 1);
      $(".plan-background").css("opacity", 1);
      $(".layout").css("opacity", 1);
      $(".layout-background").css("opacity", 1);
    }
  }, 500);     
});
Notice added lines:

Right at the end before the 500);
$(".layout-background").css("opacity", 1);

Before the ELSE statement
      $(".layout-background").css("opacity", 0.1);
      $(".layout-background").css("transition", "opacity 0.5s ease-in-out");
      $(".layout-background").css("-moz-transition", "opacity 0.5s ease-in-out");
      $(".layout-background").css("webkit-transition", "opacity 0.5s ease-in-out");

Reply
Hi,

I am using the custom JavaScript for short/long press shutter function on a specific visu for more than a year without any problems.
My customer have noticed, since a week or two, that the buttons aren't working anymore. I have also checked and noticed that only the short press works.
The only addition to Erwin's script is the function below to prevent the default long press action on mobiles. 

Code:
$(function() { 
 
window.oncontextmenu = function(event) {
     event.preventDefault();
     event.stopPropagation();
     return false;
}

Can someone please verify if any update on chrome-safari prevent the script from working? Is there any updated script?

Thank you in advance
George
Reply
See if this custom CSS helps:
Code:
html {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
Reply
(06.10.2020, 09:18)admin Wrote: See if this custom CSS helps:
Code:
html {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

It does not help, now i get only the Up event on any button no matter short/long press
Reply
(02.03.2018, 11:07)Erwin van der Zwart Wrote: Hi,

Use custom JS like below and add custom class 'hidebyknx' to your elements that needs to be included:
Code:
$(function(){
  grp.listen('1/1/1', function(object, state) {
     if (state == 'value' && object.value == true) {
         $(".hidebyknx").addClass("hide");
     } else if (state == 'value' && object.value == false) {
         $(".hidebyknx").removeClass("hide");
     }
  }, true);
});

BR,

Erwin

Hi, 

How can I get the grp value on page load? 

BR,

Mischa
Reply
Use grp.gevalue:
Code:
$(function() {
  var value = grp.getvalue('1/1/1');
  console.log(value);
});
Reply
(16.12.2020, 08:02)admin Wrote: Use grp.gevalue:
Code:
$(function() {
  var value = grp.getvalue('1/1/1');
  console.log(value);
});

Thanks Admin,

I had tried that, but it was not working. it seems that I made a mistake somewhere else in my code.
found it and know it is working.

can we use al the LUA grp options in javascript grp.read, grp.write, grp.update etc etc?

BR, 
Mischa
Reply
You might be calling it before the object list is loaded. You can also use grp.listen and check for init state to get the initial object value:
Code:
$(function() {
  grp.listen('1/1/1', function(object, state) {
    if (state == 'init') {
      console.log(object.value);
    }
  });
});

These grp functions are available from JS:
  • grp.all()
  • grp.find(alias)
  • grp.gettags(alias)
  • grp.getvalue(alias)
  • grp.listen(alias, callback, all)
  • grp.tag(tags, mode)
  • grp.taglisten(tag, callback, all)
  • grp.update(alias, value)
  • grp.write(alias, value)
Reply


Forum Jump: