Thermostat widget

Who it’s for

Building managers, smart home owners and energy managers ask “how do I let an operator move the temperature setpoint from a dashboard instead of walking to the thermostat?” The thermostat widget puts the live reading and a drag-to-set ruler in one control, so the current value and the target are read in the same glance.

What it does

A device reporting temperature = 18°C shows that value above a draggable ruler. Dragging the ruler to 19 writes targetTemperature = 19 to the device as a shared attribute, which is where an HVAC controller reads its setpoint from. The displayed temperature keeps following telemetry as new readings arrive.

• Live temperature taken from the widget’s datasource key
• Drag-to-set ruler that saves straight to a device attribute, with no separate form or RPC to wire up
• Ruler bounds you choose, so the control can be held inside the band a building’s energy policy allows
• Sets one entity’s setpoint per widget; tile one widget per zone rather than expecting a zone selector

How to set up

Data keys

Key	Role	Type	Description
temperature	Main value	Timeseries	The reading shown above the ruler; change the key name to match your device’s telemetry key

The widget ships with a simulated function datasource key labeled Random, 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.

The setpoint is not a data key — it is named in the settings below and written by the widget, so nothing has to be added to the datasource for the ruler to work:

Attribute	Scope	Operation	Description
targetTemperature	Shared	Write	The value the ruler saves. Attribute key to save renames it and Attribute scope moves it to client or server scope

Widget settings

Setting	Default	Effect
Attribute key to save	targetTemperature	The attribute the ruler writes to — set it to the key your controller reads
Attribute scope	Shared	Scope the setpoint is written in
Min temperature	-20	Lowest value the ruler can reach
Max temperature	20	Highest value the ruler can reach
Save debounce (ms)	0	How long a drag settles before it is saved; raise it so dragging across the ruler writes once instead of at every step
Pixels per degree	10	Ruler scale — a larger value makes each degree a longer drag
Major tick every (0 = auto)	0	Spacing of the labeled ticks; auto derives it from the range
Background color	#FFFFFF	Card background behind the ruler

How to customize

• To hold the setpoint inside a policy band — narrow Min temperature and Max temperature (the shipped range is -20 to 20), so an occupant cannot ask for a target the plant will not serve.
• To make the ruler less twitchy — raise Pixels per degree; each degree then takes a longer drag.
• To thin out the ruler labels — set Major tick every (0 = auto) to a fixed spacing instead of letting it be derived from the range.
• To match your dashboard’s colors — set Background color, Temperature text color, Indicator color, Major tick color, Minor tick color and Tick label color.
• To change the fonts — set Temperature font and Tick label font, and turn on Auto scale temperature font if the widget is resized across breakpoints.

Tips

• Place this widget next to a temperature chart card so the operator sees the recent trend before moving the setpoint — it cuts the changes that overshoot and get reversed ten minutes later.
• Raise Save debounce (ms) above zero on any deployment where the write goes over a slow link: at the default the ruler saves on every step of the drag.
• For multi-zone buildings, give every zone’s widget the same Min temperature and Max temperature so the setpoints stay comparable at a glance.