Logic Machine Forum
CSS Spin - Printable Version

+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: CSS Spin (/showthread.php?tid=4215)

CSS Spin - khalil - 05.09.2022

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);
  }
}


RE: CSS Spin - admin - 05.09.2022

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');
});


RE: CSS Spin - khalil - 05.09.2022

(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

RE: CSS Spin - khalil - 11.09.2022

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");
      }
   });
});


RE: CSS Spin - admin - 12.09.2022

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' : '');
  });
});


RE: CSS Spin - khalil - 12.09.2022

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

RE: CSS Spin - admin - 13.09.2022

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);
    }
  }
});


RE: CSS Spin - khalil - 14.09.2022

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