Indoor temperature progress bar with background

Who it’s for

Facility managers, building managers, and smart home owners ask “can I see at a glance how far the temperature is from the comfort range?” The background variant adds a full-card color signal to the progress bar for wall-mounted and lobby displays.

What it does

A sensor reporting temperature = 21°C fills a horizontal bar proportionally between 0°C and 40°C on a card whose entire background also fills with the comfort color: blue for Cold (below 18°C), light green for Comfortable (18–24°C), and red for Hot (above 24°C).

• Full-card background color makes temperature comfort level readable across a room without reading the number
• Horizontal progress bar shows the temperature value as a proportion of the full operating range
• Shows one sensor’s reading per widget; add multiple widgets to compare rooms side by side

How to set up

Data keys

Key	Role	Type	Description
temperature	Bar value	Timeseries	Indoor temperature in °C; change the key name to match your device’s telemetry key

The widget ships with a simulated function datasource key labeled Temperature, so it draws random values until you point the datasource at a device and rename the key.

To point it at your own device: open the dashboard in edit mode, open the widget’s Datasources, pick the entity or entity alias, and replace the function key with the key your device reports.

Value ranges

Range (°C)	Level	Color
0–18	Cold	Blue
18–24	Comfortable	Green
24+	Hot	Red

How to customize

• To change the bar range — open the widget settings and adjust the minimum and maximum tick values to match your expected temperature range.
• To change the comfort thresholds — adjust the segment boundaries in the widget settings.
• To change the background and segment colors — edit the colors for each comfort level in the widget settings.

Tips

• The colored background makes this widget useful for a lobby kiosk or corridor display where the card must communicate thermal comfort instantly without anyone stopping to read it.
• Use consistent comfort colors across all temperature widgets: green is comfortable, blue needs heating, red needs cooling.
• Stack progress bar with background cards for temperature and humidity side by side to give a combined comfort overview in a compact two-card footprint per room.