ESP32-S3 7" Display, Wireless Relay Controller With Integrated LVGL and Home Assistant(HA)

In this article, I'm going to make a Relay Controller, which integrated LVGL and Home Assistant, based on ESP32-S3 Parallel TFT with Touch 7.0" 1024*600.

Hey! In the some ESP32 display project sharing video in the youtube, there are a lot of comments like "All I can see is nice dashboard for Home assistant" or " It can be very good to used in IOT with HA", so I try to make a relay controller using ESP32-S3 7"display and Home assistant.

Ok, look, configuration relay with home assistant, when the the 7" display request the webhook, it can control the relay all close, all open, invert, flow light.

• ESP32-S3 Parallel TFT with Touch 7.0" 1024*600
• 8 Channel Relay for Home Assistant
• Software support: Arduino, SquareLine

• Create a new product

Choose the Arduino and enter in parameters. According to the features of MaTouch ESP32-S3 Parallel TFT with Touch 7" ,the resolution is 1024*600, the shape is rectangle, and the color depth is 16-bit.

• Design the screen

Add the images and fonts you like to assets, and then it allows you to select them and widget components to design the scenes. After, clicking the widget of the list on the Hierarchy panel, you can modify the parameters of the select widget on the Inspector panel, all is determined by your preference.

• Add events and modify the events.c

We need to set up events for each button to go to the interrupt function when the button is pressed, once the file is exported, we need to copy the UI library folder to Document >> Arduino >> libraries, and modify the events.c file in the UI folder so that it enables the http_func call.

extern int index1;
extern int http_flag;

void button1_func(lv_event_t * e)
{
    http_flag = 1;
    index1 = 0;
}

void button2_func(lv_event_t * e)
{
    http_flag = 1;
    index1 = 1;
}

void button3_func(lv_event_t * e)
{
    http_flag = 1;
    index1 = 2;
}

void button4_func(lv_event_t * e)
{
    http_flag = 1;
    index1 = 3;
}

1. Follow the Raspberry Pi guide to install Home Assistant Operating System .
2. Access Home Assistant at homeassistant:8123 or "http://X.X.X.X:8123" (replace X.X.X.X with your Raspberry Pi’s IP address) and log in management page.
3. Install the ESPHome in the Add-on, the detail you can click here.
4. Configuration relay.
5. Set up Automation as shown in the figure, and select When a Webhook payload has been received as the trigger condition.

• Install lvgl library.
• The MaTouch ESP32-S3 Parallel TFT with Touch 7" is not compatible with the TFT_eSPI library, so I use the GFX_Library_of_Arduino library instead of the driver.

Since I did not use the TFT_eSPI library, it is needed to delete or comment all the codes related to the TFT_eSPI library.

#include <TFT_eSPI.h>

TFT_eSPI tft = TFT_eSPI(screenWidth, screenHeight); /* TFT instance */

    tft.startWrite();
    tft.setAddrWindow( area->x1, area->y1, w, h );
    tft.pushColors( ( uint16_t * )&color_p->full, w * h, true );
    tft.endWrite();

    tft.begin();          /* TFT init */
    tft.setRotation( 3 ); /* Landscape orientation, flipped */

When I use the GFX library， it is needed to define the GFX Library For the Arduino Interface pin.

Arduino_ESP32RGBPanel *bus = new Arduino_ESP32RGBPanel(
    GFX_NOT_DEFINED /* CS */, GFX_NOT_DEFINED /* SCK */, GFX_NOT_DEFINED /* SDA */,
    40 /* DE */, 41 /* VSYNC */, 39 /* HSYNC */, 42 /* PCLK */,
    45 /* R0 */, 48 /* R1 */, 47 /* R2 */, 21 /* R3 */, 14 /* R4 */,
    5 /* G0 */, 6 /* G1 */, 7 /* G2 */, 15 /* G3 */, 16 /* G4 */, 4 /* G5 */,
    8 /* B0 */, 3 /* B1 */, 46 /* B2 */, 9 /* B3 */, 1 /* B4 */
);


