Multistate Image Help

[NWong]

Using a virtual data point, I am able to make an image switch between two different states automatically (making the image flash). What I want to do is make the image be able to switch between three different states depending on the conditions met:

if x = 0 and y = 0 AND if x = 1 and y = 1:
Condition 1: Image is flashing (make it toggle between two states)

if x = 1 and y = 0:
Condition 2: Image is green

if x = 0 and y = 1
Condition 3: Image is red

How would I set conditions using a virtual data point? I notice there are true and false condition images that can be used, could these be used using a virtual data point? Any help would be appreciated.

Mango Core Verison: 3.6.0
Mango API Module Version: 3.6.0
Mango UI Module Version: 3.6.1
Platform: Windows 10 Pro
Browser: Google Chrome

[pyeager]

This code sets the ng-class for the image based on a variable.

First, some code to get the value of the variable:

<ma-get-point-value id="a5ed9ee7-925f-4950-a46a-e4b02113c062" point="sequence1" point-xid="DP_6122694c-e93e-48d0-a423-2b23d88b45f9"></ma-get-point-value>

Now, an image that happens to have a transparent background, and uses ng-class:

<img id="ed3362f5-9f30-47f8-877b-6eb1fa0f3f19" style="position: absolute; left: 125px; top: 170px; width: 30px; height: 28px;" src="/rest/v2/file-stores/default/HKDStickL.png" ng-class="{0:'idle', 1:'heat', 2:'air', 3:'heatair', 4:'a0', 5:'s1', 6:'s2', 7:'s3', 8:'manual'} [sequence1.value]">

Based on the value of sequnce1, ng-class gets set to idle, heat, air, heatair, a0,s1, s2, s3, or manual.

CSS defines what the background of the image looks like for each class.

That covers changing the image based on a variable.

You have three desired conditions - green, red, and flashing. For discussion purposes, let's assign them values 0, 1, and 2. I would suggest a scripting data source that looks at x and y, and then sets a virtual data point according to the desired behavior. If x and y are limited to values 1 and 0, you can simplify the logic a bit.

//compute state of image

if( x == y ) {
  //flash
  result = 2;
}
else if( x == 1 ) {
  //green
  result = 1;
}
else {
  //red
  result = 0;
}
// set virtual data point

var query = "eq(deviceName,YourDeviceName)&eq(name,YourDataPointName)";
var dataPoints = DataPointQuery.query( query );
if( dataPoints.size() ){
    dataPoints[0].runtime.set( result );
}

I hope this helps.

[MattFox]

Alternatively, you can use a meta data source and not need the additional virtual points, simply return the result and use that point in the mango dashboard for your image

[phildunlap]

Hi NWong,

Alternatively, if you only need this condition displayed and not tracked in data, you could probably have three images (or two and a gif) and then port your logic into ng-show attributes of the image elements to handle which image is displayed.

https://docs.angularjs.org/api/ng/directive/ngShow

like...

<img ng-show="(xPoint.value == 0 && yPoint.value == 0) || (xPoint.value == 1 && yPoint.value == 1)" ...></img>

[Jared Wiltshire]

There is more than one way to skin a cat. I would suggest a combination of the above approaches. If you want, you can use a meta point to simplify the logic in your dashboard.

It is the alternating between images that presents the most problems. To do this you will either need
a) A user component with a timer logic in the JavaScript
b) A CSS animation that switches the background image of an element
c) An animated GIF created from the two images

Another approach which is not exactly what you prescribed is to use a CSS filter on your image which changes its color. This would be the simplest approach as it only requires a single image. You can just use ng-class to apply the CSS class to the image depending on your conditions.

See https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate and https://codepen.io/stilllife00/pen/avXpgJ

[pyeager]

There is more than one way to skin a cat.

Way #47: Use an electric sander 8^)

[NWong]

Thanks to everyone who responded, I ended up using a meta data point and implementing a gif for one of the conditions.