Introduction

Squareline Studio is a multi-platform designer tool that helps designers and developers work in a fast and efficient way. Our goal is to help designers and developers work with the same file format, and SquareLine Studio does this by creating the perfect code for your project. Whether you're using C or Python, you can export code for both.

Installation

Intel x64 PC minimum configuration
- CPU: Supports 64-bit Intel or AMD processors, 1.5 GHz or faster
- RAM: 4 GB
- HDD: 2 GB of storage space
- GPU: DirectX 11 or OpenGL 3.2 supported
operating system
- Windows 7 or later (64-bit)
- Screen resolution: 1280 x 800
- Internet connection required to activate the software
Download and unzip to install SquareLine Studio

Double-click SquareLine_Studio_Setup.exe to install

Click Settings Set the installation directory and click OK Click Install to start the installation After the installation is complete, click Finish

Introduction to Design Tools

Find the Squareline Studio icon on the desktop, double-click to open it, and after opening, you can use it or log in

After entering, click Create -> Desktop -> VS Code, as shown in the image below:
- Board Description: A description of the selected board
- Project Description: A description of the project
- Project Settings：
  - Project name: the name of the project
  - Project paths
  - Resolution: The resolution of the screen
  - Rotation: The angle at which the screen is rotated
  - Offset: The offset setting
  - Shape: Select whether it is rectangular or circular
  - Color depth: The depth of the color
  - LVGL version: LVGL version
  - Theme: The color of the theme
  - Multilanguage: Multilingual mode
- Create: Once you have added all the required parameters, you can create a project
  - Here, we use the parameters of waveshare ESP32-S3-Touch-LCD-4.3B-BOX as an example to create a project
If you need to use the SquareLine Studio sample, simply select the appropriate one from the list and click the "Open Selected Project" button to load it.
License information can be found link here.

Editor layout

The editor has three main sections: the title menu, the panel window, and the editable view. In editor mode, panels can be freely positioned and measured to create a workspace of your choice.
File
- New: Enter the creation page
- Open: Enter the open page
- Save: Save the project
- Save As: Save as a project
- Project settings: General settings for the program
- Preferences: The settings of the current project
- Exit: Closes the program
Export
- Export UI Files: Export the project as a C file
- Create Template Project: Export the template project according to the OBP configuration set
Help
- SquareLine Studio docs: Go to SquareLine Studio's documentation
- LVGL website: Links to lvgl.io websites
- Youtube channel: Link to the SquareLine Studio channel
- EULA: Link to the actual end user license agreement
Introduction to the basic elements of the panel
- Animations: Create and manage animations
- Assets: Images and fonts that can be used in your project
- Console: Program logs and error messages
- Font Maker: Create custom fonts
- Hierachy: Select and place elements added to the screen
- History: The program saves your actions. It can record up to 200 actions
- Inspector: In the Inspector panel, you can view the parameters of the selected widget and assign events to it
- Error: The error panel mainly displays errors with missing parameters
- Screens: You can find a list of screens, select and manage them
- Widgets: You can place the widgets listed here on your screen
Editable view
- You can edit the screen in Editable View. Click on the widget to select, move, and zoom it. Long press the middle mouse button and you can pan the screen, and by scrolling the scroll wheel, you can zoom in or out. When you right-click on the screen, a list of widgets will appear, from which you can select your preferred widget. Press and hold the left mouse button in an empty area between screens to pan the screen.
- The screen can be moved in the editable view interface. By holding down the left mouse button on the screen title and moving the mouse, you can reposition it anywhere on the interface.
- : Undo or redo your actions one by one
- : With this feature, you can turn texture filters on and off on the screen. If you enable this feature, then if you zoom in or out of the screen, the screen will not be pixelated.
- : Use the mouse wheel or define the scale of zooming in or out
- : When pressed it, the selected screen will be centered
- : Plays the selected screen animation

Introduction to Preferences

UI scale: Zoom in or out of the UI design
Autosave: The software automatically saves the project at regular intervals, and this feature not only overwrites the project files, but also saves the files created at different times in the autosave folder of the software
Check for updates: The title and current version of the program can be found here, as well as the CHECK FOR UPDATES button, which you can use to check if there is an updated version of the program
Undo history size: You can set the number of history versions you want to save. The higher this number, the more memory your computer will need
Default align: Select the default ALIGN for the widget
Format .spj and .ecomp files: Whether to format the .spj and .ecomp files
Reset UI layout: Press the reset button to restore the editor layout to its default state
Licence: You can find the license information for the program here. YOU CAN REMOVE THE CURRENT LICENSE BY CLICKING THE REVOKE LICENSE BUTTON
About: SqaureLine Studio information
Hot Keys: A list of keyboard shortcuts that can be used in the program

Introduction to Project Settings

