Badge¶

Compact Status Indicator¶

The Badge is a compact 3-state status indicator with per-state color palettes, SVG icon integration, and configurable text. It serves as a visual flag for active/inactive/disabled states across the application — from menu items to dashboard cards.

Key Features¶

3-State Logic¶

Active (True) — typically a bold color indicating an active condition
Enabled (False) — neutral/default appearance
Disabled — grayed-out, non-interactive state

Each state has independent background, text, and border colors.

SVG Icon Support¶

Optional icon with SVG color override — the icon dynamically matches the badge's current state color.

Flexible Layout¶

Configurable padding, border radius, and icon-text spacing for pixel-perfect placement in any context.

Main Properties¶

Property	Type	Description
`Text`	`QString`	Badge label text
`UI_TextVisible`	`bool`	Show/hide text
`Icon_Path`	`QString`	SVG icon file path
`UI_IconVisible`	`bool`	Show/hide icon
`Icon_Size`	`int`	Icon size in pixels
`Icon_OverrideSVGColor`	`bool`	Dynamic SVG recoloring
`UI_Enabled`	`bool`	Enable/disable state
`UI_Active`	`bool`	Active/inactive state
`BackColor_True`	`QVariant`	Background when active
`TextColor_True`	`QVariant`	Text color when active
`BorderColor_True`	`QVariant`	Border color when active
`BackColor_False`	`QVariant`	Background when inactive
`TextColor_False`	`QVariant`	Text color when inactive
`BackColor_Disabled`	`QVariant`	Background when disabled
`BorderRadius`	`int`	Corner radius
`BorderWidth`	`int`	Border thickness
`Padding_Left`	`int`	Left padding
`IconTextSpacing`	`int`	Gap between icon and text

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

Usage Example in WinCC OA¶

XML Configuration (extended properties)¶

<extended>
  <prop name="Text" type="CHAR_STRING">Badge</prop>
  <prop name="UI_TextVisible" type="BOOL">True</prop>
  <prop name="Icon_Path" type="CHAR_STRING">C:/WinCC_OA_Proj/InteriaLib/pictures/oblo/icons-update/24px 1.5stroke/Primary/badge-svgrepo-com.svg</prop>
  <prop name="UI_IconVisible" type="BOOL">True</prop>
  <prop name="Icon_Size" type="INT">16</prop>
  <prop name="Icon_OverrideSVGColor" type="BOOL">True</prop>
  <prop name="BackColor_True" type="COLOR">{71,88,110}</prop>
  <prop name="TextColor_True" type="COLOR">{247,247,248}</prop>
  <prop name="BackColor_False" type="COLOR">{238,240,242}</prop>
  <prop name="TextColor_False" type="COLOR">{29,36,45}</prop>
  <prop name="BorderRadius" type="INT">12</prop>
  <prop name="Padding_Left" type="INT">8</prop>
  <prop name="UI_Enabled" type="BOOL">True</prop>
  <prop name="UI_Active" type="BOOL">True</prop>
</extended>

CTRL Initialization Script¶

main()
{
  // Bind badge state to a datapoint
  dpConnect("updateBadge", "Plant1.Pump1.Running");
}

void updateBadge(string dp, bool running)
{
  EWO.UI_Active = running;
  EWO.Text = running ? "RUNNING" : "STOPPED";
}

Available Signals¶

This widget does not emit custom signals — it is a pure display component. State changes are driven externally via property setters or dpConnect bindings.