Skip to main content
Version: ver. 1.5.0

How to use the SquareLine Studio layout?

There are three main parts of the program: Header Menu, Panel windows and Editable View. In editor mode, panels can be positioned and measured freely to create a work space of your choice.

Header Menu​

In the Header Menu, you can find menus that are needed for saving, loading and exporting processes and managing licences.

File Menu​

  • New - It starts Create menu of the Launcher screen.
  • Open - It starts Open menu of the Launcher screen.
  • Save - It saves the project with a predefined name.
  • Save As - It saves the project with a new name.
  • Preferences - General settings of the program.
  • Open lo file - Display the most recent application log file.
  • Project settings - Settings of the current project.
  • Exit - It closes the program. Before closing it, a message warns you to save your project.

Export Menu​

  • Export UI Files - Export the project into C files.
  • Create Template Project - Export the template project based on the set OBP configurations.

Help Menu​

  • SquareLine Studio docs - The documentation of SquareLine Studio.
  • LVGL website - Link to the lvgl.io website.
  • Youtube channel - Link to channel of SquareLine Studio
  • EULA - Link to actual end user license agreement

Panels​

Panels are basic elements.

  • Animations - Create and manage animations.
  • Assets - Images and fonts that can be used in your project.
  • Console - Program log and error messages.
  • Font Maker - Create custom fonts.
  • Hierachy - Select and place elements that are added to the screen.
  • History - The program saves your actions. It can record up to 200 actions.
  • Inspector - In the Inspector Panel, you can see the parameters of the selected widget and you can assign events to it.
  • Error - The error panel primarily displays errors where a parameter is missing.
  • Screens - You can find the list of screens, select and manage them.
  • Widget - You can place widgets, enlisted here, on the screen.

Editable View​

You can edit your screens in Editable View. Clicking on a widget, it can be selected, shifted and scaled. Long pressing the middle mouse button, you can pan the screen and by rolling the wheel, you can zoom in or out. When clicking on the screen with the right mouse button, a widget list appears from which you can select your preferred widget. Press and hold the left mouse button in the empty area between screens to pan the screen.

  • Moving Screens- It is possible to move screens within the editable view interface. By holding down the left mouse button on the header of the screen and moving the mouse, you can relocate it anywhere on the interface.

Edit Header​

  • Undo / Redo - Undo or redo your actions one by one.
  • Zoom In/ Zoom Out - Use the mouse wheel or define a scale of zooming in or out.
  • Texture Filter - With this function you can turn the texture filter on and off on the screens. if this function is enabled, then if you zoom in or out on the screen, the screen will not be pixelated.
  • Play Mode - Start and test the current screen by clicking on the Play Mode button.
  • Fit to screen icon - By pressing it the selected screen will be centered.