Properties: The resolution, color depth, rotation, offset, shape, and naming settings of the item
- Object Naming: This feature allows you to specify a prefix option for naming a control, and you can supplement the export name of the control with the screen name or control type. Compared to the previous version, if we set the screen name to appear before the control name, we no longer need to rename each control one by one when we change the screen name later.
- Name:
- Screen_name: Supplement the given name with the screen name
- [Screen]_Name: Supplement the given names with the screen names and separate them with underscores
- [Screen_Widget] _Name: Supplement the given name with the screen and widget type name, separated by an underline
- [Screen]Name: Supplement the given name with the screen name
- [ScreenWidget]Name: Supplement the given name with the screen and widget type name
- [ScreenWidget]_Name: Supplement the given name with the screen and widget type name, separated by an underline
Force Exported Names: By selecting this checkbox, all letters will be converted to lowercase during the export process
Board properties: Select the board, IDE, and LVGL version
File export: File export
- Project Export Root: The path to the project file for exporting the project template
- UI Files Export Path: The path to the exported generated UI file
- LVGL Include Path: The path where the LVGL library lvgl.h is located
- Multilanguage support: Choose whether the project should support multiple languages (translation)
- Call function export file: You can choose the file extension to use when exporting ui_event files
- Image export mode: The image/picture files to be loaded can be located in different locations depending on the LVGL fsdrv drive type selected
  - For STDIO, POSIX, WIN32 emulated drives/partitions, a drive folder will be created in the exported code with a subfolder named assets containing the images
  - For FATFS (and LVGL-8.3.11-supported LittleFS) physical drives, images can be saved by a dedicated Flash partition or external TF card, for example. You'll need to copy the Assets folder from the Drive folder into the Real partition
- Force export all images: Export not only the images used, but also all the images in the assets folder
- Flat export: If this feature is enabled in the project settings, all UI files will be exported to a single folder instead of to folders for screens, fonts, images, etc. This can be useful for some build systems that don't deal with catalogs, such as Arduino.
- Project description: You can modify the project description given at the beginning

Introduction to Animation Panel

You can create and manage custom animations in the Animations panel. You can add multiple animation attributes to each animation to make complex animations
Add new animation: Add a new animation
- Before creating a new animation, you should choose a name for it. Then, it will be added to the Manage Animation list by clicking the Add Animation button
Manage animation: Manage animations
- You can edit the selected animation in this section. This is where you can create, edit, or delete animation attributes
Select animation: Select the animation
- You can select your animation from the drop-down menu. You can start the selected animation by clicking the button on the preferred widget in the Default list. You can delete an animation by clicking the button. In this case, it will be removed from all the widgets that have been added.
Animation name: The name of the animation
- In this section, you can rename the selected animation
Test object: Test object
- Here, you can select the widget you want to test the current animation
Add property: Add a property
- Attributes are properties of the animation. However, not every property is available in all widgets
  - Position X: Moves on the X axis
  - Position Y: Moves on the Y axis
  - Width: Sets the width of the widget
  - Height: Sets the height of the widget
  - Opacity: Sets the opacity of the widget. This changes the opacity of the widget's parent. In this case, the sub-opacity also changes
  - Image angle: Rotates the image widget at any angle
  - Image zoom: Zoom in or out of the image widget
  - Image frame animation: Can be used to display images after each other. The name of the image should begin with the same file name, but should end with a number indicating the index of the image in the sequence. SquareLine automatically recognizes these image sequences and can animate them like any other property. The Start and End values indicate where to which image the animation is played
Each animation has four parameters: start and end values, motion time, and delay. Here you can also animate the features, let's take a look at what these are:
- Start Value: The starting value of the animation
- End Value: The end value of the animation
- Relative: If checked, the Start and End values will be interpreted relative to the current value
- Delay: The delay time of the animation in milliseconds
- Time: The motion time of the animation (in milliseconds)
- Instant: If unchecked, the Start value will only be applied after "Delay".
- Playback delay: The delay (ms) before the animation is played
- Playback time: The time when the animation plays (0 will disable playback)
- Loop delay: The delay (in milliseconds) before restarting the animation
- Loop count: The number of times the animation is repeated
- Infinite: Select to repeat the animation indefinitely
- Animation types: Animation types, you can choose from 5 animation features

Introduction to Asset Panels

Images and fonts added to the project will be displayed in "Asset". After the project is created, an Asset folder is also created. If you copy the images you need for your project there, the program will automatically load them and list them in the Assets panel. Images in PNG and JPG formats are allowed. If you double-click an image in the Assets panel, it will open in the default image browser
Assets can be deleted using the icon in the upper right corner of the file. This action also deletes the resource from the project folder
If you want to add fonts to your project, you should copy them to the Asset/Fonts folder. Then the program will load them automatically
Add files into assets: Add files into Assets
- If you want to add an image to Assets, there are two ways to do it. You can use the file manager program to copy the image to the Asset folder, or you can click the Add file into Assets button and select the image you want to add, and it will automatically go into the asset

Introduction to Console Panel

You can find program logs and error messages in the console panel

Introduction to Font Manager Panel

