# Ui-gauge widget (battery level) percentage as a vertical LED array

**URL:** <https://discourse.nodered.org/t/ui-gauge-widget-battery-level-percentage-as-a-vertical-led-array/91152>\
**Category:** Share Your Projects\
**Tags:** dashboard-2\
**Created:** [20 September 2024 18:48 UTC](https://discourse.nodered.org/t/ui-gauge-widget-battery-level-percentage-as-a-vertical-led-array/91152 "2024-09-20T18:48:56Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [20 September 2024 18:48 UTC](https://discourse.nodered.org/t/ui-gauge-widget-battery-level-percentage-as-a-vertical-led-array/91152/1 "2024-09-20T18:48:57Z")

</div>

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.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/d/dd21bd9a5c9c94d2b1662c4ccdec5420a19cde94.png)

This is the unmolested battery level gauge:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/b/abf988f8e858b1f973f6790e7456f9b43bab9197.png)

Limitations

1. 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.
2. The LED appearance and glow are unconvincing. Since the coloured area is a single block I'm not sure how to improve them.
3. 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.
4. It looks much better on a light theme (but that is the only theme available so far?)
5. 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

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/3/73db1165f7c9833210d94c440c2583fc827a6be4.png)

```auto
[{"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:

1. Apply a CSS class `batterygaugeled` and type `Battery Level` to the gauge widget.
2. Get rid of the battery gauge's rounded corners, padding, nipple and thick border, make it narrower.

```auto
.batterygaugeled .nrdb-ui-gauge-battery {
    --battery-margin: 0px;
    --battery-radius: 0px;
    width: 2.5em;
    padding: 0px;
    border: 2px solid black;
}

```

1. Get rid of the icon.

```auto
.batterygaugeled .nrdb-ui-gauge-battery-icon {
    display: none;
}

```

1. Round the fill to the nearest 10%, apply a box-shadow glow, draw a line above it.

```auto
.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;
}

```

1. Move the text to the bottom, simulate the edges of LEDs with a repeated linear gradient.

```auto
.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%);
}

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [20 October 2024 18:49 UTC](https://discourse.nodered.org/t/ui-gauge-widget-battery-level-percentage-as-a-vertical-led-array/91152/2 "2024-10-20T18:49:25Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.