Website Design Chester by the Informatics Centre

Virtual Process Lab

Virtual Process Lab (VPL) is an educational tool that is being developed for the University of Chester's Faculty of Science and Engineering. The project is aimed at sixth form students and undergraduates. The purpose of the project is to give students a simulated engineering environment, with a competitive element making it into more of a game.

There are currently two types of reactors which are functional and simulate reality, consistent with the expected outcomes from engineering formulas to make it as realistic as possible.

The project has been a collaboration between Paul Bujac, Adam Hughes, James Flower, Kate Radcliff, and Lucas O'Mahony.

A screenshot of the bioreactor page.

Twitter Bootstrap

The website was designed with a template using Twitter Bootstrap. This allows developers to create responsive websites using pre-existing classes to save time re-inventing the wheel, e.g. Navigation bars, modal pop-ups and icons. Using Bootstrap aided in keeping the design of the website consistent as well as developing additional elements to enhance to the site.

Reactor models

When designing the reactors we decided to make them look realistic. This meant that a lot of time went into choosing the correct colours and gradients, which was then cascaded into the design of the joints on the pipes. All of the design work for the project was produced in Adobe Photoshop.

The same reactor vessel was used for both reactor designs to keep them consistent. The differing pipes and other features of the reactor were then changed accordingly, which meant that layers could be shared where possible and additional ones were added later.

The stirrer in the exothermic reactor has 4 speeds which vary depending on the selected speed by the user. The stirrer was made using GIF images which are swapped for faster/slower speed images when needed. GIF images work on a frame by frame basis which allows them to be used for animations. Originally, we chose Scalable Vector Graphics to do the movement of the blades. However, browser inconsistencies and problems with blades needing to have a consistent movement meant that we chose GIF images over SVG.

Using Photoshop involved many challenges because the positioning had to be very precise to make the blade transition smooth. There were multiple design iterations before a final design was agreed.

The use of progress bars was very useful to give the effect of liquid flowing into the tank. Additionally, we used RGB colour values to calculate the outputted colour of the solution inside the exothermic reactor. The liquid colour in the tank changes depending on the amount of each liquid in the pipes.

A screenshot of the exothermic reactor page.

Programming

The method of programming was done mostly in JavaScript. This involved a lot of problem solving especially as we both hadn't had much experience with the language. After the first week we were both familiar with the structure of the language and were able to get together the foundation code which was needed. We had a working bioreactor model created by James which helped us in our creation of the exothermic reactor model.

We found that implementing simple things was more complicated than we first thought. For example, changing the pipes liquid level to increase and decrease using the arrows should have been a simple task, however, this turned out to be many lines of code (approx. 100) to complete and 4 hours of development.

We refactored large portions of code as we minimalized code duplication throughout the reactors. A lot of effort has gone into code optimisation.

Local storage

A requirement from the client was to store the user's high score. This could be the amount of money they made in the case of the Bioreactor or the Yield amount for the exothermic reactor. The client only wanted this to be for the current game play and for that single user. There would be no requirement to have a global high score that users would have to beat.

Originally we considered using a database for this but it seemed like overkill to store a single value and to maintain each users single high score. We looked into different options and found that HTML 5 provides a very nice feature called Local Storage which would be perfect.

Developing the graphs was one of the more complex elements in the games. We chose to use the Highcharts JS framework to display the multiple sets of data which were needed after each run of the game.

A graph showing all exothermic reactor variables

Different elements in the reactor use certain pipes. We worked with multidimensional arrays for structuring the different pipes and the substances (e.g. Reactant a, steam). This meant that we could loop through each progress bar and set the appropriate amount of liquid when they increased the rate.

Usability

Usability of the website was very important as this is a technical website. We chose to use Chardin.js as an overlay screen for the different controls and values on the screen to help new users. Many of the students visiting the page would be unfamiliar with the concepts of the reactor so we felt this was important to get right.

Chardin.js overlay on the bioreactor page.

Summary

The project was a steep learning curve but we have both enjoyed developing the solutions to the problem. We have gained a lot of knowledge in the areas of HTML, CSS, JavaScript, Twitter Bootstrap, user interface design, and code optimisation.

The system is still under development and therefore there are still new features and tweaks being implemented. The project has been enjoyable and interesting to work on and we even learnt a bit ourselves about engineering!

We hope that when completed the website will be useful to many students as it is something that doesn't currently exist. We will let you know when it is live.

View all Informatics Centre blog posts.