Netscapes: Building

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

ledhead

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.

IMG_20180113_161942

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!

IMG_20180113_151014_1.jpg

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.

 

Advertisements

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.

IMG_20180109_164348.jpg

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.

IMG_20180109_151940

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

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!

IMG_20180112_132148

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: 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.

Programming

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.

IMG_20171210_195700

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).


MongoDB

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.

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.

IMG_20171125_192722

NodeMCU & RGB LED

RGBW LED Strips

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.

After experimentation, it was apparent these strips were not composed of individually addressable LEDs, so turned out to not be appropriate for our usage.

img_20171121_122214.jpg

Wiring up the RGBW LED strip.

24 RGB LED Ring

Next we moved onto using a 24 LED ring. First, I soldered some 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.

IMG_20171201_112748

24 LED ring with sample code.

I worked out how to individually address each LED and then used the code from the first single RGB LED 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; Left side lights up when a match is detected to the left .etc

Basic lighting effects/reactions include:

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

Wiring up my NodeMCU board to the LED ring. The circuit requires the use of capacitors to prevent damage to the LED ring. (Tape 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.


 

Links

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

 

Netscapes: Creation and Coding

Now we are moving into the development stage of our project, I have started setting up the server-side technologies we are planning to use. Here is an overview of the resources we plan on using plus an update of  my work so far.


Resources we are using

Here are the hardware and software resources we are using for our project:

  • MongoDB – in conjuction with PDO/PHP – for database operations
  • P5.js (with HTML/CSS/js .etc) – for visualizations
  • GitHub – for easy collaboration and version control
  • My server/website – for hosting .etc
  • Raspberry Pi & Touch input – for user input
  • Projector & Projection mapping software – such as surface mapper GUI

Setting up the Server/Database

I installed MongoDB to my server ready for us to use.I designed how it would work in relation to the data we will store and how we will store it. The database and other parts of the project will be hosted here.

Database Design

netscapes_diagram
A flowchart I created to outline how our project will operate in relation to the server/Database.

Functional & Non-functional requirements:

Functional:

  • Input of user data from input page/app
  • Storage and retrieval of data for use in visualization

Non-Functional:

  • Security of database – PDO (PHP data objects) is used as it uses prepared statements, which makes it more secure against injection attacks. (Stackoverflow.com, 2017)
  • Security of server – a separate username and password are used for database access only, hidden from viewing by site visitors.

Sample Content of Database

Below is an outline of how our database will work, where “options” relates to the sliders within the app.

db structure

MongoDB Document structure, created by Chris (https://enoodl.com)

Primary Key Name Option 1 Option 2 Option 3 Option 4
1 John Doe 1 6 5 3
2 Jane Doe 8 9 6 7
3 Jill Doe 4 2 8 4

 

After designing I created a database with necessary tables ready to store the data once the app becomes live.

Since MongoDB works with PDO, I chose to use this for our project as I have experience working with it in the past. This is beneficial for added security against injection attacks and flexibility in case of moving to another database. (Stackoverflow.com, 2017)


GitHub

We are using GitHub for easy collaboration and version control. Since a lot of my work is on the server side, not much will be seen on GitHub other than adding my contributions (such as server connections) to my other group member’s code.

My GitHub can be found here: https://github.com/Mustang601/


Links

My GitHub: https://github.com/Mustang601 
My Website: http://mustangphoto.co.uk/
MongoDB: https://www.mongodb.com/
P5.js: https://p5js.org/
PDO: http://php.net/manual/en/book.pdo.php
SurfaceMapperGUI: http://jason-webb.info/2013/11/surfacemappergui-a-simple-processing-interface-for-projection-mapping/


Sources

Stackoverflow.com. (2017). In PHP, how does PDO protect from SQL injections? How do prepared statements work?. [online] Available at: https://stackoverflow.com/questions/4042843/in-php-how-does-pdo-protect-from-sql-injections-how-do-prepared-statements-wor [Accessed 3 Dec. 2017].

Netscapes: Art from code – Inspirations

Since we are looking into creating web-based visualizations and animations from code, I decided to research some forms of web-based animations.

Modular SVG Animation Experiment – Mandala
By Dylan Cutler

Modular SVG animation pen (Cutler, 2017)

This example is made using HTML,CSS and Javascript. (Cutler, 2017)

I find this a particularly interesting example because of all the moving parts, how they all move in relation to each other and how they layer up.

Animated Background
By Marco Guglielmelli

Animated background in action (Guglielmelli, 2017)

This piece is created with CSS/Javascript/HTML. It is interactive; moving the mouse across the screen shows new areas of animated lines and points, growing brighter or darker as you move towards or away from them. (Guglielmelli, 2017)

Hexagon Fade
By Tina Anastopoulos

Hexagon fade example on codepen (Anastopoulos, 2017)

Created using HTML/CSS/Javascript and p5.js, Hexagon fade is an example of how p5.js can be used to create simple yet effective scaling visualizations. (Anastopoulos, 2017)

Rainbow Pinwheel – p5.js
By Tina Anastopoulos

Rainbow pinwheel interactive example on codepen (Anastopoulos, 2017)

Rainbow Pinwheel is a striking example of how interactive visualizations can be created using HTML/CSS/Js, and in this case, p5.js. In this example, you click and drag to create the effect of motion. (Anastopoulos, 2017)


Sources:

Cutler, D. (2017). Modular SVG Animation Experiment. [online] CodePen. Available at: https://codepen.io/DCtheTall/pen/KWpdRV [Accessed 26 Nov. 2017].

Guglielmelli, M. (2017). Animated Background. [online] CodePen. Available at: https://codepen.io/MarcoGuglielmelli/pen/lLCxy?limit=all&page=2&q=animation [Accessed 26 Nov. 2017].

Anastopoulos, T. (2017). Hexagon Fade. [online] CodePen. Available at: https://codepen.io/TWAIN/pen/RVjGYN?depth=everything&order=popularity&page=2&q=p5.js&show_forks=false [Accessed 26 Nov. 2017].

Anastopoulos, T. (2017). Rainbow Pinwheel – p5.js. [online] CodePen. Available at: https://codepen.io/TWAIN/pen/OpGayd?depth=everything&order=popularity&page=6&q=p5.js&show_forks=false [Accessed 26 Nov. 2017].

Netscapes – Technologies

After developing our idea further, here are the technologies we are planning to use to create our project:

MySQL/MongoDB
For storage of collected data from our app. SQL may be more appropriate for its ordered approach, but does not work easily with Phonegap.
MongoDB has plugins for Phonegap and may be considered a newer technology, thus more appropriate for our brief. (MongoDB, 2017)

Phonegap

We will use Phonegap to build a basic app containing input fields that users can download. Phonegap has a handy online compiler, meaning that apps can be built quickly that will work across multiple mobile OS’s. (PhoneGap, 2017)

Raspberry Pi

A Raspberry Pi will be used for input of data without the use of a mobile phone. This will be achieved by pairing it with a touchscreen hat. We will use this for presentation within the IVT.

P5.js

p5.js is a javascript library with drawing functionalities. We will use p5.js for creating interactive web-based visualizations with server connections. (P5js.org, 2017)

Immersive Vision Theatre (IVT)

We will use the Immersive vision theatre for the large scale presentation of our project. Users will be able to come in and view their data visualized in real time.


Sources:

MongoDB. (2017). MongoDB for GIANT Ideas. [online] Available at: https://www.mongodb.com/ [Accessed 25 Nov. 2017].

PhoneGap, A. (2017). PhoneGap. [online] Phonegap.com. Available at: https://phonegap.com/ [Accessed 25 Nov. 2017].

P5js.org. (2017). p5.js | home. [online] Available at: https://p5js.org/ [Accessed 25 Nov. 2017].

Netscapes – Planning & Production

 


Responsibilities breakdown

Here is the breakdown for our group responsibilities. This is subject to change as the project moves along.

My responsibilities are focused around programming & building the back end

Name
Tasks Chris Steph Gintare
  • Project Management
  • Tutor Mediations
  • UX Development
  • Research: Personalities
  • Research: Animations
  • 3D model for RasPi case
  • Immersive Dome Projections
  • Databases
  • Server
  • JavaScript
  • Sockets,
  • Animations Code
  • P5.JS
  • Node.JS
  • Immersive Dome Projection
  • Phonegap Front end
  • HTML/CSS for website
  • Visual Research
  • Javascript
  • P5.JS
  • Animations
  • Research: Animations
  • Immersive Dome Projection

Equipment Orders and collation, software/ hardware (Chris,Steph)
29th Nov 17

  • Source all production materials
  • Raspberry Pi 3’s
  • Touch screens
  • Finalise final form for interface container
  • OS systems
  • Server Hosting

Back End (Chris, Stephanie)
4th Dec 17

  • Find server to host MongoDB
  • Develop a MongoDB database to store parameter of user interface inputs
  • Connect simple html/ JS to database to check CRUD works
  • Client Side and interfaces (Gintare, Stephanie, Chris)

4th Dec 17

  • Simple PHP developed to ensure client is posting data externally/ correctly
  • Prototype phone gap front end for users to input personality data
  • Simple website to host visualisations.
  • Start to look at button interface to select background for the animations

Animations (Gintare, Chris)
11th December

  • P5.JS animations as prototype  forms with some or all parameters alterable though user interfacing.

Modelling for Interface controller (Chris)
18th December

  • A prototype of the interface container to be roughed out for both the primary and seconday input (buttons for scenery changes)

To be completed as working structure 9th Jan 2018


Time planning (group / individual)

Group Time Planning

Here is our group timetable, created by Chris.

netscapes group timeline

Group time schedule

 

Individual Time planning:

Below is my individual timeline for this project. Most parts of this timeline are subject to change as the project goes along; such as running into difficulties or in relation to other’s completion of tasks.

Blog updates marked with * may not be required.

Week Tasks
(27/11/17)
  • Blog Update
  • Decide on visualizations
  • Set up webpage for visualizations.
  • Set up server for database (Installation)
  • Begin to source equipment
  • Begin visualization development.
(04/12/17)
  • Blog Update
  • Further visualization development
  • Create database
  • create website inputs
  • begin to build connection between visualization/app/Database
(11/12/17)
  • Blog Update
  • Finish linking Database to app & visualization
  • Finish visualization
(18/12/17 to 01/12/17) – Christmas Break
  • Blog Update*
  • Finalization of project
(08/01/18)
  • Blog Update
  • Presentation of project (IVT)
(15/01/18) – Final 2 days
  • Blog Update*
  • Finalization of documentation
  • Refinement & finalization of submission
DEADLINE: 16/01/18
  • Submit by 23:59

Resources list & Budget

Physical Resources:

  • Raspberry Pi (Supplied by me)
  • Touchscreen for RasPi (Supplied by me)
  • 3D printer & related equipment (Supplied by university)

Budget

TBD

Netscapes: Art from code – Creation

After deciding on creating visualizations of butterflies as a reflection of personality, I experimented with code to create a simple web-based animated butterfly. The animation has the potential to change colours in response to inputted data from a server (but for now, i’m inputting the colours myself).

code butterfly

Basic butterfly I created in CSS

This animation was originally intended to work in Phonegap, so naturally it had to be limited to HTML/CSS/Javascript. The wings and body are made with simple CSS shapes, and complete a “flap” cycle every 1.5 seconds.

GitHub Link: https://github.com/Mustang601/CSS-butterfly-animation 

butterflygif

My completed CSS animation

Netscapes: Further Idea Development

After our session today on MongoDB databases and Node.JS, we took some time to further develop our idea and plan our next steps.

How the Visualisation will work:

  • Butterflies instead of Jellyfish – More original, not making a “copy”
    Wing & body colour determined by 5 different personality Traits
  • Total of 10 butterflies at a time maximum
  • Possibility for animation in background – such as clouds passing by.
  • Visualisation accessible on website and mobile app.
  • Real-time projection into Immersive Visual Theatre.

How the Data will be stored and Processed:

  • Names can be stored with butterflies and displayed in visualisation
  • Data will be stored with a Primary Key – easier to handle calls
  • 10 butterflies max – data is updated so it “loops” and replaces previous data as new data is added – keeps database small and lightweight

How we are going to build the app:

  • Create basic interface on phone gap – Needs to be short to keep interest (i.e. 3 to 5 questions)
  • Questions will be personality based and Inspired by the CANOE model.
  • Interface will contain sliders instead of radio buttons .etc – this allows for more variety of input (such as the body of the butterfly  being more yellow for extrovert and more purple for introvert)
  • Phone gap app on GitHub – easy collaboration & Version control

How we are going to distribute the app:

  • Cards, flyers or posters with QR code – These should have details about the display also and should follow the design/identity of the rest of the project.
  • QR links to a webpage with download links for different mobile OS’s – Must look professional and legitimate.