Canvas

The canvas is the core of Dashboardx Designer's design perspective — a flexible and intuitive workspace where you can arrange components, create layouts, and bring data visualizations to life. This chapter will help you master canvas operations to achieve professional dashboard design.

What is the Canvas?

The canvas is an infinite workspace where you can:

• Select components for rotation, scaling, and translation
• Arrange components into any layout you imagine
• Use smart guides for precise alignment
• Enable grid snapping for intelligent component snapping alignment
• Use multi-component alignment for horizontal left alignment, center alignment, and right alignment, or for vertical top alignment, center alignment, and bottom alignment, or for horizontal uniform distribution and vertical uniform distribution
• Lock components to avoid accidental touches during layout
• Switch themes to apply consistent styles across the entire dashboard

Canvas Basics

• Entering the Canvas

  1. Click the Design Perspective icon in the left sidebar
  2. The canvas will be displayed as the main view, appearing as a grid-based workspace with the global toolbar at the top

• Canvas Navigation

  • Zoom: Use ⌘+ and ⌘-
  • Pan: Mouse click on blank canvas area and drag
  • Fit to Window: In the global toolbar, you can choose "Fit to Window", "Fit to Height", and "Fit to Width"
  • Reset Window: Click 100% in the zoom control selection

💡 Tip

When the canvas is selected, you can set properties such as resolution, background color, and background image in the Property List panel.

Tools and Functions

1. Selection Tools

   • Single Selection: Click any component to select
   • Multiple Selection: Shift+Click multiple components
   • Deselect: Click blank canvas area or press Esc

2. Alignment and Distribution

   Dashboardx Designer provides intelligent alignment tools:

   1. Alignment Guides: Click and drag from horizontal or vertical rulers to the canvas to generate alignment guides
   2. Smart Guides: Automatically display alignment guides when dragging components
   3. Manual Alignment: Use the alignment toolbar in the global toolbar for precise control
   4. Distribution: Perform equal spacing adjustment between multiple selected components
   5. Grid Snapping: Enable grid snapping in the global toolbar; components can precisely snap to fixed grids

Theme Operations

The system has built-in light and dark theme types, each providing eight themes. Users can switch themes as needed through the theme switcher selector on the global toolbar.

Component Management

1. Adding Components

   1. Drag any component from the Component List panel to the canvas
   2. Copy Existing: ⌘C to copy selected component, click on blank area of canvas, ⌘V to complete paste

2. Positioning Components

   • Drag and Drop: Click and drag component to desired position
   • Property List Panel: Enter precise X/Y coordinates under the coordinates tab for accurate positioning

3. Resizing Components

   • Drag Handles: Use corner handles to resize proportionally
   • Side Handles: Resize only horizontally or vertically

4. Locking and Layer Management

   • Lock Component: Select component and click lock button on global toolbar, or right-click component to activate context menu, then click lock menu item
   • Unlock: Select locked component, can click unlock button on global toolbar, or right-click component to activate context menu, then click unlock menu item
   • Layer Management: Right-click component > "Bring to Front", "Bring Forward", "Send Backward" or "Send to Back"

Layout Strategies

The following are several typical layout strategies that can be referenced when designing dashboards.

1. Grid Layout

┌───────┬───────┬───────┐
│   A   │   B   │   C   │
├───────┼───────┼───────┤
│   D   │   E   │   F   │
└───────┴───────┴───────┘

• Used for balanced, symmetrical designs
• Suitable for dashboards with components of equal importance

2. Focus Layout

┌───────────────┬───────┐
│               │   B   │
│               ├───────┤
│      A        │   C   │
│               ├───────┤
│               │   D   │
└───────────────┴───────┘

• Emphasizes main visualization (A)
• Sidebar for supporting metrics (B, C, D)

3. Hierarchical Layout

┌───────────────────────┐
│          A            │
├───────────┬───────────┤
│     B     │     C     │
├─────┬─────┼─────┬─────┤
│  D  │  E  │  F  │  G  │
└─────┴─────┴─────┴─────┘

• Visually displays data hierarchy
• Suitable for drill-down scenarios

Advanced Canvas Features

1. Templates

   • Apply Template: Apply template to new dashboard, click menu File > New from Template, then select appropriate template to create new dashboard.

2. Canvas Background

   • Solid Color: Choose any background color
   • Image: Upload custom background image
   • Transparency: Adjust canvas transparency for overlay effects

3. Guides and Rulers

   • Custom Guides: Drag from rulers to create custom alignment guides
   • Clear Guides: Drag guides back to rulers to delete guides
   • Hide Guides: Click image button at intersection of horizontal and vertical rulers to hide or show all guides

Handling Large Dashboards

Navigation Aids

• Zoom Slider: Quick zoom control in toolbar

Organization Tools

• Layout Outline Panel: Visual hierarchy of all canvas components
• Component List Panel: All components in collapsible list
• Search Components: Find components by name, both Layout Outline panel and Component List panel support component search

Canvas Design Best Practices

1. Start with Wireframes

   • Sketch layout on paper or using digital wireframing tools
   • Consider user flow and information hierarchy

2. Use Consistent Spacing

   • Establish spacing system (e.g., 8px grid), enable Grid Snapping in global toolbar
   • Use distribution tools to achieve equal spacing
   • Maintain consistent padding around components

3. Group Related Content

   • Group components that tell related stories
   • Use visual separation to distinguish unrelated groups
   • Consider using containers or background colors for grouping

4. Consider Reading Patterns

   • Most audiences read from left to right, top to bottom
   • Place most important information in top-left quadrant
   • Use visual weight to guide attention

5. Leave White Space

   • Do not overcrowd the canvas
   • White space improves readability and focus
   • Use margins and padding effectively

Common Canvas Issues and Solutions

1. Problem: Components Cannot Align

   Solution:

   • Check if "Grid Snapping" is enabled
   • Use alignment tools in toolbar
   • Ensure components are not accidentally locked

2. Problem: Canvas Performance is Slow

   Solution:

   • Reduce number of components on canvas
   • Simplify complex visualizations
   • Use symbols for repeated elements
   • Close other applications to free memory

3. Problem: Accidentally Moved Background Elements

   Solution:

   • Lock background elements (right-click > "Lock")
   • Use Layout Outline panel to manage element hierarchy
   • ⌘Z to undo accidental movements

4. Problem: Components Show No Data

   Solution:

   • Check if data binding and dataset filtering are correct

Integration with Other Perspectives

From Data Perspective to Canvas

1. Create datasets in Data Perspective
2. Switch to Design Perspective
3. Bind dataset fields to components in Data Binding panel

From Canvas to Presentation Perspective

1. Design layout in canvas
2. Click Presentation button in global toolbar to enter Presentation Perspective
3. Test interactivity and user experience
4. Return to canvas for adjustments

Next Steps

Now that you understand the canvas, you can:

1. Explore Components: Learn about different types of visualization elements in the Components chapter
2. Master Data Binding: See how to connect data to components in the Data Binding chapter
3. Test Interactivity: See how your canvas design works in Presentation Perspective

---

Remember: The canvas is your creative playground. Don't be afraid to try different layouts and arrangements. The undo button (⌘Z) is always there to rescue you from any design missteps!

Happy designing! 🎨