Skip to main content

Grid, rulers, canvas and zoom

The toolbar of the screen editor controls how the page is shown while you draw: a grid to line objects up, rulers, a cross through the selection, the size of the page and the zoom. Grid and canvas size are stored with each page.

Before you begin​

  • A page is open in the screen editor.

Steps​

1. Show the grid​

Tick Grid in the toolbar to show the grid of this page, choose Line grid or Dotted grid, and enter the spacing in px (1 to 200, 5 by default), here 20. With Snap ticked, drawing and moving snap to the grid in that step.

Toolbar with Grid ticked, the dotted grid style, the spacing 20 px and Snap ticked.

Other display helps in the toolbar:

ButtonEffect
RulerRulers along the top and the left of the page (on by default)
Center AxesA dashed cross through the centre of the selection over the whole page (on by default)
Snap to ObjectsGuide lines to the edges and centres of other objects while you drag (on by default)
Keep objects inside the pageDrawing, moving and pasting stay on the page; when off, the area around the page is a free workspace that the run screen does not show
Color stripShows or hides the color strip at the bottom

2. Set the canvas size​

Click Canvas Size (the button shows the size, for example 1920×1080). Choose a preset, HMI 800×600, Desktop 1920×1080, Tablet 1024×768 or Mobile 390×844, or enter a Custom size (width 100 to 7680, height 100 to 4320) and confirm with ✓. The size applies to the open page only.

Canvas Size list with HMI 800×600, Desktop 1920×1080, Tablet 1024×768, Mobile 390×844 and Custom size.

The size of a new project's pages comes from its Priority Device; see Create your first project.

3. Zoom​

Turn the mouse wheel over the page to zoom around the cursor (10 to 800 %). The slider at the bottom left shows the zoom; Fit to page (⊡) shows the whole page again.

The page zoomed in around the rectangle, the zoom slider showing a higher percentage.
KeysEffect
Ctrl+=, Ctrl+-Zoom in, zoom out
Ctrl+0Fit to page
Space + drag, middle mouse button + dragMove the view

How pages fit the screen at run time​

By default a page keeps its proportions and fits the window of the run screen. The Scaling setting of the page changes this, for example to Shrink only for a page that should never be enlarged; see Pages and page properties. Operators can change their own view with Space+0 (1:1), Space+1 (fit) and Space+2 (stretch); see Navigate and change the view.

Good to know​

  • Grid display, style and spacing belong to the page; the Snap setting applies to the whole editor.