Skip to main content
Version: ver. 1.5.0

Multiple resolutions

A SquareLine Vision project can target several display resolutions at the same time, for example a 800 × 480 and a 1024 × 600 variant of the same device. Every resolution stores its own screen geometry, and global variables can hold resolution-specific values, so the same project adapts to different displays without duplicating the screens.

Adding a resolution​

  1. Open Project settings from the menu and select the Display category.

  2. The Default resolution section shows the width (W) and height (H) of the project and the X and Y offset.

  3. Click Add new resolution. A new section (Resolution 2, Resolution 3, ...) appears with the size of the default resolution.

  4. Enter the width, height and offset of the new resolution.

When the size of an additional resolution is changed, the position and size of every screen are scaled proportionally from the default resolution, so the layout of the screens starts from a matching state. An additional resolution can be deleted with its Remove resolution button; the default resolution cannot be removed.

Switching the active resolution​

As soon as the project has more than one resolution, a Resolution selector appears in the Variables section of the Inspector panel. Selecting a resolution:

  • resizes the simulator to the chosen width and height,
  • shows every screen with the position and size it has in that resolution,
  • switches all resolution-dependent variables to their values defined for that resolution.

Each screen remembers its geometry per resolution: moving or resizing a screen only affects the active resolution. Play mode runs the project in the active resolution.

Resolution-specific values​

The Variable Manager contains a system collection named Resolution with one column per resolution. The columns are named after the size (e.g. 800×480) and follow the Display settings automatically; they cannot be renamed, duplicated or deleted from the manager, and the collection itself cannot be removed.

Variables created in this collection work like any other variable, but their values are selected by the active resolution:

  1. Open the Variable Manager and select the Resolution collection in the left sidebar.

  2. Click Create variable and choose a type, for example Number for widget sizes, positions or paddings, Image for graphics prepared in several sizes, or Font for text sizes.

  3. Enter a value in every resolution column.

  4. Bind the variable to widget parameters or style properties with the plus (+) icon of the field in the Inspector.

Widgets bound to these variables adapt automatically when the active resolution changes.

💡 TIP Percentage-based sizes and flex layouts adapt to any resolution on their own. Use resolution variables for values that need an exact, per-resolution pixel value.