Digital thermometer
Preconfigured gauge to display temperature. Allows to configure temperature range, gradient colors, and other settings.
Who it’s for
Anyone reading a temperature that spans cold to hot — outdoor sensors, cold-chain monitoring, process temperatures that cross zero. The default range runs from −60 to 60 with a cold-to-hot color ramp, so the reading carries its own interpretation.
What it does
The Digital thermometer draws a temperature as a glowing ring on a dark face, colored from blue through purple and pink to red as the value rises. Over the default −60 to 60 range, a reading of −20 sits in the blue part of the ramp and one of 45 in the red, so the color says cold or hot before the number is read.
- A cold-to-hot color ramp ships configured, which is the one convention every reader already knows.
- The range crosses zero by default, which suits outdoor and cold-chain readings that a 0–100 gauge cannot show.
- A full-width glowing ring makes it readable at distance on a dark board.
- Animated movement is on by default, so a drifting temperature is visible as movement.
- Minimum and maximum are printed at the ring’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 thermometer shows one current reading: temperature history belongs on a Range chart, which colors a trace by the same kind of bands.
How to set up
Data keys
The Digital thermometer takes one datasource, one entity and one data key.
| Key | Role | Type | Description |
|---|---|---|---|
| Any temperature key | The value the ring 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 | -60 | The cold end of the ring |
| Max value | 60 | The hot end of the ring |
| Bar color levels | Blue, purple, pink, red | The cold-to-hot ramp the fill moves through |
Narrow the range to what the sensor actually sees. A cold room living between 2 and 8 degrees occupies a sliver of the default −60 to 60 scale, and the ring barely moves however far the temperature drifts.
How to customize
- To match the scale to the sensor — set Min value and Max value to the band the reading actually occupies.
- To put the color boundaries at the limits that matter — edit the Bar color levels, so the ramp changes at the temperature that triggers action.
- To tune the glow — set Neon glow effect brightness, or
0to remove the effect. - To thin the ring — reduce Relative bar width, which leaves more room for the value.
- To change how the value moves — set the Animation duration and easing rule.
- To mark a threshold — turn on Ticks and add that temperature.
- To add a caption — turn on Units title and set its text.
- To change the gauge’s shape — set Type to Arc, Donut, Horizontal bar or Vertical bar.
Tips
- Narrow the range before deploying this anywhere the temperature is controlled. On a wide scale a controlled process looks perfectly steady right up until it fails, because a two-degree excursion is invisible across a hundred-and-twenty-degree ring.
- Keep the color ramp cold-to-hot even after narrowing the range. Readers bring that expectation with them, and a thermometer where high values are blue is misread far more often than it is questioned.
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.