Giới thiệu Màn hình OLED ESP32 Lora: 8 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:34

Đây là một video khác liên quan đến Giới thiệu về ESP32 LoRa. Lần này, chúng tôi sẽ nói cụ thể về màn hình đồ họa (128x64 pixel). Chúng tôi sẽ sử dụng thư viện SSD1306 để hiển thị thông tin trên màn hình OLED này và trình bày một ví dụ về hoạt ảnh sử dụng hình ảnh XBM.

Bước 1: Tài nguyên được sử dụng

1 Heltec WiFi LoRa 32

Protoboard

Bước 2: Màn hình

Màn hình được sử dụng trên bảng phát triển là OLED 0,96 inch.

Nó có 128x64 và là đơn sắc.

Nó có giao tiếp I2C và được kết nối với ESP32 qua 3 dây:

SDA trên GPIO4 (để biết dữ liệu)

SCL trên GPIO15 (dành cho đồng hồ)

RST trên GPIO16 (để đặt lại và bắt đầu hiển thị)

Bước 3: Thư viện SSD1306

Điều này có thể được tìm thấy cùng với bộ thư viện được cung cấp bởi Heltec-Aaron-Lee.

Nó có một số chức năng để viết chuỗi, vẽ đường, hình chữ nhật, hình tròn và hiển thị hình ảnh.

github.com/Heltec-Aaron-Lee/WiFi_Kit_series

Bước 4: Tập tin Hoạt hình và XBM

Chúng tôi sẽ sử dụng hàm drawXbm của thư viện để hiển thị một hình ảnh động.

Định dạng hình ảnh XBM bao gồm một mảng các ký tự trong đó mỗi phần tử thể hiện bằng văn bản một tập hợp các pixel đơn sắc (mỗi pixel 1 bit), thông qua một giá trị thập lục phân. Chúng tương đương với một byte.

Bởi vì nhiều ký tự được sử dụng để đại diện cho một byte duy nhất, các tệp này có xu hướng lớn hơn so với các tệp từ các định dạng được chấp nhận hiện tại. Ưu điểm là chúng có thể được biên dịch trực tiếp mà không cần phải xử lý trước.

Ngoài mảng, hai cài đặt xác định kích thước hình ảnh được bao gồm.

Để xây dựng hoạt ảnh, chúng ta cần những hình ảnh sẽ tạo thành khung.

Chúng tôi có thể sử dụng bất kỳ phần mềm chỉnh sửa hình ảnh nào để làm việc. Các biện pháp phòng ngừa duy nhất mà chúng ta nên thực hiện trước tiên là giữ kích thước tương thích với màn hình và sử dụng các tệp đơn sắc.

Để tạo tệp, chúng tôi có thể vẽ chúng hoặc nhập hình ảnh. Ở đây, chúng tôi quyết định chỉnh sửa hình ảnh màu bằng PaintBrush và chúng tôi vẽ từng khung một

Hình ảnh gốc - 960x707 pixel - định dạng PNG

Bước tiếp theo là làm cho nó đơn sắc bằng cách lưu nó dưới dạng bitmap đơn sắc.

Sau đó, chúng tôi thay đổi kích thước của nó thành kích thước tương thích với màn hình.

Chú ý cụ thể đến các đơn vị đo lường. Trong trường hợp này, chúng tôi đã điều chỉnh hình ảnh để nó chiếm toàn bộ chiều cao của màn hình (chiều dọc = 64 pixel).

Với hình ảnh đúng kích thước, chúng tôi sẽ chỉnh sửa để tạo thành các khung hình. Ở đây, chúng tôi đang xóa từng cung của mức tín hiệu và lưu chúng thành các khung tương ứng.

Bây giờ, chúng ta phải chuyển đổi tệp BMP sang định dạng XBM.

Có một số tùy chọn phần mềm có thể thực hiện chuyển đổi này. Chúng tôi cũng đã chọn GIMP làm tùy chọn trình chỉnh sửa.

Trong ví dụ của chúng tôi, chúng tôi đã sử dụng PaintBrush để tạo và chỉnh sửa các tệp. Tuy nhiên, mọi quy trình trong số này đều có thể được thực hiện trong Gimp (hoặc bất kỳ trình soạn thảo nào khác).

Để chuyển đổi, trước tiên chúng ta mở tệp.

Với hình ảnh đang mở, chúng ta có thể chọn File => Export as…

