Page History
...
- Solution open with tags created (Pillar 1 complete)
- For symbol placement: know which tags to bind
MCP Tools and Tables
| Category | Items |
|---|---|
| Tools | get_table_schema, write_objects, get_objects, list_elements, list_dynamics, browse_runtime_properties |
| Tables | DisplaysList, DisplaysSymbols, DisplaysLayouts |
Critical: Use DisplaysList for creating and editing displays. DisplaysDraw is the Designer visual editor UI — NOT a writable table.
...
Step 3: Minimum Element Sizes (Non-Negotiable for Canvas)
| Element | Minimum Size | Recommended |
|---|---|---|
| Wizard Symbol | 70×70 | 80×80 to 100×100 |
| Library Symbol | 60×60 | 80×80 |
| Section Title | FontSize 14 | FontSize 15–16 |
| Value Text | FontSize 13 | FontSize 14 |
| Unit Label | FontSize 11 | FontSize 12 |
| Gauge (Circular) | 150×150 | 180×180 |
| TrendChart | 300×180 | 500×200 |
| AlarmViewer | 400×150 | 600×200 |
| Button | 100×35 | 130×40 |
...
Step 4: Build a Dashboard Display
...
Key theme colors for displays:
| Theme Name | Purpose | Usage |
|---|---|---|
PageBackground | Display page background | Set on display properties |
PanelBackground | Zone/section backgrounds | Default for zone Rectangles |
PopupBackground | Higher contrast panels | Use for callouts, modal-like zones |
ControlBackground | Control backgrounds | Auto-applied to gauges, charts |
TextForeground | Text color | Auto-applied to TextBlocks |
DefaultBorder | Border color | Auto-applied to control borders |
Best practice: OMIT color properties to use themed defaults. Only specify colors when intentionally overriding for process-specific meaning (alarm red, water blue, etc.).
...
- [ ] Zones calculated to fill the FULL canvas width and height
- [ ] Every zone has a background Rectangle with
FillTheme: "PanelBackground" - [ ] Zone backgrounds are FIRST in the Elements array
- [ ] Symbols are ≥ 80×80 pixels, centered in their zones
- [ ] Zone titles are FontSize ≥ 15
- [ ] Value text is FontSize ≥ 14
- [ ] Value and Unit are in the SAME TextBlock (e.g.,
"Flow: {@Tag.X} GPM") - [ ] Flow arrows (→) placed between adjacent zones
- [ ] Bottom panel fills remaining vertical space
- [ ] Bottom panel sections have
PanelBackgroundtheme Rectangles - [ ] No element extends beyond 1366×728
...
Common Pitfalls
| Mistake | Why It Happens | How to Avoid |
|---|---|---|
Using DisplaysDraw as table_type | Confused with DisplaysList | DisplaysDraw is the visual editor UI, not a writable table |
| Omitting PanelType | Defaults silently to Canvas | Always set PanelType explicitly |
Using @Label. in display elements | Confused with symbol definitions | @Label. is only for DisplaysSymbols internals. Use @Tag. when placing symbols |
| Not discovering dynamics first | Doesn't know what's available | Call list_dynamics() with no parameter to see all dynamic types |
| Screenshots for self-validation | Habit from other tools | Trust write_objects success. User sees live updates |
| Setting colors without clearing theme | Theme overrides custom colors | Set value AND clear theme: {Fill: '#FF3498DB', FillTheme: ''} — or just omit to use themed defaults |
| Sending partial display content | Forget it's a document object | Always read-modify-write for existing displays |
| Canvas positioning in Dashboard | Mixing layout paradigms | Canvas uses Left/Top + Elements; Dashboard uses Row/Col + Cells |
| Referencing symbols with wrong path | Incomplete library path | Browse with list_elements('Symbol/HMI') to get exact paths |
| Guessing dynamic property names | Different dynamics have different schemas | Always call list_dynamics('DynamicTypeName') for exact schema |
| CodeBehind in wrong Contents format | Missing language prefix | Contents must start with CSharp\r\n or VBdotNet\r\n before code |
| All Canvas content in top-left | No zone planning | Calculate zones FIRST to fill the full canvas |
| Symbols at 40×40 or 50×50 | Copying library defaults | Minimum 80×80 on process overview displays |
| Value and Unit as separate TextBlocks | Seems logical but misaligns | Single TextBlock: "{@Tag.X} GPM" |
| No background rectangles on zones | Doesn't know about visual grouping | Always add Rectangle with FillTheme: "PanelBackground" |
| Hardcoded fill colors on zone backgrounds | Breaks in Dark theme | Use FillTheme: "PanelBackground" instead |
| FontSize 10–11 for values | Default seemed fine | Minimum 13, prefer 14 for operator readability |
Quick Reference
| Display Action | Tool Call |
|---|---|
| Get display schema | get_table_schema('DisplaysList') |
| Get Canvas structure | list_elements('Canvas') |
| Get Dashboard structure | list_elements('Dashboard') |
| Get element schema | list_elements('ElementName') |
| Browse all dynamics | list_dynamics() |
| Get specific dynamic schema | list_dynamics('FillColorDynamic') |
| Browse symbols | list_elements('Symbol/HMI') or list_elements('Library') |
| Browse Wizard symbols | list_elements('Wizard') |
| Browse theme colors | list_elements('ThemeColors') |
| Read existing display | get_objects('DisplaysList', names=['PageName'], detail='full') |
| Write display | write_objects('DisplaysList', data=[...]) |
| Navigate Designer to display | designer_action('navigate', 'Display.PageName') |
| Browse runtime properties | browse_runtime_properties('Client') |
What's Next
- Server-side logic, tag calculations, CodeBehind patterns: Load the Scripts and Expressions skill —
search_docs('scripts', labels='skill') - New solution from scratch: Load the New Solution skill —
search_docs('new solution', labels='skill') - Specific protocol connectivity: Use
list_protocols()to browse, thensearch_docs('modbus', labels='connector')for protocol-specific docs - Advanced symbol creation:
search_docs('custom symbols', labels='tutorial')for building reusable parameterized symbols
Overview
Content Tools