Everyware: The Icebreaker

Presentation Link: https://prezi.com/view/cvW3ewB4za09OKP7Hktq/

The Icebreaker T-shirt is a unique tool for connecting people. It is designed for use in conventions, open days, and other large social events. Plymouth University alone has approximately 23,000 students, with many of these students attending open days and freshers fairs. (University of Plymouth, 2018) With the phrase “It’s not what you know but who you know” being more true than ever; it is vital to grow your social circle and create opportunities for both now and the future.


Icebreaker mobile app

The Icebreaker mobile app accompanies the T-shirt, allowing users to input their login details as well as add in their hobbies and interests to match upon. The app is simple, allowing you to input your details and go, so your attention is always in the moment, rather than at your phone.

Watch our promotional video: https://www.youtube.com/watch?v=xVB_mYe-LQw

The interactive T-shirt makes the immaterial concept of shared interests and brings them to life in a visual way. When you meet someone you have similar interests to, your shirt will light up, telling you exactly who you have matched with and what interests you match on. The accompanying app tells you exactly how close the person you matched with is, so you never miss an opportunity to meet someone.

T-shirt designs

Icebreaker Tshirt designs

The Icebreaker T-shirt allows wearers to expand their social circle and meet new people – Perfect for university freshers fairs and open days.

Security features

Don’t want to match with anyone? Only want to match with people of a similar age? Don’t want to share your location? No problem. With the Icebreaker mobile app, you can choose from a range of privacy options.

Future updates include:

  • Personalisation: Customisation of colours and lighting effects based on preferences in the mobile app.
  • More Matches: A more extensive list of hobbies and interests to choose from.
  • Washable: Switching to washable conductive threads & removable LED panels, allowing the T-shirt to be reused


University of Plymouth. (2018). Facts and figures. [online] Available at: https://www.plymouth.ac.uk/your-university/about-us/facts-and-figures [Accessed 19 Jan. 2018].



Netscapes: Technologies

Technologies we have used or have thought about using:



Browserify allows you to bundle all your add-ons into one using require. Useful for when you have multiple dependencies! (Browserify.org, 2018)

This would be perfect for when we are building our server connections, as this requires multiple packages to achieve.



TouchOSC enables you to easily build touch based interfaces for mobile devices. It allows you to rapidly build user interfaces with buttons, switches, sliders .etc (Hexler.net, 2018)

Although this is primarily for use with sound control, it was suggested to us to try and re-purpose. We were going to use this for emotion input to influence the head model colour before we switched to single input from the Raspberry Pi.



Browserify.org. (2018). Browserify. [online] Available at: http://browserify.org/ [Accessed 17 Jan. 2018].

Hexler.net. (2018). h e x l e r . n e t | TouchOSC. [online] Available at: https://hexler.net/software/touchosc [Accessed 17 Jan. 2018].

Netscapes: Making & MLabs

Today we worked further on bringing the project together, drawing together all our current work and making improvements where necessary.

MLabs/Visualization connection

I worked on building a connection to the mLab database, pulling data and using them for parameters for a circle. The code checks the database for a new entry every 15 seconds.


Reading values from Database

For example, I set up mapping for sliders to RGB: The slider takes a value of 0 to 8 for the user, which is mapped to a number between 0 and 255 for 3 of the values (in this case the vars kind, trust and help). I also applied this to the radius and speed of movement.

Next, Gintaré and Chris will take this to build into their visualisation in its current state.

User Interface Modifications

We then looked at Gintaré’s slider inputs and how they would look in the physical build.


First slider test in plinth (without the glass head or diffuser)

After reviewing both its looks and ease of interaction, we decided to make a few changes, such as making the text/scrollbar larger and removing the numbers from the sliders (As they do not display properly on Raspberry Pi).

Gintaré made modifications based on these observations and we quickly reviewed it. We also decided to colour code each section of sliders to each section of the CANOE model. This not only breaks it up but makes it more visually appealing in a way that makes sense.


Touchscreen with enlarged scroll bar for ease of use.

We decided it would still be best to display the touchscreen with the stylus for ease of use as the sliders can still be difficult to use at this size.


Touch screen with colour coded sections (per canoe model)

