Skip to main content
Skip table of contents

Customize Components from the Timeline Preview

Starting in version 1.11, you can now add regions and patterns directly on the timeline preview, as well as manually adjust region size, orientation, and center from the timeline preview window, similarly to how you would adapt shape properties in other design software.

Adding a Region/Pattern

To add a region, select a region component in the component library and drag it to the desired position on the timeline preview window. Once placed, the region can be moved by dragging it on the timeline preview.

You can also place patterns within regions by dragging a pattern from the component library onto the desired region in the timeline preview. Should you place a pattern in an area in which there are no regions, you will be prompted to add one. It will be added alongside your pattern.

Selecting a Region

By clicking on a region visible in the timeline preview, you can select the region you wish to edit. LabMaestro will approximate a bounding box fitted to the size of your region, represented by a blue/yellow checkerboard pattern, as shown in the image below.

image-20251016-163830.png

Selected region in the timeline preview

If two regions have perfectly overlaid bounding boxes, only the top-most region will be selectable from the timeline preview.

Moving a Region

To move a selected region, click anywhere within the interior of the bounding box. Your mouse cursor will turn into a four-directional arrow, confirming that you can now drag the region anywhere within the preview window. The center.x and center.y properties of the selected region will automatically update as you drag the region to the desired location.

image-20251016-163920.png

Moving a region from the timeline preview (Ver. 1.11.0).

Resizing a Region

To resize a region, drag your cursor to one of the edges of the bounding box. This will automatically adjust the geometry.width and geometry.height properties of your region as you resize it. Depending on where you position your cursor, these properties will be adjusted in the following ways;

  • Dragging your cursor to the left or right edges will allow you to adjust the width of the region.

  • Dragging your cursor to the upper or lower edges will allow you to adjust the height of the region.

  • Dragging your cursor to the corners of the bounding box will allow you to adjust both width and height simultaneously.

image-20251016-163602.png

Resizing the width of a region

image-20251016-163618.png

Resizing the height of a region

image-20251016-163630.png

Resizing the width and height of a region simultaneously

Rotating a Region

To rotate a region, drag your cursor to the circle on top of the bounding box. Your cursor will change to signal you can rotate your region. This will adjust the orientation.degrees property of your region as you rotate it.

image-20251016-164546.png

Rotating a region from the timeline preview (Ver. 1.11.0).

Hotkeys

Some hotkeys are also compatible with region edition from the timeline preview, including:

  • The undo (Ctrl+Z) / redo (Ctrl+Shift+Z) hotkeys can be used to undo/redo changes applied to region properties through the timeline preview.

  • Pressing “Delete” on your keyboard will prompt you to confirm whether you truly wish to delete the selected region.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.