Positweet

What is Positweet?

Positweet is a positive Twitter messaging system that helps create stronger friendships and relationships one message at a time. The wooden box that houses the device can be placed beside your computer and plugs in via USB. When placing an object in front of the box, the box will light up and display the color of the object. Using the chosen color, a positive message is picked from a list that can then be sent to one of your followers. After setting who will receive the message, pressing on the box will automatically send the message, spreading some extra positivity into the world and brightening someone's day.

Back To Top

Design

Box Design

We want to make a box which can send the message simply and physically. Some functions need to be realized in this box are sensing the color of the objects, displaying the sensed color, sending the message. And the interaction between people and the box are putting objects in front of the box and interacting with box for sending the message. So several things need to be considered about the design for the box. The box should receive the signal and then send the message. So how to design the switch to let people interact with the box and make it send the message is an issue to be thought. Several ways to design the switch are rotating, sliding, pressing. I sketched several boxes with these different ways and make comparison. After discussing with my teammates, we decided to select the box with pressing to realize sending the message. So the Positweet consists of two boxes. People can press the outer box, it will move downward a little and the message will be sent. On the front panel, there is a carved round circle on the left, which is the part for sensing the color of objects. An acrylic ring surrounded the round circle so that the LED light can come out through this transparent material. The contrast between wood and acrylic also provide a sense of beauty. The whole style of the box is simple and clear.

Online Interface Design

The design for the website also observes the principle of simple and clear. I want to let people quickly understand what they should do according to the indication on the website. There are several steps the website should include. First logging in to twitter account, then setting receiver, and the last is sending the tweet. It’s very easy and simple. The interface should be very clear and humanized for people to use. So on the first page, I designed only a LOG IN button to guide people clicking it and entering their account. After logging in, they should select the receiver they want. A very obvious input box is right at the top. After they input the first several character of the person’s name, the related contacts’ information will pop out. After selecting the receiver, the tweet will automatically generated and displayed on the webpage. Also, there is a navigation button on the top right. When people click that button, they can select “set receiver”, “tweet” to jump into different pages they want or logging out. One need to be mentioned is that, the color of the webpage can be changed according to the objects put in front of the box. In this case, the LED light will be glowed through the box and the color of the website will be changed simultaneously.

What I learned from this project

I’m mainly responsible for the design of the box and the website. But I learned a lot on cooperating with my teammates with coding the website and also the construction of the box. Designing a box need to be considered about its size for suitable placing all the inner components. The software and the laser cutting machine in Fab lab is also the things I learned. Also, how to design a simple used website which can easily guide people to the right direction and make it unified with the physical product is also what I learned.

Back To Top

Wiring and Hardware

How it works

The circuit itself contains 4 major parts: the Galileo, a diffused tricolor LED, an RGB sensor to collect color input, and a button for sending the chosen tweet. The sensor itself has a white LED on board accompanied with an IR blocking filter to provide more accurate measurements. Light from the white LED hits the object in front of it and the reflected waves responsible for the actual color of the object, i.e. orange, are picked up by an onboard photodiode after accounting for any IR with an IR blocking filter. The sensor then outputs a value of red, green, and blue which we then convert to a number from 0 to 255 for displaying on the tricolor LED. The RGB values are then sent to the Linux side where a tweet is chosen for sending. Once chosen, pressing on the box will depress the tactile button mounted to the roof of the box and will result in the tweet being sent.

Parts List

Wiring Schematic

What I Learned

While looking for parts that are compatible with the Galileo, we assumed that other Arduino sensors would work with the board with ease. Hooking up the RGB sensor was not an issue itself, but getting certain Arduino libraries to work on the Galileo proved troublesome. After purchasing the sensor from Adafruit, we realized there are some other sensors out there that appear to be more compatible with the Galileo and that our previous assumption was incorrect.

When it came to designing a housing for all of the hardware, it was difficult to decide where each of the components should go and what it should look like while maintaining the functionality we wanted (i.e. pushing down on the box to send a tweet) and accessibility to the parts and the sensor itself. We ran into issues in terms of time constraints and previous versions of the box not holding everything properly, resulting in redesigns and other prototypes being generated. As such, various holes inside the box were created to allow for wires from the Galileo to reach each of the other components and for easy access as well as ports for the Ethernet and power cables. Overall, we’re happy with the overall end result of the box and have learned that hardware placement and design directly tie together and that the Galileo’s Arduino is not as compatible and user friendly and has some slight differences that need to be considered when working with it in the future.

Back To Top

Coding

Arduino

A small Arduino script written in C reads the data from the color sensor. This program uses the color sensor library from Adafruit. Since the color sensor is an I2C device, the color sensor library uses the I2C channel to read the bytes sent from the sensor. When these bytes have been read and interpreted into RGB values they are sent over the HTTP protocol to the REST API running at the Node.js server.

Backend

