├── Community Samples ├── Amway.China │ ├── linechart │ │ ├── README.md │ │ ├── highcharts.js │ │ ├── sym-linechart-template.html │ │ └── sym-linechart.js │ ├── namevaluetable │ │ ├── README.md │ │ ├── icons │ │ │ └── namevaluetable.png │ │ ├── sym-namevaluetable-template.html │ │ └── sym-namevaluetable.js │ ├── simplevalue │ │ ├── README.md │ │ ├── icons │ │ │ └── simplevalue.png │ │ ├── sym-simplevalue-config.html │ │ ├── sym-simplevalue-template.html │ │ └── sym-simplevalue.js │ └── statuslight │ │ ├── README.md │ │ ├── icons │ │ └── green.png │ │ ├── imgs │ │ ├── green.png │ │ ├── red.png │ │ ├── white.png │ │ └── yellow.png │ │ ├── sym-statuslight-config.html │ │ ├── sym-statuslight-template.html │ │ └── sym-statuslight.js ├── OSIsoft │ ├── HTML5video │ │ ├── HTML5video.png │ │ ├── README.md │ │ ├── sym-HTML5video-config.html │ │ ├── sym-HTML5video-template.html │ │ └── sym-HTML5video.js │ ├── README.md │ ├── advancedDataTable │ │ ├── Datatables.zip │ │ ├── README.md │ │ ├── advancedTimeSeriesDataTable.png │ │ ├── sym-advancedTimeSeriesDataTable-config.html │ │ ├── sym-advancedTimeSeriesDataTable-template.html │ │ └── sym-advancedTimeSeriesDataTable.js │ ├── af-table │ │ ├── README.MD │ │ ├── bootstrap.css │ │ ├── pagination.html │ │ ├── sym-aftable-config.html │ │ ├── sym-aftable-template.html │ │ └── sym-aftable.js │ ├── amcharts-bar │ │ ├── README.MD │ │ ├── bar-chart-icon.png │ │ ├── sym-amcharts-bar-template.html │ │ └── sym-amcharts-bar.js │ ├── amcharts-gauge │ │ ├── README.md │ │ ├── amcharts-radialgauge.png │ │ ├── sym-amcharts-RadialGauge-config.html │ │ ├── sym-amcharts-RadialGauge-template.html │ │ └── sym-amcharts-RadialGauge.js │ ├── amcharts-histogram │ │ ├── README.md │ │ ├── amcharts-histogram.png │ │ ├── sym-amcharts-histogram-config.html │ │ ├── sym-amcharts-histogram-template.html │ │ └── sym-amcharts-histogram.js │ ├── amcharts-linechart │ │ ├── ExampleofLineChart.png │ │ ├── GitHub-Mark-32px.png │ │ ├── LineChart.png │ │ ├── Q.png │ │ ├── README.MD │ │ ├── amcharts.js │ │ ├── dark.js │ │ ├── serial.js │ │ ├── sin-down.png │ │ ├── sin-right.png │ │ ├── sym-amcharts-linechart-config.html │ │ ├── sym-amcharts-linechart-template.html │ │ ├── sym-amcharts-linechart.js │ │ └── underscore-min.js │ ├── amcharts-pie │ │ ├── README.md │ │ ├── amcharts-pie.png │ │ ├── sym-amcharts-pie-config.html │ │ ├── sym-amcharts-pie-template.html │ │ └── sym-amcharts-pie.js │ ├── amcharts-radar │ │ ├── README.md │ │ ├── amcharts-radar.png │ │ ├── sym-amcharts-radar-config.html │ │ ├── sym-amcharts-radar-template.html │ │ ├── sym-amcharts-radar.js │ │ └── sym-amcharts-radar.png │ ├── amcharts-trend │ │ ├── README.md │ │ ├── amcharts-trend.png │ │ ├── sym-amcharts-trend-config.html │ │ ├── sym-amcharts-trend-template.html │ │ └── sym-amcharts-trend.js │ ├── amcharts-xyplot │ │ ├── README.md │ │ ├── amcharts-xyplot.png │ │ ├── sym-amcharts-xyplot-config.html │ │ ├── sym-amcharts-xyplot-template.html │ │ └── sym-amcharts-xyplot.js │ ├── dropdown-menu │ │ ├── Example.png │ │ ├── README.MD │ │ ├── dropdown-menu.css │ │ ├── sym-dropdown-menu-config.html │ │ ├── sym-dropdown-menu-template.html │ │ ├── sym-dropdown-menu.js │ │ └── trashcan.png │ ├── embedWebPage │ │ ├── README.md │ │ ├── embedWebPage.png │ │ ├── sym-embedWebPage-config.html │ │ ├── sym-embedWebPage-template.html │ │ └── sym-embedWebPage.js │ ├── event-creation-pane │ │ ├── README.MD │ │ ├── tool-efpicker-template.html │ │ └── tool-efpicker.js │ ├── gantt │ │ ├── README.MD │ │ ├── gantt-example.png │ │ ├── sym-ganttchart-config.html │ │ ├── sym-ganttchart-template.html │ │ └── sym-ganttchart.js │ ├── imageurl │ │ ├── README.md │ │ ├── imageurl.png │ │ ├── sym-imageurl-config.html │ │ ├── sym-imageurl-template.html │ │ └── sym-imageurl.js │ ├── manual-data-entry │ │ ├── Example.png │ │ ├── GitHub-Mark-32px.png │ │ ├── Q.png │ │ ├── README.MD │ │ ├── bootstrap-manual-entry.css │ │ ├── loading.gif │ │ ├── paper-plane-xxl.png │ │ ├── sym-sendvalue-config.html │ │ ├── sym-sendvalue-template.html │ │ ├── sym-sendvalue.js │ │ └── underscore-min.js │ ├── navigation-close-current-tab │ │ ├── README.MD │ │ ├── sym-nav-config.html │ │ ├── sym-nav-template.html │ │ └── sym-nav.js │ ├── pareto │ │ ├── README.MD │ │ ├── noun_Pareto_diagram_626189.png │ │ ├── pareto-example.png │ │ ├── sym-pareto-template.html │ │ └── sym-pareto.js │ ├── playback control │ │ ├── README.md │ │ ├── tool-playback-template.html │ │ └── tool-playback.js │ ├── plotly-3dsurface │ │ ├── README.md │ │ ├── plotly-3dsurface.png │ │ ├── sym-plotly-3dsurface-config.html │ │ ├── sym-plotly-3dsurface-template.html │ │ └── sym-plotly-3dsurface.js │ ├── rss symbol │ │ ├── README.md │ │ ├── sym-rssfeed-template.html │ │ └── sym-rssfeed.js │ ├── single-manual-data-entry │ │ ├── Reset.png │ │ ├── loading.gif │ │ ├── sym-updatevalue-config.html │ │ ├── sym-updatevalue-template.html │ │ └── sym-updatevalue.js │ ├── snapshotDataTable │ │ ├── README.md │ │ ├── snapshotDataTable.png │ │ ├── sym-snapshotDataTable-config.html │ │ ├── sym-snapshotDataTable-template.html │ │ └── sym-snapshotDataTable.js │ └── timeSeriesDataTable │ │ ├── README.md │ │ ├── sym-timeSeriesDataTable-config.html │ │ ├── sym-timeSeriesDataTable-template.html │ │ ├── sym-timeSeriesDataTable.js │ │ └── timeSeriesDataTable.png └── README.md ├── LICENSE ├── README.md └── tutorials ├── README.md ├── liquidgauge ├── README.md ├── sym-liquidgauge-template.html └── sym-liquidgauge.js ├── simplevalue ├── README.md ├── sym-simplevalue-config.html ├── sym-simplevalue-template.html └── sym-simplevalue.js └── timeserieschart ├── README.md ├── sym-timeserieschart-template.html └── sym-timeserieschart.js /Community Samples/Amway.China/linechart/README.md: -------------------------------------------------------------------------------- 1 | Follow these simple instructions to install this custom symbol; the overall process should only take a minutes. 2 | 3 | 1. In Windows Explorer, navigate to the "PIPC\PIVision" installation folder on your PI Vision server; typically, it's located in "C:\Program Files\PIPC\PIVision" 4 | 5 | 2. From within the folder named "PIVision", navigate to the "\Scripts\app\editor\symbols" sub-folder. 6 | 7 | 3. Within the folder named "symbols", if there is not already a folder called "ext", create a folder called "ext". 8 | 9 | 4. The Symbol will use hightchart, you pasted "hightcharts.js" into "ext" folder directly, you will find the hightcharts.js in svn "linechart" folder, the hightchart version is 4.2.3. 10 | 11 | 5. Paste into the "ext" folder the "sym-linechart.js" and "sym-linechart-template.html". 12 | 13 | 6. In PI System Explorer, Create Element Attribute, Value Type: String, Value [{name: '短暂停机123',data: [20]}, {name: '包装瑕疵材料',data: [12]}, {name: '生产前准备',data: [7]}] 14 | 15 | The next time you open a web browser and navigate to PI Vision and create a new PI Vision display, you will see this new symbol appear in the top-left-hand corner of the PI Vision display editor. -------------------------------------------------------------------------------- /Community Samples/Amway.China/linechart/sym-linechart-template.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /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 = ""; 64 | line = line + ""; 65 | line = line + ""; 66 | line = line + ""; 67 | lines = lines + line; 68 | }); 69 | chart = chart + lines + "
" + obj.name + "" + obj.data[0][1] + "
"; 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 |
18 | Text Color 19 |
20 |
21 | 22 |
23 |
24 | Background Color 25 |
26 |
27 | 28 |
29 |
30 | Show Options 31 |
32 |
Show Label: 33 | 34 |
35 |
Show Time: 36 | 37 |
-------------------------------------------------------------------------------- /Community Samples/Amway.China/simplevalue/sym-simplevalue-template.html: -------------------------------------------------------------------------------- 1 | 16 | 17 |
18 |
{{value}}
19 |
-------------------------------------------------------------------------------- /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 = "white"; 53 | if(dataValue > redMax) 54 | selectlight = "white"; 55 | if(dataValue > redMin && dataValue <= redMax) 56 | selectlight = "red"; 57 | if(dataValue > yellowMin && dataValue <=yellowMax) 58 | selectlight = "yellow";; 59 | if(dataValue > greenMin && dataValue <=greenMax) 60 | selectlight = "green"; 61 | if(dataValue <= whiteMax) 62 | selectlight = "white"; 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 | -------------------------------------------------------------------------------- /Community Samples/OSIsoft/af-table/sym-aftable-template.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 35 | 36 | 37 |
20 | 21 |
{{col}}
{{row[col]}}
33 |
34 |
-------------------------------------------------------------------------------- /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 | Line Chart for PI Coresight 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
70 | 71 |
72 | 76 | 80 | 84 | 88 | 92 | 96 |
-------------------------------------------------------------------------------- /Community Samples/OSIsoft/amcharts-xyplot/sym-amcharts-xyplot-template.html: -------------------------------------------------------------------------------- 1 | 16 |
-------------------------------------------------------------------------------- /Community Samples/OSIsoft/dropdown-menu/Example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/dropdown-menu/Example.png -------------------------------------------------------------------------------- /Community Samples/OSIsoft/dropdown-menu/README.MD: -------------------------------------------------------------------------------- 1 | ## DropDown Menu symbol 2 | 3 | This symbol is a work in progress. 4 | 5 | This symbol is for PI Vision version 2017. 6 | 7 | DropDown Menu for PI Vision 9 | 10 | ## To deploy the symbol: 11 | 12 | 1. In Windows Explorer, navigate to the "%PIHOME%\PIVision\Scripts\app\editor\symbols\ext" on your PI Vision web server; typically, it's located in "C:\Program Files\PIPC\PIVision\Scripts\app\editor\symbols\ext". 13 | If this folder doesn't exist, create it. 14 | 15 | 2. Place the following symbol files to the .\ext folder 16 | 17 | *sym-dropdown-menu-template.html* 18 | 19 | *sym-dropdown-menu-config.html* 20 | 21 | *sym-dropdown-menu.js* 22 | 23 | *dropdown-menu.css* 24 | 25 | 3. Place all files with *.png* extension to the .\ext\Icons directory (create if it doesn't exist) 26 | 6. Run iisreset 27 | -------------------------------------------------------------------------------- /Community Samples/OSIsoft/dropdown-menu/dropdown-menu.css: -------------------------------------------------------------------------------- 1 | ul.custom-menu { 2 | list-style-type: none; 3 | margin: 0; 4 | padding: 0; 5 | overflow: hidden; 6 | } 7 | 8 | ul.custom-menu > li { 9 | float: left; 10 | } 11 | 12 | ul.custom-menu li 13 | ul.custom-menu a, 14 | .custom-dropdown-button { 15 | display: inline-block; 16 | color: white; 17 | text-align: center; 18 | padding: 14px 16px; 19 | text-decoration: none; 20 | background-color: #2a3e5d; 21 | } 22 | 23 | ul.custom-menu li a:hover, .custom-dropdown:hover .custom-dropdown-button { 24 | background-color: #2a3e5d; 25 | } 26 | 27 | li.custom-dropdown { 28 | display: inline-block; 29 | } 30 | 31 | .custom-cursor-pointer { 32 | cursor: pointer; 33 | } 34 | 35 | .custom-dropdown-content { 36 | display: none; 37 | position: absolute; 38 | background-color: #f9f9f9; 39 | min-width: 160px; 40 | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 41 | z-index: 1; 42 | } 43 | 44 | .custom-dropdown-content a { 45 | color: black; 46 | padding: 12px 16px; 47 | text-decoration: none; 48 | display: block; 49 | text-align: left; 50 | } 51 | 52 | .custom-dropdown-content a:hover {background-color: #f1f1f1} 53 | 54 | .custom-dropdown:hover .custom-dropdown-content { 55 | display: block; 56 | } 57 | 58 | table.custom-config-table { 59 | font-family: arial, sans-serif; 60 | border-collapse: collapse; 61 | width: 100%; 62 | } 63 | 64 | table.custom-config-table td, 65 | table.custom-config-table th { 66 | border: 1px solid #dddddd; 67 | text-align: left; 68 | padding: 8px; 69 | } 70 | 71 | table.custom-config-table tr:nth-child(even) { 72 | background-color: #FFFFFF; 73 | } 74 | 75 | table.custom-config-table tbody > tr > td { 76 | text-align: left; 77 | vertical-align: middle; 78 | } 79 | 80 | table.custom-config-table tbody > tr > td > input { 81 | background-color: transparent; 82 | border-color: transparent; 83 | } 84 | 85 | button.custom-config-button { 86 | background-color: #2a3e5d; 87 | color: #fff; 88 | float: right; 89 | height: 25px; 90 | width: 40%; 91 | text-shadow: 0 -1px 0 rgba(0,0,0,.25); 92 | margin-left: auto; 93 | border: 1px solid rgba(230,231,232,.55); 94 | } 95 | 96 | .removebutton { 97 | width: 40%; 98 | max-width: 30px; 99 | margin-left: auto; 100 | display: block; 101 | margin: 0 auto; 102 | outline: none; 103 | } 104 | 105 | .custom-disabled { 106 | color: currentColor; 107 | cursor: not-allowed; 108 | opacity: 0.5; 109 | text-decoration: none; 110 | } -------------------------------------------------------------------------------- /Community Samples/OSIsoft/dropdown-menu/sym-dropdown-menu-config.html: -------------------------------------------------------------------------------- 1 | 55 | -------------------------------------------------------------------------------- /Community Samples/OSIsoft/dropdown-menu/sym-dropdown-menu-template.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /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 | Event Creation Pane for PI Vision 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 | Gantt Chart for PI Vision 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 |
17 |
URL Prefix: 18 | 22 |
23 |
24 |
Enable URL Prefix: 25 | 28 |
29 |
30 |
No Data URL: 31 | 35 |
36 |
-------------------------------------------------------------------------------- /Community Samples/OSIsoft/imageurl/sym-imageurl-template.html: -------------------------------------------------------------------------------- 1 | 16 | 17 |
18 | 19 |
20 | Settings 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Community Samples/OSIsoft/imageurl/sym-imageurl.js: -------------------------------------------------------------------------------- 1 | /*************************************************************************** 2 | Copyright 2017 OSIsoft, LLC. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | ***************************************************************************/ 16 | 17 | //************************************ 18 | // Begin defining a new symbol 19 | //************************************ 20 | (function (CS) { 21 | 'use strict'; 22 | // Specify the symbol definition 23 | var myCustomSymbolDefinition = { 24 | // Specify the unique name for this symbol; this instructs PI Vision to also 25 | // look for HTML template and config template files called sym--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 | Manual Data Entry for PI Coresight 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 | Manual Data Entry for PI Coresight 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 |
    106 |
    107 | 108 | GitHub repository with source code 109 | 110 | Explore source code. 111 |
    112 |
    113 | 114 | PI Square public forum 115 | 116 | Need help? Ask PI Square. 117 |
    118 |
    119 |
  • 120 |
