Hello,
i am still confused how i can bring a icon into my dashboard in dependence of an input.
Example: payload :1 = icon alert, payload 2. = icon standby.
All i find are out of dashborad 1.0 or with switch or button nodes in 2.0.
I just want to show the state(value) - even when i use the switch node i don't know how to connect the icon.
Thx in advance
Olmuk
This will show an mdi icon from msg.payload using a ui-template
[{"id":"0347b8f77f1942f3","type":"ui-template","z":"997da33a0beedade","group":"4f87bd59a15b847e","page":"","ui":"","name":"icontest","order":0,"width":0,"height":0,"head":"","format":"<template>\n<div>Icon from msg.payload: \n <span :class=\"`mdi ${msg?.payload}`\" style=\"font-size:64px; color:green;\"></span></div>\n</template>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":520,"y":7500,"wires":[[]]},{"id":"b2849a461e3659fc","type":"inject","z":"997da33a0beedade","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"mdi-weather-sunny","payloadType":"str","x":330,"y":7500,"wires":[["0347b8f77f1942f3"]]},{"id":"7ce447526163b30d","type":"inject","z":"997da33a0beedade","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"mdi-home","payloadType":"str","x":300,"y":7560,"wires":[["0347b8f77f1942f3"]]},{"id":"4f87bd59a15b847e","type":"ui-group","name":"test","page":"c6ff182a4185f2f2","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"c6ff182a4185f2f2","type":"ui-page","name":"Test page","ui":"ID-BASE-1","path":"/testpage","icon":"home","layout":"grid","theme":"c4cba76c368d7996","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":3,"className":"","visible":"true","disabled":"false"},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard","appIcon":"","includeClientData":false,"acceptsClientConfig":["ui-control","ui-notification","ui-gauge-classic"],"showPathInSidebar":false,"headerContent":"page","titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":"1","showDisconnectNotification":true,"allowInstall":true},{"id":"c4cba76c368d7996","type":"ui-theme","name":"Test theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"c3db8356e5f7c689","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.29.0"}}]
Hello Colin,
many thanks for the answer - it works fine.
How can i use awesome fonts ?
fa-5x fa-gear fa-spin, color green and
fa-5x fa-gear, color orange
I don't know abaout the mdi-weather-sunny
Hello Colin,
i draw a blank, sorry Material design icon
but the think there are more with the fa - how is the syntax, please ?
I don't know whether it is possible. The mdi fonts are built in. The icons are those in v7.4.47 of the mdi fonts. See Material Design Icons - Icon Library - Pictogrammers. There are a vast number available.
I found the necessary in mdi, thanks.
And i connect to the incoming value for change the icon - great !!!
And i'v learned a lot ...
Hi Colin, do you have an idea how i can change the background color of the whole text node with the msg.payload ?
I can set the label, size, color and background color of the icon :
<template>
<div><h1>Status Program</ h1>
<span :class="`mdi ${msg?.payload}`" style="font-size:100px; color:black; background-color:powderblue;"></span></div>
</template>
I isn't a text node it is a template node.
Do you mean that you want to change the background colour of the whole div? That is just basic html/css.
