2D screen editor

The tools and shortcuts of the 2D editor used to place, select, move, resize, rotate, align and arrange objects on a screen.

Regions of the editor

Clicking a 2D screen in the project tree opens the screen as an editor in the central area. The Inspector is below it and the task cards are on the right.

12345678

1. Editor header — tabs of the open editors and the path of the screen.
2. Editor bar — format (fill, line, Text), Order, alignment, Distribute, group, grid, guides, animation preview.
3. Selection bar — above the selection: name, Layer, To front / To back, Cut, Copy, Delete.
4. Ruler — screen pixels; the extent of the selected object is highlighted.
5. Canvas — the screen; objects are selected, moved and resized here.
6. Task cards — icon strip: Toolbox, Animations, Layout, Libraries.
7. Toolbox — object groups; click and draw on the canvas, or drag.
8. Bottom strip — selection name and size, mouse position, zoom (−, list, +, Fit, slider).

• Editor header: the tabs of the open editors and the path of the screen (Main window).
• Editor bar: the single row above the canvas. From left to right: fill color, no fill, line color, line width; Text; Order; six alignment buttons; distribute; group / ungroup; show grid, snap to grid and grid square; alignment guides, prevent overlap, snap to DIN rail (panel); animation preview. The Text, Order and distribute buttons each open a drop-down panel (see below).
• Rulers and canvas: the rulers are scaled in screen pixels; the screen, its grid and its objects are drawn on the canvas.
• Selection bar and size label: a small bar appears above the selection and a width × height label below it (Selection bar).
• Bottom strip: the name and size of the selection, short usage tips, the mouse position (X / Y) and the zoom controls. When no object is selected, the Layer field also appears here: the active layer in which new objects are placed.
• Task cards: the Toolbox, Animations, Layout and Libraries cards are selected from the icon strip on the right (Toolbox and object library, Layers, object list and library).

The format boxes on the editor bar are written to all selected objects that have the relevant property at once; if none of them has that property, the box stays dimmed. If all controls of a drop-down panel are invalid for the selection, the panel's button also appears dimmed.

Text, Order and Distribute panels

12345

1. Text — opens / closes the panel; dimmed if the selection has no text.
2. Font size
3. Font — applied to all selected objects.
4. Bold, italic, underline
5. Alignment — left, center, right.

When you click the button, the panel opens below it; clicking outside or pressing Esc closes it. The commands in the panels apply to the entire selection.

Selection bar

When you select one or more objects on the canvas, a bar appears above the selection (below it if there is no room): the name of the selected object (N objects for a multiple selection), the Layer box (0 – 31), Bring to front, Send to back, Cut, Copy and Delete. The blue label below the selection shows the size in pixels. While an object is being dragged, both are hidden; when it is released, they are repositioned.

Placing objects

Objects come from the Toolbox (Toolbox and object library). There are four ways:

• Click to draw. Click the object in the Toolbox, then click once on the canvas: the object is placed with its default size, with the point you clicked as its top left corner. If you draw by dragging, the rectangle you drag becomes the size of the object. Esc deactivates the tool.
• Drag and drop. Drag the object onto the canvas; the point where you drop it becomes the center of the object.
• Select from the Add menu. Add›Pump›… turns the object into the drawing tool; then click the canvas.
• Right-click. On an object in the Toolbox, Add to screen (center) places the object in the middle of the visible area.

A new object gets a unique name on the screen: the type name and a sequence number (Pompa_1, Pompa_2 …). The object is added to the active layer (see Layers, object list and library).

Polyline and free polygon

In these two objects, each click adds a vertex. Enter, a double click or a right click finishes the drawing; Esc cancels. A polyline requires at least 2 vertices and a free polygon at least 3. After finishing, drag the vertices by their handles; if you double-click an edge, a new vertex is added there; Ctrl + click on a vertex deletes it (it does not go below the minimum number of vertices). The vertices of a rotated shape cannot be edited.

Selecting

• Click the object. Shift + click adds to / removes from the selection.
• Draw a lasso by dragging from an empty spot: all objects that intersect the lasso are selected (they do not have to be completely inside). If Shift is held down, they are added to the current selection.
• Ctrl+A selects all objects except locked and hidden objects and objects on a hidden layer.
• Selecting an object in a group selects the entire group.
• A locked object cannot be selected on the canvas; it is selected from the list on the Layout card.

Moving, resizing and rotating

123456

1. Rotation handle — drag it; with Shift, in 15° steps.
2. Corner handle — resizes in two directions.
3. Edge handle — resizes in one direction.
4. Selection frame — the boundary of the object; drag it to move.
5. Selection bar — name, Layer, Bring to front / Send to back, Cut, Copy, Delete.
6. Size label — width × height (pixels).

• Moving: drag the object or press the arrow keys (1 pixel). Shift+arrow moves it by one grid square. A drag of less than 3 pixels does not count as a move.
• Resizing: a corner handle resizes in two directions, an edge handle in one direction. The minimum side length depends on the object type (4 pixels for most objects). On a rotated object, the opposite edge stays in place.
• Rotation: drag the circular handle at the top; Shift snaps the angle to 15° steps. The angle can also be entered in the Angle (°) field of the Angle (°) category (0 – 359).
• Numeric input: X, Y, Width, Height and Angle (°) are typed in the Angle (°) category of the Inspector. When several objects are selected, the value you type is applied to all of them (if you type X, all of them get the same X).

