Difference between revisions of "ESP32-S2 Parallel TFT with Touch(3.5'')"

From MakerFabsWiki
Jump to: navigation, search
(Created page with " == Introduction == The 3.5" 320x480 TFT LCD driver is ILI9488, it uses 16bits parallel line for communication with ESP32-S2, the main clock could be up to 20MHz, make the dis...")
 
(Software setup)
 
(30 intermediate revisions by the same user not shown)
Line 3: Line 3:
 
The 3.5" 320x480 TFT LCD driver is ILI9488, it uses 16bits parallel line for communication with ESP32-S2, the main clock could be up to 20MHz, make the display smooth enough for videos; You can freely use some of Mabee pins(A I2c and a IOs) with the breakout connectors, to connect the ESP32-S2 display with sensors/ actuators, suitable for IoT applications. <br>
 
The 3.5" 320x480 TFT LCD driver is ILI9488, it uses 16bits parallel line for communication with ESP32-S2, the main clock could be up to 20MHz, make the display smooth enough for videos; You can freely use some of Mabee pins(A I2c and a IOs) with the breakout connectors, to connect the ESP32-S2 display with sensors/ actuators, suitable for IoT applications. <br>
  
'''Model: [https://www.makerfabs.com/esp32-3.5-inch-tft-touch-resistive-with-camera.html Resistive: ESPTFT35RE]'''<br>
+
'''Model: [https://www.makerfabs.com/esp32-s2-parallel-tft-with-touch-3-5-ili9488.html ESP32S235D]'''<br>
  
 
[[File:ESP32-S2_Parallel_TFT_with_Touch_A001.jpg|500px]]<br>
 
[[File:ESP32-S2_Parallel_TFT_with_Touch_A001.jpg|500px]]<br>
Line 10: Line 10:
  
 
*Integrated ESP32-S2 with 2.4G WiFi<br>
 
*Integrated ESP32-S2 with 2.4G WiFi<br>
 +
*ESP32-S2-SOLO-N4R2 Module with 4MB Flash and 2MB PSRAM<br>
 
*Wi-Fi Protocols: 802.11b/g/n(802.11n up to 150Mbps),A-MPDU and A-MSDU aggregation and 0.4us guard interval support<br>
 
*Wi-Fi Protocols: 802.11b/g/n(802.11n up to 150Mbps),A-MPDU and A-MSDU aggregation and 0.4us guard interval support<br>
 
*Wi-Fi Frequency range: 2.402GHz - 2.483Ghz<br>
 
*Wi-Fi Frequency range: 2.402GHz - 2.483Ghz<br>
Line 21: Line 22:
 
*Micro SD card slot on the board<br>
 
*Micro SD card slot on the board<br>
 
*Dual USB Type-C: one for native USB and one for USB-to-UART<br>
 
*Dual USB Type-C: one for native USB and one for USB-to-UART<br>
*Two Mabee interfaces<br>
+
*Two Mabee interfaces(HY2.0-4P Connector)<br>
 
*Board size: 66mm * 85mm<br>
 
*Board size: 66mm * 85mm<br>
 
  
 
== Diagram ==
 
== Diagram ==
 
[[File:ESP32-S2_Parallel_TFT_with_Touch_A002.JPG|500px]]<br>
 
[[File:ESP32-S2_Parallel_TFT_with_Touch_A002.JPG|500px]]<br>
Pin Assignment<br>
+
Note: SPK is a JST-2P,2.0mm connector. J1 and J2 is a HY2.0-4P connector(compatible with seeed Grove connector), you can used with our Mabee serial module.<br>
[[File:ESP32-S2_Parallel_TFT_with_Touch_A003.JPG|500px]]<br>
+
 
 
Dimension<br>
 
Dimension<br>
[[File:ESP32-S2_Parallel_TFT_with_Touch_A004.JPG|500px]]<br>
+
[[File:ESP32 TFT LCD with Camera_a100.png|500px]]<br>
Note:unit is mm.
+
Note:unit is mm.<br>
 +
PINOUT<br>
 +
[[File:ESP32-S2_Parallel_TFT_with_Touch_B102.JPG|700px]]<br><br>
  
 
==Usage==
 
==Usage==
 
Warning: Don't operate when in power supply on<br>
 
Warning: Don't operate when in power supply on<br>
'''[https://github.com/Makerfabs/Project_Touch-Screen-Camera Github:Project_Touch_Screen_Camera]'''
+
'''[https://github.com/Makerfabs/Project_Touch-Screen-Camera Github:Project_Touch_Screen_Camera]'''<br>
 +
If you not install CP2104 driver on your PC, install CP2104 driver first '''[https://www.silabs.com/developers/usb-to-uart-bridge-vcp-drivers CP210x Driver]'''<br>
  
 
===Software setup===
 
===Software setup===
'''NOTE: In order for the project to work normally, please install the same version.'''<br>
+
'''NOTE: It shows different results in some version, the same version is recommaned.'''<br>
 
1.Install the Arduino IDE V1.8.10.<br>  
 
1.Install the Arduino IDE V1.8.10.<br>  
2.Install the ESP32-S2 boards supporting V1.0.4<br>
+
2.Install the ESP32-S2 boards supporting package V2.0.1<br>
 
*After Arduino IDE installed, there is no package to support ESP32-S2, we need to install the ESP32 package in Arduino IDE to continue.<br>
 
*After Arduino IDE installed, there is no package to support ESP32-S2, we need to install the ESP32 package in Arduino IDE to continue.<br>
 
*Select “File>Preferences>settings>Additional Boards Manager URLs” to fill the link: https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_dev_index.json<br>
 
*Select “File>Preferences>settings>Additional Boards Manager URLs” to fill the link: https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_dev_index.json<br>
Line 46: Line 49:
 
*Click “Tools>Board>Boards Manager” to search for and install the ESP32 library:<br> 
 
*Click “Tools>Board>Boards Manager” to search for and install the ESP32 library:<br> 
 
[[File:ESP32-S2_Parallel_TFT_with_Touch_A006.jpg|700px]]<br>
 
[[File:ESP32-S2_Parallel_TFT_with_Touch_A006.jpg|700px]]<br>
3.Install Adafruit GFX library V1.10.4<br>
+
3.Install LovyanGFX library V0.4.7<br>
:Click “Tools> Manager Libraries” to search for and install Adafruit GFX library.<br>
 
[[File:ESP32-S2_Parallel_TFT_with_Touch_A007.jpg|700px]]<br>
 
4.Install LovyanGFX library V0.3.4<br>
 
 
:Click “Tools> Manager Libraries” to search for and install LovyanGFX library.<br>
 
:Click “Tools> Manager Libraries” to search for and install LovyanGFX library.<br>
 
[[File:ESP32-S2_Parallel_TFT_with_Touch_A009.jpg|700px]]<br>
 
[[File:ESP32-S2_Parallel_TFT_with_Touch_A009.jpg|700px]]<br>
 
5.Select and setting the parameter in the Tools menu, as the picture:<br>
 
5.Select and setting the parameter in the Tools menu, as the picture:<br>
 
[[File:ESP32-S2_Parallel_TFT_with_Touch_A010.jpg|700px]]<br>
 
[[File:ESP32-S2_Parallel_TFT_with_Touch_A010.jpg|700px]]<br>
 +
Note: Different PC has different Serial COM number.
  
===Draw on LCD===
+
===Graph on LCD===
  
1. You can get the code from here: '''[https://github.com/Makerfabs/Project_Touch-Screen-Camera Core]'''<br>
+
1. You can get the sourve code from github: '''[https://github.com/Makerfabs/Makerfabs-ESP32-S2-Parallel-TFT-with-Touch/tree/main/example/simple_test/Graph16_3.5  Graph16_3.5]'''<br>
2. Open the file “\Project_Touch-Screen-Camera-master\touch_draw_v2\touch_draw_v2.ino”. Select the screen type used and comment out the ones that are not used.<br>
+
2. Open the file [https://github.com/Makerfabs/Makerfabs-ESP32-S2-Parallel-TFT-with-Touch/tree/main/example/simple_test/Graph16_3.5 Graph16_3.5].<br>
 
<pre>
 
<pre>
#include <Wire.h>
+
void setup()
#include "SPI.h"
+
{
#include <LovyanGFX.hpp>
+
  pinMode(LCD_CS, OUTPUT);
#include "makerfabs_pin.h"
+
  pinMode(LCD_BLK, OUTPUT);
  
//Choice your touch IC
+
  digitalWrite(LCD_CS, LOW);
#define NS2009_TOUCH    //Resistive screen driver
+
  digitalWrite(LCD_BLK, HIGH);
//#define FT6236_TOUCH  //Capacitive screen driver
+
 
 +
  Serial.begin(115200);
 +
  Serial.println("");
 +
  Serial.println("");
 +
  Serial.println("Lovyan's LovyanGFX library Test!");
 +
 
 +
  tft.init();
 +
  tft.setRotation(0);
 +
  tft.startWrite();
 +
}
 
</pre>
 
</pre>
[[File:ESP32-S2_Parallel_TFT_with_Touch_A011.jpg|500px]]<br>
 
 
3. Verify it and upload.<br>
 
3. Verify it and upload.<br>
 
[[File:ESP32-S2_Parallel_TFT_with_Touch_A012.jpg|500px]]<br>
 
[[File:ESP32-S2_Parallel_TFT_with_Touch_A012.jpg|500px]]<br>
 
If failed to upload the code as the picture, please upload again and try to press the Flash switch when the code is uploading.<br>
 
If failed to upload the code as the picture, please upload again and try to press the Flash switch when the code is uploading.<br>
[[File:ESP32-S2_Parallel_TFT_with_Touch_A013.jpg|700px]]<br>
+
4. After done uploading, reset the ESP32-S2 and you will get a graph on the screen.<br>
4. After done uploading, repower the ESP32 and you will get the drawing board.<br>
+
[[File:ESP32-S2_Parallel_TFT_with_Touch_A014.jpg|500px]]<br>
[[File:ESP32-S2_Parallel_TFT_with_Touch_A014.jpg]]<br>
 
  
===Display the picture===
+
===Touch the screen===
  
1. You can get the code from here:'''[https://github.com/Makerfabs/Project_Touch-Screen-Camera Core]'''<br>
+
1. You can get the source code from our github:'''[https://github.com/Makerfabs/Makerfabs-ESP32-S2-Parallel-TFT-with-Touch/tree/main/example/simple_test/touch16_3.5 touch16_3.5]'''<br>
2. Copy the picture you want to show to the SD card. Insert the SD card into the board.<br>
+
2. Open the file “\/simple_test/touch16_3.5” with Arduino IDE.<br>
3. Open the file “\Project_Touch-Screen-Camera-master\SD2TFT\SD2TFT.ino”. The name of the showed picture must be filled in the string array, such as the below code.<br>
+
If you purchase a capacitive screen, make sure the code as below.<br>
<pre>String img_file[5] =
+
<pre>
    {
+
//#define NS2009_TOUCH  //Resistive screen driver
        "/1.bmp",               
+
#define FT6236_TOUCH //Capacitive screen driver
        "/2.bmp",
+
</pre>
        "/3.bmp",
+
If you purchase a resistive screen, make sure the code as below.<br>
        "/4.bmp",
+
<pre>
        "/5.bmp"};</pre>
+
#define NS2009_TOUCH  //Resistive screen driver
4. Verify and upload the code, you will get a digital photo frame.<br>
+
//#define FT6236_TOUCH //Capacitive screen driver
[[File:ESP32-S2_Parallel_TFT_with_Touch_A014.GIF]]<br>
+
</pre>
 
+
4. Verify and upload the code, you can touch the screen.,a red circle will follow your finger on the screen.<br>
===Camera===
+
[[File:ESP32-S2_Parallel_TFT_with_Touch_A015.jpg]]<br>
  
1. You can get the code from here: '''[https://github.com/Makerfabs/Project_Touch-Screen-Camera Core]'''<br>
+
===microSD card test===
2. Open the file “\Project_Touch-Screen-Camera-master\Camera_v2\Camera_v2.ino”. Choose the screen type and modify the code.<be>
+
1. You can get the source code from our github:'''[https://github.com/Makerfabs/Makerfabs-ESP32-S2-Parallel-TFT-with-Touch/tree/main/firmware/SD16_3.5 SD16_3.5]'''<br>
 +
2. Copy a picture named logo.bmp to the microSD card. Insert the microSD card into the board.<br>
 +
3. Open the file “/firmware/SD16_3.5/SD16_3.5.ino” with Arduino IDE.<br>
 +
If you purchase a capacitive screen, make sure the code as below.<br>
 
<pre>
 
<pre>
 
//#define NS2009_TOUCH  //Resistive screen driver
 
//#define NS2009_TOUCH  //Resistive screen driver
 
#define FT6236_TOUCH //Capacitive screen driver
 
#define FT6236_TOUCH //Capacitive screen driver
 
#ifdef NS2009_TOUCH
 
#include "NS2009.h"
 
const int i2c_touch_addr = NS2009_ADDR;
 
#define get_pos ns2009_pos
 
#endif
 
 
#ifdef FT6236_TOUCH
 
#include "FT6236.h"
 
const int i2c_touch_addr = TOUCH_I2C_ADD;
 
#define get_pos ft6236_pos
 
#endif
 
 
</pre>
 
</pre>
3. Verify and upload the code, you will get a camera.<br>
+
If you purchase a resistive screen, make sure the code as below.<br>
[[File:ESP32-S2_Parallel_TFT_with_Touch_A015.jpg|500px]]<br>
+
<pre>
 
+
#define NS2009_TOUCH  //Resistive screen driver
== Indoor Environment Expansion board ==
+
//#define FT6236_TOUCH //Capacitive screen driver
 
+
</pre>
This is an expansion board for measuring CO2, TVOC, Temperature, and Humidity. The board is design for ESP32 TFT LCD with Camera(3.5')(also for 3.2' one). For using, plug the board into the ESP32 TFT LCD board directly, program the ESP32. The ESP32 TFT LCD will turn to a meter for monitoring the environment.<br>
+
4. Verify and upload the code, you can see the pic from microSD card on the screen.<br>
'''Model: [https://www.makerfabs.com/esp32-touch-indoor-environment-expansion.html Indoor Environment Expansion]'''<br>
 
[[File:ESP32-S2_Parallel_TFT_with_Touch_A016.jpg|500px]]<br>
 
 
 
=== Features ===
 
*SGP30 Air Quality Sensor, measuring TVOC and CO2.
 
*DHT11 temperature and humidity sensor.
 
*Active buzzer.
 
===Hardware===
 
 
 
*[https://www.makerfabs.com/wiki/images/d/d6/3.5_Environment_Expansion_Schematic.pdf Schematic]<br>
 
 
 
=== Using ===
 
*Plug the expansion board into the ESP32 TFT LCD board.
 
*Loading the program obtained from [https://github.com/Makerfabs/Project_Touch-Screen-Camera/tree/master/Environment%20Expansion%20Board GitHub].
 
*Reset the ESP32, and wait a minute.
 
*The LCD will display the measure of CO2, Temperature, Humidity.
 
*When the CO2 level is high over 1000, the buzzer on board rings.
 
[[File:ESP32-S2_Parallel_TFT_with_Touch_A017.jpg|500px]]<br>
 
  
===Display CO2 historical level===
+
===Comparison===
*Plug the expansion board into the ESP32 TFT LCD board.
+
[[File:ESP32-S2_Parallel_TFT_with_Touch_A020.jpg]]<br>
*Loading the [https://github.com/Makerfabs/Project_Touch-Screen-Camera/tree/master/example/p-line-chart program].
+
We can see from the table, ESP32-S2 Parallel TFT with Touch(3.5'') get the total elapsed: 1,051,437 microseconds, 5 times faster than others.<br>
*Reset the ESP32 board, the ESP32 will start to record the CO2 level and TVOC level, and draw the historical values to line.
+
Note: The first two data come from [https://youtu.be/wKP7fEGQ1wU?t=188 youtobe] <br>
[[File:ESP32-S2_Parallel_TFT_with_Touch_A018.jpg|500px]]<br>
 
  
 
== FAQ  ==
 
== FAQ  ==
Line 149: Line 129:
  
 
== Resources ==
 
== Resources ==
*[https://www.makerfabs.com/desfile/files/esp32-wrover_datasheet_en.pdf ESP32-S2datasheet]
+
*[https://www.espressif.com/sites/default/files/documentation/esp32-s2-solo_esp32-s2-solo-u_datasheet_en.pdf ESP32-S2-solo_datasheet]
*[https://github.com/Makerfabs/ Github: Project_Touch-Screen]
+
*[https://github.com/Makerfabs/Makerfabs-ESP32-S2-Parallel-TFT-with-Touch github source]
 +
*[https://github.com/Makerfabs/Makerfabs-ESP32-S2-Parallel-TFT-with-Touch/tree/main/hardware hardware]
 +
*[https://github.com/Makerfabs/ESP32-S2-MLX90640-Touch-Screen-Thermal-Camera Thermal Camera Application]
 +
*[[File:HY2.0 Connector.pdf]]

Latest revision as of 01:38, 3 April 2022

Introduction

The 3.5" 320x480 TFT LCD driver is ILI9488, it uses 16bits parallel line for communication with ESP32-S2, the main clock could be up to 20MHz, make the display smooth enough for videos; You can freely use some of Mabee pins(A I2c and a IOs) with the breakout connectors, to connect the ESP32-S2 display with sensors/ actuators, suitable for IoT applications.

Model: ESP32S235D

ESP32-S2 Parallel TFT with Touch A001.jpg

Features

  • Integrated ESP32-S2 with 2.4G WiFi
  • ESP32-S2-SOLO-N4R2 Module with 4MB Flash and 2MB PSRAM
  • Wi-Fi Protocols: 802.11b/g/n(802.11n up to 150Mbps),A-MPDU and A-MSDU aggregation and 0.4us guard interval support
  • Wi-Fi Frequency range: 2.402GHz - 2.483Ghz
  • Arduino Compatible: You can play it with Arduino IDE
  • LCD 3.5 inch Amorphous-TFT-LCD (Thin Film Transistor Liquid Crystal Display) for mobile-phone or handy electrical equipment
  • LCD Driver: ILI9488(16bits parallel line)
  • LCD Resolution: 320*480
  • FT6236 Series ICs are single-chip capacitive touch panel controller IC with a built-in 16 bit enhanced Micro-controller unit (MCU)
  • NS2009: A 4-wire resistive touch screen control circuit with I2C interface, which contains A 12-bit resolution A/D converter
  • Power supply: 5V, Type-C USB
  • Micro SD card slot on the board
  • Dual USB Type-C: one for native USB and one for USB-to-UART
  • Two Mabee interfaces(HY2.0-4P Connector)
  • Board size: 66mm * 85mm

Diagram

ESP32-S2 Parallel TFT with Touch A002.JPG
Note: SPK is a JST-2P,2.0mm connector. J1 and J2 is a HY2.0-4P connector(compatible with seeed Grove connector), you can used with our Mabee serial module.

Dimension
ESP32 TFT LCD with Camera a100.png
Note:unit is mm.
PINOUT
ESP32-S2 Parallel TFT with Touch B102.JPG

Usage

Warning: Don't operate when in power supply on
Github:Project_Touch_Screen_Camera
If you not install CP2104 driver on your PC, install CP2104 driver first CP210x Driver

Software setup

NOTE: It shows different results in some version, the same version is recommaned.
1.Install the Arduino IDE V1.8.10.
2.Install the ESP32-S2 boards supporting package V2.0.1

ESP32-S2 Parallel TFT with Touch A005.jpg

  • Click “Tools>Board>Boards Manager” to search for and install the ESP32 library:
     

ESP32-S2 Parallel TFT with Touch A006.jpg
3.Install LovyanGFX library V0.4.7

Click “Tools> Manager Libraries” to search for and install LovyanGFX library.

ESP32-S2 Parallel TFT with Touch A009.jpg
5.Select and setting the parameter in the Tools menu, as the picture:
ESP32-S2 Parallel TFT with Touch A010.jpg
Note: Different PC has different Serial COM number.

Graph on LCD

1. You can get the sourve code from github: Graph16_3.5
2. Open the file Graph16_3.5.

void setup()
{
  pinMode(LCD_CS, OUTPUT);
  pinMode(LCD_BLK, OUTPUT);

  digitalWrite(LCD_CS, LOW);
  digitalWrite(LCD_BLK, HIGH);

  Serial.begin(115200);
  Serial.println("");
  Serial.println("");
  Serial.println("Lovyan's LovyanGFX library Test!");

  tft.init();
  tft.setRotation(0);
  tft.startWrite();
}

3. Verify it and upload.
ESP32-S2 Parallel TFT with Touch A012.jpg
If failed to upload the code as the picture, please upload again and try to press the Flash switch when the code is uploading.
4. After done uploading, reset the ESP32-S2 and you will get a graph on the screen.
ESP32-S2 Parallel TFT with Touch A014.jpg

Touch the screen

1. You can get the source code from our github:touch16_3.5
2. Open the file “\/simple_test/touch16_3.5” with Arduino IDE.
If you purchase a capacitive screen, make sure the code as below.

//#define NS2009_TOUCH  //Resistive screen driver
#define FT6236_TOUCH //Capacitive screen driver

If you purchase a resistive screen, make sure the code as below.

#define NS2009_TOUCH  //Resistive screen driver
//#define FT6236_TOUCH //Capacitive screen driver

4. Verify and upload the code, you can touch the screen.,a red circle will follow your finger on the screen.
ESP32-S2 Parallel TFT with Touch A015.jpg

microSD card test

1. You can get the source code from our github:SD16_3.5
2. Copy a picture named logo.bmp to the microSD card. Insert the microSD card into the board.
3. Open the file “/firmware/SD16_3.5/SD16_3.5.ino” with Arduino IDE.
If you purchase a capacitive screen, make sure the code as below.

//#define NS2009_TOUCH  //Resistive screen driver
#define FT6236_TOUCH //Capacitive screen driver

If you purchase a resistive screen, make sure the code as below.

#define NS2009_TOUCH  //Resistive screen driver
//#define FT6236_TOUCH //Capacitive screen driver

4. Verify and upload the code, you can see the pic from microSD card on the screen.

Comparison

ESP32-S2 Parallel TFT with Touch A020.jpg
We can see from the table, ESP32-S2 Parallel TFT with Touch(3.5) get the total elapsed: 1,051,437 microseconds, 5 times faster than others.
Note: The first two data come from youtobe

FAQ

You can list your question here or contact support@makerfabs.com for technology support. Detailed descriptions of your question will be helped to solve your question.

  • Q: Why the display fails to respond sometimes I touch.
A: The touching interface is loose, please reconnect it.

Resources