Introduction: IoT Location Sensing Picture Frame

"Text me when you're heading home." We've all heard it, and we've all forgotten to do it. Sometimes, even when we do remember to text, the unexpected happens. We get stuck in traffic, get caught up talking to a co-worker while trying to leave the office, or suddenly remember that we should stop to get that one thing we really need at the store. These events can be hard to communicate, and frustrating for family members who are trying to time their activities around your arrival at home.

To make communication easier, I've created the IoT Location Sensing Picture Frame. The concept is simple. Each family member has a photo of themselves in the picture frame. Each photo has a corresponding strip of lights that is controlled by an app that runs in the background of the designated family member's smart phone (yes...each family member having a smart phone is a pre-requisite for this project.). The lights are programmed to display colors in a spectrum ranging from red to green. If the lights for a certain family member are red, it means that they are far away from home. If the lights are green, it means that they are home. If the lights have been orange for a while, but you notice that they are slowly fading to yellow, the family member is traveling closer to home and the lights will continue to fade to green until that family member arrives at home.

Another useful feature of this picture frame is it's ability to communicate when family member's have arrived at specific locations that can be updated on their phones at any time. Let's say you are going out of town and arriving at a specific bus or train station. You can set that location on your phone as far in advance as you like, and the picture frame will change the color of your lights to blue when you arrive. That way when you forget to call mom to tell her that you made it to your destination safely, she won't worry.....but for goodness sake, don't forget to call her! She's your mother!

Step 1: Tools & Materials

You will need the following things to complete this project:

Electronics:

-Intel Edison with Arduino Expansion Board

-2 Micro USB Cables

-LPD8806 LED Strip

-5V Power Supply

-Female Power Jack Adapter

-3 Right Angle Male Header Pins

-On/Off Switch

-9V Battery

-9V Battery Clip

-Heat Shrink

-Hook Up Wire

-Solder

****Note: It has been discovered that 9V batteries have a very short life span when powering the Edison. I recommend replacing this with an external power supply.*****

Hardware:

-3 sheets of 8" x 24" x 1/8" Basswood

-1 sheet of 1/8" x 8" x 10" Acrylic (optional: get an extra sheet for Edison Mounting)

-1 3/8" Square Wood Dowel

-Cardboard or Chipboard

-4 Standoffs (comes with Edison & breakout board)

-4 Screws (comes with Edison & breakout board)

-4 #4 x 1/2" machine screws

-4 #4 nuts

-4 #4 x 1/2" wood screws

