Difference between revisions of "ESP32 TFT LCD with Camera(3.5'')"

From MakerFabsWiki
Jump to: navigation, search
(Resources)
(48 intermediate revisions by 2 users not shown)
Line 1: Line 1:
ATTATION! <br>
+
 
The product isn't on the shelves yet!<br>
 
Wiki not complete!<br>
 
<br><br><br>
 
 
== Introduction ==
 
== Introduction ==
The ESP32 Touch Camera use ILI9488 screen, which comes with resistive or capacitive screens. Hava an OV2640 camera and SD card slot. It can be used as a webcam, an electronic album, or a digital camera. Support for Arduino and MicroPython. <br>
+
The 3.5" 320x480 TFT LCD driver is ILI9488, it uses SPI for communication with ESP32, the SPI main clock could be up to 60M~80M, make the display smooth enough for videos; and the camera OV2640 with pixel 2M, with this camera, you can make applications such as remote photography, face recognition…. While the camera not used, you can freely use all these pins with the breakout connectors, to connect the ESP32 display with sensors/ actuators, suitable for IoT applications. <br>
  
'''Model: [https://www.makerfabs.com/makepython-esp32.html MAKT32]'''<br>
+
'''Model: [https://www.makerfabs.com/esp32-3.5-inch-tft-touch-resistive-with-camera.html Resistive: ESPTFT35RE]'''<br>
[[File:ESP32 TFT LCD with Camera A01.jpg|500px]]<br>
+
'''Model: [https://www.makerfabs.com/esp32-3.5-inch-tft-touch-capacitive-with-camera.html Capacitive: ESPTFT35CA]'''<br>
 +
[[File:ESP32 TFT LCD with Camera A02.jpg|500px]]<br>
  
 
== Features ==
 
== Features ==
Line 24: Line 22:
 
*LCD Resolution: 320*480<br>
 
*LCD Resolution: 320*480<br>
 
*NS2009: A 4-wire resistive touch screen control circuit with I2C interface, which contains A 12-bit resolution A/D converter<br>
 
*NS2009: A 4-wire resistive touch screen control circuit with I2C interface, which contains A 12-bit resolution A/D converter<br>
*FT6X36 Series ICs are single-chip capacitive touch panel controller IC with a built-in 16 bit enhanced Micro-controller unit (MCU)<br>
+
*FT6236 Series ICs are single-chip capacitive touch panel controller IC with a built-in 16 bit enhanced Micro-controller unit (MCU)<br>
 
*Power supply: 5V, Type-C USB<br>
 
*Power supply: 5V, Type-C USB<br>
 
*Micro SD card slot on the board<br>
 
*Micro SD card slot on the board<br>
 +
*Board size: 66mm * 85mm<br>
  
  
== Pin Definitions ==
+
== Diagram ==
[[File:MakePython ESP32_1.JPG|700px]]<br>
+
[[File:ESP32 TFT LCD with Camera_9.JPG|500px]]<br>
Notice:<br>
+
Pin Assignment<br>
①IO34, IO35, IO36, IO39 input only.<br>
+
[[File:ESP32 TFT LCD with Camera_9a.JPG|500px]]<br>
②GPIO12 is internally pulled high in the module and is not recommended for use as a touch pin.<br>
+
Note:IO34/IO35/IO36/IO39 input only.<br>
 +
Dimension<br>
 +
[[File:ESP32 TFT LCD with Camera_a100.png|500px]]<br>
 +
Note:unit is mm.
  
 
==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/Makepython-ESP32 Github:Makepython-ESP32]'''
+
'''[https://github.com/Makerfabs/Project_Touch-Screen-Camera Github:Project_Touch_Screen_Camera]'''
  
 
===Software setup===
 
===Software setup===
 
+
'''NOTE: In order for the project to work normally, please install the same version.'''<br>
1.Install the ESP32 boards supporting<br>
+
1.Install the Arduino IDE V1.8.10.<br>
*Note After Arduino IDE installed, there is no package to support ESP32, we need to install the ESP32 package in Arduino IDE to continue.<br>
+
2.Install the ESP32 boards supporting V1.0.4<br>
*Select “File>Preferences>settings>Additional Boards Manager URLs” to fill the link: [https://dl.espressif.com/dl/package_esp32_index.json]<br>
+
*After Arduino IDE installed, there is no package to support ESP32, 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://dl.espressif.com/dl/package_esp32_index.json<br>
 
[[File:ESP32 TFT LCD with Camera_11.PNG|700px]]<br>
 
[[File:ESP32 TFT LCD with Camera_11.PNG|700px]]<br>
 
*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 TFT LCD with Camera_12.PNG|700px]]<br>
 
