One Subsea

At Somo Digital I helped to create a multi-user installation. The purpose of the app was to demonstrate the capabilities of various deep sea oil extraction apparatuses. The user are able to move around the environment with gestures on a touch-screen interface towards hotspots, that would then display information about the machinery. The information was populated by a Content Management System.

The program utilised the following plugins and external sources.

There were 4 different versions of the program.

Example of the sea plugin provided by Suimono.

I was in charge of the following areas:

User Interface

The tutorial screen shows off basic controls for the app.

The User Interface was primarily driven by Hotspots and menus. Hotspots would be the first layer of the wheel, followed by Wheels, Carousels and finally, information was presented within Cards.

Since all the information was driven by the CMS, the code structure behind the UI had to be made generic to allow the UI to be populated with the correct information.

Hotspots and Wheels.

Selecting a hotspot would open a Wheel. Wheels are essentially the first layer of menus of information. Each wheel was specific to each hotspot and would present relevant options. The wheels would spin slowly and could be spun manually by flicking them, and the user would select an option by clicking a segment.

As stated, the UI had to be generic, so the code created each segment by taking a prefab of a circle and dividing it by the number of submenus (segments), and then populating the text fields.

After the user selects a segment, they are shown the "Carousel".

The two zooms of the carousel.

The user can swipe left and right on the carousel to rotate it. The carousel is made up of cards, which contain the primary information on the products.

Plain text is on every card on the left-hand side, but media on the right-hand side could also be conveyed in up to four other ways:

Cards showing various kinds of media.

Various states of the spinner.

Content Management System

The CMS used in this project was an off-the-shelf product called Contentful. Contentful allowed a developer to design the template of the content. I made it to replicate the UI System above, with Hotspots being the roots of the content, followed by wheels, carousels, and cards being the final leaves in the heirarchy. This means that a user of the CMS could select a hotspot, and add a wheel populated with some text in each segment, then add a carousel with cards around it. Cards had fields for title, text and all media described above.

On the Unity End, Contentful could be accessed with a REST API. Using Unity WWW calls, I could parse the returned JSON into serialized Data. I comparmentalised this process into a set of stages:

Various states of CMS system.

This process will occur just after the program starts up.