Hướng dẫn sử dụng LVGL tạo giao diện cho màn hình LCD tích hợp ESP32-S3 / C3

ESP32-S3

Cài đặt phần mềm và tạo project mới

Cài đặt phần mềm :
- Truy cập link:https://squareline.io/ để tải phần mềm về và cài đặt như thông thường
Tạo một project mới :
- Chọn vào Create → Arduino
- Tiếp tục, chúng ta cấu hình phần Project Setting, ở đây chúng ta cần cài đặt một số chỗ:
- - 1 – Tên project: người dùng tự đặt
  - 2 – Đường dẫn đến thư mục lưu dự án, đây cũng là thư mục chứa các file sau khi xuất
  - 3 – Tỉ lệ khung hình: tỉ lệ này chọn theo màn hình mà bạn đang sử dụng, ví dụ ở trên mình dùng màn hình 4.3 có tỉ lệ là 800 x 480 px
  - 4 – Đây là độ đậm của màu, chúng ta chọn theo màn hình nhé, mình dùng loại 16 bit nên chọn 16 bit
  - 5 – Đây là phiên bản LVGL mà bạn đang dùng trên arduino, bạn có thể kiểm tra phiên bản đang dùng bằng cách vào LIBRARY MANAGER tìm từ khóa lvgl , nếu bạn chưa cài thì bấm cài đặt. Lưu ý phiên bản thư viện ở Arduino IDE phải trùng với phiên bản LVGL trên SquareLine Studio nếu không sẽ không nạp được
  - Sau khi cài đặt tất cả các thông số trên, bấm chọn Create, chúng ta sẽ được một project như hình dưới

Hướng dẫn tạo một giao diện với SquareLine Studio

Sau khi chúng tạo được một project như phía trên, giờ chúng ta sẽ đi tạo một giao diện đơn giản trước nhé.
- Chúng ta kéo nút IMAGE vào trong Screen đã tạo trước đó để tiến hành thêm hình ảnh
- Sau khi thêm Image vào Screen, chúng ta chọn Add File Into Assets để tiến hành thêm hình ảnh
- Chúng ta tìm đến nơi lưu file rồi tiến hành thêm vào
  - Lưu ý :
    - File hình ảnh phải có đuôi .PNG
    - File phải có kích thước tương ứng với kích thước màn hình
- Sau khi thêm xong chúng ta được một hình nằm ở đây
- Tiếp theo để thêm hình vào Screen ở trên thì chúng ta chọn Assets ở phần Menu Inspector , mục Image → chọn hình mong muốn
Sau khi chúng tạo được một giao diện như trên, giờ chúng ta đi xuất file để thêm vào code nhé.
- Đầu tiên, chúng ta chọn vào File → Project Setting
- Hai đường dẫn chính là nơi file được lưu khi xuất, chúng ta dẫn đến thư mục mà đã tạo lưu project ở trên nhé, còn ở dưới là đường dẫn thư viện, chúng ta điền lvgl hoặc lvgl.h là được → xong rồi bấm Appy Changes → như vậy là đã xong
- Tiếp theo là xuất file, các bạn bấm vào Export → Export UI file
- Báo như thế này là đã thành công
Thêm thư viện vào arduino
- Các bạn vào đường link này: https://drive.google.com/file/d/1Ktk-v8lKJdq2gk-WHmlPHzUGtb-ZSoAX/view?usp=drive_link để tải thư viện vào code mẫu nhé. Thư viện này sẽ dùng chung cho ESP32-S3 4.3 inch và ESP32-C3 1.28 inch ( nếu link lỗi vui lòng liên hệ zalo 0344970774 )
- Sau khi tải xong chúng ta có được các thư mục và tệp tin như hình ( số lượng 4 )
- Chúng ta sẽ copy toàn bộ 4 file (thư mục này ) vào thư viện của arduino, chúng ta có thể xem đường dẫn trên phần mềm IDE. Thông thường sẽ là …\Arduino\libraries
- Sau khi copy vào thư viện arduino, chúng ta vào thư mục lvgl (thư mục lvgl trong phần thư viện arduino , không phải lvgl tải xuống lúc nãy ) , copy thư mục demos và examples bỏ vào thư mục src → như vậy là đã hoàn thành xong
- Nếu vào trong thư mục src thấy đã có sẵn 2 thư mục này thì có thể bỏ qua
Xử lý code mẫu và nạp chương trình
- Tải code mẫu cho màn hình ESP32-S3 LCD 4.3 inch :
  https://drive.google.com/file/d/1lqqGl54pcVeTCdS1rM64nsO7un6lWLDw/view?usp=drive_link ( Nếu link lỗi vui lòng liên hệ zalo 0344970774 )
