Status indicator for dashboard UI

[Mike Arney]

I would like to have a graphical indicator that has the following properties:

msg.payload == 1, then GREEN and with the text of "Running"

msg.payload == 0, then RED and with the text of "Stopped"

I was able to output to a text node, but I want a virtual LED. 

Any help would be greatly appreciated.

Thanks,

Mike

[Dave]

Hello, What I did is have the button node with a colour going into it from a function node

if (msg.payload === 1){

    msg.colour = "green";

    msg.backgroud ="red";

    return msg;}

else{msg.colour ="white";

return msg;}

Dave.

[steve rickus]

Lots of good examples on Pete Scargill's blog site @ https://tech.scargill.net/category/node-red-ui/

Angular directives can be used in a bit of ui_template html/css code to create whatever html elements you can imagine - buttons, sliders, toggles, text, icons, etc.

Here is an interesting pair of buttons I found on his web site, a while back...

[
    {
        "id": "f9bd4af7.04b678",
        "type": "ui_template",
        "z": "c54ebe65.60eaa",
        "group": "5bb4f73c.9bae28",
        "name": "Red Starter",
        "order": 10,
        "width": "2",
        "height": "2",
        "format": "\n<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: msg.payload })\"> \n\n<svg  width=\"105px\" height=\"105px\" version=\"1.1\" \nviewBox=\"0 0 76 76\">\n <g id=\"Button_1\">\n  <rect fill=\"#4B4B4D\" width=\"76\" height=\"76\"/>\n\n    <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#848688' : '#1A1A1A'}\">\n  <polygon stroke=\"black\" stroke-width=\"0.380524\" points=\"72,72 4,72 0,76 76,76 76,0 72,4 \"/>\n    </g>\n    <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#1A1A1A' : '#848688'}\">\n  <polygon  points=\"4,4 72,4 76,0 0,0 0,76 4,72 \"/>\n    </g>\n    <g ng-style=\"{stroke: (msg.payload || 0) % 2 === 0 ? 'black' : '#E6E7E8'}\">\n  <line fill=\"none\" stroke-width=\"0.380524\" x1=\"0\" y1=\"0\" x2=\"4\" y2= \"4\" />\n    </g>\n\n  <circle fill=\"none\" stroke=\"red\" stroke-width=\"1.8\" cx=\"38\" cy=\"38\" r=\"29\"/>\n    <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'red' : 'none'}\">\n      <circle  cx=\"38\" cy=\"38\" r=\"26\" />\n    </g>\n  <polyline fill=\"none\" stroke=\"#D2D3D5\" stroke-width=\"0.380524\" points=\"4,72 4,4 72,4 \"/>\n\n\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'none' : '#FEFEFE'}\">\n    <text x=\"37\" y=\"44\" style=\"text-anchor:middle\" font-weight=\"normal\" font-size=\"19.0185\" font-family=\"Droid Sans\">OFF</text>\n  </g>\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#FEFEFE' : 'none'}\">\n    <text x=\"37\" y=\"44\" style=\"text-anchor:middle\" font-weight=\"normal\" font-size=\"19.0185\" font-family=\"Droid Sans\">OFF</text>\n  </g>\n </g>\n</svg>\n</md-button>\n",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "templateScope": "local",
        "x": 1197.8333129882812,
        "y": 644.3334350585938,
        "wires": [
            [
                "7bb19ce8.de00d4"
            ]
        ]
    },
    {
        "id": "6f65141e.9bc96c",
        "type": "ui_template",
        "z": "c54ebe65.60eaa",
        "group": "5bb4f73c.9bae28",
        "name": "Green Starter",
        "order": 9,
        "width": "2",
        "height": "2",
        "format": "\n<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: msg.payload })\"> \n\n<svg  width=\"105px\" height=\"105px\" version=\"1.1\" \nviewBox=\"0 0 76 76\">\n <g id=\"Button_1\">\n  <rect fill=\"#4B4B4D\" width=\"76\" height=\"76\"/>\n\n    <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#1A1A1A' : '#848688'}\">\n  <polygon stroke=\"black\" stroke-width=\"0.380524\" points=\"72,72 4,72 0,76 76,76 76,0 72,4 \"/>\n    </g>\n    <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#848688' : '#1A1A1A'}\">\n  <polygon  points=\"4,4 72,4 76,0 0,0 0,76 4,72 \"/>\n    </g>\n    <g ng-style=\"{stroke: (msg.payload || 0) % 2 === 0 ? '#E6E7E8' : 'black'}\">\n  <line fill=\"none\" stroke-width=\"0.380524\" x1=\"0\" y1=\"0\" x2=\"4\" y2= \"4\" />\n    </g>\n\n  <circle fill=\"none\" stroke=\"green\" stroke-width=\"1.8\" cx=\"38\" cy=\"38\" r=\"29\"/>\n    <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'none' : 'green'}\">\n      <circle  cx=\"38\" cy=\"38\" r=\"26\" />\n    </g>\n  <polyline fill=\"none\" stroke=\"#D2D3D5\" stroke-width=\"0.380524\" points=\"4,72 4,4 72,4 \"/>\n\n\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'none' : '#FEFEFE'}\">\n    <text x=\"37\" y=\"44\" style=\"text-anchor:middle\" font-weight=\"normal\" font-size=\"19.0185\" font-family=\"Droid Sans\">RUN</text>\n  </g>\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#FEFEFE' : 'none'}\">\n    <text x=\"37\" y=\"44\" style=\"text-anchor:middle\" font-weight=\"normal\" font-size=\"19.0185\" font-family=\"Droid Sans\">RUN</text>\n  </g>\n </g>\n</svg>\n</md-button>\n\n\n",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "templateScope": "local",
        "x": 1196.9999389648438,
        "y": 513.0000610351562,
        "wires": [
            [
                "195de874.b07b58"
            ]
        ]
    },
    {
        "id": "195de874.b07b58",
        "type": "function",
        "z": "c54ebe65.60eaa",
        "name": "",
        "func": "\nif (msg.payload === false ){\n    msg.payload = true;\n}\nelse { msg.payload = true;\n}\nreturn msg;\n",
        "outputs": 1,
        "noerr": 0,
        "x": 1194.8333740234375,
        "y": 447,
        "wires": [
            [
                "6f65141e.9bc96c",
                "f9bd4af7.04b678"
            ]
        ]
    },
    {
        "id": "7bb19ce8.de00d4",
        "type": "function",
        "z": "c54ebe65.60eaa",
        "name": "",
        "func": "\nif (msg.payload === true ){\n    msg.payload = false;\n}\nelse { msg.payload = false;\n}\nreturn msg;\n",
        "outputs": 1,
        "noerr": 0,
        "x": 1188.8333740234375,
        "y": 574.0001525878906,
        "wires": [
            [
                "f9bd4af7.04b678",
                "6f65141e.9bc96c"
            ]
        ]
    },
    {
        "id": "5bb4f73c.9bae28",
        "type": "ui_group",
        "z": "",
        "name": "Starter",
        "tab": "f71dee08.232e9",
        "order": 4,
        "disp": true,
        "width": "2"
    },
    {
        "id": "f71dee08.232e9",
        "type": "ui_tab",
        "z": "",
        "name": "Button Panel",
        "icon": "dashboard"
    }
]

