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,

    Here is a simple example of taking a point and displaying its value:

     <ma-get-point-value point-xid="Site_Total_Real_Power" point="myPoint" ></ma-get-point-value>
    
    <p>
        The point name is "{{myPoint.name}}" and its value is {{myPoint.renderedValue}}
    </P>
    

    The output appears like:
    0_1499224682049_6176f54f-3a79-464d-8c46-09b1c1f0d1af-image.png
    Is there a potential way to vary the display of this text on a dashboard every 10 seconds? For example, in 10 seconds it could read:
    0_1499224885303_bb267f8b-d1d5-461f-80fa-1dfce4ac9ff9-image.png

    My only attempt was making a java script which changes display text every 5 seconds, but I don't know how to pass angular values into the script?

        <script type="text/javascript">
        var text = ["and its value is", "and its rendered value is"];
        var counter = 0;
        var elem = document.getElementById("changeText");
        setIntervalAndExecute(change, 5000);
        function change() {
         elem.innerHTML = text[counter];
            counter++;
            if(counter >= text.length) { counter = 0; }
        }
        function setIntervalAndExecute(fn, t) {
           fn();
           return(setInterval(fn, t));
        }
        </script>
    

    Does anyone have suggestions?
    Cheers, Henry


  • Hi Henry,

    Someone else may have a better way of doing it, but here's me using a checkbox as the pass from my JavaScript to the angular model, so a hidden input is one option.

    <!-- Get a point (and value) using its XID and assign it to an output variable "myPoint" -->
    <ma-get-point-value point-xid="DP_72f9b542-b663-4b87-b7b8-d33a7b4e4c26" point="myPoint"></ma-get-point-value>
    <script>
      setInterval(function(){
          document.getElementById("color-toggle").click();
      }, 5000);
    </script>
    <input type="checkbox" ng-model="color" id="color-toggle" value=false></input>
    <p ng-style="color ? {color:'green'} : {color:'red'} ">
        The point name is "{{myPoint.name}}" and its value is {{myPoint.renderedValue}} with color: {{color}}.
    </p>
    

    In your particular case I would wonder if having all the possible texts written in the HTML is better, then only use JavaScript to hide or unhide the section you want displayed? For instance the divide two would be something like {{(myPoint.value /2).toFixed(1)}}


  • OK, I'd like to present a different solution which should be a little cleaner.

    This uses our built in directive <ma-now> (basically a clock that updates on a set interval)

    <ma-get-point-value point-xid="DP_698831" point="myPoint"></ma-get-point-value>
    <ma-now update-interval="5 seconds" on-change="tick = !tick"></ma-now>
    
    <p ng-if="tick">
        The point name is "{{myPoint.name}}" and its value is {{myPoint.value | number:2}}.
    </p>
    <p ng-if="!tick">
        The point name is "{{myPoint.name}}" and half its value is {{myPoint.value / 2 | number:2}}.
    </p>
    

    If you need more than 2 states, here's another example that will cycle through 5 different states

    <ma-get-point-value point-xid="DP_698831" point="myPoint"></ma-get-point-value>
    <ma-now update-interval="5 seconds" ng-init="tick = 1" on-change="tick = tick < 5 ? tick + 1 : 1"></ma-now>
    
    Tick number {{tick}}
    
    <div ng-switch="tick">
        <p ng-switch-when="1">
            The point name is "{{myPoint.name}}" and its value is {{myPoint.value | number:2}}.
        </p>
        <p ng-switch-when="2">
            The point name is "{{myPoint.name}}" and half its value is {{myPoint.value / 2 | number:2}}.
        </p>
    </div>
    

  • That's exactly what I was after - thank you very much!