You can use operating system fonts in the embedded GUI. LVGL applies UTF-8 encoding to display Unicode characters in any language. Here, you can generate new fonts for your GUI project. Using the font converter tool, you can create C arrays from any TTF or WOFF font. You can select a range of Unicode characters and specify the bpp (bits per pixel)
Create New Font: You can create a new font in the Create New Font section. Before you create a font, you should copy at least one font to your project's Assets/Fonts folder. You can only generate new fonts from fonts listed in a folder
- Font Name: You can name your font
- Select Font Asset: You can select a font listed in the Assets/Fonts folder from the drop-down menu
- Font Size: You can define the size of the font
- BPP: You can define the blurriness of the edges of letters in bits per pixel
- Letters: You can select letters from the ASCII character list in the generated font. The default setting is that only those selected letters are included in the generated font
- Range: You can also define a custom letter range, i.e. the range and/or characters you want to include, e.g. 0x20-0x7F, 0x200, 450
- Symbols: A list of characters to include. For example ABC0123ÁÉŐ
Created Fonts: You can find your fonts here, and you can also modify or delete these fonts

Introduction to Hierarchy Panel

In the Hierarchy, you can find a list of widgets displayed in the scene in a hierarchical order. Of course, you can modify the order of the widgets
At the top of the hierarchy pane, there is a search field that allows you to search in the hierarchy list
Next to the search field, there is an icon that you can use to display only those widgets that contain events
The icon in front of the registered item will show the type of widget. Next to the icon, is the name of the widget. When you select a list item, three icons appear on the right:
- : Locks the position of the widget
- : Use the eye icon to turn hiding on and off
- : Context menu
  - Duplicate: Creates a copy of the selected widget
  - Copy: Places the selected widget on the clipboard
  - Paste: Inserts a clipboard item next to the selected widget
  - Paste as a child: Inserts the widget into the clipboard as a child of the selected widget
  - Delete: Deletes the selected widget
If you add an event to a widget, a dot will appear before the widget name, which can be green or red
- Green dot - Indicates that the widget has an event with the correct settings
- Red dot - Indicates that the widget has an event, but some actions are missing the target widget. For the Image Widget, it also indicates that the target image is missing

Correct setting
Wrong setting

Long press the left mouse button on a list item, you can move it and reposition it when released. If you move a widget to the top of another widget, the one on top will be the child widget

Introduction to History Panel

History has a list of actions. The program can log up to 200 actions into a list. Select any action in the list, and the item will revert to its previous state. If any element of the project is modified after setting it back to the project, the action after the selected element disappears

Introduction to Screens Panel

Creating a project results in a creation screen. You can add a new screen by clicking on the screen widget. In the Screens panel, screen elements can be repositioned by dragging and dropping
Select a list item and three icons will appear on the right side:
- : Deletes the selected widget
- : Locks the position of the widget
- : Creates a copy of the selected widget
Long press the left mouse button on a list item, you can move it and reposition it when released
Initial actions: The first element of the hierarchy panel is always a special "Initial actions" element. It cannot be removed or moved. By selecting this element, you can create an event action that will run once when the UI is created. For example, it can be used to create initial animations

Introduction to Inspector Panel

Inspector has parameters for the selected widget. You can add styles and events to them
All widgets have required parameters, such as name, transition, flag, and status. In addition, there may be special settings
Name: The name of the widget
- Names cannot begin with digits, underscores, or special characters. Once the code is exported, you can find the widget by that name
Layout: You can use layouts to automatically arrange the children of a widget. If layout is enabled, you can't manually adjust the X and Y values of a child unless the IGNORE_LAYOUT or FLOATING flag is enabled on the child
- Flex flow: Row or column layout
Transform: Define the position and size of each widget, as well as its alignment with its own parent
- X, Y: The X and Y positions of the widget
  - This value can be added in pixels or percentages. The Percent value will reference the size of the parent widget
- Width, Height: The width and height of the widget
  - This value can be added in pixels, percentages, or content can be defined as parameters. The percentage value will reference the size of the parent widget, and the content will copy the maximum size of the child widget
  - If the parent has a Flex layout, the width/height of the child can also be set in fr units. It indicates how much space is taken proportionally from the available space in the track
- Align: The alignment of the widget to the parent
Flags: Flags are different properties connected to the widget and can be enabled or disabled
Main signs
- Hidden: Hidden objects
- Clickable: Makes the object clickable by the input device
- Checkable: Toggles the selected state when an object is clicked
- Press lock: Keeps the object pressed even if the press slips off the object
- Click focusable: Adds a focus state to an object when clicked
- Adv hittest: Allows for more accurate hit (click) testing. For example, consider rounded corners
- Ignore layout: Makes the object positionable by the layout
- Floating: Objects are not scrolled when the parent scrolls and ignores the layout
- Overflow visibile: Does not clip the contents of the child to the boundaries of the parent
- Flex in new track: Allows you to create adaptive layouts that automatically adjust the size, spacing, and alignment of components, making it easier to manage complex user interface designs
- Event bubble: An event bubble that propagates the event to the parent
- Gesture bubble: A gesture bubble that propagates the event to the parent
- Snappable: If scroll snapping is enabled on the parent object, it can be snapped to this object
Scroll signs
- Scrollable: Makes the object scrollable
- Scroll elastic: Allows internal scrolling, but at a slower speed
- Scroll momentum: Causes the object to roll further when it is "thrown".
- Scroll on focus: Automatically scrolls the object to make it visible when focused
- Scroll chain: Allows scrolling to be propagated to the parent
- Scroll with arrow: Allows you to scroll through the focused object using the arrow keys
- Scroll one: Allows only one snappable child to be scrolled
Scroll settings
- Scrollbar mode: Displays the scrollbar according to the configured mode. The following patterns exist:
  - Off: The scrollbar is never displayed
  - On: Always displays the scrollbar
  - Active: Displays the scroll bar when scrolling the object
  - Auto: Displays the scroll bar when the content is large enough to be scrolled
