• Step 4: Result

    Makerfabs • 12/13/2023 at 10:07 • 0 comments

    In the clock display example, we can see the clock hands change with real-time. In the weather display example，when I click the button in the upper right corner, I can change the city which I want to get weather information.

  • Step 3: Firmware of Weather Screen

    Makerfabs • 12/13/2023 at 10:06 • 0 comments

    • 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 */);
    •  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()
{
    WiFi.begin(SSID, PWD);


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


    USBSerial.println("Wifi connect");
    configTime((const long)(8 * 3600), 0, ntpServer);


    net_flag = 1;
}
    • Getting the weather information of the cities.
      String city_list[CITY_COUNT] =
    {
        "Beijing",    // china
        "Tokyo",      // japan
        "Washington", // usa
        "London",     // england
        "Paris",      // france
        "Canberra",   // Australia
        "Brazil",     // Brazil
        "Berlin"      // german
};

void weather_request(int country_num)
{
    HTTPClient http;


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


    String url = "http://api.weatherapi.com/v1/current.json?key=271578bfbe12438085782536232404&q=" + city_list[country_num] + "&aqi=no";


    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);


            // JSON
            DynamicJsonDocument doc(1024);
            deserializeJson(doc, payload);
            JsonObject obj = doc.as<JsonObject>();


            String city = doc["location"]["name"];
            String last_update = doc["current"]["last_updated"];
            String cond_txt = doc["current"]["condition"]["text"];
            float tmp = doc["current"]["temp_c"];
            float hum = doc["current"]["humidity"];
            float pressure = doc["current"]["pressure_mb"];
            float uv = doc["current"]["uv"];


            String text = city + " " + cond_txt + " " + last_update;


            USBSerial.println(text);
            USBSerial.println(tmp);
            USBSerial.println(hum);
            USBSerial.println(pressure);
            USBSerial.println(uv);


 lv_label_set_text(ui_Label1,...
    Read more »

  • Step 2: Firmware of Clock Screen

    Makerfabs • 12/13/2023 at 10:04 • 0 comments

    • 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 */);
    • 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 and getting NTP.
      #define SSID "Makerfabs"
#define PWD "20160704"

// NTP
const char *ntpServer = "120.25.108.11";

void wifi_init()
{
    WiFi.begin(SSID, PWD);


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


    USBSerial.println("Wifi connect");
    configTime((const long)(8 * 3600), 0, ntpServer);


    net_flag = 1;
}
    • Adjust the angle of the hour, minute and second hands according to the acquisition time.
      void display_time()
{
    struct tm timeinfo;


    if (!getLocalTime(&timeinfo))
    {
        USBSerial.println("Failed to obtain time");
        return;
    }
    else
    {
        int year = timeinfo.tm_year + 1900;
        int month = timeinfo.tm_mon + 1;
        int day = timeinfo.tm_mday;
        int hour = timeinfo.tm_hour;
        int min = timeinfo.tm_min;
        int sec = timeinfo.tm_sec;


        int sec_angle = 3600 * sec / 60;
        int min_angle = 3600 * min / 60 + 60 * sec / 60;
        int hour_angle = 3600 * (hour % 12) / 12 + 300 * min / 60;


        lv_img_set_angle(ui_Image2, hour_angle);
        lv_img_set_angle(ui_Image3, min_angle);
        lv_img_set_angle(ui_Image4, sec_angle);


        lv_img_set_angle(ui_Image7, hour_angle);
        lv_img_set_angle(ui_Image8, min_angle);
        lv_img_set_angle(ui_Image9, sec_angle);
    }
}

     The raw code.

  • Step 1: SquareLine Design

    Makerfabs • 12/13/2023 at 10:02 • 0 comments

    • 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 clock and weather images 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.

    And this is Basic usage of Squareline with MaTouch 2.1. Except for the SquareLine page design and code part, all the other operations are almost the same.

  • Supplies

    Makerfabs • 12/13/2023 at 10:02 • 0 comments

    This display module support Wifi & Bluetooth 5.0.

    • Software support: Arduino, SquareLine