Circular progress

About 4 min read

TwCircularProgress · Category: Other

Settings

These settings are in the properties panel on the right while the widget is selected, mostly in the Circular Progress Settings section. The default value is the value the widget has when it is first added to a page.

Value

Setting	Type	Default	Description
Process Value processValue	Value (typed)	25	Main value of the widget, usually bound to a Tag or an expression in Bindings.
Min Value minValue	Number	0	Value at which the ring is empty. The process value is clamped between min and max.
Decimals decimals	Number	0	Number of decimal places of the shown value, 0–6; the number is formatted for the current language.
Data Coverage Indicator coverageIndicator	Selection	gap	Only applies to __cons consumption snapshot bindings. Only data gaps: shows a warning icon when the period has a data gap. Gaps and partial periods: also shows a clock icon for periods that are not finished yet (today, this month). Off: no icon. Options: gap Only data gaps, all Gaps and partial periods, none Off
Max Value maxValue	Number	100	Value at which the ring is full; if it is not greater than min, min + 1 is used.
Value Suffix valueSuffix	Text	%	Text added after the value, such as % or °C.

Label

Setting	Type	Default	Description
Label label	Text	Loading	Caption shown below the ring.
Show Value showValue	Checkbox	On	Shows the value in the middle of the ring.
Show Label showLabel	Checkbox	On	Shows the caption below the ring.

Ring Geometry

Setting	Type	Default	Description
Thickness thickness	Number	8	Thickness of the ring, 1–30 in a 100-unit drawing (default 8).
Line Cap lineCap	Selection	round	Shape of the ends of the progress arc: round, butt (flat) or square. Options: butt, round, square
Start Angle startAngle	Number	-90	Angle where the progress starts, in degrees; -90 is the top and the ring fills clockwise.

Knob

Setting	Type	Default	Description
Show Knob showKnob	Checkbox	Off	Draws a dot at the end of the progress arc.
Knob Size knobSize	Number	4	Radius of the dot, 1–16 in the 100-unit drawing (default 4).
Knob Color knobColor	Color	#2563eb	Color of the dot at the end of the arc.

Colors

Setting	Type	Default	Description
Track Color trackColor	Color	#e5e7eb	Color of the empty ring behind the progress.
Value Color valueColor	Color	#111827	Color of the value text in the middle.
Progress Color progressColor	Color	#2563eb	Color of the progress arc that shows the filled part.
Label Color labelColor	Color	#374151	Color of the caption below the ring.

Other settings

Setting	Type	Default	Description
Enable Flashing enableFlashing	Checkbox	Off	Makes the widget blink (an opacity pulse every second). Usually bound to an alarm condition.
Log Button logButton	Checkbox	Off	At runtime shows a chart icon when hovering the widget; clicking it adds the Tags bound to the widget to the log Tag list.

Bindings

In the Bindings (Rules) section of the properties panel, a Tag can be bound to the following properties of this widget with a Direct binding. The binding types (Direct, IntRange, FloatRange, Boolean, Bit) are the same for all widgets; they are described on the Widget Reference page.

title, visible, authorization, x, y, width, height, rotation, class, foregroundColor, backgroundColor, borderColor, borderStyle, borderWidth, borderRadius, borderTopLeftRadius, borderTopRightRadius, enableFlashing, logButton, coverageIndicator, to.type, processValue, minValue, maxValue, decimals, valueSuffix, label, showValue, showLabel, thickness, startAngle, lineCap, trackColor, progressColor, valueColor, labelColor, showKnob, knobColor, knobSize

Common sections

While this widget is selected, the properties panel also shows these common sections: General, Layout, Appearance, Navigation (To), Bindings (Rules). These sections are described on the Page Editor page.