Introduction: EmotionBox - Make Long Distance Relationships Less Distant

featured in Make Magazine

Hi everyone,

nowadays there are a myriad ways to instantaneously communicate with our loved ones, even across great distances: instant messaging, email, video calls, social networks...

There is, however, one thing that is missing from long-distance relationships: tangible and physical communication, everything is inside our screens or mobile phones. EmotionBox was conceived as a way to mitigate this.

It's composed of two different elements:

  • a tiny box with five LEDs, five corresponding push buttons and a USB cable.
  • a mobile phone app with the same five lights and buttons.

They are able to talk to each other over the Internet in real time: just give the box to the person of your choice and install the app in your phone. The box needs to be connected to an Internet enabled computer via the USB cable in order to work.

Each light represents an emotion, you name it: =), =( ... possibilities are endless! When you push the corresponding button, either physically in the box or in the phone, the LED will light up in both devices simultaneously. This way you can add an intimate and tangible touch to your conversations!

Additional information

This project relies on the Blynk platform. Blynk is an open-source platform with Android and iOS apps to control hardware like Arduino over the Internet. Although they may be in an early stage, everything works great and it's very easy to start tinkering, you can get your first LED blinking in less than ten minutes.

As of late March 2016, they have just introduced a new pricing system which uses energy units to power the phone apps, so that you need to spend energy units to include widgets (like LEDs, buttons, etc) in your app. Just by creating a new account you get 4,000 free units, and each button costs 200, so we could power five different EmotionBoxes forever for free! Also, when you delete a project or a widget, you get the energy back.

So the phone side of the EmotionBox is free to use!

04/04/2016 - Featured in Make

Step 1: The Case

The project was intended to fit in a small case and be relatively robust and durable. If you have any wooden or plastic box lying around, you can drill a few holes and get it done quick and easy.

I wanted to give the box a professional look and, as I have access to a laser cutting machine, decided to build a custom case. I used transparent 3mm acrylic Perspex, it's readily available in sheets of all sizes and it looks great, you can see the inner electronics and it has something of a sophisticated look!

There is this great website, MakerCase, which allows you to easily create boxes of any size and with different options and download laser cutter plans once they're ready. You can even cut holes and engrave text directly from your web browser!

I wanted to make the box as small as possible, allowing for some confort when fitting and working with all the electronics inside. You can do a bit of prototyping to find out what size you need, depending for example on how you plan to solder the components (are you using a small breadboard, solder board?), which microcontroller (Arduino Nano is tiny and great for this project, but you may want to use an Arduino Uno you have lying around?), size of push buttons (some may have long legs), etc.

The inner dimensions of my case are 7x4x4cm, this way I got a sleek look but it is spacious enough to solder everything together. I also added fingers to the box, which are the small square-dents which make the case very easy to glue, just click Finger under the Edge Joints menu.

Carefully measure the diameter of your LED bezels and push buttons. You can use the website to cut holes specifying position and diameter, or a CAD software that supports .svg files. I don't have much experience on this field, but so far QCAD is my favourite, works on Windows, Linux and Mac!

The last thing you need is a rectangular hole for the USB cable, this can be done as well in the website or in your favourite software.

Find attached the .dxf file with the plan for my box, you could use directly it in your laser cutter machine if you are happy with the dimensions and you're thinking of a similar setup! Lastly, if you don't have access to a laser cutting machine, check with your local university or hackspace, it can be a great way to get to know new people and use more specialised equipment!


Step 2: Engraving the Emotion Icons

Close to each LED & button pair I wanted to etch or engrave a small icon representing the emotion. Depending on the material your case is made of, you can think of different possibilities.

If you use a laser cutter for the case, you can try and laser-engrave them, the results will be very nice and professional. I wanted to get a more personal touch, so I engraved them manually using an engraving tool as shown in the picture (you can also see how bad engraver I am :-)

You can also paint them, glue stickers...

Step 3: Hardware

The hardware side is very simple: we just use LEDs, resistors and pushbuttons!

Hardware list:

  • 1x Arduino (preferably Nano as it's smaller)
  • 5x LEDs, you decide colours!
  • 5x momentary push buttons
  • 5x 220Ω resistors
  • 5x 10KΩ resistors

  • 5x LED bezels

All the components are very easy to use, in case you are not familiar with them I include below a short description and instructions:

  • LEDs have two pins, positive and negative. Negative goes to ground and positive goes to a digital pin in your Arduino. A resistor should be attached to the LED to avoid burning it, 220Ω (red-red-brown) will be enough. Each LED will go to a different digital pin, in my setup I have used D7-D11.
  • Small momentary push buttons usually have two or four pins: if there is two of them, they will be connected when the button is pressed. If there is four of them, they will be connected in pairs and the two pairs will be connected when the button is pressed. Choose either, it doesn't matter much for this project. One of the sides will be connected to ground via a 10KΩ and resistor (red-black-orange) and to a digital pin, the other side to 5V. There is a great explanation about push buttons in the official Arduino site. Again, each push button will go to a different digital pin, I used D2-D6.

This is all we need! As I was in a hurry when I built the project, I decided to use a small breadboard to put all the electronics together, this way I could just insert the pins without much soldering. I glued the LED bezels to the case, and fixed the buttons using the and washers. The LEDs should be glued to the bezel once they are in place to avoid them moving or falling.

Then you just need to connect everything by soldering/inserting the pins together. Once everything is in place we can glue the box, I left the two big lateral panes unglued so that it's easy to access the electronics in case something goes wrong. It's sturdy enough even without gluing those two!

Step 4: Phone App (Blynk!)

On the phone side, we will use the Blynk app. It's available in Android and iOS, and it works great (at least in Android). Firstly, download and install the app, then you will need to create an account. Once you are logged in, you can create a new project by clicking in the plus button: choose its name, and select the microcontroller you are using (Arduino Nano in my case). Below there is a long string of characters and digits which is your private authorisation key, this needs to go into your Arduino sketch, so copy or email it to yourself! Now click create.

Now you're ready to fill the app with everything you need: for the simple setup I propose, we just need five on/off buttons. Click on the plus button and select Button, you can then drag it and drop it wherever you want in the dashboard. If you click on it you can type its name, select color (try to match it to the physical LED color!), and select the port it's going to be connected to: this needs to match your Arduino sketch later. I used V1-V5 for the five buttons. Lastly, select switch mode rather than push. That's it! Your first button is configured and ready to go.

Now just repeat the same process for the four remaining buttons, remembering to consecutively change their virtual pin to V2, V3, etc.

As of late March 2016, the cost of each of the buttons is 200 energy units, so you can make up to five EmotionBoxes simultaneously for free! You will get energy units back if you delete the buttons.

Step 5: Arduino Code

You will need the Arduino IDE, which can be downloaded here.

It uses the Blynk library to handle communication with the phone app, it's open source and can be downloaded from their website. If you need help installing libraries into Arduino IDE, check this link.

  • We start by importing Blynk libraries, and by telling Blynk that we are connecting to the Internet via the USB connection.
  • Type the authorisation code you got from your app into the variable auth. Otherwise you won't be able to connect to the box!
  • Define the digital pins that correspond to each button and LED in your physical wiring.
  • Initialise all LEDs and states to off.
  • Each button & LED has a function checkButton1, 2, 3, 4, 5 which switchs the LED on and off depending on the state, which can be changed through the app or the physical button.
  • Another set of five functions, BLYNK_WRITE(V1, V2, V3, V4, V5), control each of the buttons in the phone app.
  • Finally, each of the checkButton functions is called periodically every second to update the LEDs if needed.

You can find the code attached below or in this website.

If you need any help with the Blynk library, they have good documentation in their website and lots of examples in their github. Feel free to leave a comment below if you need any clarifications!

Step 6: Connect the EmotionBox to the Computer

The last thing we need to do is to connect the EmotionBox to the computer and grant it Internet access. To do so, we will use a piece of software provided by Blynk. It is included in the library files, under the scripts folder.

Depending on the operating system you use, names will be slightly different, but it's quick and easy to use. Detailed instructions are available in their website.

Just plug in the EmotionBox and follow the instructions to execute the script. The only thing we have to worry about is to select the correct port: it may happen that everything works out of the box, great! But most likely, the script will ask us to select the correct port from a list (if you only have one microcontroller plugged into the computer there will only be one port, so easy-peasy), copy paste the port name, then hit enter to establish the connection.

The command line should print some lines with information, and it should then stay there saying connection established on port *** or similar, you are ready to go!

Step 7: Enjoy!

Everything is ready!

Just run give your EmotionBox to whoever you want and add an physical component to your long-distance relationship :)

Feel free to ask or comment below, and let me know if you build one or get inspired to build something else!

Thanks for reading.

Step 8: Further Improvements!

There are some obvious ways to improve the project:

  • Get rid of the USB cable and add better connectivity: either adding a wifi shield for Arduino or using a different board, like the ESP8266, Photon or a wifi embedded Arduino.
  • Once the Internet connection is wireless, we can add a battery for total autonomy. The actual case won't fit a battery, so the design would need to be bigger (or more optimally used :-)
  • Maybe using tinted perspex would make it more colourful and the icons easier to read.
Full Spectrum Laser Contest 2016

Participated in the
Full Spectrum Laser Contest 2016

Make a Box Contest

Participated in the
Make a Box Contest