CSS Spin

[khalil]

Hello 
How to make this CSS Spin Work for Read only objects
Its work for non read only objects

Code:

/* CSS Spin Animation with JS */
.spin-animation.ok-a.ok-b {
  animation: spin 0.5s infinite linear;
}

@keyframes spin {
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}

[admin]

Read-only disables transform modifications. Add this to Custom JS to fix this issue:

Code:

$(function() {
  $('.spin-animation.item-read-only')
    .removeClass('item-read-only')
    .css('pointer-events', 'none');
});

[khalil]

Read-only disables transform modifications. Add this to Custom JS to fix this issue:

Code:

$(function() {
  $('.spin-animation.item-read-only')
    .removeClass('item-read-only')
    .css('pointer-events', 'none');
});

Thank you admin 
Works good

[khalil]

Hello admin,

Fan Didn't Spin in the first time, after second change or browser refresh it become ok!

here is the JS I used:

Code:

// Spin/High Speed Fan


$(function(){
  if (window.grp) {
    function listen(i) {
      grp.listen('1/7/' + i, function(object) {
          $('.spin-animation.item-read-only')
                    .removeClass('item-read-only')
                    .css('pointer-events', 'none');
          $('.spin-' +i).toggleClass('spin-animation', object.value == true);
      });
    }
   
    for (var i = 1; i <= 40; i++) {
      listen(i);
    }
  }
});

---

Another issue I faced:
I used This Rotate JS Code:

Code:

// Rotate
$(function(){
  $('[class*=rotate-]').each(function(index, el) {
    var match = el.className.match(/rotate\-(\d+)/);
    el.style.transform = 'rotate(' + match[1] + 'deg';
  });
});

But I added another JS Code to Enable/Disable read only property, Because these objects controlled by Motion sensors but I want to give the user control in case of Motion failure.
But when objects changed to Read only by the following JS; rotate malfunction
 

Code:

$(function(){
   grp.listen('50/5/21', function(object) {
      if (object.value == true ) {
         $(".lockbyknx").addClass("item-read-only");
      } else if (object.value == false ) {
         $(".lockbyknx").removeClass("item-read-only");
      }
   });
});

[admin]

Instead of using item-read-only class you can just block pointer events via CSS:

Code:

$(function(){
  grp.listen('50/5/21', function(object) {
    $('.lockbyknx').css('pointer-events', object.value ? 'none' : '');
  });
});

[khalil]

Thank admin
and regarding the spin issue how to solve it?

[admin]

Try this:

Code:

$(function(){
  if (window.grp) {
    function listen(i) {
      grp.listen('1/7/' + i, function(object) {
          $('.spin-' +i).toggleClass('spin-animation', object.value == true);
          $('.spin-animation.item-read-only')
                    .removeClass('item-read-only')
                    .css('pointer-events', 'none');
      });
    }
   
    for (var i = 1; i <= 40; i++) {
      listen(i);
    }
  }
});

[khalil]

Thanks admin
I will test in the next site visit.
BR,