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 whether you accept or reject 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


Forum Jump: