Dashboard 2 Beta development

Dashboard
17

Actually, I went too far, too soon Ted!

It is as simple as this:

The template

<v-icon 
    :color="msg.payload?.state === 'on' ? (msg.payload?.color || 'green') : 'grey'"
    :icon="msg.payload?.state === 'on' ? 'mdi-led-on' : 'mdi-led-off'">
</v-icon>

Demo flow

[{"id":"fb5c574dc9088451","type":"ui-template","z":"1ca1817447127d22","group":"34a8586ca5a5880e","dashboard":"ID-BASE-1","page":"ID-PAGE-1","name":"","order":0,"width":0,"height":0,"head":"","format":"\n<v-icon \n    :color=\"msg.payload.state === 'on' ? (msg.payload?.color || 'green') : msg.payload.color\"\n    :icon=\"msg.payload.state === 'on' ? 'mdi-led-on' : 'mdi-led-off'\">\n</v-icon>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":2780,"y":320,"wires":[[]]},{"id":"d813d7d4882adf78","type":"function","z":"1ca1817447127d22","name":"generateRandomColorName","func":"const colorNames = [\"red\", \"pink\", \"yellow\", \"green\", \"purple\", \"blue\", \"cyan\", \"lime\", \"orange\"];\n\nfunction generateRandomColorName() {\n  const randomIndex = Math.floor(Math.random() * colorNames.length);\n  return colorNames[randomIndex];\n}\n\nmsg.payload = {\n  state: 'on',\n  color: generateRandomColorName()\n}\nreturn msg;","outputs":1,"timeout":30,"noerr":0,"initialize":"","finalize":"","libs":[],"x":2720,"y":360,"wires":[["fb5c574dc9088451"]]},{"id":"8330c685d9761104","type":"inject","z":"1ca1817447127d22","name":"on","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":2490,"y":360,"wires":[["d813d7d4882adf78"]]},{"id":"1ebc687c8ca026be","type":"inject","z":"1ca1817447127d22","name":"off","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{ \"state\": \"off\" }","payloadType":"json","x":2490,"y":320,"wires":[["fb5c574dc9088451"]]},{"id":"34a8586ca5a5880e","type":"ui-group","name":"Group 4-1","page":"03b64402237b9653","width":"6","height":"1","order":-1,"showTitle":false,"className":""},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard"},{"id":"ID-PAGE-1","type":"ui-page","name":"Page 1","ui":"ID-BASE-1","path":"/page1","layout":"notebook","theme":"f9b6670b127dc219"},{"id":"03b64402237b9653","type":"ui-page","name":"Page 4","ui":"ID-BASE-1","path":"/p4","layout":"grid","theme":"4bff2b59c4c518e1","order":-1,"className":""},{"id":"f9b6670b127dc219","type":"ui-theme","name":"FlowForge Theme","colors":{"surface":"#152a47","primary":"#005aff","bgPage":"#ffffff","groupBg":"#ffffff","groupOutline":"#cc3e3e"}},{"id":"4bff2b59c4c518e1","type":"ui-theme","name":"Another Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"}}]

Just send:

{"state":"on","color":"green-lighten-2"}

or

{"state":"off"}

Thats it

1 Like