--

Steve

[Mike Arney]

Thank you for your help.

I have the following in a function node and then going to the button node:

if(msg.payload === "1"){

    msg.colour = "white";

    msg.background ="green";

    msg.label = "Running";

    return msg;

}

else{

    msg.colour = "white";

   msg.background = "red";

   msg.label = "Stopped";

return msg;

}

It does not change when I toggle an inject node. Here is my code.

[{"id":"f07f31c7.81fea","type":"ui_button","z":"a9f6be42.3f541","name":"","group":"afa76b35.137d88","order":0,"width":0,"height":0,"passthru":false,"label":"button","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":630,"y":200,"wires":[[]]},{"id":"ce96f8f4.77f5b8","type":"function","z":"a9f6be42.3f541","name":"","func":"if(msg.payload === \"1\"){\n    msg.colour = \"white\";\n    msg.background =\"green\";\n    msg.label = \"Running\";\n    return msg;\n}\nelse{\n    msg.colour = \"white\";\n   msg.background = \"red\";\n   msg.label = \"Stopped\";\nreturn msg;\n}","outputs":1,"noerr":0,"x":490,"y":200,"wires":[["f07f31c7.81fea"]]},{"id":"ba3abe95.3c515","type":"inject","z":"a9f6be42.3f541","name":"","topic":"","payload":"1","payloadType":"str","repeat":"","crontab":"","once":false,"x":350,"y":200,"wires":[["ce96f8f4.77f5b8"]]},{"id":"afa76b35.137d88","type":"ui_group","z":"","name":"HT","tab":"e3504922.217b08","order":2,"disp":true,"width":"6"},{"id":"e3504922.217b08","type":"ui_tab","z":"","name":"All Machines","icon":"dashboard","order":1}]

