프로그램 사용/lvgl2026. 2. 3. 23:24

squareline studio / 화면전환

보이는 하나의 디자인을 screen 으로 부르고

스크린간 전환은 

trigger - clicked

action - change screen 으로 하여 구현이 된다.

그래서 메인화면에서 톱니바퀴를 누르면 설정으로 fade on 하여 가게 되는데

 

새로운 이벤트 목록은 아래와 같다.

일단 위의 경우 사용된건 change screen 인데

그 외에는 set opacity나 play animation 정도가 눈에 띈다.

 

fade on 대신 move left / move right 하고

duration 100 msec에서 1000 msec 으로 해주면 좀 슬라이드 되는 느낌이 들게 움직인다.

아래는 move left 전환효과를 순간 캡쳐 한 것.

 

 

---

스크린 변경이 아니라 일부 그룹에 대한 show / hide로 구현된 경우도 있는데

우측 하단의 3개를 누르면 속도는 뜨면서 내용이 변한다.

 

 

아무튼 설정을 보면

action - play 에서 group driving을 딜레이 없이 animation on 을 한다는데,

initial action 에 on으로 정의 된 건 없어서 모르겠다. on/off 의 on 같기도 한데?

 

그리고 BTN BG1 ADD / BTN BG2/3 REMOVE로

선택되었다는 밝은 주황색 배경을 on/off 해준다.

 

 

 

 

 

저작자표시 (새창열림)

'프로그램 사용 > lvgl' 카테고리의 다른 글

lvgl simulator  (0) 2026.02.10
squareline studio / 애니메이션  (0) 2026.02.03
nxp gui guider for lvgl  (0) 2026.02.03
lvgl perf mon  (0) 2026.02.03
ebike demo ui 구조 분석 - 속도 슬라이더 및 텍스트  (0) 2026.02.02
Posted by 구차니
프로그램 사용/lvgl2026. 2. 3. 15:02

nxp gui guider for lvgl

lvgl 다국어 지원 검색하다가 걸려 나온 nxp 툴.

