Problem with assigning value using {{myPoint.renderedValue}}

Blair

Hi，
Could you please give some suggestions about the last two lines of my code? I am trying to use test={{myPoint.renderedValue}} for assigning the current value of the data point to the variable "test" and put the "test" variable into a function as parameter. The desirable effect is that the block's color keeps changing according to the data point value, which is a random numeric point XID=tsp_1 with range (-2000,2000) updating every 2 seconds, but the value could not be rendered succusfully using my code.
Do I have to include some js library? I saw this video but the download link is not available right now.
build-a-mango-dashboard-tutorial
I have read the Examples and discussions in the forum but still have no idea. I would really appreciate your help.

Sincerely,
Blair

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

<head lang="en">
    <meta charset="UTF-8">
    <style>
        #div1{
            width: 50px;
            height: 100px;
            background: rgb(0,0,0);
            margin: 0 auto;
        }
        
    </style>
</head>

<body>
    <div id="div1" ></div>
</body>

<script language="javascript">

//define three functions 
function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}
 
function rgbToHex(r, g, b) {
    return componentToHex(r) + componentToHex(g) + componentToHex(b);
}
// the x below is approx in the range of (-2000,2000)
function displaycolor(x,y) {
    var div = document.getElementById(y);
    var color = 0;
    var r1 = 0;
    var g1 = 0;
    var b1 = 0;
    
    if (x >=1600) {
        r1=255;
        g1=0;
        b1=0;
    } else if(x > 0) {
        r1=255;
        g1=(x-1600)/(-1600)*255;
        b1=0;
    } else if(x == 0) {
        r1=255;
        g1=255;
        b1=0;
    } else if(x > (-1600)) {
        r1=(x+1600)/1600*255;
        g1=255;
        b1=0;
    }else {
        r1=0;
        g1=255;
        b1=0;
    }
    
	var r2 = Math.round(r1);//round it to the neares integer
	var g2 = Math.round(g1);
	var b2 = Math.round(b1);
    color = rgbToHex(r2,g2,b2);//use the funtion
    div.style.background = "#" + color.toString(16);//set the color
}

var test = 1300;//if changed to test={{myPoint.renderedValue}}, fail to work
displaycolor(test,"div1")//else if changed to ({{myPoint.renderedValue}},"div1"), fail to work
</script>

Jared Wiltshire

@Blair The video you linked to is for Mango 2.x, I have edited the topic to make this clear.

Since it seems you are trying to use AngularJS, I'm going to assume you are using Mango 3.x and a custom page inside our new UI module.

When using AngularJS you should not be using a <script> tag anywhere in your page. You'll see if you check through our examples (please read https://help.infiniteautomation.com/getting-started/ to see how to enable the examples menu) that we don't do this anywhere. As you have also noticed you cannot use interpolation ({{ expression }}) inside a script, you use AngularJS interpolation in your markup only.

In short you should be doing something like this, using the AngularJS ngStyle directive -

<p ng-style="{'background-color': myPoint.value >=1600 ? 'rgb(255,0,0)' : 'rgb(0,255,0)' }">
    The point name is "{{myPoint.name}}" and its value is {{myPoint.renderedValue}}.
</p>

Note the use of .value as opposed to .renderedValue. We want to use the numeric value of the point, the rendered value is a string which may be comprised of a rounded number and a unit suffix.

It's pretty messy trying to put all your conditions into a single expression in the markup so I'd suggest a filter inside a user module. e.g.

define(['angular', 'require'], function(angular, require) {
'use strict';

var userModule = angular.module('userModule', ['maUiApp']);

userModule.filter('toColor', function () {
    return function (x) {
        let r1, g1, b1;
        
        if (x >=1600) {
            r1=255;
            g1=0;
            b1=0;
        } else if(x > 0) {
            r1=255;
            g1=(x-1600)/(-1600)*255;
            b1=0;
        } else if(x === 0) {
            r1=255;
            g1=255;
            b1=0;
        } else if(x > (-1600)) {
            r1=(x+1600)/1600*255;
            g1=255;
            b1=0;
        }else {
            r1=0;
            g1=255;
            b1=0;
        }
        
        r1 = Math.round(r1);
        g1 = Math.round(g1);
        b1 = Math.round(b1);
        
        return `rgb(${r1}, ${g1}, ${b1})`;
    };
});

return userModule;

}); // define

Then use it like this -

<p ng-style="{'background-color': (myPoint.value | toColor)}">
    The point name is "{{myPoint.name}}" and its value is {{myPoint.renderedValue}}.
</p>

Blair

@Jared-Wiltshire Thank you so much for your reply. Currently with my limited background knowledge I can not fully understand this, but I will learn more about AngularJS and see how it goes :-)

Jared Wiltshire

@blair said in Problem with assigning value using {{myPoint.renderedValue}}:

@Jared-Wiltshire Thank you so much for your reply. Currently with my limited background knowledge I can not fully understand this, but I will learn more about AngularJS and see how it goes :-)

Hopefully this gets you on your way. It's a bit of a shift from the old way of doing things for sure.