States: A combination of the following states that an object can be:
- Clickable: Toggle or select the state
- Disable: Disabled state
- Focusable: Focus via keyboard or encoder or click via touchpad/mouse
- Pressed: Being pressed
- User 1: Unique user 1
- User 2: Unique user 2
- User 3: Unique user 3
- User 4: Unique user 4
Style settings: Styles can be used to add effects to a widget or parts of it. You can add custom background colors, borders, shadows, and more. In Style Settings, you can add or modify the values of these parameters
- State: You can create custom styles for each state
- Style: The relevant introduction is in the Introduction to Styles below
- Events: The description is in the Events introduction below

Introduction to Widget Panel

You can find Widgets on the panel, they are the basic elements of the UI. Each widget has its own preferences. You can add custom styles to widget components and allow them to be configured in different states, for more information go to Widget Types below

Introduction to Error Panel

The error panel mainly shows errors where a parameter is missing in the Events, Animations, or Styles sections. The errors listed here also appear in the Hierarchy panel, with a red dot in front of the widget that contains the error
The list of error panels includes:
- Screen/Component: The screen or component where the error occurred
- Widget: The name of the widget where the error occurred
- Property: The name of the error parameter
- Description: A detailed description of the error

Introduction to Widget Types

Screen: Screen is the primary object. It defines the resolution of the workspace and widgets can be added here. You can create multiple interfaces for your project. To switch between screens, you should use the Change Screen event
- When selecting Screen, open the Inspector window, and there will be two options in the Screen in SCREEN:
  - Temporary: If enabled on the screen, the screen will be automatically created on load and deleted on unload. By doing this, you can save a lot of memory if you have many screens in your project. When using this feature, you need to be careful not to enable it on the screen where something is happening, even if it is not visible. Examples of such screens include events created in the Initial Action section or animations that play continuously
  - Don't export screen: If the Don't export screen check box is selected, the screen will not be exported. In this way, you can create a kind of "artboard", such as storing some component instances in one place, or just doing some experiments
Basic: The basic widget category includes the main components. These are the most important elements in the screen
- Arc: You can use the Arc widget to draw arcs or create interactive circle sliders.
  - Parameters of Arc:
    - Range min,max: Defines the minimum and maximum values of the arc
    - Value: the starting value
    - Bg start, end angle: The start/end angle of the background in degrees
    - Mode: You can choose from 3 different modes:
      - Normal: Indicates that the arc is drawn from the minimum value to the current value
      - Reverse: The arc of the indicator is drawn counterclockwise from the maximum value to the current value
      - Symmetrical: Draws an indicator arc from the midpoint to the current value
    - Rotation: An offset
      that can be added to the 0 degree position
- Button: A button is a basic object. By using it, you can quickly and easily create buttons
- Container: You can create invisible groups through which you can easily build the location of your widgets. The container is exported as a panel widget, but all styles are removed from it using lv_obj_remove_style_all().
- Image: By using the Image widget, the image in the Asset folder will be displayed. There are two options for displaying images in the Asset folder. You can add an image widget to the screen and set the image you want to display, or you can simply drag your preferred image from the Asset folder onto the screen so it will be displayed automatically
  - Image parameters
    - Asset: You can select an image to display on the widget from the list of images in the Asset folder
    - Pivot X, Y: The Pivot is the center point of rotation and zoom of the image
    - Rotation: Rotation angle (in degrees)
    - Scale: Attribute
      used to adjust image scaling
- Label: By using Label, you can add text to the screen
  - Label Parameters
    - Label mode: You can choose different solutions for excessively long rows
      - Wrap: Wrap lines that are too long
      - Dot: Replaces the last 3 characters in the bottom right corner of the label with dots
      - Scroll: If the text is wider than the label, scroll the text horizontally before and after. If it's higher, roll vertically. Scroll in only one direction, horizontal scrolling has a higher priority
      - Scroll circular: If the text is wider than the label, scroll the text horizontally continuously. If it's higher, roll vertically. Scroll in only one direction, horizontal scrolling has a higher priority
      - Clip: Clips the end of the text if the text is wider than the label
    - Text: You can add the text you want to display
    - Recolor: In text, you can use commands to recolor parts of text. For example: "Write a #ff0000 red# word
- Panel: With this, you can create a rectangle that can be freely converted using styles. You can make rounded corners or add background colors, shadows, borders, etc.
- Controller:Textarea is a Basic object with a Label and a cursor on it. You can add text or characters to it. Long lines are wrapped, and when the text becomes long enough, the text area can be scrolled
  - Controller parameter
    - Text: Initializes the content in the text width
    - Placeholder: Unique to Textarea, it allows you to style placeholder text
    - One line mode: The text area can be configured as a single line. In this mode, the height is automatically set to show only one line, the newline characters are ignored, and the word wrap is disabled
    - Password mode: The text area works similarly to the password area, with characters replaced by stars
    - Accepted characters: You can set a list of accepted characters, other characters will be ignored
    - Max text length: You can limit the maximum number of characters
    - To be translated:More information on the Multilingual section