Since the touchscreen has no enabled right-click function, once the app is full-screen it is very difficult to get out of – meaning the viewers won’t be able to (intentionally or accidentally!) exit it.

We decided to bevel the edges that surround the screen as they make it difficult for users to easily reach the screen. This will also make it look more inviting to a user by bringing it into their view.

Connecting MongoDB/mLab to front-end

I started working on code to input values to the database using Gintaré’s previously made slider interface. This was built using express, npm and node.js. On recommendation from Chris B, Express was used in place of PHP.

When run, the code hosts the necessary files (such as Gintaré’s sliders) on a local server, which sends the data to the remote server when “Generate” is pressed.


Since Node.js means the code is ‘modular’, we decided to put the login details in a separate .js file (rather than censor the mongoDB login details when on GitHub)


Installing Node.js & npm to Raspberry Pi

Once this was up and running (and confirmed to work on mLab), I moved the files and installed the necessary npm packages on my Raspberry Pi. I then tested the connection to mLab to ensure the data was working.


Running the local server (Hosting the sliders form) on Raspberry Pi

We then put this server connection together with Gintaré’s updated user interface.

data canoe test

Data inserted into mLab via Raspberry Pi

mlabs multi canoe

Multiple documents in MongoDB database.

Now that we have data both coming into and out of the database, we are ready to move onto the next steps!

Next Steps

  • Finish Visualization
  • Put together final physical prototype (Seat raspi, sort out power supplies .etc)
  • Preview in IVT – test visualisations before presentation
  • (If time allows) Make a system for colour of head based on last data entry.

Netscapes: Building

Today we focused on finishing developing the physical side of our project.


The LED ring powered glass head. Colours are being chosen by a mobile phone (off screen).

The second Neopixel ring arrived, so we soldered in some headers and built a circuit board for it. We installed the necessary drivers into the Arduino IDE and programmed it to output different colours.

We then merged this code with the Bluetooth code Chris made earlier.

We mounted the Arduino, breadboard and Bluetooth module to the interior on the plinth. We drilled holes into the head base to accommodate the wiring for the RGB LED ring.


The Arduino & Circuitry mounted inside the plinth.

This LED ring is brighter than the other, even inside the diffuser, so is even better for our finalised build!


The LED ring mounted in the plinth.

Our next steps are to:

  • I will develop an app to send characters across a Bluetooth connection, enabling us to remotely change the colour of the head without the need for the Bluetooth Terminal.
  • I need to build server connections for our visualization, input sliders and MySQL Database.
  • Gintaré and Chris need to complete the visualization for the IVT theatre.


Netscapes: Development Process

Creating a project is an organic process that contains many twists and turns. Below I will outline some of the changes we had to make during the development of our project.

Before Christmas break, Chris built a wooden plinth to mount the glass head on & house all the electronics. He also designed & 3D printed an inner diffuser for our lighting. This will be displayed in the IVT theatre, as the interactive front-end of our project.


Glass head mounted on plinth (without diffuser). The gap at the front will house the Raspberry Pi & GPIO Touchscreen.

Modified Slider/LED control for Arduino

To further improve the LED lighting part of our piece, we decided to modify it by removing the serial connection and instead using a Bluetooth connection. Chris purchased a Bluetooth module and began to program it to take inputs from mobile.

Chris and I worked together to program the RGB LED code with Bluetooth. We tested the connection using Bluetooth terminal on our Android devices; sending simple “a” and “b” messages to turn an LED on and off remotely. We discovered that this will only work with one device at a time, so we will need to account for this when the model is on display.

We decided on making a mobile app to control the colour of the LEDs, which I will build in Processing over the next few days.

Resolving LED brightness issues 

We found that with the 3D printed inner diffuser in place, The RGB LEDs were not bright enough to light up the glass head.


Original setup, with multiple RGB LEDs, Arduino & Bluetooth module.


Neopixel 24 LED Ring

We tried an LED ring (that I have been using in another project) since it is considerably brighter than the individual LEDs. This worked much better; the colour was visible even in the brightly lit room, and the ring diameter was a perfect fit for the base of the diffuser!


Glass head with diffuser and LED ring.

We purchased another LED ring and cut new holes in the mount to accommodate the wiring.

Switching and Setting up databases.

Due to issues connecting to our MongoDB database, we decided to switch from MongoDB to MySQL.

I set up a new database on my server with access to the necessary tables. I sent Gintaré a link to instructions on how to set it up, along with the necessary details, so she can get to work building the data visualization.

Next Steps
Our next steps are to:

  • Wire up the LED ring and program it to respond to Bluetooth messages (modifying earlier code)
  • Develop an android app
  • Connect the visualization and the slider inputs to my server/Database.


Netscapes: Code Inspirations

Open Processing

Open Processing is a library of P5.js examples created by users. (Openprocessing.org, 2018) I looked here for inspiration for our final visualization, as well as gaining insight into how they are created.

I mainly focused on code inspired by organic forms and movement, as we are aiming to create an abstract visualization.

Snakes by skizzm

Snakes is an example of animated pixel art created only with code.  It consists of a grid of squares each with their own animation. (Openprocessing.org, 2018)

A similar effect could be applied to our visualisation: The individual squares, differing colours and motions could be linked to different sections of the CANOE personality model

Link: https://www.openprocessing.org/sketch/469866

TREE by Ryan Chao

Tree is a simplistic animation of a tree swaying gently in the breeze. The shape is changed on click, randomly generating a new tree. The ‘blossom’ on the branches are generated circles. (Chao, 2018)

This is similar to our original idea of generating organic shapes or creatures from user inputted data.

Link: https://www.openprocessing.org/sketch/186129

Wobbly Swarm by Konstantin Makhmutov

Wobbly swarm is an interactive animation piece. Clicking and dragging generates new circles, which swarm together and interact with eachother, slowly grouping together to create a ball. (Makhmutov, 2018)

Link: https://www.openprocessing.org/sketch/492096

Easing Test by aadebdeb

Easing test is a circle-based animation that changes every time you click. This is similar to our idea of creating circles based on user inputs. The placement, colour and size could relate to the inputs from our CANOE model sliders. (Openprocessing.org, 2018)

Link: https://www.openprocessing.org/sketch/389339


Chao, R. (2018). tree150209 – OpenProcessing. [online] Openprocessing.org. Available at: https://www.openprocessing.org/sketch/186129 [Accessed 8 Jan. 2018].

Makhmutov, K. (2018). Wobbly Swarm – OpenProcessing. [online] Openprocessing.org. Available at: https://www.openprocessing.org/sketch/492096 [Accessed 10 Jan. 2018].

Openprocessing.org. (2018). easing test – OpenProcessing. [online] Available at: https://www.openprocessing.org/sketch/389339 [Accessed 10 Jan. 2018].

Openprocessing.org. (2018). OpenProcessing – Algorithmic Designs Created with Processing. [online] Available at: https://www.openprocessing.org/ [Accessed 15 Jan. 2018].

Openprocessing.org. (2018). snakes – OpenProcessing. [online] Available at: https://www.openprocessing.org/sketch/469866 [Accessed 10 Jan. 2018].


Everyware: MQTT matches & Lighting effects

Gerrit redesigned the T-shirt from the original polar bear design to a design which will help alert users to which interests they matched on, as seen below. This will match the size of the LED ring once it is fitted onto the T-shirt, allowing a quick visual reference to which interests or hobbies the wearers have matched on.

received_10159835159540181 (1).jpeg

Gerrit’s T-shirt design, made to accommodate the LED ring within the design

Since my part of the project includes handling the physical prototyping with NodeMCU, I had to change my code to work with this design.

Creating Lighting Effects – Neopixel 24

The new T-shirt design incorporates a thirds system to allow users to identify which interests they matched on.


For single matches, only specific parts of the board will light up.

I changed my code to accommodate this thirds system – I split the LED ring up into thirds relating to which match was made. Since the Neopixel Library allows you to set individual LED colours based on their number, it is possible to count around the ring between specific numbers.

Although the LED ring will need to be ‘reset’ to off between animations, the left/right match code can otherwise stay the same.


Basic match with direction

This visual code works not only for the wearer but for other wearers too – It acts as a quick visual reference to allow you to instantly see who you matched with!

