--------------------------------------------------------------------------------
/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/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/namevaluetable/icons/namevaluetable.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/Amway.China/namevaluetable/icons/namevaluetable.png
--------------------------------------------------------------------------------
/Community Samples/Amway.China/namevaluetable/sym-namevaluetable-template.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Community Samples/Amway.China/namevaluetable/sym-namevaluetable.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 |
25 | var container = elem.find('#container')[0];
26 | var id = 'namevaluetable_' + Math.random().toString(36).substr(2, 16);
27 | container.id = id;
28 | function GetRealName(name){
29 | var realName = "";
30 | var length = name.length;
31 | var lastIndexOf = name.indexOf("|");
32 | if(length>0 && lastIndexOf 0) {
58 | $("").attr({rel:"stylesheet",type:"text/css",href:"../PIVision/Scripts/app/editor/symbols/ext/css/extend.css"}).appendTo("head");
59 | chart = "
";
60 | var line;
61 | var lines = "";
62 | series.forEach(function(obj){
63 | line = "
";
70 | $(container).append(chart);
71 | $("tr:odd").addClass("odd");
72 | $("tr:even").addClass("even");
73 | }
74 | }
75 | }
76 | };
77 |
78 | var definition = {
79 | typeName: 'namevaluetable',
80 | displayName: 'namevaluetable',
81 | datasourceBehavior: CS.Extensibility.Enums.DatasourceBehaviors.Multiple,
82 | iconUrl: '/Scripts/app/editor/symbols/ext/icons/namevaluetable.png',
83 | visObjectType: symbolVis,
84 | getDefaultConfig: function() {
85 | return {
86 | DataShape: 'TimeSeries',
87 | DataQueryMode: CS.Extensibility.Enums.DataQueryMode.ModePlotValues,
88 | Interval: 400,
89 | Height: 150,
90 | Width: 150
91 | };
92 | }
93 | };
94 |
95 | CS.symbolCatalog.register(definition);
96 | })(window.PIVisualization);
--------------------------------------------------------------------------------
/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/Amway.China/simplevalue/icons/simplevalue.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/Amway.China/simplevalue/icons/simplevalue.png
--------------------------------------------------------------------------------
/Community Samples/Amway.China/simplevalue/sym-simplevalue-config.html:
--------------------------------------------------------------------------------
1 |
16 |
17 |
--------------------------------------------------------------------------------
/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 |
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/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 |
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 |
--------------------------------------------------------------------------------
/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 |
5 |
6 |
--------------------------------------------------------------------------------
/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/af-table/pagination.html:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/af-table/sym-aftable-config.html:
--------------------------------------------------------------------------------
1 |
16 |
17 |
18 |
19 | General
20 |
21 |
22 |
23 |
24 |
AF Server
25 |
26 |
27 |
28 |
29 |
30 |
31 |
AF Database
32 |
33 |
34 |
35 |
36 |
37 |
AF Table
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | About
48 |
49 |
50 |
51 | This is an example of custom symbol made with the PI Vision Extensibility Framework.
52 |
--------------------------------------------------------------------------------
/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);
--------------------------------------------------------------------------------
/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/amcharts-bar/bar-chart-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/amcharts-bar/bar-chart-icon.png
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/amcharts-bar/sym-amcharts-bar-template.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/amcharts-bar/sym-amcharts-bar.js:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | # ***********************************************************************
4 | # * DISCLAIMER:
5 | # *
6 | # * All sample code is provided by OSIsoft for illustrative purposes only.
7 | # * These examples have not been thoroughly tested under all conditions.
8 | # * OSIsoft provides no guarantee nor implies any reliability,
9 | # * serviceability, or function of these programs.
10 | # * ALL PROGRAMS CONTAINED HEREIN ARE PROVIDED TO YOU "AS IS"
11 | # * WITHOUT ANY WARRANTIES OF ANY KIND. ALL WARRANTIES INCLUDING
12 | # * THE IMPLIED WARRANTIES OF NON-INFRINGEMENT, MERCHANTABILITY
13 | # * AND FITNESS FOR A PARTICULAR PURPOSE ARE EXPRESSLY DISCLAIMED.
14 | # ************************************************************************
15 | #
16 | # Updated by dlopez@osisoft.com
17 | # Visualizations provided by amCharts: https://www.amcharts.com/
18 | #
19 | **/
20 |
21 | //************************************
22 | // Begin defining a new symbol
23 | //************************************
24 | (function (CS) {
25 | //'use strict';
26 |
27 | var myCustomSymbolDefinition = {
28 |
29 | typeName: 'amcharts-bar',
30 | displayName: 'amCharts Bar Chart',
31 | datasourceBehavior: CS.Extensibility.Enums.DatasourceBehaviors.Multiple,
32 | iconUrl: '/Scripts/app/editor/symbols/ext/Icons/bar-chart-icon.png',
33 | visObjectType: symbolVis,
34 | getDefaultConfig: function () {
35 | return {
36 | //
37 | DataShape: 'Table',
38 | Height: 300,
39 | Width: 600,
40 | minimumValue: 0,
41 | maximumValue: 100,
42 | binSize: 10,
43 | showTitle: true,
44 | textColor: "black",
45 | backgroundColor: "white",
46 | plotAreaFillColor: "white",
47 | fontSize: 14,
48 | useBarsInsteadOfColumns: false,
49 | sortBinsByValue: false,
50 | useGradientBinColors: true,
51 | seriesColor: "red"
52 | };
53 | },
54 |
55 | configOptions: function () {
56 | return [{
57 | title: 'Format Symbol',
58 | mode: 'format'
59 | }];
60 | },
61 |
62 | };
63 |
64 |
65 | function symbolVis() { }
66 | CS.deriveVisualizationFromBase(symbolVis);
67 |
68 | symbolVis.prototype.init = function(scope, elem) {
69 | this.onDataUpdate = dataupdate;
70 |
71 | var labels = getLabels(scope.symbol.DataSources);
72 |
73 | var chart = initChart();
74 |
75 |
76 |
77 | function initChart(){
78 |
79 | var symbolContainerDiv = elem.find('#container')[0];
80 | symbolContainerDiv.id = "myCustomSymbol_" + Math.random().toString(36).substr(2, 16);
81 |
82 | //var dataprovider = labels.map(function(label){return {StreamName: label}});
83 |
84 | var chartconfig = getChartConfig();
85 |
86 | var customVisualizationObject = AmCharts.makeChart(symbolContainerDiv.id, chartconfig);
87 | return customVisualizationObject;
88 | }
89 |
90 | function getLabels(datasources){
91 | return datasources.map(function(item){
92 | var isAttribute = /af:/.test(item);
93 | var label = isAttribute ? item.match(/\w*\|.*$/)[0] : item.match(/\w+$/)[0];
94 | return {Label: label};
95 | });
96 | }
97 |
98 | //the data object us supplied by Coresight data layer.
99 | function dataupdate(newdata) {
100 |
101 |
102 | if (!newdata || !chart) return;
103 | if(!labels) labels = getLabels(scope.symbol.DataSources);
104 | //if Rows have Label => either configuration is updated
105 | if(newdata.Rows[0].Label) labels = newdata.Rows.map(function(item){return {Label: item.Label}});
106 | var dataprovider = convertToChartDataFormat(newdata, labels);
107 |
108 | chart.dataProvider = dataprovider;
109 | chart.validateData();
110 |
111 |
112 | }
113 |
114 | function convertToChartDataFormat(newdata, labels) {
115 | return newdata.Rows.map(function(item, index){
116 | return {Value: item.Value, Time: item.Time, StreamName: labels[index].Label}
117 | });
118 | }
119 |
120 |
121 | function getChartConfig() {
122 | return {
123 | "type": "serial",
124 | "theme": "light",
125 | "backgroundAlpha": 1,
126 | //"backgroundColor": scope.config.backgroundColor,
127 | //"color": scope.config.textColor,
128 | "plotAreaFillAlphas": 1,
129 | //"plotAreaFillColors": scope.config.plotAreaFillColor,
130 | "fontFamily": "arial",
131 | "marginRight": 30,
132 | //"creditsPosition": "bottom-right",
133 | //"titles": createArrayOfChartTitles(),
134 | //"fontSize": 12,
135 | //"rotate": scope.config.useBarsInsteadOfColumns,
136 | "valueAxes": [{
137 | "position": "left",
138 | "title": "Value"
139 | }],
140 | "categoryAxis": {
141 | "title": "Attribute"
142 | },
143 | "graphs": [{
144 | "type": "column",
145 | "fillAlphas": 1,
146 | "balloonText": " [[StreamName]] 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 |
34 | Zone 1
35 |
36 |
37 |
38 |
39 |
43 |
47 |
48 |
49 |
50 | Zone 2
51 |
52 |
53 |
54 |
55 |
59 |
60 |
61 |
62 | Zone 3
63 |
64 |
65 |
66 |
67 |
71 |
72 |
73 |
74 | Zone 4
75 |
76 |
77 |
78 |
79 |
83 |
84 |
85 |
86 | Zone 5
87 |
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 |
18 | Text
19 |
20 |
21 |
22 |
23 |
27 |
31 |
32 |
33 |
34 | Background
35 |
36 |
37 |
38 |
39 |
40 |
41 | Plot Area
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 | Series
50 |
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 |
18 | Background
19 |
20 |
21 |
22 |
23 |
24 |
25 | Outline
26 |
27 |
28 |
29 |
30 |
31 |
32 | Text
33 |
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 |
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/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 |
17 | Text
18 |
19 |
20 |
21 |
22 |
26 |
30 |
31 |
32 | Background
33 |
34 |
35 |
36 |
37 |
38 |
39 | Plot Area
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | Series
48 |
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 |
17 | Bullet
18 |
19 |
20 |
21 |
22 |
26 |
30 |
42 |
43 |
44 |
45 | Cursor
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 | Trend Line
54 |
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
--------------------------------------------------------------------------------
/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/OSIsoft/dropdown-menu/trashcan.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/dropdown-menu/trashcan.png
--------------------------------------------------------------------------------
/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/embedWebPage/embedWebPage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/embedWebPage/embedWebPage.png
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/embedWebPage/sym-embedWebPage-config.html:
--------------------------------------------------------------------------------
1 |
16 |
17 |
URL:
18 |
22 |
23 |
24 |
Enable Refresh:
25 |
28 |
29 |
30 |
Refresh Interval (seconds):
31 |
35 |
36 |
--------------------------------------------------------------------------------
/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--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);
--------------------------------------------------------------------------------
/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/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 | Color Format
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/gantt/sym-ganttchart-template.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/gantt/sym-ganttchart.js:
--------------------------------------------------------------------------------
1 | (function (PV) {
2 | 'use strict';
3 |
4 | function symbolVis() { };
5 | PV.deriveVisualizationFromBase(symbolVis);
6 |
7 | var definition = {
8 | typeName: "ganttchart",
9 | visObjectType: symbolVis,
10 | datasourceBehavior: PV.Extensibility.Enums.DatasourceBehaviors.Single,
11 | getDefaultConfig: function(){
12 | return {
13 | DataShape: "Timeseries",
14 | Height: 150,
15 | Width: 400,
16 | colors: []
17 | }
18 | },
19 | configOptions: function () {
20 | return [{
21 | title: 'Format Symbol',
22 | mode: 'default'
23 | }];
24 | },
25 | inject: [ 'webServices' ]
26 | }
27 |
28 | function getConfig() {
29 | return {
30 | "type": "gantt",
31 | "theme": "light",
32 | "marginRight": 70,
33 | "period": "ss",
34 | "dataDateFormat": "YYYY/MM/DD HH:NN:SS",
35 | "columnWidth": 0.5,
36 | "valueAxis": {
37 | "type": "date",
38 | "minPeriod": "ss",
39 | "ignoreAxisWidth": true
40 | },
41 | "graph": {
42 | "lineAlpha": 1,
43 | "lineColor": "#fff",
44 | "fillAlphas": 0.85,
45 | "balloonText": "[[state]]: [[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 |
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--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/manual-data-entry/Example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/manual-data-entry/Example.png
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/manual-data-entry/GitHub-Mark-32px.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/manual-data-entry/GitHub-Mark-32px.png
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/manual-data-entry/Q.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/manual-data-entry/Q.png
--------------------------------------------------------------------------------
/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/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 | General
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | Column Settings
14 |
15 |
16 |
17 |
Default timestamp
18 |
19 |
20 |
21 |
Show Alternative Name
22 |
23 |
24 |
25 |
Show Attribute
26 |
27 |
28 |
29 |
Show Timestamp
30 |
31 |
32 |
33 |
Show Current Value
34 |
35 |
36 |
37 |
Value Width
38 |
39 |
40 |
41 |
42 |
43 |
44 | Row Settings
45 |
46 |
47 |
48 |
49 |
50 |
{{stream.Label}}
56 |
57 |
58 |
59 |
60 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 | Button Settings
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
Text
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
Width
90 |
91 |
92 |
93 |
Height
94 |
95 |
96 |
97 |
98 |
99 |
100 | About
101 |
102 |
103 |
104 | This is an example of custom symbol made with the PI Vision Extensibility Framework.
105 |
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 |
29 |
30 |
--------------------------------------------------------------------------------
/Community Samples/OSIsoft/navigation-close-current-tab/sym-nav-config.html:
--------------------------------------------------------------------------------
1 |
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 |
24 | Background
25 |
26 |
27 |
28 |
29 |
30 |
31 | Data Series
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/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 = $('