This instructables show how to use Arduino IDE, ESP32 dev board and ILI9341 LCD to built a photo clock.
Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.
Step 1: What Is BiJin ToKei?
Recap from my previous intructables, ESP32 Photo Clock:
BiJin ToKei（美人時計）start from 2009, they find various beauty hold a time board report time every minute. BiJin ToKei provide web application and mobile app version. After these years, you can find many variant on the web now.
Step 2: Arduino Version
Step 3: Preparation
ESP32 Dev Board
Any ESP32 dev board should be ok.
A 8-pins stacking female header. Bending the long header wire can help to adjust the viewing angle of the LCD.
A 400 tie points breadboard.
Some breadboard jump wire.
This time I am using a 2.8 inches ILI9341 LCD. This program using Arduino_GFX library, so most common SPI LCD Display should be ok.
Arduino_GFX currently support:
- HX8352C 240x400
- HX8357B 320x480
- ILI9225 176x220
- ILI9341 240x320
- ILI9341 M5Stack 320x240
- ILI9486 320x480 (18 bit color)
- SEPS525 160x128
- SSD1331 96x64
- SSD1351 128x128
- SSD1351 128x96
- ST7735 128x128 (various tabs)
- ST7735 128x160 (various tabs)
- ST7735 80x160
- ST7789 240x135
- ST7789 240x240
- ST7789 TTGO T-Watch 240x240
- ST7789 240x320
Step 4: Plug ESP32 Dev Board on Breadboard
Step 5: Bend Stacking Header & Plug on LCD
Step 6: Plug LCD on Breadboard
Step 7: Connection
Use Breadboard jump wire connect LCD and ESP32 dev board together.
Here are the connection summary:
LCD -> ESP32 === ===== Vcc -> 5V pin (or 3.3V pin depends on your LCD display) GND -> GND CS -> GPIO 5 RESET -> GPIO 17 D/C -> GPIO 16 MOSI -> GPIO 23 SCK -> GPIO 18 LED -> GPIO 22 (Optional, some LCD require direct plug LED pin to 3.3V pin to make it brighter)
Step 8: Software Preparation
Download and install Arduino IDE if not yet: https://www.arduino.cc/en/Main/Software
Please follow Installation Instructions at GitHub: https://www.arduino.cc/en/Main/Software
Arduino GFX library
Add Arduino_GFX library to Arduino IDE: https://github.com/moononournation/Arduino_GFX.gi...
If you are not familiar add library from GitHub, simply press the green "Clone or download" button and then "Download ZIP". And then in Arduino IDE, select Sketch menu -> Include Library -> Add .ZIP Library... -> select downloaded ZIP file.
Arduino BiJin ToKei Source Code
Download the source code from GitHub: https://github.com/moononournation/ArduinoBiJinTo...
Step 9: How It Works?
Here are the program workflow:
- Initial LCD, you may change the pins and driver to fit for your display
Arduino_HWSPI *bus = new Arduino_HWSPI(16 /* DC */, 5 /* CS */, 18 /* SCK */, 23 /* MOSI */, -1 /* MISO */); Arduino_ILI9341 *tft = new Arduino_ILI9341(bus, 17 /* RST */, TFT_ROTATION);
- Connect WiFi, remember fill your WiFi AP settings
#define SSID_NAME "YourAP" #define SSID_PASSWORD "YourPassword"
- Connect NTP server to get the current time, you may change your local NTP server and timezone settings
const char* ntpServer = "pool.ntp.org"; #define GMT_OFFSET_SEC 28800L // Timezone +0800 #define DAYLIGHT_OFFSET_SEC 0L // no daylight saving
- If minute changed, make a HTTP request to a predefined URL in URL.h. There are many URL in the ToKei list, please read the comments in URL.h for more details.
#define JPG_SCALE JPG_SCALE_NONE #define TFT_ROTATION 0 // portrait #define URL "http://www.bijint.com/assets/pict/shizuoka/bp/%02d%02d.jpg"
- Get the HTTP response JPEG stream and feed to the esp_jpg_decode
esp_jpg_decode feed the decoded image block to LCD draw function
Step 10: Program
Open ArduinoBiJinToKei.ino in Arduino IDE, compile and upload the program to ESP32 dev board.
Step 11: Happy Time!
It's time to put the Arduino BiJin ToKei on your desktop and show off what you have done. Enjoy!