Grid, guides and collision

Four aids work while you drag; while Alt is held down, all of them are temporarily switched off at once.

1. Snap to grid

   While the Snap to grid button on the editor bar is on, drawing, moving and resizing snap to the grid square. The square is a property of the screen (2 – 200 pixels, default 10); it is typed into the grid square box on the bar (10 px) or selected from the preset values in the list next to it (5, 10, 20, 25, 50, 100). When moving, the first object snaps to the grid, and the others shift by the same amount.

2. Alignment guides

   When on (default), the edges and center lines of the selection snap to the edges / center lines of other objects and of the screen within 5 screen pixels, and a guide line appears. The guide takes priority over the grid.

3. Prevent overlapping

   Off by default. When on, a moved object cannot enter another one; it rests against its edge and slides along the wall. The text Obstacle: … appears in the status bar. The arrow keys follow the same rule (Alt+arrow moves freely).

4. Snap to DIN rail (panel)

   On by default. A rail-mounted device from the Panel Components group that is moved near a DIN rail snaps to the center line of the rail and butts against the device next to it; this takes precedence over the guides. The status bar shows Snapped to surface: …. Details: Panel components and DIN rail snapping.

Aligning, distributing and equalizing size

12345678

1. Fill, no fill, line color, line width — applied to all objects in the selection.
2. Text — drop-down panel: size, font, bold / italic / underline, color, alignment.
3. Order — drop-down panel: bring to front, bring forward, send backward, send to back.
4. Alignment — left, center horizontally, right, top, center vertically, bottom.
5. Distribute — drop-down panel: distribute evenly horizontally / vertically, same width, same height.
6. Group / ungroup.
7. Grid — show, snap and grid square (pixels).
8. Alignment guides, prevent overlap and animation preview.

The same commands are also in the Edit menu (Align, Size) and in the context menu. Locked objects are not affected by these commands.

Order, group and lock

• Order: Bring to front, Bring forward, Send backward, Send to back (the Order panel on the editor bar; bring to front / send to back are also on the selection bar). The order applies only among objects in the same layer; the layer number decides first, then the order in the list (layer 31 is at the very top).
• Group (Ctrl+G, at least 2 objects) makes the selected objects selectable and movable together; Ungroup (Ctrl+Shift+G) separates them. A group only makes the layout easier in Studio; it has no effect in Live.
• Lock / unlock (Edit menu or right-click): a locked object cannot be selected on the canvas, moved or deleted; it is selected from the list in the Layout card.
• Show / hide (the eye in the Layout card): a hidden object is drawn neither on the canvas nor in Live.

Copying and undo

• Copy / Cut / Paste (Ctrl+C / X / V): uses Studio's own clipboard; nothing is written to the Windows clipboard. The clipboard is kept when the screen is changed, so you can paste objects into another screen. Ctrl+V places the objects offset by 20 pixels each time (consecutive pastes do not overlap); Paste in the right-click menu places the objects where the cursor is.
• Duplicate (Ctrl+D): adds a copy of the selection offset by 20 pixels, without using the clipboard.
• The tag bindings, events and properties of pasted / duplicated objects are copied; their names are reset (they get a type name such as Pompa_3) and their locks are removed.
• Delete (Delete or Backspace) deletes the selected objects that are not locked. Undo / Redo (Ctrl+Z / Ctrl+Y) holds up to 100 steps.
• Add frequently used object groups to the Libraries card as a copy template: Layers, object list and library.

Zooming and panning

1234

1. Selection — name and size of the selected object.
2. Mouse position — in screen pixels.
3. Zoom out, Zoom list, Zoom in, Fit screen.
4. Zoom slider — 10% – 400%.

• Ctrl + wheel zooms in on the point where the pointer is (10% – 800%). The controls at the right of the bottom strip do the same: Zoom out (−), the zoom list (25%, 50, 75, 100, 150, 200, 400 and Fit; a ratio that is not in the list is also shown), Zoom in (+), Fit screen and the slider (10% – 400%). There is also the View › Zoom menu.
• Ctrl+0 fits the screen to the window.
• The wheel scrolls vertically, Shift + wheel scrolls horizontally. Pan the screen by dragging with the middle button or while holding Boşluk. If the screen does not fit the view, scroll bars appear.
• The rulers are scaled in screen pixels; the mouse position appears as a line on the ruler and as X / Y in the bottom strip.
• The zoom state of each screen is kept when switching tabs.
• The Animation preview button (play / pause) stops or starts the object animations on the canvas; it does not affect the project.

Right-click menu

If there is no selected object under the pointer, the context menu shows the commands Paste, Select all, the grid toggles, Snap to DIN rail (panel), Fit screen and Screen properties for the screen. If you right-click an object that is not selected, that object is selected first. The Properties command opens the Inspector.

Keyboard shortcuts

For all shortcuts, see the topic Keyboard shortcuts.

Limitations and points to note

• Keyboard shortcuts work only while the editor is visible and the focus is not in a text box.
• 3D objects are not in the 2D Toolbox; 3D scenes are edited in a separate editor (3D screens).
• Objects on a hidden layer are not visible on the canvas and cannot be selected (Screen properties › Layers).
• Alignment and distribution use the bounding box of the rotated object in its rotated state.