Logic Machine Forum
Make Button visible/invisible - Printable Version

+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: Make Button visible/invisible (/showthread.php?tid=702)

Make Button visible/invisible - forsterm - 27.03.2017

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?

RE: Make Button visible/invisible - Erwin van der Zwart - 27.03.2017

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

RE: Make Button visible/invisible - cekca - 28.03.2017

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

Thank you

RE: Make Button visible/invisible - forsterm - 28.03.2017

Hi Erwin,

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

RE: Make Button visible/invisible - Erwin van der Zwart - 28.03.2017

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

RE: Make Button visible/invisible - savaskorkmaz - 07.10.2017

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,

RE: Make Button visible/invisible - Erwin van der Zwart - 07.10.2017

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

RE: Make Button visible/invisible - batistacaceres - 05.06.2018

(27.03.2017, 19:44)Erwin van der Zwart Wrote: 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

RE: Make Button visible/invisible - JMM - 06.06.2018

Hi,

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

BR

RE: Make Button visible/invisible - admin - 06.06.2018

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 Smile

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


RE: Make Button visible/invisible - batistacaceres - 06.06.2018

(06.06.2018, 06:32)admin Wrote: 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 Smile

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

RE: Make Button visible/invisible - DGrandes - 08.04.2019

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

RE: Make Button visible/invisible - admin - 09.04.2019

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.

RE: Make Button visible/invisible - DGrandes - 09.04.2019

(09.04.2019, 07:46)admin Wrote: 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

RE: Make Button visible/invisible - manos@dynamitec - 26.09.2019

(06.06.2018, 14:37)batistacaceres Wrote:
(06.06.2018, 06:32)admin Wrote: 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 Smile

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

RE: Make Button visible/invisible - Fahd - 07.02.2023

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

RE: Make Button visible/invisible - admin - 07.02.2023

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


RE: Make Button visible/invisible - gdimaria - 24.10.2023

(06.06.2018, 06:32)admin Wrote: 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 Smile

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