Introduction: Arduino BiJin ToKei

This instructables show how to use Arduino IDE, ESP32 dev board and ILI9341 LCD to built a photo clock.

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

My previous intructables, ESP32 Photo Clock, works fine. However, the program is built on ESP-IDF. This is a big barrier for the beginner. Since Aruino-esp32 framework is very maturer now, implement a photo clock on Arduino IDE become much easier.

Step 3: Preparation

ESP32 Dev Board

Any ESP32 dev board should be ok.

Stacking Header

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.

Breadboard Wire

Some breadboard jump wire.

LCD Display

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
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

Arduino IDE

Download and install Arduino IDE if not yet:

Arduino ESP32 Support

Please follow Installation Instructions at GitHub:

Arduino GFX library

Add Arduino_GFX library to Arduino IDE:

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:

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 = "";
    #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 TFT_ROTATION 0 // portrait
    #define URL ""
    • 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!