Thermometer scale
Preconfigured widget to display temperature. Allows to configure temperature range, gradient colors, and other settings.
Who it’s for
Anyone showing a temperature as a column rather than a dial — the shape of a real thermometer, on a plant mimic, an environmental dashboard or a cold-chain screen where the instrument should look like the instrument.
What it does
The Thermometer scale draws a temperature as a linear gauge with a printed scale and a digital value box. The default −60 to 100 range in degrees Celsius carries eight major divisions with minor ticks between them, an orange indicator, and a Temperature caption, presented as a horizontal instrument rather than as a plain bar.
- A linear scale with printed numbers, which reads as a measuring instrument rather than as a progress bar.
- Highlight bands can mark regions of the scale, so a normal and an out-of-range zone are painted on rather than inferred.
- The digital value box gives the exact temperature, so the scale does not have to be read precisely.
- The bar, its background, the plate and every font are styled independently, including gradients on the progress bar.
- Animation moves the indicator rather than jumping it.
- 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 Thermometer scale shows one current reading: temperature over time belongs on a Range chart.
How to set up
Data keys
The Thermometer scale takes one datasource, one entity and one data key.
| Key | Role | Type | Description |
|---|---|---|---|
Temp | The value the indicator points to | Timeseries | Numeric only. An attribute works equally well. The key’s own units and decimals override the widget-level ones. |
Scale
| Setting | Default | Effect |
|---|---|---|
| Ticks min / max | -60 / 100 | The ends of the scale |
| Major ticks count | 8 | Labelled divisions |
| Minor ticks count | 8 | Unlabelled subdivisions |
| Highlights | None | Colored bands painted on the scale |
| Units title | Temperature | The caption printed on the instrument |
Narrow the range to what the sensor actually reads. On the default −60 to 100 scale a controlled process occupies a few millimetres of the bar, and an excursion large enough to matter is invisible.
How to customize
- To match the scale to the sensor — set Ticks min and Ticks max, and pick a major tick count that lands the labels on round numbers.
- To mark an operating window — add Highlights bands at the temperatures that separate acceptable from not.
- To change the unit — set the widget’s units, which converts the incoming value rather than relabelling it.
- To retitle the instrument — set Units title, which ships as
Temperature. - To drop the digital readout — turn off Value box for a purely analogue scale.
- To restyle the bar — set the Progress bar color gradient, the Bar background color gradient and the bar stroke.
- To change how the indicator moves — set the Animation duration and easing rule.
Tips
- Narrow the range before anything else. The shipped −60 to 100 scale spans most of what a thermometer could ever read, which makes it useless for the controlled processes people usually point it at.
- Choose this over a radial gauge when several temperatures sit on one screen. Linear scales share an axis direction and are compared by position, whereas a row of dials has to be read one needle at a time.
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.