Kids Photo Album With Flashcard Commercial

This instructables show how to make an WiFi auto update photo album in addition with kids flash card commercial features.

Step 1: Why Photo Album for Kids?

My kid love to play all clicky things such as fidget, Portable WiFi Analyzer, TV remote, iPhone home button (^o^);

My kid love to view photos of herself, she always take the iPad or mobile to us and ask for view photos (^_^)a;

My kid is not interested in flashcard (~_~).

How about making a little digital photo album that can auto download latest photos, at the same time it will random display flashcard "commercial"?

It seems interesting, let's try it!

Step 2: Preparation

Battery Powered IoT Device

https://www.instructables.com/id/Battery-Powered-E...

Flashcard

There are various flashcard on the web, here are the one I am using in this example:

http://busyteacher.org/24109-printable-alphabet-fl...

Step 3: Design

An auto update photo album is separated into 2 parts:

Photo Server

It aims to collect the latest photo, resize, crop and then serve to the IoT device.

In this demo I am using a Node.js HTTP server with sharp library. Simply drag the new photo to the photo folder, it auto resize and crop the image on the fly and then serve to the IoT device.

It is a passive method to get the lastest photo. If you are familiar with Node.js, you can make it more active, e.g. auto download photos from your social media or web photo album.

IoT Photo Album

It aims to synchronize the latest photo with local storage and display it.

In this demo I reuse the IoT device in my previous instructables. The ESP32 module have 4 MB flash storage, around 3 MB space can be used to store the photos. For 320x240 JPEG files, it is around 100 - 200 pieces. It is good enough in most case.

For power saving reason, every power on trigger only show a few random photos and then fall into deep sleep again. WiFi also turned off if cannot connect to presented WiFi or finished synchronization.

Step 4: Setup Photo Server

Source Code

I have written a thirty lines simple HTTP server to meet this requirement, you may find it at GitHub:

https://github.com/moononournation/nodejs-sharp-ht...

if you are not familiar with GitHub, simply click the green button at the right middle then select Download ZIP.

Install

Unzip the source
Download and install Node.js, if not yet
Download related package by following command:

cd nodejs-sharp-http-server
npm install

Run

node app.js

Check

Put some photos in the photo folder
Browser to: http://localhost:3200/
You can see a comma separated file list
Browser to: http://localhost:3200/ONE_OF_YOUR_PHOTO_FILE_NAME
You can see a 320x240 resized and cropped photo

Step 5: IoT Photo Album

Hardware

Follow my previous instructables to make the IoT device.

Source Code

Download the ESP32 Photo Album source code at GitHub:

https://github.com/moononournation/ESP32_Photo_Alb...

Again, if you are not familiar with GitHub, simply click the green button at the right middle then select Download ZIP.

ESP-IDF

If you are not yet setup ESP-IDF, please see the setup guides for detailed instructions to set up the ESP-IDF:

Windows Setup Guide

Mac OS Setup Guide

Linux Setup Guide

Configuration

Run

make menuconfig

select "serial":

port

select "Photo Album Configuration", fill your own value:

WiFi SSID
WiFi Password
Web server
Web server port

Compile

make all

Flash

make flash

Check

make monitor

The first time require some times for format the SPIFFS and download photos. After that every trigger button pressed will show 5 photos at 5 seconds interval and then enter deep sleep.

Step 6: Flash Card Commercial

I would like to show some alphabet flashcard while my kid viewing the photo album. Assume the ratio is 4:1, so I can put 5 flashcards to the photo folder for every 20 photos. Photos and flashcards show in random basis.