Getting started with CrowPanel Advance 7“

This tutorial will show you how to get started with the CrowPanel Advance 7“ HMI Display (Version 1.0) from Elecrow. The CrowPanel Advance 7“ HMI Display is a is HMI touchscreen with an 800*480 resolution IPS display. It utilizes the ESP32-S3 as main processor, with 512KB SRAM, 8M PSRAM, and 16M Flash.

Apart from the large IPS display the main features are optional wireless modules for Thread, zigbee, Matter, WiFi 6 or 2.4 GHz radio, a microphone and speaker interface. This makes the display suitable for AI assistant applications and Elecrow provides example code and instructional videos for it.

However, in this tutorial we begin with a very simple example that only writes text on the screen and reacts to touch inputs. This should make it easy for you getting started with this display. Note that I am using version 1.0 and the code may not work for other display versions.

Required Parts

You will need the CrowPanel Advance 7“ HMI Display from ELECROW and the Arduino IDE. I got Version 1.0 but there is a newer version 1.2 available.

Note that you can get the display with and without an acrylic housing. The latter is nice if want to mount the display on a wall, for instance, and don’t want to build your own housing. Just watch out for the reset/boot buttons on the back. They stick out quite a bit and if you mount the display too close, they will be pressed.

Makerguides is a participant in affiliate advertising programs designed to provide a means for sites to earn advertising fees by linking to Amazon, AliExpress, Elecrow, and other sites. As an Affiliate we may earn from qualifying purchases.

Features of the CrowPanel Advance 7“ Display

The CrowPanel Advance ESP32 7-inch display is a IPS capacitive touch screen with a 800*480 resolution and a 178°wide viewing angle. The picture below shows the front the display with its dimensions:

The display uses the ESP32-S3 chip as the core processor. This chip is equipped with an Xtensa 32-bit LX7 dual-core processor with a main frequency of up to 240MHz, with 512KB SRAM, 8M PSRAM and 16M Flash.

Peripherals

With respect to peripherals, the display module has a Real Time Clock (RTC) with an on-board battery, a battery charging port, a speaker output, a digital microphone, a buzzer, a micro SD card slot, an I2C port, a GPIO port with two GPIOs, and two UART outputs. The photo below shows the back of the PCB, where you can see most of these components:

The following table provides an overview of the various ports, associated GPIO pins and electrical characteristics:

Port	Pins	Electrical Characteristics
UART0-OUT	RX(IO44); TX(IO43) RX;	Output voltage: 3.3V Output current: 1A max. Use: Power supply output and communication.
UART1-OUT	RX(IO19); TX(IO20) RX;	Output voltage: 3.3V Output current: 1A max. Use: Power supply output and communication.
UART0-IN	RX(IO44); TX(IO43) RX;	Input voltage: 5V ± 5%. 5.5V max. Input current: 2A max. Purpose: Power supply input and communication.
I2C	SDA(IO15); SCL(IO16) ;	Output voltage: 3.3V Output current: 1A max. Use: Power supply output and communication.
SPK	I2S_LRCLK(IO6);I2S_BCLK(IO5);I2S_SDIN(IO4);	Maximum output current: 20mA Signal type: 3.3V logic level, digital control signal
SD Card Slot	MOSI(IO6); MISO(IO4); CLK(IO5); CS(GND)	Maximum output current: 20mA Signal type: 3.3V logic level, digital control signal
LCD Backlight	P3.5（STC8H1K28）	Maximum output current: 20mA Signal type: 3.3V logic level, digital control signal
Backlight Adjustment	P1.1（STC8H1K28）
I2S MIC	MIC_SD(IO20);MIC_WS(IO2);MIC_CLK(IO19)	Maximum output current: 20mA Signal type: 3.3V logic level, digital control signal
BUZZER	P2.7（STC8H1K28）	Maximum output current: 20mA Signal type: 3.3V logic level, digital control signal
TP_RST	P1.7（STC8H1K28）
power amplifier MUTE	P3.7（STC8H1K28）
power amplifier SHUT	P3.6（STC8H1K28）

