Hello,
I would like to build my own level display using a “dashboard template”. I have already tested - see photo.
I downloaded symbols from Fonte Awesom.
I don't like the layout. Actually, a thick horizontal bar which changes color accordingly is sufficient. I've already tried, but can't get the syntax right. Is anyone familiar with it? Because I can't do it better, I used several templates.
Thank you!
You should probably look in the flows section, there are a few examples to use or learn from -
Also, if you are looking for better colour control in CSS, get familiar with HSL (Hue, Saturation, Lightness) rather than RGB. It is much easier to get things right with HSL and also much easier to do manipulations and calculations. Hue is your colour wheel (360 degrees starting with red at 0), saturation is a % with 0 being grey, lightness is also a % from black at 0.
Further to @TotallyInformation suggestion, here are a couple of topics that give examples of using HSL.
Also @hotNipi has offered a few examples on this forum.
https://discourse.nodered.org/search?expanded=true&q=level%20%20template%20%40hotNipi
Hello,
Thank you very much for the good advice. The "ui-simple-level" is already very good. You can use it well. Nevertheless, I would like to explicitly ask again about the syntax. My template with the Font Awesome symbols works great. I just want to insert a thick bar for the symbol. The properties should be the same, including the caption. I really have no idea. I have copied around like crazy, unfortunately without success.
Does anyone have a clue about this?
<div layout="row" layout-align="space-between center" style="padding: 0 6px;">
<p>25%</p>
<font color="{{msg.payload ? 'red' : 'green'}}">
<i class="fa fa-bars fa-5x" aria-hidden="true"></i>
</font >
this bar should go in for it. Of course, it should also be green and red. The part is only meant to be an example. The syntax is probably also wrong. The "25%" should be to the left of the bar.
<div style="border-bottom: 60px solid #d0d4d9;">
</div>
Please forgive my ignorance!
Thank you very much!
The first snippet you posted above does not have a closing div tag. Is that your entire template?
What's this?
Hello,
Like I said, I have no idea. The first part seems to work. There could definitely be something missing there too.
The second excerpt was just to represent that I want a bar. I copied it online. The bar is no longer displayed. Should only serve as an example.
Thank you!
It's not entirely clear what you are asking for ?
Just asking about the syntax without a clear explanation is like asking how to say something in a foreign language but with out telling us what you want to say.
The font awesome icon you are using has 3 bars that is just how it looks, if you want it to be solid you could use fa-square instead, but how are you going to display different values ?
What you have shared so far is a long way from being an interactive bar chart, it would be better to share your flow so we can see what data you are sending to the template, and how you want it to look.
You have not explained in a way that I can understand.
Anyway, here is another example drawing a coloured rectangle in a ui-template node.
[{"id":"abd23fb48ed36ac6","type":"ui_template","z":"49865e23ad9648f2","group":"149d3845ab5f0780","name":"","order":14,"width":"6","height":"4","format":"<div class=\"myrectangle\">\n <?xml version=\"1.0\" standalone=\"no\"?>\n\n<svg width=\"200\" height=\"200\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <text x=\"20\" y=\"45\" font-size=\"20\" text-anchor=\"middle\" fill=\"white\">{{msg.topic}}</text>\n <rect x=\"60\" y=\"8\" rx=\"2\" ry=\"2\" width=\"120\" height=\"60\" stroke={{msg.payload}} fill={{msg.payload}}>\n</svg>\n\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":780,"y":240,"wires":[[]]},{"id":"88671f95ca3f841c","type":"ui_button","z":"49865e23ad9648f2","name":"","group":"149d3845ab5f0780","order":14,"width":"2","height":"1","passthru":false,"label":"Red (Hex)","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"#eb4747","payloadType":"str","topic":"98","topicType":"str","x":590,"y":200,"wires":[["abd23fb48ed36ac6"]]},{"id":"f46c0c8050b69365","type":"ui_button","z":"49865e23ad9648f2","name":"","group":"149d3845ab5f0780","order":14,"width":"2","height":"1","passthru":false,"label":"Orange","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"orange","payloadType":"str","topic":"45","topicType":"str","x":600,"y":240,"wires":[["abd23fb48ed36ac6"]]},{"id":"279afa7049dfd5d4","type":"ui_button","z":"49865e23ad9648f2","name":"","group":"149d3845ab5f0780","order":14,"width":"2","height":"1","passthru":false,"label":"Green (HSL)","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"hsl(90, 70%, 70%)","payloadType":"str","topic":"8","topicType":"str","x":590,"y":280,"wires":[["abd23fb48ed36ac6"]]},{"id":"149d3845ab5f0780","type":"ui_group","name":"SVG4","tab":"ebc8e3375c3f2aa1","order":4,"disp":true,"width":"6","collapse":false,"className":""},{"id":"ebc8e3375c3f2aa1","type":"ui_tab","name":"SVG","icon":"dashboard","disabled":false,"hidden":false}]
Hello,
You're right, it's poorly explained.
I'm adding my flow.
Here I am working with Awesome Symbols. Because I can't change the size, I placed three next to each other. Because I'm not familiar with template syntax, I'm probably taking an illogical approach. Now I would like to replace the symbols with a crossbar or something similar. Then I can also adjust the width without much knowledge (on the dashboard). By the way, it's supposed to be a level indicator for my rain sister.
Yes, there are templates. I wanted to be a little more independent with this template, e.g. labeling, etc.
Thank you for your patience!!!
[{"id":"0cd523e009957b04","type":"inject","z":"2201063fd1fbd5ca","name":"0","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":310,"y":660,"wires":[["3dac159f53d38628"]]},{"id":"ce1da48fe9df1da1","type":"inject","z":"2201063fd1fbd5ca","name":"1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":320,"y":720,"wires":[["3dac159f53d38628"]]},{"id":"d3859fa4b8ee2619","type":"inject","z":"2201063fd1fbd5ca","name":"0","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":310,"y":520,"wires":[["ba3e2e7adb7ca143"]]},{"id":"a5244f3d2c1b82dd","type":"inject","z":"2201063fd1fbd5ca","name":"1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":320,"y":580,"wires":[["ba3e2e7adb7ca143"]]},{"id":"ba3e2e7adb7ca143","type":"ui_template","z":"2201063fd1fbd5ca","group":"f40db975522f0a4c","name":"50","order":4,"width":"0","height":"0","format":"<div layout=\"row\" layout-align=\"space-between center\" style=\"padding: 0 6px;\">\n<p>50%</p>\n<font color=\"{{msg.payload ? 'white' : 'green'}}\">\n <i class=\"fa fa-bars fa-5x\" aria-hidden=\"true\"></i>\n </font >\n <font color=\"{{msg.payload ? 'white' : 'green'}}\">\n <i class=\"fa fa-bars fa-5x\" aria-hidden=\"true\"></i>\n </font >\n<font color=\"{{msg.payload ? 'white' : 'green'}}\">\n <i class=\"fa fa-bars fa-5x\" aria-hidden=\"true\"></i>\n </font >\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":600,"y":540,"wires":[[]]},{"id":"367db2aff48e347e","type":"inject","z":"2201063fd1fbd5ca","name":"0","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":310,"y":380,"wires":[["b5ecfa6fdd2c0dd2"]]},{"id":"91b8a418bbc48a1f","type":"inject","z":"2201063fd1fbd5ca","name":"1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":320,"y":440,"wires":[["b5ecfa6fdd2c0dd2"]]},{"id":"b5ecfa6fdd2c0dd2","type":"ui_template","z":"2201063fd1fbd5ca","group":"f40db975522f0a4c","name":"75","order":3,"width":"0","height":"0","format":"<div layout=\"row\" layout-align=\"space-between center\" style=\"padding: 0 6px;\">\n<p>75%</p>\n<font color=\"{{msg.payload ? 'white' : 'green'}}\">\n <i class=\"fa fa-bars fa-5x\" aria-hidden=\"true\"></i>\n </font >\n <font color=\"{{msg.payload ? 'white' : 'green'}}\">\n <i class=\"fa fa-bars fa-5x\" aria-hidden=\"true\"></i>\n </font >\n<font color=\"{{msg.payload ? 'white' : 'green'}}\">\n <i class=\"fa fa-bars fa-5x\" aria-hidden=\"true\"></i>\n </font >\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":600,"y":400,"wires":[[]]},{"id":"c4260a5f27347864","type":"inject","z":"2201063fd1fbd5ca","name":"0","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":310,"y":260,"wires":[["c7d90b71034862ca"]]},{"id":"360bc6bd3a11d733","type":"inject","z":"2201063fd1fbd5ca","name":"1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":320,"y":320,"wires":[["c7d90b71034862ca"]]},{"id":"c7d90b71034862ca","type":"ui_template","z":"2201063fd1fbd5ca","group":"f40db975522f0a4c","name":"80","order":2,"width":"0","height":"0","format":"<div layout=\"row\" layout-align=\"space-between center\" style=\"padding: 0 6px;\">\n<p>80%</p>\n<font color=\"{{msg.payload ? 'white' : 'yellow'}}\">\n <i class=\"fa fa-bars fa-5x\" aria-hidden=\"true\"></i>\n </font >\n <font color=\"{{msg.payload ? 'white' : 'yellow'}}\">\n <i class=\"fa fa-bars fa-5x\" aria-hidden=\"true\"></i>\n </font >\n<font color=\"{{msg.payload ? 'white' : 'yellow'}}\">\n <i class=\"fa fa-bars fa-5x\" aria-hidden=\"true\"></i>\n </font >\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":600,"y":280,"wires":[[]]},{"id":"ae4c753cf64e8f04","type":"inject","z":"2201063fd1fbd5ca","name":"0","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":310,"y":120,"wires":[["e1281ce91212b85f"]]},{"id":"f0906efdfe70a730","type":"inject","z":"2201063fd1fbd5ca","name":"1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":310,"y":180,"wires":[["e1281ce91212b85f"]]},{"id":"e1281ce91212b85f","type":"ui_template","z":"2201063fd1fbd5ca","group":"f40db975522f0a4c","name":"100","order":1,"width":"0","height":"0","format":"<div layout=\"row\" layout-align=\"space-between center\" style=\"padding: 0 6px;\">\n<p>100%</p>\n<font color=\"{{msg.payload ? 'white' : 'red'}}\">\n <i class=\"fa fa-bars fa-5x\" aria-hidden=\"true\"></i>\n </font >\n <font color=\"{{msg.payload ? 'white' : 'red'}}\">\n <i class=\"fa fa-bars fa-5x\" aria-hidden=\"true\"></i>\n </font >\n<font color=\"{{msg.payload ? 'white' : 'red'}}\">\n <i class=\"fa fa-bars fa-5x\" aria-hidden=\"true\"></i>\n </font >\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":600,"y":140,"wires":[[]]},{"id":"3dac159f53d38628","type":"ui_template","z":"2201063fd1fbd5ca","group":"f40db975522f0a4c","name":"25","order":6,"width":"0","height":"0","format":"<div layout=\"row\" layout-align=\"space-between center\" style=\"padding: 0 6px;\">\n<p>25%</p>\n<font color=\"{{msg.payload ? 'white' : 'green'}}\">\n <i class=\"fa fa-bars fa-5x\" aria-hidden=\"true\"></i>\n </font >\n <font color=\"{{msg.payload ? 'white' : 'green'}}\">\n <i class=\"fa fa-bars fa-5x\" aria-hidden=\"true\"></i>\n </font >\n<font color=\"{{msg.payload ? 'white' : 'green'}}\">\n <i class=\"fa fa-bars fa-5x\" aria-hidden=\"true\"></i>\n </font >\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":590,"y":680,"wires":[[]]},{"id":"f40db975522f0a4c","type":"ui_group","name":"Level","tab":"6ddd08f0.a9e6c","order":7,"disp":true,"width":"6","collapse":false},{"id":"6ddd08f0.a9e6c","type":"ui_tab","name":"Test","icon":"dashboard","disabled":false,"hidden":false}]
I'd suggest to take pen and paper (or some digital drawing tool) and draw out your intention. It is almost impossible to understand how it exactly must look and how it should behave.
Doing so, people here can sharply work on target so you'll get help you actually need.
I'm really sorry for upsetting you. I'm starting the last attempt now. I probably made a bit of a mistake.
Thank you for everyone. I've already made progress and have really learned something new.
Best regards !!!
Visio-Wish list.pdf (96.2 KB)
I'm still confused, your bars are all the same length regardless of the value, and the only thing you want to change via the payload is the colour of all the bars ?
Also if you don't like the 3 bar icon then -
fa-bars has 3 bars, You only want 1 bar per level, so it is a mistake to use fa-bars.
It is ingenious to try using font awesome icons but in my opinion it is not the best approach.
Here is @pinie_pinie's preferred design:
This image does not explain what happens if the value you are showing is say 76%. Should the 80% and 100% labels still show up? Should the bars become colourless (transparent) rather than yellow and red?
You say "In the end, one bar should be created per template", but you don't say why. Do you actually want 5 seperate templates, or do you just want get rid of the 3 bars per row?
I can envisage a template which shows 5 bars, each of which is either coloured or transparent according to the value of msg.payload.
I'm not going to try and code it though unless @pinie_pinie explains why he/she is so keen on using multiple templates and font awesome.
Hello,
My rain tank control has been running for years. It was just about my own template. I can use a gauge or something similar. Everything works. It was just supposed to be my own design, nothing more. Unfortunately, I lack crucial knowledge. That's why some of my comments probably seem a bit confusing. The photo shows the basic circuit (the water is just over 25%). Using the display on the dashboard, I can visually monitor the fill level and react accordingly (e.g. switch the pump automatically or manually via Nodered). My colleague, for example, has several seniors to thank. Therefore something of your own that can be adapted yourself.
If I know the syntax of the commands, a layperson might be able to adapt something later.
Thank you!
I have carefully read and tried to understand what you have posted, though I suspect English is not your native language.
I think that what you are after is something like this?
Have you carefully read and tried to understand the replies? Have you answered the questions?
Hello,
You are right, everything is done via Google Translate.
Yes, that's what I mean. It looks very good!!!!
Could I please test it?
Best regards!
Sorry, it's just an image assembled in a photo editor. There is no code written as yet.
Hello,
In the photo you can see what I actually wanted. I need the commands for this result.
This template is intended to become a template for further applications.
If I knew the syntax I could adapt it later.
The label, the color and the shape e.g. circle.
As I said, I have no knowledge of HTML.
They probably can't understand me because my request is too simple.
I would like to thank everyone in the group for their support.
But I definitely won't take an HTML course. Maybe I can get the flow of "jbudd" adjusted. He's already heading in the right direction.
Thank you!!!
Reading through this topic I see your inputs are 5 bools. I would join them then use the join to create the level in one ui_template.
I have made this example as simple as possible. You will need to learn a little css/html if you wish to modify it.
[{"id":"ae4c753cf64e8f04","type":"inject","z":"2493d0f1b4d72d1b","name":"0","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"100","payload":"true","payloadType":"bool","x":550,"y":560,"wires":[["28bdeb09c19a8bbe"]]},{"id":"28bdeb09c19a8bbe","type":"join","z":"2493d0f1b4d72d1b","name":"","mode":"custom","build":"object","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":true,"timeout":"","count":"2","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":750,"y":720,"wires":[["c7d90b71034862ca","6bb222433119e871"]]},{"id":"0cd523e009957b04","type":"inject","z":"2493d0f1b4d72d1b","name":"0","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"25","payload":"true","payloadType":"bool","x":550,"y":880,"wires":[["28bdeb09c19a8bbe"]]},{"id":"ce1da48fe9df1da1","type":"inject","z":"2493d0f1b4d72d1b","name":"1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"25","payload":"false","payloadType":"bool","x":550,"y":920,"wires":[["28bdeb09c19a8bbe"]]},{"id":"d3859fa4b8ee2619","type":"inject","z":"2493d0f1b4d72d1b","name":"0","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"50","payload":"true","payloadType":"bool","x":550,"y":800,"wires":[["28bdeb09c19a8bbe"]]},{"id":"a5244f3d2c1b82dd","type":"inject","z":"2493d0f1b4d72d1b","name":"1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"50","payload":"false","payloadType":"bool","x":550,"y":840,"wires":[["28bdeb09c19a8bbe"]]},{"id":"367db2aff48e347e","type":"inject","z":"2493d0f1b4d72d1b","name":"0","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"75","payload":"true","payloadType":"bool","x":550,"y":720,"wires":[["28bdeb09c19a8bbe"]]},{"id":"91b8a418bbc48a1f","type":"inject","z":"2493d0f1b4d72d1b","name":"1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"75","payload":"false","payloadType":"bool","x":550,"y":760,"wires":[["28bdeb09c19a8bbe"]]},{"id":"c4260a5f27347864","type":"inject","z":"2493d0f1b4d72d1b","name":"0","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"80","payload":"true","payloadType":"bool","x":550,"y":640,"wires":[["28bdeb09c19a8bbe"]]},{"id":"360bc6bd3a11d733","type":"inject","z":"2493d0f1b4d72d1b","name":"1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"80","payload":"false","payloadType":"bool","x":550,"y":680,"wires":[["28bdeb09c19a8bbe"]]},{"id":"f0906efdfe70a730","type":"inject","z":"2493d0f1b4d72d1b","name":"1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"100","payload":"false","payloadType":"bool","x":550,"y":600,"wires":[["28bdeb09c19a8bbe"]]},{"id":"c7d90b71034862ca","type":"ui_template","z":"2493d0f1b4d72d1b","group":"f40db975522f0a4c","name":"80","order":2,"width":"0","height":"0","format":"<div id=\"parent\">\n <div style=\"\n height:20px; \n width:100px;\n border: 1px solid black;\n margin: 2px;\n padding: 2px 2px 2px 2px;\n background-color: {{msg.payload['100'] ? 'transparent' : 'red'}};\n \"\n class=\"child100\">\n </div>\n <div style=\"\n height:20px; \n width:100px;\n border: 1px solid black;\n margin: 2px;\n padding: 2px 2px 2px 2px;\n background-color: {{msg.payload['80'] ? 'transparent' : 'yellow'}};\n \"\n class=\"child80\">\n </div>\n <div style=\"\n height:20px; \n width:100px;\n border: 1px solid black;\n margin: 2px;\n padding: 2px 2px 2px 2px;\n background-color: {{msg.payload['75'] ? 'transparent' : 'green'}};\n \"\n class=\"child75\">\n </div>\n <div style=\"\n height:20px; \n width:100px;\n border: 1px solid black;\n margin: 2px;\n padding: 2px 2px 2px 2px;\n background-color: {{msg.payload['50'] ? 'transparent' : 'green'}};\n \"\n class=\"child50\">\n </div>\n <div style=\"\n height:20px; \n width:100px;\n border: 1px solid black;\n margin: 2px;\n padding: 2px 2px 2px 2px;\n background-color: {{msg.payload['25'] ? 'transparent' : 'green'}};\n \"\n class=\"child25\">\n </div>\n</div>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":870,"y":780,"wires":[[]]},{"id":"6bb222433119e871","type":"debug","z":"2493d0f1b4d72d1b","name":"debug 345","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":890,"y":640,"wires":[]},{"id":"f40db975522f0a4c","type":"ui_group","name":"Level","tab":"6ddd08f0.a9e6c","order":7,"disp":true,"width":"6","collapse":false},{"id":"6ddd08f0.a9e6c","type":"ui_tab","name":"Test","icon":"dashboard","disabled":false,"hidden":false}]
[{"id":"5e35d319305b6144","type":"inject","z":"2493d0f1b4d72d1b","name":"0","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"100","payload":"true","payloadType":"bool","x":430,"y":460,"wires":[["08d3e9df2e9550f6"]]},{"id":"08d3e9df2e9550f6","type":"join","z":"2493d0f1b4d72d1b","name":"","mode":"custom","build":"object","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":true,"timeout":"","count":"2","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":630,"y":620,"wires":[["86122c902e8767ea","7886c6b82cfb510f"]]},{"id":"74ebd19357b664cc","type":"inject","z":"2493d0f1b4d72d1b","name":"0","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"25","payload":"true","payloadType":"bool","x":430,"y":780,"wires":[["08d3e9df2e9550f6"]]},{"id":"37a2fa1a9b5661a3","type":"inject","z":"2493d0f1b4d72d1b","name":"1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"25","payload":"false","payloadType":"bool","x":430,"y":820,"wires":[["08d3e9df2e9550f6"]]},{"id":"faf9a68457d3274a","type":"inject","z":"2493d0f1b4d72d1b","name":"0","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"50","payload":"true","payloadType":"bool","x":430,"y":700,"wires":[["08d3e9df2e9550f6"]]},{"id":"6a06602047ea7303","type":"inject","z":"2493d0f1b4d72d1b","name":"1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"50","payload":"false","payloadType":"bool","x":430,"y":740,"wires":[["08d3e9df2e9550f6"]]},{"id":"d5c9ea685aeb8b44","type":"inject","z":"2493d0f1b4d72d1b","name":"0","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"75","payload":"true","payloadType":"bool","x":430,"y":620,"wires":[["08d3e9df2e9550f6"]]},{"id":"3599629386fc3c31","type":"inject","z":"2493d0f1b4d72d1b","name":"1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"75","payload":"false","payloadType":"bool","x":430,"y":660,"wires":[["08d3e9df2e9550f6"]]},{"id":"dc68e8975f35725f","type":"inject","z":"2493d0f1b4d72d1b","name":"0","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"80","payload":"true","payloadType":"bool","x":430,"y":540,"wires":[["08d3e9df2e9550f6"]]},{"id":"b8086bb0e063f1f3","type":"inject","z":"2493d0f1b4d72d1b","name":"1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"80","payload":"false","payloadType":"bool","x":430,"y":580,"wires":[["08d3e9df2e9550f6"]]},{"id":"a35183c31c7660de","type":"inject","z":"2493d0f1b4d72d1b","name":"1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"100","payload":"false","payloadType":"bool","x":430,"y":500,"wires":[["08d3e9df2e9550f6"]]},{"id":"86122c902e8767ea","type":"ui_template","z":"2493d0f1b4d72d1b","group":"30b97689fafeb0d2","name":"80","order":2,"width":"0","height":"0","format":"<table style=\"\n border-spacing: 10px;\">\n <tr>\n <td style=\"\n height: 20px; \n width: 30px;\n background-color: transparent;\">\n 100%\n </td>\n <td style=\"\n height:20px; \n width: auto;\n background-color: {{msg.payload['100'] ? 'transparent' : 'red'}};\n \"\n </td>\n </tr>\n <tr>\n <td style=\"\n height:20px; \n width: auto;\n background-color: transparent;\">\n 80%\n </td>\n <td style=\"\n height:20px; \n width: auto;\n background-color: {{msg.payload['80'] ? 'transparent' : 'yellow'}};\n \"\n </td>\n </tr>\n <tr>\n <td style=\"\n height:20px; \n width: auto;\n background-color: transparent;\">\n 75%\n </td>\n <td style=\"\n height:20px; \n width:auto;\n background-color: {{msg.payload['75'] ? 'transparent' : 'green'}};\n \"\n </td>\n </tr>\n <tr>\n <td style=\"\n height:20px; \n width:auto;\n background-color: transparent;\">\n 50%\n </td>\n <td style=\"\n height:20px; \n width:auto;\n background-color: {{msg.payload['50'] ? 'transparent' : 'green'}};\n \"\n </td>\n </tr>\n <tr>\n <td style=\"\n height:20px; \n width:auto;\n background-color: transparent;\">\n 25%\n </td>\n <td style=\"\n height:20px; \n width: auto;\n background-color: {{msg.payload['25'] ? 'transparent' : 'green'}};\n \"\n </td>\n </tr>\n</table>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":750,"y":680,"wires":[[]]},{"id":"7886c6b82cfb510f","type":"debug","z":"2493d0f1b4d72d1b","name":"debug 345","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":770,"y":540,"wires":[]},{"id":"30b97689fafeb0d2","type":"ui_group","name":"Level","tab":"6ddd08f0.a9e6c","order":7,"disp":true,"width":"6","collapse":false},{"id":"6ddd08f0.a9e6c","type":"ui_tab","name":"Test","icon":"dashboard","disabled":false,"hidden":false}]
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy