CrowPanel ESP32 E-Paper 2.13-inch Arduino Tutorial¶

Overall¶

This tutorial will demonstrate how to use ESP32 E-Paper Display as a price tags and update price images through WiFi and Bluetooth. And how to obtain weather information and display it on ESP32 E-paper display. In addition, there are simple examples to illustrate how to use the various interfaces on the board.

Get Started with Arduino IDE¶

Please click the card below to learn how to install Arduino IDE, and install ESP32 board in the Arduino IDE.

Demo 1 Update Pictures Wireless¶

This demo will introduce how to wireless update a single price tag through WiFi and Bluetooth.

Update via WiFi¶

wifi-flow

Convert the image format¶

First, let's take a look at the price tag we design in this example, which is divided into three parts(all are images). The top bar is a fixed and unchanging background. On the left is the description, and on the right is the price. The parts we need to update are the description and price.

For the fixed top bar, we can convert it to C array and put them in the code.

For the variable description and price, we need to convert them to bin file and upload them to the board through WiFi.

the price tag pictures.
the image modulo tool Image2Lcd and open it.
Click open and select top-bar.bmp, convert it to array format.
- Open file
- Output date type: C language array by default
- The biggest width and height: Consistent with the width and height of the image. Note that it must be a multiple of 8, otherwise it cannot be displayed properly
- Select the output type as a C language array, set the scanning mode to horizontal scan, choose monochrome for the grayscale output, and flip the image horizontally.
- Do not include the image header data.
- Save and output
Generate a ‘.txt’ text file, then copy the C array code into the project that needs to use it.

Call the code in your project, and this will allow the image to be displayed on the screen.
Convert the description pictures and price tag pictures to bin files. These bin files will be used to update prices over WiFi.
- Open the file
- The output type select .bin file
- The width and height should consistent with the width and height of the image. Note that it must be a multiple of 8, otherwise it cannot be displayed properly
- Select the output type as a Bin file, set the scanning mode to horizontal scanning, and output grayscale as monochrome
- Do not include the image header data.
- Save the file

Code Explanation¶

Please click to download the code file 2.13_WIFI_refresh.zip for this demo.

Add necessary libraries

#include <Arduino.h>           // Include Arduino core library file
#include "EPD.h"             // Include library file for electronic paper screen
#include "Pic.h"        // Include custom function library
#include "FS.h"               // File system library for file operations
#include "SPIFFS.h"           // SPIFFS file system library for file reading and writing
#include <WiFi.h>             // WiFi library for creating and managing WiFi connections
#include <Ticker.h>           // Ticker library for timing operations
#include <WebServer.h>        // WebServer library for creating HTTP server

Define the file variable fsUploadFile Used for accessing files, txt_size and pre_size correspond to the size of the BIN file(Exported in the above steps) for the text label and price label to be transmitted. The image resolution requirement is smaller than the screen resolution and both width and height are multiples of 8.

// Define an array to store image data
extern uint8_t ImageBW[ALLSCREEN_BYTES];
#define txt_size 1728
#define pre_size 528

Note: The size here can be defined based on the size of the images to be transmitted later, otherwise it will cause image transfer failure

UI_price() Function

Check if the file system has saved UI images, and if so, display them.

void UI_price()
{
    EPD_Init();
    EPD_ALL_Fill(WHITE);
    EPD_Update();
    EPD_Clear_R26H();

    EPD_ShowPicture(0, 0, 248, 24, gImage_top, BLACK); // Display gImage_scenario_home picture on the screen with black background

    if (SPIFFS.exists("/txt.bin")) { // Check if file /txt.bin exists
        // File exists, read its content
        File file = SPIFFS.open("/txt.bin", FILE_READ); // Open file for reading
        if (!file) {
            Serial.println("Unable to open file for reading");
            return;
        }
        // Read file data into an array
        size_t bytesRead = file.read(txt_formerly, txt_size);

        Serial.println("File content:");
        while (file.available()) {
            Serial.write(file.read()); // Print file content
        }
        file.close(); // Close the file

        flag_txt = 1; // Set flag to indicate text file exists

        EPD_ShowPicture(8, 36, 192, 72, txt_formerly, BLACK);
    }

    if (SPIFFS.exists("/pre.bin")) { // Check if file /pre.bin exists
        // File exists, read its content
        File file = SPIFFS.open("/pre.bin", FILE_READ); // Open file for reading
        if (!file) {
            Serial.println("Unable to open file for reading");
            return;
        }
        // Read file data into an array
        size_t bytesRead = file.read(price_formerly, pre_size);

        Serial.println("File content:");
        while (file.available()) {
            Serial.write(file.read()); // Print file content
        }
        file.close(); // Close the file
        flag_pre = 1; // Set flag to indicate price file exists

        EPD_ShowPicture(159, 56, 88, 48, price_formerly, BLACK);
    }

    EPD_DisplayImage(ImageBW);
    EPD_PartUpdate();
    EPD_Sleep();
}

okPage() Function

Receive the bin file sent and determine if it matches the pre-set file size. If it matches, store it in the file system and update the display icon.

// Function to handle file upload requests
void okPage()
{
    server.send(200, "text/html", HTML_OK); // Send success page
    HTTPUpload &upload = server.upload(); // Get the uploaded file object

    // Note: The initial size of upload.buf is only 1436 bytes. Adjust it to support large file uploads.
    // Modify the HTTP_UPLOAD_BUFLEN definition in WebServer.h to increase the initial size to 30000 bytes.
    // C:\Users\xxx\AppData\Local\Arduino15\packages\esp32\hardware\esp32\2.0.10\libraries\WebServer\src
    if (upload.status == UPLOAD_FILE_END) // If file upload is complete
    {
        Serial.println("draw file");
        Serial.println(upload.filename); // Print the uploaded file name
        Serial.println(upload.totalSize); // Print the total file size

        // Determine file type based on file size
        if (upload.totalSize == txt_size) // If file size is 1008 bytes, it's a txt file
            filename = "txt.bin";
        else
            filename = "pre.bin"; // Otherwise, it's a preview file

        // Save the received file
        if (!filename.startsWith("/")) filename = "/" + filename;
        fsUploadFile = SPIFFS.open(filename, FILE_WRITE); // Open file in write mode
        fsUploadFile.write(upload.buf, upload.totalSize); // Write file data
        fsUploadFile.close(); // Close the file
        Serial.println("Save successful");
        Serial.printf("Saved: ");
        Serial.println(filename);

        // Store data in the appropriate array based on file size
        if (upload.totalSize == txt_size)
        {
            for (int i = 0; i < txt_size; i++) {
                txt_formerly[i] = upload.buf[i];
            }
            Serial.println("txt_formerly OK");
            flag_txt = 1; // Set flag to indicate txt file has been uploaded
        }
        else
        {
            for (int i = 0; i < pre_size; i++) {
                price_formerly[i] = upload.buf[i];
            }
            Serial.println("price_formerly OK");
            flag_pre = 1; // Set flag to indicate preview file has been uploaded
        }
        UI_price();
        //    EPD_HW_RESET();
        //    EPD_ShowPicture(0, 0, 24, 152, gImage_top, WHITE); // Display gImage_scenario_home picture on the screen with white background
        //
        //    // Display the appropriate image based on file type
        //    if (upload.totalSize!= txt_size)
        //    {
        //      EPD_ShowPicture(0, 0, 56, 104, price_formerly, BLACK); // Display gImage_scenario_home picture on the screen with white background
        //    }
        //    else
        //    {
        //      EPD_ShowPicture(30, 30, 56, 144, txt_formerly, BLACK); // Display gImage_scenario_home picture on the screen with white background
        //    }
        //
        //    EPD_Display(ImageBW);
        //    EPD_FastUpdate();
        //    EPD_DeepSleep();
    }
}

Image Refresh Process

Initialization

// Initialize the e-paper display
   EPD_Init();                      // Initialize the e-paper display
   EPD_ALL_Fill(WHITE);             // Fill the whole screen with white
   EPD_Update();                    // Update the display
   EPD_Clear_R26H();                // Clear a specific area (possibly to clear some old content on the e-paper)

Select the data to refresh

      EPD_ShowPicture(0, 0, 248, 24, gImage_top, BLACK); // Display gImage_scenario_home picture on the screen with black background

Update the image to the screen

      EPD_DisplayImage(ImageBW);
      EPD_PartUpdate();
      EPD_Sleep();

Upload the Code¶