[[File:ESP32 TFT LCD with Camera_12.PNG|700px]]<br>
2.Select and setting the parameter in the Tools menu, as the picture<br>
+
3.Install Adafruit GFX library V1.10.4<br>
 +
:Click “Tools> Manager Libraries” to search for and install Adafruit GFX library.<br>
 +
[[File:ESP32 TFT LCD with Camera_14.PNG|700px]]<br>
 +
4.Install LovyanGFX library V0.3.4<br>
 +
:Click “Tools> Manager Libraries” to search for and install LovyanGFX library.<br>
 +
[[File:ESP32 TFT LCD with Camera_25.PNG|700px]]<br>
 +
5.Select and setting the parameter in the Tools menu, as the picture:<br>
 
[[File:ESP32 TFT LCD with Camera_13.PNG|700px]]<br>
 
[[File:ESP32 TFT LCD with Camera_13.PNG|700px]]<br>
3.Install Adafruit GFX library<br>
 
Click “Tools> Manager Libraries” to search for and install Adafruit GFX library.<br>
 
[[File:ESP32 TFT LCD with Camera_14.PNG|700px]]<br>
 
  
 
===Draw on LCD===
 
===Draw on LCD===
Line 58: Line 64:
 
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 “\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>
 
<pre>
 
<pre>
 +
#include <Wire.h>
 +
#include "SPI.h"
 +
#include <LovyanGFX.hpp>
 +
#include "makerfabs_pin.h"
 +
 
//Choice your touch IC
 
//Choice your touch IC
#define ESP32_SDA 26
+
#define NS2009_TOUCH   //Resistive screen driver
#define ESP32_SCL 27
+
//#define FT6236_TOUCH //Capacitive screen driver
 
 
//#define NS2009_TOUCH   //Resistive screen driver
 
#define FT6236_TOUCH   //Capacitive screen driver
 
 
</pre>
 
</pre>
 +
[[File:ESP32 TFT LCD with Camera_26.PNG|500px]]<br>
 
3. Verify it and upload.<br>
 
3. Verify it and upload.<br>
 
[[File:ESP32 TFT LCD with Camera_15.PNG|500px]]<br>
 
[[File:ESP32 TFT LCD with Camera_15.PNG|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 TFT LCD with Camera_16.PNG|700px]]<br>
 
[[File:ESP32 TFT LCD with Camera_16.PNG|700px]]<br>
4. Reset the ESP32 and you will get the drawing board.<br>
+
4. After done uploading, repower the ESP32 and you will get the drawing board.<br>
[[File:ESP32 TFT LCD with Camera_17.GIF|700px]]<br>
+
[[File:ESP32 TFT LCD with Camera_17.GIF]]<br>
  
 
===Display the picture===
 
===Display the picture===
  
 
1. You can get the code from here:'''[https://github.com/Makerfabs/Project_Touch-Screen-Camera Core]'''<br>
 
1. You can get the code from here:'''[https://github.com/Makerfabs/Project_Touch-Screen-Camera Core]'''<br>
2. Open the file “\Project_Touch-Screen-Camera-master\SD2TFT\SD2TFT.ino”. Choose the screen type and modify the code.<br>
+
2. Copy the picture you want to show to the SD card. Insert the SD card into the board.<br>
3. Verify and upload the code, you will get a digital photo frame.<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>
[[File:ESP32 TFT LCD with Camera_18.GIF|700px]]<br>
+
<pre>String img_file[5] =
 +
    {
 +
        "/1.bmp",               
 +
        "/2.bmp",
 +
        "/3.bmp",
 +
        "/4.bmp",
 +
        "/5.bmp"};</pre>
 +
4. Verify and upload the code, you will get a digital photo frame.<br>
 +
[[File:ESP32 TFT LCD with Camera_18.GIF]]<br>
  
 
===Camera===
 