-2 zip ties (thinner than 1/4")

-Wood Glue

-Liquid Fusion or equivalent glue/epoxy

-Double Sided Mounting Tape

-Tape

Tools

-Laser Cutter

-Soldering Iron

-Rubber Mallet

-Wire Strippers

-Small Saw

-Exacto Knife or Box Cutter

-Screw Driver

Step 2: Getting Started With Intel Edison

Please follow Intel's guide on getting started which is located here.

Once on this page, select "Arduino* Expansion Board Setup". This guide will run you through assembling your board, setting up the Integrated Installer, setting up a serial terminal and connecting to wifi.

The final step in this guide involves setting up your IDE. We will be working with the Arduino IDE for this project. While there is a link to the Arduino IDE in this guide, the last time I checked it was broken so you will have to download the IDE from the Arduino website instead. The download page can be found here.

Step 3: Set Up Your MQTT Broker

MQTT is a lightweight protocol for machine-to-machine communication. In this case, the machines that need to communicate are our smart phones and the Intel Edison. The purpose of an MQTT broker is to serve as a host for the messages that are being sent and received by these machines.

CloudMQTT is an MQTT broker which we will use to host messages sent from our smart phones. To use CloudMQTT, visit this link. Once on the website, select "Plans" in the top navigation bar. This will bring you to a page with several different options for hosting plans. For our purposes the Cute Cat plan will be fine for what we need for this project.

Under "Cute Cat", select "Try now for Free". This will take you to a page which wants you to set up a new CloudMQTT instance. Under "Name", choose a name for your CloudMQTT instance. You can name this anything you want. I named mine OwnTracks because it is the name of the app that we are going to use. You shouldn't have to alter the other two windows on this page, so once you have chosen a name press the "Create" button.

Step 4: Setting Up OwnTracks (iOS)

This step is for setting up OwnTracks on your iOS devices. You can skip this step if your family only has Android devices.

This step will need to be repeated for each family member who has an iOS device. Begin by downloading the OwnTracks app from the App Store. Once the app is downloaded, open it and navigate to the Settings page by clicking on the lower right hand icon. On this page, there are a few different Mode options at the top. Select "Private".

Open up CloudMQTT and select "Control Panel" in the menu. On this page you will see the CloudMQTT instances that you have created. Find the instance that you created in the last step (in my case my instance is OwnTracks), and click on the blue button that says "Details". This will bring you to a new page with your Instance Info. We need to use this Instance info to set up OwnTracks correctly.

Back in OwnTracks, use the following settings to connect the app to your MQTT broker:


TrackerIDLeave blank
DeviceIDName of Person who own's device (eg. my DeviceID is allie)
Host

m11.cloudmqtt.com

PortPort from CloudMQTT (eg. my port is 11803)
TLSTurn Off
AuthenticationTurn On
User IDUser from CloudMQTT (eg. my User ID is jfcyrvev)
Password Password from CloudMQTT

To make sure that you are connected successfully, click on the Websocket UI button at the top of the CloudMQTT console page. Stay on the settings page in OwnTracks and click on the word "Check" next to your Port. If you did everything correctly, a new message should appear in the Websocket UI.

Next, we need to set regions in OwnTracks. Regions are areas on our map that have perimeters which mark specific distances away from a certain point. In our case, this point is home. When leaving an entering regions set up in OwnTracks, a notification gets sent to CloudMQTT which is read by the Picture Frame, thus changing the lights an appropriate color.

Select "Regions" in the bottom menu of your app and press the "+" icon to create a new region. Unless you know the GPS coordinates of your home on the top of your head, I suggest actually being at home while doing this. By default, Own Tracks will create a new region at your current GPS coordinates.

Creating a new region will take you to a new window with information about that region. Assuming the GPS coordinates are already set for your home, there are only three things you have to change. You need to give your region a Name, turn on Share, and set the Radius for Region. Repeat for each region. Below are suggested regions to create that will be compatible with the Arduino Sketch that you will eventually upload. You can change these distances to suit your needs, but you will also need to later change the Arduino sketch. Be careful when naming these regions because our Arduino sketch is CaSe SeNsItIvE!


Region NameRadius for Region (m)
Home20
Half Mile

805

One Mile

1609

Two Miles

3219

Three Miles

4828

Five Miles

8047

Ten Miles

16093

Fifteen Miles

24140

Twenty-five Miles

40234


Lastly, check the settings on your phone to make sure that the app is always allowed to use your Location information, that Background App Refresh is turned on , and that Use Cellular Data is turned on. It's also a good idea to turn notifications from the app off or you will receive a message on your phone any time you leave or enter one of these regions.

Step 5: Setting Up OwnTracks (Android)

This step is for setting up OwnTracks on your Android devices. You can skip this step if your family only has iOS devices.

This step will need to be repeated for each family member who has an Android device. Begin by downloading the OwnTracks app from Google Play. Once the app is downloaded, open it and navigate to the Settings page by clicking on the menu in the top left hand corner of the page. Once the menu pops up, click on 'Settings' at the bottom. Once you get to the setting page, click on the Mode option and select "Private".

Open up CloudMQTT and select "Control Panel" in the menu. On this page you will see the CloudMQTT instances that you have created. Find the instance that you created in the last step (in my case my instance is OwnTracks), and click on the blue button that says "Details". This will bring you to a new page with your Instance Info. We need to use this Instance info to set up OwnTracks correctly.

Back in OwnTracks, click on "Host" and fill out the following settings:


Host

m11.cloudmqtt.com

Port

Port from CloudMQTT (eg. my port is 11803)

Next, go back to the settings page and click on "Identification" and fill out the following settings:


Authentication

Turn on

Username

User from CloudMQTT (eg. my User ID is jfcyrvev)

Password

Password from CloudMQTT

Device ID

Name of Person who own's device (eg. my Dad's Device ID is steve)

Tracker ID

Leave Blank

Next, click on "Security" and turn TLS off.

To make sure that you are connected successfully, click on the Websocket UI button at the top of the CloudMQTT console page. Stay on the settings page in OwnTracks and click on the check mark on the top right hand corner of this page. If you did everything correctly, a new message should appear in the Websocket UI.

