Graphics Libraries in UI Design
The Role of SquareLine Studio in Simplifying UI Design
Demo Project: Home Assistant X Indicator
1. Create a New Project
2. Drag Widgets
3. Export Projection and UI Code
Build & Flash
Showcase

Published October 27, 2023 © Apache-2.0

Low-Code UI Design for SenseCAP Indicator with SquareLine

Design SenseCAP Indicator UIs effortlessly, no code needed. With SqureLine Studio, you can design a UI quickly and animation.

BeginnerFull instructions provided30 minutes876

Low-Code UI Design for SenseCAP Indicator with SquareLine

Things used in this project

Hardware components

Seeed Studio SenseCAP Indicator D1

Software apps and online services

SqureLine Studio

SquareLine Studio is a visual drag-and-drop UI editor to create beautiful Graphical User Interfaces quickly and easily for embedded and desktop applications.

Story

In today's digital age, people are naturally attracted to visual displays, whether it's data visualization or algorithm visualization. The appeal of light and visuals helps simplify complex information, making it easier to understand. The world thrives on making the complex simple and visually engaging. This is why visual displays are so important in embedded systems. They help simplify complex information and make it easier to understand. However, the process of creating these visual displays can be challenging, especially for developers without a graphic design background. This is where SquareLine Studio comes in. It is a visual editor that simplifies the process of creating UIs with LVGL, making it more accessible for developers of all skill levels, especially those without a graphic design background.

While backend programming might be a breeze for many embedded developers, due to their familiarity with the logic and algorithms involved, the scenario changes drastically when the spotlight turns to front-end UI design. This process often becomes tedious and overwhelming, primarily because it involves a different skill set that includes graphic design, user experience understanding, and knowledge of front-end programming languages.

Front-end UI design in embedded systems is not just about making the interface look good. It's about creating an intuitive, user-friendly experience that seamlessly guides the user through the system's functionality. This involves understanding the user's needs and expectations, and translating them into a design that is both aesthetically pleasing and functional. In big company, this is precisely why there are dedicated teams for UI/UX design. However, in the maker community, this is often not the case. Developers are expected to wear many hats, including UI/UX design, which can be a daunting task for those without a graphic design background.

DALL·E 3

Moreover, the constraints of embedded systems, such as limited processing power and memory, add another layer of complexity to the design process. Developers must create a design that is not only user-friendly but also efficient and responsive, without overtaxing the system's resources.

So that's why we need graphics libraries, which can help developers create stunning UIs with minimal effort.

Graphics Libraries in UI Design

So that's why we need graphics libraries, which can help developers create stunning UIs with minimal effort.

If you're familiar with embedded graphics libraries, you may already know about u8g2, a popular choice for basic display graphics. U8g2 is optimized for monochrome graphics and supports a diverse array of displays, including OLED, LCD, and e-ink. Its compatibility with a range of microcontrollers, such as Arduino, ESP8266, and ESP32, makes it a flexible tool for simple graphical tasks. Excelling in environments with limited resources, u8g2 offers an assortment of fonts and basic graphical functions. However, its capabilities are primarily confined to simpler UI elements and monochromatic designs, lacking the necessary features for more complex, color-intensive, and interactive user interfaces.

In contrast, LVGL stands out as a comprehensive solution in the open-source graphics library arena, especially for embedded systems requiring more sophisticated and interactive UIs. Advancing beyond the monochrome and basic graphical scope of u8g2, LVGL introduces color support, animations, and a wide selection of widgets, all essential for crafting advanced UI designs. Its superior features, such as touch screen compatibility, an extensive range of widgets, and efficient handling of events and callbacks, empower developers to create user interfaces that are not only visually striking but also dynamic and interactive. This makes LVGL particularly well-suited for applications where the complexity and responsiveness of the UI are crucial. With LVGL, developers can achieve a higher level of user engagement and provide a richer user experience, making it an ideal choice for projects that demand more than just basic display capabilities.

The Role of SquareLine Studio in Simplifying UI Design

However, the challenges remain. Working directly with LVGL can lead to extended development cycles. The process of using LVGL typically involves deep engagement with detailed documentation, requiring a thorough understanding of its intricacies, often without the aid of visual tools. This aspect can be particularly challenging for those who lack experience in graphic design. The iterative process of coding, testing, and refining user interfaces without visual aids tends to be not only time-consuming but also less efficient. This underscores the necessity for tools or platforms that can simplify and expedite this process, particularly for developers with varying levels of expertise, including those in the maker community.

DALL·E 3

Enter SquareLine Studio, a visual editor designed to streamline the UI creation process within LVGL. SquareLine Studio significantly reduces the complexity of developing user interfaces by providing a more intuitive, visual approach to design. This tool is especially beneficial for developers who may not have a strong background in graphic design, as it simplifies the process and makes it more approachable. By offering a user-friendly interface and visual guidance, SquareLine Studio opens up the possibilities of LVGL to a broader range of developers, enhancing productivity and fostering innovation in UI design.