Thanks,

Mike

On Thursday, December 7, 2017 at 2:09:22 PM UTC-5, Mike Arney wrote:

[Dave]

Almost like mine ;-)

[{"id":"4f25e025.0cd0e","type":"ui_button","z":"ed6ce3c4.909b9","name":"","group":"ec6cf493.3e1b78","order":2,"width":"1","height":"1","passthru":false,"label":"ON","color":"{{msg.colour}}","bgcolor":"{{msg.backgroud}}","icon":"","payload":"1","payloadType":"str","topic":"","x":102,"y":126,"wires":[["8bed826e.01b75","2a7775e2.404b8a","94ece49b.0c9708"]]},{"id":"8bed826e.01b75","type":"ui_text","z":"ed6ce3c4.909b9","group":"ec6cf493.3e1b78","order":4,"width":"1","height":"1","name":"","label":"","format":"{{msg.payload}}","layout":"row-center","x":662,"y":72,"wires":[]},{"id":"2a7775e2.404b8a","type":"mqtt out","z":"ed6ce3c4.909b9","name":"dash","topic":"dashfeed","qos":"1","retain":"","broker":"f2bcedec.c204e","x":668,"y":20,"wires":[]},{"id":"95b075f3.d93cc8","type":"ui_button","z":"ed6ce3c4.909b9","name":"","group":"ec6cf493.3e1b78","order":3,"width":"1","height":"1","passthru":false,"label":"OFF","color":"","bgcolor":"","icon":"","payload":"0","payloadType":"str","topic":"","x":336,"y":131,"wires":[["2a7775e2.404b8a","8bed826e.01b75","c3a43c86.487dc","94ece49b.0c9708"]]},{"id":"a597846b.166a18","type":"mqtt in","z":"ed6ce3c4.909b9","name":"","topic":"dash","qos":"1","broker":"f2bcedec.c204e","x":55,"y":20,"wires":[["8bed826e.01b75","2a7775e2.404b8a","4f25e025.0cd0e","95b075f3.d93cc8","c3a43c86.487dc","94ece49b.0c9708"]]},{"id":"94ece49b.0c9708","type":"function","z":"ed6ce3c4.909b9","name":"background","func":"if (msg.payload === \"1\"){\n    msg.colour = \"green\";\n    msg.backgroud =\"red\";\n    return msg;}\nelse{msg.colour =\"white\";\nreturn msg;}","outputs":1,"noerr":0,"x":111,"y":182,"wires":[["4f25e025.0cd0e"]]},{"id":"c3a43c86.487dc","type":"function","z":"ed6ce3c4.909b9","name":"background","func":"if (msg.payload === \"0\"){\n    msg.colour = \"green\";\n    msg.backgroud =\"red\";\n    return msg;}\nelse{msg.colour =\"yellow\";\nreturn msg;}","outputs":1,"noerr":0,"x":333,"y":186,"wires":[["95b075f3.d93cc8"]]},{"id":"ec6cf493.3e1b78","type":"ui_group","z":"","name":"mess","tab":"994ac34c.0ed57","order":2,"disp":true,"width":"6"},{"id":"f2bcedec.c204e","type":"mqtt-broker","z":"","broker":"192.168.1.40","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"willTopic":"","willQos":"0","willPayload":"","birthTopic":"","birthQos":"0","birthPayload":""},{"id":"994ac34c.0ed57","type":"ui_tab","z":"","name":"Hall temp","icon":"dashboard","order":2}]

[Mike Arney]

Thanks for the example, Dave.

I forgot to assign the values within the button node!

On Thursday, December 7, 2017 at 2:09:22 PM UTC-5, Mike Arney wrote:

[Dave C-J]

Mike

your example almost worked... :-)

[{"id":"3eaf950.3ae366c","type":"ui_button","z":"f03b57d5.e525f8","name":"","group":"9930d3ac.be82f","order":0,"width":0,"height":0,"passthru":false,"label":"{{topic}}","color":"{{colour}}","bgcolor":"{{background}}","icon":"","payload":"","payloadType":"str","topic":"","x":450,"y":1420,"wires":[[]]},{"id":"75ed9021.986aa","type":"ui_button","z":"f03b57d5.e525f8","name":"","group":"9930d3ac.be82f","order":0,"width":0,"height":0,"passthru":false,"label":"button1","color":"","bgcolor":"","icon":"","payload":"1","payloadType":"str","topic":"","x":140,"y":1400,"wires":[["681e521a.a8545c"]]},{"id":"681e521a.a8545c","type":"function","z":"f03b57d5.e525f8","name":"","func":"if(msg.payload === \"1\"){\n    msg.colour = \"white\";\n    msg.background =\"green\";\n    msg.topic = \"Running\";\n}\nelse{\n    msg.colour = \"grey\";\n    msg.background = \"red\";\n    msg.topic = \"Stopped\";\n}\nreturn msg;","outputs":1,"noerr":0,"x":290,"y":1420,"wires":[["3eaf950.3ae366c"]]},{"id":"dcffcfae.5b47d","type":"ui_button","z":"f03b57d5.e525f8","name":"","group":"9930d3ac.be82f","order":0,"width":0,"height":0,"passthru":false,"label":"button0","color":"","bgcolor":"","icon":"","payload":"0","payloadType":"str","topic":"","x":140,"y":1460,"wires":[["681e521a.a8545c"]]},{"id":"9930d3ac.be82f","type":"ui_group","z":"","name":"Default","tab":"84f27b23.c30748","disp":true,"width":"6"},{"id":"84f27b23.c30748","type":"ui_tab","z":"","name":"Home","icon":"wi-forecast-io-rain","order":1}]

[Hugobox]

Hi Mike!

Here's my take on it. works well in Chrome, probably not in IE.

[{"id":"8c0c459a.ed7c28","type":"function","z":"3dc8ae0.6cb8152","name":"check","func":"if (msg.payload === 0){\n    msg.payload = \"#FF0000\";\n    return msg;\n}else if (msg.payload === 1){\n    msg.payload = \"#00FF00\";\n    return msg;\n}\n","outputs":1,"noerr":0,"x":850,"y":2580,"wires":[["15bbfd73.5559f3"]]},{"id":"15bbfd73.5559f3","type":"ui_template","z":"3dc8ae0.6cb8152","group":"389342d0.c465ce","name":"Status LED","order":15,"width":"0","height":"0","format":"<style>\n.led {\n    float: right;\n    padding: 3px;\n    width: 10px;\n    height: 10px;\n    margin: 2px 5px 5px 5px;\n    border-radius: 50%;\n    \n}\n</style>\n\n<div>{{msg.topic}}<span class=\"led\" style=\"background-color: {{msg.payload}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload}} 0 3px 15px;\"></span></div>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":990,"y":2580,"wires":[[]]},{"id":"a92b4f7.12486b","type":"inject","z":"3dc8ae0.6cb8152","name":"","topic":"running","payload":"1","payloadType":"num","repeat":"","crontab":"","once":false,"x":700,"y":2560,"wires":[["8c0c459a.ed7c28"]]},{"id":"651590b8.ce5f6","type":"inject","z":"3dc8ae0.6cb8152","name":"","topic":"stopped","payload":"0","payloadType":"num","repeat":"","crontab":"","once":false,"x":700,"y":2600,"wires":[["8c0c459a.ed7c28"]]},{"id":"389342d0.c465ce","type":"ui_group","z":"","name":"Other UI","tab":"52aaa596.768b7c","order":3,"disp":true,"width":"6"},{"id":"52aaa596.768b7c","type":"ui_tab","z":"","name":"Angular UI templates","icon":"dashboard"}]

On Thursday, December 7, 2017 at 2:09:22 PM UTC-5, Mike Arney wrote:

[Mike Arney]

I ended up getting this to work. Thanks for all the help!

I'm using an xBee module to send an on/off signal.

[{"id":"17fbab7a.ebeb65","type":"ui_button","z":"bd6bddc.e9ef72","name":"","group":"afa76b35.137d88","order":3,"width":"2","height":"1","passthru":false,"label":"{{msg.label}}","color":"{{msg.colour}}","bgcolor":"{{msg.background}}","icon":"","payload":"","payloadType":"str","topic":"","x":750,"y":80,"wires":[[]]},{"id":"49880660.538688","type":"ui_button","z":"bd6bddc.e9ef72","name":"","group":"93fdb112.ec249","order":0,"width":"2","height":"1","passthru":false,"label":"{{msg.label}}","color":"{{msg.colour}}","bgcolor":"{{msg.background}}","icon":"","payload":"","payloadType":"str","topic":"","x":590,"y":80,"wires":[[]]},{"id":"ac1b7b33.94f058","type":"function","z":"bd6bddc.e9ef72","name":"","func":"if(msg.payload === 1){\n    msg.label = \"Running\";\n    msg.colour = \"white\";\n    msg.background = \"green\";\n    return msg;\n}\nelse{\n    msg.label = \"Idle\";\n    msg.colour =\"white\";\n    msg.background = \"red\";\n    return msg;\n}\n","outputs":1,"noerr":0,"x":430,"y":80,"wires":[["49880660.538688","17fbab7a.ebeb65"]]},{"id":"1cd009fc.f80a66","type":"function","z":"bd6bddc.e9ef72","name":"LED Toggle","func":"if(msg.payload.remote64 === \"0013a2004154df25\" && msg.payload.digitalSamples.DIO4 === 0) {\n    msg.payload = 0;\n    }\nelse if(msg.payload.remote64 === \"0013a2004154df25\" && msg.payload.digitalSamples.DIO4 === 1) {\n    msg.payload = 1;\n    }\nelse {\nreturn null;\n}\nreturn msg;","outputs":1,"noerr":0,"x":216,"y":84,"wires":[["2c12108b.2ff1f","ac1b7b33.94f058"]]},{"id":"d61e9796.035298","type":"xbee-rx","z":"bd6bddc.e9ef72","name":"Router3(0013a2004154df25)","xBee":"72923406.31a05c","x":120,"y":20,"wires":[["1cd009fc.f80a66","bb13e2a3.a1d0f"]]},{"id":"afa76b35.137d88","type":"ui_group","z":"","name":"HT","tab":"e3504922.217b08","order":2,"disp":true,"width":"6"},{"id":"93fdb112.ec249","type":"ui_group","z":"","name":"Machine State","tab":"4a3f0164.a412d","disp":true,"width":"6"},{"id":"72923406.31a05c","type":"xbee-config","z":"","apiMode":"1","rawFrames":false,"convertAdc":true,"vrefAdc":"1200","serialPort":"/dev/ttyS0","lock":true,"baudRate":"9600","dataBits":"8","stopBits":"1","parity":"none","bufferSize":"65536","rtscts":false,"xon":false,"xoff":false,"xany":false,"vmin":"1","vtime":"0"},{"id":"e3504922.217b08","type":"ui_tab","z":"","name":"All Machines","icon":"dashboard","order":1},{"id":"4a3f0164.a412d","type":"ui_tab","z":"","name":"HT","icon":"dashboard","order":3}]

On Thursday, December 7, 2017 at 2:09:22 PM UTC-5, Mike Arney wrote:

[Mike Arney]

I liked both Dave and Hugobox's examples. I will play with both.

Thanks again!

On Thursday, December 7, 2017 at 2:09:22 PM UTC-5, Mike Arney wrote:

[Dan Bicks]

Hugo,

Awesome example big thanks this is what I was looking for also looks like an led :)