===Camera===
  
 
1. You can get the code from here: '''[https://github.com/Makerfabs/Project_Touch-Screen-Camera Core]'''<br>
 
1. You can get the code from here: '''[https://github.com/Makerfabs/Project_Touch-Screen-Camera Core]'''<br>
2. Open the file “\Project_Touch-Screen-Camera-master\Camera_v2\Camera_v2.ino”. Choose the screen type and modify the code.<br>
+
2. Open the file “\Project_Touch-Screen-Camera-master\Camera_v2\Camera_v2.ino”. Choose the screen type and modify the code.<be>
 +
<pre>
 +
//#define NS2009_TOUCH  //Resistive 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>
 
3. Verify and upload the code, you will get a camera.<br>  
 
3. Verify and upload the code, you will get a camera.<br>  
[[File:MakePython ESP32_2.JPG|700px]]<br>
+
[[File:ESP32 TFT LCD with Camera_20.JPG|500px]]<br>
 +
 
 +
== Indoor Environment Expansion board ==
  
 +
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>
 +
'''Model: [https://www.makerfabs.com/esp32-touch-indoor-environment-expansion.html Indoor Environment Expansion]'''<br>
 +
[[File:ESP32 TFT LCD with Camera_21.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 TFT LCD with Camera_22.JPG|500px]]<br>
 +
 +
===Display CO2 historical level===
 +
*Plug the expansion board into the ESP32 TFT LCD board.
 +