The backend handles the REST API, socket.io communication, reading from and sending data to the Arduino pins, the color comparison, sending tweets and the Twitter authentication. Each function is described below. The backend was written in Node.js.

Rest API

The backend has a REST API so the client and the Arduino script can talk to the backend. The API consist of several different GET and POST routes:

Color comparison and tweets.json

The app supports 7 different colors, red, green, blue, yellow, orange, brown and pink. These colors and their associated tweets are stored in a JSON-file in the format:

{
name": "red",
"colorOut": {
"r": 255,
"g": 0,
"b": 0
},
"colorIn": {
"r": 158,
"g": 53,
"b": 43
},
"tweets": [
"#receiver# is the best person in the world!",
"I just love #receiver#",
"#receiver# is the love of my life"
]
}

As you can see the colors have two different color values stored, “colorOut” and “colorIn”. The “colorOut” RGB value is the value sent to RGB leds and the client’s design. The “colorIn” RGB value is used for comparison against the detected color from the color sensor.

This comparison between the input color from the color sensor and the colors stored in tweets.json are made with the vector space model. To compare the input with each color in tweets.json this function is used:

And then the selected color from which the tweet is generated from is determined by min(f).

Sending tweets and Twitter authentication

When a color has been determined according to the function above, a tweet from that colors collection of tweets is randomly selected. The string “#receiver#” is replaced with the receiver that the user have chosen. The Positweet is now ready to send a tweet to the users Twitter account. If the users then press the button, the tweet is sent.

To authenticate the user against Twitter, a small Twitter app was created. This Twitter app allows the backend to fetch the user data and post tweets to the authenticated users account. More information about Twitter apps can be found here.

To send tweets and authenticate the user, the libraries Twit and Passport.js was used.

Reading and sending data to Arduino pins

The backend handles the RGB leds so that they illuminate the color detected by the color sensor. The backend writes the detected RGB color to the RGB leds that are connected to the analog pins 3 (red), 5 (green) and 6 (blue).

The backend also reads the data from the button connected at the digital pin 2. If the button is clicked, the last randomly generated tweet is sent.

The reading and sending of data to the Arduino pins are implemented with help from the Mraa library and Galileo-io library.

Socket.io communication

Instead of talking to the client over the basic HTTP protocol, the backend uses web sockets to send data to the client. Websockets is used because it makes it possible for the backend to initiate communication, which is not possible over the HTTP protocol. This is helpful for example when the color detected sets the color of the web interface at the client. If we weren’t using web sockets, the client would have to continuously ask the backend if a color has been detected. With web sockets the backend can instead tell the client when a color is detected. The web sockets is implemented with the socket.io library and has these channels:

Client

A small AngularJS client was created so the user of Positweet can interact with the product, for example setting the receiver of the tweets and login to Twitter. This client also displays the generated tweet. You can say that the client acts as a screen for the backend.

The client has three pages:

  1. Login
    Login page.
  2. Home
    This is where the generated tweet is shown.
  3. Set receiver
    This page displays all the accounts that the user follows on Twitter. The user can browse them or search for a particular account. At each account there is a button named “Set receiver”, which sets the chosen account as the receiver of all tweets.

The design of entire web interface at the client is determined by the color detected by the color sensor. So if for example the color blue is detected, the design has the color blue. This was implemented so the user easily can see which color the color sensor has detected.

The coding of the client isn’t really much to say about. It’s just a basic AngularJS app with a bunch of controllers and services. The only thing special is that the client uses Socket.io for some communication with the backend. This communication is further described at “Socket.io communication” at the “Backend” section. You can checkout the code for the client here

Languages

Frameworks

Backend dependencies

The Node.js server uses the Express framework and a large set of libraries to make everything function. The libraries are:

Arduino dependencies

Download/Run code

You can see all the code and download it from Github. There you will also find some detailed instructions on how to run the code in your environment.

What I learned

The biggest lesson from the coding part is to check that the library of the sensor you’re planning to use is compatible with the Linux side of the Intel Galileo. We found out that the sensor we purchased didn’t have a library for the Intel Galileo, only for Arduino. This is the reason for why we had to create an Arduino script that read the data from the sensor and then posted it via the HTTP protocol to the backend. If the sensor had a library compatible with the Linux side of the Intel Galileo, the backend could have read the data from the sensor directly. We tried to create our own library, but that required a lot of knowledge about the I2C protocol, which we didn’t have. However, just trying to create an library still gave us a lot knowledge about the I2C and about reading bytes. Other than that this project gave us a lot of knowledge about writing code that talks to hardware connected to an Arduino. This newly gained knowledge feels very great to have. Even though we have used web sockets before, we have never used it like we did in this project. Before we have only used it to write simple chat programs or similar. This new implementation of web sockets gave us a lot of knowledge about the power of using them and how you can use it in alternative ways.

Back To Top

Photos/Videos

Back To Top

Credits

Positweet was created by Aileen Bai, Holly Brown and Johan Kasperi

Back To Top