Next, we need to set waypoints(regions) in OwnTracks. Waypoints mark the center of areas on our map that have perimeters which mark specific distances away from the waypoint. In our case, this center point is home. When leaving an entering waypoint regions set up in OwnTracks, a notification gets sent to CloudMQTT which is read by the Picture Frame, thus changing the lights an appropriate color.

Navigate to your menu and select "Waypoints". Once a new page opens , press the "+" icon to create a new Waypoint. Unless you know the GPS coordinates of your home on the top of your head, I suggest actually being at home while doing this.

Creating a new region will take you to a new window with information about that region. While at home, press the circular icon in the top right hand corner of your screen to get your current GPS coordinates. You need to give your region a Name, set the Radius, and turn on Share. Repeat for each region. Below are suggested regions to create that will be compatible with the Arduino Sketch that you will eventually upload. You can change these distances to suit your needs, but you will also need to later change the Arduino sketch. Be careful when naming these regions because our Arduino sketch is CaSe SeNsItIvE!


Region NameRadius for Region (m)
Home20
Half Mile

805

One Mile

1609

Two Miles

3219

Three Miles

4828

Five Miles

8047

Ten Miles

16093

Fifteen Miles

24140

Twenty-five Miles

40234


Step 6: Edit and Upload Arduino Sketch

By default, Arduino doesn't include the Intel Edison as a Board Option. To change this, open the Arduino IDE and go to Tools > Board > Board Manager..... . This will open a new window with a search bar at the top. In the search bar, type in "Intel". Two options will appear. Select "Intel i686 Boards" which includes the Edison.

This sketch is dependent on several libraries, two of which you will need to download. Download the Adafruit LPD8806 library and the Knolleary's PubSubClient library and add them to your Arduino libraries folder.

In the Adafuit LPD8806 library, open the LPD8806.cpp file in a text editing program and delete the following lines:


#else

SPI.setClockDivider((F_CPU + 1000000L) / 2000000L);

In the PubSubClient library, open PubSubClient.h in a text editing program. Find the line that says "#define MQTT_MAX_PACKET_SIZE 128" and change it to the following:


#define MQTT_MAX_PACKET_SIZE 200

Download the Arduino sketch at the bottom of this page and open it up. There are several lines that you will need to change in this sketch including the following:


  • For "byte mac[] = { 0xFC, 0xC2, 0xDE, 0x44, 0xEA, 0xF5 };", replace "0xFC, 0xC2, 0xDE, 0x44, 0xEA, 0xF5" with your mac address.
  • For "IPAddress ip(192, 168, 1, 103);" replace "192, 168, 1, 103" with your Intel Edison's IP address.
  • For "PubSubClient client(server, 11803, callback, ethClient);" replace "11803" with your Port.
  • For the four lines declaring your MQTT topics such as "int person1 = stringTwo.indexOf("owntracks/jfcyrvev/allie/event");" replace "jfcyrvev" in each line with your UserID and replace "allie", "shari", "steve" and "erin" with the DeviceID's that you set on your phone.
  • For "if (client.connect("arduinoClient", "jfcyrvev", "**************")) {", replace "jfcyrvev" with your UserID, and "**************" with your password.
  • For the four client.subscribe lines such as "client.subscribe("owntracks/jfcyrvev/allie/event");" replace the topics such as "owntracks/jfcyrvev/allie/event" with the four topics that you declared earlier.

If you have changed or added any additional Regions in OwnTracks, make sure that you add them to this sketch. For example, if I wanted to add a region for Fifty Miles, I would have to include "int fifty = stringOne.indexOf("Fifty Miles");" when declaring key words to look for and include the appropriate if statements for each person by adding it under "for(i=0; i<4; i++){", "for(i=4; i<8; i++){", "for(i=8; i<12; i++){" and "for(i=12; i<16; i++){".

When uploading your Arduino sketch, make sure you plug in two micro USB cables and have the switch next to them pointing towards the USB cables.

Step 7: Laser Cut Your Parts

Around the time I started planning this project, Instructables author push_reset created the project InstaKISS : Networked Picture Frames. I used this project as a guide for building the frame and would like to link back as her 'ible was very helpful to me in building my own project!

Download the PDF Files at the bottom of this step and laser cutting all of the parts. I was able to fit the wood on three 8" x 24" sheets of 1/8" basswood. Please note that fitting all the pieces onto the wood was quite the squeeze, so you need to make sure to line your wood up perfectly square to the laser and run the project perimeter to confirm that it fits before starting your cut. You might even want to edit the file to combine edges to save space.

