Skip navigation
All Places > All Things PI - Ask, Discuss, Connect > PI Visualization > Blog

About

This project is a Google Chrome extension that adds functionality for creating ad-hoc trends from multiple data items when viewing imported PI ProcessBook displays in PI Vision.  When viewing an imported PI ProcessBook display, it is now possible to multi-select data items (using Ctrl+Click or Shift+Click) and then create an ad-hoc trend from those data items using the button in the top bar.

screenDemo.gif

This extension is targeted at PI Vision 2017 R2 (3.3.x) and earlier. PI Vision 2019 will have similar functionality built in.

This extension is still in beta.  Please try it out and let me know if you run into any issues.

 

Removing the Screen Flash

When using the Ctrl+Click or Shift+Click on a display, PI Vision™ will still try to launch the standard overlay trend display, and the extension will immediately close it.  This will cause a quick flash on the screen as the trend is loaded and then closed.  This can be resolved by modifying the code for the click event listener in PI Vision.

 

Note: This is an unofficial workaround,  and will need to be repeated after upgrading PI Vision.  Line numbers listed are for PI Vision 2017 R2, but may be different in other versions.

 

The following modification to the file will not show the trend popup if Ctrl or Shift are pressed:

File: %pihome64%\PIVision\Scripts\app\pbviewer\pbviewer.display.viewmodel.js

Original (lines 638 - 642)

$('#' + symbolNameSelector)
    .click(function () {
        that.selectedSymbol = symbolName;
        that.toggleMode();
    });

Modified

$('#' + symbolNameSelector)

    .click(function (e) {

        if (!(e.shiftKey || e.ctrlKey)) {

            that.selectedSymbol = symbolName;

            that.toggleMode();

        }

    });

Links and How to get it

Download it from the Chrome Web Store: Ad-Hoc Selector for PI Vision™ - Chrome Web Store

View the source code on GitHub: https://github.com/rbyrnedugan/PI-Vision-Ad-Hoc-Extension

 

This extension is targeted at PI Vision 2017 R2 (3.3), but should work with earlier versions too. PI Vision 2019 will have similar functionality built in.

This extension is still in beta, and is regionally restricted to the US for now (waiting for an OK from legal).  Please try it out and let me know if you run into any issues.

Introduction

 

This post is for everyone new to PI Vision Extensibility development and that want a simple way to delete some traces from a custom multiple data source symbol.

I'll explain briefly the essential parts and I'll also give the codes I've come to write (do not expect much from my JS skills) after taking a good look at standard symbols and Anna Perry's manual data entry.

 

Data Source list

 

To remove one tag/attribute one needs simply to take it out from scope.symbol.DataSources. This array contains all traces by their paths (strings):

If you look closely you will notice that the first part indicates whether it comes from a tag (pi) or an attribute (af), the second is the path, including IDs after question marks for tags:

"pi:\\PIDataArchiveName?ID\TagName?TagID"

"af:\\AFServerName\Database\Element\Element2|Attribute1"

 

Getting tags/attributes names from Data Source list

 

In order to be able to select and remove the unwanted traces you need to show strings on config panel that match respectives data sources.

You can just use orignal strings from DataSources which are not much user friendly or, instead, have another array with tag names and end of attribute's path (Element|Attribute). For the second I created an array at runtimeData to store traces' names:

scope.runtimeData.Traces = [];
updateDataSourceList();
function updateDataSourceList(){ // Maps Data Sources on runtimeData.Traces with Label (tag/attribute names) and Path (PI/AF, server, database, ID)
     if (scope.symbol.DataSources.length != scope.runtimeData.Traces.length) {
          var tracesS = [];
          scope.symbol.DataSources.forEach(function (item) {
                    item = item ? item.toString() : '';
                    var path = item;
                    item = item.substr(item.lastIndexOf('\\') + 1) || item;
                    item = item.substr(0, item.indexOf('?')) || item;
                    tracesS.push({ Label: item, Path: path });
          });
          scope.runtimeData.Traces = tracesS;
     }
}

This code goes inside symbolVis.prototype.init function.

Note that indexes from both Traces and DataSources match, but you need to call this function on dataUpdate() to ensure it.

 

Enabling trace removal from symbol configuration panel

 

