| " + obj.name + " | "; 65 | line = line + "" + obj.data[0][1] + " | "; 66 | line = line + "
21 |
23 |
26 |
27 |
29 |
32 | Show Label:
33 |
34 |
35 | Show Time:
36 |
37 |
--------------------------------------------------------------------------------
/Community Samples/Amway.China/simplevalue/sym-simplevalue-template.html:
--------------------------------------------------------------------------------
1 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/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/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/Amway.China/statuslight/icons/green.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/Amway.China/statuslight/icons/green.png
--------------------------------------------------------------------------------
/Community Samples/Amway.China/statuslight/imgs/green.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/Amway.China/statuslight/imgs/green.png
--------------------------------------------------------------------------------
/Community Samples/Amway.China/statuslight/imgs/red.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/Amway.China/statuslight/imgs/red.png
--------------------------------------------------------------------------------
/Community Samples/Amway.China/statuslight/imgs/white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/Amway.China/statuslight/imgs/white.png
--------------------------------------------------------------------------------
/Community Samples/Amway.China/statuslight/imgs/yellow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/Amway.China/statuslight/imgs/yellow.png
--------------------------------------------------------------------------------
/Community Samples/Amway.China/statuslight/sym-statuslight-config.html:
--------------------------------------------------------------------------------
1 |
16 |
19 | {{value}}
19 |
20 | > (mins)
21 |
22 |
23 | <= (mins)
24 |
25 |
28 |
29 | > (mins)
30 |
31 |
32 | <= (mins)
33 |
34 |
37 |
38 | > (mins)
39 |
40 |
41 | <= (mins)
42 |
43 |
46 |
47 | > (mins)
48 |
49 |
50 | <= (mins)
51 |
52 |
53 |
--------------------------------------------------------------------------------
/Community Samples/Amway.China/statuslight/sym-statuslight-template.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Community Samples/Amway.China/statuslight/sym-statuslight.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 | var container = elem.find('#container')[0];
25 | var id = 'statuslight_' + Math.random().toString(36).substr(2, 16);
26 | container.id = id;
27 |
28 | function convertToChartData(data) {
29 | return eval(data.Value);
30 | }
31 | var chart;
32 | var redMin = scope.config.RedMin == undefined ? 10 : parseInt(scope.config.RedMin);
33 | var redMax = scope.config.RedMin == undefined ? 30 : parseInt(scope.config.RedMax);
34 | var yellowMin = scope.config.RedMin == undefined ? 5 : parseInt(scope.config.YellowMin);
35 | var yellowMax = scope.config.RedMin == undefined ? 10 : parseInt(scope.config.YellowMax);
36 | var greenMin = scope.config.RedMin == undefined ? -1 : parseInt(scope.config.GreenMin);
37 | var greenMax = scope.config.RedMin == undefined ? 5 : parseInt(scope.config.GreenMax);
38 | var whiteMin = scope.config.RedMin == undefined ? -2 : parseInt(scope.config.WhiteMin);
39 | var whiteMax = scope.config.RedMin == undefined ? -1 : parseInt(scope.config.WhiteMax);
40 | var selectlight;
41 | var dataValue;
42 | var olddata=9999;
43 | var splintlightid = 'splintlight_' + Math.random().toString(36).substr(2, 16);
44 | var $splintlights = $("img[id^='splintlight_']");
45 | $splintlights.stop(true,true);
46 | function dataUpdate(data) {
47 | //console.log(data);
48 | if(data) {
49 | dataValue = parseInt(data.Value);
50 | //console.log(dataValue);
51 | if(olddata!=dataValue) {
52 | selectlight = "
";
53 | if(dataValue > redMax)
54 | selectlight = "";
55 | if(dataValue > redMin && dataValue <= redMax)
56 | selectlight = "
";
57 | if(dataValue > yellowMin && dataValue <=yellowMax)
58 | selectlight = "
";;
59 | if(dataValue > greenMin && dataValue <=greenMax)
60 | selectlight = "
";
61 | if(dataValue <= whiteMax)
62 | selectlight = "";
63 | $(container).children().remove();
64 | $(container).append(selectlight);
65 | olddata = dataValue;
66 | function splint() {
67 | var $splintlight = $("#"+splintlightid+"");
68 | if (!$splintlight.is(":animated")) {
69 | if ($splintlight[0].width <= 10) $splintlight.animate({ width: "40px", height: "40px" }, 5000, function () { splint(); });
70 | else $splintlight.animate({ width: "10px", height: "10px" }, 5000, function () { splint(); });
71 | }
72 | }
73 | var $splintlights1 = $("img[id^='splintlight_']");
74 | $splintlights1.stop(true,true);
75 | splint();
76 | }
77 | }
78 | }
79 | };
80 |
81 | var definition = {
82 | typeName: 'statuslight',
83 | displayName: 'status light',
84 | datasourceBehavior: CS.Extensibility.Enums.DatasourceBehaviors.Single,
85 | iconUrl: '/Scripts/app/editor/symbols/ext/icons/green.png',
86 | visObjectType: symbolVis,
87 | getDefaultConfig: function() {
88 | return {
89 | DataShape: 'Value',
90 | Height: 150,
91 | Width: 150
92 | };
93 | },
94 | configOptions: function () {
95 | return [{
96 | title: 'Format Symbol',
97 | mode: 'format'
98 | }];
99 | },
100 | };
101 |
102 | CS.symbolCatalog.register(definition);
103 | })(window.PIVisualization);
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/HTML5video/HTML5video.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/HTML5video/HTML5video.png
--------------------------------------------------------------------------------
/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/HTML5video/sym-HTML5video-config.html:
--------------------------------------------------------------------------------
1 |
16 |
17 |
24 |
30 |
36 |
42 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/HTML5video/sym-HTML5video-template.html:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/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/advancedDataTable/Datatables.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/advancedDataTable/Datatables.zip
--------------------------------------------------------------------------------
/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/advancedDataTable/advancedTimeSeriesDataTable.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/advancedDataTable/advancedTimeSeriesDataTable.png
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/advancedDataTable/sym-advancedTimeSeriesDataTable-template.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Path:
18 |
22 |
23 | 24 |
Show Controls:
25 |
28 |
29 | 30 |
Enable Autoplay:
31 |
34 |
35 | 36 |
Enable Refresh:
37 |
40 |
41 | 42 |
Refresh Interval (seconds):
43 |
47 |
48 | -
18 |
-
19 |
20 | 21 |43 | 44 |22 |42 |23 |29 |24 |27 | 28 |AF Server25 | 26 |30 |35 |31 |34 |AF Database32 | 33 |36 |41 |37 |40 |AF Table38 | 39 |
45 |
46 |
- 47 | 48 | 49 | 66 | 67 |
| 20 | 21 | | 22 |{{col}} | 24 | 25 | 26 ||||
|---|---|---|---|---|
| {{row[col]}} | 28 |||||
| 33 | 34 | | 35 |||||
Value: [[Value]]", 147 | "valueField": "Value", 148 | "fillColorsField": "color" 149 | }], 150 | //"rotate": false, 151 | "dataProvider": "", 152 | "categoryField": "StreamName", 153 | "chartCursor": { 154 | "cursorColor": "gray", 155 | "valueLineBalloonEnabled": true, 156 | "valueLineEnabled": true, 157 | "valueZoomable": true 158 | }, 159 | "zoomOutButtonImage": "", 160 | "export":{ 161 | "enabled": true 162 | } 163 | } 164 | } 165 | 166 | } 167 | CS.symbolCatalog.register(myCustomSymbolDefinition); 168 | 169 | })(window.Coresight); -------------------------------------------------------------------------------- /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-gauge/amcharts-radialgauge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/amcharts-gauge/amcharts-radialgauge.png -------------------------------------------------------------------------------- /Community Samples/OSIsoft/amcharts-gauge/sym-amcharts-RadialGauge-config.html: -------------------------------------------------------------------------------- 1 | 14 |
15 | 19 | 23 | 27 | 31 | 32 |
33 | 36 |
37 |
38 |
39 |
43 |
47 | 48 | 49 | 52 |
53 |
54 |
55 |
59 | 60 | 61 | 64 |
65 |
66 |
67 |
71 | 72 | 73 | 76 |
77 |
78 |
79 |
83 | 84 | 85 | 88 |
89 |
90 |
91 |
95 | 96 | -------------------------------------------------------------------------------- /Community Samples/OSIsoft/amcharts-gauge/sym-amcharts-RadialGauge-template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /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/amcharts-histogram/amcharts-histogram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/amcharts-histogram/amcharts-histogram.png -------------------------------------------------------------------------------- /Community Samples/OSIsoft/amcharts-histogram/sym-amcharts-histogram-config.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 20 |
21 |
22 |
23 |
27 |
31 |
32 | 33 | 36 |
37 |
38 |
39 | 40 | 43 |
44 |
45 |
46 |
47 | 48 | 51 |
52 |
53 |
54 |
58 |
62 |
66 |
70 |
74 |
78 | -------------------------------------------------------------------------------- /Community Samples/OSIsoft/amcharts-histogram/sym-amcharts-histogram-template.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | -------------------------------------------------------------------------------- /Community Samples/OSIsoft/amcharts-linechart/ExampleofLineChart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/amcharts-linechart/ExampleofLineChart.png -------------------------------------------------------------------------------- /Community Samples/OSIsoft/amcharts-linechart/GitHub-Mark-32px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/amcharts-linechart/GitHub-Mark-32px.png -------------------------------------------------------------------------------- /Community Samples/OSIsoft/amcharts-linechart/LineChart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/amcharts-linechart/LineChart.png -------------------------------------------------------------------------------- /Community Samples/OSIsoft/amcharts-linechart/Q.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/amcharts-linechart/Q.png -------------------------------------------------------------------------------- /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/amcharts-linechart/dark.js:
--------------------------------------------------------------------------------
1 | AmCharts.themes.dark = {
2 |
3 | themeName: "dark",
4 |
5 | AmChart: {
6 | color: "#e7e7e7", backgroundColor: "#282828"
7 | },
8 |
9 | AmCoordinateChart: {
10 | colors: ["#ae85c9", "#aab9f7", "#b6d2ff", "#c9e6f2", "#c9f0e1", "#e8d685", "#e0ad63", "#d48652", "#d27362", "#495fba", "#7a629b", "#8881cc"]
11 | },
12 |
13 | AmStockChart: {
14 | colors: ["#639dbd", "#e8d685", "#ae85c9", "#c9f0e1", "#d48652", "#629b6d", "#719dc3", "#719dc3"]
15 | },
16 |
17 | AmSlicedChart: {
18 | outlineAlpha: 1,
19 | outlineThickness: 2,
20 | labelTickColor: "#FFFFFF",
21 | labelTickAlpha: 0.3,
22 | colors: ["#495fba", "#e8d685", "#ae85c9", "#c9f0e1", "#d48652", "#629b6d", "#719dc3", "#719dc3"]
23 | },
24 |
25 | AmRectangularChart: {
26 | zoomOutButtonColor: '#FFFFFF',
27 | zoomOutButtonRollOverAlpha: 0.15,
28 | zoomOutButtonImage: "lensWhite"
29 | },
30 |
31 | AxisBase: {
32 | axisColor: "#FFFFFF",
33 | axisAlpha: 0.3,
34 | gridAlpha: 0.1,
35 | gridColor: "#FFFFFF",
36 | dashLength: 3
37 | },
38 |
39 | ChartScrollbar: {
40 | backgroundColor: "#000000",
41 | backgroundAlpha: 0.2,
42 | graphFillAlpha: 0.2,
43 | graphLineAlpha: 0,
44 | graphFillColor: "#FFFFFF",
45 | selectedGraphFillColor: "#FFFFFF",
46 | selectedGraphFillAlpha: 0.4,
47 | selectedGraphLineColor: "#FFFFFF",
48 | selectedBackgroundColor: "#FFFFFF",
49 | selectedBackgroundAlpha: 0.09,
50 | gridAlpha: 0.15
51 | },
52 |
53 | ChartCursor: {
54 | cursorColor: "#FFFFFF",
55 | color: "#000000",
56 | cursorAlpha: 0.5
57 | },
58 |
59 | AmLegend: {
60 | color: "#e7e7e7"
61 | },
62 |
63 | AmGraph: {
64 | lineAlpha: 0.9
65 | },
66 |
67 |
68 | GaugeArrow: {
69 | color: "#FFFFFF",
70 | alpha: 0.8,
71 | nailAlpha: 0,
72 | innerRadius: "40%",
73 | nailRadius: 15,
74 | startWidth: 15,
75 | borderAlpha: 0.8,
76 | nailBorderAlpha: 0
77 | },
78 |
79 | GaugeAxis: {
80 | tickColor: "#FFFFFF",
81 | tickAlpha: 1,
82 | tickLength: 15,
83 | minorTickLength: 8,
84 | axisThickness: 3,
85 | axisColor: '#FFFFFF',
86 | axisAlpha: 1,
87 | bandAlpha: 0.8
88 | },
89 |
90 | TrendLine: {
91 | lineColor: "#c03246",
92 | lineAlpha: 0.8
93 | },
94 |
95 | // ammap
96 | AreasSettings: {
97 | alpha: 0.8,
98 | color: "#FFFFFF",
99 | colorSolid: "#000000",
100 | unlistedAreasAlpha: 0.4,
101 | unlistedAreasColor: "#FFFFFF",
102 | outlineColor: "#000000",
103 | outlineAlpha: 0.5,
104 | outlineThickness: 0.5,
105 | rollOverColor: "#3c5bdc",
106 | rollOverOutlineColor: "#000000",
107 | selectedOutlineColor: "#000000",
108 | selectedColor: "#f15135",
109 | unlistedAreasOutlineColor: "#000000",
110 | unlistedAreasOutlineAlpha: 0.5
111 | },
112 |
113 | LinesSettings: {
114 | color: "#FFFFFF",
115 | alpha: 0.8
116 | },
117 |
118 | ImagesSettings: {
119 | alpha: 0.8,
120 | labelColor: "#FFFFFF",
121 | color: "#FFFFFF",
122 | labelRollOverColor: "#3c5bdc"
123 | },
124 |
125 | ZoomControl: {
126 | buttonFillAlpha:0.7,
127 | buttonIconColor:"#494949"
128 | },
129 |
130 | SmallMap: {
131 | mapColor: "#FFFFFF",
132 | rectangleColor: "#FFFFFF",
133 | backgroundColor: "#000000",
134 | backgroundAlpha: 0.7,
135 | borderThickness: 1,
136 | borderAlpha: 0.8
137 | },
138 |
139 | // the defaults below are set using CSS syntax, you can use any existing css property
140 | // if you don't use Stock chart, you can delete lines below
141 | PeriodSelector: {
142 | color: "#e7e7e7"
143 | },
144 |
145 | PeriodButton: {
146 | color: "#e7e7e7",
147 | background: "transparent",
148 | opacity: 0.7,
149 | border: "1px solid rgba(255, 255, 255, .15)",
150 | MozBorderRadius: "5px",
151 | borderRadius: "5px",
152 | margin: "1px",
153 | outline: "none",
154 | boxSizing: "border-box"
155 | },
156 |
157 | PeriodButtonSelected: {
158 | color: "#e7e7e7",
159 | backgroundColor: "rgba(255, 255, 255, 0.1)",
160 | border: "1px solid rgba(255, 255, 255, .3)",
161 | MozBorderRadius: "5px",
162 | borderRadius: "5px",
163 | margin: "1px",
164 | outline: "none",
165 | opacity: 1,
166 | boxSizing: "border-box"
167 | },
168 |
169 | PeriodInputField: {
170 | color: "#e7e7e7",
171 | background: "transparent",
172 | border: "1px solid rgba(255, 255, 255, .15)",
173 | outline: "none"
174 | },
175 |
176 | DataSetSelector: {
177 | color: "#e7e7e7",
178 | selectedBackgroundColor: "rgba(255, 255, 255, .25)",
179 | rollOverBackgroundColor: "rgba(255, 255, 255, .15)"
180 | },
181 |
182 | DataSetCompareList: {
183 | color: "#e7e7e7",
184 | lineHeight: "100%",
185 | boxSizing: "initial",
186 | webkitBoxSizing: "initial",
187 | border: "1px solid rgba(255, 255, 255, .15)"
188 | },
189 |
190 | DataSetSelect: {
191 | border: "1px solid rgba(255, 255, 255, .15)",
192 | outline: "none"
193 | }
194 |
195 | };
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/amcharts-linechart/sin-down.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/amcharts-linechart/sin-down.png
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/amcharts-linechart/sin-right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/amcharts-linechart/sin-right.png
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/amcharts-linechart/sym-amcharts-linechart-template.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/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-pie/amcharts-pie.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/amcharts-pie/amcharts-pie.png
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/amcharts-pie/sym-amcharts-pie-config.html:
--------------------------------------------------------------------------------
1 |
16 | 17 | 20 |
21 |
22 |
23 | 24 | 27 |
28 |
29 |
30 | 31 | 34 |
35 |
36 |
37 |
41 |
45 |
49 |
53 | -------------------------------------------------------------------------------- /Community Samples/OSIsoft/amcharts-pie/sym-amcharts-pie-template.html: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /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-radar/amcharts-radar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/amcharts-radar/amcharts-radar.png -------------------------------------------------------------------------------- /Community Samples/OSIsoft/amcharts-radar/sym-amcharts-radar-config.html: -------------------------------------------------------------------------------- 1 | 16 | 19 |
20 |
21 |
22 |
26 |
30 |
31 | 32 | 35 |
36 |
37 |
38 |
39 | 40 | 43 |
44 |
45 |
46 | 47 | 50 |
51 |
52 |
53 |
57 |
58 | 59 | 63 | 67 | 71 | -------------------------------------------------------------------------------- /Community Samples/OSIsoft/amcharts-radar/sym-amcharts-radar-template.html: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /Community Samples/OSIsoft/amcharts-radar/sym-amcharts-radar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/amcharts-radar/sym-amcharts-radar.png -------------------------------------------------------------------------------- /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-trend/amcharts-trend.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/amcharts-trend/amcharts-trend.png -------------------------------------------------------------------------------- /Community Samples/OSIsoft/amcharts-trend/sym-amcharts-trend-config.html: -------------------------------------------------------------------------------- 1 | 16 | 19 |
20 |
21 |
22 |
26 |
30 | 31 | 34 |
35 |
36 |
37 | 38 | 41 |
42 |
43 |
44 |
45 | 46 | 49 |
50 |
51 |
52 |
53 | 54 | 58 | 62 | 66 | 70 | 74 |
75 | 79 | 83 |
-------------------------------------------------------------------------------- /Community Samples/OSIsoft/amcharts-trend/sym-amcharts-trend-template.html: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /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-xyplot/amcharts-xyplot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/amcharts-xyplot/amcharts-xyplot.png -------------------------------------------------------------------------------- /Community Samples/OSIsoft/amcharts-xyplot/sym-amcharts-xyplot-config.html: -------------------------------------------------------------------------------- 1 | 16 | 19 |
20 |
21 |
22 |
26 |
30 |
42 |
43 | 44 | 47 |
48 |
49 |
50 |
51 | 52 | 55 |
56 |
57 |
58 |
59 | 60 | 64 |
65 | 69 |
Note: to add a Trend Line, drag onto the chart a static string Attribute whose value is in the form x1,y1;x2,y2;x3,y3
70 |
71 | 72 | 76 | 80 | 84 | 88 | 92 | 96 |
-------------------------------------------------------------------------------- /Community Samples/OSIsoft/amcharts-xyplot/sym-amcharts-xyplot-template.html: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /Community Samples/OSIsoft/dropdown-menu/Example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/dropdown-menu/Example.png -------------------------------------------------------------------------------- /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/dropdown-menu/dropdown-menu.css:
--------------------------------------------------------------------------------
1 | ul.custom-menu {
2 | list-style-type: none;
3 | margin: 0;
4 | padding: 0;
5 | overflow: hidden;
6 | }
7 |
8 | ul.custom-menu > li {
9 | float: left;
10 | }
11 |
12 | ul.custom-menu li
13 | ul.custom-menu a,
14 | .custom-dropdown-button {
15 | display: inline-block;
16 | color: white;
17 | text-align: center;
18 | padding: 14px 16px;
19 | text-decoration: none;
20 | background-color: #2a3e5d;
21 | }
22 |
23 | ul.custom-menu li a:hover, .custom-dropdown:hover .custom-dropdown-button {
24 | background-color: #2a3e5d;
25 | }
26 |
27 | li.custom-dropdown {
28 | display: inline-block;
29 | }
30 |
31 | .custom-cursor-pointer {
32 | cursor: pointer;
33 | }
34 |
35 | .custom-dropdown-content {
36 | display: none;
37 | position: absolute;
38 | background-color: #f9f9f9;
39 | min-width: 160px;
40 | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
41 | z-index: 1;
42 | }
43 |
44 | .custom-dropdown-content a {
45 | color: black;
46 | padding: 12px 16px;
47 | text-decoration: none;
48 | display: block;
49 | text-align: left;
50 | }
51 |
52 | .custom-dropdown-content a:hover {background-color: #f1f1f1}
53 |
54 | .custom-dropdown:hover .custom-dropdown-content {
55 | display: block;
56 | }
57 |
58 | table.custom-config-table {
59 | font-family: arial, sans-serif;
60 | border-collapse: collapse;
61 | width: 100%;
62 | }
63 |
64 | table.custom-config-table td,
65 | table.custom-config-table th {
66 | border: 1px solid #dddddd;
67 | text-align: left;
68 | padding: 8px;
69 | }
70 |
71 | table.custom-config-table tr:nth-child(even) {
72 | background-color: #FFFFFF;
73 | }
74 |
75 | table.custom-config-table tbody > tr > td {
76 | text-align: left;
77 | vertical-align: middle;
78 | }
79 |
80 | table.custom-config-table tbody > tr > td > input {
81 | background-color: transparent;
82 | border-color: transparent;
83 | }
84 |
85 | button.custom-config-button {
86 | background-color: #2a3e5d;
87 | color: #fff;
88 | float: right;
89 | height: 25px;
90 | width: 40%;
91 | text-shadow: 0 -1px 0 rgba(0,0,0,.25);
92 | margin-left: auto;
93 | border: 1px solid rgba(230,231,232,.55);
94 | }
95 |
96 | .removebutton {
97 | width: 40%;
98 | max-width: 30px;
99 | margin-left: auto;
100 | display: block;
101 | margin: 0 auto;
102 | outline: none;
103 | }
104 |
105 | .custom-disabled {
106 | color: currentColor;
107 | cursor: not-allowed;
108 | opacity: 0.5;
109 | text-decoration: none;
110 | }
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/dropdown-menu/sym-dropdown-menu-config.html:
--------------------------------------------------------------------------------
1 | -
2 |
-
3 |
4 | 5 |53 |6 |52 |
7 | 8 |
50 | 51 |9 | 14 | 15 | 16 |Name 10 |Link 11 |Open in new tab 12 |Remove 13 |17 | 32 |18 | 19 | 20 |21 | 22 | 23 |24 | 25 | 26 |27 | 30 | 31 |33 | 48 | 49 |34 | 35 | 36 |37 | 38 | 39 |40 | 41 | 42 |43 | 46 | 47 |
54 |
17 |
24 |
30 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/embedWebPage/sym-embedWebPage-template.html:
--------------------------------------------------------------------------------
1 |
16 |
17 | Settings
--------------------------------------------------------------------------------
/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-URL:
18 |
22 |
23 | 24 |
Enable Refresh:
25 |
28 |
29 | 30 |
Refresh Interval (seconds):
31 |
35 |
36 | 
23 |
24 |
--------------------------------------------------------------------------------
/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/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/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/gantt/gantt-example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/gantt/gantt-example.png
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/gantt/sym-ganttchart-config.html:
--------------------------------------------------------------------------------
1 |
2 | -
3 |
-
4 |
5 | 6 |10 |7 |9 |
8 |
11 |
[[open]] -- [[value]]" 46 | }, 47 | "rotate": true, 48 | "categoryField": "category", 49 | "segmentsField": "segments", 50 | "colorField": "color", 51 | "startDateField": "start", 52 | "endDateField": "end", 53 | "dataProvider": "", 54 | "chartCursor": { 55 | "cursorColor": "#55bb76", 56 | "valueBalloonsEnabled": false, 57 | "cursorAlpha": 0, 58 | "valueLineAlpha": 0.5, 59 | "valueLineBalloonEnabled": true, 60 | "valueLineEnabled": true, 61 | "zoomable": false, 62 | "valueZoomable": true 63 | }, 64 | "export": { 65 | "enabled": true 66 | } 67 | } 68 | } 69 | 70 | var TRACECOLORS = ["rgb(62, 152, 211)", "rgb(224, 138, 0)", "rgb(178, 107, 255)", "rgb(47, 188, 184)", "rgb(219, 70, 70)", "rgb(156, 128, 110)", "rgb(60, 191, 60)", "rgb(197, 86, 13)","rgb(46, 32, 238)","rgb(165, 32, 86)" ]; 71 | 72 | symbolVis.prototype.init = function(scope, elem, webServices) { 73 | var symbolContainerDiv = elem.find("#container")[0]; 74 | symbolContainerDiv.id = "barChart_" + Math.random().toString(36).substr(2, 16); 75 | var chartConfig = getConfig(); 76 | 77 | var states = []; 78 | webServices.getDefaultStates(scope.symbol.DataSources[0]).promise.then(function(response){ 79 | states = response.data.States; 80 | if (scope.config.states != states) { 81 | scope.config.states = states; 82 | } 83 | if (scope.config.colors.length == 0) { 84 | scope.config.colors = states.map(function(item, index){ 85 | return TRACECOLORS[index] || index - 1 - (TRACECOLORS.length * Math.floor(index / TRACECOLORS.length)); 86 | }); 87 | } 88 | 89 | if(scope.config.colors.length < states.length) { 90 | var iterations = states.length - scope.config.colors.length; 91 | for (var i = 0; i < iterations; i++) { 92 | scope.config.colors.push('#'+Math.floor(Math.random()*16777215).toString(16)); 93 | } 94 | } 95 | }); 96 | 97 | var chart; 98 | this.onDataUpdate = dataUpdate; 99 | 100 | function dataUpdate(data) { 101 | if(!data || !states.length > 0) return; 102 | if(!chart) { chart = AmCharts.makeChart(symbolContainerDiv.id, chartConfig) } 103 | 104 | chart.dataProvider = convertToChartDataFormat(data); 105 | chart.validateData(); 106 | } 107 | 108 | function convertToChartDataFormat(data) { 109 | var valArray = data.Data[0].Values; 110 | var segments = []; 111 | 112 | valArray.forEach(function(item, index) { 113 | 114 | var colorIndex = states.findIndex(function(state){ return state.Name == item.Value}); 115 | if (valArray[index - 1] && item.Value == valArray[index - 1].Value) { 116 | segments[segments.length - 1].end = index == valArray.length - 1 ? new Date(data.Data[0].EndTime) : new Date(valArray[index + 1].Time); 117 | 118 | } else { 119 | segments.push({ 120 | "start": new Date(item.Time), 121 | "end": index == valArray.length - 1 ? new Date(data.Data[0].EndTime) : new Date(valArray[index + 1].Time), 122 | "color": scope.config.colors[colorIndex], 123 | "state": item.Value 124 | }) 125 | } 126 | }); 127 | 128 | return [{ 129 | "category": "", 130 | "segments": segments 131 | }]; 132 | } 133 | } 134 | 135 | PV.symbolCatalog.register(definition); 136 | 137 | })(window.PIVisualization); 138 | -------------------------------------------------------------------------------- /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/imageurl/imageurl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/imageurl/imageurl.png -------------------------------------------------------------------------------- /Community Samples/OSIsoft/imageurl/sym-imageurl-config.html: -------------------------------------------------------------------------------- 1 | 16 |
17 |
24 |
30 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/imageurl/sym-imageurl-template.html:
--------------------------------------------------------------------------------
1 |
16 |
17 | URL Prefix:
18 |
22 |
23 | 24 |
Enable URL Prefix:
25 |
28 |
29 | 30 |
No Data URL:
31 |
35 |
36 |
18 | ![]()
19 |
20 | Settings
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/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-
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/manual-data-entry/loading.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/manual-data-entry/loading.gif
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/manual-data-entry/paper-plane-xxl.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/manual-data-entry/paper-plane-xxl.png
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/manual-data-entry/sym-sendvalue-config.html:
--------------------------------------------------------------------------------
1 | -
2 |
-
3 |
4 |
5 | 6 |10 |7 |9 |
8 |
11 |
12 | -
13 |
14 |
15 | 16 |41 |17 |20 |Default timestamp18 | 19 |21 |24 |Show Alternative Name22 | 23 |25 |28 |Show Attribute26 | 27 |29 |32 |Show Timestamp30 | 31 |33 |36 |Show Current Value34 | 35 |37 |40 |Value Width38 | 39 |
42 |
43 |
-
44 |
45 |
46 | 47 |70 |48 | 49 |67 | 68 | 69 |50 |57 | 58 | 59 | 65 | 66 |{{stream.Label}}56 |
71 |
72 |
-
73 |
74 |
75 | 76 |97 |77 |79 | 80 |
78 | 81 |84 | 85 |Text82 | 83 |86 |88 |87 | 89 |92 |Width90 | 91 |93 |96 |Height94 | 95 |
98 |
99 | -
100 |
101 |
102 | 103 |119 |104 | This is an example of custom symbol made with the PI Vision Extensibility Framework. 105 |106 |107 | 108 |112 |
109 |
110 | Explore source code.
111 | 113 | 114 |118 |
115 |
116 | Need help? Ask PI Square.
117 |
120 |
2 |
3 |
4 |
27 |
28 |
29 |
40 |
--------------------------------------------------------------------------------
/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 | | Name | 6 |Attribute | 7 |Timestamp | 8 |Enter Value | 9 |Current Value | 10 |Select All | 11 |
|---|---|---|---|---|---|
| 16 | | {{stream.Label}} | 17 |18 | | 19 | 20 | 21 | | 22 |{{stream.CurrentValue}} {{stream.UOM}} | 23 |24 | |
29 |
30 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/navigation-close-current-tab/sym-nav-config.html:
--------------------------------------------------------------------------------
1 | -
2 |
-
3 |
4 |
5 |
6 | 7 | 8 |32 | 33 | 34 |9 |14 | 15 |Text:10 | 11 | 12 | 13 |16 |18 |
17 | 19 |21 | 22 | 23 |20 | 24 | placeholder for text size 25 | 26 |27 |28 | placeholder for underline, bol, italic 29 | 30 |31 |
35 |
36 |
37 |
{{ config.Text }}
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/pareto/noun_Pareto_diagram_626189.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/pareto/noun_Pareto_diagram_626189.png
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/pareto/pareto-example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/pareto/pareto-example.png
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/pareto/sym-pareto-template.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/pareto/sym-pareto.js:
--------------------------------------------------------------------------------
1 | (function (PV) {
2 | 'use strict';
3 |
4 | function symbolVis() { };
5 | PV.deriveVisualizationFromBase(symbolVis);
6 |
7 | var definition = {
8 | typeName: "pareto",
9 | visObjectType: symbolVis,
10 | datasourceBehavior: PV.Extensibility.Enums.DatasourceBehaviors.Single,
11 | iconUrl:'/Scripts/app/editor/symbols/ext/Icons/noun_Pareto_diagram_626189.png',
12 | getDefaultConfig: function(){
13 | return {
14 | DataShape: "Timeseries",
15 | Height: 300,
16 | Width: 300,
17 | states: []
18 | }
19 | },
20 | inject: [ 'webServices' ]
21 | }
22 |
23 | function getConfig() {
24 | return {
25 | "type": "serial",
26 | "theme": "light",
27 | "dataProvider": "",
28 | "valueAxes": [{
29 | "id": "v1",
30 | "axisAlpha": 0,
31 | "position": "left"
32 | }, {
33 | "id": "v2",
34 | "axisAlpha": 0,
35 | "position": "right",
36 | "unit": "%",
37 | "gridAlpha": 0,
38 | "maximum": 100
39 | }],
40 | "startDuration": 1,
41 | "graphs": [{
42 | "fillAlphas": 1,
43 | "fillColors": "#008000",
44 | "title": "reason",
45 | "type": "column",
46 | "valueField": "occurrences"
47 | }, {
48 | "valueAxis": "v2",
49 | "bullet": "round",
50 | "lineThickness": 3,
51 | "bulletSize": 7,
52 | "bulletBorderAlpha": 1,
53 | "bulletColor": "#FFFFFF",
54 | "useLineColorForBulletBorder": true,
55 | "fillAlphas": 0,
56 | "lineAlpha": 1,
57 | "title": "Percent",
58 | "valueField": "percent"
59 | }],
60 | "categoryField": "state",
61 | "categoryAxis": {
62 | "gridPosition": "start",
63 | "axisAlpha": 0,
64 | "tickLength": 0
65 | }
66 | }
67 | }
68 |
69 |
70 | symbolVis.prototype.init = function(scope, elem, webServices) {
71 | var symbolContainerDiv = elem.find("#container")[0];
72 | symbolContainerDiv.id = "paretoChart_" + Math.random().toString(36).substr(2, 16);
73 | var chartConfig = getConfig();
74 | var chart;
75 | this.onDataUpdate = dataUpdate;
76 |
77 | var states = [];
78 | webServices.getDefaultStates(scope.symbol.DataSources[0]).promise.then(function(response){
79 | states = response.data.States;
80 | if (scope.config.states != states) {
81 | scope.config.states = states;
82 | }
83 | });
84 |
85 | function dataUpdate(newdata) {
86 | if(!newdata || !states.length > 0) return;
87 | if(!chart) { chart = AmCharts.makeChart(symbolContainerDiv.id, chartConfig); }
88 |
89 | chart.dataProvider = convertToChartFormat(newdata);
90 | chart.validateData();
91 | }
92 |
93 | function convertToChartFormat(data) {
94 | var valArray = data.Data[0].Values.map(function(item){ return item.Value});
95 |
96 | var countedStates = valArray.reduce(function(allValues, state){
97 | if (state in allValues) {
98 | allValues[state]++;
99 | } else {
100 | allValues[state] = 1;
101 | }
102 | return allValues;
103 | }, {});
104 |
105 | var totalStates = valArray.length;
106 |
107 | var dataProvider = states.map(function(item){
108 | var occurances = countedStates[item.Name] || 0;
109 | return {
110 | "state": item.Name,
111 | "occurrences": occurances,
112 | "percent": (occurances / totalStates) * 100
113 | }
114 | });
115 |
116 | dataProvider.sort(function(a, b){ return b.occurrences - a.occurrences});
117 | for(var i = 0, j = dataProvider.length - 1; i < j; i++) {
118 | dataProvider[i+1].percent += dataProvider[i].percent;
119 | }
120 | return dataProvider;
121 | }
122 | }
123 |
124 | PV.symbolCatalog.register(definition);
125 |
126 | })(window.PIVisualization);
127 |
128 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/playback control/README.md:
--------------------------------------------------------------------------------
1 | # Playback Pane using PI Vision Extensibility
2 |
3 | For more information, please see [Creating Playback Pane using PI Vision Extensibility CTP](https://pisquare.osisoft.com/people/jgolla/blog/2016/05/10/creating-playback-pane-using-pi-coresight-extensibility-ctp).
--------------------------------------------------------------------------------
/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/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/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/plotly-3dsurface/plotly-3dsurface.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/plotly-3dsurface/plotly-3dsurface.png
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/plotly-3dsurface/sym-plotly-3dsurface-config.html:
--------------------------------------------------------------------------------
1 |
16 | 17 | 21 |
22 | 23 | 26 |
27 |
29 |
30 |
33 |
34 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/plotly-3dsurface/sym-plotly-3dsurface-template.html:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/rss symbol/README.md:
--------------------------------------------------------------------------------
1 | # RSS Symbol using PI Vision Extensibility
2 |
3 | For more information, please see [Adding RSS Feed as a symbol to PI Vision using the extensibility model](https://pisquare.osisoft.com/people/jgolla/blog/2016/07/13/adding-rss-feed-to-pi-coresight-using-the-extensibility-model).
4 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/rss symbol/sym-rssfeed-template.html:
--------------------------------------------------------------------------------
1 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/rss symbol/sym-rssfeed.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 | function symbolVis() { }
20 | CS.deriveVisualizationFromBase(symbolVis);
21 |
22 | symbolVis.prototype.init = function (scope, elem, log) {
23 |
24 | this.onDataUpdate = dataUpdate;
25 |
26 | var feedURL;
27 | var container = elem.find('#container');
28 |
29 | function dataUpdate(data) {
30 | if(data) {
31 | if(isValidURL(data.Value)) {
32 | feedURL = data.Value;
33 | } else {
34 | log.add('RSS Feed', log.Severity.Error, 'Invalid URL for RSS feed (' + data.Value + ')');
35 | }
36 |
37 | if(data.Path) {
38 | getFeedData();
39 | }
40 | }
41 | }
42 |
43 | function getFeedData() {
44 | $.ajax('https://crossorigin.me/' + feedURL).then(function(result) {
45 | // create the unordered list
46 | var $ul = $('