Can't get transform rotate() to work

[v8dave]

I found some code that Jared had posted previously for a 360 deg component and I am trying to get it to work but the value is not being shown.

I am using the following to get the wind direction from the watch list.

<ma-calc input="designer.points | filter:{name:'Wind Direction'}:true | maFirst" output="myDirection"></ma-calc>

And then using this in the code for the display but the heading remains at 0.

    <g class="direction-cones" transform="rotate(-90)">
        <g id="north" transform="rotate({{myDirection.value}})">
            <circle class="scale-1" r="100"></circle>
            <circle class="scale-2" r="100"></circle>
        </g>
    </g>

What am I doing wrong here?

[phildunlap]

Hi v8dave,

I found some code that Jared had posted previously for a 360 deg component and I am trying to get it to work but the value is not being shown.

Always good to link to the source material; is it this https://forum.infiniteautomation.com/topic/3915/very-basic-dashboard-designer-help ?

[Jared Wiltshire]

@v8dave Have you checked the value of the point is coming through by putting something like this on your page-

<pre ng-bind="myDirection.value | json"></pre>

Use the Chrome debugger to ensure that the transform attribute is being set correctly on your element. I suspect it may be a scope issue. i.e. your ma-calc element is defining the myDirection variable in a nested scope and it is inaccessible where you are trying to use it.

Try this - change myDirection to designer.myDirection wherever you use it.

I would also suggest using the ng-attr- prefix to prevent errors in your console.

ng-attr-transform="rotate({{myDirection.value}})"

[v8dave]

This is the error from the console.

mangoUi~ngMango~ngMangoServices.js?v=f41ab677f738e8ffe5b8:39 Error: <g> attribute transform: Expected number, "rotate()".

[Jared Wiltshire]

@v8dave said in Can't get heading to change:

This is the error from the console.

mangoUi~ngMango~ngMangoServices.js?v=f41ab677f738e8ffe5b8:39 Error: <g> attribute transform: Expected number, "rotate()".

You have not addressed any of the other comments I have made. You can see from that error that myDirection.value is undefined. See above for how to solve and for how to stop the error in the console.