This project is about a digital picture frame aimed at family members, such as grandparents.

 

The idea is that parents taking pictures of their children, can easily share those pictures with the children's grandparents by making them appear on the picture frame automatically. In turn, the grandparents can "like" the pictures, letting the children's parents know which pictures are their favourites.

 

By making use of a specific software platform called resin.io, multiple instances of this picture frame can be deployed for various family members, without hassle.

 

Screen Shot 2017-08-29 at 18.34.39.png

 

Features

 

The project makes use of different services. Here's an overview:

 

Screen Shot 2017-08-28 at 16.51.45.png

 

The picture frame offers following features:

  • simple user interface to navigate the pictures, start a slideshow or like a picture
  • periodically download pictures from a shared Dropbox folder
  • send push notifications whenever a picture is liked
  • Turn the picture frame's display off every evening, and back on every morning

 

Let's take a closer look at the software and hardware for this project, and how you can build your own connected picture frame.

 

Hardware

 

The following hardware components are used in this project:

 

Assembly is super easy, following these steps:

  1. Mount the Raspberry Pi 3 to the Raspberry Pi Touchscreen
  2. Connect the jumper wires from the screen's board to the Pi for power
  3. Slide the Touchscreen assembly through the enclosure's front bezel
  4. Screw everything in place

Do not insert the microSD card or power on the frame yet, as the software needs to be

Image-1 (1).jpg

 

Software

 

The complexity of the project is in the software. Let's break it down.

 

resin.io

 

Resin.io makes it simple to deploy, update, and maintain code running on remote devices. Bringing the web development and deployment workflow to hardware, using tools like git and Docker to allow users to seamlessly update all their embedded linux devices in the wild.

Resin.io's ResinOS, an operating system optimised for use with Docker containers, focuses on reliability over long periods of operation and easy portability to multiple device types.

To know more details about how resin.io works, be sure to check out this page: How It Works

Sign up for a free account and go through the detailed Getting Started guide. From there, you can create your first application.

 

Application Creation

 

Setting up a project requires two things:

  • application name: ConnectedFrame
  • device type: Raspberry Pi 3

 

Screen Shot 2017-08-26 at 21.38.55.png

 

After completing both fields and creating the application, a software image can be downloaded for the devices to boot from. The useful part is that the same image can be used for every device involved in the project. Select the .zip format, which will result in a file of about 400MB, as opposed to 1.8GB for the regular .img file.

Screen Shot 2017-08-26 at 21.38.45.png

Before downloading the image, connectivity settings can be specified, allowing the device to automatically connect to the network once booted. Enter the desired SSID and matching passphrase.

 

Flashing SD Card

 

Once the image specific to the application is downloaded, it needs to be flashed to a microSD card for the Raspberry Pi to boot from.

 

There is a tool available for doing just that, by the same people from resion.io, called Etcher. It works on mac, Linux and Windows, is simple to use and gets the job done.

Screen Shot 2017-08-26 at 21.50.54.png

 

Launch Etcher, select the downloaded image file. Etcher should automatically detect the SD card, all that remains is to click the "Flash" button.

 

The SD card is ready to be inserted in the Raspberry Pi.

 

Configuration & Environment Variables

 

Some raspberry Pi configuration changes are typically made by editing the /boot/config.txt file. Resin.io allows users to do this via the user interface, by defining Device (single device) or Application (all devices) Configuration Variables.

 

In config.txt, pairs of variables and values are defined as follows: variable=value

 

Using the Device/Fleet Configuration, the variable becomes RESIN_HOST_CONFIG_variable and is assigned the desired value.

 

For example, rotating the LCD touch screen is normally done by appending lcd_rotate=2 to /boot/config.txt. As a configuration variable, this becomes RESIN_HOST_CONFIG_lcd_rotate with value 2.

Screen Shot 2017-08-26 at 18.01.22.png

 

Another type of variables, are Environment Variables, which can again be defined at application or device level.

 

Screen Shot 2017-09-03 at 09.57.08.png

 

These environment variables can be used by the operating system, such as "TZ" which is used to set the correct timezone, but also by scripts.

 

Following environment variables are used by the connected frame Python script:

  • DISPLAY: display to use for the Tkinter user interface
  • DROPBOX_LINK: link to dropbox shared folder
  • IFTTT_KEY: personal IFTTT webhooks key to trigger notifications
  • DOWNLOAD_INTERVAL_HOURS: interval in hours to download photos from the dropbox folder
  • CAROUSEL_INTERVAL_SECONDS: interval in seconds to automatically switch to the next photo
  • FRAME_OWNER: the name of the person the frame belongs to, used to personalise the "like" notification

 

Most are to be set at application level, though some variables such as FRAME_OWNER are specific to the device.

The link to the shared dropbox folder ends with "?dl=0" by default. This has to be changed to "?dl=1" in the environment variable, to allow the application to download the pictures.

 

Application Deployment

 

I've been developing a Python application using Tkinter to create the graphical interface for the picture frame.

The layout is simple: four interactive buttons (two on each side), with the picture centralised.

 

Deploying an application with resin.io requires some additional files, defining which actions to perform during deployment and which command to use to start it. The full code and accompanying files for this project can be found on GitHub.

 

You can clone the repository for use in your resion.io application, reproducing the exact same project, or fork it and modify it as you desire!

 

git clone https://github.com/fvdbosch/ConnectedFrame 
cd ConnectedFrame/

 

In the top right corner of your resin application dashboard, you should find a git command. Execute it in the cloned repository.

 

git remote add resin gh_fvdbosch@git.resin.io:gh_fvdbosch/connectedframe.git

 

Finally, push the files to your resin project:

 

git push resin master

 

If all went well, a unicorn should appear!

Screen Shot 2017-08-26 at 17.55.45.png

 

In case of problems, a clear error message will appear, telling you what exactly went wrong.

 

IFTTT

 

"IFTTT" stands for "If this, then that" and is an online platform that enables users to connect triggers and actions for a plethora of services.

 

For this particular project, the webhooks service is used to trigger notifications to the IFTTT app on a smartphone.

Screen Shot 2017-08-28 at 21.19.27.png

 

The trigger is part of the code and needs to remain as is, though the action could be modified to suit your own personal needs.

 

Demo

 

Enough with the theory, let's see the frame in action!

 

 

What do you think? Is this something you could see family members use? Let me know in the comments!