- Tabview: Tab view objects can be used to organize the content in tabs. The Tab button can be located at the top, bottom, left, and right of the Tab view. A new tab can be selected by clicking on the tab button or by swiping horizontally over the content
  - Create a TabView widget. You can add new pages in the Tabpages group of the Inspector panel. The added pages will appear in the hierarchy panel because they are children of the Tabview. You can create a widget on a page just like you would on any other widget
  - Tabview parameters
    - Tab position: Select which side you want to place the Tab button
    - Tab size: Sets the height of the tab button title (or width if placed on the left or right)
    - Tabpages: Add a new page. In the name column, set the name of the widget (used in the hierarchy). In the "title" column, you can set the title of the page. The trash can icon will delete the page
  - Style settings: Sets the style of each section of the tabview
    - Style（Main）
    - Style（Button main）
    - Style（Button items）
Controller: Place the widget for control
- Calendar: The calendar widget is a classic calendar that can:
  - Displays the date of any month in a 7x7 matrix
  - The name of the displayed date
  - Highlight Today
  - Highlight any user-defined dates
  - Parameters of the Calendar widget
    - Day, Month, Year: You can use these parameters to define a default date.
- Checkbox: The checkbox widget consists of a "tick box" object and a tag. When you click on the Checkbox Widget, the checkbox switches
  - Parameters of the Checkbox widget
    - Title: The name of
      the checkbox
- Colorwheel: Allows the user to select a color. The hue, saturation, and value of the color can be selected individually. Press and hold the object, and the color wheel will change to the next parameter of the color (hue, saturation, or value). Double-clicking will reset the current parameters
  - Parameters of the Colorwheel widget
    - Mode: You can choose from three color selection modes:
      - Hue: Full color scale
      - Saturation: The saturation of the selected color
      - Value: A darker/lighter version
        of the selected color
- Dropdown: The dropdown widget is a list that allows the user to select a value from the list
  - By default, the drop-down list is turned off and displays a single value or predefined text. Once activated (by clicking on the drop-down list), a list will be created from which the user can select an option. When the user selects a new value, the list is deleted again and only the selected value is displayed
  - The drop-down list is added to the default group, if set. In addition, the drop-down list is an editable object that also allows the selection of options with encoder navigation
  - Parameters of the Dropdown widget
    - Options: Options are passed as strings to the drop-down list. You can create a registered element by adding a new row to the list
    - List align: The location of the list
    - Show selected: Displays the selected element
    - Base text: This text is displayed by default
  - Style settings: Set the style of each part
    - Style（Main）
    - Style (Indicator): Indicator
    - Style(List main): list
    - Style(List scrollbar): The list scrollbar
    - Style(List selected): Lists the selected
- Image button: An image button is very similar to a simple "button" object. The only difference is that it displays a user-defined image in each state instead of drawing a rectangle. You can set the left, right, and center image, and the center image will repeat to match the width of the object
  - Parameters of the Image button widget
    - Button state: Here you can choose the state in which you want the image to be displayed:
      - Released:
      - Pressed: Pressed
      - Disabled: disables the situation
      - Checked Released: Check and release
      - Checked Pressed: Check and press
      - Checked Disabled: Check to disable
    - Image released: You can select an image that is in assets
- Keyboard: Keyboard allows you to create a virtual keyboard on your screen
  - Parameters of the Keyboard widget
    - Target text area: The keyboard widget is a special matrix of buttons with predefined keymaps and other features that enable a virtual keyboard that writes text to the text area
    - Mode: The keyboard has the following modes:
      - Text lower: Displays lowercase letters
      - Text upper: Displays uppercase letters
      - Text special displays special characters
      - Number: Displays numbers, +/- symbols, and decimal points
      - User 1-4: User-defined mode
- Roller: Allows you to select an option from the list by scrolling
  - Parameters of the Roller widget
    - Options: Options you can select from the list of Rollers. You can create a registered element by adding a new row to the list
    - Mode: Toggles between normal mode and infinite mode
      - Normal: You can scroll from start to finish
      - Infinite: You can rescroll through the list
    - Selected: Specifies the default item in the list
- Slider: You can drag the knob to set the value. Just like the Bar, the Slider can be vertical or horizontal.
  - Parameters of the Slider widget
    - Min, Max: specify the range (minimum and maximum)
    - Mode: The slider can be one of the following modes
      - Normal: The normal slider as described above
      - Symmertical: Plot the indicator from the zero value to the current value. A negative minimum range and a positive maximum range are required
      - Range: Allows you to set a starting value as well. The start value must always be less than the end value
    - Value: Defines the current value of the slider
    - Value left: Defines the current value of the other knob of the slider
- Spinbox: Contains a number as text that can be gradually increased or decreased
  - Parameters of the Spinbox widget
    - Digit count: The number of digits displayed
    - Separator position: The position of the decimal separator
    - Min, Max: minimum and maximum values
    - Increment position: The number to be incremented
    - Value: Default value
