Posts: 33
Threads: 1
Joined: Mar 2017
Reputation:
3
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
Posts: 1758
Threads: 6
Joined: Jul 2015
Reputation:
115
27.03.2017, 19:44
(This post was last modified: 27.03.2017, 19:46 by 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
Posts: 44
Threads: 8
Joined: Jul 2015
Reputation:
0
Hi Erwin, how i can do if i want to make the object read-only by a group address...???
Thank you
Posts: 33
Threads: 1
Joined: Mar 2017
Reputation:
3
Hi Erwin,
thank you for your answer, I will use option 2.
Best regards
forsterm
Posts: 1758
Threads: 6
Joined: Jul 2015
Reputation:
115
28.03.2017, 18:13
(This post was last modified: 28.03.2017, 23:02 by 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
Posts: 161
Threads: 81
Joined: Jul 2015
Reputation:
1
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,
Posts: 1758
Threads: 6
Joined: Jul 2015
Reputation:
115
07.10.2017, 11:28
(This post was last modified: 07.10.2017, 14:57 by 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
Posts: 62
Threads: 14
Joined: Mar 2017
Reputation:
0
(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
Posts: 136
Threads: 20
Joined: Jul 2015
Reputation:
0
Hi,
I have the same problem with several functions and not solution at the moment
BR
Jean-Marc
Posts: 7649
Threads: 41
Joined: Jun 2015
Reputation:
441
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);
});
});
Posts: 62
Threads: 14
Joined: Mar 2017
Reputation:
0
(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
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
Posts: 237
Threads: 31
Joined: May 2018
Reputation:
2
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
Posts: 7649
Threads: 41
Joined: Jun 2015
Reputation:
441
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.
Posts: 237
Threads: 31
Joined: May 2018
Reputation:
2
(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
Posts: 133
Threads: 19
Joined: Apr 2018
Reputation:
0
(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
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
Posts: 150
Threads: 38
Joined: Mar 2021
Reputation:
2
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
Posts: 7649
Threads: 41
Joined: Jun 2015
Reputation:
441
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);
}
});
Posts: 258
Threads: 69
Joined: May 2017
Reputation:
0
(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
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
|