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

Trying to trigger different colors, with color indicator, in Dashboard, using string type data.


  • Greetings. I would appreciate some help on this. I'm ripping my hair out trying to figure this out.

    I have an MQTT device, which mango is subscribing Alphanumeric (string) data. In Dashboard, how do I make "color indicator" change state based on the string data (not boolean type). Example: "ON" would trigger color1, "OFF" would trigger color2?

    I threw the kitchen sink at "Element specific"... nada.

    also, how do I use the "value" and "render-value" in "Element specific"... the help section omitted that part...

    Thank you :)


  • Hi Bela,

    I assume you are trying to use the new UI dashboards?

    If so take a look at /ui/examples/basics/style-via-value

    Following is there:

    <style>
        .default {
            background-color: black;
            color: white;
        }
    
        .good {
            background-color: green;
        }
    
        .warn {
            background-color: orange;
        }
    
        .bad {
            background-color: red;
        }
    </style>
    
    <ma-filtering-point-list ng-model="myPoint" auto-init="true" data-type="NUMERIC"></ma-filtering-point-list>
    
    <h3>CSS class based on range (numeric points)</h3>
    <div class="default" ng-class="{'good': myPoint.value < 100, 'warn': myPoint.value >= 100 &amp;&amp; myPoint.value < 200, 'bad': myPoint.value >= 200}">
        <label>Point value:</label>
        <ma-point-value point="myPoint"></ma-point-value>
    </div>
    
    <h3>CSS class based on exact value (multistate/binary points)</h3>
    <div class="default" ng-class="{'good': myPoint.value === 0, 'warn': myPoint.value === 1, 'bad': myPoint.value === 2}">
        <label>Point value:</label>
        <ma-point-value point="myPoint"></ma-point-value>
    </div>
    
    <h3>Hide/show based on value</h3>
    <div class="default good" ng-show="myPoint.value === 0">
        <label>Point value:</label>
        <ma-point-value point="myPoint"></ma-point-value>
    </div>
    <div class="default bad" ng-hide="myPoint.value === 0">
        <label>Point value:</label>
        <ma-point-value point="myPoint"></ma-point-value>
    </div>
    
    <h3>Switch based on value</h3>
    <div ng-switch="myPoint.value">
        <div ng-switch-when="0">Point is zero</div>
        <div ng-switch-when="1">Point is one</div>
        <div ng-switch-default>Point has other value</div>
    </div>
    

    Here is documentation about the directive used in example. https://docs.angularjs.org/api/ng/directive/ngClass

    Example about your case.

    <style>
    
        .default {
            background-color: black;
            color: white;
        }
    
        .ONclass{
            background-color: green;
        }
    
        .OFFclass {
            background-color: orange;
        }
    
    
    </style>
    <!-- Get our point from Mango -->
    <ma-get-point-value point-xid="MQTTdeviceXID" point="MQTTdevice"></ma-get-point-value>
    
    <div class="default" ng-class="{'ONclass': MQTTdevice.value === 'ON', 'OFFclass': MQTTdevice.value === 'OFF'}">
        <label>Point value:</label>
        <ma-point-value point="MQTTdevice"></ma-point-value>
    </div>
    
    

    One can also do it another way without using class but using ngStyle i.e https://docs.angularjs.org/api/ng/directive/ngStyle

    <!-- Get our point from Mango -->
    <ma-get-point-value point-xid="MQTTdeviceXID" point="MQTTdevice"></ma-get-point-value>
    
    <!-- if ON then green else red -->
    <div class="default" ng-style="{ background-color: MQTTdevice.value == 'ON' ? 'green' : 'red' }">
        <label>Point value:</label>
        <ma-point-value point="MQTTdevice"></ma-point-value>
    </div>
    
    

  • @bela-toth said in Trying to trigger different colors, with color indicator, in Dashboard, using string type data.:

    I have an MQTT device, which mango is subscribing Alphanumeric (string) data. In Dashboard, how do I make "color indicator" change state based on the string data (not boolean type). Example: "ON" would trigger color1, "OFF" would trigger color2?

    From the <ma-indicator> documentation - "Only for use with binary and multistate points."

    @ThomasEinasto has provided an alternative method above. Thank you Thomas.
    There is also another relavent example at this Mango URL -
    /ui/examples/single-value-displays/led-indicator

    Have you also tried setting the data point type to binary instead of alpha-numeric? I would think that should work for the MQTT data source.