Can we make this a rectangle LED also?

Super work cheers

Dans

[Hugobox]

Yeah! try with border-radius: 0%; this should give you a rectangle LED.

[Dan Bicks]

Woo works a treat well happy :)

Cheers buddy

How about an LED rectangle signal strength bar meter? have you any ideas on creating one of these?

Big thanks

Dans

[Hugobox]

Maybe something like this might be what you have in mind?

[{"id":"c3cd906d.9f7f6","type":"inject","z":"3dc8ae0.6cb8152","name":"","topic":"","payload":"1","payloadType":"num","repeat":"","crontab":"","once":false,"x":630,"y":2760,"wires":[["3f8ad0cb.25b66"]]},{"id":"3cacdc28.8b7e94","type":"ui_template","z":"3dc8ae0.6cb8152","group":"389342d0.c465ce","name":"Bar Led Meter","order":13,"width":"0","height":"0","format":"<style>\n.led {\n    float: right;\n    padding: 3px;\n    width: 3px;\n    height: 10px;\n    margin: 4px 2px 8px 0px;\n    border-radius: 0%;\n    \n}\n</style>\n\n<div>Bar led meter\n<span class=\"led\" style=\"background-color: {{msg.payload.one}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload.one}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload.one}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload.one}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload.one}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload.one}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload.two}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload.two}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload.two}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload.two}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload.two}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload.two}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload.three}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload.three}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload.three}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload.three}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload.three}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload.three}} 0 3px 15px;\"></span>\n</div>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":940,"y":2780,"wires":[[]]},{"id":"3f8ad0cb.25b66","type":"function","z":"3dc8ae0.6cb8152","name":"","func":"if (msg.payload == 1){\n    msg.payload = {\"one\":\"#80FF00\",\"two\":\"yellow\",\"three\":\"red\"};\n}else if (msg.payload == 2){\n    msg.payload = {\"one\":\"#006600\",\"two\":\"yellow\",\"three\":\"red\"};\n}else if(msg.payload == 3){\n    msg.payload = {\"one\":\"#006600\",\"two\":\"#666600\",\"three\":\"red\"};\n}else if(msg.payload == 4){\n    msg.payload = {\"one\":\"#006600\",\"two\":\"#666600\",\"three\":\"#660000\"};\n}\nreturn msg;","outputs":1,"noerr":0,"x":790,"y":2780,"wires":[["3cacdc28.8b7e94"]]},{"id":"72684336.371ebc","type":"inject","z":"3dc8ae0.6cb8152","name":"","topic":"","payload":"2","payloadType":"num","repeat":"","crontab":"","once":false,"x":630,"y":2800,"wires":[["3f8ad0cb.25b66"]]},{"id":"7b2d0dfb.3a13c4","type":"inject","z":"3dc8ae0.6cb8152","name":"","topic":"","payload":"3","payloadType":"num","repeat":"","crontab":"","once":false,"x":630,"y":2840,"wires":[["3f8ad0cb.25b66"]]},{"id":"89bab701.5f7e88","type":"inject","z":"3dc8ae0.6cb8152","name":"","topic":"","payload":"4","payloadType":"num","repeat":"","crontab":"","once":false,"x":630,"y":2880,"wires":[["3f8ad0cb.25b66"]]},{"id":"389342d0.c465ce","type":"ui_group","z":"","name":"Other UI","tab":"52aaa596.768b7c","order":3,"disp":true,"width":"6"},{"id":"52aaa596.768b7c","type":"ui_tab","z":"","name":"Angular UI templates","icon":"dashboard"}]

