Skip to content

InteriaLib — WinCC OA Framework

DropMenu

DropMenu¶

The DropMenu is a versatile tab-based navigation component that combines popup menus and slide-out data drawers in a single widget. Each tab can be independently configured as either a clickable menu or a slide-up data panel with real-time values, debug indicators, and per-tab badge animations.

Key Features¶

Dual Tab Modes¶

Menu type — popup with clickable items, icons, and badges
Drawer type — slide-up data panel with boolean indicators (red/green dots) and numeric values with units

Per-Tab Blinking¶

Independent blink animation per tab for attention states with configurable color cycling — tied to the same Condition Manager that drives Menu badges.

Dynamic Badges¶

Badge counters updated at runtime without requiring a full widget refresh.

Debug Drawer¶

A specialized drawer mode showing boolean indicators (red/green dots) and numeric values (with units) — ideal for commissioning and diagnostics.

Main Properties¶

Property	Type	Description
`Tabs_Json`	`QString`	JSON tab definitions (id, type, icon, label, items)
`TabBar_Height`	`int`	Height of the tab bar
`TabBar_BackgroundColor`	`QVariant`	Tab bar background color
`TabBar_TextColor`	`QVariant`	Default text color
`TabBar_ActiveColor`	`QVariant`	Active tab background color
`TabBar_ActiveTextColor`	`QVariant`	Active tab text color
`TabBar_HoverColor`	`QVariant`	Hovered tab background color
`TabBar_IconSize`	`int`	Tab icon size in pixels
`TabBar_Font`	`QFont`	Tab label font
`TabBar_BorderRadius`	`int`	Tab corner radius
`Drawer_BackgroundColor`	`QVariant`	Drawer panel background
`Drawer_MaxHeight`	`int`	Maximum drawer slide-up height
`Drawer_AnimationDuration`	`int`	Slide animation duration (ms)
`Popup_BackgroundColor`	`QVariant`	Popup menu background
`Popup_HoverColor`	`QVariant`	Popup item hover color
`Popup_ItemHeight`	`int`	Menu item height
`Shadow_Enabled`	`bool`	Drop shadow on popup/drawer

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

Usage Example in WinCC OA¶

XML Configuration (extended properties)¶

<extended>
  <prop name="TabBar_Height" type="INT">44</prop>
  <prop name="TabBar_BackgroundColor" type="COLOR">{45,50,62}</prop>
  <prop name="TabBar_TextColor" type="COLOR">{200,200,200}</prop>
  <prop name="TabBar_ActiveColor" type="COLOR">{70,130,180}</prop>
  <prop name="TabBar_BorderRadius" type="INT">8</prop>
  <prop name="Drawer_MaxHeight" type="INT">300</prop>
  <prop name="Drawer_AnimationDuration" type="INT">250</prop>
  <prop name="Shadow_Enabled" type="BOOL">True</prop>
  <script name="tabClicked">tabClicked(string tabId)</script>
  <script name="menuItemClicked">menuItemClicked(string tabId, string itemId, string text, int index)</script>
  <script name="drawerOpened">drawerOpened(string tabId)</script>
  <script name="drawerClosed">drawerClosed(string tabId)</script>
</extended>

CTRL Initialization Script¶

main()
{
  string json;
  json = "[{\"id\":\"nav\",\"type\":\"menu\",\"icon\":\"menu.svg\",\"label\":\"Navigate\","
         "\"items\":[{\"id\":\"home\",\"text\":\"Home\"},{\"id\":\"settings\",\"text\":\"Settings\"}]},"
         "{\"id\":\"debug\",\"type\":\"drawer\",\"icon\":\"bug.svg\",\"label\":\"Debug\","
         "\"sections\":[{\"title\":\"PLC Status\",\"items\":["
         "{\"id\":\"plc1\",\"label\":\"PLC 1\",\"type\":\"bool\"},"
         "{\"id\":\"temp\",\"label\":\"Temperature\",\"type\":\"number\",\"unit\":\"C\"}]}]}]";
  EWO.Tabs_Json = json;
}

Available Signals¶

Signal	Parameters	Description
`tabClicked`	`tabId`	Tab selected
`menuItemClicked`	`tabId`, `itemId`, `text`, `index`	Menu item clicked
`drawerOpened`	`tabId`	Drawer slide-up completed
`drawerClosed`	`tabId`	Drawer slide-down completed