Getting started with PI Vision Extensibility

Blog Post created by asorokina Employee on Jul 17, 2017

Hi PI Vision geeks,


If you are just getting started creating custom symbols in PI Vision, please check out the attached presentation I put together for an three-day internal workshop.


The presentation is 135 slides which feels like both too much and not enough. The target audience is folks who are familiar with HTML and JavaScript, but not AngularJS or PI Vision Extensibility. So - if you like this initial round of content and would like more on some advanced topics, please let us know of your interest so we can prioritize that work.


Topics covered:

  • How the PI Vision Extensibility model works
  • Basics of AngularJS
  • Creating basic custom symbols
  • Working with 3rd party libraries
  • Handling configuration of symbols
  • Troubleshooting and deployment


We'd love to hear your thoughts and feedback.





Edit: Adding a link to the solution files, GitHub - AnnaPerry/PI-Vision-Workshop-Solution-Files




P.S. It was an absolute blast teaching the first session of the workshop. Here are some of the students' hacking projects:


- Event Frame creation symbol

  Creates Event Frames through PI Web API with input name, start and end time. Useful for annotating time ranges.


- Map Chart

  Shows attributes' current value on mouse hover.


- Audible alert symbol

  Changes color and plays audio alert if the current value is outside the limit.

  Source code: PI-Coresight-Custom-Symbols/Community Samples/OSIsoft/Audible alert at master · osisoft/PI-Coresight-Custom-Symbols · Gi…


- Display Chooser Tool Pane

  Lists a gallery of displays and allows the user to switch among them.