121 | -------------------------------------------------------------------------------- /Community Samples/OSIsoft/manual-data-entry/sym-sendvalue-template.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 22 | 23 | 24 | 25 | 26 |
NameAttributeTimestampEnter ValueCurrent ValueSelect All
{{stream.Label}} 19 | 20 | 21 | {{stream.CurrentValue}} {{stream.UOM}}
27 |
28 | 29 | 40 | -------------------------------------------------------------------------------- /Community Samples/OSIsoft/navigation-close-current-tab/README.MD: -------------------------------------------------------------------------------- 1 | ## Close Current Tab symbol 2 | 3 | This symbol is a work in progress. 4 | 5 | This symbol is for PI Vision version 2017. 6 | 7 | 8 | ## To deploy the symbol: 9 | 10 | 1. In Windows Explorer, navigate to the "%PIHOME%\PIVision\Scripts\app\editor\symbols\ext" on your PI Vision web server; typically, it's located in "C:\Program Files\PIPC\PIVision\Scripts\app\editor\symbols\ext". 11 | If this folder doesn't exist, create it. 12 | 13 | 2. Place the following symbol files to the .\ext folder 14 | 15 | *sym-nav-template.html* 16 | 17 | *sym-nav-config.html* 18 | 19 | *sym-nav.js* 20 | 21 | 6. Run iisreset 22 | 23 | 24 | ## Quick Demo Video 25 | 26 | Close Current Tab symbol for PI Vision 29 | 30 | -------------------------------------------------------------------------------- /Community Samples/OSIsoft/navigation-close-current-tab/sym-nav-config.html: -------------------------------------------------------------------------------- 1 |
    2 |
  • 3 | 4 | General 5 | 6 |
    7 | 8 |
    9 |
    Text:
    10 | 11 | 12 | 13 |
    14 | 15 |
    16 | 17 |
    18 |
    19 | 20 |
    21 | 22 | 23 |
    24 | placeholder for text size 25 | 26 |
    27 |
    28 | placeholder for underline, bol, italic 29 | 30 |
    31 |
    32 | 33 | 34 |
  • 35 | 36 | 37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /Community Samples/OSIsoft/navigation-close-current-tab/sym-nav-template.html: -------------------------------------------------------------------------------- 1 |
{{ config.Text }}
-------------------------------------------------------------------------------- /Community Samples/OSIsoft/navigation-close-current-tab/sym-nav.js: -------------------------------------------------------------------------------- 1 | (function (PV) { 2 | "use strict"; 3 | 4 | function symbolVis() { }; 5 | PV.deriveVisualizationFromBase(symbolVis); 6 | 7 | var definition = { 8 | typeName: "nav", 9 | visObjectType: symbolVis, 10 | datasourceBehavior: PV.Extensibility.Enums.DatasourceBehaviors.Single, 11 | getDefaultConfig: function(){ 12 | return { 13 | Height: 150, 14 | Width: 150, 15 | Text: "Text", 16 | BackgroundColor: "", 17 | TextColor: "#FFFFFF" 18 | 19 | } 20 | } , 21 | configOptions: function(){ 22 | return [{ 23 | title:"Format", 24 | mode: "format" 25 | 26 | }] 27 | } 28 | } 29 | 30 | symbolVis.prototype.init = function(scope, elem) { 31 | 32 | scope.closeCurrentTab = function(){ 33 | window.close(); 34 | 35 | } 36 | }; 37 | 38 | PV.symbolCatalog.register(definition); 39 | })(window.PIVisualization); 40 | -------------------------------------------------------------------------------- /Community Samples/OSIsoft/pareto/README.MD: -------------------------------------------------------------------------------- 1 | 2 | ## Pareto chart symbol 3 | 4 | 5 | This symbol is for PI Vision version 2017 and 2017 R2. 6 | This is just a prototype, no bad data validation or error reporting. Use it with digital type data. 7 | 8 | 9 | Pareto Chart for PI Vision 11 | 12 | ## To deploy the symbol: 13 | 14 | 1. In Windows Explorer, navigate to the "%PIHOME%\PIVision\Scripts\app\editor\symbols\ext" on your PI Vision web server; typically, it's located in "C:\Program Files\PIPC\PIVision\Scripts\app\editor\symbols\ext". 15 | If this folder doesn't exist, create it. 16 | 17 | 2. Place the following symbol files to the .\ext folder 18 | 19 | *sym-pareto-template.html* 20 | 21 | *sym-pareto.js* 22 | 23 | 3. Download amCharts Javascript library from https://www.amcharts.com/download/ 24 | Place *serial.js* and *amcharts.js* to .\ext\libraries folder 25 | 26 | 4. Place *pareto-example.png* to the .ext\Icons\ folder (create it if it doesn't exist) 27 | Chart Icon credit: Pareto diagram by Kirby Wu from the Noun Project 28 | -------------------------------------------------------------------------------- /Community Samples/OSIsoft/pareto/noun_Pareto_diagram_626189.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/pareto/noun_Pareto_diagram_626189.png -------------------------------------------------------------------------------- /Community Samples/OSIsoft/pareto/pareto-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/pareto/pareto-example.png -------------------------------------------------------------------------------- /Community Samples/OSIsoft/pareto/sym-pareto-template.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /Community Samples/OSIsoft/pareto/sym-pareto.js: -------------------------------------------------------------------------------- 1 | (function (PV) { 2 | 'use strict'; 3 | 4 | function symbolVis() { }; 5 | PV.deriveVisualizationFromBase(symbolVis); 6 | 7 | var definition = { 8 | typeName: "pareto", 9 | visObjectType: symbolVis, 10 | datasourceBehavior: PV.Extensibility.Enums.DatasourceBehaviors.Single, 11 | iconUrl:'/Scripts/app/editor/symbols/ext/Icons/noun_Pareto_diagram_626189.png', 12 | getDefaultConfig: function(){ 13 | return { 14 | DataShape: "Timeseries", 15 | Height: 300, 16 | Width: 300, 17 | states: [] 18 | } 19 | }, 20 | inject: [ 'webServices' ] 21 | } 22 | 23 | function getConfig() { 24 | return { 25 | "type": "serial", 26 | "theme": "light", 27 | "dataProvider": "", 28 | "valueAxes": [{ 29 | "id": "v1", 30 | "axisAlpha": 0, 31 | "position": "left" 32 | }, { 33 | "id": "v2", 34 | "axisAlpha": 0, 35 | "position": "right", 36 | "unit": "%", 37 | "gridAlpha": 0, 38 | "maximum": 100 39 | }], 40 | "startDuration": 1, 41 | "graphs": [{ 42 | "fillAlphas": 1, 43 | "fillColors": "#008000", 44 | "title": "reason", 45 | "type": "column", 46 | "valueField": "occurrences" 47 | }, { 48 | "valueAxis": "v2", 49 | "bullet": "round", 50 | "lineThickness": 3, 51 | "bulletSize": 7, 52 | "bulletBorderAlpha": 1, 53 | "bulletColor": "#FFFFFF", 54 | "useLineColorForBulletBorder": true, 55 | "fillAlphas": 0, 56 | "lineAlpha": 1, 57 | "title": "Percent", 58 | "valueField": "percent" 59 | }], 60 | "categoryField": "state", 61 | "categoryAxis": { 62 | "gridPosition": "start", 63 | "axisAlpha": 0, 64 | "tickLength": 0 65 | } 66 | } 67 | } 68 | 69 | 70 | symbolVis.prototype.init = function(scope, elem, webServices) { 71 | var symbolContainerDiv = elem.find("#container")[0]; 72 | symbolContainerDiv.id = "paretoChart_" + Math.random().toString(36).substr(2, 16); 73 | var chartConfig = getConfig(); 74 | var chart; 75 | this.onDataUpdate = dataUpdate; 76 | 77 | var states = []; 78 | webServices.getDefaultStates(scope.symbol.DataSources[0]).promise.then(function(response){ 79 | states = response.data.States; 80 | if (scope.config.states != states) { 81 | scope.config.states = states; 82 | } 83 | }); 84 | 85 | function dataUpdate(newdata) { 86 | if(!newdata || !states.length > 0) return; 87 | if(!chart) { chart = AmCharts.makeChart(symbolContainerDiv.id, chartConfig); } 88 | 89 | chart.dataProvider = convertToChartFormat(newdata); 90 | chart.validateData(); 91 | } 92 | 93 | function convertToChartFormat(data) { 94 | var valArray = data.Data[0].Values.map(function(item){ return item.Value}); 95 | 96 | var countedStates = valArray.reduce(function(allValues, state){ 97 | if (state in allValues) { 98 | allValues[state]++; 99 | } else { 100 | allValues[state] = 1; 101 | } 102 | return allValues; 103 | }, {}); 104 | 105 | var totalStates = valArray.length; 106 | 107 | var dataProvider = states.map(function(item){ 108 | var occurances = countedStates[item.Name] || 0; 109 | return { 110 | "state": item.Name, 111 | "occurrences": occurances, 112 | "percent": (occurances / totalStates) * 100 113 | } 114 | }); 115 | 116 | dataProvider.sort(function(a, b){ return b.occurrences - a.occurrences}); 117 | for(var i = 0, j = dataProvider.length - 1; i < j; i++) { 118 | dataProvider[i+1].percent += dataProvider[i].percent; 119 | } 120 | return dataProvider; 121 | } 122 | } 123 | 124 | PV.symbolCatalog.register(definition); 125 | 126 | })(window.PIVisualization); 127 | 128 | -------------------------------------------------------------------------------- /Community Samples/OSIsoft/playback control/README.md: -------------------------------------------------------------------------------- 1 | # Playback Pane using PI Vision Extensibility 2 | 3 | For more information, please see [Creating Playback Pane using PI Vision Extensibility CTP](https://pisquare.osisoft.com/people/jgolla/blog/2016/05/10/creating-playback-pane-using-pi-coresight-extensibility-ctp). -------------------------------------------------------------------------------- /Community Samples/OSIsoft/playback control/tool-playback-template.html: -------------------------------------------------------------------------------- 1 | 16 | 17 |
Playback
18 | Number of increments: 19 | Time to jump: 20 | Playback speed: 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Community Samples/OSIsoft/playback control/tool-playback.js: -------------------------------------------------------------------------------- 1 | /*************************************************************************** 2 | Copyright 2016-2017 OSIsoft, LLC. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | ***************************************************************************/ 16 | 17 | (function (CS) { 18 | 'use strict'; 19 | 20 | var def = { 21 | typeName: 'playback', 22 | displayName: 'Playback', 23 | iconUrl: 'Images/chrome.custom_addin_crossed_tools.svg', 24 | inject: [ 'timeProvider', '$interval' ], 25 | init: init 26 | }; 27 | 28 | function init(scope, elem, timeProvider, $interval) { 29 | 30 | scope.options = { 31 | numberOfIncrements: 24, 32 | increaseIncrementTime: '+1h', 33 | incrementTimer: 500 34 | }; 35 | 36 | scope.isRunning = false; 37 | 38 | // create a variable to hold the return value from $interval for canceling 39 | var intervalTimer; 40 | scope.start = function() { 41 | scope.isRunning = true; 42 | 43 | // call the $interval function with a function that will be executed each time the timer is called 44 | // the next 2 parameters are how often it should run the function and how many times it should run the function 45 | intervalTimer = $interval(function(count) { 46 | timeProvider.requestNewTime( 47 | timeProvider.displayTime.start + scope.options.increaseIncrementTime, 48 | timeProvider.displayTime.end + scope.options.increaseIncrementTime, 49 | true); 50 | 51 | // if we are on the last increment, flip the isRunning flags 52 | if(count === scope.options.numberOfIncrements) { 53 | scope.isRunning = false; 54 | } 55 | }, scope.options.incrementTimer, scope.options.numberOfIncrements); 56 | }; 57 | 58 | scope.stop = function() { 59 | // when stop is pressed cancel the interval timer 60 | $interval.cancel(intervalTimer); 61 | scope.isRunning = false; 62 | }; 63 | } 64 | 65 | CS.toolCatalog.register(def); 66 | 67 | })(window.PIVisualization); -------------------------------------------------------------------------------- /Community Samples/OSIsoft/plotly-3dsurface/README.md: -------------------------------------------------------------------------------- 1 | Follow these simple instructions to install this custom symbol; the overall process should only take a minutes. 2 | 3 | 1. In Windows Explorer, navigate to the "PIPC\PIVision" installation folder on your PI Vision server; typically, it's located in "C:\Program Files\PIPC\PIVision" 4 | 5 | 2. From within the folder named "PIVision", navigate to the "\Scripts\app\editor\symbols" sub-folder. 6 | 7 | 3. Within the folder named "symbols", if there is not already a folder called "ext", create a folder called "ext". 8 | 9 | 4. This is a symbol that uses the free plotly library; thus, download the plotly library .js file, located at https://cdn.plot.ly/plotly-latest.min.js. Now that the "ext" folder exists, or already exits, copy and paste the plotly-latest.min.js file that you just downloaded into a subfolder in the "ext" folder named "libraries". 10 | 11 | 5. Now that the "ext" folder exists, or already exits, open it, and paste into the "ext" folder the one .js and two .html files contained in the custom symbol .ZIP folder that you were sent. 12 | 13 | 6. Within the folder named "ext", if there is not already a folder called "Icons", create a folder called "Icons". 14 | 15 | 7. Now that the "Icons" folder exists, or already exits, open it, and paste into the "Icons" folder the one .png image file contained in the custom symbol .ZIP folder that you were sent. 16 | 17 | The next time you open a web browser and navigate to PI Vision and create a new PI Vision display, you will see this new symbol appear in the top-left-hand corner of the PI Vision display editor. -------------------------------------------------------------------------------- /Community Samples/OSIsoft/plotly-3dsurface/plotly-3dsurface.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexjj/PI-Vision-Custom-Symbols/8b47f3b0352a98b11cfda5c6b3073a8f76919284/Community Samples/OSIsoft/plotly-3dsurface/plotly-3dsurface.png -------------------------------------------------------------------------------- /Community Samples/OSIsoft/plotly-3dsurface/sym-plotly-3dsurface-config.html: -------------------------------------------------------------------------------- 1 | 16 |
17 | 21 |
22 | 23 |
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 = $('