Click "Tools"->"Board"->"esp32"->"ESP32S3 Dev Module", and the "Partition Scheme" select "Huge APP (3MB No OTA/1MB SPIFFS)", "PSRAM" select "OPI PSRAM".
Connect CorwPanel to the computer, click on "Tool" and select the corresponding "port".
Click "Upload" to upload the code to the board. There will be an image show on the screen.

Update the price tag with WiFi¶

Connect a laptop to the hotspot of the ESP32 E-PAPER display.
Enter the IP address 192.168.4.1 in the browser.
Select the bin file of the picture you need to show, then click submit.

Note: The size of the images you transfer must be consistent with the size defined in the code, otherwise it will cause image transfer failure
After successful transmission, the price and text will be replaced, and the data will be saved in flash.

Update via Bluetooth¶

bt-flow

Convert the image format¶

The same as the method in the "Update via WiFi".

Code Explanation¶

Please click to download the code file 2.13_ble_refresh.zip for this demo.

Add necessary libraries

#include "BLEDevice.h"              // BLE driver library
#include "BLEServer.h"              // BLE bluetooth server library
#include "BLEUtils.h"               // BLE utility library
#include "BLE2902.h"                // Characteristic add descriptor library
#include "EPD.h"
#include "Pic.h"
#include <Arduino.h>

#include "FS.h"           // File system library
#include "SPIFFS.h"       // SPIFFS file system library for file read and write.

Define the file variable fsUploadFile Used for accessing files, txt_size and pre_size correspond to the size of the BIN file(Exported in the above steps) for the text label and price label to be transmitted. The image resolution requirement is smaller than the screen resolution and both width and height are multiples of 8

File fsUploadFile;              // File object for uploading files
// Image buffer to store black and white image data
extern uint8_t ImageBW[ALLSCREEN_BYTES];
unsigned char test1[ALLSCREEN_BYTES]; // Array for storing file data
#define txt_size 1728
#define pre_size 528

Note: The size here can be defined based on the size of the images to be transmitted later, otherwise it will cause image transfer failure

ble_pic function

Process the bin file sent and determine if it matches the pre-set file size. If it does, store it in the file system and update the display icon.

// Process BLE data and save it to a file.
void ble_pic()
{
  // Check if data has been received.
  if (dataReceived) {
    // Ensure the data buffer is not empty.
    if (!dataBuffer.empty()) {
      size_t bufferSize = dataBuffer.size();
      Serial.println(bufferSize);

      // Determine the filename based on the size of the received data.
      if (dataBuffer.size() == txt_size) {
        filename = "txt.bin";
      } else {
        filename = "pre.bin";
      }

      // Ensure the filename starts with a slash.
      if (!filename.startsWith("/")) {
        filename = "/" + filename;
      }

      // Open the file for writing.
      fsUploadFile = SPIFFS.open(filename, FILE_WRITE);
      if (!fsUploadFile) {
        Serial.println("Failed to open file for writing.");
        return;
      }

      // Write the received data to the file.
      fsUploadFile.write(dataBuffer.data(), dataBuffer.size());
      fsUploadFile.close();

      Serial.println("Saved successfully.");
      Serial.printf("Saved:");
      Serial.println(filename);

      // Store the received data in the appropriate array.
      if (bufferSize == txt_size) {
        for (int i = 0; i < txt_size; i++) {
          txt_formerly[i] = dataBuffer[i];
        }
        Serial.println("txt_formerly OK");
      } else {
        for (int i = 0; i < pre_size; i++) {
          price_formerly[i] = dataBuffer[i];
        }
        Serial.println(" price_formerlyOK");
      }

      // Display the price interface.
      UI_price();
    }

    // Clear the buffer after writing.
    dataBuffer.clear();
    totalReceivedBytes = 0;
  }
}

ble_pic function

void clear_all()
{
  // Initialize the display.
  EPD_Init();
  // Fill the display with white.
  EPD_ALL_Fill(WHITE);
  // Update the display.
  EPD_Update();
  // Clear the display.
  EPD_Clear_R26H();

  // Put the display to sleep.
  EPD_Sleep();
}

class MyCallbacks : public BLECharacteristicCallbacks

Receive the data sent and integrate it together. Receiving the "OK" character indicates that the transmission is complete.

