ESP32-2432S028 GUI Guider und lvgl fragen

Hallo,
ich habe ein ESP32-2432S028 und wollte mit GUI Guider das Design erstellen.
Nun habe ich ein Ordner mit vielen Dateien und keine Ahnung wie ich diese auf dem ESP bekomme.

Google hilft mir auch nicht weiter.
Könnt ihr mir bitte sagen was zutun ist?

1
2

Warum fragst du nicht in dem zu GUI Guider gehörigen Forum.

Da ist alles in English und das kann ich nicht wirklich. Hier ist es schöner.

Hier ist aber die Wahrscheinlichkeit gering, dass jemand Deine Kombination nutzt und Dir Hilfestellung geben kann.
Schau Dir mal den Deepl-Translator an.

Gruß Tommy

Es muss nicht unbedingt GUI Guider sein. Aber mit so einem "Design Tool" wehre es einfacher und sicher auch etwas schöner.

Auch in so ein Tool musst Du Dich einarbeiten.
Hier wird meistens eine HTML-Website (evtl. mit CSS und Javascript) als GUI eingesetzt. Quellen: SelfHTML und w3schools. Ganz ohne Englisch (evtl. mit Übersetzer) wirst Du nicht auskommen.
Es gibt z.B. Kurse an der Volkshochschule dazu.

Gruß Tommy

Kannst du uns denn erklären, was genau du machen möchtest.
Dann kann dir sicher der ein oder andere weitere Tipps geben.

Siehe Install ESP32 Filesystem Uploader in Arduino IDE

Die von Dir gezeigten Dateien sehen aber nicht so aus, als würden sie im Dateisystem des ESP32 einen Sinn ergeben.

Getting Started with ESP32 Cheap Yellow Display Board – CYD (ESP32-2432S028R)

Problem mit LVG ist dass das funktioniert nur mit ESP32 S3 und nicht mit allen Displays. Mit den Yellow Displays gibt immer nur ausgewählte angepasste Version LVG. Ich habe so einen nur will nicht tun finde nicht die richtige Version.
Dafür macht aber TFT_eSPI keine Probleme.

Dieses Beispiel habe ich jetzt drauf und geht auch (mit lvgl) aber da komme ich nicht so zurecht. Wenn ich zum Beispiel die Schaltfläche oder Schieberegler drücke, wo kann ich da was zuweisen was passieren soll. Ich finde da kein Beispiel womit ich etwas anfangen kann.
Eine einfach Serial.println Ausgabe mit dem wert für den Schieberegler z.B. würde mir helfen. Aber so komme ich nicht weiter.

// https://RandomNerdTutorials.com/esp32-tft-lvgl/


#include <lvgl.h>
 FULL INSTRUCTIONS AVAILABLE ON HOW CONFIGURE THE LIBRARY: https://RandomNerdTutorials.com/cyd-lvgl/ or https://RandomNerdTutorials.com/esp32-tft-lvgl/   */
#include <TFT_eSPI.h>

// Install the "XPT2046_Touchscreen" library by Paul Stoffregen to use the Touchscreen - https://github.com/PaulStoffregen/XPT2046_Touchscreen - Note: this library doesn't require further configuration
#include <XPT2046_Touchscreen.h>

// Touchscreen pins
#define XPT2046_IRQ 36   // T_IRQ
#define XPT2046_MOSI 32  // T_DIN
#define XPT2046_MISO 39  // T_OUT
#define XPT2046_CLK 25   // T_CLK
#define XPT2046_CS 33    // T_CS

SPIClass touchscreenSPI = SPIClass(VSPI);
XPT2046_Touchscreen touchscreen(XPT2046_CS, XPT2046_IRQ);

#define SCREEN_WIDTH 320
#define SCREEN_HEIGHT 240

// Touchscreen coordinates: (x, y) and pressure (z)
int x, y, z;

#define DRAW_BUF_SIZE (SCREEN_WIDTH * SCREEN_HEIGHT / 10 * (LV_COLOR_DEPTH / 8))
uint32_t draw_buf[DRAW_BUF_SIZE / 4];
//___

//_____
// If logging is enabled, it will inform the user about what is happening in the library
void log_print(lv_log_level_t level, const char * buf) {
  LV_UNUSED(level);
  Serial.println(buf);
  Serial.flush();
}

