Make Button visible/invisible

[forsterm]

Hi,

i would like to make a button visible or invisible depending on KNX group address value.

I think I have the following options:

1. Set the field "readonly" in the "visobjects" table true or false with lua script and then i can use the "On icon" and "Off icon" parameter from a 1 bit object
2. An additional JavaScript function ("Scripting -> Edit custom JavaScript")
3. An svg with embedded JavaScript

wich of the 3 options would be the best?
Are there maybe a better solution?

[Erwin van der Zwart]

Hi,

I would use option 2, add custom class 'hidebyknx' to your elements and try this custom JS code:

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); // set to true to respond on same value
});

BR,

Erwin

[cekca]

Hi Erwin, how i can do if i want to make the object read-only by a group address...???

Thank you

[forsterm]

Hi Erwin,

thank you for your answer, I will use option 2.

[Erwin van der Zwart]

Hi Cekca,

To make it read only change .addClass("hide") and .removeClass("hide") into .addClass('item-read-only') and .removeClass('item-read-only') 

This sample uses the custom class 'lockbyknx' and adds a opacity of 50% to the image to indicate it's locked (:

Code:

$(function(){
  grp.listen('1/1/1', function(object) {
     if (object.value == true ) {
        $(".lockbyknx").addClass("item-read-only");
         $(".lockbyknx").find('img').css("opacity", 0.5);
     } else if (object.value == false ) {
        $(".lockbyknx").removeClass("item-read-only");
         $(".lockbyknx").find('img').css("opacity", 1);
     }
  }, true); // set to true to send on same value
});

BR,

Erwin

[savaskorkmaz]

Hello ,
I have a similiar situation. I don't want to change visibility. I just want to change read-only regarding another object value. How can i change via script ?
Regards,

[Erwin van der Zwart]

uHi,

Exactly the same, just remove the command that change the visibility:

Code:

$(function(){
  grp.listen('1/1/1', function(object) {
     if (object.value == true ) {
        $(".lockbyknx").addClass("item-read-only");
     } else if (object.value == false ) {
        $(".lockbyknx").removeClass("item-read-only");
     }
  }, true); // set to true to send on same value
});

Personally i think you should leave it unchanged as the original does visual indicates it's disabled.. (maybe you should change only the amount of opacity from 0.5 to 0.8 )

BR,

Erwin

[batistacaceres]

Hi,

I would use option 2, add custom class 'hidebyknx' to your elements and try this custom JS code:

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); // set to true to respond on same value
});

BR,

Erwin

Hello Erwin:

Sometimes when I reload the page after inactivity for 20 or 30 seconds, or after several reloads of the page, the button is showed again even when the value  in object to hide is true. Is like the reload is not executing the javascript code, I have tested clearing the cache, but happening the same, even I have testing with (firefox, chrome, and explorer). Why it is happenning??? How can I fix it??

BR,


Roger

[JMM]

Hi,

I have the same problem with several functions and not solution at the moment  

BR

[admin]

This might happen if object element is rendered after hide is called.

One possible solution is to add class to body element instead. Then the browser will handle the rest

Custom CSS:

Code:

body.hidebyknx .hidebyknx {
  display: none !important;
}

Custom JavaScript:

Code:

$(function(){
  grp.listen("1/1/1", function(object) {
    $(document.body).toggleClass("hidebyknx", object.value == false);
  });
});

[batistacaceres]

This might happen if object element is rendered after hide is called.

One possible solution is to add class to body element instead. Then the browser will handle the rest

Custom CSS:

Code:

body.hidebyknx .hidebyknx {
 display: none !important;
}

Custom JavaScript:

Code:

$(function(){
 grp.listen("1/1/1", function(object) {
   $(document.body).toggleClass("hidebyknx", object.value == false);
 });
});

Thank you very much, now its working very well ...

BR

[DGrandes]

Hi,

Is there any way to hide an image to a specific user?
I use a image to show custom menu with page links but some user don't have access to these links. Links objects are hidden but the image not.

Thanks

[admin]

You can hide an element if there are no elements with a certain class:

Code:

$(function() {
  if (!$('.custom-menu-item').length) {
    $('.custom-menu').addClass('hide');
  }
});

Add custom-menu-item class to any of your menu links and add custom-menu class to menu image.

[DGrandes]

You can hide an element if there are no elements with a certain class:

Code:

$(function() {
 if (!$('.custom-menu-item').length) {
   $('.custom-menu').addClass('hide');
 }
});

Add custom-menu-item class to any of your menu links and add custom-menu class to menu image.

Thanks!!

It works perfectly

[manos@dynamitec]

This might happen if object element is rendered after hide is called.

One possible solution is to add class to body element instead. Then the browser will handle the rest

Custom CSS:

Code:

body.hidebyknx .hidebyknx {
 display: none !important;
}

Custom JavaScript:

Code:

$(function(){
 grp.listen("1/1/1", function(object) {
   $(document.body).toggleClass("hidebyknx", object.value == false);
 });
});

Thank you very much, now its working very well ...

BR

Hello Admin,

I want to do this function but the trigger object is a 250byte string and I need multiple classes. (BTW is it possible to add more than one class on the same element? If yes what is the correct syntax?).  

So if the value of this object is :

1 then make visible class 'set1' and hide class 'set2,set3,...'
2 then make visible class 'set2' and hide the rest
3 ...
4 ...

Thank you

[Fahd]

Hi guys,

I will have about 50 widgets for a thermostat where I'm displaying a 1-byte object for the fan speed, I want to hide this object when the thermostat is in heat mode.
please, can I get any help?
All of them in the same order
Fan speed group address 6/6/x
Cool/heat group address 6/7/x

[admin]

Try this custom JS. Range is 6/7/1 to 6/7/50. If you need to invert the state the change var hide = !obj.value; to var hide = !!obj.value;

Code:

$(function(){
  if (!window.grp) {
    return;
  }

  function showhide(i) {
    var src = '6/6/' + i;
    var dst = '6/7/' + i;
   
    grp.listen(src, function(obj) {
      var hide = !obj.value;
      $('[data-object="' + dst + '"]').toggleClass('hide', hide);
    });
  }
 
  for (var i = 1; i <= 50; i++) {
    showhide(i);
  }
});

[gdimaria]

This might happen if object element is rendered after hide is called.

One possible solution is to add class to body element instead. Then the browser will handle the rest

Custom CSS:

Code:

body.hidebyknx .hidebyknx {
  display: none !important;
}

Custom JavaScript:

Code:

$(function(){
  grp.listen("1/1/1", function(object) {
    $(document.body).toggleClass("hidebyknx", object.value == false);
  });
});

I am using a function

Code:

$(function(){
  for (let i = 1; i <= 13; i++) {
    const selector = `.hide${i}`;
    grp.listen(`35/0/${i}`, function(object, state) {
      if (state === 'value') {
        $(selector).toggleClass("hide", object.value);
      }
    }, true); // set to true to respond on the same value
  }
});

to handle the hide/unhide of several objects  in two diffent pages. I noticed the same problem about the state of objects and I fixed it with a periodic reading. But I would avoid that. So how I could use your body element solution?

Thanks

Peppe