// BLE characteristic callback class
class MyCallbacks : public BLECharacteristicCallbacks {
    void onWrite(BLECharacteristic *pCharacteristic) {
      // Get the value received via BLE.
      std::string value = pCharacteristic->getValue();

      // If there is received data.
      if (value.length() > 0) {
        // Print a dot for debugging purposes.
        Serial.printf(".");

        // Assume the client sends a specific end marker ("OK") when data transfer is complete.
        if (value == "OK") {
          dataReceived = true;
          return;
        }

        // Get the length of the received data.
        size_t len = value.length();
        if (len > 0) {
          // Append the received data to the buffer.
          dataBuffer.insert(dataBuffer.end(), value.begin(), value.end());
          // Update the total number of received bytes.
          totalReceivedBytes += len;
        }
      }
    }
};

UI_price

Check if the file system has saved UI images, and if so, display them.

// User interface function: Display price information.
void UI_price()
{
  // Initialize the display.
  EPD_Init();
  // Fill the display with white.
  EPD_ALL_Fill(WHITE);
  // Update the display.
  EPD_Update();
  // Clear the display.
  EPD_Clear_R26H();

  // Display an image at a specific location.
  EPD_ShowPicture(0, 0, 248, 24, gImage_top, BLACK);

  // If the text file exists.
  if (SPIFFS.exists("/txt.bin")) {
    // Open the file for reading.
    File file = SPIFFS.open("/txt.bin", FILE_READ);
    if (!file) {
      Serial.println("Unable to open file for reading.");
      return;
    }

    // Read data from the file into the array.
    size_t bytesRead = file.read(txt_formerly, txt_size);

    Serial.println("File content:");
    while (file.available()) {
      Serial.write(file.read());
    }
    file.close();

    // Display an image using the data from the text file.
    EPD_ShowPicture(8, 36, 192, 72, txt_formerly, BLACK);
  }

  // If the price file exists.
  if (SPIFFS.exists("/pre.bin")) {
    // Open the file for reading.
    File file = SPIFFS.open("/pre.bin", FILE_READ);
    if (!file) {
      Serial.println("Unable to open file for reading.");
      return;
    }

    // Read data from the file into the array.
    size_t bytesRead = file.read(price_formerly, pre_size);

    Serial.println("File content:");
    while (file.available()) {
      Serial.write(file.read());
    }
    file.close();

    // Display an image using the data from the price file.
    EPD_ShowPicture(159, 56, 88, 48, price_formerly, BLACK);
  }

  // Display the image buffer on the display.
  EPD_DisplayImage(ImageBW);
  // Update a portion of the display.
  EPD_PartUpdate();
  // Put the display to sleep.
  EPD_Sleep();
}

Image Refresh Process

Initialization

   // Initialize the display.
   EPD_Init();
   // Fill the display with white.
   EPD_ALL_Fill(WHITE);
   // Update the display.
   EPD_Update();
   // Clear the display.
   EPD_Clear_R26H();

   // Put the display to sleep.
   EPD_Sleep();

Select the data to refresh

   // Display an image at a specific location.
   EPD_ShowPicture(0, 0, 248, 24, gImage_top, BLACK);

Update the image to the screen

   // Display the image buffer on the display.
   EPD_DisplayImage(ImageBW);
   // Update a portion of the display.
   EPD_PartUpdate();
   // Put the display to sleep.
   EPD_Sleep();

Upload the Code¶

Double click the 2.13_ble_refresh.ino.
Click "Tools"->"Board"->"esp32"->"ESP32S3 Dev Module", and the "Partition Scheme" select "Huge APP (3MB No OTA/1MB SPIFFS)", "PSRAM" select "OPI PSRAM".
Connect CorwPanel to the computer, click on "Tool" and select the corresponding "port".
Click "Upload" to upload the code to the board. There will be an image show on the screen.

Update the images via bluetooth¶

Download a BLE debugging assistant to your phone, and connect it your phone to the screen device BLE.
Upload the bin file(Save the bin file to your phone in advance).

Note: The size of the images you transfer must be consistent with the size defined in the code, otherwise it will cause image transfer failure
After successful transmission, the price and text will be replaced, and the data will be saved in flash.

Demo 2 Weather Station¶

Obtain weather information through OpenWeather and display the information on the CrowPanel.

Convert the image format¶

Project Hardware Used