Function Selection

Some peripherals such as the microphone (MIC), the speaker (SPK), the wireless module (WM), and the SD Card (TF Card) are competing for GPIO and can be used only in specific combinations. On the back of the display you find a table and two DIP-switches that allow you to select a certain combination:

Wireless Communication

In addition to the integrated 2.4GHz Wi-Fi and BLE function with a built-in RF antenna, the display has a separate slot for a Wireless Module. There are four Wireless Modules to choose from: Module-ESP32-H2, Module-ESP32-C6, Module-nRF2401 and the Module-Meshtastic, which allows you to communicate via Zigbee, LoRa, nRF2401, Matter, Thread, and Wi-Fi 6. The picture below shows, where these communication modules are inserted:

For more technical information have a look at the Description page for the CrowPanel Advance 7“ Display.

Other Display Variants

The CrowPanel Advance ESP32 7-inch display is an upgrade of the standard CrowPanel ESP32 7-inch display. These displays come in various sizes and resolutions, with different display drivers and capabilities. The following table provides an overview of the different display options:

Setting Up the CrowPanel Advance 7“ Display

Programming the CrowPanel Advance 7“ Display is a bit tricky, since you need to install specific versions of the libraries and the ESP32 core. Other library or core versions may work but I have not tested this.

Install Libraries

First, let us install the required libraries. Go to the CrowPanel-Advance-HMI-lib folder that is located on a Google Drive. From there download the librariesAdvance7.0.rar file by clicking on the download icon as shown below:

librariesAdvance7.0.rar is a compressed file and you need to unpack it first. Just click on the file in your Explorer (under Windows) and copy the contents to a different folder. In my case, I copied the contents to the following folder:

c:\Maet\Temp\librariesAdvance7.0\libraries

The screenshot below shows some of content in that folder and your folder content should look the same:

You can pick any other path you like but it must end with \libraries, since we are going to use it in the path settings for the Arduino IDE.

The Arduino IDE stores installed libraries in the folder \libraries under the Sketchbook location. You could replace all libraries in that location with the downloaded libs but that would mean you will loose all your previously installed libraries.

Instead we are (temporarily) changing the path for the Sketchbook location, which is faster and easier to revert. Open the File -> Preferences dialog and enter the path c:\Maet\Temp\librariesAdvance7.0 in the field for the Sketchbook location as shown below:

Make sure that you do NOT add the \libraries folder at the end of the path. The Arduino IDE will look for that folder itself. In other words, the downloaded libraries are located under c:\Maet\Temp\librariesAdvance7.0\libraries but you enter the path c:\Maet\Temp\librariesAdvance7.0.

If you are done programming the CrowPanel Advance 7“ Display, you can set the path for the Sketchbook location back to the original path and get your original libraries back. Under Windows this is typically c:\Users\<username>\OneDrive\Documents\Arduino.

Install ESP32 core version 3.0.2

Next we need to install a specific version of the ESP32 core. Open the BOARDS MANAGER, enter “esp32” in the search field and you will the “esp32 by Espressif Systems” boards as shown below:

If you have not installed the ESP32 boards, you will see an INSTALL button. If you have already installed the boards but not the latest version (as above), you will see an UPDATE button instead.

In any case, click on the dropdown list and select version 3.0.2 as shown below, and then press INSTALL.

In the screenshot you can see that I have already installed version 3.0.2 and therefore the UPDATE button is shown. You should see the same, once you have installed the ESP32 Core 3.0.2. If you need more help, have a look at our How to Program ESP32 with Arduino IDE tutorial.

Select Board

Next we need to select a suitable ESP32 board. In case of the CrowPanel Advance 7“, we pick the “ESP32S3 Dev Module”. For that, first connect the display via the USB cable to your computer. Then click on the drop-down menu and then on “Select other board and port…”:

This will open a dialog where you can enter “esp32s3 dev” in the search bar. You will see the “ESP32S3 Dev Module” board under Boards. Click on it and on the COM port to activate it and then click OK:

