Digital speedometer
Preconfigured gauge to display speed. Allows to configure speed range, gradient colors, and other settings.
Who it’s for
Anyone showing a rate that has a rated maximum and a danger zone — vehicle speed, motor RPM, flow, line rate. The reader is checking position against a limit, and the traffic-light color ramp built into this preset says where that position falls without any configuration.
What it does
The Digital speedometer draws a rate as a glowing segmented arc on a dark face, colored green through amber to red as the value climbs. The default 0–180 scale captioned MPH moves the fill through those three colors, so a reading in the red is recognized before it is read.
- The color ramp ships configured — green, amber, red across the range, which is the convention this instrument shape already implies.
- A dark face and a glowing segmented fill make it readable on a control-room or vehicle dashboard.
- A units caption sits with the value, as expected on an instrument.
- Animated movement is on by default, so a rising rate is visible as movement rather than as a jumping number.
- 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 Digital speedometer shows one current rate: it is a styling preset of the same gauge engine, and the color ramp is editable like any other.
How to set up
Data keys
The Digital speedometer takes one datasource, one entity and one data key.
| Key | Role | Type | Description |
|---|---|---|---|
| Any numeric key | The rate 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 is a road-speed range and should be set to your own |
| Units title | MPH | The caption beside the value |
| Bar color levels | Green, amber, red | The color ramp the fill moves through as the value rises |
Set the maximum to the equipment’s rating, since the color ramp is spread across the range — a maximum chosen arbitrarily puts the red zone somewhere arbitrary too.
How to customize
- To caption the readout correctly — set Units title, which ships as
MPH. - To put the color boundaries where the limits actually are — edit the Bar color levels rather than accepting an even three-way split of the range.
- To match the scale to your equipment — set Min value and Max value.
- To tune the glow — set Neon glow effect brightness, or
0to remove the effect. - To change how segmented the fill looks — adjust Thickness of the stripes, or
0for a solid band. - To change how the value moves — set the Animation duration and easing rule, or turn animation off.
- To mark the rated limit — turn on Ticks and add that value.
- To change the gauge’s shape — set Type to Arc, Donut, Horizontal bar or Vertical bar.
Tips
- Set the color boundaries from the equipment’s limits, not from thirds of the range. The preset spreads green, amber and red evenly because it has no way to know your limits, and an amber band that starts at an arbitrary number teaches operators to ignore amber.
- Change the units caption at the same time as the range. The two defaults are a matched pair from the speedometer preset, and correcting one while leaving the other produces a gauge that is wrong in a way nobody notices.
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.