ESP32-S3 5.79-inch E-Paper Display.
UI Interface
The UI is composed of 5 parts:
- Weather information
- City information
- Wind speed information
- Temperature information
- Visibility information
- Humidity information
- the icons.
After converting the UI images into a C file, they can be used in the program for refreshing the display.

The resulting array can be directly copied into the project for use.

Add the necessary display driver libraries¶

Register an OpenWeather account¶

Enter https://openweathermap.org/ and click "Sing in" to register an OpenWeather account.
Log in your account.
Click your user name -> "My API Keys" to find your API key.

You can find the city codes at the following link: http://bulk.openweathermap.org/sample/

Please replace the information in the following code.

Code Explanation¶

Please click to download the code file 2.13_wifi_http_openweather.zip for this demo.

Add libraries¶

#include <WiFi.h>
#include <HTTPClient.h>
#include <Arduino_JSON.h>
#include "EPD.h"               // Include the EPD library for controlling the e-paper display

#include "pic.h"

Modify your information¶

const char* ssid = " ";       // Enter your ssid
const char* password = " ";     // Enter your WiFi password

// OpenWeatherMap API key
String openWeatherMapApiKey = "You-API"; //Enter your API key
// For example: String openWeatherMapApiKey = "bd939aa3d23ff33d3c8f5dd1dd435";

// Replace with city and country code you're in
String city = "London";                    // City Name
String countryCode = "2643743";            // Country Code

Function Explanation¶

js_analysis

This function is mainly used to parse the received JSON data, process these data separately, and save them in variables.

void js_analysis()
{
  //  Check if you are successfully connected to a WiFi network
  if (WiFi.status() == WL_CONNECTED) {
    // Build the URL for the OpenWeatherMap API request
    String serverPath = "http://api.openweathermap.org/data/2.5/weather?q=" + city + "," + countryCode + "&APPID=" + openWeatherMapApiKey + "&units=metric";

    // Loop until you get a valid HTTP response code of 200
    while (httpResponseCode != 200) {
      //Send an HTTP GET request and get the response content
      jsonBuffer = httpGETRequest(serverPath.c_str());
      Serial.println(jsonBuffer); // Print the fetched JSON data
      myObject = JSON.parse(jsonBuffer); // Parsing JSON Data

      // Check if JSON parsing was successful
      if (JSON.typeof(myObject) == "undefined") {
        Serial.println("Parsing input failed!"); // Message when parsing fails
        return; //  Exit function if parsing fails
      }
      delay(2000); //  Wait 2 seconds and retry
    }

    //Extract weather information from parsed JSON data
    weather = JSON.stringify(myObject["weather"][0]["main"]); // Weather Master Information
    temperature = JSON.stringify(myObject["main"]["temp"]); // temp
    humidity = JSON.stringify(myObject["main"]["humidity"]); // humidity
    sea_level = JSON.stringify(myObject["main"]["sea_level"]); // sea level pressure
    wind_speed = JSON.stringify(myObject["wind"]["speed"]); // air velocity
    city_js = JSON.stringify(myObject["name"]); //  city name

    // Print extracted weather information
    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);

    // Set the weather icon flag bit according to the weather description
    if (weather.indexOf("clouds") != -1 || weather.indexOf("Clouds") != -1 ) {
      weather_flag = 1; // cloudy 
    } else if (weather.indexOf("clear sky") != -1 || weather.indexOf("Clear sky") != -1) {
      weather_flag = 3; // clear sky
    } else if (weather.indexOf("rain") != -1 || weather.indexOf("Rain") != -1) {
      weather_flag = 5; // rainy day
    } else if (weather.indexOf("thunderstorm") != -1 || weather.indexOf("Thunderstorm") != -1) {
      weather_flag = 2; // thunderstorms
    } else if (weather.indexOf("snow") != -1 || weather.indexOf("Snow") != -1) {
      weather_flag = 4; // snowy day
    } else if (weather.indexOf("mist") != -1 || weather.indexOf("Mist") != -1) {
      weather_flag = 0; // foggy day
    }
  }
  else {
    //If WiFi disconnects, prints a message
    Serial.println("WiFi Disconnected");
  }
}