[링크 : https://www.nxp.com/design/design-center/software/development-software/gui-guider:GUI-GUIDER]

 

먼가.. 묘하게 squareline studio 느낌이 난다?

[링크 : https://www.nxp.com/docs/en/user-guide/GUI_Guider_User_Manual.pdf]

저작자표시 (새창열림)

'프로그램 사용 > lvgl' 카테고리의 다른 글

squareline studio / 애니메이션  (0) 2026.02.03
squareline studio / 화면전환  (0) 2026.02.03
lvgl perf mon  (0) 2026.02.03
ebike demo ui 구조 분석 - 속도 슬라이더 및 텍스트  (0) 2026.02.02
figma lvgl plugin  (0) 2026.02.02
Posted by 구차니
프로그램 사용/lvgl2026. 2. 3. 14:24

lvgl perf mon

매번 뜨길래 어떻게 끄나 찾아봄

 

In your lv_conf.h set this:

#define LV_USE_PERF_MONITOR 0

[링크 : https://forum.lvgl.io/t/remove-fps-and-cpu-display/11042]

 

lv_conf.h를 찾아보니 아래와 같이 선언되어있다.

/*------------------
 * STATUS MONITORING
 *------------------*/

/*1: Show CPU usage and FPS count
 * Requires `LV_USE_SYSMON = 1`*/
#define LV_USE_PERF_MONITOR 1
#if LV_USE_PERF_MONITOR
    #define LV_USE_PERF_MONITOR_POS LV_ALIGN_BOTTOM_RIGHT

    /*0: Displays performance data on the screen, 1: Prints performance data using log.*/
    #define LV_USE_PERF_MONITOR_LOG_MODE 0
#endif

/*1: Show the used memory and the memory fragmentation
 * Requires `LV_USE_BUILTIN_MALLOC = 1`
 * Requires `LV_USE_SYSMON = 1`*/
#define LV_USE_MEM_MONITOR 1
#if LV_USE_MEM_MONITOR
    #define LV_USE_MEM_MONITOR_POS LV_ALIGN_BOTTOM_LEFT
#endif
저작자표시 (새창열림)

'프로그램 사용 > lvgl' 카테고리의 다른 글

squareline studio / 화면전환  (0) 2026.02.03
nxp gui guider for lvgl  (0) 2026.02.03
ebike demo ui 구조 분석 - 속도 슬라이더 및 텍스트  (0) 2026.02.02
figma lvgl plugin  (0) 2026.02.02
eez studio  (0) 2026.02.02
Posted by 구차니
프로그램 사용/lvgl2026. 2. 2. 22:37

ebike demo ui 구조 분석 - 속도 슬라이더 및 텍스트

BG1 빼고 다 끔

 

slider speed. 가장 궁금했던 녀석인데..

 

Name에는 공백은 언더바로 치환되어 변수로 설정된다.

width / height 값은 이미지의 원래 크기인데 X와Y는 왜 마이너스 값일까?

 

scroll의 scroll direction은 all / vertical / horizontal 이 있으나 방향에 영향을 미치지 못한다.

value 는 min ~ max 사이 값으로 현재 값이다. max를 넘는 값이 들어갈수도 있으나 max로 표현된다.

 

 

스타일 셋팅 이게 표현의 핵심인듯.

 

슬라이더를 보면 main / indicator / knob로 나뉘는데

main의 배경 투명도를 켜고 꺼보면 먼가 차이가 난다.

 

이미지 자체는 투명인데 배경을 설정하지 않으면 흰색이 그냥 표시되는건가?

 

indicator는 슬라이더 바의 표시될 영역이라고 하면 되려나

32라면 왼쪽으로 부터 32 만큼 찬 것을 표시해주고 혹은 하단에서 부터 1/3이 차는걸 표현해주는 녀석이다.

 

main과는 다르게 indicator의 경우 표시되는 영역인 1/3 하단 영역에 대한 투명도가 사라진다.

 

knob는 손잡이 인데, 슬라이더의 중앙이라고 해야하나? 말 그대로 손잡이를 그려주는데

이 디자인에서는 노브가 없는 디자인이기에 투명하게 설정해서 손잡이를 지운다.

 

 

심심해서 slider 추가하고 가로 세로 비율을 다르게 했더니 비율에 따라 슬라이더 방향이 바뀐다. 이게 머야 -_-

 

35에서 50 으로 하니 옆으로 찬다.

 

이벤트는 연계되는 상황에 대해서 어떻게 할지인데

trigger 가 value_changed 이고

어떻게 보면 슬라이더 값이 바뀔때 event2로 speed_number_2와

 

speed_number_1의 값을 바꾸도록 한다.

 

이벤트는 제법 여러가지가 있는데

key_right 부터 short / long click 등 엄청 여러가지 이벤트가 존재한다.

 

위에서 이벤트로 걸린건 아래의 숫자 속도인데

글씨를 두번 써서 그림자 효과라.. 그럼 포트에서 자체적으로 그림자를 지원안하는건가?

 

저작자표시 (새창열림)

'프로그램 사용 > lvgl' 카테고리의 다른 글

nxp gui guider for lvgl  (0) 2026.02.03
lvgl perf mon  (0) 2026.02.03
figma lvgl plugin  (0) 2026.02.02
eez studio  (0) 2026.02.02
esp32 lvgl benchmark  (0) 2026.02.02
Posted by 구차니
프로그램 사용/lvgl2026. 2. 2. 19:50

figma lvgl plugin

피그마를 쓰는법 익혀야 하나.. 고민이네

일단은~ lvgl pro용 외에

[링크 : https://www.figma.com/ko-kr/community/plugin/1362005814860504095/figma-to-lvgl]

 

squreline 용 플러그인도 발견

[링크 : https://www.figma.com/ko-kr/community/plugin/1578047295955007191/figma-to-squareline-vision]

 

 

저작자표시 (새창열림)

'프로그램 사용 > lvgl' 카테고리의 다른 글

lvgl perf mon  (0) 2026.02.03
ebike demo ui 구조 분석 - 속도 슬라이더 및 텍스트  (0) 2026.02.02
eez studio  (0) 2026.02.02
esp32 lvgl benchmark  (0) 2026.02.02
esp32 lvgl 소스 코드 따라가기  (0) 2026.01.28
Posted by 구차니
프로그램 사용/lvgl2026. 2. 2. 19:50

eez studio

figma용 lvgl 플러그인 찾다가 발견한 다른 오픈소스 프로그램

[링크 : https://www.envox.eu/studio/studio-introduction/]

[링크 : https://m.blog.naver.com/alfee0/224110418959]

 

그나저나 squareline studio 와는 결별하고 따로 만들었다는데

댓글들 보고 있노라니 lvgl8.x 까지 squareline studio에서 지원하고 9.x대는 안했다 이런 이야기도 있고

불안정하다 별별 이야기가 있는데.. 어찌되려나?

[링크 : https://forum.lvgl.io/t/lvgl-ends-its-collaboration-with-squareline-studio/14638/13?page=4]

저작자표시 (새창열림)

'프로그램 사용 > lvgl' 카테고리의 다른 글

ebike demo ui 구조 분석 - 속도 슬라이더 및 텍스트  (0) 2026.02.02
figma lvgl plugin  (0) 2026.02.02
esp32 lvgl benchmark  (0) 2026.02.02
esp32 lvgl 소스 코드 따라가기  (0) 2026.01.28
squartline studio 설치  (0) 2026.01.28
Posted by 구차니
프로그램 사용/lvgl2026. 2. 2. 17:30

esp32 lvgl benchmark

새롭게 빌드한걸 어떻게 넣어야 하나 이런거 고민하고 있었는데

그전에 소스를 보다보니 benchmark가 있어서 실행해보려고 꼼지락 꼼지락.

 

5_35_LVGL_Full_Test-S024/components/lv_examples/lv_examples/lv_examples.h

한줄 추가

#define LV_USE_DEMO_BENCHMARK   1

 

5_35_LVGL_Full_Test-S024/main/main.c

두 줄 추가, 두 줄 삭제

// #include "lv_examples/src/lv_demo_widgets/lv_demo_widgets.h"
#include "lv_examples/src/lv_demo_benchmark/lv_demo_benchmark.h"



// lv_demo_widgets();
lv_demo_benchmark();

    while (1) {
vTaskDelay(1);
// 尝试锁定信号量，如果成功，请调用lvgl的东西
if (xSemaphoreTake(xGuiSemaphore, (TickType_t)10) == pdTRUE) {
            lv_task_handler();
            xSemaphoreGive(xGuiSemaphore);  // 释放信号量
        }
    }
    vTaskDelete(NULL);      // 删除任务

 

위에는 50 fps 라는데 아래는 33fps가 나온다. 멀 믿어야 하나 -_-?

저작자표시 (새창열림)

'프로그램 사용 > lvgl' 카테고리의 다른 글

figma lvgl plugin  (0) 2026.02.02
eez studio  (0) 2026.02.02
esp32 lvgl 소스 코드 따라가기  (0) 2026.01.28
squartline studio 설치  (0) 2026.01.28
lvgl pro + figma vs square line studio  (0) 2026.01.28
Posted by 구차니
프로그램 사용/lvgl2026. 1. 28. 23:00

esp32 lvgl 소스 코드 따라가기

저기를 새로 만든걸로 갈아치우면 되려나?

 

main.c
#include "lv_examples/src/lv_demo_widgets/lv_demo_widgets.h"

void app_main() {
printf("\r\nAPP %s is start!~\r\n", TAG);
vTaskDelay(1000 / portTICK_PERIOD_MS);
xTaskCreatePinnedToCore(guiTask, "gui", 4096*2, NULL, 0, NULL, 1);
}

void guiTask(void *pvParameter) {
lv_demo_widgets();

    while (1) {
vTaskDelay(1);
if (xSemaphoreTake(xGuiSemaphore, (TickType_t)10) == pdTRUE) {
            lv_task_handler();
            xSemaphoreGive(xGuiSemaphore);
        }
    }
    vTaskDelete(NULL);
}

 

lv_demo_widgets.h
void lv_demo_widgets(void);

 

lv_demo_widgets.c
void lv_demo_widgets(void){
    tv = lv_tabview_create(lv_scr_act(), NULL);

    t1 = lv_tabview_add_tab(tv, "Controls");
    t2 = lv_tabview_add_tab(tv, "Visuals");
    t3 = lv_tabview_add_tab(tv, "Selectors");

    // ...
}

 

옆에 있는(?) lv_demo_stress 를 보는데

Stress demo
Overview
A stress test for LVGL. It contains a lot of object creation, deletion, animations, styles usage, and so on. It can be used if there is any memory curruption during heavy usage or any memory leaks.

Printer demo with LVGL embedded GUI library

Run the demo
In lv_ex_conf.h set LV_USE_DEMO_STRESS 1
In lv_conf.h enable all the widgets (LV_USE_BTN 1) and the animations (LV_USE_ANIMATION 1)
After lv_init() and initializing the drivers call lv_demo_stress()

 

5_35_LVGL_Full_Test-S024\components\lv_examples\lv_examples\lv_ex_conf_templ.h

파일에 먼가 설정이 있는데 한번 stress 활성화 시켜서 봐야겠다.

/**
 * @file lv_ex_conf.h
 *
 */
/*
 * COPY THIS FILE AS lv_ex_conf.h
 */

#if 0 /*Set it to "1" to enable the content*/

#ifndef LV_EX_CONF_H
#define LV_EX_CONF_H


/*******************
 * GENERAL SETTING
 *******************/
#define LV_EX_PRINTF       0       /*Enable printf-ing data in demoes and examples*/
#define LV_EX_KEYBOARD     0       /*Add PC keyboard support to some examples (`lv_drivers` repository is required)*/
#define LV_EX_MOUSEWHEEL   0       /*Add 'encoder' (mouse wheel) support to some examples (`lv_drivers` repository is required)*/

/*********************
 * DEMO USAGE
 *********************/

/*Show some widget*/
#define LV_USE_DEMO_WIDGETS        0
#if LV_USE_DEMO_WIDGETS
#define LV_DEMO_WIDGETS_SLIDESHOW  0
#endif

/*Printer demo, optimized for 800x480*/
#define LV_USE_DEMO_PRINTER     0

/*Demonstrate the usage of encoder and keyboard*/
#define LV_USE_DEMO_KEYPAD_AND_ENCODER     0

/*Benchmark your system*/
#define LV_USE_DEMO_BENCHMARK   0

/*Stress test for LVGL*/
#define LV_USE_DEMO_STRESS      0

#endif /*LV_EX_CONF_H*/

#endif /*End of "Content enable"*/

저작자표시 (새창열림)

'프로그램 사용 > lvgl' 카테고리의 다른 글

eez studio  (0) 2026.02.02
esp32 lvgl benchmark  (0) 2026.02.02
squartline studio 설치  (0) 2026.01.28
lvgl pro + figma vs square line studio  (0) 2026.01.28
freertos on esp32 lvgl 예제 분석  (0) 2026.01.26
Posted by 구차니
프로그램 사용/lvgl2026. 1. 28. 21:58

squartline studio 설치

어제 일찍 안자고 뻘짓했는데 -_-

아무튼 오늘은 어제 못해본 squareline studio 시도!

[링크 : https://squareline.io/downloads#lastRelease]

 

오 깔끔해!

 

오!! 편하게 끝났어!!

 

가입없이 30일 쓸 수 있어서 합격!

 

나름 디자인이 깔끔하고 센스있네

드러운(?) 다이얼로그에서 EULA 창을 안여니 합격!

 

가장보고 싶었던 ebike demo!

그런데 해상도가 480x272 혹은 800x480 으로 만 선택이 가능하다.

처음부터 해상도 정해서 해야 하는거라면.. 320x240에 맞춰서 변형하던가 새로 만들어야 겠군..

 

오오오오!

 

두 개 페이지고 메뉴 선택하면 우측 창이 열리는 구조인가 두개가 보인다.

 

왜 저기있는지 모르겠지만.. 우측의history 옆에 inspecto? 버튼에 올려진

재생 버튼을 누르면 ui를 테스트 해볼수 있다.

 

속도계를 어떻게 그렸나 궁금했었던 지라 분석 모드로 전환!

해당 엘리먼트(?)를 클릭하면 Slider Speed라는 이름으로 나온다.

 

slider_speed로 검색해보니 옆에 값들이 먼가 보이는 느낌?


void ui_Home_screen_init(void) 함수에 위의 객체가 그려지고 있는것 같고


void ui_init(void) 에서 해당 화면을 초기화 한다. 그리고 ui_init은 호출되는게 없는걸 보니 이게 최상위 진입 경로인 듯.

 

+

2026.02.02

홈페이지 하단에 보니 LVGL과 squareline은 분리되었고, 공식 제휴가 없는 독립적인 회사이다. 라고 명시해둠.

[링크 : https://squareline.io/]

저작자표시 (새창열림)

'프로그램 사용 > lvgl' 카테고리의 다른 글

esp32 lvgl benchmark  (0) 2026.02.02
esp32 lvgl 소스 코드 따라가기  (0) 2026.01.28
lvgl pro + figma vs square line studio  (0) 2026.01.28
freertos on esp32 lvgl 예제 분석  (0) 2026.01.26
lvgl pro on win10 실패  (0) 2026.01.22
Posted by 구차니
프로그램 사용/lvgl2026. 1. 28. 11:10

lvgl pro + figma vs square line studio

좀 더 다뤄봐야겠지만..

lvgl pro는 독립으로 쓰긴 힘들고(xml로 html 코딩하듯 가능하다면 가능할지도..)

figma 에서 figma to LVGL 플러그인을 통해서 저렇게 내보내는 걸 보면..

개발자가 디자인 툴을 익히는 불상사가 생길 느낌인데

[링크 : https://docs.lvgl.io/master/xml/tools/figma.html]

 

아무튼, figma 에서 디자인한 걸 받아서 변환해 준다고 하면 두 개 가격이 드는건데, 년 단위로 비용은

starter 1000 + 192(16 * 12)

business 3000 + 192(16 * 12)

[링크 : https://pro.lvgl.io/pricing]

 

[링크 : https://www.figma.com/ko-kr/pricing/]

 

small 비지니스라면 약 800$. 

business도 2200$

[링크 : https://squareline.io/pricing/licenses#licenseTable]

저작자표시 (새창열림)

'프로그램 사용 > lvgl' 카테고리의 다른 글

esp32 lvgl 소스 코드 따라가기  (0) 2026.01.28
squartline studio 설치  (0) 2026.01.28
freertos on esp32 lvgl 예제 분석  (0) 2026.01.26
lvgl pro on win10 실패  (0) 2026.01.22
lvgl pro, square line studio  (0) 2026.01.09
Posted by 구차니

티스토리툴바