You will be able to select the COM port only if the display is connected to the computer via USB.

Board Settings

Finally, we need to set the correct parameter for the board. Got to the Tool menu as shown below:

This will open a large drop-down menu with the settings options at the end. Make sure to set the following parameters:

Specifically, the Flash Size should be set to 16MB, the Partition Scheme to Huge APP and the PSRAM to OPI PSRAM. You can find additional information on the Product Introduction page for the CrowPanel Advance 7“ Display.

Drawing on the CrowPanel Advance 7“ Display

With the setup complete, we can now start programming the display. The CrowPanel Advance 7“ Display comes with code examples and video tutorials, however, they all use SquareLine Studio and LVGL to display something on the screen.

This is great for more complex user interfaces but a bit tough if you want to get started with the display, since the corresponding code is quite large and complex.

The following example is much simpler and shows you how to print text on the screen and react to touch inputs by using the LovyanGFX library. If you have followed the setup procedure described before, you will have already installed the LovyanGFX library.

Project Structure

Frist, we create the necessary project folder. Create a folder with the name “advance7“, with two files in it, named “advance7.ino” and “lgfx_conf.h“:

Then open the advance7.ino file in your Arduino IDE. You should see tabs for the two files of the project:

LovyanGFX configuration

In the lgfx_conf.h file copy the following code, which creates the LGFX class with the pin configuration for the display.

// lgfx_conf.h
#define LGFX_USE_V1

#include <LovyanGFX.hpp>
#include <lgfx/v1/platforms/esp32s3/Panel_RGB.hpp>
#include <lgfx/v1/platforms/esp32s3/Bus_RGB.hpp>
#include <driver/i2c.h>

class LGFX : public lgfx::LGFX_Device {
public:
  lgfx::Bus_RGB _bus_instance;
  lgfx::Panel_RGB _panel_instance;
  lgfx::Touch_GT911 _touch_instance;

  LGFX(void) {
    {
      auto cfg = _panel_instance.config();
      cfg.memory_width = 800;
      cfg.memory_height = 480;
      cfg.panel_width = 800;
      cfg.panel_height = 480;
      cfg.offset_x = 0;
      cfg.offset_y = 0;
      _panel_instance.config(cfg);
    }

    {
      auto cfg = _panel_instance.config_detail();
      cfg.use_psram = 1;
      _panel_instance.config_detail(cfg);
    }

    {
      auto cfg = _bus_instance.config();
      cfg.panel = &_panel_instance;
      cfg.pin_d0 = GPIO_NUM_21;   // B0
      cfg.pin_d1 = GPIO_NUM_47;   // B1
      cfg.pin_d2 = GPIO_NUM_48;   // B2
      cfg.pin_d3 = GPIO_NUM_45;   // B3
      cfg.pin_d4 = GPIO_NUM_38;   // B4
      cfg.pin_d5 = GPIO_NUM_9;    // G0
      cfg.pin_d6 = GPIO_NUM_10;   // G1
      cfg.pin_d7 = GPIO_NUM_11;   // G2
      cfg.pin_d8 = GPIO_NUM_12;   // G3
      cfg.pin_d9 = GPIO_NUM_13;   // G4
      cfg.pin_d10 = GPIO_NUM_14;  // G5
      cfg.pin_d11 = GPIO_NUM_7;   // R0
      cfg.pin_d12 = GPIO_NUM_17;  // R1
      cfg.pin_d13 = GPIO_NUM_18;  // R2
      cfg.pin_d14 = GPIO_NUM_3;   // R3
      cfg.pin_d15 = GPIO_NUM_46;  // R4

      cfg.pin_henable = GPIO_NUM_42;
      cfg.pin_vsync = GPIO_NUM_41;
      cfg.pin_hsync = GPIO_NUM_40;
      cfg.pin_pclk = GPIO_NUM_39;
      cfg.freq_write = 21000000;

      cfg.hsync_polarity = 0;
      cfg.hsync_front_porch = 8;
      cfg.hsync_pulse_width = 4;
      cfg.hsync_back_porch = 8;
      cfg.vsync_polarity = 0;
      cfg.vsync_front_porch = 8;
      cfg.vsync_pulse_width = 4;
      cfg.vsync_back_porch = 8;
      cfg.pclk_idle_high = 1;

      _bus_instance.config(cfg);
    }
    _panel_instance.setBus(&_bus_instance);

    {
      auto cfg = _touch_instance.config();
      cfg.x_min = 0;
      cfg.x_max = 800;
      cfg.y_min = 0;
      cfg.y_max = 480;
      cfg.pin_int = -1;
      cfg.bus_shared = false;
      cfg.offset_rotation = 0;
      cfg.i2c_port = I2C_NUM_0;
      cfg.pin_sda = GPIO_NUM_15;
      cfg.pin_scl = GPIO_NUM_16;
      cfg.pin_rst = -1;
      cfg.freq = 400000;
      cfg.i2c_addr = 0x5D;  // 0x5D , 0x14
      _touch_instance.config(cfg);
      _panel_instance.setTouch(&_touch_instance);
    }

    setPanel(&_panel_instance);
  }
};

