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 that you accept these cookies being set.

CSS Spin
#1
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);
  }
}
Best Regards,
Reply
#2
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');
});
Reply
#3
(05.09.2022, 10:26)admin Wrote: 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 Smile
Best Regards,
Reply
#4
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");
      }
   });
});
Best Regards,
Reply
#5
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' : '');
  });
});
Reply
#6
Thank admin
and regarding the spin issue how to solve it?
Best Regards,
Reply
#7
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);
    }
  }
});
Reply
#8
Thanks admin
I will test in the next site visit.
BR,
Best Regards,
Reply


Forum Jump: