ESP32 P4 dev kit quick start

[Jeff_T]

This dev kit is sold by Waveshare and has four options that each come with different pieces of hardware.

This is the product page https://www.waveshare.com/esp32-p4-module-dev-kit.htm?sku=30560

Kits B and C come with a 7 inch or 10 inch DSI LCD touch screen respectively and the product page describes the pin out and features of the board. The dev kit is not limited to the larger screens , if you want a smaller screen you can still use SPI or I2C

At the bottom of the product page is a link to a Waveshare wiki that helps you set up your environment and provides libraries and examples to get you up and running. The resource file is downloadable and has a folder for Arduino and a folder for ESP-IDF. I am using Arduino IDE so I had to copy the three libraries : displays / GFX_Library_for_Arduino / lvgl and the one lv_conf.h  file to my Arduino libraries folder. I am using the 10 inch display so initially that will be my focus but this should also apply to other displays

Waveshare wiki page https://www.waveshare.com/wiki/ESP32-P4-Module-DEV-KIT

The download also contains a folder of examples to show off the displays, the examples are : AsciiTable / Drawing_board / GFX_ESPWiFiAnalyzer / HelloWorld / LVGLV9_Arduino.

The examples are nice and the one I felt would be most useful for me was the LVGLV9_Arduino, the lvgl library is new to me but I can see there are many online resources, it is open source, has widgets with events and produces good looking gui's

The LVGLV9_Arduino has it's own in built demo's and examples and is basically restricted to portrait mode. So I modified this file so that it could be rotated between portrait and landscape and modified the touch so that it would align with any of the four possible rotated positions. Portrait or landscape is achieved by adjusting the 3 defines ROTATION / SCR_WIDTH / SCR_HEIGHT. I now save this file for future projects.

I am attatching the modified file as text which I called template. Near the end of the program file I marked an area I call the Test Block where we can run tests using lvgl widgets. At the moment there is only a pointer to a lvgl object called label1 and a function called place_widget() this should display a label in the center of the display.

Upload the template code to the ESP32 to observe the results.

As you test different widgets copy and paste the template code to a new file with a new name and always preserve template.ino.

In the IDE
   Board: ESP32P4 Dev Module
   Flash Size: 16MB
   Partition Scheme: Huge APP
   PSRAM: Enabled

[Jeff_T]

If all goes well with the template displaying the label we can move on to create some buttons with events that give our Arduino programs information from the touch screen.

I want three buttons lined up horizontally, one red one green and one blue. I want all three buttons attached to the same callback event handler. I want a description of the button I press and release to be printed in the serial monitor.

First we will create three pointers to a lvgl object

lv_obj_t * red_btn, * green_btn, * blue_btn;

Next I will show how to create a red button object which we can replicate for the other two buttons.

Create a button:
    red_btn = lv_btn_create(lv_screen_active());
Set the color:
    lv_obj_set_style_bg_color(red_btn, lv_color_make(255, 0, 0), LV_PART_MAIN);
Set the button size:
    lv_obj_set_size(red_btn, 150, 75);
Add the button to the event handler:
    lv_obj_add_event_cb(red_btn, event_handler, LV_EVENT_ALL, NULL);
Place the button at the desired x y coordinates
    lv_obj_align(red_btn, LV_ALIGN_CENTER, -200, 0);

This is the complete place_widget function:

