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.

 

Advertisements

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

Web Development: Building a Job website

I was tasked with creating the back-end for a typical job recruitment website, that caters to the needs of both recruiters & job seekers. Since I didn’t have to create the front end designs, I kept the UI work minimal, only building simple frameworks for tables.

Planning

I started by planning out how my website would work, by creating multiple design documents such as flowcharts of system operations, Use-case & Entity-Relationship diagrams. I looked carefully at how different types of users would expect the platform to behave and how to best cater to that, whilst maximising efficiency and security. I also considered the operation of the system, in terms of not allowing users who are not logged in to post applications .etc

Building & Operation (in brief) 

I created my job recruitment website using a mix of PHP, MySQL, Javascript, HTML & CSS. Below is a brief look at some of the functionalities of the website:

Firstly, users can create a login with a name, email and password. This is checked against the database, and if an account doesn’t already exist, it is then stored within the database.

Then users can login, opening a session that will last either until the browser is closed or the logout button is pressed. When a session is started, a user can upload a job listing or application (provided there are jobs already posted) and this will be linked to their account using the current session data. Sessions also work when it comes to applying for a job – once a user has selected a job from the job search, the primary key of that job is temporarily stored, meaning that the application is automatically linked to that listing for ease of viewing by a recruiter.

 

Files such as CV uploads are typically too large to be stored in a database – instead, I programmed it so that the location of the file is saved in the SQL database, allowing a recruiter to simply hit a download button to view it later.

Some information, such as which users posted which jobs or applications, is cross-referenced between tables. In these cases, primary keys are also used (for example to link applications to the appropriate job listings).

Security

When it comes to website security, there is a lot more to consider than just passwords. When building a website of this nature, there is often extra risks, such as stored user information & file uploads.

I used PDO (Php Data Objects) instead of MySQLi, as it uses prepared statements; making it more secure against SQL injection attacks. Unlike mySQLi, which only works on SQL databases, PDO works on many, meaning that switching to another database later on requires minimal effort.

File uploads, in this case CV uploads, create potential for attacks. This can be combated by conducting multiple checks before a file is allowed to be uploaded to the server. This includes file size limits & checking for file types. Since this is still not perfectly secure, extra steps can be taken, such as renaming a file and using a new extension — ensuring that uploaded files are non-executable.

All user data is stored hashed, so in the event of a data breach, user information is kept safe and secure. A separate username & password is used for database operations only (as opposed to full root access), which is hidden from viewing by site visitors.