Creating Triangle Buttons in WinCC Flexible 2007 on MP277

Problem: Non-Rectangular Buttons on a WinCC Flexible 2007 Runtime

WinCC Flexible 2007 and its successor WinCC Comfort ship a single button primitive: a rectangular touch area. The Polygon tool in the Vector graphics palette lets you draw any closed shape — triangle, pentagon, star, arrow — but those vector objects do not raise Click, Press, or Release events, because they are decorative graphics, not controls. When an operator on an MP 277 needs a triangle-shaped increment/decrement control — for example, a numeric editor styled like a spinner — the HMI engineer must layer an event-raising control under or over the visible polygon.

The field-proven workaround is the Invisible Button overlay: a transparent button object placed on top of the polygon, with a rectangular hit zone sized small enough to feel triangular to the operator. The polygon supplies the visible shape; the invisible button supplies the event interface. This is the same pattern used in earlier ProTool/Pro and continues unchanged into the WinCC Flexible 2007 system manual and the Comfort Panel line.

Why Every WinCC Flexible Button Stays Rectangular

Every HMI button in WinCC Flexible 2007 inherits from the Windows CE common control class Button. Touch input on Windows CE resolves to a rectangular bounding box, and the runtime dispatches WM_LBUTTONDOWN / WM_LBUTTONUP only when the touch coordinate falls inside that box. Vector graphics are rendered as GDI+ paths and have no built-in hit-test. There is no property in the WinCC Flexible object model — through SP5 — that turns a polygon into an event-raising control.

You can scale, rotate, recolor, or animate a polygon, but you cannot bind a script to its Press event. This is a documented runtime limitation, not a configuration error, and it is consistent across the MP 177, MP 277, MP 377, and Comfort Panel families. The architectural reason is that the MP 277 operating instructions bind events to control objects, and the GDI+ rendering pipeline only computes hit-tests for rectangles.

Prerequisites and Supported Hardware

Confirm the runtime image version on the panel: Start > Settings > Control Panel > OP > Device > Image Version. Images older than V1.3.0 cannot host VBScript reliably and must be reflashed via ProSave before commissioning. VBScript activation in the project settings is mandatory: Project > Properties > Runtime > VBScript runtime version = 5.6.

Building the Triangle Button: Step-by-Step

Step 1 — Create the Project Tags

1. Open HMI Tags in the project tree and add a new tag named CounterValue with:
   • Data type: Int (16-bit signed)
   • Connection: Internal tag
   • Initial value: 0
   • Acquisition cycle: 100 ms
2. Add Counter_Min (Int, initial 0) and Counter_Max (Int, initial 100) to bound the spinner range.
3. Add a hidden Bool btnInc_Pressed and btnDec_Pressed for the press-feedback animation in Step 5.

Step 2 — Draw the Triangle Polygon

1. Open the screen where the spinner will live (e.g., Screen_01).
2. From the toolbox, expand Graphics > Vector graphics and double-click Polygon.
3. In the property dialog, click Points... and enter three coordinates relative to the polygon origin:
   • Point 1: 0, 80
   • Point 2: 80, 80
   • Point 3: 40, 0
4. Set Fill color to 0x0066CC (Siemens petrol) and Line color to 0x000000. Disable the border by setting Line width to 0 for a clean filled triangle.
5. Place the polygon at screen coordinates (320, 200). Resize by dragging the bounding-box handles. The Width and Height properties in the layout pane must remain consistent with the three points, otherwise GDI+ renders the path scaled and the corners round.

For a downward-pointing (decrement) triangle, mirror the points vertically: 0,0 / 80,0 / 40,80. The two polygons should sit stacked vertically, base-to-base, with a 6 px gap to avoid a false hit zone at the seam.

Step 3 — Drop the Invisible Button

1. From the toolbox, expand Controls > Buttons and Switches and select the standard Button object.
2. Drop it on top of the polygon and resize it so the rectangular hit zone fits inside the visible triangle:
   • X = 322, Y = 215 (offset 2 px inside the base)
   • Width = 76, Height = 60
3. In the Properties pane, set:
   • Name = btnIncrement
   • Text = (empty)
   • Background color = 0xFFFFFF
   • Transparency = 100% — this is the "invisible" step
   • Border = None

Step 4 — Bind the VBScript Increment/Decrement

1. Right-click btnIncrement > Properties > Events.
2. Click the field next to Click and select Add function.... The script editor opens.
3. Paste the increment routine:

   Sub btnIncrement_Click(ByVal Item)
       Dim iVal
       iVal = SmartTags("CounterValue")
       iVal = iVal + 1
       If iVal > SmartTags("Counter_Max") Then
           iVal = SmartTags("Counter_Max")
       End If
       SmartTags("CounterValue") = iVal
   End Sub
   

4. Drop a second invisible button on the mirrored (downward) polygon, name it btnDecrement, and add:

   Sub btnDecrement_Click(ByVal Item)
       Dim iVal
       iVal = SmartTags("CounterValue")
       iVal = iVal - 1
       If iVal < SmartTags("Counter_Min") Then
           iVal = SmartTags("Counter_Min")
       End If
       SmartTags("CounterValue") = iVal
   End Sub
   