When cutting the 1/8" acrylic, engrave the entire front of the smaller windows where the LEDs will shine through. This will help diffuse the LEDs and make the electronic components of the strip less noticeable.

While I cut the Edison Mounting piece out of acrylic, you can really cut it out of any spare material you have laying around.

Step 8: Assemble the Front of the Frame

As pictured above, there are two large pieces that make up the front. Using wood glue, glue these two pieces together. Make sure that all your edges are completely even before gluing. If everything is lined up correctly, the piece of wood with notches should sit on top of the piece of wood with rounded edged cut-outs creating a small border around the larger rounded edged cut-outs. Apply wood glue evenly, and wipe away any excess. Place a heavy object on top, and let the glue dry.

Once the glue is dry, we are going to pressure fit the acrylic pieces in place. The acrylic pieces are slightly larger than the holes that were cut for them, so the pressure of the pieces pushing up on each other keeps them together. To insert a piece of acrylic, set it on top of the appropriate window, and line it up as evenly as possible. Tap on the corners of the acrylic with a rubber mallet to apply pressure until they pop evenly in place.

Repeat for the rest of the acrylic pieces. Note that the smaller acrylic pieces were inserted with the engraved side down.

Step 9: Add Pictures

Collect pictures of your family members and cut them out so that they fit within the square window which is slightly larger than 3.5". Cut squares out of cardboard or chipboard so that they are the same size as the pictures that you just cut out. Place the photos face down so that they can be seen through the window of the frame. Secure the pictures by backing them with the cardboard/chipboard squares and taping them to the picture frame.

In addition, make sure that your pictures are in the correct order in relation to your Arduino code. When looking at the front of your picture frame, the person who you assigned to "intperson1" in your code will be the image on the far left, with the other photos following in order of their code assignments.

Step 10: Mark Holes for Standoffs

Before all of our wires get in the way, we need to mark where we are going to attach our standoffs. Using the Edison Mounting piece that you laser cut, place it on top of the inside of the front piece of your picture frame, and line the edges up so they sit square with the notches on your picture frame. Slide the Edison Mounting Piece over so that it overlaps the two center photos and the four corner holes are sitting between the first and second photos, and the third and fourth photos. Take a pencil and trace these holes onto the wood.

Step 11: Prepare LED Strip

Your LED strip will most likely come with rubber waterproofing around it. Carefully remove this waterproofing with an exacto knife or box cutter. You'll notice that the LPD8806 LED strip is made up of sections of two LEDs. For this project, we will need a total of 16 LEDs divided into four small strips containing 4 LEDs (2 sections) each. Divide your LED strip into these four parts by cutting on the copper connecting pads. If you have left over LEDs on your strip you can save them for another project.

Step 12: Solder Your LEDs Back Together

Cut four pieces of hook up wire measuring approximately 6". Strip the ends of the wire and solder a wire to each one of the copper connecting pads on your first section of LEDs. Get your next section of LEDs, and solder the other end of the hook up wires to the copper connecting pads making sure that you are attaching 5V to 5V, CL to CL, DI to DI and GND to GND. Repeat this process until all four strips containing 4 LEDS each (2 sections each) are wired together.

Step 13: Attach Header Pins and a Power Jack Adapter to LED Strip

Header pins need to be soldered onto the wires so that we can later attach the wires to our Arduino expansion board. It is very important that these are right angle header pins because the frame is very tight on vertical space (or, I guess horizontal space when the frame is standing up). Clip off three separate header pins. Once they are separated it should be fairly easy to slide the plastic pieces off of them.

If you've kept the original wires soldered onto the first section of your LEDs, there will probably be two red 5V wires, one green CL wire, one blue DI wire and two black GND wires. Solder the header pins on the CL wire, DI wire and one of the GND wires and apply heat shrink. We only need one of the 5V wires, so you can either remove the wire with a soldering iron, or just cut it short.

Using a screwdriver, attach the female power jack to the remaining 5V and GND wires. The red 5V wire will attach to the + terminal and the black GND wire will attach to the - terminal.

Step 14: Mount the LEDs to the Wood Backing

Previously you should have cut out four 'I' shaped wood backing pieces. Using double sided mounting tape, attach the four sections of LEDs to each one of the wood backing pieces. Try to attach the LEDs as centered as possible. Apply a bit of pressure when doing this to make sure that the pieces are secure.

