Skip to content

4 SD card stores images and displays them locally

Welcome to the application tutorial of Lesson 4. The effect to be achieved in this lesson is to store the images that need to be displayed on the SD card and display them on the CrowPanel ESP32 Advance HMI.

This lesson requires everyone to prepare an SD card to store pictures. And a card reader.

1 Select the photos you want to display on the browser and save them on the desktop (the save path can be customized)

1

2 Modify the resolution of the image based on the size of the product you are using.

This is the resolution size we accept for each size product.

2

Here, for large-sized products, I will take the 2.4-inch product as an example to introduce how to modify the resolution of images.

The resolution of the 2.4-inch product is 320x240.

(Note: The image resolution of 7.0-inch, 5.0-inch, and 4.3-inch products is consistent, and the code and image can be used interchangeably.)

First, open the "paint" tool on the computer.

3

Drag and drop the image into the "paint" tool to readjust the pixels of the image

(Images can be uploaded to the browser and selected according to everyone's preferences)

4

5

Adjust the pixel to 2.4-inch screen resolution: 320x240

(If you are using a different size, please set the correct resolution)

Can be referred to：There are resolutions of different sizes as references above. (Second point)

6

Click confirm

7

Adjust the resolution of the image as shown in the picture

8

Save to a folder for easy use (folder path can be customized)

9

Save in BMP format (must have a 24 bit image depth)

10

Insert the SD card into the card reader

11

Open the SD drive, copy the modified image to the SD drive and save it

12

Exit the SD card and remove the SD card

3 Insert the SD card containing this saved image into your CrowPanel ESP32 Advance HMI

13

(2.4 inch, 2.8 inch, 3.5 inch products can be directly inserted for use)

14

(After inserting the SD card, turn the function switch to 1 0 mode (TF Card mode) for 4.3-inch, 5.0-inch and 7.0-inch.)

4 Open the code we provide, and you only need to modify the path and name of the image you saved

15

16

Modify the path of the image you saved

17

Here, my path is the five images in the current path on the SD card

So the path of my image is the current path "/" plus the image name (1. bmp)

18

Then display the image in the loop and set the resolution size

(different sizes have different resolutions)

19

5 Configure the runtime environment and burn code

(Before burning, please replace the relevant library files according to different sizes.

How to replace, details in Lesson 2)

20

21

6 Phenomenon display

22

23

24

25

26

The five photos I saved on the SD card will be displayed in a loop.

Kind Reminder:

You are currently viewing the 7-inch product of CrowPanel Advance HMI, and the version here is V1.3.

In terms of hardware, we use a microcontroller (STC8H1K28) to control the screen backlight, speaker on/off, and buzzer.

advance-7-1.3-1

(However, there are other function interfaces that need to be written in the specific code, and you can refer to the complete code provided later.)

Explanation:

  • 0x30 is the I2C address of the microcontroller (STC8H1K28).
  • 0x5D is the I2C address of the touch IC (GT911).
  • sendI2CCommand(0) means sending command 0 to the microcontroller (address 0x30) to instruct it to set the screen brightness to maximum.

For 0 mentioned above, you can replace it with the following values:

  • 0 is the brightest backlight.
  • 0 to 245: The screen brightness will gradually increase to the minimum value
  • 245 represents turning off the screen light

Additional notes:

You can also control the following functions by sending other instructions to the microcontroller:

  • It means sending the 248 command to the microcontroller (0x30) to instruct the speaker to turn on.

advance-7-1.3-2

  • It means sending the 249 command to the microcontroller (0x30) to instruct the speaker to turn off.

advance-7-1.3-3

  • You can also send command 246 to control the buzzer to turn on, and send command 247 to control the buzzer to turn off.

advance-7-1.3-4

7 Code reference

7.0 inch、5.0inch、4.3inch

#include <Wire.h>
#include "Arduino.h"
#include "WiFiMulti.h"
#include "Audio.h"

#define I2S_DOUT 4
#define I2S_BCLK 5
#define I2S_LRC 6

Audio audio;
WiFiMulti wifiMulti;

String ssid = "elecrow888";
String password = "elecrow2014";

bool i2cScanForAddress(uint8_t address) {
  Wire.beginTransmission(address);
  return (Wire.endTransmission() == 0);
}

// Wrapper function for sending I2C commands
void sendI2CCommand(uint8_t command) {
  uint8_t error;
  // Start sending commands to the specified address
  Wire.beginTransmission(0x30);
  // Send command
  Wire.write(command);
  //  End transmission and return status
  error = Wire.endTransmission();

  if (error == 0) {
    Serial.print("command 0x");
    Serial.print(command, HEX);
    Serial.println(" Sent successfully");
  } else {
    Serial.print("Command sent error, error code:");
    Serial.println(error);
  }
}

void setup() {
  Serial.begin(115200);

  Wire.begin(15, 16);
  delay(50);
  // ioex.attach(Wire);
  // ioex.setDeviceAddress(0x18);
  // ioex.config(3, TCA9534::Config::OUT);
  // ioex.config(4, TCA9534::Config::OUT);
  // ioex.output(3, TCA9534::Level::L);
  // ioex.output(4, TCA9534::Level::H);
  while (1) {
    if (i2cScanForAddress(0x30) && i2cScanForAddress(0x5D)) {
      Serial.print("The microcontroller is detected: address 0x");
      Serial.println(0x30, HEX);
      Serial.print("The microcontroller is detected: address 0x");
      Serial.println(0x5D, HEX);
      break;
    } else {
      Serial.print("No microcontroller was detected: address 0x");
      Serial.println(0x30, HEX);
      Serial.print("No microcontroller was detected: address 0x");
      Serial.println(0x5D, HEX);
      //Prevent the microcontroller did not start to adjust the bright screen
      sendI2CCommand(250);    // 250 : Activate touch screen
      pinMode(1, OUTPUT);
      digitalWrite(1, LOW);
      //ioex.output(2, TCA9534::Level::L);
      //ioex.output(2, TCA9534::Level::H);
      delay(120);
      pinMode(1, INPUT);

      delay(100);
    }
  }
  // Start sending command 248 to address 0x30
  sendI2CCommand(248); // 248 : Turn on the speaker

  Serial.printf("[LINE--%d]\n", __LINE__);
  WiFi.mode(WIFI_STA);
  wifiMulti.addAP(ssid.c_str(), password.c_str());
  wifiMulti.run();
  if (WiFi.status() != WL_CONNECTED) {
    WiFi.disconnect(true);
    wifiMulti.run();
  }
  Serial.printf("[LINE--%d]\n", __LINE__);
  Serial.println("--- WIFI_CONNECTED ---");
  audio.setPinout(I2S_BCLK, I2S_LRC, I2S_DOUT);
  audio.setVolume(20);  // 0...21

  // Choose the URL of the music you want to play

  // This is Taylor Swift singing 'Last Christmas'

  audio.connecttohost("http://music.163.com/song/media/outer/url?id=1391891631.mp3"); // Empire state of mine.mp3
  Serial.printf("[LINE--%d]\t ready to play!!\n", __LINE__);
}

void loop() {
  audio.loop();
  if (Serial.available()) {  // put streamURL in serial monitor
    audio.stopSong();
    String r = Serial.readString();
    r.trim();
    if (r.length() > 5) audio.connecttohost(r.c_str());
    log_i("free heap=%i", ESP.getFreeHeap());
  }
}

// optional
void audio_info(const char *info) {
  Serial.print("info        ");
  Serial.println(info);
}
void audio_id3data(const char *info) {  //id3 metadata
  Serial.print("id3data     ");
  Serial.println(info);
}
void audio_eof_mp3(const char *info) {  //end of file
  Serial.print("eof_mp3     ");
  Serial.println(info);
}
void audio_showstation(const char *info) {
  Serial.print("station     ");
  Serial.println(info);
}
void audio_showstreamtitle(const char *info) {
  Serial.print("streamtitle ");
  Serial.println(info);
}
void audio_bitrate(const char *info) {
  Serial.print("bitrate     ");
  Serial.println(info);
}
void audio_commercial(const char *info) {  //duration in sec
  Serial.print("commercial  ");
  Serial.println(info);
}
void audio_icyurl(const char *info) {  //homepage
  Serial.print("icyurl      ");
  Serial.println(info);
}
void audio_lasthost(const char *info) {  //stream URL played
  Serial.print("lasthost    ");
  Serial.println(info);
}

If your code compiles incorrectly, you can check if the ESP32 version number is correct. The ESP32 version number we need for this lesson is 3.0.2.

new-1

Secondly, please pay attention to replacing the corresponding size library file.

Select the appropriate library file based on the product screen size

Path reference：C:\ESP32_Code\CrowPanel_Advanced_HMI\Arduino_lib Series Library

new-2

I will use the Advance 7.0-inch product as an example for operation

Copy the Libraries Advanced 7.0 folder

Open Arduino IDE runtime library file path

Reference path: C:\Users\14175\Documents\Arduino

new-3

Delete the existing libraries folder

new-4

Paste the copied library Advanced 7.0 folder into this path

new-5

Change the folder name to the original libraries

new-6

Library update completed, restart Arduino IDE.

When using other sizes, changing the library file is the same operation