Difference between revisions of "CrowPanel-ESP32-E-Paper-HMI-1.54"
(Created page with "=== CrowPanel ESP32 E-Paper HMI 1.54 === Crowtail-DHT20 CrowPanel-ESP32-E-Paper-HMI-1.54") |
(→Code wifi_http_openweather) |
||
| (80 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
| − | == | + | == E-Paper-HMI-1.54 (Elecrow) == |
| − | + | === Liens externes === | |
| + | https://www.elecrow.com/wiki/CrowPanel_ESP32_E-Paper_HMI_1.54-inch_Display.html Wiki | ||
| − | [[CrowPanel-ESP32-E- | + | https://www.elecrow.com/wiki/CrowPanel_ESP32_E-Paper_1.54-inch_Arduino_Tutorial.html Arduino Setup |
| + | |||
| + | https://www.elecrow.com/crowpanel-esp32-1-54-e-paper-hmi-display-with-152-152-resolution-black-white-color-driven-by-spi-interface.html Shop | ||
| + | |||
| + | BLE debugging assistant | ||
| + | |||
| + | https://www.elecrow.com/1-54-inch-152-152-e-paper-display-black-white-e-ink-display-with-spi-communication.html | ||
| + | |||
| + | === Caractéristiques === | ||
| + | |||
| + | Model: DIE09154S<br> | ||
| + | Driver Chip : <b>SSD1680</b><br> | ||
| + | Résolution 152*152<br> | ||
| + | Couleur noir et blanc<br> | ||
| + | Pilote ESP32-S3 comme contrôleur principal<br> | ||
| + | PSRAM : 8MB<br> | ||
| + | Flash : 8MB<br> | ||
| + | |||
| + | === Images === | ||
| + | [[File:E-Paper-HMI-1.54-1.png|300px]] | ||
| + | |||
| + | [[File:E-Paper-HMI-1.54-2.png|300px]] | ||
| + | [[File:E-Paper-HMI-1.54-3.png|300px]] | ||
| + | |||
| + | === Ressources === | ||
| + | |||
| + | https://www.elecrow.com/download/product/CrowPanel/E-paper/Image2Lcd_v2.9.zip Image2Lcd_v2.9 | ||
| + | |||
| + | https://github.com/Elecrow-RD/CrowPanel-ESP32-1.54-E-paper-HMI-Display-with-152-152 GitHub | ||
| + | |||
| + | https://github.com/Elecrow-RD/CrowPanel-ESP32-1.54-E-paper-HMI-Display-with-152-152/archive/refs/heads/master.zip GitHub ZIP | ||
| + | |||
| + | === Arduine Mise en route (Setup) === | ||
| + | |||
| + | |||
| + | 1. Téléchargez les fichiers de bibliothèque utilisés par ce produit dans le dossier « bibliothèques ». | ||
| + | |||
| + | C:\Users\Documents\Arduino\libraries\ | ||
| + | |||
| + | [[File:CrowPanel-ESP32-Setup-Arduino-1.png|600px]] | ||
| + | |||
| + | CrowPanel-ESP32-1.54-E-paper-HMI-Display-with-152-152-master/example/arduino/libraries/ <b>Voir sur GitHub</b> | ||
| + | |||
| + | 2. Ouvrez l'IDE Arduino<br> | ||
| + | chercher <b>ESP32</b> dans Boards Manager, installez si cela n'est pas déjà fait <br> | ||
| + | <b>by Espressif Systems</b> | ||
| + | |||
| + | [[File:CrowPanel-ESP32-Setup-Arduino-2.jpg|400px]] | ||
| + | |||
| + | 3. Click "Tools"->"Board"->"esp32"->"<b>ESP32S3 Dev Module</b>", | ||
| + | |||
| + | and the "Partition Scheme" select | ||
| + | "Huge APP (3MB No OTA/1MB SPIFFS)", | ||
| + | "PSRAM" select "OPI PSRAM". | ||
| + | |||
| + | [[File:Setup-Arduino-1.png|300px]] | ||
| + | |||
| + | === Librairies === | ||
| + | |||
| + | #include <Arduino.h> // Inclure la bibliothèque principale Arduino | ||
| + | #include "EPD_GUI.h" // Inclure la bibliothèque pour l'écran à encre électronique | ||
| + | #include "Pic.h" // Inclure la bibliothèque de fonctions personnalisées | ||
| + | #include "FS.h" // Bibliothèque du système de fichiers pour les opérations sur les fichiers | ||
| + | #include "SPIFFS.h" // Bibliothèque du système de fichiers SPIFFS pour la lecture et l'écriture de fichiers | ||
| + | #include <WiFi.h> // Bibliothèque WiFi pour la création et la gestion des connexions WiFi | ||
| + | #include <Ticker.h> // Bibliothèque de chronométrage | ||
| + | #include <WebServer.h> // Bibliothèque de serveur Web pour la création d'un serveur HTTP | ||
| + | |||
| + | === Code Exemples === | ||
| + | |||
| + | Arduino Code for demos<br> | ||
| + | 1.54_WIFI_refresh.ino <b>Update via WiFi</b><br> | ||
| + | 1.54_ble_refresh.ino <b>Update via Bluetooth</b><br> | ||
| + | 1.54_wifi_http_openweather.ino<br> | ||
| + | |||
| + | Arduino Code for examples<br> | ||
| + | 1.54_PWR.ino<br> | ||
| + | [[1.54_wifi.ino| 1.54_wifi.ino]]<br> | ||
| + | 1.54_BLE.ino<br> | ||
| + | 1.54_key.ino<br> | ||
| + | 1.54_Global_refresh.ino<br> | ||
| + | 1.54_partial_refresh.ino<br> | ||
| + | |||
| + | [[epd1in54bV2-demo.ino| epd1in54bV2-demo.ino]]<br> | ||
| + | |||
| + | Get Started with Crowpanel E-Paper Screen:<br> | ||
| + | |||
| + | https://www.youtube.com/watch?v=smDFHRxDYdw<br> | ||
| + | Lesson 01 - A Comprehensive Introduction<br> | ||
| + | |||
| + | https://www.youtube.com/watch?v=-9DeXQIjOc0<br> | ||
| + | Lesson 02 - Display Images<br> | ||
| + | |||
| + | https://www.youtube.com/watch?v=7PN9q9b3nKk<br> | ||
| + | Lesson 03 - Display Text<br> | ||
| + | |||
| + | https://www.youtube.com/watch?v=x70f8aAUQBk<br> | ||
| + | Lesson 04 - Transmit Images via Bluetooth<br> | ||
| + | |||
| + | https://www.youtube.com/watch?v=vzq8-aMmTOQ<br> | ||
| + | Lesson 05 - Transmit Images via WiFi<br> | ||
| + | |||
| + | https://www.youtube.com/watch?v=Nb-hP7yaf7Q<br> | ||
| + | Lesson 06 - Setting Up the Calendar Desktop<br> | ||
| + | |||
| + | === Code wifi_http_openweather === | ||
| + | |||
| + | https://openweathermap.org/ Veuillez vous enregistrer afin de vous procurer votre OpenWeatherMap API key | ||
| + | |||
| + | http://bulk.openweathermap.org/sample/ on trouve ici : <b>city.list.json.gz</b>, le countryCode de votre ville (variable city) | ||
| + | |||
| + | <pre> | ||
| + | #include <WiFi.h> | ||
| + | #include <HTTPClient.h> | ||
| + | #include <Arduino_JSON.h> | ||
| + | #include "EPD_GUI.h" | ||
| + | #include "Pic.h" | ||
| + | |||
| + | // Define an array for black and white image data, which serves as the buffer for the e-paper display. | ||
| + | // The size of the buffer is determined according to the resolution of the e-paper display. | ||
| + | uint8_t ImageBW[2888]; | ||
| + | |||
| + | // WiFi network name // WiFi password | ||
| + | const char* ssid = "yanfa_software"; | ||
| + | const char* password = "yanfa-123456"; | ||
| + | |||
| + | // OpenWeatherMap API key. This key is used to access weather data from the OpenWeatherMap API. | ||
| + | String openWeatherMapApiKey = "3c03d1f4e2dd3e14474a9a3a2f2299ff"; | ||
| + | |||
| + | // City and country code for which weather data will be fetched. | ||
| + | String city = "London"; | ||
| + | String countryCode = "2643743"; | ||
| + | |||
| + | // Variables related to timing and API calls. | ||
| + | // lastTime keeps track of the last time the API was called. | ||
| + | unsigned long lastTime = 0; | ||
| + | // timerDelay determines the time interval between API calls. For testing, it's set to 10 seconds (10000 milliseconds). | ||
| + | // In a final application, this should be set according to the API call limits per hour/minute. | ||
| + | unsigned long timerDelay = 10000; | ||
| + | |||
| + | // Variables related to JSON data. | ||
| + | // jsonBuffer stores the raw JSON data received from the API. | ||
| + | String jsonBuffer; | ||
| + | // httpResponseCode holds the response code from the HTTP request. | ||
| + | int httpResponseCode; | ||
| + | // myObject is a JSON variable that will hold the parsed JSON data. | ||
| + | JSONVar myObject; | ||
| + | |||
| + | // Variables related to weather information. | ||
| + | // weather stores the main weather description. | ||
| + | String weather; | ||
| + | // temperature stores the temperature value. | ||
| + | String temperature; | ||
| + | // humidity stores the humidity value. | ||
| + | String humidity; | ||
| + | // sea_level stores the sea level value. | ||
| + | String sea_level; | ||
| + | // wind_speed stores the wind speed value. | ||
| + | String wind_speed; | ||
| + | // city_js stores the name of the city. | ||
| + | String city_js; | ||
| + | // weather_flag is a flag that determines which weather icon to display based on the weather description. | ||
| + | int weather_flag = 0; | ||
| + | |||
| + | // Function to display weather forecast on the e-paper display. | ||
| + | void UI_weather_forecast() | ||
| + | { | ||
| + | char buffer[40]; | ||
| + | |||
| + | EPD_HW_RESET(); | ||
| + | |||
| + | // Display a background picture on the e-paper. | ||
| + | EPD_ShowPicture(0, 0, 152, 152, pic, BLACK); | ||
| + | |||
| + | |||
| + | //If you need to replace the display options, | ||
| + | //open the following options: temp, wind, visit, hum | ||
| + | //The following uses the hum option as an example | ||
| + | |||
| + | //Visit | ||
| + | //EPD_ShowPicture(76, 92, 56, 72, gImage_visit, BLACK); | ||
| + | //Wind | ||
| + | //EPD_ShowPicture(76, 92, 56, 72, gImage_wind, BLACK); | ||
| + | //Temp | ||
| + | // EPD_ShowPicture(92, 0, 56, 72, gImage_temp, BLACK); | ||
| + | //Hum | ||
| + | |||
| + | EPD_Display(ImageBW); | ||
| + | EPD_FastUpdate(); | ||
| + | EPD_DeepSleep(); | ||
| + | |||
| + | EPD_GPIOInit(); | ||
| + | Paint_NewImage(ImageBW, EPD_W, EPD_H, 270, WHITE); | ||
| + | // Paint_Clear(WHITE); | ||
| + | EPD_FastMode1Init(); | ||
| + | // EPD_Display_Clear(); | ||
| + | EPD_FastUpdate(); | ||
| + | EPD_Clear_R26H(); | ||
| + | |||
| + | // Display the update time (it seems to be mislabeled as city_js here, might need to be corrected depending on the actual intention). | ||
| + | memset(buffer, 0, sizeof(buffer)); | ||
| + | snprintf(buffer, sizeof(buffer), "%s ", city_js); | ||
| + | EPD_ShowString(20, 140, buffer, 12, BLACK); | ||
| + | |||
| + | //If you need to replace the display options, | ||
| + | //open the following options: temp, wind, visit, hum | ||
| + | //The following uses the hum option as an example | ||
| + | |||
| + | //Hum | ||
| + | memset(buffer, 0, sizeof(buffer)); | ||
| + | snprintf(buffer, sizeof(buffer), "%s ", humidity); | ||
| + | EPD_ShowString(105, 140, buffer, 12, BLACK); | ||
| + | |||
| + | //Temp | ||
| + | // memset(buffer, 0, sizeof(buffer)); | ||
| + | // snprintf(buffer, sizeof(buffer), "%s C", temperature); | ||
| + | // EPD_ShowString(105, 140, buffer, 12, BLACK); | ||
| + | |||
| + | //Wind | ||
| + | // memset(buffer, 0, sizeof(buffer)); | ||
| + | // snprintf(buffer, sizeof(buffer), "%s m/s", wind_speed); | ||
| + | // EPD_ShowString(105, 140, buffer, 12, BLACK); | ||
| + | |||
| + | //visit | ||
| + | // memset(buffer, 0, sizeof(buffer)); | ||
| + | // snprintf(buffer, sizeof(buffer), "%s ", sea_level); | ||
| + | // EPD_ShowString(105, 140, buffer, 12, BLACK); | ||
| + | |||
| + | // Update the e-paper display with the new content. | ||
| + | EPD_Display(ImageBW); | ||
| + | EPD_FastUpdate(); | ||
| + | EPD_DeepSleep(); | ||
| + | } | ||
| + | |||
| + | void setup() { | ||
| + | Serial.begin(115200); // Initialize the serial communication. | ||
| + | |||
| + | // Connect to the WiFi network. | ||
| + | WiFi.begin(ssid, password); | ||
| + | Serial.println("Connecting"); | ||
| + | while (WiFi.status() != WL_CONNECTED) { | ||
| + | delay(500); | ||
| + | Serial.print("."); | ||
| + | } | ||
| + | Serial.println(""); | ||
| + | Serial.print("Connected to WiFi network with IP Address: "); | ||
| + | Serial.println(WiFi.localIP()); // Print the IP address of the device after successful connection. | ||
| + | |||
| + | Serial.println("Timer set to 10 seconds (timerDelay variable), it will take 10 seconds before publishing the first reading."); | ||
| + | |||
| + | // Set pin 7 as an output pin to control the power of the e-paper display. | ||
| + | pinMode(7, OUTPUT); | ||
| + | digitalWrite(7, HIGH); | ||
| + | |||
| + | EPD_GPIOInit(); | ||
| + | Paint_NewImage(ImageBW, EPD_W, EPD_H, 0, WHITE); | ||
| + | Paint_Clear(WHITE); | ||
| + | EPD_FastMode1Init(); | ||
| + | EPD_Display_Clear(); | ||
| + | EPD_FastUpdate(); | ||
| + | EPD_Clear_R26H(); | ||
| + | } | ||
| + | |||
| + | void loop() { | ||
| + | js_analysis(); | ||
| + | UI_weather_forecast(); | ||
| + | delay(1000 * 60 * 60); | ||
| + | } | ||
| + | |||
| + | void js_analysis() | ||
| + | { | ||
| + | // Check if the device is connected to the WiFi network. | ||
| + | if (WiFi.status() == WL_CONNECTED) { | ||
| + | // Construct the URL for the OpenWeatherMap API request. | ||
| + | String serverPath = "http://api.openweathermap.org/data/2.5/weather?q=" + city + "," + countryCode + "&APPID=" + openWeatherMapApiKey + "&units=metric"; | ||
| + | |||
| + | // Keep trying until a successful response (status code 200) is received. | ||
| + | while (httpResponseCode != 200) { | ||
| + | // Make an HTTP GET request to the API and store the response in jsonBuffer. | ||
| + | jsonBuffer = httpGETRequest(serverPath.c_str()); | ||
| + | Serial.println(jsonBuffer); | ||
| + | myObject = JSON.parse(jsonBuffer); | ||
| + | |||
| + | // Check if the JSON parsing was successful. | ||
| + | if (JSON.typeof(myObject) == "undefined") { | ||
| + | Serial.println("Parsing input failed!"); | ||
| + | return; | ||
| + | } | ||
| + | delay(2000); | ||
| + | } | ||
| + | |||
| + | // Extract weather information from the parsed JSON data. | ||
| + | weather = JSON.stringify(myObject["weather"][0]["main"]); | ||
| + | temperature = JSON.stringify(myObject["main"]["temp"]); | ||
| + | humidity = JSON.stringify(myObject["main"]["humidity"]); | ||
| + | sea_level = JSON.stringify(myObject["main"]["sea_level"]); | ||
| + | wind_speed = JSON.stringify(myObject["wind"]["speed"]); | ||
| + | city_js = JSON.stringify(myObject["name"]); | ||
| + | |||
| + | // Print the extracted weather information for debugging purposes. | ||
| + | Serial.print("String weather: "); | ||
| + | Serial.println(weather); | ||
| + | Serial.print("String Temperature: "); | ||
| + | Serial.println(temperature); | ||
| + | Serial.print("String humidity: "); | ||
| + | Serial.println(humidity); | ||
| + | Serial.print("String sea_level: "); | ||
| + | Serial.println(sea_level); | ||
| + | Serial.print("String wind_speed: "); | ||
| + | Serial.println(wind_speed); | ||
| + | Serial.print("String city_js: "); | ||
| + | Serial.println(city_js); | ||
| + | |||
| + | // Determine the weather icon based on the weather description. | ||
| + | if (weather.indexOf("clouds") != -1 || weather.indexOf("Clouds") != -1 ) { | ||
| + | weather_flag = 1; | ||
| + | } else if (weather.indexOf("clear sky") != -1 || weather.indexOf("Clear sky") != -1) { | ||
| + | weather_flag = 3; | ||
| + | } else if (weather.indexOf("rain") != -1 || weather.indexOf("Rain") != -1) { | ||
| + | weather_flag = 5; | ||
| + | } else if (weather.indexOf("thunderstorm") != -1 || weather.indexOf("Thunderstorm") != -1) { | ||
| + | weather_flag = 2; | ||
| + | } else if (weather.indexOf("snow") != -1 || weather.indexOf("Snow") != -1) { | ||
| + | weather_flag = 4; | ||
| + | } else if (weather.indexOf("mist") != -1 || weather.indexOf("Mist") != -1) { | ||
| + | weather_flag = 0; | ||
| + | } | ||
| + | } | ||
| + | else { | ||
| + | // Print a message if the device is not connected to the WiFi network. | ||
| + | Serial.println("WiFi Disconnected"); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | // Function to make an HTTP GET request and return the response. | ||
| + | String httpGETRequest(const char* serverName) { | ||
| + | WiFiClient client; | ||
| + | HTTPClient http; | ||
| + | |||
| + | // Initialize the HTTP client with the server name. | ||
| + | http.begin(client, serverName); | ||
| + | |||
| + | // Send an HTTP GET request. | ||
| + | httpResponseCode = http.GET(); | ||
| + | |||
| + | // Initialize the response payload as an empty JSON object. | ||
| + | String payload = "{}"; | ||
| + | |||
| + | // Check if the response code is positive (indicating a successful request). | ||
| + | if (httpResponseCode > 0) { | ||
| + | Serial.print("HTTP Response code: "); | ||
| + | Serial.println(httpResponseCode); | ||
| + | payload = http.getString(); | ||
| + | } | ||
| + | else { | ||
| + | Serial.print("Error code: "); | ||
| + | Serial.println(httpResponseCode); | ||
| + | } | ||
| + | |||
| + | // Close the HTTP connection. | ||
| + | http.end(); | ||
| + | |||
| + | return payload; | ||
| + | } | ||
| + | </pre> | ||
| + | |||
| + | Explications : Partie à modifier avec vos données, ssid, password, openWeatherMapApiKey, city, countryCode | ||
| + | |||
| + | <pre> | ||
| + | // WiFi network name // WiFi password | ||
| + | |||
| + | const char* ssid = "yanfa_software"; | ||
| + | const char* password = "yanfa-123456"; | ||
| + | |||
| + | // OpenWeatherMap API key. This key is used to access weather data from the OpenWeatherMap API. | ||
| + | String openWeatherMapApiKey = "3c03d1f4e2dd3e14474a9a3a2f2299ff"; | ||
| + | |||
| + | // City and country code for which weather data will be fetched. | ||
| + | String city = "London"; | ||
| + | String countryCode = "2643743"; | ||
| + | </pre> | ||
| + | |||
| + | |||
| + | <pre> | ||
| + | |||
| + | 🔎 Décryptage | ||
| + | définition d’un pictogramme dans le fichier Pic.h | ||
| + | |||
| + | const unsigned char gImage_wind[504] = { /* 0X00,0X01,0X48,0X00,0X38,0X00, */ | ||
| + | ... données binaires ... | ||
| + | }; | ||
| + | |||
| + | gImage_wind → c’est le tableau qui contient les pixels de l'icône “vent”. | ||
| + | [504] → taille du tableau en octets. | ||
| + | Le commentaire /* 0X00,0X01,0X48,0X00,0X38,0X00, */ → ce sont les métadonnées générées par l’outil de conversion (souvent Image2Lcd). | ||
| + | Elles indiquent la largeur et la hauteur de l’image : | ||
| + | 0X48 = 72 en décimal → hauteur de l’image. | ||
| + | 0X38 = 56 en décimal → largeur de l’image. | ||
| + | Donc le pictogramme fait 56 × 72 pixels. | ||
| + | |||
| + | 🔧 Comment l’utiliser | ||
| + | |||
| + | Pour afficher le pictogramme sur l'écran e-paper, il faut : | ||
| + | |||
| + | EPD_ShowPicture(x, y, 56, 72, gImage_wind, BLACK); | ||
| + | x, y → position sur l’écran (par exemple 10, 30 pour la gauche). | ||
| + | 56, 72 → largeur et hauteur (comme indiqué dans le commentaire). | ||
| + | gImage_wind → le tableau que tu viens de voir. | ||
| + | BLACK → couleur d’affichage (noir sur fond blanc). | ||
| + | |||
| + | ✅ Exemple avec deux pictos (vent à gauche, humidité à droite) | ||
| + | |||
| + | void UI_two_icons_demo() { | ||
| + | EPD_HW_RESET(); | ||
| + | Paint_NewImage(ImageBW, EPD_W, EPD_H, 0, WHITE); | ||
| + | Paint_Clear(WHITE); | ||
| + | |||
| + | // Vent à gauche | ||
| + | EPD_ShowPicture(10, 30, 56, 72, gImage_wind, BLACK); | ||
| + | |||
| + | // Humidité à droite (exemple, suppose que tu as gImage_hum dans Pic.h) | ||
| + | EPD_ShowPicture(90, 30, 56, 72, gImage_hum, BLACK); | ||
| + | |||
| + | EPD_Display(ImageBW); | ||
| + | EPD_FastUpdate(); | ||
| + | EPD_DeepSleep(); | ||
| + | } | ||
| + | |||
| + | </pre> | ||
| + | |||
| + | === Code HelloWord === | ||
| + | |||
| + | Basé sur le code https://github.com/HalfSweetStudio/EPaperDrive/blob/main/examples/HelloWorld/HelloWorld.ino | ||
| + | |||
| + | <pre> | ||
| + | /** | ||
| + | * @file HelloWorld.ino | ||
| + | * @author HalfSweet (Email:HalfSweet@HalfSweet.cn or QQ:2522182733) | ||
| + | * @brief Ce fichier est un exemple de programme permettant d'afficher «Hello World» sur un écran à encre électronique. | ||
| + | * Il illustre uniquement la méthode la plus simple pour allumer l'écran. | ||
| + | * Veuillez consulter la documentation pour connaître l'utilisation des différentes fonctions. | ||
| + | * @version 0.1 | ||
| + | * @date 2022-01-30 | ||
| + | * | ||
| + | * @copyright Copyright (c) 2022 | ||
| + | * | ||
| + | */ | ||
| + | #include <Arduino.h> | ||
| + | #include <EPaperDrive.h> | ||
| + | // Inclure le système de fichiers à utiliser, par exemple: | ||
| + | #include <LittleFS.h> | ||
| + | |||
| + | #define BAUD_SPEED 74880 // Débit en bauds pour le débogage du port série, modifiable selon les besoins | ||
| + | |||
| + | #define CS 15 | ||
| + | #define RST 2 | ||
| + | #define DC 0 | ||
| + | #define BUSY 4 | ||
| + | #define CLK 14 | ||
| + | #define DIN 13 | ||
| + | |||
| + | EPaperDrive EPD(0, CS, RST, DC, BUSY, CLK, DIN); //Instanciation de la bibliothèque de pilotes, utilisant ici le protocole SPI logiciel | ||
| + | |||
| + | const uint8_t city_icon[24] = { | ||
| + | /* 0X01,0X01,0X0C,0X00,0X0C,0X00, */ | ||
| + | 0X00, | ||
| + | 0X00, | ||
| + | 0X1C, | ||
| + | 0X00, | ||
| + | 0X77, | ||
| + | 0X00, | ||
| + | 0X41, | ||
| + | 0X80, | ||
| + | 0X9C, | ||
| + | 0X60, | ||
| + | 0XA2, | ||
| + | 0X30, | ||
| + | 0XA2, | ||
| + | 0X30, | ||
| + | 0X9C, | ||
| + | 0XC0, | ||
| + | 0X41, | ||
| + | 0X80, | ||
| + | 0X77, | ||
| + | 0X00, | ||
| + | 0X1C, | ||
| + | 0X00, | ||
| + | 0X00, | ||
| + | 0X00, | ||
| + | }; | ||
| + | |||
| + | void setup() | ||
| + | { | ||
| + | Serial.begin(BAUD_SPEED); | ||
| + | LittleFS.begin(); // Veuillez initialiser manuellement le système de fichiers avant de passer le pointeur. | ||
| + | |||
| + | EPD.SetFS(&LittleFS); // Définit le système de fichiers pour le stockage des polices. La valeur passée est le pointeur d'opération pour ce système de fichiers. | ||
| + | //Vous pouvez la modifier. | ||
| + | EPD.EPD_Set_Model(HINKE0266A15A0); // Définit le type d'écran. Consultez la documentation pour les modèles spécifiques. | ||
| + | EPD.EPD_init_Full(); // Initialisation du rafraîchissement complet, en utilisant la forme d'onde de rafraîchissement complet. | ||
| + | EPD.clearbuffer(); // Efface le tampon (écran blanc). | ||
| + | EPD.fontscale = 2; // Facteur d'échelle des polices (1 et 2 pris en charge, également applicable aux images. | ||
| + | // N'oubliez pas de le remettre à 1 après utilisation). | ||
| + | EPD.SetFont(FONT12); // Sélectionne la police. Consultez la documentation pour connaître les polices prises en charge. | ||
| + | EPD.DrawUTF(0, 0, "Hello"); // Dessiner la chaîne | ||
| + | EPD.DrawUTF(26, 0, "J'aime les écrans à encre électronique"); | ||
| + | // Dessiner la chaîne | ||
| + | EPD.fontscale = 1; // Rétablir le facteur d'échelle de la police à 1 | ||
| + | EPD.DrawXbm_P(60, 0, 12, 12, (uint8_t *)city_icon); // Dessiner l'image | ||
| + | |||
| + | Serial.printf("Image tamponnée dessinée, prête pour un rafraîchissement complet\n"); | ||
| + | |||
| + | EPD.EPD_Dis_Full((uint8_t *)EPD.EPDbuffer, 1); // Transmettre l'image tamponnée à la puce de contrôle de l'écran pour un rafraîchissement complet | ||
| + | EPD.deepsleep(); // Mettre l'écran en veille | ||
| + | Serial.println("Rafraîchissement complet terminé"); | ||
| + | |||
| + | delay(5000); | ||
| + | |||
| + | EPD.EPD_init_Part(); // Initialiser la partie Actualisation | ||
| + | EPD.clearbuffer(); | ||
| + | EPD.fontscale = 2; | ||
| + | EPD.SetFont(FONT12); EPD.DrawUTF(0, 0, "Actualisation locale activée"); | ||
| + | Serial.printf("Actualisation locale en cours\n"); | ||
| + | |||
| + | EPD.EPD_Dis_Part(0, 23, 0, 199, (uint8_t *)EPD.EPDbuffer, 1); // Transfert de l'image du tampon vers la puce de contrôle d'écran pour l'actualisation locale sur le nouvel écran | ||
| + | Serial.printf("Actualisation locale terminée\n"); | ||
| + | EPD.deepsleep(); | ||
| + | |||
| + | } void loop() | ||
| + | |||
| + | { | ||
| + | delay(1); // Empêcher le chien de garde de s'interrompre | ||
| + | |||
| + | } | ||
| + | </pre> | ||
Latest revision as of 19:09, 6 December 2025
Contents
E-Paper-HMI-1.54 (Elecrow)[edit]
Liens externes[edit]
https://www.elecrow.com/wiki/CrowPanel_ESP32_E-Paper_HMI_1.54-inch_Display.html Wiki
https://www.elecrow.com/wiki/CrowPanel_ESP32_E-Paper_1.54-inch_Arduino_Tutorial.html Arduino Setup
BLE debugging assistant
Caractéristiques[edit]
Model: DIE09154S
Driver Chip : SSD1680
Résolution 152*152
Couleur noir et blanc
Pilote ESP32-S3 comme contrôleur principal
PSRAM : 8MB
Flash : 8MB
Images[edit]
Ressources[edit]
https://www.elecrow.com/download/product/CrowPanel/E-paper/Image2Lcd_v2.9.zip Image2Lcd_v2.9
https://github.com/Elecrow-RD/CrowPanel-ESP32-1.54-E-paper-HMI-Display-with-152-152 GitHub
Arduine Mise en route (Setup)[edit]
1. Téléchargez les fichiers de bibliothèque utilisés par ce produit dans le dossier « bibliothèques ».
C:\Users\Documents\Arduino\libraries\
CrowPanel-ESP32-1.54-E-paper-HMI-Display-with-152-152-master/example/arduino/libraries/ Voir sur GitHub
2. Ouvrez l'IDE Arduino
chercher ESP32 dans Boards Manager, installez si cela n'est pas déjà fait
by Espressif Systems
3. Click "Tools"->"Board"->"esp32"->"ESP32S3 Dev Module",
and the "Partition Scheme" select "Huge APP (3MB No OTA/1MB SPIFFS)", "PSRAM" select "OPI PSRAM".
Librairies[edit]
#include <Arduino.h> // Inclure la bibliothèque principale Arduino #include "EPD_GUI.h" // Inclure la bibliothèque pour l'écran à encre électronique #include "Pic.h" // Inclure la bibliothèque de fonctions personnalisées #include "FS.h" // Bibliothèque du système de fichiers pour les opérations sur les fichiers #include "SPIFFS.h" // Bibliothèque du système de fichiers SPIFFS pour la lecture et l'écriture de fichiers #include <WiFi.h> // Bibliothèque WiFi pour la création et la gestion des connexions WiFi #include <Ticker.h> // Bibliothèque de chronométrage #include <WebServer.h> // Bibliothèque de serveur Web pour la création d'un serveur HTTP
Code Exemples[edit]
Arduino Code for demos
1.54_WIFI_refresh.ino Update via WiFi
1.54_ble_refresh.ino Update via Bluetooth
1.54_wifi_http_openweather.ino
Arduino Code for examples
1.54_PWR.ino
1.54_wifi.ino
1.54_BLE.ino
1.54_key.ino
1.54_Global_refresh.ino
1.54_partial_refresh.ino
Get Started with Crowpanel E-Paper Screen:
https://www.youtube.com/watch?v=smDFHRxDYdw
Lesson 01 - A Comprehensive Introduction
https://www.youtube.com/watch?v=-9DeXQIjOc0
Lesson 02 - Display Images
https://www.youtube.com/watch?v=7PN9q9b3nKk
Lesson 03 - Display Text
https://www.youtube.com/watch?v=x70f8aAUQBk
Lesson 04 - Transmit Images via Bluetooth
https://www.youtube.com/watch?v=vzq8-aMmTOQ
Lesson 05 - Transmit Images via WiFi
https://www.youtube.com/watch?v=Nb-hP7yaf7Q
Lesson 06 - Setting Up the Calendar Desktop
Code wifi_http_openweather[edit]
https://openweathermap.org/ Veuillez vous enregistrer afin de vous procurer votre OpenWeatherMap API key
http://bulk.openweathermap.org/sample/ on trouve ici : city.list.json.gz, le countryCode de votre ville (variable city)
#include <WiFi.h>
#include <HTTPClient.h>
#include <Arduino_JSON.h>
#include "EPD_GUI.h"
#include "Pic.h"
// Define an array for black and white image data, which serves as the buffer for the e-paper display.
// The size of the buffer is determined according to the resolution of the e-paper display.
uint8_t ImageBW[2888];
// WiFi network name // WiFi password
const char* ssid = "yanfa_software";
const char* password = "yanfa-123456";
// OpenWeatherMap API key. This key is used to access weather data from the OpenWeatherMap API.
String openWeatherMapApiKey = "3c03d1f4e2dd3e14474a9a3a2f2299ff";
// City and country code for which weather data will be fetched.
String city = "London";
String countryCode = "2643743";
// Variables related to timing and API calls.
// lastTime keeps track of the last time the API was called.
unsigned long lastTime = 0;
// timerDelay determines the time interval between API calls. For testing, it's set to 10 seconds (10000 milliseconds).
// In a final application, this should be set according to the API call limits per hour/minute.
unsigned long timerDelay = 10000;
// Variables related to JSON data.
// jsonBuffer stores the raw JSON data received from the API.
String jsonBuffer;
// httpResponseCode holds the response code from the HTTP request.
int httpResponseCode;
// myObject is a JSON variable that will hold the parsed JSON data.
JSONVar myObject;
// Variables related to weather information.
// weather stores the main weather description.
String weather;
// temperature stores the temperature value.
String temperature;
// humidity stores the humidity value.
String humidity;
// sea_level stores the sea level value.
String sea_level;
// wind_speed stores the wind speed value.
String wind_speed;
// city_js stores the name of the city.
String city_js;
// weather_flag is a flag that determines which weather icon to display based on the weather description.
int weather_flag = 0;
// Function to display weather forecast on the e-paper display.
void UI_weather_forecast()
{
char buffer[40];
EPD_HW_RESET();
// Display a background picture on the e-paper.
EPD_ShowPicture(0, 0, 152, 152, pic, BLACK);
//If you need to replace the display options,
//open the following options: temp, wind, visit, hum
//The following uses the hum option as an example
//Visit
//EPD_ShowPicture(76, 92, 56, 72, gImage_visit, BLACK);
//Wind
//EPD_ShowPicture(76, 92, 56, 72, gImage_wind, BLACK);
//Temp
// EPD_ShowPicture(92, 0, 56, 72, gImage_temp, BLACK);
//Hum
EPD_Display(ImageBW);
EPD_FastUpdate();
EPD_DeepSleep();
EPD_GPIOInit();
Paint_NewImage(ImageBW, EPD_W, EPD_H, 270, WHITE);
// Paint_Clear(WHITE);
EPD_FastMode1Init();
// EPD_Display_Clear();
EPD_FastUpdate();
EPD_Clear_R26H();
// Display the update time (it seems to be mislabeled as city_js here, might need to be corrected depending on the actual intention).
memset(buffer, 0, sizeof(buffer));
snprintf(buffer, sizeof(buffer), "%s ", city_js);
EPD_ShowString(20, 140, buffer, 12, BLACK);
//If you need to replace the display options,
//open the following options: temp, wind, visit, hum
//The following uses the hum option as an example
//Hum
memset(buffer, 0, sizeof(buffer));
snprintf(buffer, sizeof(buffer), "%s ", humidity);
EPD_ShowString(105, 140, buffer, 12, BLACK);
//Temp
// memset(buffer, 0, sizeof(buffer));
// snprintf(buffer, sizeof(buffer), "%s C", temperature);
// EPD_ShowString(105, 140, buffer, 12, BLACK);
//Wind
// memset(buffer, 0, sizeof(buffer));
// snprintf(buffer, sizeof(buffer), "%s m/s", wind_speed);
// EPD_ShowString(105, 140, buffer, 12, BLACK);
//visit
// memset(buffer, 0, sizeof(buffer));
// snprintf(buffer, sizeof(buffer), "%s ", sea_level);
// EPD_ShowString(105, 140, buffer, 12, BLACK);
// Update the e-paper display with the new content.
EPD_Display(ImageBW);
EPD_FastUpdate();
EPD_DeepSleep();
}
void setup() {
Serial.begin(115200); // Initialize the serial communication.
// Connect to the WiFi network.
WiFi.begin(ssid, password);
Serial.println("Connecting");
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Connected to WiFi network with IP Address: ");
Serial.println(WiFi.localIP()); // Print the IP address of the device after successful connection.
Serial.println("Timer set to 10 seconds (timerDelay variable), it will take 10 seconds before publishing the first reading.");
// Set pin 7 as an output pin to control the power of the e-paper display.
pinMode(7, OUTPUT);
digitalWrite(7, HIGH);
EPD_GPIOInit();
Paint_NewImage(ImageBW, EPD_W, EPD_H, 0, WHITE);
Paint_Clear(WHITE);
EPD_FastMode1Init();
EPD_Display_Clear();
EPD_FastUpdate();
EPD_Clear_R26H();
}
void loop() {
js_analysis();
UI_weather_forecast();
delay(1000 * 60 * 60);
}
void js_analysis()
{
// Check if the device is connected to the WiFi network.
if (WiFi.status() == WL_CONNECTED) {
// Construct the URL for the OpenWeatherMap API request.
String serverPath = "http://api.openweathermap.org/data/2.5/weather?q=" + city + "," + countryCode + "&APPID=" + openWeatherMapApiKey + "&units=metric";
// Keep trying until a successful response (status code 200) is received.
while (httpResponseCode != 200) {
// Make an HTTP GET request to the API and store the response in jsonBuffer.
jsonBuffer = httpGETRequest(serverPath.c_str());
Serial.println(jsonBuffer);
myObject = JSON.parse(jsonBuffer);
// Check if the JSON parsing was successful.
if (JSON.typeof(myObject) == "undefined") {
Serial.println("Parsing input failed!");
return;
}
delay(2000);
}
// Extract weather information from the parsed JSON data.
weather = JSON.stringify(myObject["weather"][0]["main"]);
temperature = JSON.stringify(myObject["main"]["temp"]);
humidity = JSON.stringify(myObject["main"]["humidity"]);
sea_level = JSON.stringify(myObject["main"]["sea_level"]);
wind_speed = JSON.stringify(myObject["wind"]["speed"]);
city_js = JSON.stringify(myObject["name"]);
// Print the extracted weather information for debugging purposes.
Serial.print("String weather: ");
Serial.println(weather);
Serial.print("String Temperature: ");
Serial.println(temperature);
Serial.print("String humidity: ");
Serial.println(humidity);
Serial.print("String sea_level: ");
Serial.println(sea_level);
Serial.print("String wind_speed: ");
Serial.println(wind_speed);
Serial.print("String city_js: ");
Serial.println(city_js);
// Determine the weather icon based on the weather description.
if (weather.indexOf("clouds") != -1 || weather.indexOf("Clouds") != -1 ) {
weather_flag = 1;
} else if (weather.indexOf("clear sky") != -1 || weather.indexOf("Clear sky") != -1) {
weather_flag = 3;
} else if (weather.indexOf("rain") != -1 || weather.indexOf("Rain") != -1) {
weather_flag = 5;
} else if (weather.indexOf("thunderstorm") != -1 || weather.indexOf("Thunderstorm") != -1) {
weather_flag = 2;
} else if (weather.indexOf("snow") != -1 || weather.indexOf("Snow") != -1) {
weather_flag = 4;
} else if (weather.indexOf("mist") != -1 || weather.indexOf("Mist") != -1) {
weather_flag = 0;
}
}
else {
// Print a message if the device is not connected to the WiFi network.
Serial.println("WiFi Disconnected");
}
}
// Function to make an HTTP GET request and return the response.
String httpGETRequest(const char* serverName) {
WiFiClient client;
HTTPClient http;
// Initialize the HTTP client with the server name.
http.begin(client, serverName);
// Send an HTTP GET request.
httpResponseCode = http.GET();
// Initialize the response payload as an empty JSON object.
String payload = "{}";
// Check if the response code is positive (indicating a successful request).
if (httpResponseCode > 0) {
Serial.print("HTTP Response code: ");
Serial.println(httpResponseCode);
payload = http.getString();
}
else {
Serial.print("Error code: ");
Serial.println(httpResponseCode);
}
// Close the HTTP connection.
http.end();
return payload;
}
Explications : Partie à modifier avec vos données, ssid, password, openWeatherMapApiKey, city, countryCode
// WiFi network name // WiFi password const char* ssid = "yanfa_software"; const char* password = "yanfa-123456"; // OpenWeatherMap API key. This key is used to access weather data from the OpenWeatherMap API. String openWeatherMapApiKey = "3c03d1f4e2dd3e14474a9a3a2f2299ff"; // City and country code for which weather data will be fetched. String city = "London"; String countryCode = "2643743";
🔎 Décryptage
définition d’un pictogramme dans le fichier Pic.h
const unsigned char gImage_wind[504] = { /* 0X00,0X01,0X48,0X00,0X38,0X00, */
... données binaires ...
};
gImage_wind → c’est le tableau qui contient les pixels de l'icône “vent”.
[504] → taille du tableau en octets.
Le commentaire /* 0X00,0X01,0X48,0X00,0X38,0X00, */ → ce sont les métadonnées générées par l’outil de conversion (souvent Image2Lcd).
Elles indiquent la largeur et la hauteur de l’image :
0X48 = 72 en décimal → hauteur de l’image.
0X38 = 56 en décimal → largeur de l’image.
Donc le pictogramme fait 56 × 72 pixels.
🔧 Comment l’utiliser
Pour afficher le pictogramme sur l'écran e-paper, il faut :
EPD_ShowPicture(x, y, 56, 72, gImage_wind, BLACK);
x, y → position sur l’écran (par exemple 10, 30 pour la gauche).
56, 72 → largeur et hauteur (comme indiqué dans le commentaire).
gImage_wind → le tableau que tu viens de voir.
BLACK → couleur d’affichage (noir sur fond blanc).
✅ Exemple avec deux pictos (vent à gauche, humidité à droite)
void UI_two_icons_demo() {
EPD_HW_RESET();
Paint_NewImage(ImageBW, EPD_W, EPD_H, 0, WHITE);
Paint_Clear(WHITE);
// Vent à gauche
EPD_ShowPicture(10, 30, 56, 72, gImage_wind, BLACK);
// Humidité à droite (exemple, suppose que tu as gImage_hum dans Pic.h)
EPD_ShowPicture(90, 30, 56, 72, gImage_hum, BLACK);
EPD_Display(ImageBW);
EPD_FastUpdate();
EPD_DeepSleep();
}
Code HelloWord[edit]
Basé sur le code https://github.com/HalfSweetStudio/EPaperDrive/blob/main/examples/HelloWorld/HelloWorld.ino
/**
* @file HelloWorld.ino
* @author HalfSweet (Email:HalfSweet@HalfSweet.cn or QQ:2522182733)
* @brief Ce fichier est un exemple de programme permettant d'afficher «Hello World» sur un écran à encre électronique.
* Il illustre uniquement la méthode la plus simple pour allumer l'écran.
* Veuillez consulter la documentation pour connaître l'utilisation des différentes fonctions.
* @version 0.1
* @date 2022-01-30
*
* @copyright Copyright (c) 2022
*
*/
#include <Arduino.h>
#include <EPaperDrive.h>
// Inclure le système de fichiers à utiliser, par exemple:
#include <LittleFS.h>
#define BAUD_SPEED 74880 // Débit en bauds pour le débogage du port série, modifiable selon les besoins
#define CS 15
#define RST 2
#define DC 0
#define BUSY 4
#define CLK 14
#define DIN 13
EPaperDrive EPD(0, CS, RST, DC, BUSY, CLK, DIN); //Instanciation de la bibliothèque de pilotes, utilisant ici le protocole SPI logiciel
const uint8_t city_icon[24] = {
/* 0X01,0X01,0X0C,0X00,0X0C,0X00, */
0X00,
0X00,
0X1C,
0X00,
0X77,
0X00,
0X41,
0X80,
0X9C,
0X60,
0XA2,
0X30,
0XA2,
0X30,
0X9C,
0XC0,
0X41,
0X80,
0X77,
0X00,
0X1C,
0X00,
0X00,
0X00,
};
void setup()
{
Serial.begin(BAUD_SPEED);
LittleFS.begin(); // Veuillez initialiser manuellement le système de fichiers avant de passer le pointeur.
EPD.SetFS(&LittleFS); // Définit le système de fichiers pour le stockage des polices. La valeur passée est le pointeur d'opération pour ce système de fichiers.
//Vous pouvez la modifier.
EPD.EPD_Set_Model(HINKE0266A15A0); // Définit le type d'écran. Consultez la documentation pour les modèles spécifiques.
EPD.EPD_init_Full(); // Initialisation du rafraîchissement complet, en utilisant la forme d'onde de rafraîchissement complet.
EPD.clearbuffer(); // Efface le tampon (écran blanc).
EPD.fontscale = 2; // Facteur d'échelle des polices (1 et 2 pris en charge, également applicable aux images.
// N'oubliez pas de le remettre à 1 après utilisation).
EPD.SetFont(FONT12); // Sélectionne la police. Consultez la documentation pour connaître les polices prises en charge.
EPD.DrawUTF(0, 0, "Hello"); // Dessiner la chaîne
EPD.DrawUTF(26, 0, "J'aime les écrans à encre électronique");
// Dessiner la chaîne
EPD.fontscale = 1; // Rétablir le facteur d'échelle de la police à 1
EPD.DrawXbm_P(60, 0, 12, 12, (uint8_t *)city_icon); // Dessiner l'image
Serial.printf("Image tamponnée dessinée, prête pour un rafraîchissement complet\n");
EPD.EPD_Dis_Full((uint8_t *)EPD.EPDbuffer, 1); // Transmettre l'image tamponnée à la puce de contrôle de l'écran pour un rafraîchissement complet
EPD.deepsleep(); // Mettre l'écran en veille
Serial.println("Rafraîchissement complet terminé");
delay(5000);
EPD.EPD_init_Part(); // Initialiser la partie Actualisation
EPD.clearbuffer();
EPD.fontscale = 2;
EPD.SetFont(FONT12); EPD.DrawUTF(0, 0, "Actualisation locale activée");
Serial.printf("Actualisation locale en cours\n");
EPD.EPD_Dis_Part(0, 23, 0, 199, (uint8_t *)EPD.EPDbuffer, 1); // Transfert de l'image du tampon vers la puce de contrôle d'écran pour l'actualisation locale sur le nouvel écran
Serial.printf("Actualisation locale terminée\n");
EPD.deepsleep();
} void loop()
{
delay(1); // Empêcher le chien de garde de s'interrompre
}