Varying text box on a timer.

[henryblu]

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:

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:

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

[phildunlap]

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)}}

[Jared Wiltshire]

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>

[henryblu]

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