Google Photo Clock

This instructables show how to use a ESP32 and a LCD to make a digital clock with randomize photo display in the background every minute. The photos are come from you shared Google Photo Album, simply input the share link ESP32 will do the job ;>

Step 1: Hardware Preparation

REUSE PREVIOUS PROJECT HARDWARE

If you have done previous instructables, you can reuse the hardware for this project and can skip the hardware assembly:

• https://www.instructables.com/id/Floating-Display/
• https://www.instructables.com/id/COVID-19-WHO-Dash...

ESP8266/ESP32 Dev Board

Any ESP8266/ESP32 Dev Board should be ok.

LCD Display

Any Arduino_GFX supported LCD is ok, you may find currently supported display at GitHub readme: https://github.com/moononournation/Arduino_GFX

Breadboard

Any breadboard that can fit for the ESP Dev Board and LCD Display.

Jumper Wire

Some Jumper Wires, depends on the dev board and LCD pins layout. In most case 6-9 male to female jumper wires are enough.

Step 2: Hardware Assembly

Push the ESP32 Dev Board on the breadboard and connect LCD with jumper wires.

Here are the sample connection summary:

ESP8266 -> LCD

Vcc     -> Vcc
GND     -> GND
GPIO 15 -> CS
GPIO  4 -> DC (if available)
RST     -> RST
GPIO 14 -> SCK
GPIO 12 -> MISO (optional)
GPIO  4 -> LED (if available)
GPIO 13 -> MOSI / SDA

ESP32 -> LCD

Vcc     -> Vcc
GND     -> GND
GPIO 5  -> CS
GPIO 16 -> DC (if available)
GPIO 17 -> RST
GPIO 18 -> SCK
GPIO 19 -> MISO (optional)
GPIO 22 -> LED (if available)
GPIO 23 -> MOSI / SDA

Step 3: Software Preparation

Arduino IDE

Download and install Arduino IDE if you are not yet do it:

https://www.arduino.cc/en/main/software

ESP8266 Support

Follow the Installation Instructions to add ESP8266 support if you are not yet do it:

https://github.com/esp8266/Arduino

Arduino ESP8266 filesystem uploader

Follow the Installation Instructions to add uploader plugin if you are not yet do it:

https://github.com/esp8266/arduino-esp8266fs-plugi...

ESP32 Support

Follow the Installation Instructions to add ESP32 support if you are not yet do it:

https://github.com/espressif/arduino-esp32

Arduino_GFX Library

Download latest Arduino_GFX libraries: (press "Clone or Download" -> "Download ZIP")

https://github.com/moononournation/Arduino_GFX

Import libraries in Arduino IDE. (Arduino IDE "Sketch" Menu -> "Include Library" -> "Add .ZIP Library" -> select downloaded ZIP file)

Step 4: Setting & Upload

1. Download the program at GitHub: (press "Clone or Download" -> "Download ZIP") https://github.com/moononournation/GooglePhotoClo...
2. Open GooglePhotoClock.ino with Arduino IDE
3. Fill your WiFi AP settings into SSID_NAME and SSID_PASSWORD
4. Fill local timezone information to GMT_OFFSET_SEC, DAYLIGHT_OFFSET_SEC and TZ
5. Prepare a shared album in Google Photo, create a share link and fill the GOOGLE_PHOTO_SHARE_LINK
6. If you are not using ILI9341 LCD, comment out line 133 and uncomment the correct LCD class declaration
7. Connect ESP Dev Board to computer
8. Press Upload button to compile and upload the program to the ESP Dev Board

Step 5: ESP8266 BearSSL CertStore

Google Photo require all connection in HTTPS. ESP8266 latest version using BearSSL implementation and it requires some preprocessing on CertStore data.

I have generated a CertStore data at 2020 Apr 18, you make regeneration it by running:

python make_spiffs.py

If you are using ESP8266, follow the steps to upload CertStore data:

1. Open Arduino IDE
2. Connect ESP8266 dev board to computer
3. Select Tools menu
4. Select ESP8266 Sketch Data Upload
5. Wait upload finish

Step 6: How Does It Works?

1. Connect to predefined WiFi AP
2. Get current time from NTP server
3. Make the Google Photo shared link HTTPS request
4. HTTPS response code 302 and included a redirect location in the response header
5. Make the redirect location HTTPS request
6. Read the photo list from the Javascript array in response HTML (the HTML is over 500 KB, it need some time to read and split the data)
7. For every minitues, random select a photo in photo list
8. For ESP8266 only, try to find cached photo file in SPIFFS first
9. Make a photo link HTTPS request
10. For ESP8266 only, cache the photo file to SPIFFS
11. Display the photo
12. Print current time on the photo

Step 7: Enjoy!

It's time to add more favor photos to the shared Photo Album and place this Google Photo Clock on your desk.

Comments

[DAVIDXGAMES]

managed to remove the error in the file system, just type true in the following:

// init file system
#if defined(ESP32)
if (!FFat.begin(true))
// if (!LittleFS.begin())

and use "select Tools -> Partition Scheme -> No OTA (1MB APP/3MB FATFS)"

still not connecting to google.

1:13:49.332 -> Google Photo Clock
11:13:49.332 -> Screen: 320x480
11:13:49.332 -> Clock text size: 10
11:13:49.332 -> Connecting to WiFi: . done.
11:14:02.663 -> Waiting for NTP time sync: ........ done.
11:14:06.656 -> Thu Jun 16 00:14:08 2022
11:14:06.656 ->
11:14:07.169 -> https://photos.app.goo.gl/VLTPGLwKvfEoZiQ87
11:14:07.169 -> [HTTPS] begin...
11:14:07.169 -> [HTTPS] GET...
11:14:07.262 -> [HTTPS] return code: -1
11:14:07.262 -> [HTTPS] GET... failed, error: connection refused

