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

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


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


  • @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}})"
    

  • This is the error from the console.

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


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