# Dashboard One Level Widget Replacement

**URL:** <https://discourse.nodered.org/t/dashboard-one-level-widget-replacement/100299>\
**Category:** Dashboard\
**Created:** [3 February 2026 19:02 UTC](https://discourse.nodered.org/t/dashboard-one-level-widget-replacement/100299 "2026-02-03T19:02:42Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![n61ab](https://avatars.discourse-cdn.com/v4/letter/n/cc9497/32.png) [@n61ab](https://discourse.nodered.org/u/n61ab)\
**Post date:** [3 February 2026 19:02 UTC](https://discourse.nodered.org/t/dashboard-one-level-widget-replacement/100299/1 "2026-02-03T19:02:42Z")

</div>

I have been considering a move to Dashboard Two, but see there is no DashBoard Two equivalent of the Dashboard One Level Widget. Like this:

 ![Screenshot 2026-02-03 at 1.37.40 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/a/ca640297f27e13a96cd39d723eadb563a64c6db2.png)

What are my alternatives to do this in Dashboard Two?

Alan

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [3 February 2026 19:26 UTC](https://discourse.nodered.org/t/dashboard-one-level-widget-replacement/100299/2 "2026-02-03T19:26:23Z")

</div>

I do have a web component version:

> **[Testing Totally Information's web-components - led-gauge](https://wc.totallyinformation.net/tests/live/led-gauge)**
>
> led-gauge - Testing TotallyInformation's web-components

Might work with D2.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/4/e49854022007d469dd2bbbd4aa0b9ff2c5536f9a.png)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [3 February 2026 20:16 UTC](https://discourse.nodered.org/t/dashboard-one-level-widget-replacement/100299/3 "2026-02-03T20:16:11Z")

</div>

Closest should be the Linear gauge

> **[@hotnipi/node-red-dashboard-2-ui-gauge-linear](https://flows.nodered.org/node/@hotnipi/node-red-dashboard-2-ui-gauge-linear)**
>
> A linear style gauge node for @flowfuse/node-red-dashboard

---

<div class="post-metadata">

**Author:** ![n61ab](https://avatars.discourse-cdn.com/v4/letter/n/cc9497/32.png) [@n61ab](https://discourse.nodered.org/u/n61ab)\
**Post date:** [3 February 2026 20:51 UTC](https://discourse.nodered.org/t/dashboard-one-level-widget-replacement/100299/4 "2026-02-03T20:51:44Z")

</div>

hotNIpi Thanks. perfect. Alan

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [3 February 2026 21:32 UTC](https://discourse.nodered.org/t/dashboard-one-level-widget-replacement/100299/5 "2026-02-03T21:32:38Z")

</div>

Just to add, this kind of thing is perfectly possible in a template node:

![chrome_f3qrNmJ8HU](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/2/924448458766c1408a6664bfb444620f26189bdd.gif)

Demo flow (Use `CTRL+I` to import)

```auto
[{"id":"d10f4be8b83cb824","type":"ui-template","z":"7ecf422396bf31b4","group":"d92eb51f258edce2","page":"","ui":"","name":"","order":1,"width":0,"height":0,"head":"","format":"<template>\n <div class=\"meter-container\">\n <div class=\"meter-header\">\n <span class=\"meter-label\">{{ msg.label || '' }}</span>\n <span class=\"meter-value\">\n <span class=\"value-num\">{{ msg.payload }}</span>\n <span class=\"value-unit\">{{ msg.topic }}</span>\n </span>\n </div>\n \n <div class=\"meter-scale-labels\">\n <span>{{ min }}</span>\n <span>{{ max }}</span>\n </div>\n\n <div class=\"meter-bar\">\n <div \n v-for=\"i in segments\" \n :key=\"i\" \n class=\"segment\"\n :class=\"getSegmentClass(i - 1)\"\n ></div>\n </div>\n </div>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n segments: 60, // Increased density for a smoother look\n }\n },\n computed: {\n min() { return this.msg.min ?? 0 },\n max() { return this.msg.max ?? 100 },\n low() { return this.msg.low ?? 10 },\n high() { return this.msg.high ?? 90 }\n },\n methods: {\n getSegmentClass(index) {\n // Calculate value based on a 0-indexed segment\n const segmentValue = this.min + (index / (this.segments - 1)) * (this.max - this.min)\n \n // Is this bar filled?\n const isActive = segmentValue <= this.msg.payload\n \n // Determine the color zone for this specific segment\n const isLowZone = segmentValue <= this.low\n const isHighZone = segmentValue >= this.high\n \n return {\n 'active': isActive,\n 'is-low': isLowZone,\n 'is-high': isHighZone,\n 'is-neutral': !isLowZone && !isHighZone\n }\n }\n }\n}\n</script>\n\n<style scoped>\n.meter-container {\n background: #000;\n color: #fff;\n padding: 20px;\n border-radius: 4px;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n}\n\n.meter-header {\n display: flex;\n justify-content: center;\n align-items: baseline;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.meter-label { font-size: 1.4rem; font-weight: 300; }\n.meter-value { font-size: 2.8rem; font-weight: 700; }\n.value-unit { font-size: 1.6rem; font-weight: 400; margin-left: 4px; }\n\n.meter-scale-labels {\n display: flex;\n justify-content: space-between;\n font-size: 1.1rem;\n color: #ccc;\n margin-bottom: 4px;\n}\n\n.meter-bar {\n display: flex;\n flex-direction: row;\n gap: 2px;\n height: 35px; /* Increased height to match image */\n width: 100%;\n}\n\n.segment {\n flex: 1;\n background: #222; /* Dimmer background for inactive segments */\n transition: background 0.1s ease;\n}\n\n/* Logic for Active Segments */\n.segment.active.is-low { background: #ff4444; } /* Red */\n.segment.active.is-neutral { background: #44ff44; } /* Green */\n.segment.active.is-high { background: #ff4444; } /* Red */\n\n/* Small Glow effect (Optional - remove if you want flat look) */\n.segment.active {\n box-shadow: 0 0 2px rgba(255,255,255,0.1);\n}\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":2340,"y":700,"wires":[[]]},{"id":"79e5124bf9bed370","type":"inject","z":"7ecf422396bf31b4","name":"","props":[{"p":"label","v":"Bus 1:","vt":"str"},{"p":"payload"},{"p":"topic","vt":"str"},{"p":"min","v":"12","vt":"num"},{"p":"max","v":"15","vt":"num"},{"p":"low","v":"12.5","vt":"num"},{"p":"high","v":"14.75","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"volts","payload":"(\t $minimum := 12.1;\t $maximum := 14.95;\t $round(($random() * ($maximum-$minimum)) + $minimum, 2)\t)","payloadType":"jsonata","x":2187,"y":700,"wires":[["d10f4be8b83cb824"]]},{"id":"d92eb51f258edce2","type":"ui-group","name":"Group 1","page":"58c1725ba4ca6bda","width":6,"height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"58c1725ba4ca6bda","type":"ui-page","name":"Page 1","ui":"03482f22997a66ac","path":"/page1cdl","icon":"home","layout":"grid","theme":"0ac22d5584a0964a","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":2,"className":"","visible":"true","disabled":"false"},{"id":"03482f22997a66ac","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control","ui-chat"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true,"allowInstall":false},{"id":"0ac22d5584a0964a","type":"ui-theme","name":"Theme Name","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"compact","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"22px"}},{"id":"6c3e3bac07c65e20","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.30.2"}}]

```

---

<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:** [17 February 2026 21:33 UTC](https://discourse.nodered.org/t/dashboard-one-level-widget-replacement/100299/6 "2026-02-17T21:33:03Z")

</div>

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