Step 15: Mount LEDs to Frame

Locate the eight 't' shaped wood pieces that you cut out previously. Using wood glue, attach these wood pieces into the eight notches(two for each picture) that you will find either above or below each picture. Glue the "I" shaped wood mounting piece to the "t" shaped wood pieces with the LEDs facing towards their acrylic window.

Step 16: Cut Wood Dowels

Take a square wood dowel, and place it on top of any of your laser cut sides of your picture frame. Line up the top of the dowel with the flat side of the wood, and mark a line where the dowel intersects the inside of the notch opposite of the flat side.

Using a small hand saw, cut the wood dowel where you marked it. Repeat until you have four pieces.

Step 17: Glue Sides of Picture Frame

Begin by taking the four square wood dowels and gluing them in the corners(inside the notches) of your picture frame. Next, using the four wood pieces that were laser cut for the sides of the picture frame, glue in place to both the notches on the front of the frame and the wood dowels. These pieces have a tendency to pop out of place while drying, so it is a good idea to apply pressure such as using clamps.

Step 18: Glue on Standoffs

The Arduino expansion board comes with four standoffs. We are going to glue those to our picture frame so that we can later mount the Intel Edison inside of the picture frame.

You will need to use a strong glue or epoxy to attach the standoffs. I used liquid fusion glue and found that the hold was pretty strong. Apply a dot of glue on top of each of the four holes that you previously marked with a pencil. For the strongest hold, let the glue dry for 24 hours before screwing anything into the standoffs.

Step 19: Split the Battery Clip

To attach an on/off switch to the battery clip, we will need to modify it a bit. Carefully using an exacto knife or box cutter, slice between the red and black wires. It is very easy to accidentally cut too far off the center of these wires and remove too much of the coating, so I recommend only slicing enough to allow you to pull the rest of the wire apart by hand.

Once the wires are separated, cut the red wire in half. To prepare this wire to be soldered, strip the ends as well.

Step 20: Attach On/Off Switch

Cut two pieces of hook up wire measuring at least 12" in length. It is a good idea to make these wires fairly long because they will be both attached to the inside of the picture frame, and attached to the back. If you ever need to remove the back of your picture frame, the wires should be long enough to allow you to set the back next to the picture frame without having to disassemble your electronics.

Solder the two wires to the two stripped wires from your battery clip and apply heat shrink. Next, stick the battery clip through the rectangular hole of the back piece of your picture frame and pull it through until you get to the on/off switch. Stick the bottom of the on/off switch through the hole and press on it. It should be able to pop into place without the use of adhesives.

Step 21: Mount Your Electronics

Using 4 #4 1/2" screws and nuts, mount your Intel Edison and Arduino expansion board to the Edison mounting piece. You will also notice four additional slots on the Edison mounting piece. Take two zip ties, and feed them through the slots so that the ends of the zip ties come out on top. Attach the female power jack adapter and 9V battery using these zip ties. Attach your 5V power supply to the power jack adapter and the battery clip to the 9V battery. This is also a good time to make sure that the power switch on the Intel Edison is pointing towards the barrel jack and large USB port.

Using the four screws that came with your Arduino expansion board, attache the Edison mounting piece to the standoffs.

****Note: It has been discovered that 9V batteries have a very short life span when powering the Edison. I recommend replacing this with an external power supply.*****

Step 22: Attach the Back to Your Picture Frame

At the bottom of the back of your picture frame there is a small rounded notch in the center of the bottom side. Slide the cord from your 5V power supply through this notch. Align the back of your picture frame so that it is square with the sides of the frames. A lot of the wires from the electronics inside of the frame will probably push on the back piece, so I suggest holding it in place using tape.

Using a small nail, stick it through one of the corner holes and hammer it about half an inch down into the wooden dowel below. Pull the nail out and secure the back by screwing in a #4 1/2" wood screw. Repeat for the other three corner holes.

Step 23: Use Your Frame!

Plug in your picture frame and enjoy! If you would like to set custom locations on your picture frame, simply add a new region, name it "Destination', and assign an appropriate to the region. Your picture frame will glow blue when you arrive at said destination.

Enjoy!

Intel® IoT Invitational

Runner Up in the
Intel® IoT Invitational

Epilog Contest VII

Participated in the
Epilog Contest VII

Make It Glow! Contest

Participated in the
Make It Glow! Contest