LCD gauge
Preconfigured gauge to display any value reading as an arc. Allows to configure value range, gradient colors, and other settings.
Who it’s for
Anyone building a dashboard that should read like instrumentation rather than like a web page — a control room screen, a vehicle or machine panel, a wall display where the aesthetic is a dark cabinet with a lit readout. The measurement is ordinary; the presentation is deliberate.
What it does
The LCD gauge draws a reading as a segmented arc on a dark face, in the manner of a backlit instrument panel. The default 0–180 scale captioned MPH fills in narrow stripes rather than as a solid band, with the value and unit printed in the center, so the gauge reads as a physical display rather than as a chart element.
- Segmented fill — the stripes are what make this read as an LCD instrument rather than as a plain arc.
- A dark face suits control-room and vehicle dashboards where a light gauge would glare.
- A units caption sits with the value, which is expected on an instrument and optional elsewhere.
- The bar color can follow the value through a set of levels, so the readout changes character near a limit.
- Minimum and maximum are printed at the arc’s ends, keeping the scale explicit.
- Units are converted, not just appended — the gauge respects the unit set on the key and converts to the unit chosen on the widget.
- The LCD gauge shows one current reading: it is a styling preset of the same gauge engine as the plain Gauge, not a different instrument.
How to set up
Data keys
The LCD gauge takes one datasource, one entity and one data key.
| Key | Role | Type | Description |
|---|---|---|---|
| Any numeric key | The value the arc fills to | Timeseries | Numeric only. An attribute works equally well. The key’s own units and decimals override the widget-level ones. |
Range
| Setting | Default | Effect |
|---|---|---|
| Min value | 0 | The arc’s empty end |
| Max value | 180 | The arc’s full end; the default suits a speed readout and should be set to your own range |
| Units title | MPH | The caption beside the value; change it to the unit you are actually showing |
| Thickness of the stripes | 1.5 | Segment width; 0 turns the stripes off and makes the fill solid |
How to customize
- To caption the readout correctly — set Units title, which ships as
MPHfrom the speed-readout default. - To match the scale to your equipment — set Min value and Max value; the default 0–180 is a speedometer range.
- To change how segmented the fill looks — adjust Thickness of the stripes, or set it to
0for a solid bar. - To make the readout change color near a limit — set the Bar color levels.
- To fit a light dashboard — set Gauge bar background and the value and label colors to suit a pale background.
- To change the gauge’s shape — set Type to Arc, Donut, Horizontal bar or Vertical bar.
- To show how fresh the reading is — turn on Timestamp and pick a format.
- To make the fill move smoothly — turn on Animation and set its duration and easing rule.
Tips
- Change the units caption before anything else. The preset ships as a speedometer, and an LCD gauge confidently captioned
MPHabove a pressure reading is the kind of error that survives review because the gauge looks correct. - Keep the stripe thickness consistent across every LCD gauge on a panel. The segmentation is the visual signature of this preset, and gauges with different stripe widths read as different instruments rather than as one panel.
Share Your Widget with the Community
Built a custom widget? Export it as a JSON from ThingsBoard and publish it to the IoT Hub through a simple 4-step wizard (Upload, Listing, Readme, Review & Submit). Share it with thousands of ThingsBoard developers worldwide and get featured in the catalog.