Change attribute in visu following a knx object

[Andrea Becagli]

I have been asked to make some elements of the visualization "read-only" if a specified KNX object is off. Is there a way I can do this?

[admin]

See this: https://forum.logicmachine.net/showthrea...9&pid=8921

[Andrea Becagli]

Okay, I saw the example. I am trying to make it work, but I need to know if it is possible to use more than one "additional class" per object since I already have a generic class handling the animations of all the buttons, and I need this to happen to just a bunch of those.

[admin]

You can set any number of additional classes, separated by space.

[Andrea Becagli]

Does not seem to be working, I probably got something wrong 

I pasted this in in my javascript custom:

Code:

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

  grp.listen('32/1/22', function(object, state) {
    $('.dis_da_totale').toggleClass('el-disabled', object.value == false);
  });
});

 
pasted this in Custom CSS:

Code:

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

and I used dis_da_totale as an additional class for the button is that correct, or am I missing something?

[admin]

Your example works fine for me. Use browser dev tools (F12) to check if the element has a specific class.

[Andrea Becagli]

Maybe then I did not understand what i supposed to do. Like I expected the button to stop working as long as the value of "32/1/22" is false. Is this correct?

[Erwin van der Zwart]

Your example works fine for me. Use browser dev tools (F12) to check if the element has a specific class.

I think he did not also add the class el-disabled to the additonal classes so the CSS does not apply to the element because of the class dis_da_totale is used, so intthis case the additional class needs to hold both dis_da_totale el-disabled or am i wrong?

[Andrea Becagli]

Your example works fine for me. Use browser dev tools (F12) to check if the element has a specific class.

I think he did not also add the class el-disabled to the additonal classes so the CSS does not apply to the element because of the class dis_da_totale is used, so intthis case the additional class needs to hold both dis_da_totale el-disabled or am i wrong?

I just tried that but it makes the element disabled no matter what the value is.

I forgot to say that I checked with dev tools and the element seems to have the "dis_da_totale" class

[admin]

Post a screenshot of the relevant visualization element settings.

[Andrea Becagli]

Post a screenshot of the relevant visualization element settings.

I have attached two screenshots: the settings and the actual visu.  "uso TOTALE OFF" is the object which should lock the buttons below

[admin]

Send your backup via PM. Use WeTransfer or another similar service.

[Andrea Becagli]

Send your backup via PM. Use WeTransfer or another similar service.

Here you go: https://we.tl/...

[admin]

It's not working because the previous function in Custom JavaScript fails with an error. Change it to this and it will work:

Code:

$(function(){
  $('.slider-alt').each(function(_, el) {
    var $el = $(el), addr = $el.data('object'), icon = $el.find('.icon');
    if (addr) {
      grp.listen(addr, function(obj) {
        var val = obj.value || false;
        //val = Math.round(2.55 * (100 - val));
        var name = el.getAttribute('data-object-name');
        el.textContent = name
      });
    }
  });
});

[Andrea Becagli]

It's not working because the previous function in Custom JavaScript fails with an error. Change it to this and it will work:

Code:

$(function(){
  $('.slider-alt').each(function(_, el) {
    var $el = $(el), addr = $el.data('object'), icon = $el.find('.icon');
    if (addr) {
      grp.listen(addr, function(obj) {
        var val = obj.value || false;
        //val = Math.round(2.55 * (100 - val));
        var name = el.getAttribute('data-object-name');
        el.textContent = name
      });
    }
  });
});

Thanks, admin. Problem solved as always