Skip to main content

How to Create your own UI


LvGL is an open-source graphics library providing everything you need to create an embedded GUI with easy-to-use graphical elements, beautiful visual effects, and a low memory footprint.

Example Code

We provide the demo code of the UI interface, and lvGL example file are many sample codes for drawing UI for reference, you can modify the sample code or customize your own UI.

#include "freertos/FreeRTOS.h"
#include "freertos/task.h"
#include "esp_log.h"
#include "bsp_board.h"
#include "lv_demos.h"
#include "lv_port.h"
#include "ui_demo1.h"
#include "ui_demo2.h"

#define LOG_MEM_INFO 1

static const char *TAG = "app_main";

void app_main(void)
ESP_LOGI("TAG", "system start");


ESP_LOGI(TAG, "Avoid lcd tearing effect");
ESP_LOGI(TAG, "LVGL full-refresh");
ESP_LOGI(TAG, "LVGL direct-mode");

lv_demo_widgets(); /* A widgets example. This is what you get out of the box */
//lv_demo_music(); /* A modern, smartphone-like music player demo. */
//lv_demo_stress(); /* A stress test for LVGL. */
//lv_demo_benchmark(); /* A demo to measure the performance of LVGL or to compare different settings. */
// ui_demo1_init(); /* A demo to show virtual printer (must be 800*480)*/
//ui_demo2_init(); /* A demo to show virtual tuner
/* (must be 480*800, set LCD_EVB_SCREEN_ROTATION_90 in menuconfig)*/

static char buffer[128]; /* Make sure buffer is enough for `sprintf` */
while (1) {
sprintf(buffer, " Biggest / Free / Total\n"
"\t DRAM : [%8d / %8d / %8d]\n"
"\t PSRAM : [%8d / %8d / %8d]",
ESP_LOGI("MEM", "%s", buffer);


Squareline Studio(Optional)

Squareline Studio is a multi-platform design tool that uses a visual interface to help designers and developers work quickly and efficiently. SquareLine Studio makes it possible by creating the perfect code for your projects. Whether you use C or Python, you can export code for both.

If you need to create a more complex or advanced UI interface, it‘s recommended that you use Squareline Studio for development.

Squareline Studio Installation

We provide a demo project for the UI page:

SenseCAP Indicator/squareline_project

Replace with your own UI

  • Step 1:You can make changes in our demo project, or create a new UI page

Open the demo project and make changes:

Create a new project:

Note:The resolution of the screen is 480*480.

  • Step 2:Export your finished page as UI files
  • Step 3:Remove all the original UI files and copy your onw UI files to this direct.
  • Step 4:Build and Flash the project

Run the following command to build, flash and monitor the project: -p PORT build flash monitor

Tech Support

Need help with your SenseCAP Indicator? We're here to assist you!

Loading Comments...