- Sau khi tải về tiến hành giải nén ta được code mẫu nằm trong một số thư mục con …\Code-mau-LVGL\lvgl_Porting\
- Chúng ta sẽ copy thư mục lvgl_Porting ( chứa nhiều file con ) ra một thư mục nào đó để làm một dự án mới. Ở đây mình sẽ tạo thư mục ngoài Desktop tên là test-esps3
- Giờ chúng ta quay lại thư mục chứa file đã tạo giao diện với phần mềm SquareLine Studio. Lúc nãy mình export vào như mục có tên tests3 như hình.
- Các bạn Copy tất các file đó bỏ vào thư mục chứa file code lvgl_Porting ( nằm trong thư mục test-esps3 vừa tạo lúc nãy ). Sau khi copy vào ta được như hình dưới :
- Tiến hành mở file code lvgl_Porting lên, chúng ta được như này. Các bạn lưu ý nếu Arduino IDE đề xuất cập nhật thư viện thì bấm tắt bỏ qua , không được cập nhật nếu không thư viện sẽ không khớp với code mẫu , gây lỗi khi nạp
- Bây giờ chúng ta đi chỉnh sửa đoạn code. Đầu tiên là đoạn code chính lvgl_Porting.ino , các bạn khai báo thêm thư viện #include “ui.h” như hình
- Tiếp theo, các bạn bỏ dòng #include <demos/lv_demos.h> như hình bằng cách thêm 2 dấu // phía trước là được
- Tiếp theo, các bạn bỏ dòng lv_demo_widgets(); giống như trên
- Tiếp theo thêm dòng lệnh ui_init(); vào phần void setup như ảnh để khởi tạo thư viện
- Tiến hành nạp code, các bạn vào phần tools, chọn như sau
- Như vậy đã chọn xong, các bạn chọn port rồi tiến hành nhấn upload là xong và xem kết quả

Hướng dẫn điều khiển từ xa thông qua ESP32 khác

Đầu tiên chúng ta phải hiểu cách thức điều khiển này, nguyên lý hoạt động của cách thức này rất đơn giản, chúng ta sẽ dùng 2 mạch ESP32 giao tiếp với nhau, một truyền, một nhận hoặc cả hai đều có thể truyền nhận hai chiều cho nhau.Việc này thì tùy vào mục đích của chúng ta. Về cách giao tiếp thì chúng ta sẽ cho hai ESP32 giao tiếp với nhau qua wifi hoặc địa chỉ MAC, ở đây thì mình sẽ hướng dẫn cho mọi người giao tiếp qua địa chỉ MAC, về ưu điểm thì cách giao tiếp này sẽ không dùng mạng internet, cho nên rất thích hợp với những trường hợp không có internet, về nhược điểm thì các bạn cũng biết là không có internet nên khoảng cách truyền sẽ ngắn.

Cài đặt thư viện
- Các bạn vào link:
  - https://github.com/espressif/arduino-esp32/tree/master để cài đặt thư viện wifi.h
  - https://github.com/espressif/esp-idf/tree/master để cài đặt thư viện esp_now.h
- Về cách thức hoạt động thì các bạn có thể tham khảo ở link này:
  - https://www.tensorsmarthome.com/tim-hieu-ve-esp-now-voi-esp32/
Tạo giao diện điều khiển với phần mềm SquareLine Studio
- Về cách tạo project thì các bạn có thể xem lại phần trên, sau khi các bạn tạo được một Screen như trên, để điều khiển thì chúng ta cần 2 nút nhấn, các bạn lấy 2 Button ở góc trái phía dưới kéo vào Screen như này
- Các bạn có thể ấn vào các điểm neo để kéo tăng giảm kích thước của nút nhấn
- Các bạn muốn chỉnh hình dạng, màu sắc của nút thì bấm vào Style Settings
- Sau khi các bạn tạo được nút nhấn như mong muốn, giờ chúng ta thêm chữ để ký hiệu, các bạn kéo Label này vào Screen
- Các bạn chỉnh sửa chữ ở mục Text
- Để tăng kích thước chữ, các bạn chọn vào chữ cần tăng → chọn Text → kéo xuống chọn Text Font , tích vào ô đó, ở đây thì có nhiều font cho các bạn lựa chọn, font càng lớn thì chữ sẽ càng lớn
- Như vậy chúng ta đã tạo xong 2 nút nhấn để điều khiển, giờ chúng ta sẽ cấu hình 2 nút nhấn này để điều khiển được nhé. Các bạn chọn vào nút muốn cấu hình, chọn Add Event ở dưới góc phải
- Lúc này sẽ hiện ra bảng Events để cấu hình sự kiện cho nút nhấn
- Ở đây chúng ta cần quan tâm đến 3 thông số
  - Name : tên event – các bạn đặt theo ý mình
  - Trigger : kiểu nhấn nút
  - Action : hoạt động sau khi nhấn nút
- Chúng ta cài đặt như sau:
- Sau khi cài đặt xong, các bạn bấm ADD ở góc dưới, sẽ ra bảng sau
- Ở đây, sẽ ra 1 dòng Action ( CALL FUNCTION ) , chúng ta sẽ đặt tên như tạo hàm con trong arduino

Xử lý code và nạp chương trình

