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

  • I learned form the style via value example and modified for my data point. i am trying to use this to indicate status for good, warn, alarm, fault and isolate. The data point value will be 0, 1, 2, 3 and 4. Quite happy as it does change color when value changes. Below is the code I used. But the color will be all steady. I want to have steady green color only when "good" , but when alarms I wish to make it blink. Could you help what I need to code to make it blink when alarms? Thanks.

    <style>
        .default {
            background-color: black;
            color: white;
            position: absolute; left:100px; top: 200px;
            height: 30px;
            width:30px;
        }
        .good {
            background-color: green;
        }
        .warn {
            background-color: orange;
        }
        .alarm {
            background-color: red;
        }
        .fault {
            background-color: brown;
        }
        .isolated {
            background-color: lightgrey;
        }
    </style>
    
    <ma-get-point-value point-xid="DP_1ff7e5b2-2d09-4134-aaf8-305005db3483" point="myPoint"></ma-get-point-value>
    <div class="default" ng-class="{'good': myPoint.value === 0, 'warn': myPoint.value === 1, 'alarm': myPoint.value === 2, 'fault': myPoint.value === 3, 'isolated': myPoint.value === 4}">
        <ma-point-value point="myPoint"></ma-point-value>
    </div>
    


  • @ozone There's actually a CSS class built into Mango which will make this really easy.
    Just add ma-throb-opacity to your ng-class expression.

    ng-class="{'good': myPoint.value === 0, 'warn': myPoint.value === 1, 'alarm': myPoint.value === 2, 'fault': myPoint.value === 3, 'isolated': myPoint.value === 4, 'ma-throb-opacity': myPoint.value > 0 }"
    

    If you want to see how it works, or modify it a bit, the CSS is supplied in this Mango example -
    /ui/examples/single-value-displays/led-indicator


  • @jared-wiltshire

    Thank you so much for the help. . I finally got it working using code you suggested, studied the example and modified to what I wanted. Works really well.