Whac-A-PI-Geek Game

The original game idea comes from Whac-A-Mole. Once the game begin, the PI Geeks will raise from the bottom. The objective of the game is to keep the PI Geeks down and this is achieve by hitting them with a mouse click, thereby adding to the player’s score.

You can watch a demo video here https://youtu.be/K5xtJMwzOzs.

whackapigeek screenshot.png

Gaming Benefits

You could learn the PI System from hosting and playing this game. PI Vision is the future of PI client. Going forward, other OSIsoft product teams are looking to build on PI Vision. The long-term plan is to integrate everything in one place rather than having multiple tools. For OSIsoft partners, it is not just one of the PI visualization product. It is going to be an integrated platform. This enable many custom applications to add values and capabilities that extend beyond what it is capable of currently. For OSIsoft customers, PI Vision extensibility model has the capability to meet very specific requirements. Since each customer has unique business and processes as well as the way they wanted to see information, PI Vision allows customer to expand the core of PI visualization to meet their business goals.

 

The new pane feature with Whac-A-PI-Geek game show the capability of PI Vision extensibility. It provides an example for developers to imagine what could be possible to build on top of the PI System. It is possible to build any application on top of the PI System to however the developer desires. From the gaming perspective, it generates data from our mouse click after each round of play. Then, the data will be collected and stored in the PI System. With the stored data in the PI Server, it allows PI Asset Framework Analysis to perform calculation from the data-set. With all the data stored inside the PI System, displaying data to the players with PI Vision has never been easier.

Project Motivation

I like to play video games and I’ve wondered how to create one. I also wanted to get better with programming HTML, CSS, JavaScript, JQuery and AngularJS. I figure this is a great opportunity to make a game as well as to demonstrate how game data integrates with the PI System. Playing a game you are building is also exciting because you are playing while building it. I hope this example can inspire you to learn the PI System from a developer perspective.

Technical Details

This game will generate data from players. With the PI Web API, player’s score including the timestamp will be stored inside a PI tag using the PI Data Archive. Username will be stored as an AF element in the PI Asset Framework. The PI Analysis Service will use the saved data to calculate the number of registered players and top score. Further, information will then be retrieve with PI Web API, and display on the screen to the players. HTML, CSS, JavaScript, JQuery and AngularJS were the programming languages to develop the game. It uses PI Vision as a hosting platform. Therefore, players logged in to the PI Vision will be able to play the game from the tool pane.

PI System Architecture

PI Data Archive, PI Asset Framework, PI Analysis Service, PI Web API and PI Vision are the main components of the game. To elaborate, PI Data Archive and PI Asset Framework are the backend components to store the data. PI Analysis Service is the backend computational engine to perform calculation on the stored data. PI Web API is the middleware to send and receive data between the web browser and PI Server. PI Vision is the frontend webpage to display the data. There are many ways to design the PI System. However, the following diagram represents the architecture solution I have chosen for this game. It also specifies the versions of the software installed.

Architecture Diagram.png

Figure 1: Example architecture to host the Whac-A-PI-Geek Game

Setup Instruction

This is an example of how to extend PI Vision in a tool pane. Anybody could setup the game with your own PI Vision. Use the following steps to setup the game:

  1. Download the Github source code from https://github.com/rickysunkwokshing/Whac-A-PI-Geek-Game
  2. Copy the files inside the ext folder and paste them in %PIHOME64%\PIVision\Scripts\app\editor\tool\ext
  3. Create a new AF database “Game” by PI System Explorer
  4. Import AF library from “Game Template.xml” in the AF database “Game”
  5. Import AF structure from “whackaPIGeek Element.xml” with “Create or Update PI Points” option in the AF database “Game”
  6. Allow/Check the AF Database "Game" in the PI Vision admin webpage
  7. Open up Google Chrome or IE and browse to the PI Vision website
  8. Open the Whac-A-PI-Geek tool pane from the PI Vision

PI Vision Security

Kerberos Constrained Delegation

This game only work with Kerberos delegation. Logged in users should be able to double hop authenticate from the web browser to PI Vision and to PI Server. Therefore, Kerberos constrained delegation should be setup for PI Vision to get data from the PI Server and the AF Server. This is also the most secure way to host PI Vision. OSIsoft highly recommended this configuration. For more detail about setting up Kerberos delegation in PI Vision, please visit: https://livelibrary.osisoft.com/LiveLibrary/content/en/vision-v1/GUID-E97D804D-FC5E-4E3F-81D6-8A2F40D20C72#docid=GUID-0CA88969-D6C4-43CA-862F-802F42E6F102&filename=GUID-4B33BAFA-A923-4550-B3DC-CAD83E3C0587.xml&query=&scope=&tid=&resource=&inner_id=&addHistory=true&toc=false&eventType=lcContent.loadDocGUID-0CA88969-D6C4-43CA-862F-802F42E6F102.

Cross-Origin Resource Sharing CORS

If you are building a website with PI Web API, it is common to modify the CORS setting in the AF configuration database in order to access the data within the AF Server and the PI Server. However, since the game and PI Vision are located in the same URL, it is unnecessary to edit the CORS setting for building PI Vision custom symbol or tool pane. As a result, custom application hosting in PI Vision will have an extra layer of protection. For more detail about CORS, please visit: https://pisquare.osisoft.com/videos/1581.

Troubleshooting Hints

You might run into issues when creating PI points, AF elements, AF attributes, and set value to the AF attributes/PI tags with PI Web API. Press F12 on your web browser to investigate the error in console tab. Feel free to ask me questions from the blog post. I will be happy to help.

Live Demo

If you are working at OSIsoft, you can play the game at https://rsun-vm3.dev.osisoft.int/PIVision with the Whac-A-PI-Geek tool pane. Sorry to our partners and customers, as OSIsoft does not have a public PI Vision yet. We are considering this in the future. Stay tuned.

If you would like OSIsoft to host a public PI Vision with example displays and custom symbol, please upvote here https://pisquare.osisoft.com/ideas/3765-public-pi-vision.