Button

State-Machine Driven Custom Button

The Button is a state-machine-driven widget with 4 styles x 4 states = 16 visual combinations, each independently configurable. It features hold-to-confirm for safety-critical actions, smooth animated transitions, and dual icon support with 8 placement options each.

Key Features

4 Visual Styles

Solid, Outlined, Ghost, and Text-only — each with full color customization per state.

4 Interactive States

Enabled, Hovered, Active (pressed), and Disabled — with independent colors, fonts, and icon settings for each state.

Hold-to-Confirm

A progressive fill animation requiring sustained press before triggering the action. Critical for safety-sensitive operations like valve control or pump start/stop — prevents accidental activation.

Dual Icon Support

Two independent icons with 8 placement options each (Left, Right, Top, Bottom, and corners). Icons support SVG color override for theme consistency.

Smooth Transitions

Parallel animation groups handle color, opacity, and scale transitions between states with configurable easing and duration.

Main Properties

Property	Type	Description
Text	QString	Button label text
Style	enum	Solid / Outlined / Ghost / Text
UI_TextVisible	bool	Show/hide text label
Icon1_Path	QString	Primary icon SVG path
Icon1_Position	enum	Icon placement (Left, Right, Top, etc.)
Icon1_Size	int	Icon size in pixels
Icon1_OverrideSVGColor	bool	Dynamic SVG recoloring
Icon2_Path	QString	Secondary icon SVG path
BorderRadius	int	Corner radius
Animation_Enabled	bool	Enable state transitions
Animation_Duration	int	Transition duration (ms)
HoldForConfirm_Enabled	bool	Require sustained press
HoldForConfirm_Duration	int	Hold duration before confirm (ms)
Color_Enabled_Background	QVariant	Background in enabled state
Color_Hovered_Background	QVariant	Background on hover
Color_Active_Background	QVariant	Background when pressed
Color_Disabled_Background	QVariant	Background when disabled
Shadow_Enabled	bool	Drop shadow effect
UI_Enabled	bool	Enable/disable the button

Note: This widget exposes 51 configurable properties. The table above covers only a selection — dozens more are available for fine-tuned control over per-state colors, fonts, padding, icons, and shadow.

Usage Example in WinCC OA

XML Configuration (extended properties)

<extended>
  <prop name="Text" type="CHAR_STRING">Button</prop>
  <prop name="UI_TextVisible" type="BOOL">True</prop>
  <prop name="Icon1_Path" type="CHAR_STRING">C:/WinCC_OA_Proj/InteriaLib/pictures/oblo/icons-update/24px 1.5stroke/Secondary/edit.svg</prop>
  <prop name="UI_Icon1Visible" type="BOOL">True</prop>
  <prop name="Icon1_Size" type="INT">22</prop>
  <prop name="Icon1_OverrideSVGColor" type="BOOL">True</prop>
  <prop name="Style" type="ENUM">0</prop>
  <prop name="BorderRadius" type="INT">12</prop>
  <prop name="Padding_Left" type="INT">16</prop>
  <prop name="Padding_Top" type="INT">10</prop>
  <prop name="Color_Enabled_Background" type="COLOR">{230,238,248}</prop>
  <prop name="Color_Hovered_Background" type="COLOR">{7,77,163}</prop>
  <prop name="Animation_Enabled" type="BOOL">True</prop>
  <prop name="HoldForConfirm_Enabled" type="BOOL">False</prop>
  <prop name="Shadow_Enabled" type="BOOL">False</prop>
  <script name="clicked">clicked()</script>
  <script name="holdConfirmed">holdConfirmed()</script>
</extended>

CTRL Initialization Script

main()
{
  // Configure a safety button with hold-to-confirm
  EWO.Text = "STOP PUMP";
  EWO.HoldForConfirm_Enabled = true;
  EWO.HoldForConfirm_Duration = 2000; // 2 seconds hold required
  EWO.Color_Enabled_Background = "{220,53,69}";  // Red
  EWO.Icon1_Path = "icons/stop.svg";
  EWO.Icon1_OverrideSVGColor = true;
}

// Hold confirmed handler
void holdConfirmed()
{
  dpSet("Plant1.Pump1.Command", 0); // Stop pump
}

Available Signals

Signal	Parameters	Description
clicked	—	Button clicked (instant)
pressed	—	Mouse button down
released	—	Mouse button up
hoverEntered	—	Mouse enters button area
hoverExited	—	Mouse leaves button area
holdConfirmed	—	Hold duration completed (safety confirm)