[Hugobox]

Here's a better version of the LED bar graph:

[{"id":"3cacdc28.8b7e94","type":"ui_template","z":"3dc8ae0.6cb8152","group":"389342d0.c465ce","name":"LED Bar-graph Display","order":13,"width":"0","height":"0","format":"<style>\n.led {\n    float: right;\n    padding: 3px;\n    width: 3px;\n    height: 10px;\n    margin: 4px 2px 8px 0px;\n    border-radius: 0%;\n    \n}\n</style>\n\n<div>Bar led meter\n<span class=\"led\" style=\"background-color: {{msg.payload[9]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[9]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[8]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[8]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[7]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[7]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[6]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[6]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[5]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[5]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[4]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[4]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[3]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[3]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[2]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[2]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[1]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[1]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[0]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[0]}} 0 3px 15px;\"></span>\n</div>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1030,"y":2840,"wires":[[]]},{"id":"ac780317.083ca","type":"inject","z":"3dc8ae0.6cb8152","name":"","topic":"","payload":"1","payloadType":"num","repeat":"","crontab":"","once":false,"x":650,"y":2800,"wires":[["185277ce.523cc8"]]},{"id":"185277ce.523cc8","type":"function","z":"3dc8ae0.6cb8152","name":"LED colors","func":"var bargraph = [\"#006600\",\"#006600\",\"#006600\",\"#006600\",\"#006600\",\"#666600\",\"#666600\",\"#666600\",\"#660000\",\"#660000\"];\nvar bargraphON = [\"#00FF00\",\"#00FF00\",\"#00FF00\",\"#00FF00\",\"#00FF00\",\"#FFFF00\",\"#FFFF00\",\"#FFFF00\",\"#FF0000\",\"#FF0000\"];\n\nfor (var i = 0; i < msg.payload; i++){\n    bargraph[i] = bargraphON[i];\n}\nmsg.payload = bargraph;\nreturn msg;","outputs":1,"noerr":0,"x":830,"y":2840,"wires":[["3cacdc28.8b7e94"]]},{"id":"740bb86a.ec3dc8","type":"inject","z":"3dc8ae0.6cb8152","name":"","topic":"","payload":"6","payloadType":"num","repeat":"","crontab":"","once":false,"x":650,"y":2840,"wires":[["185277ce.523cc8"]]},{"id":"db6a0978.780ee8","type":"inject","z":"3dc8ae0.6cb8152","name":"","topic":"","payload":"9","payloadType":"num","repeat":"","crontab":"","once":false,"x":650,"y":2880,"wires":[["185277ce.523cc8"]]},{"id":"389342d0.c465ce","type":"ui_group","z":"","name":"Other UI","tab":"52aaa596.768b7c","order":3,"disp":true,"width":"6"},{"id":"52aaa596.768b7c","type":"ui_tab","z":"","name":"Angular UI templates","icon":"dashboard"}]

[Dan Bicks]

Hugo,

You are the man this is truly awesome. The bargraph looks incredible and just like the real thing.

Sooo cool mate.

Massive thanks, it is amazing what can be done with template nodes.

Huge thanks

Dans

[Hugobox]

My pleasure! Glad you like it! Hopefully usefull for others as well!

[David Caparrós]

Thanks a Lot Hugobox, I loves your bars, really usefull for me, hope some other people share this kind of staff so people like me with no knowledge on this can use it.

I have modified a bit yours to add more bars and add orange color .

[{"id":"e2b77de7.53f6b","type":"ui_template","z":"712ddec8.883c8","group":"e41daecb.93f06","name":"Volumen","order":13,"width":"0","height":"0","format":"<style>\n.led {\n    float: right;\n    padding: 3px;\n    width: 3px;\n    height: 10px;\n    margin: 4px 2px 8px 0px;\n    border-radius: 0%;\n    \n}\n</style>\n\n<div>Volumen\n<span class=\"led\" style=\"background-color: {{msg.payload[13]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[13]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[12]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[12]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[11]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[11]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[10]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[10]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[9]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[9]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[8]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[8]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[7]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[7]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[6]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[6]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[5]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[5]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[4]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[4]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[3]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[3]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[2]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[2]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[1]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[1]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[0]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[0]}} 0 3px 15px;\"></span>\n</div>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1120,"y":1860,"wires":[[]]},{"id":"8ce8522e.5747b","type":"function","z":"712ddec8.883c8","name":"LED colors","func":"var bargraph = [\"#006600\",\"#006600\",\"#006600\",\"#006600\",\"#666600\",\"#666600\",\"#666600\",\"#666600\",\"#8A4B08\",\"#8A4B08\",\"#8A4B08\",\"#660000\",\"#660000\",\"#660000\"];\nvar bargraphON = [\"#00FF00\",\"#00FF00\",\"#00FF00\",\"#00FF00\",\"#FFFF00\",\"#FFFF00\",\"#FFFF00\",\"#FFFF00\",\"#FE9A2E\",\"#FE9A2E\",\"#FE9A2E\",\"#FF0000\",\"#FF0000\",\"#FF0000\"];\n\nfor (var i = 0; i < msg.payload; i++){\n    bargraph[i] = bargraphON[i];\n}\nmsg.payload = bargraph;\nreturn msg;","outputs":1,"noerr":0,"x":950,"y":1860,"wires":[["e2b77de7.53f6b"]]},{"id":"e41daecb.93f06","type":"ui_group","z":"","name":"MEDIA","tab":"b5ad9abd.3a6c38","order":1,"disp":true,"width":"6"},{"id":"b5ad9abd.3a6c38","type":"ui_tab","z":"","name":"C. REMOTOS","icon":"wifi","order":3}]

[Dave C-J]

well worth putting on flows.nodered.org

[Hugobox]

Good Idea! It's now on there for easy access. https://flows.nodered.org/flow/1538793825685bd8f08e4aea16ca2c74

On Monday, December 11, 2017 at 3:29:20 PM UTC-5, Dave C-J wrote:

well worth putting on flows.nodered.org

[rholl...@gmail.com]

Hello Hugobox

have you an idea to insert the "LED" in the NODE-GROUP-Title Bar? In your example i need a separat line in the GROUP-Box. I just want to check the status of my Arduinos.

Thanks for Help
Ralf

[David Caparrós]

Hello,

On the title bar is not possible directly on dashboard, the only change is that you make your on web with it.

The only option is to insert it as an object on the side of a switch for instance

Regards

David Caparros

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to a topic in the Google Groups "Node-RED" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/node-red/taA7-XZ96JE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/add5c8cd-62c4-4844-818e-5e50f02fec11%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[rholl...@gmail.com]

Hi David,

thank you for your answer. Unfortunately, your suggestion is not feasible for me, because I also need a separate goals in this case. My wish would be to get the indicator in the title "luces" or "persiana". In spite of everything thank you.

Ralf

David Caparros

To unsubscribe from this group and all its topics, send an email to node-red+u...@googlegroups.com.

[rholl...@gmail.com]

Hi David,

other idea - can i make more as one LED in one line, then i have a Block with all LED in a line and not few lines?

Thank Ralf

[David Caparrós]

You can do as many as you wanted and organize it as you wanted, here an example I use to monitor the real volume feedback from the TV coming from an analog value

[{"id":"e2b77de7.53f6b","type":"ui_template","z":"712ddec8.883c8","group":"e41daecb.93f06","name":"Volumen","order":13,"width":"0","height":"0","format":"<style>\n.led {\n    float: right;\n    padding: 3px;\n    width: 3px;\n    height: 10px;\n    margin: 4px 2px 8px 0px;\n    border-radius: 0%;\n    \n}\n</style>\n\n<div>Volumen\n<span class=\"led\" style=\"background-color: {{msg.payload[13]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[13]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[12]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[12]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[11]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[11]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[10]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[10]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[9]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[9]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[8]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[8]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[7]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[7]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[6]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[6]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[5]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[5]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[4]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[4]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[3]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[3]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[2]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[2]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[1]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[1]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[0]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[0]}} 0 3px 15px;\"></span>\n</div>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1120,"y":1860,"wires":[[]]},{"id":"8ce8522e.5747b","type":"function","z":"712ddec8.883c8","name":"LED colors","func":"var bargraph = [\"#006600\",\"#006600\",\"#006600\",\"#006600\",\"#666600\",\"#666600\",\"#666600\",\"#666600\",\"#8A4B08\",\"#8A4B08\",\"#8A4B08\",\"#660000\",\"#660000\",\"#660000\"];\nvar bargraphON = [\"#00FF00\",\"#00FF00\",\"#00FF00\",\"#00FF00\",\"#FFFF00\",\"#FFFF00\",\"#FFFF00\",\"#FFFF00\",\"#FE9A2E\",\"#FE9A2E\",\"#FE9A2E\",\"#FF0000\",\"#FF0000\",\"#FF0000\"];\n\nfor (var i = 0; i < msg.payload; i++){\n    bargraph[i] = bargraphON[i];\n}\nmsg.payload = bargraph;\nreturn msg;","outputs":1,"noerr":0,"x":950,"y":1860,"wires":[["e2b77de7.53f6b"]]},{"id":"e41daecb.93f06","type":"ui_group","z":"","name":"MEDIA","tab":"b5ad9abd.3a6c38","order":1,"disp":true,"width":"6"},{"id":"b5ad9abd.3a6c38","type":"ui_tab","z":"","name":"C. REMOTOS","icon":"wifi","order":3}]

David Caparros

To unsubscribe from this group and all its topics, send an email to node-red+unsubscribe@googlegroups.com.

To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.

To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/74fe3a57-4120-4c79-a64d-76c338e703fb%40googlegroups.com.