// Get the Touchscreen data
void touchscreen_read(lv_indev_t * indev, lv_indev_data_t * data) {
  // Checks if Touchscreen was touched, and prints X, Y and Pressure (Z)
  if(touchscreen.tirqTouched() && touchscreen.touched()) {
    // Get Touchscreen points
    TS_Point p = touchscreen.getPoint();
    // Calibrate Touchscreen points with map function to the correct width and height
    x = map(p.x, 200, 3700, 1, SCREEN_WIDTH);
    y = map(p.y, 240, 3800, 1, SCREEN_HEIGHT);
    z = p.z;

    data->state = LV_INDEV_STATE_PRESSED;

    // Set the coordinates
    data->point.x = x;
    data->point.y = y;

    // Print Touchscreen info about X, Y and Pressure (Z) on the Serial Monitor
    /* Serial.print("X = ");
    Serial.print(x);
    Serial.print(" | Y = ");
    Serial.print(y);
    Serial.print(" | Pressure = ");
    Serial.print(z);
    Serial.println();*/
  }
  else {
    data->state = LV_INDEV_STATE_RELEASED;
  }
}

int btn1_count = 0;
// Callback that is triggered when btn1 is clicked
static void event_handler_btn1(lv_event_t * e) {
  lv_event_code_t code = lv_event_get_code(e);
  if(code == LV_EVENT_CLICKED) {
    btn1_count++;
    LV_LOG_USER("Button clicked %d", (int)btn1_count);
  }
}

// Callback that is triggered when btn2 is clicked/toggled
static void event_handler_btn2(lv_event_t * e) {
  lv_event_code_t code = lv_event_get_code(e);
  lv_obj_t * obj = (lv_obj_t*) lv_event_get_target(e);
  if(code == LV_EVENT_VALUE_CHANGED) {
    LV_UNUSED(obj);
    LV_LOG_USER("Toggled %s", lv_obj_has_state(obj, LV_STATE_CHECKED) ? "on" : "off");
  }
}

static lv_obj_t * slider_label;
// Callback that prints the current slider value on the TFT display and Serial Monitor for debugging purposes
static void slider_event_callback(lv_event_t * e) {
  lv_obj_t * slider = (lv_obj_t*) lv_event_get_target(e);
  char buf[8];
  lv_snprintf(buf, sizeof(buf), "%d%%", (int)lv_slider_get_value(slider));
  lv_label_set_text(slider_label, buf);
  lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
  LV_LOG_USER("Slider changed to %d%%", (int)lv_slider_get_value(slider));
}

void lv_create_main_gui(void) {
  // Create a text label aligned center on top ("Hello, world!")
  lv_obj_t * text_label = lv_label_create(lv_screen_active());
  lv_label_set_long_mode(text_label, LV_LABEL_LONG_WRAP);    // Breaks the long lines
  lv_label_set_text(text_label, "Hello, world!");
  lv_obj_set_width(text_label, 150);    // Set smaller width to make the lines wrap
  lv_obj_set_style_text_align(text_label, LV_TEXT_ALIGN_CENTER, 0);
  lv_obj_align(text_label, LV_ALIGN_CENTER, 0, -90);

  lv_obj_t * btn_label;
  // Create a Button (btn1)
  lv_obj_t * btn1 = lv_button_create(lv_screen_active());
  lv_obj_add_event_cb(btn1, event_handler_btn1, LV_EVENT_ALL, NULL);
  lv_obj_align(btn1, LV_ALIGN_CENTER, 0, -50);
  lv_obj_remove_flag(btn1, LV_OBJ_FLAG_PRESS_LOCK);

  btn_label = lv_label_create(btn1);
  lv_label_set_text(btn_label, "Button");
  lv_obj_center(btn_label);

  // Create a Toggle button (btn2)
  lv_obj_t * btn2 = lv_button_create(lv_screen_active());
  lv_obj_add_event_cb(btn2, event_handler_btn2, LV_EVENT_ALL, NULL);
  lv_obj_align(btn2, LV_ALIGN_CENTER, 0, 10);
  lv_obj_add_flag(btn2, LV_OBJ_FLAG_CHECKABLE);
  lv_obj_set_height(btn2, LV_SIZE_CONTENT);

  btn_label = lv_label_create(btn2);
  lv_label_set_text(btn_label, "Toggle");
  lv_obj_center(btn_label);
  
  // Create a slider aligned in the center bottom of the TFT display
  lv_obj_t * slider = lv_slider_create(lv_screen_active());
  lv_obj_align(slider, LV_ALIGN_CENTER, 0, 60);
  lv_obj_add_event_cb(slider, slider_event_callback, LV_EVENT_VALUE_CHANGED, NULL);
  lv_slider_set_range(slider, 0, 100);
  lv_obj_set_style_anim_duration(slider, 2000, 0);

  // Create a label below the slider to display the current slider value
  slider_label = lv_label_create(lv_screen_active());
  lv_label_set_text(slider_label, "0%");
  lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
  }
  //_______________



  