It is the configuration for the display as needed by the LovyanGFX library and is essentially a copy of the LovyanGFX_Driver.h file of the code example lesson-03. It tells the library which pins of the display and touch interface are connected to which GPIO pins of the ESP32.

This configuration file remains the same for all projects and you can copy and paste it into different projects, if needed.

Code for drawing

Finally, copy the following code into the advance7.ino file. It is a simple test that writes some text on the display and reacts to touch inputs:

#include "lgfx_conf.h"
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <TCA9534.h>

LGFX gfx;
TCA9534 ioex;

void initIOEX() {
  Wire.begin(15, 16);
  delay(50);

  ioex.attach(Wire);
  ioex.setDeviceAddress(0x18);
  ioex.config(1, TCA9534::Config::OUT);
  ioex.config(2, TCA9534::Config::OUT);
  ioex.config(3, TCA9534::Config::OUT);
  ioex.config(4, TCA9534::Config::OUT);
  ioex.output(1, TCA9534::Level::H);  // backlight
}

void initGT911() {
  pinMode(1, OUTPUT);
  digitalWrite(1, LOW);
  ioex.output(2, TCA9534::Level::L);
  delay(20);
  ioex.output(2, TCA9534::Level::H);
  delay(100);
  pinMode(1, INPUT);
}

void setup() {
  initIOEX();
  initGT911();

  gfx.init();
  gfx.fillScreen(TFT_BLUE);
  gfx.setTextColor(TFT_WHITE, TFT_BLUE);
  gfx.setTextSize(4);
  gfx.drawString("Makerguides-4", 250, 200);  
}

void loop() {
  uint16_t touch_x, touch_y;
  if (gfx.getTouch(&touch_x, &touch_y)) {
    gfx.fillCircle(touch_x, touch_y, 10, TFT_YELLOW);
  }
  delay(100);
}

More specifically, this code fills the background of the display with blue, writes the text “Makerguides-4” and reacts to touches by drawing a yellow circle at the location where the screen is touched. The picture below shows how the screen looks like after a few touch inputs:

In the next sections we will have a closer look at the code and find out how it works.

Includes

The code starts by including the display configuration file, the Wire library for I2C communication, the Adafruit_GFX library for drawing and the TCA9534 library for the IO expander that is part of the CrowPanel Advance 7“ display:

#include "lgfx_conf.h"
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <TCA9534.h>

Objects

Next we create objects for the display and the IO expander:

LGFX gfx;
TCA9534 ioex;

initIOEX function

The initIOEX function initializes the TCA9534 IO Expander. This is needed to route the communication between the display and the ESP32 through the limited number of GPIO channels.

