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.

Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website

  • 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


  • 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.


  • 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


  • 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>

  • 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


  • There is more than one way to skin a cat.

    Way #47: Use an electric sander 8^)


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