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

[Bela Toth]

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 :)

[ThomasEinasto]

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>

[Jared Wiltshire]

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