- Switch: The switch widget looks like a small slider that can be used to turn something on and off.
  - Parameters of the Switch widget
    - Anim time: In Style(main), define the animation time between the open and closed states
Visualiser: Visualiser widgets are those elements that are used for display
- Bar: The bar widget has a background and indicators. The width of the indicator is set according to the current value of the bar. If the width of the object is less than its height, you can create a vertical bar. It is possible to set not only the end value of the bar, but also the start value of the bar, which changes the starting position of the indicator
  - Parameters of the Bar widget
    - Min, Max: specify the range (minimum and maximum)
    - Value: Defines the current value
    - Value start: Defines the start value
- Chart: A chart is the basic object for visualizing data points. Line charts, bar charts, and scatter charts are available
  - Parameters of the Chart widget
    - Chart: A chart
      - Chart type: The type of the chart. Lines, rectangles, scatters
      - Number of points: The number of points in each data series
      - Division line count X: The number of horizontal lines
      - Division line count Y: The number of vertical dividing lines
      - Zoom X: Horizontal scaling
      - Zoom Y: Vertical Zoom
    - X axis: X axis
      - Major tick length: The length of the main tick
      - Major tick count: the number of major ticks
      - Minor tick lenght: The length of the minor tick
      - Minor tick count: the number of ticks
      - Label on X axis: Show/hide labels on the axis
      - Font size on axis: The distance between the label and the axis
    - Primary Y axis: Principal and axis
      - Primary Y range min: The minimum value of the axis
      - Primary Y range max: The maximum value of the axis
      - Major tick length: The length of the main tick
      - Major tick count: the number of major ticks
      - Minor tick lenght: The length of the minor tick
      - Minor tick count: the number of ticks
      - Label on Primary Y axis: Show/hide labels on the axis
      - Font size Primary Y axis: The distance of the label from the axis
    - Secondary Y axis: Same as the main Y axis
    - Chart data: Click ADD SERIES to add a new data series to the chart
      - Data: You can set the color and the Y axis to which the series should be attached. Values added to the Data field will be displayed on the sequence
- Spinner: Rotating arc on the ring

Introduction to Styles

Custom styles can be created for each widget. Using styles, you can define what the widget and its elements look like and what effects are being used.
Introducing Arc Style
- Arc color: The color of the arc
- Alpha: Color depth, maximum 255, minimum is 0
- Arc width: The width of the arc
- Arc rounded: If checked, the endpoints of the arc line are rounded
- Arc image: The background image of the arc
Background: The Background Style is the background of the widget. You can create a gradient or round the corners of the background
- Bg radius: The radius used to round the background corners
- Bg Color and alpha: Sets the background color (RGB888) and color depth of the object
- Bg Gradient color: Sets the gradient color of the background
- Bg main stop: Sets the starting point of the gradient background color
- Bg Gradient: Color gradient
- Gradient direction: The direction of the gradient. It can be horizontal or vertical
- Clip corner: Enable this option to clip overflows on rounded corners
Background Image: You can set the image as the background image
- Bg image: An image used as a background image
- Bg image opa: The opacity of the background image
- Bg image Recolor: With the Recolor feature, you can use color on the background image. Set the color depth by changing the alpha parameter
- Bg image tiled: If enabled, the background image will be tiled
Border: You can draw a border around the selected object on the inner line
- Border color: The color of the border
- Border width: The width of the border
- Border side: The direction of the border
Line: Line styles are available for widgets with Line components
- Line Color: The color of the line
- Line Width: The width of the line
- Line rounded: The endpoints of the line will be rounded
Outline: The outline style is similar to the border style, but here, you can draw edges around the selected widget section
- Outline color: The color of the outline
- Outline width: The width of the outline
- Outline pad: Distance from the side of the component (in pixels)
Shadow: With Shadow Style, you can draw a shadow or glow for a selected part of the widget
- Shadow color: The color of the shadow
- Shadow width: The width of the shadow
- Shadow spread: The depth of the shadow
- Shadow OX: Moves shadows on the X axis
- Shadow OY: Move shadows on the Y axis
Blend: You can blend the pixel color of the current widget part with the color of the object behind it
- Blend mode: Choose from four options
  - Normal: the default state
  - Additive: Add pixels
  - Subtractive: Subtract pixels
  - Multiply: Multiply pixels
- Blend opacity: This is where you can set the opacity of the widget section
Paddings: The part of the hierarchy that is below it will move the distance defined in the pixel value fill
- Pad: The range of the fill
Text: Defines the text parameters that can be found on the widget
- Text color: The color of the text
- Letter spacing: The spacing between letters
- Line spacing: Line spacing
- Text align: The direction of the text alignment
- Text decor: You can underline or underline your text
  - None: Normal text
  - Underline: Underlined text
  - Strikethrough: Overlined text
- Text font: The font of the text
Transform: Transform styles allow you to rotate, resize, and set the minimum and maximum size of any widget through the style
- Min and max width: This is where you can set the minimum and maximum width of the widget
- Min and max height: This is where you can set the minimum and maximum height of the widget
- Transform rotation: You can rotate the widget in 0.1 degree increments
- Transform scale: You can scale the widget, where 100% corresponds to a value of 256
- Pivot x and y: Using these values, you can determine the center point of the rotation

