Button disable

[Pawel]

Is there any simple solution to make some button disabled via KNX telegram? Of course I can make svg file whit java script, but maybe there is a simple way.

[Erwin van der Zwart]

Hi Pawel,

Yes there is a much easier way (;

Create buttons like you used to and add into the additional class field this name 'disabledbyknx' 
Copy and paste this code into your custom Javascript and change object address if needed. (use a bit object or code below will not work)

Code:

$(function(){
 
  var ObjectAddress = Scada.encodeGroupAddress('1/1/1'); // Use 1 bit object !
  objectStore.addListener(ObjectAddress, function(obj, type) {
    
    if ( obj.value == true ) {
       $(".disabledbyknx").css("opacity", 0.5);
       $(".disabledbyknx").css("pointer-events", 'none');
    } else {
       $(".disabledbyknx").css("opacity", 1);
       $(".disabledbyknx").css("pointer-events", 'all');
    }

 });
 
});

All the button(s) with the additional class name 'disabledbyknx' will fade for 50% and be unclickable on KNX object 1/1/1 with value 'true' and will be clickable and 100% visable again on value 'false'.

Have fun!

BR,

Erwin van der Zwart

[Pawel]

Wow, this solution is outstanding. Simple and elegant it's opening new possibilities. Thanks Erwin.

[legolas2069]

Hi Pawel,

Yes there is a much easier way (;

Create buttons like you used to and add into the additional class field this name 'disabledbyknx' 
Copy and paste this code into your custom Javascript and change object address if needed. (use a bit object or code below will not work)

Code:

$(function(){
 
 var ObjectAddress = Scada.encodeGroupAddress('1/1/1'); // Use 1 bit object !
 objectStore.addListener(ObjectAddress, function(obj, type) {
    
    if ( obj.value == true ) {
       $(".disabledbyknx").css("opacity", 0.5);
       $(".disabledbyknx").css("pointer-events", 'none');
    } else {
       $(".disabledbyknx").css("opacity", 1);
       $(".disabledbyknx").css("pointer-events", 'all');
    }

 });
 
});

All the button(s) with the additional class name 'disabledbyknx' will fade for 50% and be unclickable on KNX object 1/1/1 with value 'true' and will be clickable and 100% visable again on value 'false'.

Have fun!

BR,

Erwin van der Zwart

Hi Erwin, I know that this is a thread from a long time ago.

I tried your solution and it worked in PC visualization, but in Smartphone visualization, it disables the button but not the value button. Do you know how to disable it?

Regards,

[admin]

Add to Custom JavaScript:

Code:

$(function() {
  if (typeof grp != 'object') {
    return;
  }

  grp.listen('1/1/1', function(object, state) {
    $('.disabledbyknx').toggleClass('el-disabled', object.value == true);
  });
});

Add to Custom CSS:

Code:

.el-disabled {
  opacity: 0.5;
}
.el-disabled,
.el-disabled * {
  pointer-events: none !important;
}

[legolas2069]

Thanks admin I'll try it

EDIT: It worked! Thanks!

[Thomas]

Hi
This code requires a new class for every dependant object. In case you have hundreds of objects you need to set readonly conditionally you have to create
grp.listen('1/1/1', function(object, state) { $('.disabledbyknx_1').toggleClass('el-disabled', object.value == true); });
grp.listen('1/1/2', function(object, state) { $('.disabledbyknx_2').toggleClass('el-disabled', object.value == true); });
...
grp.listen('1/1/100', function(object, state) { $('.disabledbyknx_100').toggleClass('el-disabled', object.value == true); });

rows.
Wouldn'd be there a nicer way? Like storing of the readonly maker object into comment of the main object?

[Erwin van der Zwart]

Hi,

In case you have hundreds of them you can make a JS array with params for each object and a function to handle them, can be done with few lines of JS code..

BR,

Erwin

[DGrandes]

Hi,

I´ve seen that in touch visu don´t work "pointer-events:none" or long push (edit by java script). Is there any way to do the same in both visualizations?

Thanks