LVGL + ESP32...jak używać?

[farmaceuta]

Witam panowie...mam taki problem ze za cholerę nie mogę rozgryźć jak tworzyć interfejs dla wyświetlacza przy pomocy biblioteki LVGL i squareline studio...chodzi mi o to że mam np. coś takiego jak poniżej sterowanego encoderem, i po kręceniu i naciskaniu enkodera wybieram sobie zmienną która ma się zwiekszac zmniejszać w konkretnym zakresie...nie chodzi mi o to żeby dać mi konkretny tutorial na ten temat, a chociaż nakierować mnie jak to powinno się mniej więcej robić...no na YT mało jest takich tutoriali

https://youtube.com/shorts/dH4FTKM2fzA?si=SCnZmxiWDCtyZhf-

 

[_LM_]

LVGL która wersja biblioteki? Gdzie kod programu? Czy enkoder działa? TFT też? No i dlaczego ograniczona/płatna SLS zamiast eez studio?

Edytowano Marzec 6, 2025 przez _LM_

[farmaceuta]

@_LM_ kodu nie ma...chodzi mi o zarys koncepcji jak to tworzyć, bo nie mogę sobie jakoś tego wyobrazić jak ożenić zmienne z kodem który zostanie wygenerowany... No i ubolewam bo do EEZ jest jeszcze mniej tutoriali...

[rade]

@farmaceuta

https://github.com/rkalwak/SuplaLvgl

projekt jest w SquareLine Studio z Platform.io 

w EEZ lub SquareLine Studio generujesz layout, i exportujesz jego kod, potem ten kod musisz podegrać do katalogu w programie , u mnie jest nazwany "ui",  trzeba się pilnować, żeby nie robić #include <ui/ui.h> wszędzie, tylko najlepiej wydzielić sobie jedno miejsce z którego się odwołujesz do UI, polecam main

https://github.com/rkalwak/SuplaLvgl/blob/a5c9400fafb43d2636bb24cbe40a6656ad8a1abb/src/mqttCallback.cpp#L34C9-L34C26 a tak np. ustawiam sobie wartość labela.

 

jeśli chcesz reagować np. na click to zostanie stworzona metoda: https://github.com/rkalwak/SuplaLvgl/blob/a5c9400fafb43d2636bb24cbe40a6656ad8a1abb/src/ui/ui_events.h#L13

którą musisz zaimplementować

https://github.com/rkalwak/SuplaLvgl/blob/a5c9400fafb43d2636bb24cbe40a6656ad8a1abb/src/main.cpp#L197

 

Tu uwaga, przy każdym eksporcie on generuje ciało tej metody którego trzeba się pozbyć i zostawić deklarację tylko a implementować gdzieś indziej, bo przy kolejnym eksporcie nadpisze Twój kod w lokalizacji ui.

 

Jak coś to pytaj

[farmaceuta]

@rade wiedziałem że to będzie trudne...ale nie że aż tak ja używam Arduino IDE (nie mogłem gdzieś się przerzucić na pio) no nic...będę kombinował małymi kroczkami może coś z tego wyjdzie...

[rade]

13 minut temu, farmaceuta napisał:

@rade wiedziałem że to będzie trudne...ale nie że aż tak ja używam Arduino IDE (nie mogłem gdzieś się przerzucić na pio) no nic...będę kombinował małymi kroczkami może coś z tego wyjdzie...

W Arduino też możesz ale tam ciężko się poruszać po plikach i katalogach, więc zmotywuj się  ja Arduino też używam, ale jak już inaczej się nie da.

[_LM_]

To ja polecę klasykiem: VSC z rozszerzeniem IDF oraz CMake.

[farmaceuta]

1 minutę temu, _LM_ napisał:

z rozszerzeniem IDF

O w życiu!hehe umarł bym przy tym śmiercią bolesną...

[_LM_]

cóż, to nic tu po mnie

[SOYER]

Polecam Arduino Maker Workshop dla VSC.

Co do lvgl to możesz przejrzeć mój szkic który przemęczyłem w tym temacie:

Szkic:

https://github.com/Soyer79/esp32_lcd4-_supla

[_LM_]

w sumie, przypomniałeś mi żeby poszukać rozszerzenia dla avr8 chyba że microchip studio? dobra EOT

[kostuch]

Nie poddawaj się

Żeby używal lvgl nie trzeba od razu używać xyzStudio do generowania gui. Można zrobić na piechotę bez sterty dodatkowych plików do includowania, itd.

