Skip to main content
Version: ver. 1.5.0

Inspector Panel

In the Inspector Panel, there are the parameters of the selected widgets. You can add styles and events to them.

Widget Properties​

All widgets have obligatory parameters, such as name, transformation, flags and states. Besides, there may be special settings, as well.

Name​

You should name the widget.

There cannot be a number, underscore or a special character at the beginning of the name. Having exported the code, you can find the widget by that name.

There is the "Don't export" checkbox on the right side of widget Group name. When enabled, the widget won't be exported and can be used as temporary or dummy object. Non-exported widgets appear dimmed in the hierarchy panel.

Custom variable alias​

Having consistent variable-names for screens and widgets in an exported SquareLine Studio code, which reflects the semantics and logic of a design, is an essential ingredient for efficient frontend-logic and API programming.

The GUI-object names given by either the designers and SquareLine Studio itself are usually oriented towards aspects of the design and layout, but these details should be hidden away from the programmer, and only the main aspects should be kept in the naming:

  • The type of an object (screen / button / label / roller / etc.), so it is easily seen what exact LVGL functions to use on it in the code.
  • If it's a screen, its name, or if it's a widget, the screen (and maybe a parent-widget) where it can be found. With a certain amount of complexity it helps a lot to find a widget.
  • A meaningful name for the object that ideally reflects the role of it throughout the whole system. This helps the programmers to see the connection between the SquareLine Studio design and the backend functionalities.

Introduction​

SquareLine Studio already does its best to create automatically assembled names from the designer's intent ('Name' field in the inspector panel) and the design-layout, if a naming-scheme feature is selected in Project Settings (by the dropdown-menu 'Object naming'). For example, by selecting [Widget__Screen]__Name format we'll see names like SpecialButton__Home__SpecialButton1__ButtonLabel, where 'SecialButton' is a component, 'SpecialButton1' is its auto-named instance.

Due to the nature of the desgin with component and layout oriented hierarchies it isn't always obvious for the designers and SquareLine Studio what is a good name for the programmers, and the name above contains design-related details unnecessary from coding point of view. It would look more straightforward and meaningful as something like ButtonLabel__Home__Start or Button__Home__Start, if the role of the button is starting something, we don't care if it's a special-looking component-based button in the design.

On the other hand it would clutter the exported output's 'ui' namespace if every children of every component would be exported by default in ui.h.

Therefore a new feature was added to the Inspector panel right below the 'Name' field: an additional text-entry field called 'Custom variable alias' where the programmer can semi-automatically create a totally custom name tailored for programming in mind.

For widgets and children of components, where this field is used, it will generate a direct object-pointer in ui.h instead of needing to resort to manually programmed bindings for the exported code.

Usage​

  • By default the 'Custom variable alias' field shows the roundabout assembled name that will be exported by default from SquareLine Studio for the widget.

  • Pressing the 'FILL' button on the right-hand side once tries to create a name according the naming-scheme selected in Project-settings but allowing to rewrite the last white-coloured part of the name to a more meaningful/exact one.

  • If the automatically generated prefixing (coloured grey) is not for the programmer's liking, pressing 'FILL' button again enables modifying the whole name, like the correction of widget-type to more general (not component-name based) and removing component-instance name if it's not needed.

  • (Pressing 'FILL' button more times toggles between these two entry modes.)

  • Deleting the white-coloured custom name deletes the creation of a custom variable name.

    The very first 'uic_' prefix always remaining grey-coloured, is the 'namespace' prefix common for all objects, and cannot be modified here. It can be modified in Projec Settings 'Custom variable prefix' text-entry field. The 'uic' default text there is to tell custom names from the others in the export and possibly avoid name-clashes, but 'ui' can still be used there as well as programmers usually don't need to know which names are coming from automatic or manual naming from SquareLine Studio.

    In the exported code the custom name declarations are exported into 'ui.h' below the corresponding screen's default GUI-object declarations begginning with comment 'CUSTOM VARIABLES'.

Layout​

You can use a layout to automatically arrange the children of a widget. If the layout is enabled the children's X and Y value can't be adjusted manually, unless the IGNORE_LAYOUT or the FLOATING flag is enabled on the children.

  • Layout type - Select he layout you want to use
  • Flex flow - Row or column layout.
  • Wrap - Enable/Disable whether to start a new row/column if the children don't fit.
  • Reverse - Whter the start with first or last children.
  • Main dir. align - Alignment in the direction of the flow
  • Cross dir. align - Alignment in the direction perpendicular to the flow
  • Track align - The alignment of the tracks

The Pad Row and Column values sets the distance between the children in the respective directions.

Transform​

You should define the position and size of every widget and its alignment to its own parent.

  • X, Y - The X and Y position of the widget.

    This value can be added in pixels or in percents. Percent value will refer to the size of the parent widget.

  • Width, Height - The width and height of the widget.

    This value can be added in pixels, percents, or the content can define the parameters. Percent value will refer to the size of the parent widget, the content will copy the maximum size of the children widgets.

    If the parent has Flex layout the children's width/height can be set in fr unit as well. It tells how much space to take proportionally from the free space in a track.

  • Align - The alignment of the widget to the parent.

Flags​

Flags are different attributes, connected to the widgets, which can be enabled or disabled.

Main Flags​

  • Hidden - Make the object hidden. (Like it wasn't there at all.)
  • Clickable - Make the object clickable by input devices
  • Click focusable - Add focused state to the object when clicked
  • Checkable - Toggle checked state when the object is clicked
  • Snappable - If scroll snap is enabled on the parent it can snap to this object
  • Press lock - Keep the object pressed even if the press slid from the object
  • Event bubble - Propagate the events to the parent too
  • Gesture bubble - Propagate the events to the parent too
  • Adv hittest - Allow performing more accurate hit (click) test. E.g. accounting for rounded corners
  • Ignore layout - Make the object positionable by the layouts
  • Floating - Do not scroll the object when the parent scrolls and ignore layout
  • Scroll with arrow - Allow scrolling the focused object with arrow keys
  • Overflow visibile - Do not clip the children's content to the parent's boundary

Scroll Flags​

  • Scrollable - Make the object scrollable
  • Scroll elastic - Allow scrolling inside but with slower speed
  • Scroll momentum - Make the object scroll further when "thrown"
  • Scroll one - Allow scrolling only one snappable children
  • Scroll chain - Allow propagating the scroll to a parent
  • Scroll on focus - Automatically scroll object to make it visible when focused

Scroll Settings​

  • Scroll direction - Scrollbars are displayed according to a configured
  • Scrollbar mode - Scrollbars are displayed according to a configured mode. The following modes exist:
    • Off - Never show the scrollbars
    • On - Always show the scrollbars
    • Active - Show scroll bars while a object is being scrolled
    • Auto - Show scroll bars when the content is large enough to be scrolled

States​

The object can be in a combination of the following states:

  • Clickable - Toggled or checked state
  • Disable - Disabled state
  • Focusable - Focused via keypad or encoder or clicked via touchpad/mouse
  • Pressed - Being pressed
  • User 1 - Unique
  • User 2 - Unique
  • User 3 - Unique
  • User 4 - Unique

Style settings​

Styles can be used to add effects to widgets or their parts. You can add a custom background color, border, shadow, etc. In Style Settings, you can add or modify the values of these parameters.

State​

You can create a custom style to each state.

Style Properties​

Style Properties are the parameters to be set for the styles.

Styles - More information on styles in the Styles section

Event Properties​

Event - More information on events in the Event section