--------------------------------------------------------------------------------
/Community Samples/OSIsoft/amcharts-bar/README.MD:
--------------------------------------------------------------------------------
1 | ## Bar Chart symbol
2 |
3 | This symbol is a work in progress. There is no configuration at this moment.
4 |
5 | ## To deploy the symbol:
6 |
7 | 1. In Windows Explorer, navigate to the "%PIHOME%\Coresight\Scripts\app\editor\symbols\ext" on your PI Coresight web server; typically, it's located in "C:\Program Files\PIPC\Coresight\Scripts\app\editor\symbols\ext".
8 | If this folder doesn't exist, create it.
9 |
10 | 2. Place the following symbol files to the .\ext folder
11 |
12 | *sym-amcharts-bar-template.html*
13 |
14 | *sym-amcharts-bar.js*
15 |
16 | 3. Place *bar-chart-icon.png* to the .\ext\Icons directory (create if it doesn't exist)
17 |
18 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/rss symbol/sym-rssfeed-template.html:
--------------------------------------------------------------------------------
1 |
16 |
17 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/event-creation-pane/tool-efpicker-template.html:
--------------------------------------------------------------------------------
1 | Database:
2 |
5 |
6 | Event Template (not working yet):
7 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/navigation-close-current-tab/README.MD:
--------------------------------------------------------------------------------
1 | ## Close Current Tab symbol
2 |
3 | This symbol is a work in progress.
4 |
5 | This symbol is for PI Vision version 2017.
6 |
7 |
8 | ## To deploy the symbol:
9 |
10 | 1. In Windows Explorer, navigate to the "%PIHOME%\PIVision\Scripts\app\editor\symbols\ext" on your PI Vision web server; typically, it's located in "C:\Program Files\PIPC\PIVision\Scripts\app\editor\symbols\ext".
11 | If this folder doesn't exist, create it.
12 |
13 | 2. Place the following symbol files to the .\ext folder
14 |
15 | *sym-nav-template.html*
16 |
17 | *sym-nav-config.html*
18 |
19 | *sym-nav.js*
20 |
21 | 6. Run iisreset
22 |
23 |
24 | ## Quick Demo Video
25 |
26 |
29 |
30 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/event-creation-pane/README.MD:
--------------------------------------------------------------------------------
1 | ## Event Creation Pane (for PI Vision 2017)
2 | This symbol was created by Clark Ennis, Rob Schmitz and Anna Perry. This is a work in progress.
3 |
4 |
5 | ## To deploy the symbol:
6 |
7 | 1. In Windows Explorer, navigate to the "%PIHOME%\PIVision\Scripts\app\editor\tools\ext" on your PI Vision web server; typically, it's located in "C:\Program Files\PIPC\PIVision\Scripts\app\editor\tools\ext".
8 | If this folder doesn't exist, create it.
9 |
10 | 2. Place the following symbol files to the .\ext folder
11 |
12 | *tool-efpicker-template.html*
13 |
14 | *tool-efpicker.js*
15 |
16 | 6. Run iisreset
17 |
18 |
19 | ## Quick Demo Video
20 |
21 |
23 |
24 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/imageurl/sym-imageurl-template.html:
--------------------------------------------------------------------------------
1 |
16 |
17 |
18 |
19 |
20 | Settings
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/dropdown-menu/README.MD:
--------------------------------------------------------------------------------
1 | ## DropDown Menu symbol
2 |
3 | This symbol is a work in progress.
4 |
5 | This symbol is for PI Vision version 2017.
6 |
7 |
9 |
10 | ## To deploy the symbol:
11 |
12 | 1. In Windows Explorer, navigate to the "%PIHOME%\PIVision\Scripts\app\editor\symbols\ext" on your PI Vision web server; typically, it's located in "C:\Program Files\PIPC\PIVision\Scripts\app\editor\symbols\ext".
13 | If this folder doesn't exist, create it.
14 |
15 | 2. Place the following symbol files to the .\ext folder
16 |
17 | *sym-dropdown-menu-template.html*
18 |
19 | *sym-dropdown-menu-config.html*
20 |
21 | *sym-dropdown-menu.js*
22 |
23 | *dropdown-menu.css*
24 |
25 | 3. Place all files with *.png* extension to the .\ext\Icons directory (create if it doesn't exist)
26 | 6. Run iisreset
27 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/navigation-close-current-tab/sym-nav.js:
--------------------------------------------------------------------------------
1 | (function (PV) {
2 | "use strict";
3 |
4 | function symbolVis() { };
5 | PV.deriveVisualizationFromBase(symbolVis);
6 |
7 | var definition = {
8 | typeName: "nav",
9 | visObjectType: symbolVis,
10 | datasourceBehavior: PV.Extensibility.Enums.DatasourceBehaviors.Single,
11 | getDefaultConfig: function(){
12 | return {
13 | Height: 150,
14 | Width: 150,
15 | Text: "Text",
16 | BackgroundColor: "",
17 | TextColor: "#FFFFFF"
18 |
19 | }
20 | } ,
21 | configOptions: function(){
22 | return [{
23 | title:"Format",
24 | mode: "format"
25 |
26 | }]
27 | }
28 | }
29 |
30 | symbolVis.prototype.init = function(scope, elem) {
31 |
32 | scope.closeCurrentTab = function(){
33 | window.close();
34 |
35 | }
36 | };
37 |
38 | PV.symbolCatalog.register(definition);
39 | })(window.PIVisualization);
40 |
--------------------------------------------------------------------------------
/tutorials/README.md:
--------------------------------------------------------------------------------
1 | # Adding Custom Symbols to PI Vision
2 | ## About
3 | This repository is set up to help you learn how to add a custom symbol, created with JavaScript and HTML, to PI Vision. You will 'register' a custom symbol to add it to the available 'symbol library' and learn how to access data for the symbol when it is placed on a display. You will also learn how the symbol and application can interact with each other in ways such as responding to time range changes. Finally, you will see how the symbol is persisted with the display and hooked into the undo/redo system.
4 |
5 | ## Creating new symbols
6 | Each section below is used to walkthrough the creation of a specific custom symbol. It is recommended to go through the simple value symbol instructions first. Each set of instructions is meant to be run as a copy and paste exercise.
7 |
8 | * [Simple Value Symbol Instructions](/tutorials/simplevalue/)
9 | * [TimeSeries Chart Instructions](/tutorials/timeserieschart/)
10 | * [Liquid Gauge (d3) Instructions](/tutorials/liquidgauge/)
--------------------------------------------------------------------------------
/Community Samples/Amway.China/namevaluetable/README.md:
--------------------------------------------------------------------------------
1 | Follow these simple instructions to install this custom symbol; the overall process should only take a minutes.
2 |
3 | 1. In Windows Explorer, navigate to the "PIPC\PIVision" installation folder on your PI Vision server; typically, it's located in "C:\Program Files\PIPC\PIVision"
4 |
5 | 2. From within the folder named "PIVision", navigate to the "\Scripts\app\editor\symbols" sub-folder.
6 |
7 | 3. Within the folder named "symbols", if there is not already a folder called "ext", create a folder called "ext".
8 |
9 | 4. paste into the "ext" folder the "sym-namevaluetable.js" and "sym-namevaluetable-template".
10 |
11 | 5. paste into the "ext" folder , sub folder "icons" "namevaluetable.png".
12 |
13 | 6. new event frame which have name and value, click the "namevaluetable" and drap the event frame attributes into draw area in PI Vision.
14 |
15 | The next time you open a web browser and navigate to PI Vision and create a new PI Vision display, you will see this new symbol appear in the top-left-hand corner of the PI Vision display editor.
--------------------------------------------------------------------------------
/Community Samples/Amway.China/simplevalue/README.md:
--------------------------------------------------------------------------------
1 | Follow these simple instructions to install this custom symbol; the overall process should only take a minutes.
2 |
3 | 1. In Windows Explorer, navigate to the "PIPC\PIVision" installation folder on your PI Vision server; typically, it's located in "C:\Program Files\PIPC\PIVision"
4 |
5 | 2. From within the folder named "PIVision", navigate to the "\Scripts\app\editor\symbols" sub-folder.
6 |
7 | 3. Within the folder named "symbols", if there is not already a folder called "ext", create a folder called "ext".
8 |
9 | 4. paste into the "ext" folder the "sym-simplevalue", "sym-simplevalue-config.html" , "sym-simplevalue-template.html".
10 |
11 | 5. paste into the "ext" folder sub folder "icons" to include "simplevalue.png" which is the icon of simplevalue.
12 |
13 | 6. create an Element Attribute "LineCount" , give value "16" as the DataSource in PI System Explorer.
14 |
15 | The next time you open a web browser and navigate to PI Vision and create a new PI Vision display, you will see this new symbol appear in the top-left-hand corner of the PI Vision display editor.
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/navigation-close-current-tab/sym-nav-config.html:
--------------------------------------------------------------------------------
1 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/README.md:
--------------------------------------------------------------------------------
1 | # OSIsoft Samples
2 | ## About
3 | This section contains samples provided by [OSIsoft](http://www.osisoft.com/) for use by the community.
4 |
5 | ## Samples
6 | * [HTML5 Video](/Community%20Samples/OSIsoft/HTML5video)
7 | * [amcharts-gauge](/Community%20Samples/OSIsoft/amcharts-gauge)
8 | * [amcharts-histogram](/Community%20Samples/OSIsoft/amcharts-histogram)
9 | * [amcharts-pie](/Community%20Samples/OSIsoft/amcharts-pie)
10 | * [amcharts-radar](/Community%20Samples/OSIsoft/amcharts-radar)
11 | * [amcharts-trend](/Community%20Samples/OSIsoft/amcharts-trend)
12 | * [amcharts-xyplot](/Community%20Samples/OSIsoft/amcharts-xyplot)
13 | * [embedWebPage](/Community%20Samples/OSIsoft/embedWebPage)
14 | * [Screenshot URL Symbol](/Community%20Samples/OSIsoft/imageUrl)
15 | * [Playback Control](/Community%20Samples/OSIsoft/playback%20control)
16 | * [plotly-3dsurface](/Community%20Samples/OSIsoft/plotly-3dsurface)
17 | * [RSS Symbol](/Community%20Samples/OSIsoft/rss%20symbol)
18 | * [snapshotDataTable](/Community%20Samples/OSIsoft/snapshotDataTable)
19 | * [timeSeriesDataTable](/Community%20Samples/OSIsoft/timeSeriesDataTable)
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/pareto/README.MD:
--------------------------------------------------------------------------------
1 |
2 | ## Pareto chart symbol
3 |
4 |
5 | This symbol is for PI Vision version 2017 and 2017 R2.
6 | This is just a prototype, no bad data validation or error reporting. Use it with digital type data.
7 |
8 |
9 |
11 |
12 | ## To deploy the symbol:
13 |
14 | 1. In Windows Explorer, navigate to the "%PIHOME%\PIVision\Scripts\app\editor\symbols\ext" on your PI Vision web server; typically, it's located in "C:\Program Files\PIPC\PIVision\Scripts\app\editor\symbols\ext".
15 | If this folder doesn't exist, create it.
16 |
17 | 2. Place the following symbol files to the .\ext folder
18 |
19 | *sym-pareto-template.html*
20 |
21 | *sym-pareto.js*
22 |
23 | 3. Download amCharts Javascript library from https://www.amcharts.com/download/
24 | Place *serial.js* and *amcharts.js* to .\ext\libraries folder
25 |
26 | 4. Place *pareto-example.png* to the .ext\Icons\ folder (create it if it doesn't exist)
27 | Chart Icon credit: Pareto diagram by Kirby Wu from the Noun Project
28 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/dropdown-menu/sym-dropdown-menu.js:
--------------------------------------------------------------------------------
1 | (function (PV) {
2 | 'use strict';
3 |
4 | function symbolVis() { }
5 | PV.deriveVisualizationFromBase(symbolVis);
6 |
7 | var definition = {
8 | typeName: 'dropdown-menu',
9 | visObjectType: symbolVis,
10 | datasourceBehavior: PV.Extensibility.Enums.DatasourceBehaviors.Single,
11 | getDefaultConfig: function() {
12 | return {
13 | Height: 150,
14 | Width: 150,
15 | Links: [],
16 | headerLink: { Name: 'Dropdown', Url: '', IsNewTab: true }
17 | }
18 | },
19 | configOptions: function () {
20 | return [{
21 | title: 'Format Symbol',
22 | mode: 'format'
23 | }];
24 | }
25 | };
26 |
27 | symbolVis.prototype.init = function(scope) {
28 | scope.config.AddNewLink = function() {
29 | scope.config.Links.push({ Name: '', Url: '', IsNewTab: true });
30 | }
31 |
32 | scope.config.deleteRow = function(index) {
33 | if (scope.config.Links.length > 0) {
34 | scope.config.Links.splice(index, 1);
35 | }
36 | }
37 | };
38 |
39 | PV.symbolCatalog.register(definition);
40 | })(window.PIVisualization);
41 |
--------------------------------------------------------------------------------
/Community Samples/Amway.China/linechart/README.md:
--------------------------------------------------------------------------------
1 | Follow these simple instructions to install this custom symbol; the overall process should only take a minutes.
2 |
3 | 1. In Windows Explorer, navigate to the "PIPC\PIVision" installation folder on your PI Vision server; typically, it's located in "C:\Program Files\PIPC\PIVision"
4 |
5 | 2. From within the folder named "PIVision", navigate to the "\Scripts\app\editor\symbols" sub-folder.
6 |
7 | 3. Within the folder named "symbols", if there is not already a folder called "ext", create a folder called "ext".
8 |
9 | 4. The Symbol will use hightchart, you pasted "hightcharts.js" into "ext" folder directly, you will find the hightcharts.js in svn "linechart" folder, the hightchart version is 4.2.3.
10 |
11 | 5. Paste into the "ext" folder the "sym-linechart.js" and "sym-linechart-template.html".
12 |
13 | 6. In PI System Explorer, Create Element Attribute, Value Type: String, Value [{name: '短暂停机123',data: [20]}, {name: '包装瑕疵材料',data: [12]}, {name: '生产前准备',data: [7]}]
14 |
15 | The next time you open a web browser and navigate to PI Vision and create a new PI Vision display, you will see this new symbol appear in the top-left-hand corner of the PI Vision display editor.
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/snapshotDataTable/README.md:
--------------------------------------------------------------------------------
1 | Follow these simple instructions to install this custom symbol; the overall process should only take a minutes.
2 |
3 | 1. In Windows Explorer, navigate to the "PIPC\PIVision" installation folder on your PI Vision server; typically, it's located in "C:\Program Files\PIPC\PIVision"
4 |
5 | 2. From within the folder named "PIVision", navigate to the "\Scripts\app\editor\symbols" sub-folder.
6 |
7 | 3. Within the folder named "symbols", if there is not already a folder called "ext", create a folder called "ext".
8 |
9 | 4. Now that the "ext" folder exists, or already exits, open it, and paste into the "ext" folder the one .js and two .html files contained in the custom symbol .ZIP folder.
10 |
11 | 5. Within the folder named "ext", if there is not already a folder called "Icons", create a folder called "Icons".
12 |
13 | 6. Now that the "Icons" folder exists, or already exits, open it, and paste into the "Icons" folder the one .png image file contained in the custom symbol .ZIP folder.
14 |
15 | The next time you open a web browser and navigate to PI Vision and create a new PI Vision display, you will see this new symbol appear in the top-left-hand corner of the PI Vision display editor.
--------------------------------------------------------------------------------
/Community Samples/Amway.China/statuslight/README.md:
--------------------------------------------------------------------------------
1 | Follow these simple instructions to install this custom symbol; the overall process should only take a minutes.
2 |
3 | 1. In Windows Explorer, navigate to the "PIPC\PIVision" installation folder on your PI Vision server; typically, it's located in "C:\Program Files\PIPC\PIVision"
4 |
5 | 2. From within the folder named "PIVision", navigate to the "\Scripts\app\editor\symbols" sub-folder.
6 |
7 | 3. Within the folder named "symbols", if there is not already a folder called "ext", create a folder called "ext".
8 |
9 | 4. paste into the "ext" folder "sym-statuslight.js", "sym-statuslight-config.html", "sym-statuslight-template" which are contained in the "statuslight" folder.
10 |
11 | 5. paste into the "ext" folder two sub folders,
12 | first sub folder "icons" contains "green.png" which is the icon of statuslight;
13 | second folder "imgs" contains "green.png", "red.png", "white.png", "yellow.png".
14 |
15 | 6. create an Elements Attribute "LineState", give the value "10" as the data source in PI System Explorer.
16 |
17 | The next time you open a web browser and navigate to PI Vision and create a new PI Vision display, you will see this new symbol appear in the top-left-hand corner of the PI Vision display editor.
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/HTML5video/README.md:
--------------------------------------------------------------------------------
1 | Follow these simple instructions to install this custom symbol; the overall process should only take a minutes.
2 |
3 | 1. In Windows Explorer, navigate to the "PIPC\PIVision" installation folder on your PI Vision server; typically, it's located in "C:\Program Files\PIPC\PIVision"
4 |
5 | 2. From within the folder named "PIVision", navigate to the "\Scripts\app\editor\symbols" sub-folder.
6 |
7 | 3. Within the folder named "symbols", if there is not already a folder called "ext", create a folder called "ext".
8 |
9 | 4. Now that the "ext" folder exists, or already exits, open it, and paste into the "ext" folder the one .js and two .html files contained in the custom symbol .ZIP folder that you were sent.
10 |
11 | 5. Within the folder named "ext", if there is not already a folder called "Icons", create a folder called "Icons".
12 |
13 | 6. Now that the "Icons" folder exists, or already exits, open it, and paste into the "Icons" folder the one .png image file contained in the custom symbol .ZIP folder that you were sent.
14 |
15 | The next time you open a web browser and navigate to PI Vision and create a new PI Vision display, you will see this new symbol appear in the top-left-hand corner of the PI Vision display editor.
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/embedWebPage/README.md:
--------------------------------------------------------------------------------
1 | Follow these simple instructions to install this custom symbol; the overall process should only take a minutes.
2 |
3 | 1. In Windows Explorer, navigate to the "PIPC\PIVision" installation folder on your PI Vision server; typically, it's located in "C:\Program Files\PIPC\PIVision"
4 |
5 | 2. From within the folder named "PIVision", navigate to the "\Scripts\app\editor\symbols" sub-folder.
6 |
7 | 3. Within the folder named "symbols", if there is not already a folder called "ext", create a folder called "ext".
8 |
9 | 4. Now that the "ext" folder exists, or already exits, open it, and paste into the "ext" folder the one .js and two .html files contained in the custom symbol .ZIP folder that you were sent.
10 |
11 | 5. Within the folder named "ext", if there is not already a folder called "Icons", create a folder called "Icons".
12 |
13 | 6. Now that the "Icons" folder exists, or already exits, open it, and paste into the "Icons" folder the one .png image file contained in the custom symbol .ZIP folder that you were sent.
14 |
15 | The next time you open a web browser and navigate to PI Vision and create a new PI Vision display, you will see this new symbol appear in the top-left-hand corner of the PI Vision display editor.
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/timeSeriesDataTable/README.md:
--------------------------------------------------------------------------------
1 | Follow these simple instructions to install this custom symbol; the overall process should only take a minutes.
2 |
3 | 1. In Windows Explorer, navigate to the "PIPC\PIVision" installation folder on your PI Vision server; typically, it's located in "C:\Program Files\PIPC\PIVision"
4 |
5 | 2. From within the folder named "PIVision", navigate to the "\Scripts\app\editor\symbols" sub-folder.
6 |
7 | 3. Within the folder named "symbols", if there is not already a folder called "ext", create a folder called "ext".
8 |
9 | 4. Now that the "ext" folder exists, or already exits, open it, and paste into the "ext" folder the one .js and two .html files contained in the custom symbol .ZIP folder that you were sent.
10 |
11 | 5. Within the folder named "ext", if there is not already a folder called "Icons", create a folder called "Icons".
12 |
13 | 6. Now that the "Icons" folder exists, or already exits, open it, and paste into the "Icons" folder the one .png image file contained in the custom symbol .ZIP folder that you were sent.
14 |
15 | The next time you open a web browser and navigate to PI Vision and create a new PI Vision display, you will see this new symbol appear in the top-left-hand corner of the PI Vision display editor.
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/playback control/tool-playback-template.html:
--------------------------------------------------------------------------------
1 |
16 |
17 |
Playback
18 | Number of increments:
19 | Time to jump:
20 | Playback speed:
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/amcharts-linechart/README.MD:
--------------------------------------------------------------------------------
1 | ## Line Chart symbol
2 |
3 | This symbol is a work in progress.
4 |
5 | This symbol is for PI Vision version 2017.
6 |
7 |
9 |
10 | ## To deploy the symbol:
11 |
12 | 1. In Windows Explorer, navigate to the "%PIHOME%\PIVision\Scripts\app\editor\symbols\ext" on your PI Vision web server; typically, it's located in "C:\Program Files\PIPC\PIVision\Scripts\app\editor\symbols\ext".
13 | If this folder doesn't exist, create it.
14 |
15 | 2. Place the following symbol files to the .\ext folder
16 |
17 | *sym-amcharts-linechart-template.html*
18 |
19 | *sym-amcharts-linechart-config.html*
20 |
21 | *sym-amcharts-linechart.js*
22 |
23 | 3. Place all files with *.png* extension to the .\ext\Icons directory (create if it doesn't exist)
24 | 4. Place the Underscore library (*underscore-min.js*) to the .\ext\libraries (create if doesn't exist). The latest version of Underscore can be downloaded from http://underscorejs.org/.
25 | 5. Download the amCharts JavaScript library from https://www.amcharts.com/download/ and copy *amcharts.js*, *dark.js* and *serial.js* files to the .\ext\libraries folder.
26 | 6. Run iisreset
27 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/timeSeriesDataTable/sym-timeSeriesDataTable-template.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/gantt/README.MD:
--------------------------------------------------------------------------------
1 | ## Gantt symbol
2 |
3 |
4 | This symbol is for PI Vision version 2017 and 2017 R2.
5 | Warning! This is just a prototype, no bad data validation or error reporting. Use it with digital type data.
6 |
7 |
8 |
10 |
11 | ## To deploy the symbol:
12 |
13 | 1. In Windows Explorer, navigate to the "%PIHOME%\PIVision\Scripts\app\editor\symbols\ext" on your PI Vision web server; typically, it's located in "C:\Program Files\PIPC\PIVision\Scripts\app\editor\symbols\ext".
14 | If this folder doesn't exist, create it.
15 |
16 | 2. Place the following symbol files to the .\ext folder
17 |
18 | *sym-gantt-template.html*
19 |
20 | *sym-gantt-config.html*
21 |
22 | *sym-gantt.js*
23 |
24 | 3. Download amCharts Javascript library from https://www.amcharts.com/download/
25 | Place *serial.js*, *gantt.js* and *amcharts.js* to .\ext\libraries folder
26 | Rename gantt.js to z_gantt.js. Here is why:
27 | To work properly AmCharts libraries need to be loaded in this specific order: amcharts.js, serial.js and then gantt.js
28 | Since third-party libraries in PI Vision are loaded (automatically) *in alphabetical order*, gantt.js sneaks its way in before serial.js.
29 | This results in console error "Cannot read property "construct" of undefined".
30 |
31 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/plotly-3dsurface/sym-plotly-3dsurface-config.html:
--------------------------------------------------------------------------------
1 |
16 |
17 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/plotly-3dsurface/README.md:
--------------------------------------------------------------------------------
1 | Follow these simple instructions to install this custom symbol; the overall process should only take a minutes.
2 |
3 | 1. In Windows Explorer, navigate to the "PIPC\PIVision" installation folder on your PI Vision server; typically, it's located in "C:\Program Files\PIPC\PIVision"
4 |
5 | 2. From within the folder named "PIVision", navigate to the "\Scripts\app\editor\symbols" sub-folder.
6 |
7 | 3. Within the folder named "symbols", if there is not already a folder called "ext", create a folder called "ext".
8 |
9 | 4. This is a symbol that uses the free plotly library; thus, download the plotly library .js file, located at https://cdn.plot.ly/plotly-latest.min.js. Now that the "ext" folder exists, or already exits, copy and paste the plotly-latest.min.js file that you just downloaded into a subfolder in the "ext" folder named "libraries".
10 |
11 | 5. Now that the "ext" folder exists, or already exits, open it, and paste into the "ext" folder the one .js and two .html files contained in the custom symbol .ZIP folder that you were sent.
12 |
13 | 6. Within the folder named "ext", if there is not already a folder called "Icons", create a folder called "Icons".
14 |
15 | 7. Now that the "Icons" folder exists, or already exits, open it, and paste into the "Icons" folder the one .png image file contained in the custom symbol .ZIP folder that you were sent.
16 |
17 | The next time you open a web browser and navigate to PI Vision and create a new PI Vision display, you will see this new symbol appear in the top-left-hand corner of the PI Vision display editor.
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/amcharts-gauge/README.md:
--------------------------------------------------------------------------------
1 | Follow these simple instructions to install this custom symbol; the overall process should only take a minutes.
2 |
3 | 1. In Windows Explorer, navigate to the "PIPC\PIVision" installation folder on your PI Vision server; typically, it's located in "C:\Program Files\PIPC\PIVision"
4 |
5 | 2. From within the folder named "PIVision", navigate to the "\Scripts\app\editor\symbols" sub-folder.
6 |
7 | 3. Within the folder named "symbols", if there is not already a folder called "ext", create a folder called "ext".
8 |
9 | 4. If this a symbol that uses the amCharts library (if so, the symbol will contain "amcharts" in the name), download the amcharts JavaScript Charts library zip file from https://www.amcharts.com/download/. Now that the "ext" folder exists, or already exits, extract the contents of the .ZIP file that you just downloaded into the "ext" folder. The "ext" folder should now contain folders for "images", "lang", "patterns", "plugins", and "themes", and you should have just pasted in the following .js files: amcharts.js, funnel.js, gauge.js, pie.js, radar.js, serial.js, and xy.js.
10 |
11 | 5. Now that the "ext" folder exists, or already exits, open it, and paste into the "ext" folder the one .js and two .html files contained in the custom symbol .ZIP folder that you were sent.
12 |
13 | 6. Within the folder named "ext", if there is not already a folder called "Icons", create a folder called "Icons".
14 |
15 | 7. Now that the "Icons" folder exists, or already exits, open it, and paste into the "Icons" folder the one .png image file contained in the custom symbol .ZIP folder that you were sent.
16 |
17 | The next time you open a web browser and navigate to PI Vision and create a new PI Vision display, you will see this new symbol appear in the top-left-hand corner of the PI Vision display editor.
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/amcharts-pie/README.md:
--------------------------------------------------------------------------------
1 | Follow these simple instructions to install this custom symbol; the overall process should only take a minutes.
2 |
3 | 1. In Windows Explorer, navigate to the "PIPC\PIVision" installation folder on your PI Vision server; typically, it's located in "C:\Program Files\PIPC\PIVision"
4 |
5 | 2. From within the folder named "PIVision", navigate to the "\Scripts\app\editor\symbols" sub-folder.
6 |
7 | 3. Within the folder named "symbols", if there is not already a folder called "ext", create a folder called "ext".
8 |
9 | 4. If this a symbol that uses the amCharts library (if so, the symbol will contain "amcharts" in the name), download the amcharts JavaScript Charts library zip file from https://www.amcharts.com/download/. Now that the "ext" folder exists, or already exits, extract the contents of the .ZIP file that you just downloaded into a subfolder in the "ext" folder named "libraries". The "libraries" folder should now contain folders for "images", "lang", "patterns", "plugins", and "themes", and you should have just pasted in the following .js files: amcharts.js, funnel.js, gauge.js, pie.js, radar.js, serial.js, and xy.js.
10 |
11 | 5. Now that the "ext" folder exists, or already exits, open it, and paste into the "ext" folder the one .js and two .html files contained in the custom symbol .ZIP folder that you were sent.
12 |
13 | 6. Within the folder named "ext", if there is not already a folder called "Icons", create a folder called "Icons".
14 |
15 | 7. Now that the "Icons" folder exists, or already exits, open it, and paste into the "Icons" folder the one .png image file contained in the custom symbol .ZIP folder that you were sent.
16 |
17 | The next time you open a web browser and navigate to PI Vision and create a new PI Vision display, you will see this new symbol appear in the top-left-hand corner of the PI Vision display editor.
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/amcharts-radar/README.md:
--------------------------------------------------------------------------------
1 | Follow these simple instructions to install this custom symbol; the overall process should only take a minutes.
2 |
3 | 1. In Windows Explorer, navigate to the "PIPC\PIVision" installation folder on your PI Vision server; typically, it's located in "C:\Program Files\PIPC\PIVision"
4 |
5 | 2. From within the folder named "PIVision", navigate to the "\Scripts\app\editor\symbols" sub-folder.
6 |
7 | 3. Within the folder named "symbols", if there is not already a folder called "ext", create a folder called "ext".
8 |
9 | 4. If this a symbol that uses the amCharts library (if so, the symbol will contain "amcharts" in the name), download the amcharts JavaScript Charts library zip file from https://www.amcharts.com/download/. Now that the "ext" folder exists, or already exits, extract the contents of the .ZIP file that you just downloaded into a subfolder in the "ext" folder named "libraries". The "libraries" folder should now contain folders for "images", "lang", "patterns", "plugins", and "themes", and you should have just pasted in the following .js files: amcharts.js, funnel.js, gauge.js, pie.js, radar.js, serial.js, and xy.js.
10 |
11 | 5. Now that the "ext" folder exists, or already exits, open it, and paste into the "ext" folder the one .js and two .html files contained in the custom symbol .ZIP folder that you were sent.
12 |
13 | 6. Within the folder named "ext", if there is not already a folder called "Icons", create a folder called "Icons".
14 |
15 | 7. Now that the "Icons" folder exists, or already exits, open it, and paste into the "Icons" folder the one .png image file contained in the custom symbol .ZIP folder that you were sent.
16 |
17 | The next time you open a web browser and navigate to PI Vision and create a new PI Vision display, you will see this new symbol appear in the top-left-hand corner of the PI Vision display editor.
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/amcharts-trend/README.md:
--------------------------------------------------------------------------------
1 | Follow these simple instructions to install this custom symbol; the overall process should only take a minutes.
2 |
3 | 1. In Windows Explorer, navigate to the "PIPC\PIVision" installation folder on your PI Vision server; typically, it's located in "C:\Program Files\PIPC\PIVision"
4 |
5 | 2. From within the folder named "PIVision", navigate to the "\Scripts\app\editor\symbols" sub-folder.
6 |
7 | 3. Within the folder named "symbols", if there is not already a folder called "ext", create a folder called "ext".
8 |
9 | 4. If this a symbol that uses the amCharts library (if so, the symbol will contain "amcharts" in the name), download the amcharts JavaScript Charts library zip file from https://www.amcharts.com/download/. Now that the "ext" folder exists, or already exits, extract the contents of the .ZIP file that you just downloaded into a subfolder in the "ext" folder named "libraries". The "libraries" folder should now contain folders for "images", "lang", "patterns", "plugins", and "themes", and you should have just pasted in the following .js files: amcharts.js, funnel.js, gauge.js, pie.js, radar.js, serial.js, and xy.js.
10 |
11 | 5. Now that the "ext" folder exists, or already exits, open it, and paste into the "ext" folder the one .js and two .html files contained in the custom symbol .ZIP folder that you were sent.
12 |
13 | 6. Within the folder named "ext", if there is not already a folder called "Icons", create a folder called "Icons".
14 |
15 | 7. Now that the "Icons" folder exists, or already exits, open it, and paste into the "Icons" folder the one .png image file contained in the custom symbol .ZIP folder that you were sent.
16 |
17 | The next time you open a web browser and navigate to PI Vision and create a new PI Vision display, you will see this new symbol appear in the top-left-hand corner of the PI Vision display editor.
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/amcharts-xyplot/README.md:
--------------------------------------------------------------------------------
1 | Follow these simple instructions to install this custom symbol; the overall process should only take a minutes.
2 |
3 | 1. In Windows Explorer, navigate to the "PIPC\PIVision" installation folder on your PI Vision server; typically, it's located in "C:\Program Files\PIPC\PIVision"
4 |
5 | 2. From within the folder named "PIVision", navigate to the "\Scripts\app\editor\symbols" sub-folder.
6 |
7 | 3. Within the folder named "symbols", if there is not already a folder called "ext", create a folder called "ext".
8 |
9 | 4. If this a symbol that uses the amCharts library (if so, the symbol will contain "amcharts" in the name), download the amcharts JavaScript Charts library zip file from https://www.amcharts.com/download/. Now that the "ext" folder exists, or already exits, extract the contents of the .ZIP file that you just downloaded into a subfolder in the "ext" folder named "libraries". The "libraries" folder should now contain folders for "images", "lang", "patterns", "plugins", and "themes", and you should have just pasted in the following .js files: amcharts.js, funnel.js, gauge.js, pie.js, radar.js, serial.js, and xy.js.
10 |
11 | 5. Now that the "ext" folder exists, or already exits, open it, and paste into the "ext" folder the one .js and two .html files contained in the custom symbol .ZIP folder that you were sent.
12 |
13 | 6. Within the folder named "ext", if there is not already a folder called "Icons", create a folder called "Icons".
14 |
15 | 7. Now that the "Icons" folder exists, or already exits, open it, and paste into the "Icons" folder the one .png image file contained in the custom symbol .ZIP folder that you were sent.
16 |
17 | The next time you open a web browser and navigate to PI Vision and create a new PI Vision display, you will see this new symbol appear in the top-left-hand corner of the PI Vision display editor.
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/amcharts-histogram/README.md:
--------------------------------------------------------------------------------
1 | Follow these simple instructions to install this custom symbol; the overall process should only take a minutes.
2 |
3 | 1. In Windows Explorer, navigate to the "PIPC\PIVision" installation folder on your PI Vision server; typically, it's located in "C:\Program Files\PIPC\PIVision"
4 |
5 | 2. From within the folder named "PIVision", navigate to the "\Scripts\app\editor\symbols" sub-folder.
6 |
7 | 3. Within the folder named "symbols", if there is not already a folder called "ext", create a folder called "ext".
8 |
9 | 4. If this a symbol that uses the amCharts library (if so, the symbol will contain "amcharts" in the name), download the amcharts JavaScript Charts library zip file from https://www.amcharts.com/download/. Now that the "ext" folder exists, or already exits, extract the contents of the .ZIP file that you just downloaded into a subfolder in the "ext" folder named "libraries". The "libraries" folder should now contain folders for "images", "lang", "patterns", "plugins", and "themes", and you should have just pasted in the following .js files: amcharts.js, funnel.js, gauge.js, pie.js, radar.js, serial.js, and xy.js.
10 |
11 | 5. Now that the "ext" folder exists, or already exits, open it, and paste into the "ext" folder the one .js and two .html files contained in the custom symbol .ZIP folder that you were sent.
12 |
13 | 6. Within the folder named "ext", if there is not already a folder called "Icons", create a folder called "Icons".
14 |
15 | 7. Now that the "Icons" folder exists, or already exits, open it, and paste into the "Icons" folder the one .png image file contained in the custom symbol .ZIP folder that you were sent.
16 |
17 | The next time you open a web browser and navigate to PI Vision and create a new PI Vision display, you will see this new symbol appear in the top-left-hand corner of the PI Vision display editor.
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/single-manual-data-entry/sym-updatevalue-config.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Community Samples/Amway.China/simplevalue/sym-simplevalue.js:
--------------------------------------------------------------------------------
1 | /***************************************************************************
2 | Copyright 2016-2017 OSIsoft, LLC.
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and
14 | limitations under the License.
15 | ***************************************************************************/
16 | window.PIVisualization = window.PIVisualization || {};
17 | window.PIVisualization.ClientSettings = window.PIVisualization.ClientSettings || {};
18 | (function (CS) {
19 | function symbolVis() { }
20 | CS.deriveVisualizationFromBase(symbolVis);
21 |
22 | symbolVis.prototype.init = function (scope) {
23 | this.onDataUpdate = dataUpdate;
24 |
25 | function dataUpdate(data) {
26 | if(data) {
27 | scope.value = data.Value;
28 | }
29 | }
30 | };
31 |
32 | var definition = {
33 | typeName: 'simplevalue',
34 | datasourceBehavior: CS.Extensibility.Enums.DatasourceBehaviors.Single,
35 | iconUrl: '/Scripts/app/editor/symbols/ext/icons/simplevalue.png',
36 | visObjectType: symbolVis,
37 | getDefaultConfig: function() {
38 | return {
39 | DataShape: 'Value',
40 | Height: 150,
41 | Width: 150,
42 | TextColor: 'rgb(0,0,0)'
43 | };
44 | },
45 | configTitle: 'Format Symbol',
46 | StateVariables: [ 'MultistateColor' ]
47 | };
48 |
49 | CS.symbolCatalog.register(definition);
50 | })(window.PIVisualization);
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/af-table/README.MD:
--------------------------------------------------------------------------------
1 | ## AF Table symbol
2 |
3 | This symbol prototype is for PI Vision version 2017.
4 |
5 |
6 | ## To deploy the symbol:
7 |
8 | 1. In Windows Explorer, navigate to the "%PIHOME%\PIVision\Scripts\app\editor\symbols\ext" on your PI Vision web server; typically, it's located in "C:\Program Files\PIPC\PIVision\Scripts\app\editor\symbols\ext".
9 | If this folder doesn't exist, create it.
10 |
11 | 2. Place the following symbol files to the .\ext folder
12 |
13 | *sym-aftable-template.html*
14 |
15 | *sym-aftable-config.html*
16 |
17 | *sym-aftable.js*
18 |
19 | 3. Download the [smart table js library](http://lorenzofox3.github.io/smart-table-website/#top) and place it under ext\libraries
20 | 4. Place bootstrap.css and place it to ext\libraries
21 | 5. Create subfolders under the PIVision directory: PIPC\PIVision\template\smart-table
22 | Place *pagination.html* into this directory
23 | 6. Edit \PIPC\PIVision\Scripts\app\editor\PIVisualization.app.js to inject smart-table into the angular app module:
24 |
25 | `angular.module(APPNAME, ['ngAnimate', 'ngSanitize', 'Chronicle', 'osi.PiToast', 'PIVisualization.routing', 'kendo.directives', 'smart-table'])`
26 |
27 |
28 | ## A word about requirements
29 |
30 | ### Client side configuration
31 | This symbol uses PI Web API to send data to the PI System.
32 |
33 | This means that if you use a self-signed certificate for PI Web API, each client machine needs to install that certificate.
34 | Here is a video on how to install certificates for PI Web API: https://www.youtube.com/watch?list=PLMcG1Hs2JbcvGH0VCE4o-CjjaUkTiW5_D&v=KvYsF5MMQMU#t=04m18s
35 |
36 | ### Server side configuration
37 | And since the PI Web API requests are made from within PI Vision server, you may (read: definitely will) run into CORS issues.
38 | I found the following video helpful when trying get CORS working without having to throw my server security wide open
39 | (i.e. without CorsHeaders=\*, CorsMethods=\* and CorsOrigins=*): https://www.youtube.com/watch?v=EyxieRFRPRw&index=10&list=PLMcG1Hs2JbcvGH0VCE4o-CjjaUkTiW5_D
40 |
41 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/advancedDataTable/sym-advancedTimeSeriesDataTable-template.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/tutorials/simplevalue/sym-simplevalue.js:
--------------------------------------------------------------------------------
1 | /***************************************************************************
2 | Copyright 2016-2017 OSIsoft, LLC.
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and
14 | limitations under the License.
15 | ***************************************************************************/
16 |
17 | (function (CS) {
18 | function symbolVis() { }
19 | CS.deriveVisualizationFromBase(symbolVis);
20 |
21 | symbolVis.prototype.init = function (scope) {
22 | this.onDataUpdate = dataUpdate;
23 |
24 | function dataUpdate(data) {
25 | if(data) {
26 | scope.value = data.Value;
27 | scope.time = data.Time;
28 | if(data.Label) {
29 | scope.label = data.Label;
30 | }
31 | }
32 | }
33 | };
34 |
35 | var definition = {
36 | typeName: 'simplevalue',
37 | datasourceBehavior: CS.Extensibility.Enums.DatasourceBehaviors.Single,
38 | visObjectType: symbolVis,
39 | getDefaultConfig: function() {
40 | return {
41 | DataShape: 'Value',
42 | Height: 150,
43 | Width: 150,
44 | BackgroundColor: 'rgb(255,0,0)',
45 | TextColor: 'rgb(0,255,0)',
46 | ShowLabel: true,
47 | ShowTime: false
48 | };
49 | },
50 | configTitle: 'Format Symbol',
51 | StateVariables: [ 'MultistateColor' ]
52 | };
53 |
54 | CS.symbolCatalog.register(definition);
55 | })(window.PIVisualization);
--------------------------------------------------------------------------------
/Community Samples/Amway.China/statuslight/sym-statuslight-config.html:
--------------------------------------------------------------------------------
1 |
16 |
17 | Red
18 |
19 |
20 | > (mins)
21 |
22 |
23 | <= (mins)
24 |
25 |
26 | Yellow
27 |
28 |
29 | > (mins)
30 |
31 |
32 | <= (mins)
33 |
34 |
35 | Green
36 |
37 |
38 | > (mins)
39 |
40 |
41 | <= (mins)
42 |
43 |
44 | White
45 |
46 |
47 | > (mins)
48 |
49 |
50 | <= (mins)
51 |
52 |
53 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/advancedDataTable/README.md:
--------------------------------------------------------------------------------
1 | Follow these simple instructions to install this custom symbol; the overall process should only take a few minutes.
2 |
3 | First, download the custom symbols ZIP file from here:
4 |
5 | https://github.com/osisoft/PI-Coresight-Custom-Symbols
6 |
7 | On that web page, click the "Clone or download" link, and download the .ZIP file containing custom symbols. Extract that .ZIP file that you downloaded, and within the extracted folder, navigate to the "Community Samples\OSIsoft\" sub-folder. In here, look for the specific sub-folder for this particular custom symbol, which in this case is named "advancedDataTable".
8 |
9 | To install this custom symbol you'll need access to your PI Vision server. On that PI Vision server:
10 |
11 | 1. In Windows Explorer, navigate to the "PIPC\PIVision" installation folder on your PI Vision server; typically, it's located in "C:\Program Files\PIPC\PIVision"
12 |
13 | 2. Inside the "PIVision" folder, create a new folder called "Datatables". From the files for this custom symbol, take the Datatables.zip file extract it into the "PIPC\PIVision\Datatables" folder that you just created; when the extraction is complete, inside the "Datatables" folder you should see several sub-folders, .css, and .js files (this will allow you to properly reference the free Datatables library that will be used to power this custom symbol).
14 |
15 | 3. Next, from within the folder named "PIVision", navigate to the "\Scripts\app\editor\symbols" sub-folder.
16 |
17 | 4. Within the folder named "symbols", if there is not already a folder called "ext", create a folder called "ext".
18 |
19 | 5. Now that the "ext" folder exists, or already exits, open it, and paste into the "ext" folder these four files:
20 |
21 | sym-advancedTimeSeriesDataTable.js
22 | advancedTimeSeriesDataTable.png
23 | sym-advancedTimeSeriesDataTable-config.html
24 | sym-advancedTimeSeriesDataTable-template.html files
25 |
26 | The next time you open a web browser and navigate to PI Vision and create a new PI Vision display, you will see this new symbol appear as a new icon (using the .png image that was provided) in the top-left-hand corner of the PI Vision display editor.
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/amcharts-pie/sym-amcharts-pie-config.html:
--------------------------------------------------------------------------------
1 |
16 |
17 |
28 |
29 |
40 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/manual-data-entry/README.MD:
--------------------------------------------------------------------------------
1 | ## Manual Data Entry symbol
2 |
3 | This symbol prototype is for PI Vision version 2017.
4 |
5 |
7 |
8 | ## Feedback needed
9 |
10 | If you are using this symbol in your project, would you mind sending me a couple of lines on what your use case for manual entry is? I'd appreciate it very much! aperry @ osisoft.com
11 |
12 | ## To deploy the symbol:
13 |
14 | 1. In Windows Explorer, navigate to the "%PIHOME%\PIVision\Scripts\app\editor\symbols\ext" on your PI Coresight web server; typically, it's located in "C:\Program Files\PIPC\PIVision\Scripts\app\editor\symbols\ext".
15 | If this folder doesn't exist, create it.
16 |
17 | 2. Place the following symbol files to the .\ext folder
18 |
19 | *sym-sendvalue-template.html*
20 |
21 | *sym-sendvalue-config.html*
22 |
23 | *sym-sendvalue.js*
24 |
25 | 3. Place *paper-plane-xxl.png*, *GitHub-Mark-32px.png*, *Q.png* and *loading.gif* to the .\ext\Icons directory (create if it doesn't exist)
26 | 4. Place the Underscore library (*underscore-min.js*) to the .\ext\libraries (create if doesn't exist). The latest version of Underscore can be downloaded from http://underscorejs.org/.
27 | 5. Place *bootstrap-manual-entry.css* to the "%PIHOME%\PIVision\Scripts\app\editor\tools\ext" directory. If this folder doesn't exist, create it.
28 |
29 | ## A word about requirements
30 |
31 | ### Client side configuration
32 | This symbol uses PI Web API to send data to the PI System.
33 |
34 | This means that if you use a self-signed certificate for PI Web API, each client machine needs to install that certificate.
35 | Here is a video on how to install certificates for PI Web API: https://www.youtube.com/watch?list=PLMcG1Hs2JbcvGH0VCE4o-CjjaUkTiW5_D&v=KvYsF5MMQMU#t=04m18s
36 |
37 | ### Server side configuration
38 | And since the PI Web API requests are made from within PI Coresight server, you may (read: definitely will) run into CORS issues.
39 | I found the following video helpful when trying get CORS working without having to throw my server security wide open
40 | (i.e. without CorsHeaders=\*, CorsMethods=\* and CorsOrigins=*): https://www.youtube.com/watch?v=EyxieRFRPRw&index=10&list=PLMcG1Hs2JbcvGH0VCE4o-CjjaUkTiW5_D
41 |
42 | ## Quick Demo Video
43 |
44 | (This is a video of the slightly older version of the symbol with different styling. Core functionality didn't change.)
45 |
48 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/snapshotDataTable/sym-snapshotDataTable-config.html:
--------------------------------------------------------------------------------
1 |
16 |
17 |
Note: styling takes effect on next data refresh.
18 |
19 |
20 |
21 | Background
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | Label Background
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | Text
38 |
39 |
40 |
41 |
42 |
46 |
47 |
48 |
49 | Labels
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 | Border
58 |
59 |
60 |
61 |
62 |
68 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/playback control/tool-playback.js:
--------------------------------------------------------------------------------
1 | /***************************************************************************
2 | Copyright 2016-2017 OSIsoft, LLC.
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and
14 | limitations under the License.
15 | ***************************************************************************/
16 |
17 | (function (CS) {
18 | 'use strict';
19 |
20 | var def = {
21 | typeName: 'playback',
22 | displayName: 'Playback',
23 | iconUrl: 'Images/chrome.custom_addin_crossed_tools.svg',
24 | inject: [ 'timeProvider', '$interval' ],
25 | init: init
26 | };
27 |
28 | function init(scope, elem, timeProvider, $interval) {
29 |
30 | scope.options = {
31 | numberOfIncrements: 24,
32 | increaseIncrementTime: '+1h',
33 | incrementTimer: 500
34 | };
35 |
36 | scope.isRunning = false;
37 |
38 | // create a variable to hold the return value from $interval for canceling
39 | var intervalTimer;
40 | scope.start = function() {
41 | scope.isRunning = true;
42 |
43 | // call the $interval function with a function that will be executed each time the timer is called
44 | // the next 2 parameters are how often it should run the function and how many times it should run the function
45 | intervalTimer = $interval(function(count) {
46 | timeProvider.requestNewTime(
47 | timeProvider.displayTime.start + scope.options.increaseIncrementTime,
48 | timeProvider.displayTime.end + scope.options.increaseIncrementTime,
49 | true);
50 |
51 | // if we are on the last increment, flip the isRunning flags
52 | if(count === scope.options.numberOfIncrements) {
53 | scope.isRunning = false;
54 | }
55 | }, scope.options.incrementTimer, scope.options.numberOfIncrements);
56 | };
57 |
58 | scope.stop = function() {
59 | // when stop is pressed cancel the interval timer
60 | $interval.cancel(intervalTimer);
61 | scope.isRunning = false;
62 | };
63 | }
64 |
65 | CS.toolCatalog.register(def);
66 |
67 | })(window.PIVisualization);
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/imageurl/README.md:
--------------------------------------------------------------------------------
1 | # Image URL Custom Symbol
2 |
3 | ## Description
4 |
5 | This custom symbol allows to display images located on a web server with their URLs stored into a PI tag. The use case is for screenshots of an asset related to other sensor data, allowing to see what what going at that time in case something special or abnormal occured.
6 |
7 | ## Configuration
8 |
9 | This custom symbol supports two operating modes: tag with full images URL or or tag with filename-only
10 |
11 | ### Mode 1: URLs in tag
12 |
13 | In this case, a full URL of the image is stored in the tag. For example http://www.osisoft.com/uploadedImages/Content_(New)/Home/demand-gen-box-it-ot-gap-370x246.jpg. This is the default mode.
14 |
15 | ### Mode 2: Filenames in tag
16 |
17 | In this case, only a filename is stored in the tag. For example `demand-gen-box-it-ot-gap-370x246.jpg`. The use case is for when screenshots are saved but no webserver is available at the time and/or if it can change over time.
18 |
19 | To enable this mode:
20 | * Right-click anywhere on your Image URL custom symbol and select `Format Symbol...`
21 | * Put the URL prefix to use with the tag filename into the `URL Prefix:` text box
22 | * Select the `Enable URL` checkbox to make it effective
23 |
24 | From now on, the image shown in the custom symbol would come from the URL made from the concatenation of the `URL Prefix` and the tag filename value.
25 |
26 | ### NOTE: No data tag
27 |
28 | When a string tag has no data or if the PIPC\PIVision time window is set to a point before any data was sent to the tag, OSIsoft logo is used as a fill-in image.
29 |
30 | ## Custom Symbol Installation
31 |
32 | Follow these simple instructions to install this custom symbol; the overall process should only take a minutes.
33 |
34 | 1. In Windows Explorer, navigate to the "PIPC\PIVision" installation folder on your PI Vision server; typically, it's located in "C:\Program Files\PIPC\PIVision"
35 |
36 | 2. From within the folder named "PIVision", navigate to the "\Scripts\app\editor\symbols" sub-folder.
37 |
38 | 3. Within the folder named "symbols", if there is not already a folder called "ext", create a folder called "ext".
39 |
40 | 4. Now that the "ext" folder exists, or already exits, open it, and paste into the "ext" folder the one .js and two .html files contained in the custom symbol .ZIP folder that you were sent.
41 |
42 | 5. Within the folder named "ext", if there is not already a folder called "Icons", create a folder called "Icons".
43 |
44 | 6. Now that the "Icons" folder exists, or already exits, open it, and paste into the "Icons" folder the one .png image file contained in the custom symbol .ZIP folder that you were sent.
45 |
46 | The next time you open a web browser and navigate to PI Vision and create a new PI Vision display, you will see this new symbol appear in the top-left-hand corner of the PI Vision display editor.
47 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/amcharts-radar/sym-amcharts-radar-config.html:
--------------------------------------------------------------------------------
1 |
16 |
17 | Text
18 |
19 |
20 |
21 |
22 |
26 |
30 |
31 |
32 |
33 | Background
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 | Gridlines
42 |
43 |
44 |
45 |
46 |
47 |
48 | Series
49 |
50 |
51 |
52 |
53 |
57 |
58 |
59 |
63 |
67 |
71 |
--------------------------------------------------------------------------------
/Community Samples/Amway.China/linechart/sym-linechart.js:
--------------------------------------------------------------------------------
1 | /***************************************************************************
2 | Copyright 2016-2017 OSIsoft, LLC.
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and
14 | limitations under the License.
15 | ***************************************************************************/
16 | window.PIVisualization = window.PIVisualization || {};
17 | window.PIVisualization.ClientSettings = window.PIVisualization.ClientSettings || {};
18 | (function (CS) {
19 | function symbolVis() { }
20 | CS.deriveVisualizationFromBase(symbolVis);
21 |
22 | symbolVis.prototype.init = function (scope, elem) {
23 | this.onDataUpdate = dataUpdate;
24 | this.onResize = resize;
25 |
26 | var container = elem.find('#container')[0];
27 | var id = 'linechart_' + Math.random().toString(36).substr(2, 16);
28 | container.id = id;
29 |
30 | function convertToChartData(data) {
31 | //console.log(data.Value);
32 | return eval(data.Value);
33 | }
34 | var chart;
35 | function dataUpdate(data) {
36 | if(data) {
37 | //console.log(data);
38 | var series = convertToChartData(data);
39 | if(!chart) {
40 | chart = new Highcharts.Chart({
41 | chart: {
42 | type: 'column',
43 | renderTo: id
44 | },
45 | title: {
46 | text: '停机Top3'
47 | },
48 | subtitle: {
49 | text: 'Source: PIM'
50 | },
51 | xAxis: {
52 | categories: [
53 | '停机原因'
54 | ],
55 | crosshair: true
56 | },
57 | yAxis: {
58 | min: 0,
59 | title: {
60 | text: '停机次数'
61 | }
62 | },
63 | plotOptions: {
64 | column: {
65 | pointPadding: 0.2,
66 | borderWidth: 0
67 | }
68 | },
69 | series: series
70 | });
71 | }
72 | }
73 | }
74 | function resize(width, height) {
75 | if(chart) {
76 | chart.setSize(width, height);
77 | }
78 | }
79 | };
80 |
81 | var definition = {
82 | typeName: 'linechart',
83 | datasourceBehavior: CS.Extensibility.Enums.DatasourceBehaviors.Single,
84 | visObjectType: symbolVis,
85 | getDefaultConfig: function() {
86 | return {
87 | DataShape: 'Value',
88 | Height: 150,
89 | Width: 150
90 | };
91 | }
92 | };
93 |
94 | CS.symbolCatalog.register(definition);
95 | })(window.PIVisualization);
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/event-creation-pane/tool-efpicker.js:
--------------------------------------------------------------------------------
1 | (function (PV){
2 | "use strict";
3 |
4 | var def = {
5 | typeName: "efpicker",
6 | inject: ['timeProvider', '$rootScope', '$interval', 'webServices' ],
7 | init: init
8 | }
9 |
10 | function init(scope,elem,timeProvider,$rootScope,$interval, webServices) {
11 |
12 | scope.properties = {};
13 | scope.EFTemplates = ["Questionable Data" , "Bad Data"];
14 | scope.properties.eventName = "Event Name";
15 |
16 | var piwebapiBaseUrl = PV.ClientSettings.PIWebAPIUrl +"/";
17 |
18 | //Get databases to populate select menu
19 | webServices.getDatabases().promise.success(function(response){
20 | //Example of returned response:
21 | // [
22 | // {Path: "af:\\AFSERVER\IoT", Name: "IoT", IsDatabase: true, CanNav: true},
23 | // {Path: "af:\\AFSERVER\OSIDemo Oil and Gas Well Downtime Tracking", Name: "OSIDemo Oil and Gas Well Downtime Tracking", IsDatabase: true, CanNav: true},
24 | // {Path: "pi:\\DATAARCHIVE", Name: "DATAARCHIVE", IsArchive: true, CanNav: true}
25 | // ]
26 |
27 | if(response && response.length >= 0){
28 | //filtering out the PI Data Archive databases
29 | scope.databases = response.filter(function(item){
30 | if(item.hasOwnProperty('IsDatabase') && item.IsDatabase == true){
31 | return true;
32 | }else{
33 | return false;
34 | }
35 | });
36 | //this is to set the default value of the select in ui
37 | scope.selectedDatabase = scope.databases[0];
38 | }
39 |
40 | });
41 |
42 | scope.$watch( function(){
43 | return timeProvider.displayTime.start;
44 | }, function (newStartTime){
45 | scope.properties.startTime = newStartTime;
46 | })
47 |
48 | scope.$watch( function(){
49 | return timeProvider.displayTime.end;
50 | }, function (newEndTime){
51 | scope.properties.endTime = newEndTime;
52 | })
53 |
54 |
55 |
56 | scope.createEF = function(selectedDatabase, start, end, template, name) {
57 | console.log("Creating event frame");
58 |
59 | var jsonData = {
60 | "Name": name,
61 | "Description": "Test Description",
62 | "TemplateName": template,
63 | "StartTime": start,
64 | "EndTime": end
65 | };
66 |
67 | console.log(jsonData);
68 |
69 | var batchRequest = {
70 | "getAFDatabase": {
71 | "Method": "GET",
72 | "Resource": piwebapiBaseUrl + "assetdatabases?path=" + selectedDatabase.Path.substr(3)
73 | },
74 | "createEventFrame":{
75 | "Method": "POST",
76 | "Content": JSON.stringify(jsonData),
77 | "Resource": "$.getAFDatabase.Content.Links.EventFrames",
78 | "ParentIds": ["getAFDatabase"]
79 |
80 | }
81 |
82 | }
83 |
84 | $.ajax({
85 | url: piwebapiBaseUrl + "batch",
86 | type: "POST",
87 | xhrFields: {
88 | withCredentials: true
89 | },
90 | data: JSON.stringify(batchRequest),
91 | //headers:{'Content-Type':'application/json'},
92 | contentType: 'application/json'
93 | //dataType:"text",
94 | //processData:"false"
95 | });
96 |
97 |
98 | };
99 |
100 |
101 | }
102 |
103 | PV.toolCatalog.register(def);
104 |
105 | })(window.PIVisualization)
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/af-table/sym-aftable.js:
--------------------------------------------------------------------------------
1 | /***************************************************************************
2 | Copyright 2016-2017 OSIsoft, LLC.
3 | Licensed under the Apache License, Version 2.0 (the "License");
4 | you may not use this file except in compliance with the License.
5 | You may obtain a copy of the License at
6 | http://www.apache.org/licenses/LICENSE-2.0
7 | Unless required by applicable law or agreed to in writing, software
8 | distributed under the License is distributed on an "AS IS" BASIS,
9 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 | See the License for the specific language governing permissions and
11 | limitations under the License.
12 | ***************************************************************************/
13 |
14 | (function (PV) {
15 | 'use strict';
16 |
17 | var definition = {
18 | typeName: 'aftable',
19 | displayName: 'AF Table',
20 | datasourceBehavior: PV.Extensibility.Enums.DatasourceBehaviors.Multiple,
21 | iconUrl: '/Scripts/app/editor/symbols/ext/Icons/snapshotDataTable.png',
22 | visObjectType: symbolVis,
23 | getDefaultConfig: function () {
24 | return {
25 | Height: 250,
26 | Width: 500,
27 | selectedAFServer: null,
28 | selectedAFDatabase: null,
29 | selectedAFTable: null,
30 | pageSize: 10
31 | };
32 | },
33 | configOptions: function () {
34 | return [{
35 | title: 'Format Symbol',
36 | mode: 'format'
37 | }];
38 | },
39 | inject: ['$http', '$q', '$filter']
40 | };
41 |
42 | function symbolVis() { }
43 | PV.deriveVisualizationFromBase(symbolVis);
44 |
45 | var baseUrl = PV.ClientSettings.PIWebAPIUrl.replace(/\/?$/, '/');
46 |
47 | symbolVis.prototype.init = function(scope, elem, $http, $q, $filter) {
48 |
49 | this.onDataUpdate = dataUpdate;
50 | getAFServers();
51 |
52 | function getAFServers() {
53 | var afServersUrl = baseUrl + 'assetservers?selectedFields=Items.Name;Items.Links.Databases';
54 | $http.get(afServersUrl).then(function(response) {
55 | scope.runtimeData.afServers = response.data.Items;
56 | });
57 | }
58 | scope.config.getAFDatabases = function() {
59 | var afDatabaseUrl = scope.config.selectedAFServer.Links.Databases + '?selectedFields=Items.Name;Items.Links.Tables';
60 | $http.get(afDatabaseUrl).then(function(response) {
61 | scope.runtimeData.afDatabases = response.data.Items;
62 | });
63 | }
64 | scope.config.getAFTables = function() {
65 | var afTableUrl = scope.config.selectedAFDatabase.Links.Tables + '?selectedFields=Items.Name;Items.Links.Data';
66 | $http.get(afTableUrl).then(function(response) {
67 | scope.runtimeData.afTables = response.data.Items;
68 | });
69 | }
70 | scope.config.getAFTableData = function() {
71 | var afTableDataUrl = scope.config.selectedAFTable.Links.Data;
72 | $http.get(afTableDataUrl).then(function(response) {
73 | formTable(response.data);
74 | });
75 | }
76 |
77 | function dataUpdate() {
78 | if(scope.config.selectedAFTable) {
79 | scope.config.getAFTableData();
80 | }
81 | }
82 |
83 | function formTable(data) {
84 | scope.columns = Object.keys(data.Columns);
85 | if (!angular.equals(scope.rows, data.Rows)) {
86 | scope.rows = data.Rows;
87 | }
88 | }
89 |
90 | }
91 | PV.symbolCatalog.register(definition);
92 |
93 | })(window.PIVisualization);
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # I forked this as OSISoft took down their Github repos, but I did not create it. For support visit [OSISoft forums](https://pisquare.osisoft.com/s/).
2 |
3 | ---
4 |
5 | # PI Vision Extensibility Samples and Tutorials
6 |
7 | ## About
8 | [PI Vision][1] is a web-client vizualization tool for the [OSIsoft PI System][2]. PI Vision 3.0 and beyond supports extensibility through the creation of a combination of html and javascript files. This repository is set up to help you learn how to extend PI Vision in different ways such as a custom symbol or tool pane.
9 |
10 | ## Repository Sections
11 | This repository is broken down into two separate sections, **tutorials** and **community samples**.
12 |
13 | * [Tutorials][3]
14 |
15 | Contains multiple walkthroughs, with documentation, about how to create very specific new symbols in PI Vision.
16 |
17 | * [Community Samples][4]
18 |
19 | Contains sample symbols and panes submitted by OSIsoft and the community to showcase what they have done with PI Vision's extensibilty model.
20 |
21 | ## Resources
22 | * [PI Vision Extensibility Documentation][5]
23 | * [PI Square][6]
24 |
25 | ## Contributing
26 |
27 | Contributions we expect in this repository are focused on the Community Samples, you may open an issue if you see something wrong about the Tutorials and we will review it.
28 |
29 | We do welcome everyone to share their PI Vision Extensibility samples and be certain all contributions will be considered. Please make sure that you read our general [contribution guidelines][7] and agree with it; it also contains a lot if useful information. Please keep in mind that integrating your contribution may require some adjustments in your code, if this is the case this will be discussed in the Pull Request you open.
30 |
31 | Assuming you already forked and cloned the repository, here is the format we expect for community samples:
32 |
33 | 1. Create a personal/company folder under the [Community Samples][4] directory
34 | 1. Optionally, add a README.md file to that folder telling information about yourself or your company
35 | 1. Create a subfolder for your new symbol ( if you add more in the future, you'll add more folders)
36 | 1. In the subfolder, add a README.md describing how your symbol works as well as your JS and HTML files needed to use your sample.
37 |
38 | ## Licensing
39 | Copyright 2016-2017 OSIsoft, LLC.
40 |
41 | Licensed under the Apache License, Version 2.0 (the "License");
42 | you may not use this file except in compliance with the License.
43 | You may obtain a copy of the License at
44 |
45 | http://www.apache.org/licenses/LICENSE-2.0
46 |
47 | Unless required by applicable law or agreed to in writing, software
48 | distributed under the License is distributed on an "AS IS" BASIS,
49 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
50 | See the License for the specific language governing permissions and
51 | limitations under the License.
52 |
53 | Please see the file named [LICENSE](LICENSE).
54 |
55 | [1]:https://techsupport.osisoft.com/Products/PI-Visualization/PI-Vision/Overview
56 | [2]:http://www.osisoft.com/pi-system/
57 | [3]:/tutorials/
58 | [4]:/Community%20Samples/
59 | [5]:https://techsupport.osisoft.com/Downloads/File/98bc271d-9fb6-4317-aa45-30f5c0077558
60 | [6]:https://pisquare.osisoft.com/community/developers-club/pi-visualization-development
61 | [7]:https://github.com/osisoft/contributing
62 |
63 |
64 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/amcharts-histogram/sym-amcharts-histogram-config.html:
--------------------------------------------------------------------------------
1 |
16 |
17 |
121 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/imageurl/sym-imageurl.js:
--------------------------------------------------------------------------------
1 | /***************************************************************************
2 | Copyright 2017 OSIsoft, LLC.
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and
14 | limitations under the License.
15 | ***************************************************************************/
16 |
17 | //************************************
18 | // Begin defining a new symbol
19 | //************************************
20 | (function (CS) {
21 | 'use strict';
22 | // Specify the symbol definition
23 | var myCustomSymbolDefinition = {
24 | // Specify the unique name for this symbol; this instructs PI Vision to also
25 | // look for HTML template and config template files called sym--template.html and sym--config.html
26 | typeName: 'imageurl',
27 | // Specify the user-friendly name of the symbol that will appear in PI Vision
28 | displayName: 'ImageURL',
29 | // Specify the number of data sources for this symbol
30 | datasourceBehavior: CS.Extensibility.Enums.DatasourceBehaviors.Single,
31 | // Specify the location of an image file to use as the icon for this symbol
32 | iconUrl: '/Scripts/app/editor/symbols/ext/Icons/imageurl.png',
33 | visObjectType: symbolVis,
34 | // Specify default configuration for this symbol
35 | getDefaultConfig: function () {
36 | return {
37 | // Specify the data shape type (for symbols that update with new data)
38 | DataShape: 'Value',
39 | // Specify the default height and width of this symbol
40 | Height: 600,
41 | Width: 300,
42 | // Specify the value of custom configuration options; see the "configure" section below
43 | prefixURL: "",
44 | enablePrefixURL: false,
45 | noDataURL: "http://www.osisoft.com/images/osi-logo.png"
46 | };
47 | },
48 | // By including this, you're specifying that you want to allow configuration options for this symbol
49 | configOptions: function () {
50 | return [{
51 | // Add a title that will appear when the user right-clicks a symbol
52 | title: 'Format Symbol',
53 | // Supply a unique name for this cofiguration setting, so it can be reused, if needed
54 | mode: 'format'
55 | }];
56 | },
57 | // Include variables that will be used in the custom configuration pane.
58 | // Define a keyword and the value of that keyword for each variable.
59 | // You'll specify the value for these in the getDefaultConfig section
60 | // by referencing these variables by the value of their keyword
61 | //
62 | configure: {
63 | prefixURLKeyword: 'prefixURL',
64 | enablePrefixURLKeyword: 'enablePrefixURL',
65 | noDataURLKeyword: 'noDataURL'
66 | },
67 | // Specify the name of the function that will be called to initialize the symbol
68 | //init: myCustomSymbolInitFunction
69 | };
70 |
71 | //************************************
72 | // Function called to initialize the symbol
73 | //************************************
74 | //function myCustomSymbolInitFunction(scope, elem) {
75 | function symbolVis() { }
76 | CS.deriveVisualizationFromBase(symbolVis);
77 | symbolVis.prototype.init = function(scope, elem) {
78 | // Specify which function to call when a data update or configuration change occurs
79 | this.onDataUpdate = myCustomDataUpdateFunction;
80 | this.onConfigChange = myCustomConfigurationChangeFunction;
81 |
82 | // Locate the html div that will contain the symbol, using its id, which is "container" by default
83 | var symbolContainerElement = elem.find('#container')[0];
84 | // Use random functions to generate a new unique id for this symbol, to make it unique among all other custom symbols
85 | var newUniqueIDString = "myCustomSymbol_" + Math.random().toString(36).substr(2, 16);
86 | // Write that new unique ID back to overwrite the old id
87 | symbolContainerElement.id = newUniqueIDString;
88 | // Create a variable to hold the custom visualization object
89 | var customVisualizationObject;
90 | // Create a timer variable to be used for refreshes
91 | if(!customVisualizationObject) {
92 | customVisualizationObject = true;
93 | // Set the source of the iframe
94 | myUpdateIFrameURLFunction();
95 | }
96 |
97 | function myCustomDataUpdateFunction(data) {
98 | if (data) {
99 | scope.value = data.Value;
100 | scope.time = data.Time;
101 | if(data.Label) {
102 | scope.label = data.Label;
103 | }
104 | myUpdateIFrameURLFunction();
105 | }
106 | }
107 |
108 | //************************************
109 | // Function that is called when custom configuration changes are made
110 | //************************************
111 | function myCustomConfigurationChangeFunction() {
112 | // If the chart exists...
113 | if(customVisualizationObject) {
114 | console.log("Now updating visualization with new configuration...");
115 | // Update the iFrame to the new desired URL
116 | myUpdateIFrameURLFunction();
117 | }
118 | }
119 | //************************************
120 | // Function that is called to refresh the iframe
121 | //************************************
122 | function myUpdateIFrameURLFunction() {
123 | console.log((new Date) + " : Refreshing iFrame...");
124 | // Refresh the iFrame
125 | if (scope.value != "No Data") {
126 | if (scope.config.enablePrefixURL) {
127 | symbolContainerElement.src = scope.config.prefixURL + scope.value;
128 | } else {
129 | symbolContainerElement.src = scope.value;
130 | }
131 | } else {
132 | symbolContainerElement.src = scope.config.noDataURL;
133 | }
134 | }
135 |
136 | }
137 | // Register this custom symbol definition with PI Vision
138 | CS.symbolCatalog.register(myCustomSymbolDefinition);
139 |
140 | })(window.PIVisualization);
141 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/embedWebPage/sym-embedWebPage.js:
--------------------------------------------------------------------------------
1 | /***************************************************************************
2 | Copyright 2016-2017 OSIsoft, LLC.
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and
14 | limitations under the License.
15 | ***************************************************************************/
16 |
17 | //************************************
18 | // Begin defining a new symbol
19 | //************************************
20 | (function (CS) {
21 | 'use strict';
22 | // Specify the symbol definition
23 | var myCustomSymbolDefinition = {
24 | // Specify the unique name for this symbol; this instructs PI Vision to also
25 | // look for HTML template and config template files called sym--template.html and sym--config.html
26 | typeName: 'embedWebPage',
27 | // Specify the user-friendly name of the symbol that will appear in PI Vision
28 | displayName: 'Embed Web Page',
29 | // Specify the number of data sources for this symbol
30 | datasourceBehavior: CS.Extensibility.Enums.DatasourceBehaviors.Single,
31 | // Specify the location of an image file to use as the icon for this symbol
32 | iconUrl: '/Scripts/app/editor/symbols/ext/Icons/embedWebPage.png',
33 | visObjectType: symbolVis,
34 | // Specify default configuration for this symbol
35 | getDefaultConfig: function () {
36 | return {
37 | // Specify the data shape type (for symbols that update with new data)
38 | DataShape: 'Value',
39 | // Specify the default height and width of this symbol
40 | Height: 300,
41 | Width: 600,
42 | // Specify the value of custom configuration options; see the "configure" section below
43 | targetURL: "https://techsupport.osisoft.com",
44 | refreshOnSchedule: false,
45 | refreshIntervalSeconds: 60
46 | };
47 | },
48 | // By including this, you're specifying that you want to allow configuration options for this symbol
49 | configOptions: function () {
50 | return [{
51 | // Add a title that will appear when the user right-clicks a symbol
52 | title: 'Format Symbol',
53 | // Supply a unique name for this cofiguration setting, so it can be reused, if needed
54 | mode: 'format'
55 | }];
56 | },
57 | // Include variables that will be used in the custom configuration pane.
58 | // Define a keyword and the value of that keyword for each variable.
59 | // You'll specify the value for these in the getDefaultConfig section
60 | // by referencing these variables by the value of their keyword
61 | configure: {
62 | targetURLKeyword: 'targetURL',
63 | refreshOnScheduleKeyword: 'refreshOnSchedule',
64 | refreshIntervalSecondsKeyword: 'refreshIntervalSeconds'
65 | },
66 | // Specify the name of the function that will be called to initialize the symbol
67 | //init: myCustomSymbolInitFunction
68 | };
69 |
70 | //************************************
71 | // Function called to initialize the symbol
72 | //************************************
73 | //function myCustomSymbolInitFunction(scope, elem) {
74 | function symbolVis() { }
75 | CS.deriveVisualizationFromBase(symbolVis);
76 | symbolVis.prototype.init = function(scope, elem) {
77 | // Specify which function to call when a data update or configuration change occurs
78 | //this.onDataUpdate = myCustomDataUpdateFunction;
79 | this.onConfigChange = myCustomConfigurationChangeFunction;
80 |
81 | // Locate the html div that will contain the symbol, using its id, which is "container" by default
82 | var symbolContainerElement = elem.find('#container')[0];
83 | // Use random functions to generate a new unique id for this symbol, to make it unique among all other custom symbols
84 | var newUniqueIDString = "myCustomSymbol_" + Math.random().toString(36).substr(2, 16);
85 | // Write that new unique ID back to overwrite the old id
86 | symbolContainerElement.id = newUniqueIDString;
87 | // Create a variable to hold the custom visualization object
88 | var customVisualizationObject;
89 | // Create a timer variable to be used for refreshes
90 | var myTimer;
91 | // Update the visualization
92 | if(!customVisualizationObject) {
93 | customVisualizationObject = true;
94 | // Set the source of the iframe
95 | myUpdateIFrameURLFunction();
96 | }
97 |
98 | //************************************
99 | // Function that is called when custom configuration changes are made
100 | //************************************
101 | function myCustomConfigurationChangeFunction() {
102 | // If the chart exists...
103 | if(customVisualizationObject) {
104 | console.log("Now updating visualization with new configuration...");
105 | // Update the iFrame to the new desired URL
106 | if (scope.config.targetURL != symbolContainerElement.src) {
107 | myUpdateIFrameURLFunction();
108 | }
109 | // Update the refresh timer
110 | window.clearInterval(myTimer);
111 | if (scope.config.refreshOnSchedule == true) {
112 | if (scope.config.refreshIntervalSeconds > 0) {
113 | myTimer = setInterval(myUpdateIFrameURLFunction, scope.config.refreshIntervalSeconds * 1000);
114 | }
115 | }
116 | }
117 | }
118 |
119 | //************************************
120 | // Function that is called to refresh the iframe
121 | //************************************
122 | function myUpdateIFrameURLFunction() {
123 | console.log((new Date) + " : Refreshing iFrame...");
124 | // Refresh the iFrame
125 | symbolContainerElement.src = scope.config.targetURL;
126 | }
127 |
128 | // Specify which function to call when a data update or configuration change occurs
129 | //return { configChange:myCustomConfigurationChangeFunction };
130 | }
131 | // Register this custom symbol definition with PI Vision
132 | CS.symbolCatalog.register(myCustomSymbolDefinition);
133 |
134 | })(window.PIVisualization);
--------------------------------------------------------------------------------
23 |
24 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/imageurl/sym-imageurl-template.html:
--------------------------------------------------------------------------------
1 |
16 |
17 | 
9 |
10 | ## To deploy the symbol:
11 |
12 | 1. In Windows Explorer, navigate to the "%PIHOME%\PIVision\Scripts\app\editor\symbols\ext" on your PI Vision web server; typically, it's located in "C:\Program Files\PIPC\PIVision\Scripts\app\editor\symbols\ext".
13 | If this folder doesn't exist, create it.
14 |
15 | 2. Place the following symbol files to the .\ext folder
16 |
17 | *sym-dropdown-menu-template.html*
18 |
19 | *sym-dropdown-menu-config.html*
20 |
21 | *sym-dropdown-menu.js*
22 |
23 | *dropdown-menu.css*
24 |
25 | 3. Place all files with *.png* extension to the .\ext\Icons directory (create if it doesn't exist)
26 | 6. Run iisreset
27 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/navigation-close-current-tab/sym-nav.js:
--------------------------------------------------------------------------------
1 | (function (PV) {
2 | "use strict";
3 |
4 | function symbolVis() { };
5 | PV.deriveVisualizationFromBase(symbolVis);
6 |
7 | var definition = {
8 | typeName: "nav",
9 | visObjectType: symbolVis,
10 | datasourceBehavior: PV.Extensibility.Enums.DatasourceBehaviors.Single,
11 | getDefaultConfig: function(){
12 | return {
13 | Height: 150,
14 | Width: 150,
15 | Text: "Text",
16 | BackgroundColor: "",
17 | TextColor: "#FFFFFF"
18 |
19 | }
20 | } ,
21 | configOptions: function(){
22 | return [{
23 | title:"Format",
24 | mode: "format"
25 |
26 | }]
27 | }
28 | }
29 |
30 | symbolVis.prototype.init = function(scope, elem) {
31 |
32 | scope.closeCurrentTab = function(){
33 | window.close();
34 |
35 | }
36 | };
37 |
38 | PV.symbolCatalog.register(definition);
39 | })(window.PIVisualization);
40 |
--------------------------------------------------------------------------------
/tutorials/README.md:
--------------------------------------------------------------------------------
1 | # Adding Custom Symbols to PI Vision
2 | ## About
3 | This repository is set up to help you learn how to add a custom symbol, created with JavaScript and HTML, to PI Vision. You will 'register' a custom symbol to add it to the available 'symbol library' and learn how to access data for the symbol when it is placed on a display. You will also learn how the symbol and application can interact with each other in ways such as responding to time range changes. Finally, you will see how the symbol is persisted with the display and hooked into the undo/redo system.
4 |
5 | ## Creating new symbols
6 | Each section below is used to walkthrough the creation of a specific custom symbol. It is recommended to go through the simple value symbol instructions first. Each set of instructions is meant to be run as a copy and paste exercise.
7 |
8 | * [Simple Value Symbol Instructions](/tutorials/simplevalue/)
9 | * [TimeSeries Chart Instructions](/tutorials/timeserieschart/)
10 | * [Liquid Gauge (d3) Instructions](/tutorials/liquidgauge/)
--------------------------------------------------------------------------------
/Community Samples/Amway.China/namevaluetable/README.md:
--------------------------------------------------------------------------------
1 | Follow these simple instructions to install this custom symbol; the overall process should only take a minutes.
2 |
3 | 1. In Windows Explorer, navigate to the "PIPC\PIVision" installation folder on your PI Vision server; typically, it's located in "C:\Program Files\PIPC\PIVision"
4 |
5 | 2. From within the folder named "PIVision", navigate to the "\Scripts\app\editor\symbols" sub-folder.
6 |
7 | 3. Within the folder named "symbols", if there is not already a folder called "ext", create a folder called "ext".
8 |
9 | 4. paste into the "ext" folder the "sym-namevaluetable.js" and "sym-namevaluetable-template".
10 |
11 | 5. paste into the "ext" folder , sub folder "icons" "namevaluetable.png".
12 |
13 | 6. new event frame which have name and value, click the "namevaluetable" and drap the event frame attributes into draw area in PI Vision.
14 |
15 | The next time you open a web browser and navigate to PI Vision and create a new PI Vision display, you will see this new symbol appear in the top-left-hand corner of the PI Vision display editor.
--------------------------------------------------------------------------------
/Community Samples/Amway.China/simplevalue/README.md:
--------------------------------------------------------------------------------
1 | Follow these simple instructions to install this custom symbol; the overall process should only take a minutes.
2 |
3 | 1. In Windows Explorer, navigate to the "PIPC\PIVision" installation folder on your PI Vision server; typically, it's located in "C:\Program Files\PIPC\PIVision"
4 |
5 | 2. From within the folder named "PIVision", navigate to the "\Scripts\app\editor\symbols" sub-folder.
6 |
7 | 3. Within the folder named "symbols", if there is not already a folder called "ext", create a folder called "ext".
8 |
9 | 4. paste into the "ext" folder the "sym-simplevalue", "sym-simplevalue-config.html" , "sym-simplevalue-template.html".
10 |
11 | 5. paste into the "ext" folder sub folder "icons" to include "simplevalue.png" which is the icon of simplevalue.
12 |
13 | 6. create an Element Attribute "LineCount" , give value "16" as the DataSource in PI System Explorer.
14 |
15 | The next time you open a web browser and navigate to PI Vision and create a new PI Vision display, you will see this new symbol appear in the top-left-hand corner of the PI Vision display editor.
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/navigation-close-current-tab/sym-nav-config.html:
--------------------------------------------------------------------------------
1 | 
11 |
12 | ## To deploy the symbol:
13 |
14 | 1. In Windows Explorer, navigate to the "%PIHOME%\PIVision\Scripts\app\editor\symbols\ext" on your PI Vision web server; typically, it's located in "C:\Program Files\PIPC\PIVision\Scripts\app\editor\symbols\ext".
15 | If this folder doesn't exist, create it.
16 |
17 | 2. Place the following symbol files to the .\ext folder
18 |
19 | *sym-pareto-template.html*
20 |
21 | *sym-pareto.js*
22 |
23 | 3. Download amCharts Javascript library from https://www.amcharts.com/download/
24 | Place *serial.js* and *amcharts.js* to .\ext\libraries folder
25 |
26 | 4. Place *pareto-example.png* to the .ext\Icons\ folder (create it if it doesn't exist)
27 | Chart Icon credit: Pareto diagram by Kirby Wu from the Noun Project
28 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/dropdown-menu/sym-dropdown-menu.js:
--------------------------------------------------------------------------------
1 | (function (PV) {
2 | 'use strict';
3 |
4 | function symbolVis() { }
5 | PV.deriveVisualizationFromBase(symbolVis);
6 |
7 | var definition = {
8 | typeName: 'dropdown-menu',
9 | visObjectType: symbolVis,
10 | datasourceBehavior: PV.Extensibility.Enums.DatasourceBehaviors.Single,
11 | getDefaultConfig: function() {
12 | return {
13 | Height: 150,
14 | Width: 150,
15 | Links: [],
16 | headerLink: { Name: 'Dropdown', Url: '', IsNewTab: true }
17 | }
18 | },
19 | configOptions: function () {
20 | return [{
21 | title: 'Format Symbol',
22 | mode: 'format'
23 | }];
24 | }
25 | };
26 |
27 | symbolVis.prototype.init = function(scope) {
28 | scope.config.AddNewLink = function() {
29 | scope.config.Links.push({ Name: '', Url: '', IsNewTab: true });
30 | }
31 |
32 | scope.config.deleteRow = function(index) {
33 | if (scope.config.Links.length > 0) {
34 | scope.config.Links.splice(index, 1);
35 | }
36 | }
37 | };
38 |
39 | PV.symbolCatalog.register(definition);
40 | })(window.PIVisualization);
41 |
--------------------------------------------------------------------------------
/Community Samples/Amway.China/linechart/README.md:
--------------------------------------------------------------------------------
1 | Follow these simple instructions to install this custom symbol; the overall process should only take a minutes.
2 |
3 | 1. In Windows Explorer, navigate to the "PIPC\PIVision" installation folder on your PI Vision server; typically, it's located in "C:\Program Files\PIPC\PIVision"
4 |
5 | 2. From within the folder named "PIVision", navigate to the "\Scripts\app\editor\symbols" sub-folder.
6 |
7 | 3. Within the folder named "symbols", if there is not already a folder called "ext", create a folder called "ext".
8 |
9 | 4. The Symbol will use hightchart, you pasted "hightcharts.js" into "ext" folder directly, you will find the hightcharts.js in svn "linechart" folder, the hightchart version is 4.2.3.
10 |
11 | 5. Paste into the "ext" folder the "sym-linechart.js" and "sym-linechart-template.html".
12 |
13 | 6. In PI System Explorer, Create Element Attribute, Value Type: String, Value [{name: '短暂停机123',data: [20]}, {name: '包装瑕疵材料',data: [12]}, {name: '生产前准备',data: [7]}]
14 |
15 | The next time you open a web browser and navigate to PI Vision and create a new PI Vision display, you will see this new symbol appear in the top-left-hand corner of the PI Vision display editor.
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/snapshotDataTable/README.md:
--------------------------------------------------------------------------------
1 | Follow these simple instructions to install this custom symbol; the overall process should only take a minutes.
2 |
3 | 1. In Windows Explorer, navigate to the "PIPC\PIVision" installation folder on your PI Vision server; typically, it's located in "C:\Program Files\PIPC\PIVision"
4 |
5 | 2. From within the folder named "PIVision", navigate to the "\Scripts\app\editor\symbols" sub-folder.
6 |
7 | 3. Within the folder named "symbols", if there is not already a folder called "ext", create a folder called "ext".
8 |
9 | 4. Now that the "ext" folder exists, or already exits, open it, and paste into the "ext" folder the one .js and two .html files contained in the custom symbol .ZIP folder.
10 |
11 | 5. Within the folder named "ext", if there is not already a folder called "Icons", create a folder called "Icons".
12 |
13 | 6. Now that the "Icons" folder exists, or already exits, open it, and paste into the "Icons" folder the one .png image file contained in the custom symbol .ZIP folder.
14 |
15 | The next time you open a web browser and navigate to PI Vision and create a new PI Vision display, you will see this new symbol appear in the top-left-hand corner of the PI Vision display editor.
--------------------------------------------------------------------------------
/Community Samples/Amway.China/statuslight/README.md:
--------------------------------------------------------------------------------
1 | Follow these simple instructions to install this custom symbol; the overall process should only take a minutes.
2 |
3 | 1. In Windows Explorer, navigate to the "PIPC\PIVision" installation folder on your PI Vision server; typically, it's located in "C:\Program Files\PIPC\PIVision"
4 |
5 | 2. From within the folder named "PIVision", navigate to the "\Scripts\app\editor\symbols" sub-folder.
6 |
7 | 3. Within the folder named "symbols", if there is not already a folder called "ext", create a folder called "ext".
8 |
9 | 4. paste into the "ext" folder "sym-statuslight.js", "sym-statuslight-config.html", "sym-statuslight-template" which are contained in the "statuslight" folder.
10 |
11 | 5. paste into the "ext" folder two sub folders,
12 | first sub folder "icons" contains "green.png" which is the icon of statuslight;
13 | second folder "imgs" contains "green.png", "red.png", "white.png", "yellow.png".
14 |
15 | 6. create an Elements Attribute "LineState", give the value "10" as the data source in PI System Explorer.
16 |
17 | The next time you open a web browser and navigate to PI Vision and create a new PI Vision display, you will see this new symbol appear in the top-left-hand corner of the PI Vision display editor.
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/HTML5video/README.md:
--------------------------------------------------------------------------------
1 | Follow these simple instructions to install this custom symbol; the overall process should only take a minutes.
2 |
3 | 1. In Windows Explorer, navigate to the "PIPC\PIVision" installation folder on your PI Vision server; typically, it's located in "C:\Program Files\PIPC\PIVision"
4 |
5 | 2. From within the folder named "PIVision", navigate to the "\Scripts\app\editor\symbols" sub-folder.
6 |
7 | 3. Within the folder named "symbols", if there is not already a folder called "ext", create a folder called "ext".
8 |
9 | 4. Now that the "ext" folder exists, or already exits, open it, and paste into the "ext" folder the one .js and two .html files contained in the custom symbol .ZIP folder that you were sent.
10 |
11 | 5. Within the folder named "ext", if there is not already a folder called "Icons", create a folder called "Icons".
12 |
13 | 6. Now that the "Icons" folder exists, or already exits, open it, and paste into the "Icons" folder the one .png image file contained in the custom symbol .ZIP folder that you were sent.
14 |
15 | The next time you open a web browser and navigate to PI Vision and create a new PI Vision display, you will see this new symbol appear in the top-left-hand corner of the PI Vision display editor.
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/embedWebPage/README.md:
--------------------------------------------------------------------------------
1 | Follow these simple instructions to install this custom symbol; the overall process should only take a minutes.
2 |
3 | 1. In Windows Explorer, navigate to the "PIPC\PIVision" installation folder on your PI Vision server; typically, it's located in "C:\Program Files\PIPC\PIVision"
4 |
5 | 2. From within the folder named "PIVision", navigate to the "\Scripts\app\editor\symbols" sub-folder.
6 |
7 | 3. Within the folder named "symbols", if there is not already a folder called "ext", create a folder called "ext".
8 |
9 | 4. Now that the "ext" folder exists, or already exits, open it, and paste into the "ext" folder the one .js and two .html files contained in the custom symbol .ZIP folder that you were sent.
10 |
11 | 5. Within the folder named "ext", if there is not already a folder called "Icons", create a folder called "Icons".
12 |
13 | 6. Now that the "Icons" folder exists, or already exits, open it, and paste into the "Icons" folder the one .png image file contained in the custom symbol .ZIP folder that you were sent.
14 |
15 | The next time you open a web browser and navigate to PI Vision and create a new PI Vision display, you will see this new symbol appear in the top-left-hand corner of the PI Vision display editor.
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/timeSeriesDataTable/README.md:
--------------------------------------------------------------------------------
1 | Follow these simple instructions to install this custom symbol; the overall process should only take a minutes.
2 |
3 | 1. In Windows Explorer, navigate to the "PIPC\PIVision" installation folder on your PI Vision server; typically, it's located in "C:\Program Files\PIPC\PIVision"
4 |
5 | 2. From within the folder named "PIVision", navigate to the "\Scripts\app\editor\symbols" sub-folder.
6 |
7 | 3. Within the folder named "symbols", if there is not already a folder called "ext", create a folder called "ext".
8 |
9 | 4. Now that the "ext" folder exists, or already exits, open it, and paste into the "ext" folder the one .js and two .html files contained in the custom symbol .ZIP folder that you were sent.
10 |
11 | 5. Within the folder named "ext", if there is not already a folder called "Icons", create a folder called "Icons".
12 |
13 | 6. Now that the "Icons" folder exists, or already exits, open it, and paste into the "Icons" folder the one .png image file contained in the custom symbol .ZIP folder that you were sent.
14 |
15 | The next time you open a web browser and navigate to PI Vision and create a new PI Vision display, you will see this new symbol appear in the top-left-hand corner of the PI Vision display editor.
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/playback control/tool-playback-template.html:
--------------------------------------------------------------------------------
1 |
16 |
17 | 
9 |
10 | ## To deploy the symbol:
11 |
12 | 1. In Windows Explorer, navigate to the "%PIHOME%\PIVision\Scripts\app\editor\symbols\ext" on your PI Vision web server; typically, it's located in "C:\Program Files\PIPC\PIVision\Scripts\app\editor\symbols\ext".
13 | If this folder doesn't exist, create it.
14 |
15 | 2. Place the following symbol files to the .\ext folder
16 |
17 | *sym-amcharts-linechart-template.html*
18 |
19 | *sym-amcharts-linechart-config.html*
20 |
21 | *sym-amcharts-linechart.js*
22 |
23 | 3. Place all files with *.png* extension to the .\ext\Icons directory (create if it doesn't exist)
24 | 4. Place the Underscore library (*underscore-min.js*) to the .\ext\libraries (create if doesn't exist). The latest version of Underscore can be downloaded from http://underscorejs.org/.
25 | 5. Download the amCharts JavaScript library from https://www.amcharts.com/download/ and copy *amcharts.js*, *dark.js* and *serial.js* files to the .\ext\libraries folder.
26 | 6. Run iisreset
27 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/timeSeriesDataTable/sym-timeSeriesDataTable-template.html:
--------------------------------------------------------------------------------
1 | 
10 |
11 | ## To deploy the symbol:
12 |
13 | 1. In Windows Explorer, navigate to the "%PIHOME%\PIVision\Scripts\app\editor\symbols\ext" on your PI Vision web server; typically, it's located in "C:\Program Files\PIPC\PIVision\Scripts\app\editor\symbols\ext".
14 | If this folder doesn't exist, create it.
15 |
16 | 2. Place the following symbol files to the .\ext folder
17 |
18 | *sym-gantt-template.html*
19 |
20 | *sym-gantt-config.html*
21 |
22 | *sym-gantt.js*
23 |
24 | 3. Download amCharts Javascript library from https://www.amcharts.com/download/
25 | Place *serial.js*, *gantt.js* and *amcharts.js* to .\ext\libraries folder
26 | Rename gantt.js to z_gantt.js. Here is why:
27 | To work properly AmCharts libraries need to be loaded in this specific order: amcharts.js, serial.js and then gantt.js
28 | Since third-party libraries in PI Vision are loaded (automatically) *in alphabetical order*, gantt.js sneaks its way in before serial.js.
29 | This results in console error "Cannot read property "construct" of undefined".
30 |
31 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/plotly-3dsurface/sym-plotly-3dsurface-config.html:
--------------------------------------------------------------------------------
1 |
16 | 
7 |
8 | ## Feedback needed
9 |
10 | If you are using this symbol in your project, would you mind sending me a couple of lines on what your use case for manual entry is? I'd appreciate it very much! aperry @ osisoft.com
11 |
12 | ## To deploy the symbol:
13 |
14 | 1. In Windows Explorer, navigate to the "%PIHOME%\PIVision\Scripts\app\editor\symbols\ext" on your PI Coresight web server; typically, it's located in "C:\Program Files\PIPC\PIVision\Scripts\app\editor\symbols\ext".
15 | If this folder doesn't exist, create it.
16 |
17 | 2. Place the following symbol files to the .\ext folder
18 |
19 | *sym-sendvalue-template.html*
20 |
21 | *sym-sendvalue-config.html*
22 |
23 | *sym-sendvalue.js*
24 |
25 | 3. Place *paper-plane-xxl.png*, *GitHub-Mark-32px.png*, *Q.png* and *loading.gif* to the .\ext\Icons directory (create if it doesn't exist)
26 | 4. Place the Underscore library (*underscore-min.js*) to the .\ext\libraries (create if doesn't exist). The latest version of Underscore can be downloaded from http://underscorejs.org/.
27 | 5. Place *bootstrap-manual-entry.css* to the "%PIHOME%\PIVision\Scripts\app\editor\tools\ext" directory. If this folder doesn't exist, create it.
28 |
29 | ## A word about requirements
30 |
31 | ### Client side configuration
32 | This symbol uses PI Web API to send data to the PI System.
33 |
34 | This means that if you use a self-signed certificate for PI Web API, each client machine needs to install that certificate.
35 | Here is a video on how to install certificates for PI Web API: https://www.youtube.com/watch?list=PLMcG1Hs2JbcvGH0VCE4o-CjjaUkTiW5_D&v=KvYsF5MMQMU#t=04m18s
36 |
37 | ### Server side configuration
38 | And since the PI Web API requests are made from within PI Coresight server, you may (read: definitely will) run into CORS issues.
39 | I found the following video helpful when trying get CORS working without having to throw my server security wide open
40 | (i.e. without CorsHeaders=\*, CorsMethods=\* and CorsOrigins=*): https://www.youtube.com/watch?v=EyxieRFRPRw&index=10&list=PLMcG1Hs2JbcvGH0VCE4o-CjjaUkTiW5_D
41 |
42 | ## Quick Demo Video
43 |
44 | (This is a video of the slightly older version of the symbol with different styling. Core functionality didn't change.)
45 | 
56 | 
62 | 
";
53 | if(dataValue > redMax)
54 | selectlight = "
";
57 | if(dataValue > yellowMin && dataValue <=yellowMax)
58 | selectlight = "
";;
59 | if(dataValue > greenMin && dataValue <=greenMax)
60 | selectlight = "
";
61 | if(dataValue <= whiteMax)
62 | selectlight = "