Espressif's Vilem Zavodny Demos Easy "Fancy User Interfaces" for ESP Projects with SquareLine Studio

Espressif's Vilem Zavodny has written a brief guide on creating a "fancy user interface" for your next ESP-family project — using the free-for-personal-use SquareLine Studio to get great results quickly and easily.

"If you tried to make some fancy UI without any graphic library, you know, how hard it is," Zavodny admits. "Fortunately, there are lot of graphical libraries for making fancy UI on our screens. One of the often used is LVGL [Light and Versatile Graphics Library], which is supported on ESP microcontrollers. Usually, when we wanted to use graphical library like LVGL, we had to know API functions and how to combine it to reach fancy UI. It isn’t true any more! There is a tool called SquareLine Studio, which can help making better and fancy UI without any other knowledge of the LVGL API [Application Programming Interface]."

The idea behind SquareLine studio is simple: take 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 and combine them in an accessible drag-and-drop interface. It's not dedicated to embedded platforms — the tool can also be used to make graphical user interface for desktop applications — but does a great job with compatible microcontroller platforms.

"Espressif has prepared two [microcontroller] boards in SquareLine Studio for you: ESP-BOX and ESP-WROVER-KIT," Zavodny explains. "You can select the board after [you] launch the application in [the] Create tab and then in [the] Espressif tab. Each board has pre-filled size of screen, rotation and color depth, which is corresponding with ESP-BSP [Board Support Package] which is used in [the] generated code."

"In my opinion," Zavodny continues, "[it's a] really helpful tool for making fancy user interfaces on your displays and after the board templates [have been] added it is really easy to use. Unfortunately, there is still missing some minor things, which can make this tool better. For example, I am missing some widgets like tab view or copy style to another widget. [To] compile and flash the Espressif’s microcontrollers would be nice too."

Zavodny's full guide can be found on the ESP Journal, Espressif's development blog; SquareLine Studio is available from the official website, with a free usage tier available for personal use with a five-screen and 50-widget per project limit and paid plans starting at $16 per developer per month.