Introduction to Themes

Select Theme: You can create global colors and themes for your project. The colors created in the theme panel can be set for any style color parameter. If you change this color, it will change on every widget that sets this color. With the colors provided, you can create multiple themes and switch between them with a single action
- Selected theme: You can select the theme you want to view in the editor from the drop-down menu
- Refresh All Screens: Use this button to manually reload the colors set on the screen
Color of Default Theme: You can create a global color for the default theme. Enter a color name in the Color name field and click the Add Color button to add it to the list. Color names must contain at least 3 characters
- Colors: The colors you create are displayed in the Colors group. If you no longer need the color you created, you can use the trash can icon to remove it
Colors of More Themes: Here, you can create new themes. Enter a theme name in the Theme name field and click the Add Theme button to create a theme. The theme you create always contains the colors created in the default theme, which can be overridden. You can rename a topic in the Rename section below the list

Introduction to Events

Once you add an event, you can create different interactions for the widget, such as changing the screen by pressing a button, playing an animation, etc
Add Event: Add an event
- Event name: The name of the event
- Event Trigger: The interaction initiated by the event, which mainly has the following interactive functions
  - Pressed: The object has been pressed
  - Clicked: Press the object for a short period of time, then release the object. It is not called while scrolling
  - Long pressed: The subject has been pressed down for a long time
  - Long pressed repeat: Called every long_press_repeat_time milliseconds after long_press_time. It is not called while scrolling
  - Focused: The object has been focused
  - Defocused: The object is not focused
  - Value changed: The value of the object has changed
  - Ready: The process has been completed
  - Cancel: The process has been canceled
  - Screen loaded: Loads a screen, called when all animations are complete
  - Screen unloaded: The screen has been unloaded, which is called when all animations are complete
  - Screen load start: Screen load start, triggered when the screen change delay expires
  - Screen unload start: The screen unload is initiated and is triggered immediately when lv_scr_load/lv_scr_load_anim is called
  - Checked: The widget is selected
  - Unchecked: The widget is unchecked
  - Gesture: A gesture is detected on a widget with the selected orientation
  - Short clicked: A short click is detected
  - Key: Send the key to the widget
- Add Action: Once you've added an interaction, you should add the action you want to perform
  - Action name: The name of the action
  - Action type: the type of the action
  - Actions: Those elements of the event that are launched when a trigger occurs
    - Call function: You can add the name of the function that can be referenced by the event. During the export process, this function is created into a ui__events.c or ui_events.py file
    - Change Screen: You can switch between screens through this action
      - Screen to: The screen you want to change to
      - Fade mode: Change the animation during the screen
      - Speed: Change the speed of the screen
      - Delay: Change the delay of the screen
    - Increment Arc: You can modify the value of the Arc Widget
      - Target: The target arc widget
      - Value: The value that increases/decreases
    - Increment Bar: You can modify the value of the Bar Widget
      - Target: The target bar widget
      - Value: The value that increases/decreases
      - Animate: The time of the animation when the value changed
    - Increment Slider: You can modify the value of the Slider Widget
      - Target: The target Slider widget
      - Value: The value that increases/decreases
      - Animate: The time of the animation when the value changed
    - Modify Flag: You can modify the flag state of a widget
      - Object: the target object
      - Flags: The defined flags to change
      - Action: The action to use
        Add: Add a flag
        
        Remove: Deletes the flag
        
        Toggle: Use flags from other states
    - Play Animation: You can play animations created in the Animation panel
      - Animation: The selected animation
      - Target: The target widget
      - Delay: The delay time of the animation
    - Set Opacity: The opacity of the selected widget
      - Target: The target widget
      - Value: The value of the opacity
    - Set Property: Change the property value of the widget
      - Target: the target object
      - Property: The parameter to be changed
      - Value: The value of the property
    - Set text value from arc: Use this action to display the Arc Widget value on the Label Widget
      - Target: A Label widget used to display values
      - Source: The Arc widget value to display
      - Prefix: The text before the value on the Label widget
      - Postfix: Text after the value on the Label widget
    - Set text value from slider: Use this action to display the Slider Widget value on the Label Widget
      - Target: A Label widget used to display values
      - Source: The value of the Slider widget to display
      - Prefix: The text before the value on the Label widget
      - Postfix: Text after the value on the Label widget
    - Set text value when checked: Changes the text of the Label Widget based on the selected or unchecked state of the target object
      - Target: A Label widget used to display text
      - On text: The text is selected
      - Off text: Text that is unchecked
    - Delete screen: Deletes the selected screen
      - Screen: The screen you want to delete
    - Step spinbox: Increment or decrement the value of the selected spinbox
      - Target: The rotation box you want to change
      - Direction: You can choose to increase or decrease the value
    - Switch Theme: From the drop-down menu, you can select the global theme you want to switch to. When this happens, it refreshes the global colors on all widgets on all screens, including those created from code

Troubleshooting

If you find any issues with SquareLine Studio, check out the list below if you already have a solution. If not, open Topic and Forum. We may ask you to send the logs to SquareLine Studio. You can find them here

