PopupHelp¶

Tutorial Bubble with Arrow Positioning¶

The PopupHelp is a tutorial/help bubble widget with 9 arrow positions, style presets for different message types, smooth opacity animation, and optional auto-close. It powers the interactive tutorial system that guides operators step-by-step through the application.

Key Features¶

9 Arrow Positions¶

Top, Bottom, Left, Right, TopLeft, TopRight, BottomLeft, BottomRight, and None — the arrow automatically points toward the target element.

Style Presets¶

One call sets all colors atomically:

Info (blue) — general guidance
Success (green) — confirmation messages
Warning (orange) — caution notices
Error (red) — critical alerts

Opacity Animation¶

Smooth fade-in/fade-out with configurable easing curve and duration.

Auto-Close¶

Optional timer-based auto-dismissal after a configurable delay.

Main Properties¶

Property	Type	Description
`Text_Title`	`QString`	Bubble title text
`Text_Content`	`QString`	Bubble body text
`Font_Title`	`QFont`	Title font
`Font_Content`	`QFont`	Content font
`Arrow_Position`	`enum`	Arrow direction (Top, Bottom, Left, Right, corners, None)
`Arrow_Size`	`int`	Arrow triangle size
`Arrow_Offset`	`int`	Arrow offset from center
`Style_Preset`	`enum`	Info / Success / Warning / Error
`Color_Background`	`QVariant`	Bubble background color
`Color_Title`	`QVariant`	Title text color
`Color_Content`	`QVariant`	Content text color
`Color_Border`	`QVariant`	Border color
`Icon_Path`	`QString`	Optional icon SVG path
`Icon_Size`	`int`	Icon size
`UI_CloseButtonVisible`	`bool`	Show close (X) button
`UI_AutoClose`	`bool`	Enable auto-dismiss
`AutoClose_Delay`	`int`	Auto-close delay (ms)
`Animation_Enabled`	`bool`	Enable fade animation
`Animation_Duration`	`int`	Fade duration (ms)
`Border_Radius`	`int`	Corner radius
`Max_Width`	`int`	Maximum bubble width

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

Usage Example in WinCC OA¶

XML Configuration (extended properties)¶

<extended>
  <prop name="Arrow_Position" type="ENUM">2</prop>
  <prop name="Border_Radius" type="INT">8</prop>
  <prop name="Animation_Enabled" type="BOOL">True</prop>
  <prop name="Animation_Duration" type="INT">200</prop>
  <prop name="UI_CloseButtonVisible" type="BOOL">True</prop>
  <script name="closed">closed()</script>
  <script name="closeClicked">closeClicked()</script>
</extended>

CTRL Initialization Script¶

main()
{
  // Show a tutorial bubble pointing down at a target widget
  EWO.Text_Title = "Step 1: Select a plant";
  EWO.Text_Content = "Click on any plant in the menu to view its real-time data.";
  EWO.setStylePreset(0); // Info (blue)
  EWO.Arrow_Position = 1; // Bottom — arrow points down
  EWO.showPopup();
}

// Auto-advance tutorial on close
void closed()
{
  dpSet("Tutorial.CurrentStep", dpGet("Tutorial.CurrentStep") + 1);
}

Available Signals¶

Signal	Parameters	Description
`closed`	—	Bubble dismissed (any method)
`closeClicked`	—	Close button clicked
`popupClicked`	—	Bubble body clicked
`shown`	—	Bubble became visible
`hidden`	—	Bubble became hidden