Hi,
I have a node red template with html to show some payloads on a screen.
like:
<div style="font-family:direction; color:red;">{{msg.payload.bits.toString(2)[31]==1 ? "H" : " "}}</div>
That’s working, We see a “H” in red or a space depending on the value of msg.payload.bits.toString(2)[31].
Now i like a “H” in red or white depending on that value. But I’am new in javascript and I don’t know where to start.
Can somebody point me in the right direction?
So instead of the space, you want an H there all the time, but you want the color to be red or white depending on the value.
Your current line is this:
<div style="font-family:direction; color:red;">{{msg.payload.bits.toString(2)[31]==1 ? "H" : " "}}</div>
The short answer is this:
<div style="font-family:direction; color:{{msg.payload.bits.toString(2)[31]==1 ? "red" : "white"}};">H</div>
===
A quick crash course on what the Javascript part of this means:
msg.payload.bits.toString(2) : Take msg.payload.bits, turn it into a String regardless of what it currently is, with a radix of 2. I am assuming msg.payload.bits is a number of some kind, in which case the radix of 2 means “turn the number into binary”. Which seems a bit overkill if you’re expecting it to be a 1, but we’ll roll with it.
==1 : Take the thing on the left (which is now a binary string), and compare it to the integer 1. Specifically, we’re looking to see if the values are equal. Which rather undoes the toString, as it will need to convert the string back to a number to do the comparison. But… again, we’ll roll with it. This will output either true or false (a boolean value).
? : The beginning of what’s called a Ternary expression. A ternary expression is of the form test ? truestatement : falsestatement , and equates to the code: if (test) { truestatement } else { falsestatement }. In this case, we look at the boolean value to the left.
"red" : If the boolean was true (or a truthy equivalent), we output the string red.
: : The delineator for the ternary statement. We’ve finished the “true” part, now we define the “false” part.
"white" : If the boolean was false (or not a truthy equivalent), we output the string white.
{{ ... }} I assume this is part of a templating engine you’re using, in which these indicate to the template engine that the thing inside these curly braces is some javascript code to be processed by the template before output.
Your solution looks perfect, but the letters stays white.
Is it possible that in the “style”, javascript is not working? Because if I put a function in the “style” it never went to that function to execute.
I dont… see how that would be the case…
Are you doing this inside a framework of some kind? React, perhaps? What’s the templating engine?
Thanks, Your solution is rely perfect. I have to use single ’ instead of double "
Now it is ok.
Thanks again
Sorry, but now I have a new problem.
I have 2 different bits for the same style
<div style="font-family:direction; ">{{msg.payload.bits.toString(2)[26]==1 ? "H" : " "}} {{msg.payload.bits.toString(2)[8]==1 ? "E" : " "}}</div>
and I put 2 different letters.
So I like gain, depending on de status of the bit 26 a red or white “H” and on status of bit 8 a blue or white “E”
Is that possible?
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.