I also made my own functions for lighting effects such as breathe effects and directional matches. The breathe effect cycles through brightness as a percentage (in a similar way to setting the brightness in the code setup). Whilst this works, it does require perfect timing on delays, as if you miss the timing the LED ring will not go back to full brightness. Percentages should also be used as to not overwrite the initially set brightness of the LED ring (to avoid it turning down to ‘0’ brightness and staying there!)

Final Lighting Effects

I modified my code to show more interesting lighting effects and fix some issues that I previously came across.

One of the main issues I noticed was that when a match was made, if the ‘background’ was left as the default blue the matches were not as easy to notice (for example, if two matches were made, the last third would stay blue, so it could  be interpreted as 3 matches instead of 2). I combated this my programming the LEDs to switch off after matches and between directional animations. This also has the added bonus of being more eye-catching to both users and viewers!


Double match with direction effects

Matches count across one third of the ring (always in sequence, so the motion is a constant clockwise direction for a smoother appearance) If there are multiple matches, this will count across all of the thirds in sequence (as seen above). Once it has finished counting round, the ring lighting will “Breathe” for one cycle.

After this, the directional lighting will begin. This lights up half of the ring white and green. The effect means that the ring will appear to light up white with a green “arrow” moving towards the center in whichever direction the match is. To achieve this, I programmed the LEDs individually to delay the change in colour. This animation will run for 4 cycles.

Handling Multiple devices across MQTT

In order to keep it efficient, each board takes a unique ID and then an instruction, then a direction. for example “1” for board 1, followed by “1” for match one and “2” for match right. at the same time, board 2 would receive “2” followed by match “1” and “1” for match left.


MySQL database, where the interests are stored

When this is hooked up to Glenn’s MySQL and Node-Red code, these sets of instructions are sent to the relevant T-shirts when a match is made within a certain location. This location is worked out using the Google Maps API (also used to determine the Left/Right directional matches).


2 LED rings matching on all 3 interests. Note the motioning towards each other. (Delay due to internet!)


Everyware: Research & Social impact

Almost a quarter of the world’s population are on Facebook (Gaitho, 2017) Whilst it may be argued that social media websites like Facebook encourages social interaction, the opposite is actually true.

Research shows that social media is actually making us less social. people who use 3 or more social media platforms will, on average, only socialise once a month. (Adams, 2017)

Social media use also shapes our personality. Before the age of Facebook, if you moved away from friends or family, you would simply move on and keep contact via email or letter, a slow process. Because of this, you would be more encouraged to meet new people within the area and expand your social circle. Facebook changes this by making users keep contact with old friends or family, inhibiting social growth. (della Cava, 2014)

Social impact

The Icebreaker T-shirt will encourage users to step away from their mobile devices and interact with new people. Users will input their data into the app & go, taking their attention away from their phone and into the conversation.

The Tshirt will also encourage users to expand their social circle, breaking away the chains of social media and allowing them to grow and move on.


Adams, S. (2017). Fears social media could actually be making people unsociable. [online] mirror. Available at: https://www.mirror.co.uk/tech/social-media-making-you-unsociable-10490787 [Accessed 19 Dec. 2017].

della Cava, M. (2014). How Facebook changed our lives. [online] USA TODAY. Available at: https://www.usatoday.com/story/tech/2014/02/02/facebook-turns-10-cultural-impact/5063979/ [Accessed 19 Dec. 2017].

Gaitho, M. (2017). What is the real impact of social media?. [online] Simplilearn.com. Available at: https://www.simplilearn.com/real-impact-social-media-article [Accessed 19 Dec. 2017].

Netscapes: Building – MongoDB & Python

This week I have focused on the building stage. After helping my team members get started with p5.js, I got to work building my parts of the project: the back-end and LED control.

Emotion/colour Sliders – Python & Arduino LED control

Part of our project includes the representation of emotions in a visual sense. We decided on creating this using a basic slider input, so I got to work developing it.

I built this using:

  • Raspberry Pi 3
  • Arduino
  • 5″ GPIO touchscreen
  • Python

I created my app using libraries including PySerial (for serial connections using Python) and tkinter (For rapid production of basic user interfaces). I decided to use Python as I have previous experience with creating connections to Arduino using PySerial.

Building circuits