From squareline.io

As of November 20, 2023, the latest SquareLine Studio release is version 1.3.3. Although it simplifies UI design with visual tools, it doesn't cover all components of LVGL or complex logic needs. Thus, manual coding is still required in such cases, which is why SquareLine Studio is considered a 'Low Code' tool - it reduces but doesn't eliminate the need for traditional coding.

Demo Project: Home Assistant X Indicator

In this Blog, I will try to replicate the Home Assistant Demo UI(One Screen) with SquareLine Studio.

1. Create a New Project

To start, we create a new project. This initial step is crucial for setting the groundwork for our UI design.

Enter the project name and select the folder to save the project. Then, click Create to proceed.

You would see the following screen(the theme has been set dark):

2. Drag Widgets

As the picture above shows, the UI of the Home Assistant demo consists of a title header, four panels(or buttons) and icons and labels on them.

Because one panle is very similar to another, we can create one panel first, and then copy it three times to save time.

One panle with one image and tree labels to display title, data and unit.

Name the first panle as Temperature, and set the text to Temperature as well. Then, set the Align to TOP LEFT to fit the layout.

Let's change the style of the panel, to make it more like the one in the demo. We can change the background color of panel to #282828 and the border radius to 12 to have a more rounded look.

For quickly adjusting data, I also create a data panel for them, and set the each Alpha to 0, which means they are invisible, transparent.

And I'll start to change the font and style of them. For convenience, I'll change the text corlor of data panel to quickly function on all of them.

Done! Then, we can copy the panle three times, and change the name and text of the panle to TVOC, Humidity and CO2 respectively.

Change the details as you wish:

And add the last title:

3. Export Projection and UI Code

If you didn't change the If you have no project before, you can just export a template project to swift the process (If you have, all you need is to export ui files to overwirte the ui folder of the project).

Build & Flash

Reference: Update and Flash Firmware
My ESP-IDF Version is 5.1.1

Navigate to the folder, type the following command (Active the ESP-IDF environment in advance)

idf.py build flash

If you want to see the serial log, add a opt monitor.

Showcase

SqureLine Studio helps us to create the UI quickly, and we can preview the UI in real time. which is very convenient.

The most important is that we can learn LVGL while using.

// This file was generated by SquareLine Studio
// SquareLine Studio version: SquareLine Studio 1.3.3
// LVGL version: 8.3.3
// Project name: Home Assistant

#ifndef _HOME_ASSISTANT_UI_H
#define _HOME_ASSISTANT_UI_H

#ifdef __cplusplus
extern "C" {
#endif

    #include "lvgl/lvgl.h"

#include "ui_helpers.h"
#include "ui_events.h"
// SCREEN: ui_Screen_HA_Data
void ui_Screen_HA_Data_screen_init(void);
extern lv_obj_t *ui_Screen_HA_Data;
extern lv_obj_t *ui_Temperature;
extern lv_obj_t *ui_ImageIcon1;
extern lv_obj_t *ui_PanelData;
extern lv_obj_t *ui_LabelData1;
extern lv_obj_t *ui_LabelUnit1;
extern lv_obj_t *ui_LabelTitle1;
extern lv_obj_t *ui_Humidity;   
extern lv_obj_t *ui_ImageIcon2;
extern lv_obj_t *ui_PanelData1;
extern lv_obj_t *ui_LabelData2;
extern lv_obj_t *ui_LabelUnit2;
extern lv_obj_t *ui_LabelTitle2;
extern lv_obj_t *ui_TVOC;
extern lv_obj_t *ui_ImageIcon3;
extern lv_obj_t *ui_PanelData2;
extern lv_obj_t *ui_LabelData3;
extern lv_obj_t *ui_LabelUnit3;
extern lv_obj_t *ui_LabelTitle3;
extern lv_obj_t *ui_CO2;
extern lv_obj_t *ui_ImageIcon4;
extern lv_obj_t *ui_PanelData3;
extern lv_obj_t *ui_LabelData4;
extern lv_obj_t *ui_LabelUnit4;
extern lv_obj_t *ui_LabelTitle4;
extern lv_obj_t *ui_Label4;
extern lv_obj_t *ui____initial_actions0;

LV_IMG_DECLARE( ui_img_ic_temp_png);   // assets\ic_temp.png
LV_IMG_DECLARE( ui_img_ic_hum_png);   // assets\ic_hum.png
LV_IMG_DECLARE( ui_img_ic_tvoc_png);   // assets\ic_tVOC.png
LV_IMG_DECLARE( ui_img_ic_co2_png);   // assets\ic_co2.png



void ui_init(void);

#ifdef __cplusplus
} /*extern "C"*/
#endif

#endif

Credits

Spencer

4 projects • 3 followers

Embrace life.

Low-Code UI Design for SenseCAP Indicator with SquareLine