I expect there are better options available but it is possible to turn the gauge node into a vertical LED bar chart.
This uses the Battery Level gauge, which assumes that msg.payload is a percentage.
This is the unmolested battery level gauge:
Limitations
- The height of the "illuminated" bar is a CSS calculation
round(nearest, var(--gauge-fill-pc),10%)This is a pretty new CSS feature and may not be widely supported. Firefox v130 always seems to round up. I don't know if this is a bug in firefox or (much more likely!) an error in my CSS. - The LED appearance and glow are unconvincing. Since the coloured area is a single block I'm not sure how to improve them.
- I have only tested it on the grid dashboard layout at 1x3 and 1x4 size. I can't get the text positioning to work with a single CSS setting for both sizes.
- It looks much better on a light theme (but that is the only theme available so far?)
- There seem to be a lot of !important declarations in the CSS for the battery level gauge, so we need more here to override those styles
[{"id":"01c66318d76e9bf7","type":"ui-gauge","z":"7c04d006.0132a","name":"","group":"c144d9e75c434dc4","order":2,"width":"1","height":"3","gtype":"gauge-battery","gstyle":"needle","title":"","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#ea5353"},{"from":"40","color":"#ffc800"},{"from":"70","color":"#5cd65c"}],"min":0,"max":"100","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"batterygaugeled","x":640,"y":660,"wires":[]},{"id":"4a9cfcd914e8885d","type":"inject","z":"7c04d006.0132a","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"12","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"4","payloadType":"num","x":430,"y":620,"wires":[["01c66318d76e9bf7"]]},{"id":"545b7b42a0e7b6f7","type":"inject","z":"7c04d006.0132a","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"12","crontab":"","once":true,"onceDelay":"3","topic":"","payload":"22","payloadType":"num","x":430,"y":640,"wires":[["01c66318d76e9bf7"]]},{"id":"b396474c5c21818d","type":"inject","z":"7c04d006.0132a","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"12","crontab":"","once":true,"onceDelay":"6","topic":"","payload":"67","payloadType":"num","x":430,"y":660,"wires":[["01c66318d76e9bf7"]]},{"id":"120a20268efd554c","type":"inject","z":"7c04d006.0132a","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"12","crontab":"","once":true,"onceDelay":"9","topic":"","payload":"100","payloadType":"num","x":430,"y":680,"wires":[["01c66318d76e9bf7"]]},{"id":"8ec9fef00208d7cd","type":"ui-template","z":"7c04d006.0132a","page":"dea27ca0b0f9f3e8","name":"LED bar CSS","order":0,"width":0,"height":0,"head":"","format":".batterygaugeled .nrdb-ui-gauge-battery {\n --battery-margin: 0px;\n --battery-radius: 0px;\n width: 2.5em;\n padding: 0px;\n border: 2px solid black;\n}\n.batterygaugeled .nrdb-ui-gauge-battery-icon {\n display: none;\n}\n.batterygaugeled .nrdb-ui-gauge-battery--fill {\n --rounded: var(--gauge-fill-pc);\n --rounded: round(var(--gauge-fill-pc),10%);\n height: var(--rounded) !important;\n box-shadow: var(--gauge-fill) 0px 0px 9px 4px; /*LED GLOW*/\n border-top: 2px solid black;\n}\n.batterygaugeled label.nrdb-ui-gauge-battery--bglabel, .batterygaugeled label.nrdb-ui-gauge-battery--fglabel {\n padding-top: 68px !important; /* 93px for 4 units high gauge, 68px for 3 */\n font-size: 0.85em !important;\n color: black !important;\n background-image: repeating-linear-gradient(180deg, rgba(0,0,0,0), black 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 10%);\n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"page:style","className":"","x":640,"y":620,"wires":[[]]},{"id":"c144d9e75c434dc4","type":"ui-group","name":"Demo","page":"dea27ca0b0f9f3e8","width":"7","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"dea27ca0b0f9f3e8","type":"ui-page","name":"Demo","ui":"a3e614cd9df4ae2e","path":"/page2","icon":"home","layout":"grid","theme":"b892be9ce6f645f6","order":1,"className":"","visible":true,"disabled":false},{"id":"a3e614cd9df4ae2e","type":"ui-base","name":"My Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"b892be9ce6f645f6","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"5px","density":"default"}}]
How it works:
- Apply a CSS class
batterygaugeledand typeBattery Levelto the gauge widget. - Get rid of the battery gauge's rounded corners, padding, nipple and thick border, make it narrower.
.batterygaugeled .nrdb-ui-gauge-battery {
--battery-margin: 0px;
--battery-radius: 0px;
width: 2.5em;
padding: 0px;
border: 2px solid black;
}
- Get rid of the icon.
.batterygaugeled .nrdb-ui-gauge-battery-icon {
display: none;
}
- Round the fill to the nearest 10%, apply a box-shadow glow, draw a line above it.
.batterygaugeled .nrdb-ui-gauge-battery--fill {
--rounded: var(--gauge-fill-pc);
--rounded: round(var(--gauge-fill-pc),10%);
height: var(--rounded) !important;
box-shadow: var(--gauge-fill) 0px 0px 9px 4px; /*LED GLOW*/
border-top: 2px solid black;
}
- Move the text to the bottom, simulate the edges of LEDs with a repeated linear gradient.
.batterygaugeled label.nrdb-ui-gauge-battery--bglabel, .batterygaugeled label.nrdb-ui-gauge-battery--fglabel {
padding-top: 68px !important; /* 93px for 4 units high gauge, 68px for 3 */
font-size: 0.9em !important;
color: black !important;
background-image: repeating-linear-gradient(180deg, rgba(0,0,0,0), black 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 10%);
}
