Custom JavaScript examples

[jlfneira]

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

[tassiebean]

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!

[Erwin van der Zwart]

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

[tassiebean]

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.

[Erwin van der Zwart]

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

[tassiebean]

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!

[davidchispas]

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?

[Daniel]

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.

[davidchispas]

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

[Daniel]

Then you need another objects which will write a value you want to the 1byte object via script.

[Hosutech]

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

[admin]

Please create a separate topic as your question is not about Custom JavaScript.

[tecnorte]

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");

[gtsamis]

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

[admin]

See if this custom CSS helps:

Code:

html {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

[gtsamis]

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

[mischa]

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

[admin]

Use grp.gevalue:

Code:

$(function() {
  var value = grp.getvalue('1/1/1');
  console.log(value);
});

[mischa]

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

[admin]

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)