Page History

...

Standard zone layout for a process overview (1366×728):

...

...

...

...

...

...

...

...

Note: Page-to-page navigation buttons belong in the Header display (see Step 10b), not on the Canvas title bar. ACTION BTNs here are for in-page actions only (e.g., start/stop, acknowledge, reset).

Zone sizing rules:

• Title bar: full width, 50px tall
• Process zones: divide remaining width equally among process stages
• Each zone minimum: 160px wide × 280px tall
• Bottom panel: full width, remaining height
• Margin between zones: 15–20px
• Padding inside zones: 10–15px from zone border to content

Step 2b: Calculate Zone Coordinates

For N process stages on a 1366×728 canvas:

Available width  = 1366 - 40 (left/right margin 20px each)  = 1326
Available height = 728 - 50 (title) - 20 (top margin)       = 658

Zone width = (Available width - (N-1) × 15) / N Zone height = 320 (for process row) Zone startY = 60 (below title)

Zone[i].Left = 20 + i × (zoneWidth + 15) Zone[i].Top = 60 Zone[i].Width = zoneWidth Zone[i].Height = 320

Bottom panel: Left = 20, Top = 400, Width = 1326, Height = 658 - 320 - 20 = 318

Example: 6 process stages

Zone width = (1326 - 5×15) / 6 = 208px each

Zone 0: Left=20, Top=60, W=208, H=320 Zone 1: Left=243, Top=60, W=208, H=320 Zone 2: Left=466, Top=60, W=208, H=320 Zone 3: Left=689, Top=60, W=208, H=320 Zone 4: Left=912, Top=60, W=208, H=320 Zone 5: Left=1135

...

Note: Page-to-page navigation buttons belong in the Header display (see Step 10b), not on the Canvas title bar. ACTION BTNs here are for in-page actions only (e.g., start/stop, acknowledge, reset).

Zone sizing rules:

• Title bar: full width, 50px tall
• Process zones: divide remaining width equally among process stages
• Each zone minimum: 160px wide × 280px tall
• Bottom panel: full width, remaining height
• Margin between zones: 15–20px
• Padding inside zones: 10–15px from zone border to content

Step 2b: Calculate Zone Coordinates

For N process stages on a 1366×728 canvas:

Available width  = 1366 - 40 (left/right margin 20px each)  = 1326
Available height = 728 - 50 (title) - 20 (top margin)       = 658

Zone width = (Available width - (N-1) × 15) / N Zone height = 320 (for process row) Zone startY = 60 (below title)

Zone[i].Left = 20 + i × (zoneWidth + 15) Zone[i].Top = 60 Zone[i].Width = zoneWidth Zone[i].Height = 320

Bottom panel: Left = 20, Top = 400, Width = 1326, Height = 658 - 320 - 20 = 318

Example: 6 process stages

Zone width = (1326 - 5×15) / 6 = 208px each

Zone 0: Left=20, Top=60, W=208, H=320 Zone 1

Bottom: Left=24320, Top=60400, W=2081326, H=320 Zone 2: Left=466, Top=60, W=208, H=320 Zone 3: Left=689, Top=60, W=208, H=320 Zone 4: Left=912, Top=60, W=208, H=320 Zone 5: Left=1135, Top=60, W=208, H=320

Bottom: Left=20, Top=400, W=1326, H=308

Step 2c: Zone Background Rectangles (REQUIRED)

Every process zone MUST have a background Rectangle for visual grouping. Use themed colors — never hardcode colors for zone backgrounds.

Standard zone background — use PanelBackground theme:

{
  "Type": "Rectangle",
  "Left": 20, "Top": 60, "Width": 208, "Height": 320,
  "FillTheme": "PanelBackground",
  "Stroke": "#FF909090", "StrokeThickness": 1
}

Higher contrast zones (rare — popups, callouts): use PopupBackground theme. Not needed for normal process zones.

Page background should use PageBackground theme (set on the display properties, not as a rectangle).

CRITICAL theming rules for zone backgrounds:

• Use FillTheme: "PanelBackground" — this respects Light/Dark theme switching automatically
• Do NOT hardcode fill colors like "Fill": "#0A000000" — these break in Dark theme
• Only set explicit Fill + FillTheme: "" when you need process-specific meaning (e.g., water blue for a tank zone)

Zone backgrounds must be placed FIRST in the Elements array so they render behind all other content.

Step 2d: Standard Zone Internal Layout

308

Step 2c: Zone Background Rectangles (REQUIRED)

Every process zone MUST have a background Rectangle for visual grouping. Use themed colors — never hardcode colors for zone backgrounds.

Standard zone background — use PanelBackground theme:

{
  "Type": "Rectangle",
  "Left": 20, "Top": 60, "Width": 208, "Height": 320,
  "FillTheme": "PanelBackground",
  "Stroke": "#FF909090", "StrokeThickness": 1
}

