Introduction

 

Since the release of PI Vision extensibility, I have seen a lot of questions on PI Developers Club about how to make HTTP calls against PI Web API within the custom symbol methods.

 

On my last blog post, I have shown step by step about how to generate a PI Web API Client library for AngularJS using Swagger codegen. This library is available for download on the dist folder from this GitHub repository. What I do think it would be very interesting and useful for our community is to use this library when developing custom PI Vision symbols. Who wouldn't want to use this feature?

 

Disclaimer

 

Before we start describing the procedures, it is good to remind that you that we will change PI Vision source JavaScript source code. As a result, there are a lot of risks involved, such as:

  • If the changes you've done were not well done, your PI Vision might not load anymore. In this case, you might need to repair the installation to replace all JavaScript files.
  • After a PI Vision upgrade,  all your changes will be undone. You will have to do the procedure again.
  • I strongly recommend testing on a development environment first.
  • Although I don't expect major issues, we haven't tested the problems when using this library within PI Vision.

 

All in all, there are risks involved. Just consider them before following the procedure.

 

 

Making the piwebapi service available on PI Vision

 

Yes, I am writing this procedure only for PI Vision 2016 R2. It should also work on PI Vision 2016 but I haven't tested. If you do test, please write a comment below!

 

Here are the steps:

 

1 - Open the browser and go to this GitHub repository. Download the source code package to a zip file. Within this file, copy the angular-piwebapi-kerberos.min.js (or piwebapi-kerberos.js) file to %PIHOME64%\Coresight\Scripts\app\editor folder (2016 R2) or %PIHOME64%\PIVision\Scripts\app\editor folder (2017).

2 - Edit the Index.html file located on the %PIHOME64%\Coresight\Views\Home folder (2016 R2) or %PIHOME64%\PIVision\Views\Home folder (2017) by adding a reference to angular-piwebapi-kerberos.min.js just below "@Scripts.Render("~/bundles/libraries/jstz")". Please refer to the code below:

 


    @Scripts.Render("~/bundles/libraries/jquery")    
    @Scripts.Render("~/bundles/jqueryui")    
    @Scripts.Render("~/bundles/jqueryui/layout")
    @Scripts.Render("~/bundles/jquery-ui-patch")
    @Scripts.Render("~/bundles/libraries/hammer")
    @Scripts.Render("~/bundles/libraries/angular")
    @Scripts.Render("~/bundles/libraries/angular-gridster")
    @Scripts.Render("~/bundles/libraries/jstz")


  <script src="/PIVision/Scripts/app/editor/angular-piwebapi-kerberos.min.js" /></script>


    @Scripts.Render("~/bundles/kendo-patch")

 

Use src="/Coresight/Scripts/..." instead if you are using 2016 R2 or older versions.

 

3 - Edit the coresight.app.js file (2016 R2) or PIVisualization.app.js (2017) located on the %PIHOME64%\PIVision\Scripts\app\editor (%PIHOME64%\Coresight\Scripts\app\editor for 2016 R2) by adding ngPIWebApi to the depedencies module list from PI Vision. Please refer to the code below:

 

    angular.module(APPNAME, ['ngAnimate', 'Chronicle', 'osi.PiDialog', 'osi.PiToast', 'coresight.routing', 'kendo.directives', 'gridster', 'ngPIWebApi'])
        .config([
            '$animateProvider',
            '$compileProvider',
            '$httpProvider',
            config])

 

Do not forget to save both files.

 

That is all! Easy, right?

 

 

Creating a custom symbol using the piwebapi service

 

Now that our PI Vision is now able to inject our piwebapi service, which is a PI Web API client library using AngularJS, let's create a custom symbol that will make an HTTP request againt the main PI Web API endpoint and display the JSON on the screen.

 

Create a new file name sym-piwebapi-basic-sample.js on the %PIHOME64%\PIVision\Scripts\app\editor\symbols\ext folder  (%PIHOME64%\Coresight\Scripts\app\editor\symbols\ext for 2016 R2) with the following content:

 

 

For 2017:

 

(function (PV) {
    function symbolVis() { }
    PV.deriveVisualizationFromBase(symbolVis);


    var definition = {
        typeName: 'piwebapi-basic-sample',
displayName: 'PI Web API Client library basic sample',
        datasourceBehavior: PV.Extensibility.Enums.DatasourceBehaviors.Multiple,
        inject: ['piwebapi'],
        getDefaultConfig: function () {
            return {
                DataShape: 'Table',
                Height: 400,
                Width: 400,
                MarkerColor: 'rgb(255,0,0)'
            };
        },
        visObjectType: symbolVis
    };




    symbolVis.prototype.init = function init(scope, elem, piwebapi) {
piwebapi.ConfigureInstance("https://marc-web-sql.marc.net/piwebapi", true);


        console.log('Starting init scope: ' + scope);
        console.log('Starting init scope: ' + elem);

this.onDataUpdate = dataUpdate;
        this.onConfigChange = configChanged;
        this.onResize = resize;




        function configChanged(config, oldConfig) {
console.log('configChange called');
        };


        function resize(width, height) {
console.log('resized called');
        } 

        function dataUpdate(data) {
piwebapi.home.get().then(function (response) {
scope.data = response.data;
});
        }
    }








    PV.symbolCatalog.register(definition);
})(window.PIVisualization);

 

 

Create a new file name sym-piwebapi-basic-sample-template.html on the %PIHOME64%\PIVision\Scripts\app\editor\symbols\ext folder (%PIHOME64%\Coresight\Scripts\app\editor\symbols\ext for 2016 R2) with the following content:

 

<center>
    <br /><br />
    <p style="color: white;">{{data}}</p>
</center>

 

You can find more custom PI Vision symbols samples that inject piwebapi service here.

 

Time to test our custom library. Dragging any element and dropping it on the screen, we can see that JSON response from the main PI Web API endpoint.

 

 


Conclusions

 

The custom symbol developed in this blog post is very simple. Nevertheless, its main purpose is to demonstrate that after making the changes in order to add the PI Web API client library for AngularJS to PI Vision, it is possible to inject the piwebapi service. As a result, it gets easier to make HTTP requests against PI Web API using this client library.

 

Finally, please write comments about this project and share your thoughts!