Kawałek kodu, który wyświetla etykietę i button poniżej. Enkoder łatwo możesz sobie obsłużyć na zewnątrz lvgl i po prostu modyfikować etykietę widgetu. Nie trzeba od razu używać wszystkich funkcjonalności lvgl, bo można się pogubić i zniechęcić.

 

#include "Arduino.h"
#include <TFT_eSPI.h> // Hardware-specific library
#include <lvgl.h>

/*Change to your screen resolution*/
static const uint16_t screenWidth  = 320;
static const uint16_t screenHeight = 170;

static lv_disp_draw_buf_t draw_buf;
static lv_color_t buf[ screenWidth * 10 ];

TFT_eSPI tft = TFT_eSPI(); /* TFT instance */

void my_disp_flush( lv_disp_drv_t* disp, const lv_area_t* area, lv_color_t* color_p )
{
	uint32_t w = ( area->x2 - area->x1 + 1 );
	uint32_t h = ( area->y2 - area->y1 + 1 );
	//tft.startWrite();
	tft.setAddrWindow( area->x1, area->y1, w, h );
	tft.pushColors( ( uint16_t* )&color_p->full, w * h, true );
	//tft.endWrite();
	lv_disp_flush_ready( disp );
}

void setup()
{
	String LVGL_Arduino = "Cokolwiek";
	lv_init();
	tft.begin();          /* TFT init */
	tft.setRotation(1); /* Landscape orientation */
	lv_disp_draw_buf_init( &draw_buf, buf, NULL, screenWidth * 10 );
	static lv_disp_drv_t disp_drv;
	lv_disp_drv_init( &disp_drv );
	disp_drv.hor_res = screenWidth;
	disp_drv.ver_res = screenHeight;
	disp_drv.flush_cb = my_disp_flush;
	disp_drv.draw_buf = &draw_buf;
	lv_disp_drv_register( &disp_drv );
	lv_obj_t* label = lv_label_create( lv_scr_act() );
	lv_label_set_text( label, LVGL_Arduino.c_str() );
	lv_obj_align( label, LV_ALIGN_CENTER, 0, 0 );
	lv_obj_t* btn = lv_btn_create(lv_scr_act());      /*Add a button the current screen*/
	lv_obj_set_pos(btn, 10, 10);                            /*Set its position*/
	lv_obj_set_size(btn, 120, 50);                          /*Set its size*/
	lv_obj_t* blabel = lv_label_create(btn);           /*Add a label to the button*/
	lv_label_set_text(blabel, "Etykieta");                     /*Set the labels text*/
}

void loop()
{
	lv_timer_handler(); /* let the GUI do its work */
	delay( 5 );
}

 

[farmaceuta]

@kostuch dzięki Wielkie pobawię się tym kawałkiem kodu jutro...spróbuję jeszcze, bo szczerze już się trochę zniechecilem 

No a powiedzmy że mam jakiś kształt (np. Prostokąt) i na tym tle jest zmienna...mam rozumieć że jeśli będę modyfikował tą zmienną o ona automatycznie będzie się odświeżać na tym prostokącie??

[_LM_]

lv_label_set_text( label, LVGL_Arduino.c_str() );
//lub 
lv_label_set_text_fmt( ... ); // formatowanie jak w printf (%d, %s...)

Da się też ustawić labelki tak żeby "obserwowały" pewne zmienne, nie pamiętam od której wersji LVGL ale wtedy nie musisz ręcznie przypisywać takiej wartości. Póki co ważne jest żebyś uruchomił wyświetlacz i bibliotekę na minimalnym kodzie 

https://docs.lvgl.io/master/details/auxiliary-modules/observer.html

Edytowano Marzec 13, 2025 przez _LM_

[kostuch]

Dnia 12.03.2025 o 22:16, farmaceuta napisał:

@kostuch dzięki Wielkie pobawię się tym kawałkiem kodu jutro...spróbuję jeszcze, bo szczerze już się trochę zniechecilem 

No a powiedzmy że mam jakiś kształt (np. Prostokąt) i na tym tle jest zmienna...mam rozumieć że jeśli będę modyfikował tą zmienną o ona automatycznie będzie się odświeżać na tym prostokącie??

Wyświetl najpierw najprostszą statyczną etykietę używając lvgl. Potem powoli dokładaj kolejne klocki. To jest rozbudowany "kombajn", więc nie zaczynaj od skomplikowanych rzeczy, bo się pogubisz i zniechęcisz.

Jest pełno prostych przykładów w dokumentacji z gotowym kodem i wizualizacją. Np:

https://docs.lvgl.io/master/examples.html#button-click-event