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.

How to change the rotation speed in images using knx objects values
#1
Hello:


I want to change the rotation speed that some images have with css class (.vel1) the rotation speed is supplied by one knx object, How can I do it??

Basically, I want to show the wind Speed image, with and image rotation.

I have got the rotation using only in CSS, but I cant get it when I have to pass time parameters, from the KNX objetct. I am doing something wrong.

I would like to know, How can I change the parameters in one CSS class directly from de custom Datasheet-style, for example parameter time for rotation. I want to change the time parameter from class (.vel1), and this change will afecct all images that contains this class in Additional classes.

Best Regard

Roger
**************** Code I have tried *********************

*** from CSS ***

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

.vel1{
/*    -webkit-animation: 3s rotate linear infinite;
    animation: 3s rotate linear infinite;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;*/
}

***** from JavaScript *****

  grp.listen("42/2/7", function(object) {
    var d = object.value;
    $(".vel1").css({
          "-webkit-animation: "+d+"s rotate linear infinite",
          "animation: "+d+"s rotate linear infinite",
          "-webkit-transform-origin: 50% 50%",
          "transform-origin: 50% 50%"
     });
Reply
#2
You have it in reverse by setting animation time to wind speed. So higher speed will produce slower animation. Also you don't need to set all css properties again, only the animation ones.
Reply
#3
(17.06.2018, 09:45)admin Wrote: You have it in reverse by setting animation time to wind speed. So higher speed will produce slower animation. Also you don't need to set all css properties again, only the animation ones.

Thanks admin for your quick response,  I know I have to improve the code for correct functioning about reverse by setting animation time, but the problems is that I have done a lot of code but it doesnt work, I have doing something bad, or I have missing some properties. About change only the animation times, I have tried to do it, but I can not get the gol. Could you help me please??

I have tried with the next code, but it doesnt work.

*****  Code *******

  grp.listen("42/2/7", function(object) {
    var numvel = object.value;
    var strvel = numvel.toString();
    $(".vel1").css({
          "-webkit-animation: " + strvel + "s rotate linear infinite",
          "animation: " + strvel + "s rotate linear infinite",
          "-webkit-transform-origin: 50% 50%",
          "transform-origin: 50% 50%"
     })
  });

Best Regards
Roger
Reply
#4
You are setting properties incorrectly, try this and remove transform origin entries:
Code:
"animation": strvel + "s rotate linear infinite",
Reply
#5
(17.06.2018, 12:22)admin Wrote: You are setting properties incorrectly, try this and remove transform origin entries:
Code:
"animation": strvel + "s rotate linear infinite",

Hi admin:

Thank you very much, now it works very well

****** Code ********


  grp.listen("42/2/7", function(object) {
    var numvel = object.value;
    var strvel = numvel.toString();
    $(".vel1").css({
          "animation": strvel + "s rotate linear infinite",
          "transform-origin": " 50% 50%"
     })
  });


best regards
Roger
Reply


Forum Jump: