How to change the rotation speed in images using knx objects values

How to change the rotation speed in images using knx objects values - 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: How to change the rotation speed in images using knx objects values (/showthread.php?tid=1450)

How to change the rotation speed in images using knx objects values - batistacaceres - 17.06.2018

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

RE: How to change the rotation speed in images using knx objects values - admin - 17.06.2018

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.

RE: How to change the rotation speed in images using knx objects values - batistacaceres - 17.06.2018

(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

RE: How to change the rotation speed in images using knx objects values - admin - 17.06.2018

You are setting properties incorrectly, try this and remove transform origin entries:

Code:
"animation": strvel + "s rotate linear infinite",

RE: How to change the rotation speed in images using knx objects values - batistacaceres - 17.06.2018

(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