Dropbox Photo Frame

A digital photo frame that uses Dropbox for displaying the pictures. Used with a Raspberry pi zero or anything with a webbrowser, node runtime and a display.

This doesn't sync the files locally, but fetches them with the DropBox preview link.

Usage

There are two methods of using this, the hosted solution and running locally. The hosted solution sets the DropBox API key with a GET parameter and in the local version you can set it in a local config file.

Hosted setup

First, find your DropBox access token. You can the instructions to generate one here.

Then, go to the following website and substitute YOURTOKEN with your own access token.

https://sebastiaanjansen.be/dropbox-photo-frame?accessToken=YOURTOKEN

You can optionally set the timeout in milliseconds as well. 10000 being 10 seconds.

https://sebastiaanjansen.be/dropbox-photo-frame?accessToken=YOURTOKEN&timeout=10000

There is alos the option set a blackout period. It will just show a black website then, it will not really save any power.

https://sebastiaanjansen.be/dropbox-photo-frame?accessToken=YOURTOKEN&startMoment=09-30&stopMoment=20-30

This is a purely client site webapp that's hosted at the GitHub servers. Since it's server over https, your access token is not visible. However there is always the local setup below.

I'm using the Balena WPE for showing it on a raspberry pi: https://github.com/balena-io-projects/balena-wpe

Local setup

The application is a small React app that generates a website in the build directory. When using a Raspberry Pi, you can use the following guide for setting up a fullscreen chromium webbrowser, aka kiosk mode.

Clone the repo and run either npm install or yarn to install the dependencies.

Edit the file src/config.js to add your DropBox access token. You can the instructions to generate one here. In the config you can also set the timeout in miliseconds and the path to the directory of your pictures.

Note: This directory should only contain pictures.

Then run npm build or yarn build to transpile the code to the build directory.

For my Raspberry Pi zero w I installed Apache2 and symlinked the build directory to /var/www/html.

This project was bootstrapped with Create React App.