Arduino_RPi_DPI_RGBPanel *gfx = new Arduino_RPi_DPI_RGBPanel(
    bus,
    SCREEN_W /* width */, 1 /* hsync_polarity */, 40 /* hsync_front_porch */, 48 /* hsync_pulse_width */, 128 /* hsync_back_porch */,
    SCREEN_H /* height */, 1 /* vsync_polarity */, 13 /* vsync_front_porch */, 3 /* vsync_pulse_width */, 45 /* vsync_back_porch */,
    1 /* pclk_active_neg */, 16000000 /* prefer_speed */, true /* auto_flush */);

• LVGL is a user interface library primarily focused on display functionality, but it lacks user interaction capabilities. So, I need something to help me touch or interact with the screen.

Modify the touchpad function according to the pre-set functions in touch.h, and pass the state of the touchpad to the LVGL graphics library.

void my_touchpad_read(lv_indev_drv_t *indev_driver, lv_indev_data_t *data)
{
    if (touch_has_signal())
    {
        if (touch_touched())
        {
            data->state = LV_INDEV_STATE_PR;


            /*Set the coordinates*/
            data->point.x = touch_last_x;
            data->point.y = touch_last_y;
        }
        else if (touch_released())
        {
            data->state = LV_INDEV_STATE_REL;
        }
    }
    else
    {
        data->state = LV_INDEV_STATE_REL;
    }
}

• Connecting wifi.

#define SSID "Makerfabs"
#define PWD "20160704"

void wifi_init()
{
    String temp = "WiFi Connecting";
    lv_label_set_text(ui_Label5,temp.c_str());


    WiFi.begin(SSID, PWD);


    int connect_count = 0;
    while (WiFi.status() != WL_CONNECTED)
    {
        vTaskDelay(500);
        USBSerial.print(".");
        temp = temp + ".";
        lv_label_set_text(ui_Label5,temp.c_str());
        connect_count++;
    }


    lv_label_set_text(ui_Label5,"WiFi Connect Over");
    net_flag = 1;
}

if (net_flag != 1)
            if ((millis() - task_runtime_1) > 1000)
            {
                wifi_init();
                task_runtime_1 = millis();
            }

• Request webhook, process the events.

int index1;
int http_flag = 0;

void http_func(int index)
{
    HTTPClient http;


    USBSerial.print("[HTTP] begin...\n");


    String url = "";


    switch (index)
    {
    case 0:
        url = "http://homeassistant.local:8123/api/webhook/-LYt299nHgzxcCD95yct-G2jJ";
        break;
    case 1:
        url = "http://homeassistant.local:8123/api/webhook/-BhCrGgyQALW6F7b58N2PtoE7";
        break;
    case 2:
        url = "http://homeassistant.local:8123/api/webhook/-uWCIeRoUjy-lzQ7vbxnFQI3i";
        break;
    case 3:
        url = "http://homeassistant.local:8123/api/webhook/-0LPYwfu5Rr-1XTOGTnCDRmEU";
        break;


    default:
        USBSerial.println("Input error");
        return;
    }


    http.begin(url);


    USBSerial.print("[HTTP] GET...\n");
    // start connection and send HTTP header
    int httpCode = http.GET();


    // httpCode will be negative on error
    if (httpCode > 0)
    {
        // HTTP header has been send and Server response header has been handled
        USBSerial.printf("[HTTP] GET... code: %d\n", httpCode);


        // file found at server
        if (httpCode == HTTP_CODE_OK)
        {
            String payload = http.getString();
            USBSerial.println(payload);
        }
    }
    else
    {
        USBSerial.printf("[HTTP] GET... failed, error: %s\n", http.errorToString(httpCode).c_str());
    }


    http.end();
}

• The raw code.

In the video, when I press the button, the relay will react accordingly. Of course, it not only just simply control relay, the HA is powerful, by configuring Devices, setting up Automation, and finally requesting webhook using 7" screen, you can control the devices you want with a 7" screen.