I am trying to create a Node-RED dashboard for my smart home. I am wanting to create a widget that looks like the image below (sorry for the poor quality), but I don't know how to get the icon between the label and value. Is it even possible?
To just create such layout it is possible to create with ui_text widget by adding custom CSS for it, but that way you can't change the icon if you'll need to.
Not exactly same but close..
[{"id":"fd5b5297.1efbe","type":"ui_text","z":"63163740.2d4508","group":"a1b48177.63b91","order":4,"width":"3","height":"2","name":"","label":"{{label}}","format":"{{msg.payload}}","layout":"col-center","x":670,"y":200,"wires":[]},{"id":"b66538aa.ee2418","type":"function","z":"63163740.2d4508","name":"","func":"msg.label = 'Hallway<p class=\"sublabel\">51 minutes ago</p>'\nmsg.payload = \"CLEAR\"\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":500,"y":200,"wires":[["fd5b5297.1efbe"]]},{"id":"d4e059c4.eaca98","type":"inject","z":"63163740.2d4508","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":330,"y":200,"wires":[["b66538aa.ee2418"]]},{"id":"ba04f940.cf7268","type":"ui_template","z":"63163740.2d4508","group":"a1b48177.63b91","name":"CSS","order":5,"width":0,"height":0,"format":"<style>\n:root{\n --icon:\"\\e566\"\n}\n#Custom_Default_cards > md-card.nr-dashboard-text._md.layout-column.layout-align-center-center.nr-dashboard-widget-__label__.visible > p.label{\n text-align:center;\n}\n#Custom_Default_cards > md-card.nr-dashboard-text._md.layout-column.layout-align-center-center.nr-dashboard-widget-__label__.visible > p.label > p{\n font-size: 0.7em;\n margin-top: -0.4em;\n}\n#Custom_Default_cards > md-card.nr-dashboard-text._md.layout-column.layout-align-center-center.nr-dashboard-widget-__label__.visible > p.value{\n text-align: center;\n position: relative;\n margin-top: 0.5em;\n}\n#Custom_Default_cards > md-card.nr-dashboard-text._md.layout-column.layout-align-center-center.nr-dashboard-widget-__label__.visible > p.value:before{\n font-family: 'Material Icons';\n font-size: 2em;\n font-weight: normal;\n content: var(--icon);\n display: block;\n position: relative;\n top: -4px;\n}\n#Custom_Default_cards > md-card.nr-dashboard-text._md.layout-column.layout-align-center-center.nr-dashboard-widget-__label__.visible > p.value:after{\n content: \"\";\n position: absolute;\n border: 2px solid white;\n width: 2.5em;\n height: 2.5em;\n top: -9px;\n left: 0px;\n border-radius: 100em;\n}\n</style>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":670,"y":240,"wires":[[]]},{"id":"a1b48177.63b91","type":"ui_group","name":"Default","tab":"c122ecdc.526d7","order":2,"disp":true,"width":"6","collapse":false},{"id":"c122ecdc.526d7","type":"ui_tab","name":"Custom","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
You'll need to be more specific about what the widget should be able to do. Is it interactive somehow? What elements you'll need to update dynamically ...
The widget will be connected to a motion sensor. When that motion sensor is triggered the "CLEAR" text will change to "ACTIVE" and the icon will change to the colour red. The "51 minutes ago" is the amount time since the sensor was last activated, so this will also change depending on how much time has passed since motion was last detected.
The icon is meant to flash red when motion is detected, but think that may be too complicated.
I have just started to play around with the Node-RED dashboard and haven't touched CSS before, so I am really diving into the deep end with this, but hoping to learn as I go.
1 Like
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
