Label widget

Who it’s for

Dashboard builders who want readings to sit on a picture rather than in a grid — a floor plan with a temperature printed in each room, a P&ID with pressures beside the vessels they belong to, a rack elevation with a load figure on every shelf. The question is spatial: not “what is the value” but “what is the value there”.

What it does

The Label widget draws a background image and prints live values on top of it at positions you choose. Placing a label with the pattern Value: ${#0:2} units. at 20% across and 47% down prints the first data key, to two decimals, at that point on the image — and it stays at that point when the widget is resized, because positions are percentages rather than pixels.

• Values are placed, not laid out — each label carries its own X and Y as a percentage of the widget, so the text tracks the picture under it at any size.
• One label can mix text and several readings — the pattern is free text with ${#N:decimals} placeholders, so ${#0:1} °C / ${#1:0} % prints two keys in one line.
• Every label has its own font — family, size, weight, style and color are set per label, so a headline reading and a footnote can share the same image.
• The background accepts any image the platform holds, so a floor plan, a schematic or a photograph all work the same way.
• Placeholders reference keys by index, so reordering the data keys moves the values between labels — the pattern follows position in the key list, not key name.
• The Label widget only prints text: it draws no shapes, no markers and no scaling indicators, so a picture that needs a moving element belongs on a SCADA symbol or a map instead.

How to set up

Data keys

The Label widget takes any number of data keys, and each label refers to them by index.

Key	Role	Type	Description
${#0}	The first data key in the list	Timeseries	Referenced by index, not by name. ${#0:2} prints it with two decimals; ${#1}, ${#2} and so on address the rest of the list in order.

Add one data key per value you intend to print, then write the labels that reference them. A placeholder pointing past the end of the key list prints nothing, and reordering the key list changes which value each placeholder resolves to.

Labels

Setting	Default	Effect
Background image	A sample map image	The picture the labels are drawn on; positions are relative to it
Pattern	Value: ${#0:2} units.	Free text with ${#N:decimals} placeholders resolved against the data keys
X	20	Horizontal position as a percentage of widget width
Y	47	Vertical position as a percentage of widget height
Font	Roboto 500, 6 px, #515151	Family, size, style, weight and color for that label alone

How to customize

• To change the picture underneath — set Background image to an image from the platform’s image library.
• To move a value — edit that label’s X and Y percentages; because they are percentages, the value keeps its place on the picture at every widget size.
• To print several readings in one place — put more than one ${#N} placeholder in a single Pattern, with whatever text and punctuation belongs between them.
• To change the precision of a printed value — write the decimals into the placeholder itself, as in ${#0:1}.
• To make one reading stand out — give that label its own Font size, weight and color; each label is styled independently.
• To add another reading to the picture — use Add label, then point its pattern at the data key index you want.

Tips

• Size the label fonts against the image rather than the screen. The background scales with the widget, so a 6 px label that looks tiny while editing is often correct once the widget occupies its real place on the dashboard.
• Add all the data keys in their final order before writing any patterns. Placeholders bind to position in the key list, so inserting a key at the top later shifts every value on the picture by one.