Netscapes: Insight – IVT Testing

Today we did our final build and first live test in the Immersive Vision Theatre (IVT). We started by fitting the Raspberry Pi and touchscreen inside the plinth, then transporting the equipment to the dome ready for our presentation.

IMG_20180122_160933

Fitting Pi3 + Touchscreen

Chris added wooden beams to support the weight of the Pi, as it will be under a lot of pressure when the touchscreen is in use. This should prevent the touchscreen moving away from the pinth.

IMG_20180122_150137.jpg

Setting up in the IVT – Modifying Code

Whilst in the IVT, Gintare updated her code to work better within the shape of the screen. She moved some of the key elements of the visuals so they were more centered within the dome, bringing them to the viewer’s attention.

 

vizlaptop.png

Setting up the visualization

We transported the physical part of our project to the IVT and decided where to set it up. We then tested the project within the space to understand how it will look and feel to the viewers and how the colours will display in the dome.

head interface.png

Glass head with touchscreen interface

We took this as an opportunity to double-check our database connections were working. During this time we ran into issues with page refreshing (which I quickly resolved) and with internet connection, which we resolved by using a mobile access point.

headdemo.png

Glass head interface in front of the projection.

We even invited Luke to test out our user interface, and have a go at inputting his own data into the visualization!

head interaction.png

Luke testing out the user interface!

dometest

Head test with visualization within the dome.

Advertisements

Netscapes: Building Bluetooth connections

To bring together the visualisation and physical prototype, I started working on a Bluetooth connection to the MongoDB connection code I previously built.

IMG_20180113_141644

Physical prototype with HC-05 Bluetooth module

Since we already have the HC-05 Bluetooth module in place and working with the Bluetooth terminal input on mobile, I simply had to look up how to create an output system in our .js code to match the inputs we previously designed for the Arduino.

BSP design.jpg

Initial flow diagram of program

I looked into how this could be done and began researching into using Bluetooth-Serial-Port module for Node.js.

After getting to grips with how the library works, I experimented with creating a basic framework for opening a Bluetooth connection and sending a basic input.  This code will check for a connection with the correct name, find the matching address, open a connection, and if it is successful, and the character ‘a’. When hooked up to the glass head model, this should activate the LED ring, making it light up.

bluetooth serial build code

My experimentation with BSP within the previously made MongoDB connection code

 


Issues

  • Certain information missing from Bluetooth-Serial-Port NPM documentation – I had to work around this by searching for other uses of BSP to fill in the gaps
  • Method to call previously paired Bluetooth devices doesn’t work on linux systems, so a workaround has to be made (looping through available connections and matching a name)

Next Steps

  • Update Arduino-side code: Modify existing code to include more interesting light effects, such as those I previously created for my ‘Everyware’ project. These would not be direct copies, but modifications of this pre-existing code, for a unique lighting effect.
  • Thoroughly test this code to ensure a secure connection is made and maintained for the duration of the installation.

Code Referencing/Libraries Used

Below is a list of the code documentations I used as reference when building my code. Whilst code was not directly copied, it was heavily referenced from the documentation:

bluetooth-serial-port: https://www.npmjs.com/package/bluetooth-serial-port
JS express – https://expressjs.com/en/guide/routing.html
JS json body parser – https://www.npmjs.com/package/body-parser-json
JS path – https://nodejs.org/api/path.html
JS Mongo Client – https://mongodb.github.io/node-mongodb-native/api-generated/mongoclient.html

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.

readdb

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.

IMG_20180116_114315

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.

IMG_20180116_120335

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.

IMG_20180116_123645

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)

IMG_20180116_171936

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.

IMG_20180116_185022

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


References

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

 

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

earlyflow

Sketch of Database connection flow in relation to Raspberry Pi and IVT visualization

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 – Project Planning – 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: 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.

butterflycode.PNG

Early Butterfly Code – CSS animation

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

butterflygif

My completed CSS animation