@johana-crisbany-gamez

Don't feel bad. It took me a while to figure this out.

If you define a multistate data point in a virtual data source, you need to define values for the states. On the Virtual data point dialog shown above, when you mouse over the area under Values, up and down arrows will appear at the right side of that field. You can use those arrows to adjust to your first value, or just enter a number directly.

Once the correct number shows for your first value, hit enter. Your first value will now appear on a white background, like this:

You will note that the dialog is now helpfully suggesting 2 as the next value. If that works for you, just hit enter, and you will see this:

Repeat this process until you have defined all your values for the multistate data point.

Now when you click in the Start value field, you should see a list of the values you just defined appear over the field. Select the desired value.

The above is what is working for me. However, there is a known bug with this dialog.

Once you define your multistate data point and save it, if the change type is "no change", when you try to edit it you will not see the state values or the start value you defined. The dialog will not let you save changes until you again enter state values and a start value. This again is a known bug that I expect will be fixed in a future release.

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.