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.

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

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

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>

Blair

@Blair

Best posts made by Blair

Latest posts made by Blair