With a presentable data source list (Traces) we can show it to users on configuration panel (...config.html).

<!-- Trace list -->
<div class="trend-config-trace-list" tabindex="0" style="padding: 4px">
     <div ng-repeat="trace in runtimeData.Traces"
               ng-init="runtimeData.selectedStream = 0"
               ng-click="runtimeData.selectedStream = $index"
               ng-style="runtimeData.Traces.length > 1 && runtimeData.selectedStream === $index && { 'background-color' : '#d5d5d5' }"
               class="trend-config-trace-list-item"
               title="test">{{trace.Label}}</div>
</div>

<!-- Remove trace button -->
<div class="c-button-default-container" style="padding: 4px 4px 0 4px; margin-top: 0; margin-bottom: 0" ng-if="runtimeData.Traces.length > 1">
     <button type="button" class="c-primary-button trend-config-trace-arrange-button"
               ng-click="def.traceConfig.deleteTrace(this.$parent)">
          <span class="k-icon k-delete"></span>
     </button>
</div>

This code will replicate trace configuration from standard trend as in this post's first image.

First part of the code prints the list from runtimeData.Traces while tracking trace selected (runtimeData.selectedStream).

Second part displays the button for removal whenever there are more than one data source on symbol. Also the removal is attached to a function on JS file that actively removes the selected data source, although traceConfig.deleteTrace (on symbol definition, def) is another reference:

var def = {
     /* definition example
     visObjectType: symbolVis,
     typeName: 'pieChartLabeled',
     displayName: 'Pie Chart Labeled',
     datasourceBehavior: PV.Extensibility.Enums.DatasourceBehaviors.Multiple,
     supportsCollections: true,
     configOptions: function (symbol) {
          return [{
               title: 'Format Pie Chart',
               mode: 'formatPieChartLabeled'
          }];
     },*/
     traceConfig: {  
          deleteTrace: configDeleteTrace
     }
};

 

Core code - Removing data sources

 

Last part! This code goes on function (PV):

function configDeleteTrace(scope) {
     var index = scope.runtimeData.selectedStream;
     var datasources = scope.symbol.DataSources;
     var traces = scope.runtimeData.Traces;

     if (datasources.length > 1) {
          datasources.splice(index, 1);
          traces.splice(index, 1);
          scope.$root.$broadcast('refreshDataForChangedSymbols');
     }
}

It removes the selected data source from DataSources and Traces based on its index saved from configuration panel and forces new data in for your custom symbol.

This article is simply a showcase of an idea, while we know that customers want to have the ability to add and remove graphics in the graphic library, this feature is not fully supported in PI Vision 2017 R2.

 

Since version 2017, the much beloved Graphic Library has made an entrance in PI Vision.

Probably since then, users have wanted to add to this library, for example to help with distributing standard images.

Or, also to reduce the number of symbols included in a display. (Once one reaches hundreds of symbols in a single page, PI Vision does suffer lost of performance)

 

Let's see how we could tackle that second problem.

In PI vision, it is common to create a shapes like the one below to help group and highlight values.

This would then introduce 5 symbols (one green box, 4 white box)

 

Here is the, again unsupported way, to add a single SVG that would replace those 5 symbols, with one svg image.

This image would have the added advantage that it would be stored in the browser cache.

 

First, part of this being unsupported, is that there is a huge amount of diversity within SVG files. It is a protocol that is much harder to work with than PNGs or other graphics.

Thus, if you simply grab a file from a public internet source, there is a high chance it will not work.

 

To re-create the graphic above, I've used the free utility https://inkscape.org/en/  that is also available from the Windows 10 App store.

Re-creating the graphic above is done quite easily using the various tools available in Inkscape.

 

On my PI Vision folder, I created a folder in %pihome64%\PIVision\Graphics folder.

I tend set the security for that folder, so that the folder content is readable by all PI Vision users.

One way to test if the security is correctly set is to see if the file is accessible from PI Vision users' browsers.

In my case, I checked by opening the link below from my browser.

https://pivisionserver/pivision/graphics/CustomJerome/GridJerome.svg

 

For PI VIsion to be aware of the addition of this file, an iisreset is needed to be performed on the PI Vision server.

Once that is done, in the graphic library, a new folder was added in and my new graphic was created.