On each student’s node, is a folder, C:\Class Files\, where one can find the solutions for each exercise, a
copy of the Lab PowerPoint presentation, Lab Workbook, PI Vision Extensibility Guide, and any assets
to be used within the exercises, such as images, SVGs, and code snippets.
1.3. Technologies Used
Client-side PI Vision is built on ASP.NET MVC, HTML, CSS, JavaScript, AngularJS, and jQuery.
PI Vision symbols consist of JavaScript, HTML, and CSS. An understanding of AngularJS and jQuery is
helpful, but not necessary.
1.4. Location of Files
The native PI Vision symbols can be found in
the %PIHOME64%\PIVision\Scripts\app\editor\symbols\ folder. Native PI Vision symbols
include the Trend, Value, Table, Vertical Gauge, Horizontal Gauge, Radial Gauge, XY Plot,
and Asset Comparison Table symbols. All native symbols are built on our extensibility model.
Custom symbols should be placed inside of
the %PIHOME64%\PIVision\Scripts\app\editor\symbols\ext\ folder. The PI Vision Web Application
Server will look for any JavaScript files inside of this folder and inject references, in the form of a script
tag <script src="/PIVision/Script/app/editor/symbols/ext/filname.js></script>, to these files inside of
the index.html, after any other native script tags. This code will get loaded and run when the user first
navigates to the PI Vision Web Application in the browser. Similarly, any CSS files placed inside of this
folder will also be injected into the index.html file in the form of a stylesheet link
tag <link href="/PIVision/Scripts/app/editor/symbols/ext/filename.css" rel="stylesheet"/>, before
any native stylesheet link tags.
To keep PI Vision from loading and executing code or CSS files on startup through the index.html file,
you can place them inside of a subfolder within
the %PIHOME64%\PIVision\Scripts\app\editor\symbols\ext\ folder. This may be useful for storing
third party libraries that don't necessarily need to be loaded when the PI Vision Web Application first
loads in the browser.
Additional subfolders can be created within
the %PIHOME64%\PIVision\Scripts\app\editor\symbols\ext\ folder, and files within those folders will
be treated as static public files that can be accessed from the browser.
1.5. Parts of a PI Vision Symbol
PI Vision symbols have three major layers, the implementation, presentation, and configuration.
Implementation
The implementation layer consists of a JavaScript file with three parts: definition, registration, and
initialization. It is convention to name this file after the following pattern: sym-<symbol name>.js. The
8 | P a g e