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'm very new to HTML/CSS/AngularJS. I would like to ask if there is any method to link fan speed to the rotation of image.


  • Hi James

    There definitely is a way. If you look at this forum post here : https://forum.infiniteautomation.com/topic/4070/rotate-svg

    Specifically these lines in the code

         <!--Image Ventilateur + Rotation en fonction de valeur vitesse  -->
        <ma-svg class="ventilo" id="a3352242-ae43-409c-9d8d-8ff863353339" ng-include="'/modules/mangoUI/web/img/Perso/Ventilateur.svg'" style="position: absolute; width: 230px; height: 230px; left: 95px; top: 50px;">
             <div ma-selector="#Pales" ng-class="{'ma-spin-counterclockwise': false, 'ma-spin-clockwise': true}" ng-style="{'animation-duration': 50 / (Vitesse.value - Vitesse.value % 10) + 0 + 's'}"></div>
        </ma-svg>
    

    The 'speed' of the spin will be the animation-duration as you can see a data points value is being used to calculate the speed of the spin.


  • It doesn't work for me for some reasons. here is my code.

    <ma-svg class="ventilo" id="a3352242-ae43-409c-9d8d-8ff863353339" ng-include="'/rest/v2/file-stores/default/drawing.svg'" style="position: absolute; width: 230px; height: 230px; left: 325px; top: 149px;" ng-style="{'animation-duration': 50 / (rotate.value - rotate.value % 10) + 0 + 's'}">
             <div ma-selector="#Pales" ng-class="{'ma-spin-counterclockwise': false, 'ma-spin-clockwise': true}" ng-style="{'animation-duration': 50 / (rotate.value - rotate.value % 10) + 0 + 's'}"></div>
        </ma-svg>
    

    Also how to create a class named "ventilo".


  • Hi James

    I would suggest brushing up on your HTML and CSS first before trying to do this. Unfortunately, you can't copy that code verbatim.
    You can add your own CSS classes in a <style></style> tag.
    Here are some videos on how to use the ``<ma-svg>``` component.


    I have modified the basic SVG example in the MA examples for you so you can copy it and experiment.

    <ma-get-point-value point-xid="SVG-Demo-Status" point="indicatorStatus"></ma-get-point-value>
    
    
    <div layout layout-align="start center">
        <h3 flex>
            Indicator Status: {{indicatorStatus.renderedValue}}
        </h3>
        <md-checkbox ng-model="page.spin" ng-init="page={}">
            Reverse the Spin!
        </md-checkbox>
    </div>
    
    <ma-svg ng-include="'/modules/mangoUI/web/img/status-panel.svg'">
        <div ma-selector="#indicator" ng-style="{'fill': indicatorStatus.value === 1 ? 'salmon' : indicatorStatus.value === 2 ? 'turquoise' : 'none'}"></div>
        <div ma-selector="#spinner" ng-class="{'ma-spin-clockwise': true}" ng-style="{'animation-duration': 10 + 's', 'transform-origin': '150px 300px'}"></div>
    </ma-svg>
    

    You can change the animation-duration to a higher value and you will see that it slows down.
    You can then replace the number with a variable and do some maths to change the speed.
    Ignore the transform-origin for now, what it is doing is making sure the actual element that is spinning is spinning on its own axis.


  • @James post a link / send me a link to the SVG you are using and I'll help you out.


  • Hello, finally I got it worked but any method to make it rotate from its center
    Thank you in advance```
    //your code here

     <!--- VFD Rotation--->
        <ma-svg ng-include="'/rest/v2/file-stores/default/case.svg'" style="width: 1000px; height: 800px; position: relative; position: absolute; left: 500px; top: 143px;">
            <div ma-selector="#image1269" ng-class="{'ma-spin-clockwise': true}" ng-style="{'animation-duration' : 50/(vfd.value - vfd.value%10)+0 +'s','origin': '0px 0px'}"></div>
        </ma-svg>
        <ma-point-value id="9cf0c356-f48e-4670-99fc-d78ae9c436bf" enable-popup="hide" style="position: absolute; left: 560px; top: 136px;" point-xid="DP_18b9824d-32a1-4cf2-91a2-7154d30971c6" label="VFD Speed"></ma-point-value>
        <img id="e18ed833-b486-4919-b33a-9b5a0c86a6ef" style="position: absolute; left: 146px; top: 265px;">

  • @james said in Rotating Fan:

    Hello, finally I got it worked but any method to make it rotate from its center

    See Craig's response above, you need a transform-origin.
    Please post your SVG as requested if you need help with this.


  • @James Thanks for sending the SVG. You need a transform origin like this - style="transform-origin: 190.5216px 113.70395px", that is the x attribute + half the width, and the y attribute + half the height.

    Full example using your image -

    <div class="ma-designer-root" id="a0146b73-5624-4797-8227-a61cdbfe640f" style="width: 1366px; height: 768px; position: relative;">
        <ma-svg id="949e7957-38dc-43b9-932c-97eadd759da3" style="position: absolute; left: 0px; top: 0px;" ng-include="'/rest/v2/file-stores/public/case.svg'">
            <div ma-selector="#fan" ng-class="{'ma-spin-clockwise': vfd.value > 0}" style="transform-origin: 190.5216px 113.70395px" ng-style="{'animation-duration': 50 / (vfd.value - vfd.value % 10) + 's'}"></div>
        </ma-svg>
        <md-slider id="1d33a668-f519-4292-9c17-fe3a8aba4644" style="position: absolute; left: 560px; top: 50px;" ng-model="vfd.value" ng-init="vfd.value = 50"></md-slider>
        <div id="0400c32f-f356-4099-9bf3-d0c735df0b4f" style="position: absolute; left: 603px; top: 98px;" ng-bind="vfd.value | number:1"></div>
    </div>
    

  • @Jared-Wiltshire Thank you for your help. I still got issues. Fan wont be spinning with

    ng-class="{'ma-spin-clockwise': vfd.value > 0}
    

    and it is not spinning at reading value once I put transform-origin in it.
    how to pass value into svg?
    here is my code.

    <div class="ma-designer-root" id="dfe09a12-af99-46a4-8389-c35987e89466" style="width: 1000.95px; height: 796.938px; position: relative;">
       
        <!--- Get Point Value-->
        <!--- Get VFD--->
        <ma-get-point-value id="18581801-eeaf-4f9d-bc58-ac2a7879cd3a" style="position: absolute; left: 0px; top: 0px;" point-xid="DP_18b9824d-32a1-4cf2-91a2-7154d30971c6" points="vfd"></ma-get-point-value>
    
    <ma-svg ng-include="'/rest/v2/file-stores/default/case.svg'" style="width: 1114.022px; height: 399.399px; position: relative; position: absolute; left: 0px; top: 0px; ">
           
               <div ma-selector="#ahufan" ng-class="{'ma-spin-clockwise': true}" style="transform-origin: 193.24985px 113.670235px" ng-style="{'animation-duration': 50/(vfd.value - vfd.value % 10) + 's'}"></div>
        </ma-svg>
    

    • ma-selector="#ahufan" - this is a different ID to the one that was in the SVG that you sent me
    • points="vfd" this is wrong, it should be point="vfd"

  • @Jared-Wiltshire Thank you for you supporting. It works perfectly.
    Here is my script: :D

    <!---------Rotation----------->
        <ma-svg ng-include="'/rest/v2/file-stores/default/case.svg'" style="width: 1114.022px; height: 399.399px; position: relative; position: absolute; left: 150px; top: 180px; ">
           
               <div ma-selector="#ahufan" ng-class="{'ma-spin-clockwise': vfd.value>0}" style="transform-origin: 193.32843px 114.53712px" ng-style="{'animation-duration': 50/(vfd.value - vfd.value % 10) + 's'}"></div>
        </ma-svg>