Tiếp tục làm như vậy cho nút còn lại, sau khi xong chúng ta sẽ xuất file ra như cách hướng dẫn ở phần trước, ta được như hình dưới
Bây giờ chúng ta bắt đầu vào phần code, chúng ta vẫn tạo một thư mục, copy đoạn code mẫu lvgl_porting vào đó, rồi copy các file đã xuất từ SquareLine vào chung thư mục như mình đã hướng dẫn ở trên

Bây giờ chúng ta bắt đầu với đoạn code giao tiếp giữa 2 ESP32, đầu tiên chúng ta cần lấy được địa chỉ MAC của ESP32 nhận, các bạn hãy nạp đoạn code này


    
        
            
                #include "WiFi.h"
 
void setup(){
    Serial.begin(115200);
    WiFi.mode(WIFI_MODE_STA);
    Serial.println(WiFi.macAddress());
}
 
void loop()
{

}

Khi nạp xong, các bạn mở Serial monitor lên để xem địa chỉ MAC, các bạn lưu lại địa chỉ MAC này nhé, lưu ý, địa chỉ MAC của mỗi mạch sẽ khác nhau
Sau khi các bạn đã có địa chỉ MAC, giờ chúng ta hãy mở đoạn code mẫu giao diện lên tiến hành chỉnh sửa. Đầu tiên các bạn hãy dán 2 đoạn code này vào để khai báo thư viện
- #include <esp_now.h> #include <WiFi.h>
Tiếp đến là đoạn khai báo địa chỉ MAC này
- uint8_t broadcastAddress[] = {0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF};
Sau khi khai báo dòng code đó, các bạn sẽ thay địa chỉ MAC của mình vừa có được vào vị trí của FF

Tiếp đến là khai báo các biến,ở đây mình sẽ khai báo 2 biến btn1 và btn2 để điều khiển 2 led nhé







                        
                typedef struct struct_message {
    int btn1;
    int btn2;

} struct_message;


struct_message myData;

esp_now_peer_info_t peerInfo;
void OnDataSent(const uint8_t *mac_addr, esp_now_send_status_t status) {
  Serial.print("\r\nLast Packet Send Status:\t");
  Serial.println(status == ESP_NOW_SEND_SUCCESS ? "Delivery Success" : "Delivery Fail");
}

Giờ đến với phần void setup() các bạn copy đoạn code dưới dán vào phần void setup() của code nhé


    
        
            
                Serial.begin(115200);
  WiFi.mode(WIFI_STA);
  if (esp_now_init() != ESP_OK) {
    Serial.println("Error initializing ESP-NOW");
    return;
  }
  esp_now_register_send_cb(OnDataSent);
  memcpy(peerInfo.peer_addr, broadcastAddress, 6);
  peerInfo.channel = 0;  
  peerInfo.encrypt = false;
  if (esp_now_add_peer(&peerInfo) != ESP_OK){
    Serial.println("Failed to add peer");
    return;
 }

Tiếp theo chúng ta qua file ui_events.c, đây chính là 2 dòng code mà chúng ta đã tạo trong phần CALL FUNCTION các bạn cắt 2 dòng này dán trước void loop() nhé
Tiếp theo, chúng ta cần khai báo thêm 2 biến trạng thái của led
- int LED_State_Send1 = 0; int LED_State_Send2 = 0;

Rồi, giờ chúng ta tới đoạn code gửi giá trị đi, các bạn copy bỏ vào 2 hàm void led1 và led2 nhé, lưu ý nhớ đổi tên biến cho phù hợp nhé

LED_State_Send1 = !LED_State_Send1;
myData.btn1 = LED_State_Send1;
esp_err_t result = esp_now_send(broadcastAddress, (uint8_t *) &myData, sizeof(myData));
if (result == ESP_OK) {Serial.println(“Sent with success”);} else {Serial.println(“Error sending the data”);}

Bây giờ chúng ta đến với phần code nhận, các bạn copy code này dán vào Arduino IDE, và nạp. Như vậy là đã hoàn thành. Có một lưu ý nhỏ là các bạn nhớ đặt lại các biến sao cho đúng nhé







                        
                #include <esp_now.h>
#include <WiFi.h>
int led1 = 15;
int led2 = 16;
int LED_State_Receive1;
int LED_State_Receive2;
typedef struct struct_message
{
int btn1;
int btn2;
}
struct_message;
struct_message myData;
void OnDataRecv(const uint8_t * mac, const uint8_t *incomingData, int len) {
  memcpy(&myData, incomingData, sizeof(myData));
  LED_State_Receive1 = myData.btn1;
  LED_State_Receive2 = myData.btn2;
  digitalWrite(led1, LED_State_Receive1);
  digitalWrite(led2, LED_State_Receive2);

}
 
void setup()
{
  Serial.begin(115200);
  pinMode(led1,OUTPUT);
  pinMode(led2,OUTPUT);
  WiFi.mode(WIFI_STA);
  if (esp_now_init() != ESP_OK) {
    Serial.println("Error initializing ESP-NOW");
    return;
  }
  esp_now_register_recv_cb(OnDataRecv);
}
 
void loop() {

}