*Loading the [https://github.com/Makerfabs/Project_Touch-Screen-Camera/tree/master/example/p-line-chart program].
 +
*Reset the ESP32 board, the ESP32 will start to record the CO2 level and TVOC level, and draw the historical values to line.
 +
[[File:ESP32 TFT LCD with Camera_23.JPG|500px]]<br>
  
 
== FAQ  ==
 
== 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.<br>
+
'''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.'''<br>
 +
*Q: Why the display fails to respond sometimes I touch.<br>
 +
:A: The touching interface is loose, please reconnect it.<br>
 +
 
 
== Resources ==
 
== Resources ==
*[https://www.makerfabs.com/wiki/images/f/f9/MakePython_ESP32_V1.1.pdf  v1.1 Schematic]
 
*[https://www.makerfabs.com/desfile/files/esp32-wroom-32_datasheet_en.pdf ESP32 wroom datasheet]
 
 
*[https://www.makerfabs.com/desfile/files/esp32-wrover_datasheet_en.pdf ESP32 wrover datasheet]
 
*[https://www.makerfabs.com/desfile/files/esp32-wrover_datasheet_en.pdf ESP32 wrover datasheet]
 +
*[https://github.com/Makerfabs/Project_Touch-Screen-Camera Github: Project_Touch-Screen-Camera]
 +
*[https://github.com/Makerfabs/Project-ESP32-LVGL  Github: Project-ESP32-LVGL]
 +
*[https://www.makerfabs.com/wiki/images/6/67/ESP32_TFT_Touch_with_camera%283.5%27%27_ili9488%29_sch.pdf Schematic]

Revision as of 03:11, 21 January 2022

Introduction

The 3.5" 320x480 TFT LCD driver is ILI9488, it uses SPI for communication with ESP32, the SPI main clock could be up to 60M~80M, make the display smooth enough for videos; and the camera OV2640 with pixel 2M, with this camera, you can make applications such as remote photography, face recognition…. While the camera not used, you can freely use all these pins with the breakout connectors, to connect the ESP32 display with sensors/ actuators, suitable for IoT applications.

Model: Resistive: ESPTFT35RE
Model: Capacitive: ESPTFT35CA
ESP32 TFT LCD with Camera A02.jpg

Features

  • Integrated ESP32 Wrover 2.4G WiFi and Bluetooth
  • 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
  • Bluetooth Protocols: Bluetooth v4.2 BR/EDR and BLE specification
  • Bluetooth Radio: NZIF receiver with-97 dBm sensitivity, Class-1/class-2 and class-3 transmitter, AFH
  • Bluetooth Audio: CVSD and SBC
  • Arduino Compatible: You can play it with Arduino IDE
  • OV2640: A 1/4inch CMOS UXGA (1632*1232) image sensor manufactured by OmniVision
  • OV2640 supports output images up to 2 million pixels
  • LCD 3.5 inch Amorphous-TFT-LCD (Thin Film Transistor Liquid Crystal Display) for mobile-phone or handy electrical equipment
  • LCD Driver: ILI9488
  • LCD Resolution: 320*480
  • NS2009: A 4-wire resistive touch screen control circuit with I2C interface, which contains A 12-bit resolution A/D converter
  • FT6236 Series ICs are single-chip capacitive touch panel controller IC with a built-in 16 bit enhanced Micro-controller unit (MCU)
  • Power supply: 5V, Type-C USB
  • Micro SD card slot on the board
  • Board size: 66mm * 85mm


Diagram

ESP32 TFT LCD with Camera 9.JPG
Pin Assignment
ESP32 TFT LCD with Camera 9a.JPG
Note:IO34/IO35/IO36/IO39 input only.
Dimension
ESP32 TFT LCD with Camera a100.png
Note:unit is mm.

Usage

Warning: Don't operate when in power supply on
Github:Project_Touch_Screen_Camera

Software setup

NOTE: In order for the project to work normally, please install the same version.
1.Install the Arduino IDE V1.8.10.
2.Install the ESP32 boards supporting V1.0.4

  • After Arduino IDE installed, there is no package to support ESP32, we need to install the ESP32 package in Arduino IDE to continue.
  • Select “File>Preferences>settings>Additional Boards Manager URLs” to fill the link: https://dl.espressif.com/dl/package_esp32_index.json

ESP32 TFT LCD with Camera 11.PNG

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

ESP32 TFT LCD with Camera 12.PNG
3.Install Adafruit GFX library V1.10.4

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

ESP32 TFT LCD with Camera 14.PNG
4.Install LovyanGFX library V0.3.4

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

ESP32 TFT LCD with Camera 25.PNG
5.Select and setting the parameter in the Tools menu, as the picture:
ESP32 TFT LCD with Camera 13.PNG

Draw on LCD

1. You can get the code from here: Core
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.

#include <Wire.h>
#include "SPI.h"
#include <LovyanGFX.hpp>
#include "makerfabs_pin.h"

//Choice your touch IC
#define NS2009_TOUCH    //Resistive screen driver
//#define FT6236_TOUCH  //Capacitive screen driver

ESP32 TFT LCD with Camera 26.PNG
3. Verify it and upload.
ESP32 TFT LCD with Camera 15.PNG
If failed to upload the code as the picture, please upload again and try to press the Flash switch when the code is uploading.
ESP32 TFT LCD with Camera 16.PNG
4. After done uploading, repower the ESP32 and you will get the drawing board.
ESP32 TFT LCD with Camera 17.GIF

Display the picture

1. You can get the code from here:Core
2. Copy the picture you want to show to the SD card. Insert the SD card into the board.
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.

String img_file[5] =
    {
        "/1.bmp",                
        "/2.bmp",
        "/3.bmp",
        "/4.bmp",
        "/5.bmp"};

4. Verify and upload the code, you will get a digital photo frame.
ESP32 TFT LCD with Camera 18.GIF

Camera

1. You can get the code from here: Core
2. Open the file “\Project_Touch-Screen-Camera-master\Camera_v2\Camera_v2.ino”. Choose the screen type and modify the code.<be>

//#define NS2009_TOUCH  //Resistive 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

3. Verify and upload the code, you will get a camera.
ESP32 TFT LCD with Camera 20.JPG

Indoor Environment Expansion board

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.
Model: Indoor Environment Expansion
ESP32 TFT LCD with Camera 21.JPG

Features

  • SGP30 Air Quality Sensor, measuring TVOC and CO2.
  • DHT11 temperature and humidity sensor.
  • Active buzzer.

Hardware

Using

  • Plug the expansion board into the ESP32 TFT LCD board.
  • Loading the program obtained from 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.

ESP32 TFT LCD with Camera 22.JPG

Display CO2 historical level

  • Plug the expansion board into the ESP32 TFT LCD board.
  • Loading the program.
  • Reset the ESP32 board, the ESP32 will start to record the CO2 level and TVOC level, and draw the historical values to line.

ESP32 TFT LCD with Camera 23.JPG

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