void setup() {
  String LVGL_Arduino = String("LVGL Library Version: ") + lv_version_major() + "." + lv_version_minor() + "." + lv_version_patch();
  Serial.begin(115200);
  Serial.println(LVGL_Arduino);
  
  // Start LVGL
  lv_init();
  // Register print function for debugging
  lv_log_register_print_cb(log_print);

  // Start the SPI for the touchscreen and init the touchscreen
  touchscreenSPI.begin(XPT2046_CLK, XPT2046_MISO, XPT2046_MOSI, XPT2046_CS);
  touchscreen.begin(touchscreenSPI);
  // Set the Touchscreen rotation in landscape mode
  // Note: in some displays, the touchscreen might be upside down, so you might need to set the rotation to 1: touchscreen.setRotation(1);
  touchscreen.setRotation(3);

  // Create a display object
  lv_display_t * disp;
  // Initialize the TFT display using the TFT_eSPI library
  disp = lv_tft_espi_create(SCREEN_WIDTH, SCREEN_HEIGHT, draw_buf, sizeof(draw_buf));
  
  // Initialize an LVGL input device object (Touchscreen)
  lv_indev_t * indev = lv_indev_create();
  lv_indev_set_type(indev, LV_INDEV_TYPE_POINTER);
  // Set the callback function to read Touchscreen input
  lv_indev_set_read_cb(indev, touchscreen_read);

  // Function to draw the GUI (text, buttons and sliders)
  lv_create_main_gui();
}

void loop() {
  lv_task_handler();  // let the GUI do its work
  lv_tick_inc(5);     // tell LVGL how much time has passed
  delay(5);           // let this time pass

}

Das habe ich drauf und geht auch aber wie kann ich die schaltfächen zuweisen.

https://docs.lvgl.io/master/examples.html

Augen Aufmachen , zwei mall, notfalls drittes mall laut lesen dann kommt sowas vor die Nase.

 // Print Touchscreen info about X, Y and Pressure (Z) on the Serial Monitor
    /* Serial.print("X = ");
    Serial.print(x);
    Serial.print(" | Y = ");
    Serial.print(y);
    Serial.print(" | Pressure = ");
    Serial.print(z);
    Serial.println();*/

Ja ich weis das war gemein :wink:
Jetz aber zu Sache ist der Touch Resistiv oder Kapazitiv ?
was auch vor erst egal ist.
Hier ist die Abfrage ob ON, OFF

static void event_handler_btn2(lv_event_t * e) {
  lv_event_code_t code = lv_event_get_code(e);
  lv_obj_t * obj = (lv_obj_t*) lv_event_get_target(e);
  if(code == LV_EVENT_VALUE_CHANGED) {
    LV_UNUSED(obj);
    LV_LOG_USER("Toggled %s", lv_obj_has_state(obj, LV_STATE_CHECKED) ? "on" : "off");
  }
}

Ich habe mich noch nicht zu sehr mit Lvgl beschäftigt den wie geschrieben, habe mein Display nicht sofort mit Lvgl zum Laufen bekommen (ist ein 3.5" Cheap Yellow Display Board – CYD ) dafür ein Beispiel aus der TFT_eSPI Bibliothek, Das Display war sehr günstig bei Ali, deshalb den mitgenommen. Herbst, Winter werde sich damit auseinander setzen, noch zu erwähnen ist, der Touch bei meinem Display ist ein Vierfinger Kapazitiver Touch.

Ja den habe ich auch.
Hatte es gestern doch noch hinbekommen.
"Einfach" bei

static void slider_event_callback(lv_event_t * e) {
 lv_obj_t * slider = (lv_obj_t*) lv_event_get_target(e);
 
 char buf[8];

das dazu

slider_value = (int)lv_slider_get_value(slider);

Garnicht mal so einfach aber das wird schon :face_with_peeking_eye:

Wenn du mal soweit bist und auch mal ein Tool suchst, kannst du dir EEZ Studio anschauen.
Hat jetzt LVGL 8.3 und 9.0.
Damit bastel ich zurzeit.

OK Danke, gucke mir das an.