Firstly, I setup the Raspberry Pi 3 with the necessary drivers & fitted the touchscreen. I created a script on the desktop to open an on-screen keyboard (so I wouldn’t have to use a keyboard for setup later). I then built a basic circuit with an RGB LED and hooked it up to the Raspberry Pi.

IMG_20171208_003440 (1)

My Rasberry Pi with GPIO touchscreen.


I started off by building a basic slider interface using tkinter and Python. I made sure it was appropriately scaled to the screen and then worked out how to get the output of the slider in real time. In this case, I used 1 to 8 to match our data input app.


Basic RGB LED wiring

Once the slider was working correctly, I set up a basic serial connection to the arduino using PySerial. Since PySerial needs data to be sent in bytes, I had to make sure the characters sent were encoded. I then built a basic script on the Arduino side to receive the characters and change the colour of the RGB LED based on how far the slider was moved (in this case blue to yellow for sad to happy).

Link to my code on GitHub: https://github.com/Mustang601/Arduino-Serial-LED-slider 

Sequence 01_1

My completed LED slider

My next steps are to further develop the user interface, and to figure out how to use this in conjunction with the other user inputs (for database connection).


I created a database in MongoDB, and hosted it on mLabs (due to a software conflict I couldn’t easily host it on my own server, so this was the next best thing!)

The database will hold all the input data from our app; and will be used in the creation of our visualization.

mongo input document

Document within MongoDB database

The next step is to connect this database up to the input app and visualization once they are both completed.

Related Links

tkinter: https://docs.python.org/3.0/library/tkinter.html 

PySerial: https://pythonhosted.org/pyserial/

mLabs: https://mlab.com/

MongoDB: https://www.mongodb.com/

Everyware: Icebreaker development – LEDs & MQTT

In this post I will briefly outline my part in the creation of our wearable technology: The Icebreaker T-Shirt.

My responsibilities included creating the physical prototypes: Using the NodeMCU and MQTT connections to build a wearable system.

Prototyping: Single RGB LED

I started off by prototyping MQTT connections with a single RGB LED. I built a basic circuit and programmed it so that it would connect to the MQTT broker, and light up when data is received.

This was a very basic prototype to test MQTT connections and reactions, to see what is possible across MQTT communications and how messages are both sent and received.

During this time, I ran into many internet connectivity issues with the NodeMCU board – Whilst it does work, it often needs resetting as the connection is prone to drop out after running for a while. This is a known limitation of the board and a workaround should  be found for the finished product.


NodeMCU wired up to the RGB LED for testing messages sent across the MQTT i-dat broker.


After this, we experimented with using RGBW LED strips. I wired up a circuit (using transistors to prevent burning out my controller board) and experimented with some code to create patterns and colour combinations.


Testing the RGB LED strip

In addition to issues with powering these strips from the NodeMCU board without external power sources, it was apparent these strips were not composed of individually addressable LEDs, so turned out to not be appropriate for our usage. It would also be difficult to fit these LED strips around a T-shirt design without cutting them in multiple places and soldering many wires to bridge the gaps, resulting in a messy and impractical finish.


Wiring up the RGBW LED strip with multiple transistors – one for each colour & white.


24 RGB LED Ring

Next we moved onto using an Adafruit Neopixel 24 LED ring. First, I soldered some header pins into the ring for easy wiring. Later these could be removed and either directly soldered onto, or even potentially be connected to using conductive thread.


24 LED ring with sample code.

I worked out how to individually address each LED to both change the colour and brightness, and then used the code from the first single RGB LED (shown above) to connect it to the MQTT broker.

After this, I setup basic reactions to each input to simulate what will happen once the database is properly connected; such as changing the colours when a match is detected.

Basic lighting effects/reactions i initially created include:

  • Ambient (No match/resting)
  • Match (Different colours for different matches) – Currently 3 max
  • Left – Left side lights up
  • Right – Right side lights up

Wiring up my NodeMCU board to the LED ring. The circuit requires the use of capacitors to prevent damage to the LED ring and resistors on the data inputs. (Tape shown over LEDs is for diffusing)

The next steps are to create more visually appealing lighting effects & reactions (which I will work on over the next week) and to hook it up to the database via MQTT, which is being handled by my other team members.



Adafruit Neopixel/Library: https://learn.adafruit.com/adafruit-neopixel-uberguide?view=all