Drawing Canvas and Dashboards

Two display paradigms: pixel-perfect canvas for control graphics, responsive dashboards for data visualization.

Platform → UI Technology→ Clients | WebAssembly | Symbols | Drawing | Responsive | Layouts

Canvas Displays

Coordinate-Based Positioning

Canvas displays use absolute positioning with four coordinates for each element:

• Top - Vertical position from canvas top
• Left - Horizontal position from canvas left
• Width - Element width
• Height - Element height

Vector Graphics Capabilities

Canvas displays excel at free-form drawing:

• Import and manipulate SVG files
• Create and combine vector paths
• Polyline and shape drawing tools
• Individual element customization
• Apply dynamics to any vector element

Responsive Canvas (Unique Feature)

Unlike traditional fixed canvases, FrameworX canvas displays can be responsive. Each object can define its resize behavior through the OnResize property:

• Fixed - Icons maintain size during resize
• Proportional - Elements scale with canvas
• Anchored - Objects grow/shrink based on anchors
• Custom - Define specific resize rules per object

Ideal Use Cases

• P&ID diagrams
• Process synoptic screens
• Equipment mimics
• Custom control panels
• Any visualization requiring precise positioning

Dashboard Displays

Grid-Based Layout

Dashboard displays organize content in rows and columns. Elements don't have absolute coordinates—they occupy grid cells that automatically size based on available space.

Container Hierarchy

Each grid cell can contain:

• Controls - Any of the 70+ display controls
• Symbols - From the 2000+ symbol library or custom archives
• ChildDisplay - Container for another display (typically canvas)
• Nested containers:
  • Grid - Another grid within the cell
  • StackPanel - Vertical or horizontal stacking
  • WrapPanel - Automatic wrapping of elements

Mobile Adaptation

Dashboards automatically transform for mobile devices. When viewport width reaches portrait dimensions, the grid converts to a vertical stack panel, arranging all cells vertically for optimal mobile viewing.

Ideal Use Cases

• KPI dashboards
• Analytics displays
• Report layouts
• Responsive data grids
• Mobile-first interfaces

Hybrid Approach

The true power emerges when combining both paradigms:

Dashboards with Canvas Elements

Create a dashboard with 2-4 cells, each containing a responsive canvas display via ChildDisplay control. This provides:

• Grid-based responsive layout
• Pixel-perfect graphics within each cell
• Mobile adaptability with detailed visualizations
• Best of both worlds in one display

Unified Development Environment

Both display types share:

• Same symbol library (2000+ symbols)
• Same control palette (70+ controls)
• Same dynamic properties system
• Same scripting capabilities

The only difference: canvas allows free-form vector editing, while dashboards restrict to cell-based positioning.

In-Context Editing

When working in a dashboard and needing to customize a symbol, right-click and select "Edit Symbol." A temporary canvas editor opens within context, allowing vector modifications without switching environments.

Selection Guidelines

Layout Strategy

The final display choice connects to your overall layout strategy.

• Canvas-only approach - Different canvas displays for desktop vs mobile
• Dashboard-only approach - Single responsive dashboard for all devices
• Hybrid approach - Layout determines when to show canvas vs dashboard

Remember the platform philosophy: "Aim high, start simple, scale without limits." You have complete freedom to implement any visualization requirement with the same tools, choosing the approach that best fits your immediate needs while maintaining flexibility for future expansion.

In this section...