LVGL software voor touchscreens

hoi

ik heb een touchscreen met esp32 en sd kaart gekocht. Met het gratis arduino programma 2.3.4 heb ik al behoorlijk wat geprogrammeerd en mede door chatgpt in orde gekregen. De sd kaart werkt en kan ik uitlezen. Nu wil ik een png foto op mijn scherm krijgen. En daar ben ik al een paar dagen zoet mee. ik krijg maar geen foto op het scherm. Hooguit dat het scherm begint wit te flikkeren. Buttons, kleuren en teksten werken wel al. Ik zou graag een simpel werkend voorbeeld hebben om te bestuderen.

void welkomText() {
  
  lv_obj_clean(lv_scr_act());                                                         // Verwijder alle objecten van het scherm
  lv_obj_set_style_bg_color(lv_scr_act(), lv_color_make(255, 165, 0), LV_PART_MAIN);  // scherm volledig oranje
  
  lv_obj_t *still = lv_label_create(lv_scr_act());                                   // Label aanmaken
  lv_label_set_text(still, "STILL");                                                 // Tekst instellen op label "STILL"
  lv_obj_add_style(still, &font_zwart_48, 0);                                        // Stijl toepassen op label font 48
  lv_obj_align(still, LV_ALIGN_TOP_MID, 0, 0);                                      // positie tekst -20 naar boven vanuit center

  
  if (SD.exists("/still.png")) { Serial.println("✅ foto gevonden"); } else {
                                       Serial.println("Geen foto op gevonden op de SD");             }

  lv_img_create(lv_scr_act());                           // Maak een afbeelding-object
  lv_img_set_src(img,"/still.png");                      // Laad de afbeelding
  lv_img_set_zoom(img, 80);                              // Verklein naar 50%  // 256=100% // je kan ook zoomen naar 200%, dat is dan 512
  lv_obj_align(img, LV_ALIGN_CENTER, 0, 0);                // Uitlijnen
                                                       

  lv_obj_t *still2 = lv_label_create(lv_scr_act());                                  // Label aanmaken
  lv_label_set_text(still2, "Keyless Entry System");                                 // Tekst instellen op label "Keyless Entry System"
  lv_obj_add_style(still2, &font_zwart_28, 0);                                       // Stijl toepassen op label font 28  
  lv_obj_align(still2, LV_ALIGN_BOTTOM_MID, 0, -20);                                 // positie tekst -20 naar boven vanuit bodem    
             }

Misschien kan je eerst kijken of je een plaatje kan laten zien vanaf een array. Ik vermoed dat het fout gaat met het laden van de SD kaart of dat je plaatje niet het juiste kleur formaat heeft:

https://docs.lvgl.io/master/details/main-modules/image.html#images-lv-…

De TFT _eSPI librarie van Bodmer al geprobeerd? Een PNG voorbeeld.

Er staat ook een JPEG librarie op zijn github.

Deze code is gegenereerd denk ik? GPT heeft de eigenschap om overal smylies in te proppen. Lijkt me niet handig, al denk ik niet dat het probleem is.

Er zitten ook wel wat issues in je code, probeer het eens zo: (ook met gpt trouwens)


void welkomText() {
  
  // Clear all objects from the screen and set background color to orange
  lv_obj_clean(lv_scr_act());
  lv_obj_set_style_bg_color(lv_scr_act(), lv_color_make(255, 165, 0), LV_PART_MAIN);
  
  // Create and configure the first label "STILL"
  lv_obj_t *still = lv_label_create(lv_scr_act());
  lv_label_set_text(still, "STILL");
  lv_obj_add_style(still, &font_zwart_48, 0);
  lv_obj_align(still, LV_ALIGN_TOP_MID, 0, -20);  // Adjust vertical offset if intended
  
  // Check for the image file on SD card
  if (SD.exists("/still.png")) { 
    Serial.println("foto gevonden"); 
  } else {
    Serial.println("Geen foto op gevonden op de SD");
  }

  // Create an image object and load the image
  lv_obj_t *img = lv_img_create(lv_scr_act());
  lv_img_set_src(img, "/still.png");
  lv_img_set_zoom(img, 80);  // Check: 256=100%; adjust if necessary
  lv_obj_align(img, LV_ALIGN_CENTER, 0, 0);
  
  // Create and configure the second label "Keyless Entry System"
  lv_obj_t *still2 = lv_label_create(lv_scr_act());
  lv_label_set_text(still2, "Keyless Entry System");
  lv_obj_add_style(still2, &font_zwart_28, 0);
  lv_obj_align(still2, LV_ALIGN_BOTTOM_MID, 0, -20);
}

Ik heb de docu van lv_img_set_src opgezocht en daar staat dat je de boel van PNG naar het formaat wat dit ding snapt moet converteren....

hey.

Ik heb één keer een foto png omgezet naar een .c array via een tool op internet. Na wat aanpassingen helemaal onderaan in die c file. Betreft hoogte , breedte en kleur kreeg ik een kleine foto op mijn scherm. De kwaliteit van de foto was wel niet goed. = groffe pixels.

Een 100% werkend voorbeeld zou leuk zijn. De foto op de SD wordt gevonden als ik /picture.png type. Als ik S:/picture.png type vind hij niets..

Mijn vraag is voornamelijk. Ik lees een png van de sd. Wat heb ik nog nodig van omzetting of software om de foto op het scherm te krijgen ??
De foto wordt omgezet in pixels met RGB... zo denk ik dat het zou moeten.

Grote of hi-res foto's bewerken/laden kost heel veel geheugen, heeft die Arduino dat wel?

Heeft de foto/png wel dezelfde resolutie als het scherm (aantal pixels horizontaal en verticaal)? Als dat niet het geval is, moet je nog veel meer doen dan alleen de png omzetten in RGB.

Op woensdag 19 maart 2025 11:29:03 schreef microman:
De foto op de SD wordt gevonden als ik /picture.png type. Als ik S:/picture.png type vind hij niets..

Drive letters zijn een DOS/Windows (etc?) concept, lijkt me logisch dat dat hier niet hoeft/moet.

Kijk hier eens : https://randomnerdtutorials.com/esp32-tft-display-image-lvgl-arduino/
Blijkbaar moet je inderdaad je foto omzetten naar een bepaald formaat dat svgl kan lezen : 1. Go to the LVGL Image Converter Website: lvgl.io/tools/imageconverter

Op woensdag 19 maart 2025 11:29:03 schreef microman:
De foto op de SD wordt gevonden als ik /picture.png type. Als ik S:/picture.png type vind hij niets..

Ja. Je code controleert of het bestand bestaat, maar niet of hij het juiste formaat heeft.

Ik zeg je levert een verkeerd bestand aan en dat negeer je compleet.

Even voor de goede orde: Het is tot ongeveer 2025 gebruikelijk dat op microcontrollers ALS je al plaatjes gaat doen, dat je die dan met externe tools, bijvoorbeeld op een PC omzet naar iets wat "makkelijk" voor de microcontroller is.

Ik heb een project waarbij ik "toekomstbestendig" al ben overgeschakeld op PNG. Maar buiten wat ik doe, is dat nog beperkt beschikbaar in open source libraries.

[Bericht gewijzigd door rew op (35%)]

van png format foto's kan je gewoon de breedte , hoogte pixels aanpassen. Kan met elke windows 11 huis tuin en keuken computer. Dit doe je dan voor je de foto op de sd kaart zet. ik ga eens kijken naar die link van Bodmer ,die naam heb ik al meerdere keren zien passeren.

thx