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.

Make Button visible/invisible
#1
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?
Best regards

forsterm
Reply
#2
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
Reply
#3
Hi Erwin, how i can do if i want to make the object read-only by a group address...???

Thank you
Reply
#4
Hi Erwin,

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

forsterm
Reply
#5
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
Reply
#6
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,
Reply
#7
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
Reply
#8
(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
Reply
#9
Hi,

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

BR
Jean-Marc
Reply
#10
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);
  });
});
Reply
#11
(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
Reply
#12
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
Reply
#13
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.
Reply
#14
(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
Reply
#15
(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
Reply
#16
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
Reply
#17
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);
  }
});
Reply
#18
(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
Reply


Forum Jump: