VISNAV - A Servelec Controls Team 3 Hackathon 2018 Production

Blog Post created by tim.maclaren on Apr 15, 2018

Well we're here again, a year on and it's Hackathon time.  We decided to follow our footsteps from last year and focus on a single 12 hour team day, rather than spread the effort out over a few weeks, it adds to the team spirit plus we get food too!

So what will this year have in store?  Some more cool visualizations to get stuck into with PI Vision 4 and to see what it can do to have a great business impact on some real world problems.  But, on top of the business impact, we need to look at the extensibility behind PI Vision 4 in order to achieve this impact, and that's where our developers come in.  The team will also look at creating a fun and interesting user interface and user experience.  That's all well and good saying these things but what are we actually going to do?


First things first, breakfast!  The boss met us early doors and provided much needed refreshments to kick start the day - it certainly felt early and when we logged on it proved it, but then it was daylight outside and the servers weren't on GMT


I almost forgot, I'd better introduce the team who are all, with the exception of me, new to the Hackathons so it is their first experience of it.  The team is Joe, Nyameye, Callum and me, Tim.


The ideas started to flow during our initial brainstorming and we came up with VISNAV, a Visual Navigation tool.


So what is VISNAV and what does it do?



Description:  A Visual Navigation tool that takes an overview map, potentially as far an overview as an outline of the world, an enables information to be displayed at different zoom levels.

Purpose:  To display information about assets located in different geographic locations with the capability to drill down further on each asset and reveal more detailed information.  It can be used as an alternative to more traditional navigation methods such as menus and tree views.

An example of how it would work:  at the highest level the location and name of assets may be visible, then at the next zoom level it may be high level critical information about that asset, and then at the next it could be more detailed information on a specific piece of equipment at that asset.

Who would use it?:  This could be used in a multitude of industries, for example for monitoring and providing information on Data Centres, Power Stations, Oil & Gas Installations, in fact anything where there are multiple assets in multiple locations.  It could also be used for an individual asset.


Work continued into developing the proof of concept solution that included both the PI Vision elements and PI System AF Structure.  Callum focused on PI AF with Joe and Nyameye dealing with PI Vision and the TypeScript to make it all happen.


We used the Google Maps API to provide the mapping functionality, there were some challenges to get it working but after some serious concentration (really, there was), we had a map appear to the sound of 'Hurrah'.


On with the development, the AF structure was put in place.  To show two potential uses, we had a structure for and Oil & Gas FPSO asset, and something totally different, a Car Park!  The FPSO would have the potential to show various assets around the region and drill down from high level production data to more detailed instrumentation data; the Car Park would have the capability to show all the car parks in a city, or a region, show their current state, such as open, closed, full, the number of vehicles in them and so on.

Hackathon AF Structure 1.JPG

Hackathon AF Structure 2.JPGHackathon AF Structure 3.JPG


As time went on the development continued and a proof of concept was put in place.


The proof of concept shows assets on the map, taken from the co-ordinates within stored within AF, and then information on that particular asset on a display tab to the right.


Video of VISNAV

Here's a short video of VISNAV in operation https://youtu.be/nPOFIcTUhQs


Further Development

The initial proof of concept is complete but there's so much potential for this and further development that could take place, watch this space for the next iteration.


GitHub Repository

ServelecTeam3 · GitHub