How to use pay load in one text output trigger color applied to another?

Dashboard
,
1

I have one tcp req > func rtn msg > text node output being either 'Main' or 'Sub'.
In another similar node I have a frequency readout from same tcp request .
When first node shows Sub, I would like that and the freq readout to both display in Cyan color.

Thankyou.

2

Better off using a CSS class than encoding the (depreciated) font element into text.

chrome_qjWu4kSw0X

chrome_efEC3GhE2b

Demo flow (use CTRL+I to import)

[{"id":"e30f50eced1d4668","type":"inject","z":"7eecf5f1d763605a","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"Main","payloadType":"str","x":1794,"y":240,"wires":[["0982de3afd334584"]]},{"id":"c8e2fef72821ad3c","type":"debug","z":"7eecf5f1d763605a","name":"","active":true,"tosidebar":false,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":2166,"y":304,"wires":[]},{"id":"81bf8b1d6c478e15","type":"ui_text","z":"7eecf5f1d763605a","group":"5d6cc5965f273db3","order":2,"width":0,"height":0,"name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","className":"","x":2142,"y":240,"wires":[]},{"id":"6a6960ee76c2d4da","type":"inject","z":"7eecf5f1d763605a","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"Sub","payloadType":"str","x":1794,"y":288,"wires":[["0982de3afd334584"]]},{"id":"0982de3afd334584","type":"change","z":"7eecf5f1d763605a","name":"Set className","rules":[{"t":"set","p":"className","pt":"msg","to":"payload = \"Sub\" ? \"text-cyan\": \"\"","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":1968,"y":240,"wires":[["81bf8b1d6c478e15","c8e2fef72821ad3c","a37787e572c76722"]]},{"id":"4ceb298ba4b70f1b","type":"ui_template","z":"7eecf5f1d763605a","group":"81dd3718.b97888","name":"CSS","order":1,"width":0,"height":0,"format":"<style>\n    .nr-dashboard-widget-text.text-cyan > p.value {\n        color: cyan\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":2142,"y":192,"wires":[[]]},{"id":"a37787e572c76722","type":"debug","z":"7eecf5f1d763605a","name":"","active":true,"tosidebar":false,"console":false,"tostatus":true,"complete":"className","targetType":"msg","statusVal":"payload","statusType":"auto","x":2176,"y":352,"wires":[]},{"id":"5d6cc5965f273db3","type":"ui_group","name":"Carica Certificato Taratura","tab":"21286fd2ee7bdc0c","order":5,"disp":true,"width":"4","collapse":false,"className":""},{"id":"81dd3718.b97888","type":"ui_group","name":"Active Alarms","tab":"4e11db25.239e94","order":1,"disp":true,"width":13,"collapse":true},{"id":"21286fd2ee7bdc0c","type":"ui_tab","name":"test-tab","icon":"assignment","order":5,"disabled":false,"hidden":false},{"id":"4e11db25.239e94","type":"ui_tab","name":"Alarms Monitiring","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
3

Thankyou, what I need to do now is how to apply that to a separate frequency text node to make that cyan when the condition is 'Sub'. These are separate sections in the same flow.

4

What happens if you send a message to the frequency node with just msg.className = "text-cyan" ?

5

Just add msg.className = "text-cyan" to the freq Text Node layout </>Class field ?

6

No, that would set it permanently.

You want it to turn cyan only under certain conditions.

So, send a msg with msg.className set to text-cyan when that condition is met and send a msg with msg.className set to an empty string when the condition is not met.

8

You seem not to have grasped that you can change the way a UI widget is styled by sending a message which has msg.className set to "text-cyan"

If you send {payload: "Leaning Tower of Pisa", className: "text-cyan"} it will display "Leaning Tower of Pisa" in cyan - because you already have a template where the class text-cyan is defined.

If you send {payload: "Tower of Babel", className: "text-skybluepink"} it will display "Tower of Babel" in the default text colour - because you do not have a definition for the class text-skybluepink.

And if you send this message {className: "text-cyan"} (Do you see there is no msg.payload?) it will not change the actual text but it will change the colour to cyan.

One way to get the desired result is to send the same message that goes to your Main/Sub node to the Frequency node as well but pass it through a Change node to delete msg.payload.

1 Like
9

I Cant even get the Sub display Cyan at the moment via CSS. Debugger showed a 4 string so space trailing.
Inserted a string with Left 3 ;
16/05/2022, 22:13:07node: ef94bf834e366945
msg.payload : string[3]
"Sub"

So that looks good going into the same change node as per your example, and CSS template the same, but 'Sub' display remains white.

May be my google chrome browser, I debugged for class/msg as per example at text node input ;

16/05/2022, 22:30:09node: 04d0556dc887f885msg.className : string[9]

"text-cyan"

16/05/2022, 22:30:10node: ef94bf834e366945msg.payload : string[3]

"Sub"

10

Does @Steve-Mcl's example flow correctly display "Sub" in cyan in your Chrome browser?

Please show us a screenshot of your flow and your dashboard.

You can right click on "Sub" and Inspect to see useful debug info.
In my example you can see that the md-card element which contains the text widget has an extra class nr-dashboard-widget-text visible text-cyan
And the matching CSS definition is .nr-dashboard-widget-text.text-cyan > p.value { color: cyan; }

Untitled 1
Untitled 11088Ă—859 78.5 KB

11

Screenshot_20220517_000308
Screenshot_20220517_000308531Ă—885 103 KB

Ispect on VFO Sub ;

<md-option ng-value="opt.value" ng-repeat="opt in me.item.options | filter: { label: me.searchTerm }" tabindex="0" class="md-ink-ripple" role="option" id="select_option_2767" value="V Sub 0"><div class="md-text">Sub VFO </div><div class="md-ripple-container" style=""></div></md-option>

Screenshot_20220517_000818
Screenshot_20220517_0008181402Ă—225 100 KB

12

I installed the CSS template as per example given ;

<style>
    .nr-dashboard-widget-text.text-cyan > p.value {
        color: cyan
    }
</style>

After it did not work I removed those elements.

13

I guess that the relevant bits of the dashboard are those I have ringed? Main/Sub and Frequency.
Untitled 2

Your "Inspect on VFO Sub" doesn't give me any useful information. I presume this is the highlighted text in the right hand column? Is this the bit you want in cyan? If so we will need more information on how you have implemented that column.

The approach we are trying to help you with will not work unless you have a template with this CSS definition.

Please show us the contents of your "vfo manipulation" function node. (I hope this is the right one.)
Also add a debug node set to show "complete msg object" on the output of this function. Show us what the message contains when the payload is "Main" and again when it is "Sub"

14

What you see there is a set function. The flow also uses get code to the tcp server to get status , and that is what I am using. I have uplaed the section of the relevant flow here, and yes that is what displays the two cicled points. Freq & VFO ;

Screenshot_20220517_000819
Screenshot_20220517_0008191162Ă—189 119 KB

I placed the CSS template back, into header, and it seems to show on the Freq display inspect re txet cyan etc,

<md-card ui-card-size="5x1" layout="row" layout-align="center center" class="nr-dashboard-text _md layout-row layout-align-center-center nr-dashboard-widget- msg.className = &quot;text-cyan&quot; visible" ng-class="[ me.item.safeLabel, {'nr-dashboard-disabled':me.item.disabled}, me.item.className]" node-id="625bd1fbb43844c7" style="left: 0px; top: 162px; width: 264px; height: 48px;"> <p class="label" ng-bind-html="me.item.getLabel()"></p> <p class="value" ng-bind-html="me.item.getText()"><font size="16">10.136000 </font></p> </md-card>

Freq display text node has Func ;


msg.payload = (msg.payload/1000000).toFixed(6);
if (msg.payload == "10.135000") {
    msg.payload = "<font color=Cyan>10.135000"
}
if (msg.payload == "10.135500") {
    msg.payload = "<font color=Cyan>10.135500"
}
if (msg.payload == "50.312000") {
    msg.payload = "<font color=Cyan>50.312000"
}
if (msg.payload == "50.312500") {
    msg.payload = "<font color=Cyan>50.312500"
}
return msg;

When testing CSS all of that was // out apart from;
return msg;

VFO Main/Sub Function

msg.payload = msg.payload.substring(0, msg.payload.indexOf("\n"));
if (msg.payload == "Main") {
    msg.payload = "Main"
}
if (msg.payload == "Sub") {
    msg.payload = "<font color=Cyan>Sub"
}
return msg;
//<font color=Cyan>

VFO text node value ; <font size =5>{{msg.payload}}

Freq text node value ; <font size =16>{{msg.payload}}
15

I have tested it - looked to the help and it works.

What is important that it has to match your label of the text node.

.nr-dashboard-widget-text.text-cyan - does only work with text as label .

If your label is mwtext in your text node - your classname has to redefined as well:

image
image990Ă—1018 39.9 KB

.nr-dashboard-widget-mwtext.text-cyan

I tested it with other elements - like label or label of a switch and it works as well.

image
image644Ă—534 17.5 KB 

`<style>
    .nr-dashboard-widget-mwtext.text-cyan > p.value {
        color: cyan
    }
    .nr-dashboard-widget-mwtext.text-cyan > p.label {
        color: orange;
        font-size: 30px;
    }
    .mw_cyan > p.label {
        color: cyan
    }
</style>`

Important is that you can address individual elements of a node (text node, label or value) with this CSS selector syntax:

image
image2180Ă—88 9.56 KB

16

First thought is that &quot;text-cyan&quot; is wrong:

Untitled 3
Untitled 3894Ă—170 7.09 KB

Not sure why just yet...

Using html for styling msg.payload = "<font color=Cyan>Sub" is outdated and bad form.
Please try getting rid of these and instead use

if (msg.payload == "Sub") {
    msg.className = "text-cyan";
}

I am pretty sure that what @mickeym2 says above is Edit - Misleading, not wrong (Sorry!)

17

Ok, on the html color tags, yes using until I get css working.

I changed function to


msg.payload = msg.payload.substring(0, msg.payload.indexOf("\n"));
if (msg.payload == "Sub") {
    msg.className = "text-cyan";
}
return msg;

Took out the change node and connected direct to VFO text node also renamed text node to text.



"Sub"
17/05/2022, 01:58:29node: 04d0556dc887f885
msg.className : string[9]
"text-cyan"
17/05/2022, 01:58:29node: ef94bf834e366945
msg.payload : string[3]
"Sub"
17/05/2022, 01:58:31node: 04d0556dc887f885
msg.className : string[9]
"text-cyan"
17/05/2022, 01:58:31node: ef94bf834e366945
msg.payload : string[3]
"Sub"
17/05/2022, 01:58:31node: 04d0556dc887f885
msg.className : string[9]
"text-cyan"
17/05/2022, 01:58:31node: ef94bf834e366945
msg.payload : string[3]
"Sub"
17/05/2022, 01:58:31node: 04d0556dc887f885
msg.className : string[9]
"text-cyan"
17/05/2022, 01:58:31node: ef94bf834e366945
msg.payload : string[3]

Did not change Sub color to Cyan still on Sub status.

18

I just realised you are referring to label, not name, so will rename as before and change the class.

How does that work for two separate labels controlled by same Sub status for color call ?

19

Yes this is important. :wink: - I tried it with name - this will not work. It has really to match the label. :wink:

If you look to the help it refers to the label as well. :wink:

image
image1062Ă—194 20.1 KB

20

I guess you have to create all classes with 2 labels - but you can then use the same class name to change all.

so if you define:

.nr-dashboard-widget-label1.text-cyan > p.value {
        color: cyan
    }
.nr-dashboard-widget-label2.text-cyan > p.value {
        color: cyan
    }

You can change both text nodes with a msg.className="text-cyan". So I am not an expert of CSS Classes, but this how I understood this.

21

Its annoying as I don't want a label on the dashboard for freq. However I did it and matched ;

<style>
    .nr-dashboard-widget-vfo.text-cyan > p.value {
        color: cyan
    }
</style>
<style>
    .nr-dashboard-widget-freq.text-cyan > p.value {
        color: cyan
    }
</style>

Still no sign of it working on VFO, which has the function giving good debug.