any idea what it could be? I know that I have already spent a lot of time, and I apologize, I hope you can help me, I am so close to finishing your project.

finish Arduino BiJin ToKei. but google photo clock resists.

[prasenjittantubai2]

thanks bro this process works for me. on my esp32 selected no ota 3mb fs 1mb app
!FFat begin true

that all working file
didnot try on node mcu but esp32 the error fixed

[yacsf]

Hi 陳亮
When after one minute. It change another photo. Can start to change photo when the clock second turn to 00. So the time display will not see delay in one minute.
Thank you

[prasenjittantubai2]

did you fixed the problem file system init faild and failed error connection refused.
please help me there is no photo displaying only clock and some errors showing

[DAVIDXGAMES]

I am using this screen https://es.aliexpress.com/item/1005004042373799.html?spm=a2g0o.order_list.0.0.5cb2194dUgs2iO&gatewayAdapt=glo2esp and I don't know what to write on line 133, if I don't edit anything I have a white screen, if i edit a white screen it flashes. Could you please help me and tell me what I should put on line 133?

[陳亮]

try st7796

[DAVIDXGAMES]

I write this on line 133? the connection between esp32 is the one you indicate? Thanks for replying, I'm really a newbie.

#include
#define TFT_BL 23
Arduino_DataBus *bus = new Arduino_ESP32SPI(21 /* DC */, 15 /* CS */, 14 /* SCK */, 13 /* MOSI */, -1 /* MISO */);
Arduino_GFX *gfx = new Arduino_ST7796(bus, 22 /* RST */, 3 /* rotation */);

Vcc -> Vcc
GND -> GND
GPIO 5 -> CS
GPIO 16 -> DC (if available)
GPIO 17 -> RST
GPIO 18 -> SCK
GPIO 19 -> MISO (optional)
GPIO 22 -> LED (if available)
GPIO 23 -> MOSI / SDA

[陳亮]

is it ok? if you are newbie, you can start with ILI9341 and basic example first. after familiar with the examples then reenter this project.

[DAVIDXGAMES]

I finally made it!!! It already connects to my wifi network and gives me the time, but unfortunately it doesn't connect to google photos, the link is well written, it gives me the following:
File system init failed!

google photos rejects the connection, activate as I saw in a comment and it's still the same, could you help me, I felt very happy to be able to put together your project, without having studied programming, I've only learned a little putting together projects. Beforehand thank you very much!!!

[陳亮]

Oh yes, you just recalled me also encountered this after upgrade to latest arduino-esp32. If you turn on debug message, you will see some memory allocations fail message.

[DAVIDXGAMES]

ets Jul 29 2019 12:21:46
21:07:43.417 ->
21:07:43.417 -> rst:0x1 (POWERON_RESET),boot:0x13 (SPI_FAST_FLASH_BOOT)
21:07:43.417 -> configsip: 0, SPIWP:0xee
21:07:43.417 -> clk_drv:0x00,q_drv:0x00,d_drv:0x00,cs0_drv:0x00,hd_drv:0x00,wp_drv:0x00
21:07:43.464 -> mode:DIO, clock div:1
21:07:43.464 -> load:0x3fff0018,len:4
21:07:43.464 -> load:0x3fff001c,len:1216
21:07:43.464 -> ho 0 tail 12 room 4
21:07:43.464 -> load:0x40078000,len:10944
21:07:43.464 -> load:0x40080400,len:6388
21:07:43.464 -> entry 0x400806b4
21:07:43.745 -> E (114) psram: PSRAM ID read error: 0xffffffff
21:07:44.218 -> Google Photo Clock
21:07:44.218 -> Screen: 320x480
21:07:44.218 -> Clock text size: 10
21:07:44.218 -> Connecting to WiFi: done.
21:07:47.495 -> Waiting for NTP time sync: . done.
21:07:48.007 -> Tue Jun 14 10:07:48 2022
21:07:48.007 ->
21:07:48.007 -> File system init failed!https://photos.app.goo.gl/VLTPGLwKvfEoZiQ87
21:07:48.007 -> [HTTPS] begin...
21:07:48.007 -> [HTTPS] GET...
21:07:48.007 -> [HTTPS] return code: -1
21:07:48.007 -> [HTTPS] GET... failed, error: connection refused

[陳亮]

select Tools -> Partition Scheme -> No OTA (1MB APP/3MB FATFS)

[DAVIDXGAMES]

It keeps marking the same thing and I already tried what you say, shouldn't I edit something here?

/* file system */
#if defined(ESP32)
#include <FFat.h>
// #include <LittleFS.h>
#elif defined(ESP8266)
#include <LittleFS.h>
#endif

[陳亮]

I think you can try change the FFat.begin() to FFat.begin(true) to turn on formatOnFail feature.

[DAVIDXGAMES]

I already solved it, but it still does not connect to google photos, my esp32 does not have PSRAM.

[DAVIDXGAMES]

.

[DAVIDXGAMES]

how can i correct it?

[DAVIDXGAMES]

activate PSRAM***

[陳亮]

I checked latest GooglePhotoClock.ino, line 133 is not display declaration. Please update all software first: Arduino IDE, arduino-esp32 and all libraries.

[DAVIDXGAMES]

I finally made it!!! It already connects to my wifi network and gives me the time, but unfortunately it doesn't connect to google photos, the link is well written, it gives me the following:
File system init failed!

google photos rejects the connection, activate PSRAM as I saw in a comment and it's still the same, could you help me, I felt very happy to be able to put together your project, without having studied programming, I've only learned a little putting together projects. Beforehand thank you very much!!!