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.
Problem with assigning value using {{myPoint.renderedValue}}
-
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>
-
@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>
-
@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 :-)
-
@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.