Introduction: InstaKISS : Networked Picture Frames

About: Specializing in sewing, soldering, and snacking.

These frames are connected to the internet, which allows you to instantly send a kiss to a loved one. When my boyfriend and I were in a long distance relationship (for one and half years!), we communicated anyway that we could. We talked on the phone, sent presents and cards, fought through text and would leave our webcams on while sleeping so we knew the other was there if we needed them.

We communicated through what was convenient and what made sense, our phones and computers. Letters were written, but less frequently, they had that personal touch, but weren't as immediate. Through all these ways, it still didn't seem enough. I don't think being able to stand next to one another and hold hands will ever be replaced with technology, but it's nice to think of ways to make it more endearing and personalized. We now live together, but just recently I got a chance to make a project that touches upon this remote intimacy that we experienced while apart. This project translates a loving gesture, a blown kiss, into a message. This message is simply a talk bubble that lights up on the receiving end representing the digital kiss that has been sent. In the talk bubble is a red heart, but it can contain any image or whatever words you or your partner want it to.

This 'ible will take you through the steps on how to make a pair of networked picture frames. It includes some wood working, circuit building and simple networking. Get connected with a loved one and send digital kisses from afar!

This project is dedicated to the one I love.

Step 1: Materials

First off - special thanks to JON-A-TRON for cutting and assembling the frames for me and helping this project come to be! He is a wood wizard.

Both frames are 6 1/2" x 6 1/2" x 2" with acrylic press fit details. The transparency sheet is for printing the heart on, this can be omitted for dry erase markers or another message or graphic you would like to put there.

Any Arduino supported microcontroller setup that has WiFi abilities can be used, for this project I used the Intel Edison.

Frames

[1] 8" x 36" hard maple, 1/2" thick

[1] 9" x 5" clear acrylic, 1/8" thick

[1] 18" x 8" white acrylic, 1/8" thick

[1] 12” x 6” plywood, 3/8” thick

[1] 12” x 6” plywood, 1/8” thick

[16] size 4-40 screws, 3/8” long

[10] hex nuts for size 4-40 screws

[1] 1/4” long wood screw

[6] 1/2” standoffs for 4-40 screws

[1] 12” x 12” chip board, 32pt (1/32”) thick

[1] 5” x 10” piece of cardboard, 1/8” thick

[1] tube of 5-Minute Epoxy

[1] 4” x 4” mesh fabric

wood glue


Circuit

[1] Edison with mini breakout

[1] Edison with Arduino dev board

[2] 10mm diffused white LEDs

[1] NPN transistor (2n2222)

[1] Electret Microphone Amplifier - MAX4466

[1] 1K resistor

[2] Adafruit Perma-Proto Quarter-sized PCBs or any small perf boards. There is a laser cut piece that is designed for the perma-proto, but you can work around it.

[2] 9 volt batteries

[2] 9 volt battery snaps

[2] 9 volt battery holders

[2] slide switches

[1] 16mm panel mount momentary button

hookup wire


Tools:

laser cutter