void place_widget(){

    red_btn = lv_btn_create(lv_screen_active());
    lv_obj_set_style_bg_color(red_btn, lv_color_make(255, 0, 0), LV_PART_MAIN);
    lv_obj_set_size(red_btn, 150, 75);
    lv_obj_add_event_cb(red_btn, event_handler, LV_EVENT_ALL, NULL);
    lv_obj_align(red_btn, LV_ALIGN_CENTER, -200, 0);

    green_btn = lv_btn_create(lv_screen_active());
    lv_obj_set_style_bg_color(green_btn, lv_color_make(0, 255, 0), LV_PART_MAIN);
    lv_obj_set_size(green_btn, 150, 75);
    lv_obj_add_event_cb(green_btn, event_handler, LV_EVENT_ALL, NULL);
    lv_obj_align(green_btn, LV_ALIGN_CENTER, 0, 0);

    blue_btn = lv_btn_create(lv_screen_active());
    lv_obj_set_style_bg_color(blue_btn, lv_color_make(0, 0, 255), LV_PART_MAIN);
    lv_obj_set_size(blue_btn, 150, 75);
    lv_obj_add_event_cb(blue_btn, event_handler, LV_EVENT_ALL, NULL);
    lv_obj_align(blue_btn, LV_ALIGN_CENTER, 200, 0);
}

Finally we need the event handler, it simply gets the object name and the object event code. We then use a nested if and else if to look for EVENT_RELEASED and the button name to print to the serial monitor

static void event_handler(lv_event_t * e){ 

    lv_obj_t * name = lv_event_get_target_obj(e);
    lv_event_code_t code = lv_event_get_code(e);

    if (code==LV_EVENT_RELEASED){
    if (name==red_btn){
      Serial.println("Red button");
    }
    else if (name==green_btn){
      Serial.println("Green button");
    }
    else if (name==blue_btn){
      Serial.println("Blue button");
    }
    }
}

The full code file is attached as text and named btn_event.

[Jeff_T]

The template from post one is ideal for use with the app Squareline Studio, if it's for personal use there is a free version of Squareline Studio.

This app will help you visualize your GUI as you go, you can build a project over several pages with a choice of some pretty good widgets and you end up with 90% of the code written for you.

The following video is an excellent tutorial, the screen size is different and we can replace the initial Arduino code with our template code ( remember to rename it and preserve the original ) apart from that the process is the same.

https://www.youtube.com/watch?v=NeAYiX7iwtc

[granz]

Jeff,

I seem to remember a post that you made that included a picture of a dev board with an LCD attached, it looked a little like a tablet. This WaveShare thing reminded me of that. If I remember correctly, it was based on an ESP-32. It seems to me that it was pretty low-cost - maybe $30 to $40.

Do you remember that post? And, could you give me the link to that thread again, please?

[Jeff_T]

@granz could it possibly be the Lilygo T Display S3 it's one of my favorites.

https://lilygo.cc/en-us/products/t-display-s3?

The link is from China @ $9.04 for the basic module without header. It is available from Amazon but I think the best I saw was $23 with free delivery for Prime members.

There is another similar module called the TTGO which used to be popular but I don't have any of those. 

EDIT: I just thought @granz it might have been the M5Stack Tab5, that runs at about $55

https://shop.m5stack.com/products/m5stack-tab5-iot-development-kit-esp32-p4?srsltid=AfmBOorfqjSY0N6YmOG-kuy8DvQAtv3T48Oh-vmcjc4gsmkPI6YvNduW

[granz]

Yeah, I think that the M5Stack is the one that I was looking for. Thanks.

[Jeff_T]

@granz the M5Stack Tab5 looks like a nice unit.

I subscribe to a YouTube channel called Volos Projects and he comes up with some really good looking gui designs, one of his videos covers the M5Stack and in it he talks about having a template so I am pretty sure anything I am trying to cover in this thread will also work with the M5Stack you will just need to initialize a different display.

Check him out at this video
https://www.youtube.com/watch?v=BoIAsgQ3fw8&t=123s

[granz]

@granz the M5Stack Tab5 looks like a nice unit.

I subscribe to a YouTube channel called Volos Projects and he comes up with some really good looking gui designs, one of his videos covers the M5Stack and in it he talks about having a template so I am pretty sure anything I am trying to cover in this thread will also work with the M5Stack you will just need to initialize a different display.

Check him out at this video
https://www.youtube.com/watch?v=BoIAsgQ3fw8&t=123s

SQUIRREL! No, no, NO!   I already have too many irons in the fire; although this looks cool. I will have to remember this for when I start getting caught up on my project list.