Espressif’s software engineer Vilem Zavodny has written a brief guide which helps users of Espressif microcontrollers to create User Interfaces (UIs), by using the free-for-personal-use SquareLine Studio for great results quickly and easily.

As Vilem himself puts it: “If you’ve ever tried to make some fancy UI without any graphic library, you know how hard it is. Fortunately, there are lot of graphical libraries for making fancy UI on our screens. One of the often-used ones is LVGL, which is supported on ESP microcontrollers. Previously, when we wanted to use a graphical library like LVGL, we had to know the API functions and how to combine them in order to create a fancy UI. This isn’t the case anymore! There is a tool called SquareLine Studio, which can help in making better UIs without any other knowledge of the LVGL API.

As technical writer Gareth Halfacree then explains: “The idea behind SquareLine studio is simple: what would normally be the separate processes of designing a user interface’s assets and writing the code to have them drawn to the screen and made functional is now combined in an accessible drag-and-drop interface. It is not dedicated to embedded platforms —the tool can also be used to make a graphical user interface for desktop applications— but it does a great job with compatible microcontroller platforms.”

Example of widgets on screen

Espressif has prepared two microcontroller boards in SquareLine Studio for users —ESP-BOX and ESP-WROVER-KIT. You can select the board of your preference after launching the application in the Create tab and then in the Espressif tab. Each board has a pre-filled size of screen, rotation and color depth, all of which correspond with the ESP-BSP [Board Support Package] which is used in the generated code.

Vilem believes this a “really helpful tool for making fancy user interfaces on your displays. It is also really easy to use after the board templates have been added. Unfortunately, there are still some minor things missing, for example widgets, such as a tab view or copy style to another widget. Compiling and flashing Espressif’s microcontrollers would be useful too.”

Vilem's full guide can be found on the ESP Journal, Espressif's development blog, while SquareLine Studio is available on the relevant website. This tool is free for personal use only, with a few other limitations, too. The free use is limited to five screens and 50 widgets per project. Other pricing plans can be found on the official SquareLine website.