The SmartTags dictionary is provided by the WinCC Flexible runtime; it returns and accepts Variant values, so numeric coercion happens automatically. The ByVal Item parameter is required by the runtime — omitting it produces a silent "Subscript out of range" error in rt_trace.log on the first click. The exact handler signature is documented in the WinCC Flexible VBScript reference.

Step 5 — Add Visual Press Feedback

Triangle buttons look flat without feedback. Animate the polygon's Fill color via the animation list bound to a hidden internal Bool tag btnInc_Pressed, toggled by the Press and Release events of btnIncrement:

Sub btnIncrement_Press(ByVal Item)
    SmartTags("btnInc_Pressed") = True
End Sub

Sub btnIncrement_Release(ByVal Item)
    SmartTags("btnInc_Pressed") = False
End Sub

Configure the animation: Appearance > Fill color > Variable trigger > btnInc_Pressed >= 1 > Color = 0x003366. The triangle darkens while the operator's finger is on it. The same routine applies to btnDecrement with btnDec_Pressed.

Step 6 — Z-Order and Screen Properties

Right-click the polygon > Arrange > Send to Back. The invisible button must stay on top; otherwise the touch event goes to the polygon (no event) and the press registers as a screen-level click. The runtime hit-test always selects the topmost control whose rectangle contains the touch point. If your screen uses Layered screens for navigation, lock the triangle to the foreground layer (Layer 31) so it stays on top when the operator opens a pop-up.

Step 7 — Compile, Transfer, and Verify

1. Project > Compiler > All > Generate. Build status must report 0 errors, 0 warnings; the script editor flags VBScript syntax errors here.
2. Connect the PC to the MP 277 via Ethernet. On the panel, open Control Panel > Transfer > Ethernet, enable remote control, and tick Transfer mode. From the PC, use Transfer > Ethernet > Accessible Nodes; the panel's MAC should appear within 3 s.
3. After transfer, the panel reboots into the start screen. Tap the increment triangle ten times. The bound I/O field must count from 0 to 10. Tap decrement past 0 — the value should clamp at Counter_Min.
4. Open the panel's Control Panel > OP > Trace log and search for btnIncrement. Each click should append a VB script OK line. A SC_ERR_NOT_FOUND entry means the tag name in SmartTags() is wrong or the connection is missing.

Advanced Variations: Compound Polygons and Animated Spinners

For a hexagon or octagon, replace the three polygon points with six or eight coordinates and size the invisible button to the inscribed rectangle. Hit accuracy drops because the rectangle covers less of the visible area; on a 10" MP 277, keep the rectangle coverage above 70% so the operator does not have to aim at the center of each side.

To make the triangle rotate or pulse, animate the polygon's Rotation property (0–360°) on a 2-second cycle using a hidden internal tag AnimPhase driven by a system scheduler. The invisible button does not rotate with the polygon — re-enter its position so the hit zone stays aligned to the visual center. Animation performance is bounded by the panel's 266 MHz ARM9 CPU; do not animate more than four polygons per screen at full repaint cycle or you will see visible jitter at 30 Hz repaint.

For a numeric up/down spinner with 0.1 step, declare CounterValue as Real and add 0.1 / -0.1 in the script, with a Round() to two decimals to avoid IEEE-754 drift. Note that the MP 277 runtime uses 32-bit floats, so 1,000,000 increment operations still produce a stable value, but 10,000,000 may show the 0.0000001 drift typical of single-precision rounding.

Performance and Memory Considerations

Each invisible button adds roughly 1.2 KB to the compiled HMI runtime, and each VBScript function adds ~600 bytes of p-code. A screen with 20 spinner triangles costs about 36 KB of working memory, well below the MP 277's 128 MB ceiling. The runtime evaluates VBScript in a single-threaded interpreter; a click handler above 200 ms blocks the touch queue. For longer operations, offload to a scheduler-tag state machine and write the result back to CounterValue in the next 100 ms cycle.

Troubleshooting Matrix

Migration to TIA Portal and WinCC Comfort

The Invisible Button overlay technique survives the move to TIA Portal V13 and later. In WinCC Comfort and WinCC Advanced, the toolbox still ships a Button object; transparency is in Appearance > Background > Alpha. VBScript is supported in addition to C# (introduced in TIA V14 SP1). Steps 1–7 above transfer verbatim — only the icon for the Polygon tool moved from Graphics > Vector graphics to Graphics > Shapes > Polygon.

For new projects on a TP700 Comfort or TP1500 Comfort, prefer the built-in Symbol Library > Controls > Stepper object, which already implements a non-rectangular up/down control with clamping, configurable step, and Min/Max bindings. The Invisible Button pattern is only needed for legacy MP 177 / MP 277 / MP 377 panels that cannot be migrated to Comfort firmware. The TIA Portal migration guide covers cross-compilation of WinCC Flexible 2007 projects with a 95% auto-conversion rate; the remaining 5% is mostly event-handler signatures and tag-acquisition cycle changes.

Frequently Asked Questions