Trong cửa sổ Export Image, chúng ta phải thay đổi phần mở rộng tệp đích cho XBM. Gimp sẽ chịu trách nhiệm xác định định dạng mong muốn và trình bày thêm các tùy chọn…

Khi xuất, Gimp sẽ trình bày các tùy chọn khác. Chúng ta có thể để các giá trị mặc định.

Sau khi chuyển đổi tất cả các tệp, chúng tôi sẽ có bốn tệp XBM, một tệp cho mỗi khung.

Bây giờ hãy sao chép chúng vào thư mục mã nguồn và đổi tên chúng bằng cách thay đổi phần mở rộng của chúng thành.h.

Bước 5: Thoát khỏi tệp XBM

Chúng ta có thể mở tệp XBM trong bất kỳ trình soạn thảo văn bản nào, nơi chúng ta sẽ thấy ma trận hình ảnh và thông tin kích thước hình ảnh đã được xác định.

Bước 6: Mã nguồn

Mã nguồn: Tuyên bố

Chúng tôi sẽ bao gồm các thư viện cần thiết, cũng như các tệp hình ảnh. Chúng tôi xác định các vị trí của hình ảnh và khoảng thời gian chuyển tiếp. Chúng tôi cũng chỉ các chân OLED được kết nối với ESP32. Cuối cùng, chúng ta tạo và điều chỉnh đối tượng Display.

// Incluindo dưới dạng thư mục cần thiết # include #include "SSD1306.h" // Incluindo os arquivos de imagem #include "frame1.h" #include "frame2.h" #include "frame3.h" #include "frame4.h" // Defções de posição da imagem e distanceo de transição #define posX 21 #define posY 0 #define distanceo 500 // Pinos do OLED estão conctados ao ESP32: I2C // OLED_SDA - GPIO4 // OLED_SCL - GPIO15 // OLED_RST - - GPIO16 #define SDA 4 #define SCL 15 #define RST 16 // O RST deve ser controlado por phần mềm Màn hình SSD1306 (0x3c, SDA, SCL, RST); // Màn hình hiển thị Cria e ajusta o Objeto

Mã nguồn: Setup ()

Khởi tạo màn hình và đảo ngược chiều dọc màn hình. Hành động là tùy chọn.

void setup () {display.init (); // inicia o display display.flipScreenVerently (); // inverte verticalmente a tela (opcional)}

Mã nguồn: Loop ()

Điều đầu tiên cần làm trong vòng lặp là xóa màn hình. Chúng tôi tải khung 1 vào bộ đệm bằng cách sử dụng các vị trí ban đầu posX và posY. Chúng tôi thông báo kích thước của hình ảnh với frame1_width và frame1_height, và tên của mảng chứa các bit của hình ảnh. Chúng tôi hiển thị bộ đệm trên màn hình và đợi một khoảng thời gian trước khi hiển thị khung tiếp theo.

void loop () {display.clear (); // limpa tela // carrega para o buffer o frame 1 // usando as posições iniciais posX e posY // informationa o tamanho da imagem com frame1_width e frame1_height // informationa o nome da matriz que contem os bits da imagem, no caso frame1_bits display.drawXbm (posX, posY, frame1_width, frame1_height, frame1_bits); // bộ đệm mostra o no display.display (); // aguarda um khoảng thời gian trễ de mostrar o próximo độ trễ khung hình (khoảng thời gian);

Chúng tôi lặp lại quy trình cho tất cả các khung khác.

// khôi phục lại các khung của processo para todos os outros display.clear (); display.drawXbm (posX, posY, frame2_width, frame2_height, frame2_bits); display.display (); độ trễ (khoảng thời gian); display.clear (); display.drawXbm (posX, posY, frame3_width, frame3_height, frame3_bits); display.display (); độ trễ (khoảng thời gian); display.clear (); display.drawXbm (posX, posY, frame4_width, frame4_height, frame4_bits); display.display (); độ trễ (khoảng thời gian); }

Bước 7: Thực hiện UpLoad mã

Với IDE đang mở, hãy mở tệp có mã nguồn bằng cách bấm đúp vào tệp.ino hoặc bằng cách đi tới menu Tệp.

Với Heltec được kết nối với USB, chọn menu Công cụ => Thẻ: "Heltec_WIFI_LoRa_32"

Vẫn trong menu Công cụ, chọn cổng COM nơi Heltec được kết nối.

Nhấp vào nút TẢI LÊN…

… Và chờ kết luận.

Bước 8: Tập tin

Tải xuống các tệp:

PDF

NS