Windows: C:\Users<your username>\AppData\LocalLow\SquareLine Kft_\SquareLine_Studio\Player.log

Not booting on Windows or high CPU usage
- Try launching SquareLine Studio from the command line SquareLine_Studio.exe -force-opengl

Create example

You just need to download and install SquareLine Studio. You don't need to purchase a license at the beginning, as there is a 30-day trial available. If you have already purchased a license, please read the license manager section to get more information on how to activate your license.
D ouble-click the SquareLine Studio icon, open the application, and after opening, we enter the login interface. After registering a user and completing the login, we can create a project
We take the waveshare ESP32-S3-Touch-LCD-4.3B-BOX as an example
Product link: English link
Create the project as shown below:
First click on ①->②->③
Set parameter ④, the parameters of ESP32-S3-Touch-LCD-4.3B-BOX as shown in the above figure, and then create by clicking on number ⑤.
After creating successfully, you can then design your own UI. Copy the background images and fonts you need to the "assets" directory under the project folder
Based on the introduction of the design tools above, design the interface well yourself, and then produce the code
I directly use the 3D printer example from the squareline studio to create code here. First, click on ①->② to create:
After creating it, you need to adjust the related parameters and set the file path for saving the project and code. Here is my configuration:

①.Open the project settings.
②.Set the color depth to 16 bits.
③.Set the project path, UI storage path, and lvgl header file path (I will place it together with the main function, so it's lvgl.h).
④.Click the "Modify Application" button to complete the configuration.
12. Export UI code:

①.Click the export button
②.Choose to export the UI file
③.Display the completion of the export

ESP-IDF

Please first refer to the wiki configuration for the corresponding product to set up the ESP-IDF development environment
Copy the exported UI code to the lvgl_Porting example. The steps are as follows:

①.Open the waveshare provided ESP-IDF\lvgl Porting\main folder
②.Open the folder containing the UI
③.Select the UI
④ Copy the UI to the main folder

3. Return to lvgl_Porting, open the examples with VS code. At this point, direct compilation is not possible, as it will result in errors. The script files need to be modified. The specific modifications are as follows:
①.Modify the CMakeLists.txt file in the main folder
②.Create a new partitions.csv file

CMakeLists.txt reads as follows:

file(GLOB_RECURSE srcs *.c
                   ui/*.c
                   ui/components/*.c
                   ui/screens/*.c
                   )
set(include_dirs
    .
    UI
    )
idf_component_register( SRCS ${srcs}
                      INCLUDE_DIRS ${include_dirs}
                      )
idf_component_get_property(lvgl_lib lvgl__lvgl COMPONENT_LIB)
target_compile_options(${lvgl_lib} PRIVATE -Wno-format)

partitions.csv reads as follows:

# Name, Type, SubType, Offset, Size, Flags
# Note: if you have increased the bootloader size, make sure to update the offsets to avoid overlap
nvs, data, nvs, 0x9000, 0x6000,
phy_init, data, phy, 0xf000, 0x1000,
factory, app, factory, 0x10000, 8M,

If you are using ESP32 with 8M Flash, you need to change the 8M in the partition table to 6M, such as ESP32-S3-Touch-LCD-7 and ESP32-S3-Touch-LCD-4.3.

In the sdkconfig.defaults of lvgl Porting, add CONFIG_PARTITION_TABLE_CUSTOM=y and save.
In the main.c file of lvgl Porting, add UI-related interfaces after commenting out lv_demo_widgets();, as shown in the following image:
I am using ESP-IDF version 5.3.1, and after saving, I can compile and flash it. Choose the correct port, development board (esp32s3), and then click on to falsh it. Editing for the first time might take a while, so please wait patiently.
After successful falshing, VS Code will display the following phenomenon:
The screen will light up:
The default refresh rate is relatively low, you can try increasing the bandwidth of S3's FLASH and PSRAM to increase the refresh rate<>
If you find the response is slow when switching pages, you can find the controls to switch the screen and modify the switching speed, for example:

Click ①->②->③, and modify 200 to 10 to improve the page switching speed

Arduino ESP32

Please refer to the wiki information of Waveshare's corresponding product to configure the Arduino development environment
To use Arduino to port squareline studio, you need to modify the Project Settings, as shown below:

After the modification is successful, create a project, because Arduino is different from ESP-IDF, you can't just export the UI file:

Enter the directory of the project, there will be three files, copy the ui in the libraries to the libraries of the Arduino IDE, if you are not clear, you can click this link to view:

After the copy is successful, go to the Arduino-ESP32\lvgl_Porting folder provided by waveshare, and add partitions.csv files, the contents are as follows:

# Name, Type, SubType, Offset, Size, Flags
# Note: if you have increased the bootloader size, make sure to update the offsets to avoid overlap
nvs, data, nvs, 0x9000, 0x6000,
phy_init, data, phy, 0xf000, 0x1000,
factory, app, factory, 0x10000, 8M,

Use the Arduino IDE to open the Arduino-ESP32\lvgl_Porting\lvgl_Porting.ino file provided by waveshare, and add the following code to the lvgl_Porting.ino after opening: