Help with design of a dashboard icons

Dashboard
1

I am slowly getting into this tasmota stuff for remote control of devices.

I have (now) got a 3 point board, two x single point plugs and two dimable bulbs.
(Haven't got to the bulbs)

But the power board and the two single point switches:
I get that international symbols need to be generic and overall meaningful to what they are doing.

So I'm stuck how to build a GUI for these power points.

What icon would work to mean this is a power point - which supplies power?
And how to set it up so I have the condition of the point and buttons (?) to turn it/them off/on.

Anyone?

2

This is the best I can get for now.

For some reason I can't get the icon to work.

[{"id":"9f4c8d43.a38068","type":"ui_button","z":"9245b569.9f881","name":"3","group":"f26beec9.12872","order":3,"width":"2","height":"3","passthru":false,"label":"","tooltip":"3","color":"","bgcolor":"{{msg.colour}}","icon":"{{msg.payload}}","payload":"X","payloadType":"str","topic":"","x":460,"y":610,"wires":[[]]},{"id":"8fc7a573.52301","type":"change","z":"9245b569.9f881","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"'fa-toggle-on'","tot":"str"},{"t":"set","p":"colour","pt":"msg","to":"red","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":290,"y":610,"wires":[["9f4c8d43.a38068","2b83008b.428b58"]]},{"id":"bb7209a1.e3e3d8","type":"inject","z":"9245b569.9f881","name":"Red","topic":"press","payload":"<font color = \"red\" i class=\"fa fa-toggle-on fa-rotate-270 fa-3x\"></i><font>","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"0.2","x":120,"y":610,"wires":[["8fc7a573.52301"]]},{"id":"f26beec9.12872","type":"ui_group","z":"","name":"Power","tab":"a0ef1d6c.c0bc1","order":2,"disp":true,"width":"6","collapse":false},{"id":"a0ef1d6c.c0bc1","type":"ui_tab","z":"","name":"Real World Control (Relays etc)","icon":"dashboard","disabled":false,"hidden":false}]

This is a working flow (below), and I am trying to be better in what I am doing in that I can see the name of the switch on the dashboard.

Reading the information for the button I can send a msg.payload with the icon name and that is shown. Then I can use the label to put the name of the switch/device.
't would be nice. Then I am not just seeing the toggles and no names.

[{"id":"83e477de.4cb57","type":"inject","z":"9245b569.9f881","name":"Red","topic":"press","payload":"<font color = \"red\" i class=\"fa fa-toggle-on fa-rotate-270 fa-3x\"></i><font>","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"0.2","x":170,"y":390,"wires":[["5bbb8b12.26834c"]]},{"id":"5bbb8b12.26834c","type":"ui_button","z":"9245b569.9f881","name":"3","group":"f26beec9.12872","order":3,"width":"1","height":"2","passthru":false,"label":"{{msg.payload}}","tooltip":"3","color":"","bgcolor":"black","icon":"","payload":"X","payloadType":"str","topic":"","x":310,"y":390,"wires":[["bd779da7.9cae38"]]},{"id":"bd779da7.9cae38","type":"function","z":"9245b569.9f881","name":"push button toggle","func":"let l = context.get('state') || 0;\nlet msg1 = {};\nif (msg.payload == 'X')\n{\n    l = (l + 1) % 2;\n    context.set('state',l);\n}\nif (l === 0)\n{\n    msg.payload = '<font color = \"red\" i class=\"fa fa-toggle-on fa-rotate-270 fa-3x\"></i>';\n    msg1.payload = \"off\";\n}\nelse\nif (l === 1)\n{\n    //\n    msg.payload = '<font color = \"green\" i class=\"fa fa-toggle-on fa-rotate-90 fa-3x\"></i>';\n    msg1.payload = \"on\";\n}\nreturn [msg,msg1];","outputs":2,"noerr":0,"x":310,"y":430,"wires":[["5bbb8b12.26834c"],["5b71a1a5.7182b8","1c33e11.9d3391f"]]},{"id":"5b71a1a5.7182b8","type":"debug","z":"9245b569.9f881","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":510,"y":470,"wires":[]},{"id":"1c33e11.9d3391f","type":"link out","z":"9245b569.9f881","name":"","links":["19850174.2a08ef"],"x":455,"y":430,"wires":[]},{"id":"f26beec9.12872","type":"ui_group","z":"","name":"Power","tab":"a0ef1d6c.c0bc1","order":2,"disp":true,"width":"6","collapse":false},{"id":"a0ef1d6c.c0bc1","type":"ui_tab","z":"","name":"Real World Control (Relays etc)","icon":"dashboard","disabled":false,"hidden":false}]
3

I am working on this but it shows the animated icon working.

[{"id":"c585499a.0a48","type":"mqtt in","z":"c3b24910.186f48","name":"Reset","topic":"Reset","qos":"2","datatype":"auto","broker":"6b8f56d7.82af78","x":70,"y":890,"wires":[["666dca14.db822c","3ca0b23d.b5aa06","96d4e2e.c04962","3019b205.cf6bee","fb4f8442.57435","df1f919c.fb015","f81f522f.97cab8","e497a056.d816e","e07fbd27.f4085","c517d77b.699888"]]},{"id":"2a5c2ec1.d3b8c2","type":"function","z":"c3b24910.186f48","name":"Push Button","func":"var state = context.get(\"STATE\")||0;\n\n//  Look for a !X message to get values.\nif (msg.payload != \"X\")     //Do this if the message is NOT \"X\"\n{\n    //\n    //  Background colours first.\n    //\n    context.set(\"ABGC\", msg.colourA);\n    context.set(\"BBGC\", msg.colourB);\n    //\n    //  Now do text.\n    //\n    context.set(\"Atxt\", msg.txtA);\n    context.set(\"Btxt\", msg.txtB);\n    //\n    //  Font colours.\n    //\n    context.set(\"AFC\",msg.txtclrA);\n    context.set(\"BFC\",msg.txtclrB);\n    //\n    //  Payloads.\n    //\n    context.set(\"PayloadA\", msg.payloadA);\n    context.set(\"PayloadB\", msg.payloadB);\n    //\n    //  Icons.\n    //\n    context.set(\"icon_on\", msg.icon_on);\n    context.set(\"icon_off\", msg.icon_off);\n    //\n    //  Topic.\n    //\n    if (msg.topicSET !== null)\n    {\n        context.set(\"Topic\",msg.topicSET);\n    } else\n    {\n        context.set(\"Topic\",\"~\");\n    }\n    return;\n}\n//      Now on to the real stuff.\nif (msg.payload == \"X\")\n{\n    state = (state + 1)% 2;\n    //node.warn(state);\n    context.set(\"STATE\",state);\n} else if (msg.payload == \"Y\") {\n    state = 0;\n    context.set(\"STATE\",state);\n}\nif (state === 0)\n{\n    //  Condition A\n    msg.payload = context.get(\"PayloadA\");\n    msg.colour = context.get(\"ABGC\");\n    msg.txt = context.get(\"icon_off\")+context.get(\"Atxt\");\n    msg.fontclr = context.get(\"AFC\");\n    msg.icon = context.get(\"icon_off\");\n} else\n{\n    //  Condition B\n    msg.payload = context.get(\"PayloadB\");\n    msg.colour = context.get(\"BBGC\");\n    msg.txt = context.get(\"icon_on\")+context.get(\"Btxt\");\n    msg.fontclr = context.get(\"BFC\");\n    msg.icon = context.get(\"icon_on\");\n}\nif (context.get(\"Topic\") == \"~\")\n{\n    msg.topic = \"\";\n} else\n{\n    msg.topic = context.get(\"Topic\");\n}\nreturn msg;\n","outputs":1,"noerr":0,"x":480,"y":850,"wires":[["59c9ee32.7c27c","4c59ab49.50f394","1bacea17.5d7aa6"]]},{"id":"59c9ee32.7c27c","type":"ui_button","z":"c3b24910.186f48","name":"Ignitor","group":"559f6812.e7fd18","order":4,"width":3,"height":2,"passthru":false,"label":"{{msg.txt}}","tooltip":"","color":"{{msg.fontclr}}","bgcolor":"{{msg.colour}}","icon":"","payload":"X","payloadType":"str","topic":"","x":460,"y":800,"wires":[["2a5c2ec1.d3b8c2","1bacea17.5d7aa6"]]},{"id":"e07fbd27.f4085","type":"function","z":"c3b24910.186f48","name":"Setup","func":"msg = {\n    \"colourA\": \"red\",\n    \"colourB\": \"green\",\n    \"txtA\": \"Off\",\n    \"txtB\": \"On\",\n    \"txtclrA\": \"black\",\n    \"txtclrB\": \"white\",\n    \"payloadA\": \"0\",\n    \"payloadB\": \"1\",\n    \"icon_off\": '<i class=\"fa fa-2x fa-bomb\"></i> ',\n    \"icon_on\": '<i class=\"fa fa-spinner fa-pulse fa-3x fa-fw\"></i> ',\n    \"topicSET\": \"channel_6\"\n}\nreturn msg;","outputs":1,"noerr":0,"x":300,"y":850,"wires":[["2a5c2ec1.d3b8c2"]]},{"id":"6b8f56d7.82af78","type":"mqtt-broker","z":"","name":"PI","broker":"127.0.0.1","port":"1883","clientid":"","usetls":false,"compatmode":false,"keepalive":"60","cleansession":true,"birthTopic":"home/temperature","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"559f6812.e7fd18","type":"ui_group","z":"","name":"Ignitor","tab":"91b245b1.b4ed7","order":4,"disp":true,"width":5,"collapse":false},{"id":"91b245b1.b4ed7","type":"ui_tab","z":"","name":"Pump Control Dashboard","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
4

Thanks.

To anyone else reading and know MQTT (or you @vlturner) On a side note: The MQTT node. You have it connected/ing to "PI", a host I do not have on my system. Yet it shows CONNECTED. How/why?

Silly me.
127.0.0.1
D'oh!

Screenshot from 2020-01-09 19-10-16
Screenshot from 2020-01-09 19-10-16820Ă—461 20.8 KB

5

A lightening icon is commonly used to denote power.

6

(not wanting to sound stupid........ )

Ah, who cares! :wink:

I had thought I had seen one somewhere in my journeys and I have looked but didn't see it.

Sorry, but is it font-awesome, material-design, or . . . . . . . ?

7

Maybe this?

https://fontawesome.com/icons/bolt

A quick google (actually startpage.com :grinning:) search does the job.

And I meant "lightning" of course rather than "lightening" :frowning_face:

8

No prob's. I tried searching too, but knowing my spelling skills and some of the names I used also probably didn't help.

1 Like