void initIOEX() {
  Wire.begin(15, 16);
  delay(50);

  ioex.attach(Wire);
  ioex.setDeviceAddress(0x18);
  ioex.config(1, TCA9534::Config::OUT);
  ioex.config(2, TCA9534::Config::OUT);
  ioex.config(3, TCA9534::Config::OUT);
  ioex.config(4, TCA9534::Config::OUT);
  ioex.output(1, TCA9534::Level::H);  // backlight
}

Important is also the last line that switches on the backlight of the display. Without the backlight on, you will not see anything.

initGT911 function

The initGT911 function initializes the touch screen controller (GT911) for the display. This allows the ESP32 to react to touch inputs.

void initGT911() {
  pinMode(1, OUTPUT);
  digitalWrite(1, LOW);
  ioex.output(2, TCA9534::Level::L);
  delay(20);
  ioex.output(2, TCA9534::Level::H);
  delay(100);
  pinMode(1, INPUT);
}

setup function

In the setup function we initialize the IO Expander, the GT911 and the display. We then fill the screen with blue and write the text “Makerguides-4” roughly in the center, at position (250, 200) in white.

void setup() {
  initIOEX();
  initGT911();

  gfx.init();
  gfx.fillScreen(TFT_BLUE);
  gfx.setTextColor(TFT_WHITE, TFT_BLUE);
  gfx.setTextSize(4);
  gfx.drawString("Makerguides-4", 250, 200);  
}

loop function

In the loop function we repeatedly call the gfx.getTouch() function to check for touch inputs. If there is a touch input we get the touch location from the variables touch_x and touch_y, and draw a filled circle in yellow with a radius of 10 pixels at the touch location.

void loop() {
  uint16_t touch_x, touch_y;
  if (gfx.getTouch(&touch_x, &touch_y)) {
    gfx.fillCircle(touch_x, touch_y, 10, TFT_YELLOW);
  }
  delay(100);
}

If you compile and upload the code you will notice that the Arduino IDE alerts you that updates for your boards and libraries are available.

Don’t install these updates, since the would replace the specific library and board versions we have just installed during the setup.

Display version 1.0 vs 1.2

There is an issue with the earlier version V1.0 of the CrowPanel Advance 7“ display that you should be aware of. You can find the version of your display on the back of the PCB. See the photo below. If your display comes with the acrylic housing, you will need to remove the backplate to see the version number.

The H2 and C6 modules for wireless communication that come with the V1.0 batch of the display do not have firmware pre-installed. Unfortunately, you cannot directly connect a serial programmer to flash the needed firmware, since the header pins are missing. You will have to solder pins on, flash the firmware, and then remove them.

For more details see https://github.com/Elecrow-RD/CrowPanel-Advance-5.0-HMI-ESP32-AI-Display-800×480/tree/master/example/example_code5.0/lesson-09.

Note that there are also differences in the Schematics for Version 1.0 and the current Version 1.2, which might be important for some applications.

Conclusions

I hope this tutorial helped you getting started with the CrowPanel Advance 7“ HMI Display. We provided a simple code example of how to write text on the display and react to touch inputs. For many applications this should be a good starting point.

If you want to build more advanced UIs, SquareLine Studio and LVGL are the way to go but they are also more difficult to use and the code is much more complex.

Elecrow also provides several code examples and video tutorials that show you how to use the speaker, the SD Card interface, the various wireless options and how to build AI applications, such as a Chat Bot.

If you need a smaller, simpler CrowPanel Display, have a look at our CrowPanel 2.8″ ESP32 Display : Easy Setup Guide. We also have some tutorials on applications with CrowPanel Displays such as Digital Clock with CrowPanel 3.5″ ESP32 Display, Digital Timer Switch with CrowPanel ESP32 Display, or the Parking sensor with CrowPanel ESP32 Display, which might be of interest.

If you have any questions, feel free to leave them in the comment section.

Happy Tinkering ; )

Links

Below some links for CrowPanel Advance 7“ HMI Display that I found useful when writing this tutorial:

• Wiki
• Specification
• Setup Instructions
• Code Examples
• Code for Wireless Modules
• Video Tutorials
• Schematics Version 1.0
• Schematics Version 1.2