Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website

  • Hello, I am using the following code to rotate a image with a fan:

    <img id="fan" style="position: absolute; left: 216.578px; top: 440px; height: 100px;" src="/rest/v2/file-stores/default/Exhaust_fan.png" ng-class="{'ma-spin-counterclockwise': !page.spin, 'ma-spin-clockwise': page.spin}">
    

    I want to know if it's possible to link the rotation to a variable and change the rotation according to the data from that point, the point will be from 0 to 100% representing the real fan rotating speed.


  • Yes its possible, here's an example.

    Add this style to your page (we need the default duration to be 0s so we have to add our own class).

    <style>
    .my-spin-clockwise {
      transform-origin: 50% 50%;
      animation: spin-clockwise 0s linear infinite;
    }
    </style>
    

    You can then change the duration of the animation like this.

    <img src="/fan.svg" class="my-spin-clockwise" ng-style="{'animation-duration': 50 / point.value + 's'}">
    

    However the animation restarts whenever the duration changes so you may want to round the point value like so

    <img src="/fan.svg" class="my-spin-clockwise" ng-style="{'animation-duration': 50 / (point.value - point.value % 10) + 's'}">
    

  • @jared-wiltshire said in Rotating Fan:

    ng-style="{'animation-duration': 50 / (point.value - point.value % 10) + 's'}"

    Thanks, works well!


  • This post is deleted!