// Functions that define HTTP GET requests
String httpGETRequest(const char* serverName) {
  WiFiClient client;
  HTTPClient http;

  // Initialize the HTTP client and specify the server URL for the request
  http.begin(client, serverName);

  //  Send HTTP GET request
  httpResponseCode = http.GET();

  // Initialize the content of the returned response
  String payload = "{}";

  //  Check the response code and process the response content
  if (httpResponseCode > 0) {
    Serial.print("HTTP Response code: ");
    Serial.println(httpResponseCode); //Print Response Code
    payload = http.getString(); //Getting the response
  }
  else {
    Serial.print("Error code: ");
    Serial.println(httpResponseCode); // Print Error Code
  }
  // Release HTTP client resources
  http.end();

  return payload; // Returns the content of the response
}

UI_weather_forecast

Display the processed data saved in the variable on the screen.

// Function to display weather forecast on the e-paper display.
void UI_weather_forecast()
{
    // buffer is used to hold formatted strings for display on the e-paper.
    char buffer[40];

    // Initialize the e-paper display.
    EPD_Init();
    // Fill the entire display with white color.
    EPD_ALL_Fill(WHITE);
    // Update the display.
    EPD_Update();
    // Clear the display using a specific method.
    EPD_Clear_R26H();

    // Display a background picture on the e-paper.
    EPD_ShowPicture(0, 0, 248, 122, pic, BLACK);
    // Display the weather icon based on the weather_flag.
    EPD_ShowPicture(1, 4, 144, 80, Weather_Num[weather_flag], BLACK);

    // Display the city name on the e-paper.
    memset(buffer, 0, sizeof(buffer));
    snprintf(buffer, sizeof(buffer), "%s ", city_js);
    EPD_ShowString(190, 30, buffer, BLACK, 12);

    // Display the temperature on the e-paper.
    memset(buffer, 0, sizeof(buffer));
    snprintf(buffer, sizeof(buffer), "%s C", temperature);
    EPD_ShowString(110, 110, buffer, BLACK, 12);

    // Display the humidity on the e-paper.
    memset(buffer, 0, sizeof(buffer));
    snprintf(buffer, sizeof(buffer), "%s ", humidity);
    EPD_ShowString(200, 72, buffer, BLACK, 12);

    // Display the wind speed on the e-paper.
    memset(buffer, 0, sizeof(buffer));
    snprintf(buffer, sizeof(buffer), "%s m/s", wind_speed);
    EPD_ShowString(30, 110, buffer, BLACK, 12);

    // Display the sea level on the e-paper.
    memset(buffer, 0, sizeof(buffer));
    snprintf(buffer, sizeof(buffer), "%s ", sea_level);
    EPD_ShowString(210, 110, buffer, BLACK, 12);

    // Update the e-paper display with the new content.
    EPD_DisplayImage(ImageBW);
    // Perform a partial update of the e-paper display.
    EPD_PartUpdate();
    // Put the e-paper display into sleep mode to conserve power.
    EPD_Sleep();
}

Image Refresh Process

Initialization

    // Initialize the e-paper display.
    EPD_Init();
    // Fill the entire display with white color.
    EPD_ALL_Fill(WHITE);
    // Update the display.
    EPD_Update();
    // Clear the display using a specific method.
    EPD_Clear_R26H();

Select the data to be refreshed

    // Display a background picture on the e-paper.
    EPD_ShowPicture(0, 0, 248, 122, pic, BLACK);

Update the image on the screen

    // Update the e-paper display with the new content.
    EPD_DisplayImage(ImageBW);
    // Perform a partial update of the e-paper display.
    EPD_PartUpdate();
    // Put the e-paper display into sleep mode to conserve power.
    EPD_Sleep();

Modify your information¶

Upload the Code¶

Double click the 2.13_wifi_http_openweather.ino.
Click "Tools"->"Board"->"esp32"->"ESP32S3 Dev Module", and the "Partition Scheme" select "Huge APP (3MB No OTA/1MB SPIFFS)", "PSRAM" select "OPI PSRAM".
Connect CorwPanel to the computer, click on "Tool" and select the corresponding "port".
Click "Upload" to upload the code to the board. There will be an image show on the screen.
After downloading, the weather information for the city you have selected will be displayed on CrowPanel.
- Download the example
- Obtain the weather of the day through WIFI and update the UI. The UI information will change based on the received data
- Display Information Explanation
  1. City information
  2. Humidity information
  3. Visibility information
  4. Temperature information
  5. Wind information
  6. Weather information