3D printer (optional if you find another way to make the wind funnel from step

wood router with 1/8" rabbeting bit

clamps

mallet - preferably wooded or rubber

belt sander

palm sander

soldering iron

3D printer

Step 2: Laser Cut Wood

Download the attached files and open the FrameCut.ai file in Illustrator. Check that the stroke width is .001 pt and that the layout will fit within the piece of wood. To prevent scorch marks use application tape on the bottom and top of the wood. Scorch marks can also be removed with little sanding.

Depending on what kind of laser cutter you use, it could take a few passes to cut through 1/2” thick hard maple. If using a Metabeam laser cutter, one pass will be all you need. If using a 60 Watt Epilogue laser cutter, it will take a few passes. Protecting the wood is more important if using a laser cutter that calls for more passes.

The settings below, and to follow in the next steps, are for a 120 Watt Epilogue, if using a different cutter, do some research on what settings may be right for that machine.

Settings

Speed - 7, Power - 100, Frequency - 500

Step 3: Laser Cut Acrylic

Keep all the protective films on the acrylic pieces after cutting.


Settings

Speed - 30%, Power - 50%, Frequency - 5000

From white:

1 x whiteTalkbbl

From clear:

2 x clearAcrylicWindow

Step 4: Laser Cut the Rest

Chipboard

I needed to preserve my Edisons, so the designs for the receiving board is for a mini breakout that has male headers. The perf board gets screwed on to the board and the wires go through the cut out and connect via female headers. If you are soldering straight to your microcontroller, you may not need the extra long opening.

1 x rxMountBoard

1 x txMountBoard

Settings

Speed - 15, Power - 50, Frequency - 500


1/8" Cardboard

2 x photoBacking

Settings

Speed - 30, Power - 18, Frequency - 500


1/8" Plywood
1 x rxFrameBack

1 x txFrameBack

Settings

Speed - 8, Power - 100, Frequency - 500

Step 5: Route a Rabbet

A piece of clear acrylic is press fit in the front of each frame to provide protection for the displayed picture. To give room for the picture and it's cardboard backing, we need to route a rabbet around the perimeter.

- Identify what will be the inside of each frame, this is the side that will be routed.

- Fit a 1/8" rabbet router bit on your wood router and adjust the depth to 1/4".

- Clamp the front down if using a hand router and route along the perimeter.

Step 6: Build Wooden Frames

Glue and Clamp Sides

Grab the side pieces of the frames and apply some wood glue to the finger joints. Fit all four together and clamp to let dry. Though it may seem tricky, gluing all four at once is the easiest since you need the opposing sides to clamp against and keep the others in place.

Glue and Clamp Front

Apply wood glue to the front edge of each frame and fit the front on. To apply even pressure and protect the wood from markings, grab two pieces of scrap wood that are a little longer than the frames. Place them on top and place one clamp at each corner, making sure all edges are pressed together and making contact. Let dry completely.

Sand

Use a belt sander and palm sander to make even out the surfaces of the joints and to take off any scorch marks. There were a couple cracks in the wood where the clamps were applied too tightly, if this happens fill them in wood filler, let dry, then sand. If you would like to stain your frames, look for a stainable wood filler.

Step 7: Add Standoffs to Frames

The frames consist of three layers, the outside wooden frame, mounting board and the frame back. Each layer will screw in to the next via standoffs, screws and hex nuts. In this step we will be adding hardware for the frame and mounting board to be connected. Before the frames can come together, the standoffs need to be added.

Take one of the mounting boards and mate it with it’s frame. Take a pencil and mark where the holes are on the inside of the frame.

Put the mounting board aside and grab three standoffs and the 5-Minute epoxy. Mix up about a teaspoon of the the epoxy and let it sit for one minute to let it firm up a teensy bit.

When ready, put the epoxy on the bottom of the standoff and around the perimeter. Carefully position it over the pencil marking.

I advise placing all three standoffs at once, putting the mounting board on top and checking the positions of the holes in the span of 5 minutes. This way you can make any adjustments to the standoffs that are needed before the epoxy sets.

Do this for the second frame, set aside to fully cure for about 15 minutes.

Step 8: 3D Print Wind Funnel

The purpose of the wind funnel is to direct the blown kiss to the mic. Download and print the windFunnel.stl file out of PLA or ABS, it doesn’t matter too much what material it’s made out of, it’s more about the shape. This could also be constructed out of wood, wood is just not my medium, so I went with 3D printing which was the quickest and most precise solution available to me. Feel free to construct this any way that works if you do not have access to a 3D printer.

Step 9: Attach Fabric to Funnel

The funnel could be popped in the frame as is, but the mic would be seen through the hole. This is where the mesh fabric comes in. First, I’d like to point out that the fineness of the mesh matters. The holes in the fabric need to be large enough to push air through at a good distance (about 10 cm), but small enough to provide a visual cover.

Place the widest part of the funnel face down on top of the fabric. Fold one edge of the fabric over and tape into place. Stretch the opposite edge over and tape that into place. Keep doing this all around, fiddling with the amount being stretched to achieve a smooth surface across the large opening. When the fabric is in place, grab the 5-Minute Epoxy, mix up to the two agents and spread it around the back of the funnel, over and through the mesh. Let the epoxy fully dry, it will take more like 10 minutes, and then remove the tape.

I added some foam around the smaller opening to close the gap between the funnel and the mic. This is to help close the gap between the mic and the funnel opening.

Step 10: Press Fit Details

The clear windows, talk bubble and 3D printed wind funnel are all press fitted in the fronts of the frames. Press fitting, also known as an interference fit or friction fit is great for creating a flush surface without the use of glues or adhesives. It works when two parts are fit into place by force (or thermal expansion) and are compressed against each other. This creates a tension between the two pieces and holds them in place. The parts we will be press fitting are just a millimeter or so larger than the negative space they fit into.

Press fitting is easy, the only thing I suggest doing is to be patient while placing the inlay, one edge will be higher than the rest. You want this height to be as little as possible to achieve a flush surface. If it’s too high, alternatively the opposite edge may sink too much once force is applied. Try to set the piece in as balanced as possible before you apply force with the mallet.

When you are happy with the placement, take the mallet and tap the piece in, starting with the highest edge and continuing on the remaining ones. If an edge does end up sinking a little lower, you can try applying force from behind the inlay to even it out or you can pop it out and try again. In my experience, it’s usually such a small amount, that it's best to leave alone.

Step 11: Solder LEDs in Parallel

Cut a 2 1/4" length of black and red hookup wire.

Bend the terminals of each LED towards opposing sides and connect them in parallel, negative terminals connected to the black wire, positive terminals soldered to the red. This creates a rough rectangle that fits into the corner cut from the receiving mounting board.

Don't forget to put on the heat shrink tubing before soldering each joint!

Step 12: Build RX Circuit

Both of the circuits for this project are simple. Any microcontroller that you can upload Arduino code to and has WiFi connectivity can be used. For this project I am using the Intel Edison.

The receiving (rx) microcontroller sends HTTP requests to a webpage generated by the transmitting Edison, looking for the word “kiss”. If “kiss” is found, the LEDs light up, letting the person know that you have blown some smooches their way. When the recipient wants to turn the LEDs off, they press a button located on the back of the frame.

The pins on the Edison output 1.8V, which isn’t enough to light up the 10mm LEDs. Since the LEDs require 3V - 3.4V, a transistor hooked up to the 3.3V out pin on the Edison is used for external power.

For my momentary, I did not use a panel mount switch so it's soldered on before attaching it to the back. You should have a panel mounting one instead, which is better!

The battery and switches gets added in the next step.


Quick reference of components to Mini BB pins connections:

SW1 —> J18 pin 1 (D5) - this needs to be mounted to the back before soldering it to the board

LED1, LED2 positive terminal —> J20 pin 2 (3.3V)

2n2222 —> J17 pin 1 (D6)

9V —> J21

Step 13: Mount RX Circuit

Attach the circuit to the mounting board with four 4-40 screws and fasten each of them on the back with a hex nut. Mount the receiving circuit's perf board in the same manner using the laser cut holes.

Mix up some 5 Minute Epoxy for attaching The 9 volt battery clip gets epoxied to the board and the LEDs are hot glues to the bottom and upper left corner of the cut-out. Epoxy can be used for this too, but I found hot glue to work better. If you want to save some epoxy, wait to glue the 9 volt clip until the transmitting circuit is mounted too.

Add Switches

The back of the frame will be tethered to the mounting board by the on/off and momentary switch (a panel mount momentary is not shown in the pictures). You can use headers or connectors to make them able to detach from themselves.

- Mount the switches to the frame back.

- Solder some wire to the switch terminals and the power of the 9 volt clip to one of the wires.

- Connect the ground wire of the battery clip to the right header of J21 and the other end of the switch, which is now in series with the power line, to the left header.

Refer to the circuit diagram to see where to solder the momentary switch after it has been mounted to the back.

Step 14: Upload RX Program

This program acts as a web client, it makes an http connection to the sending Edison's IP and makes a http GET request. Once bytes start coming in, it uses the TextFinder library to look for characters that bookend the word "kiss". Once it finds the starting character, a "(", it starts reading and storing the characters in an array. When it gets to the ")", it knows to stop, prints the result and turns on the LEDs.

Download the textFinder library here and install it in Arduino-->libraries folder.

There are a few things you will need, your network name, the password and the other board's IP address. Here is where you plug that info in.

char ssid[] = "YOUR NETWORK"; //  your network SSID (name) 
char pass[] = "NETWORK PASSWORD";// your network password (use for WPA, or use as key for WEP)
IPAddress server(YOUR,BOARDS,IP,ADDIE);  // numeric IP for Edison Server

Step 15: Build TX Circuit

This circuit is as simple as it gets, the mic amp gets hooked up to an analog pin. The amp is powered by the 3.3V on the board to cut down on noise. A 9 volt battery powers the board with a slide switch in series with power to provide an on/off switch.

The transmitting (tx) circuit reads Analog pin 0 and connects to your local network. When a certain threshold is breeched, the Edison posts the word "kiss" using html on it's local IP. Build the circuit on a pcb, following the attached diagram.

To plug straight into the female headers, I attached male headers to the end of all the wires connected to the Edison.

The battery and on/off switch gets added in the next step.

Step 16: Mount TX Circuit

- Use four 4-40 screws to mount the microcontroller to the board. The mic needs to be close to the funnel, so screw it inside the frame, positioning it over the opening.

- Mount the on/off switch to the frame's back and solder the power terminal of the battery clip to one of the wires.

- Solder two male headers to the remaining two wires. These get plugged into ground and VIN headers on the Arduino dev board.

Step 17: Calibrate Mic Amp

The transmitting (tx) frame has the mic, which is used as our wind, or blown kiss, sensor. This Adafruit component is a mic and operational amplifier (op-amp) all-in-one. In simple terms, an op-amp has two inputs and one output, takes the difference of the two inputs and amplifies it. This breakout has a trimmer pot on the back where the gain can be set from 25x to 125x the input. Setting the gain will make it less or more responsive to your breath.

To get a sense of how responsive it is, open the Arduino IDE and navigate to the example sketch AnalogReadSerial. Hook up the Edison to the computer via USB (disconnect battery if connected). If you are unfamiliar with Arduino, check out the how to page on their website.

Open the serial monitor and watch the values come in. You will notice they are going a little fast. They can be slowed down by changing the delay to 100 milliseconds.

   delay(100);        // delay in between reads for stability

Now you can blow into the mic from the distance that feels comfortable and see how if it's responsive enough. If you are getting a 0 when blowing, this means it's clipping, to help with that turn the trimmer to the left to make it less responsive. I find it helpful to turn the pot every quarter, half or full turn, it's easier to keep track how far you've gone this way.

To see if a blown kiss has occurred, a simple If Statement will be used to see if the value of the sensor goes above a certain number. This number that we set as the threshold will be deemed as the moment a kiss is happening and will print the word "kiss" to the serial monitor.

Continue to tweak the trimmer to find a range of values that is consistent with your blown kiss action. Take the lowest number and round that down. For example, if my sensor is outputting around 300 when nothing is happening and I see 620 - 650 popping up when I blow, I will drop that down to 600 to give it a margin. This isn't necessary, but I find it helps to start lower, then go up incrementally when needed. Once you have the number to test against, plug it into an if statement and add it to the sketch.

//replace 400 with your low value
if (sensorValue > 400){  
   Serial.println("kiss"); 
  }
The sketch in it's entirety.
void setup() {
  // initialize serial communication at 9600 bits per second:
  Serial.begin(9600);
}

// the loop routine runs over and over again forever:
void loop() {
  // read the input on analog pin 0:
  int sensorValue = analogRead(A0);
  // print out the value you read:
  Serial.println(sensorValue);
  delay(100);        // delay in between reads for stability<br>

//replace 400 with your low value
  if (sensorValue > 400){
   Serial.println("kiss"); 
  }
}


Untether and Connect

Keep the circuit plugged to the computer via USB cables until it has successfully connected and generated a HTML page. This way you can watch the connections being made through the serial monitor and can do any troubleshooting if need be.

Once the frame has generated the page, and you can get a "(kiss)" to print, connect the battery, unmount the Edison from your computer and unplug the USB cables.


Step 18: Upload TX Program

This program acts as a web server and is based on the wifi web server example sketch written by dlf (Metodo2 srl) and modified by Tom Igoe. It uses the WiFi library which comes bundled with the Arduino IDE to connect to a local network and creates a basic HTML page at the IP address that is unique to your board. When you blow on the mic and cross the set threshold, it prints the word "kiss" on the page, otherwise the page is empty.


Upload and Test

If you have connected the battery to your circuit, disconnect it and plug your board in via USB. Download the .ino file and add it to your sketchbook folder, or double-click on it and it will ask you if you want to create a folder for it, click yes (mac).

Change the SSID and password to your network information.

char ssid[] = "YOUR NETWORK";      // your network SSID (name) 
char pass[] = "NETWORK PASSWORD";   // your network password

Upload the sketch to your board and open up the serial monitor. It will print "Attempting to connect to SSID: ".

if it's successful it will print the name of the network you are attached to, your board's IP address and the signal strength.

Once you are connected to the network, open up a browser and type in your [IP address] [semi-colon] [port you are on] in the address field. For example - http://192.168.1.12:8080

You will see a blank page that is refreshing every second. Blow into the mic and see if you can produce a "kiss" on the page. If the word isn't popping up, back up and test the circuit using the serial monitor. Upload the digital kiss test sketch, watch the values go up when a kiss is blown and grab a high number. Plug that into the code and keep tweaking that number until you get a "kiss" printing in your serial monitor every time(ish) a kiss is blown.

Step 19: Screw Backs On

Next, mount the board to the frameby using the 3/8" screws to screw into the standoffs.

Before attaching the back, small holes need to be drilled. Choose a bit that is a teensy bit smaller than the screws. Place the cut backs over the frames and use the cut holes as a template as you go around drilling all four holes. Be careful not to go too deep or tilting the bit as you drill down, you don't want to crack the wood.

Attach the backs to the frames with small #2 wood screws. Since there are drilled holes, a hand held screwdriver can be used.

Step 20: It's All About <3

Once the talk bubble light's up, that means a kiss was blown and a loving sentiment was sent. I imagined this kiss to be represented by a red heart, something that went in line with the simplicity, roundness of the design lines and loving nature.

You can choose anything you like, a message can even be written on the white bubble with dry erase markers. Or a different graphic or word could be printed instead of a heart.

I've included the heart design that I used, plus a larger size to play with. The way the heart sticks is with a very thin layer of water soluble glue or repositionable spray adhesive.

Step 21: Give to a Loved One

Maybe it's someone who you won't see for awhile, or a friend that has the same appreciation for novel interactions as you do. Whichever it is, put the receiving frame in the hands of a loved one, or maybe you would like to hang on to it to receive the message.

Make sure that wherever it ends up there is a network that allows unauthorized devices to connect to it. Change the network name and password in the code for the frame you are gifting and upload before the exchange. Turn the power switches on and the frames will connect upon boot up.

(((<3)))