Higher contrast zones (rare — popups, callouts): use PopupBackground theme. Not needed for normal process zones.

Page background should use PageBackground theme (set on the display properties, not as a rectangle).

CRITICAL theming rules for zone backgrounds:

• Use FillTheme: "PanelBackground" — this respects Light/Dark theme switching automatically
• Do NOT hardcode fill colors like "Fill": "#0A000000" — these break in Dark theme
• Only set explicit Fill + FillTheme: "" when you need process-specific meaning (e.g., water blue for a tank zone)

Zone backgrounds must be placed FIRST in the Elements array so they render behind all other content.

Step 2d: Standard Zone Internal Layout

Every process zone follows the same internal Every process zone follows the same internal layout pattern. Coordinates are offsets from the zone's Left/Top origin:

???? Zone (background Rectangle) ?????????????
? ZONE TITLE (FontSize 15-16)           y+10 ?
?                                             ?
?    ????????????                        y+40 ?
?    ?  Symbol  ?   80×80 to 100×100          ?
?    ?  (pump,  ?   centered horizontally     ?
?    ?  motor)  ?                              ?
?    ????????????                       y+140 ?
?                                             ?
?  Label: Value Unit  (FontSize 14)     y+150 ?
?  Label: Value Unit                    y+176 ?
?  Label: Value Unit                    y+202 ?
?                                             ?
?  Status indicator (optional)          y+240 ?
???????????????????????????????????????????????

Symbol centering formula:

Symbol.Left = Zone.Left + (Zone.Width - Symbol.Width) / 2

Step 2e: Value + Unit Text Pattern

NEVER put value and unit in separate TextBlocks side by side. Instead, use ONE TextBlock with composite LinkedValue:

{
  "Type": "TextBlock",
  "LinkedValue": "Flow: {@Tag.Plant/Intake/FIT_1001} GPM",
  "Left": 30, "Top": 150, "Width": 170, "Height": 24,
  "FontSize": 14
}

Patterns:

• "Flow: {@Tag.X} GPM" — label + value + unit
• "{@Tag.X} NTU" — value + unit only
• "pH: {@Tag.X}" — label + value (no unit)

Step 2f: Flow Arrows Between Zones

Show process flow direction between zones using TextBlock arrows:

{
  "Type": "TextBlock",
  "Text": "→",
  "Left": 228, "Top": 190, "Width": 15, "Height": 30,
  "FontSize": 20
}

Arrow placement: horizontally centered in the gap between zones, vertically aligned with the symbol center.

Step 2g: Bottom Panel Patterns

The bottom panel (below process zones) should contain ONE of:

Option A: Trend + KPI sidebar

???????????????? Bottom Panel ??????????????????
? TrendChart (w:900, h:280)  ? KPI Column      ?
?                             ? Value1: ###     ?
?                             ? Value2: ###     ?
???????????????????????????????????????????????????

Option B: Trend + Alarm split

Symbol centering formula:

Symbol.Left = Zone.Left + (Zone.Width - Symbol.Width) / 2

Step 2e: Value + Unit Text Pattern

NEVER put value and unit in separate TextBlocks side by side. Instead, use ONE TextBlock with composite LinkedValue:

{
  "Type": "TextBlock",
  "LinkedValue": "Flow: {@Tag.Plant/Intake/FIT_1001} GPM",
  "Left": 30, "Top": 150, "Width": 170, "Height": 24,
  "FontSize": 14
}

Patterns:

• "Flow: {@Tag.X} GPM" — label + value + unit
• "{@Tag.X} NTU" — value + unit only
• "pH: {@Tag.X}" — label + value (no unit)

Step 2f: Flow Arrows Between Zones

Show process flow direction between zones using TextBlock arrows:

{
  "Type": "TextBlock",
  "Text": "→",
  "Left": 228, "Top": 190, "Width": 15, "Height": 30,
  "FontSize": 20
}

Arrow placement: horizontally centered in the gap between zones, vertically aligned with the symbol center.

Step 2g: Bottom Panel Patterns

The bottom panel (below process zones), can be created as required by information to show on the dwaplsy, or by default, use one of the following options::

Option A: Trend + KPI sidebar

Option B: Trend + Alarm split

???????????????? Bottom Panel ??????????????????
? TrendChart (w:660, h:280)  ? AlarmViewer      ?
?                             ? (w:640, h:280)  ?
???????????????????????????????????????????????????

Option C: Full-width trend with status bar

...

Bottom panel sections should also use PanelBackground theme background rectangles.

...

Step 3: Minimum Element Sizes (Non-Negotiable for Canvas) 

...

Dashboard uses a grid with DashboardDisplay (columns/rows definition) and Cells array.

You never set Width or Hight on Dashboard, just the cell

list_elements('Dashboard')

...