Rotating Fan

[James]

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.

[CraigWeb]

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.

[James]

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".

[CraigWeb]

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.

[Jared Wiltshire]

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

[James]

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

[Jared Wiltshire]

@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.

[Jared Wiltshire]

@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>

[James]

@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>

[Jared Wiltshire]

• 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"

[James]

@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>