PI Coresight 2016 R2のカスタムシンボル Simple Valueを作成する方法

バージョン 1

    PI Coresight 2016 R2ではカスタムシンボルが作成できます。

    様々なサンプルは以下ポストで確認できます。

    PI Coresight 2016 R2のカスタムシンボルの例がGitHubに追加されました

    今回は最も簡単なサンプル、simple valueを作成したいと思います。

    https://github.com/osisoft/PI-Coresight-Custom-Symbols/tree/master/tutorials/simplevalue

    上記にしたがって行っていきます。(英語)

     

    1.    %PIHOME64%\Coresight\Scripts\app\editor\symbols\extフォルダを使用します。このフォルダがなければ、作成してください。

    このフォルダに作成するHTMLファイルとJavascriptファイルを置きます。

    2.    Sym-simplevalue.jsファイルを作成し、以下のコードを書きます。

    なお、このjsファイルはLogicを書くことになります。

    (function (CS) {
    })(window.Coresight);
    

    このコードはカスタムシンボルのイニシャライズを行うコードとなります。Javascriptのコードを実行できるIIFE  (Immediately Invoked Function Expression) を作成し、ブラウザからオブジェクトをドラッグアンドドロップした際にコードが実行される仕組みです。

    3.    PI Coresightのシンボルのファンクションを作成します。

    (function (CS) {
    function symbolVis() { }
             CS.deriveVisualizationFromBase(symbolVis);
    })(window.Coresight);
    

    4.    シンボルにdefinitionを追加しオブジェクトを定義していきます。PI CoresightのシンボルカタログへRegisterを行うものです。まずはvisObjectTypeを登録します。シンボルカタログはPI Coresight上のすべてのシンボルを保持しています。

    (function (CS) {
    function symbolVis() { }
        CS.deriveVisualizationFromBase(symbolVis);
    
        var definition = {
            visObjectType: symbolVis
        };
            CS.symbolCatalog.register(definition);
    })(window.Coresight);
    

    5.    次に、シンボルに必要なパラメーターを追加します。typeNameはPI Coreightへの登録に必要となる名前です。複数シンボル内でユニークである必要があります。datasourceBehaviorはシンボル内で検索結果をいくつ使えるか定義します。None, Single, Multipleが設定できます。

    (function (CS) {
       function symbolVis() { }
        CS.deriveVisualizationFromBase(symbolVis);
    
        var definition = {
            typeName: 'simplevalue',
            datasourceBehavior: CS.Extensibility.Enums.DatasourceBehaviors.Single,
            visObjectType: symbolVis
        };
        CS.symbolCatalog.register(definition);
    })(window.Coresight);
    

    6.    次に詳細を定義していきましょう。getDefaultConfigはDataShapeを定義し、このDataShapeはアプリケーションサーバーにこのシンボルがデータを必要としていることを伝えています。シンボルの高さと幅も定義します。

    (function (CS) {
        function symbolVis() { }
        CS.deriveVisualizationFromBase(symbolVis);
    
        var definition = {
            typeName: 'simplevalue',
            datasourceBehavior: CS.Extensibility.Enums.DatasourceBehaviors.Single,
            visObjectType: symbolVis,
            getDefaultConfig: function() {
                return {
                    DataShape: 'Value',
                    Height: 150,
                    Width: 150
                };
            }
        };
        CS.symbolCatalog.register(definition);
    })(window.Coresight);
    

     

    7.    次にinitializationを追加します。symbolVisのプロパティにinitを定義します。

    (function (CS) {
        function symbolVis() { }
        CS.deriveVisualizationFromBase(symbolVis);
    
        symbolVis.prototype.init = function () {
        };
    
        var definition = {
            typeName: 'simplevalue',
            datasourceBehavior: CS.Extensibility.Enums.DatasourceBehaviors.Single,
            visObjectType: symbolVis,
            getDefaultConfig: function() {
                return {
                    DataShape: 'Value',
                    Height: 150,
                    Width: 150
                };
            }
        };  
    CS.symbolCatalog.register(definition);
    })(window.Coresight);
    

    8.    コードをさらに追加する前にinitial presentation layerを作成しましょう。まず、同じ階層にsym-simplevalue-template.htmlというHTMLファイルを作成します。名前はsym-SYMBOL_TYPE_NAME-template.htmlとします。以下のコードをこのファイルに追加します。

    <div style="background: red">
        <div>Simple Value</div>
    </div>
    

    9.    PI Coresightサーバーに追加のシンボルを認識させるためにiisresetを行います。

    10.    PI Coresightを起動し、sinusoidを検索します。

    11.    Simplevalueのアイコンを選択し、検索結果をドラッグアンドドロップしてみます。

     右のように表示されましたか?

     

    12.    表示されれば、シンボルの外側はできたことになります。あとはシンボル自体に動作を定義していくことになります。symbolVis.prototype.initのfunctionを定義していきます。ScopeはAngularJS1のオブジェクトとなります。function dataUpdateはデータ更新したときの挙動を定義するために追加します。

    symbolVis.prototype.init = function (scope) {
        this.onDataUpdate = dataUpdate;
        function dataUpdate(data) {
        }
    };
    

    13.    上記のコードはPI Coresightサーバーにデータの更新があったたびにシンボルを更新させるために定義しています。dataUpdateファンクションでデータ更新時の挙動を追加する必要があります。

    14.    以下のコードを使用し、dataオブジェクトのvalue, time, labelをscopeに追加します。scopeに追加することでHTML上での表示が可能となります。

    symbolVis.prototype.init = function (scope) {
        this.onDataUpdate = dataUpdate;
    
        function dataUpdate(data) {
            if(data) {
                scope.value = data.Value;
                scope.time = data.Time;
                if(data.Label) {
                    scope.label = data.Label;
                }
            }
        }
    };
    

    15.    今度はHTMLファイルを更新させ値を表示させます。HTMLファイルではAngularJSのスタイルの{{}}を使用し、ScopeとHTMLをリンクさせます。

    <div style="background: orange; color: black">
        <div>{{label}}</div>
        <div>{{value}}</div>
        <div>{{time}}</div>
    </div>};
    

     

    16.    PI Coresightの画面を確認します。

    以下のように表示されますか?

    表示されない場合、ブラウザ側のキャッシュに古いファイルが残っている可能性があります。開発のConsoleを表示するためにF12キーを押します

    Chromeの再読み込みのボタンを1秒ほど長押しすると、下記の画面が現れます。

    キャッシュの消去とハード再読み込みを実施します。

     

    また、コード内のオブジェクトの値をデバッグしたい場合もあります。

    デバッグを有効にするには%PIHOME64%\web.config

    <compilation debug="true" をセットします。

    Chromeで画面にシンボルを表示しF12をクリック、Sourcesをクリックし、Scripts > app > editor > symbols > extを展開し、sym-simplevalue.jsをクリックします。行数をクリックすると、そこがbreak pointとなるので、変数の中身を確認できます。

    17.    ユーザーが色を定義できるようになると、より良いシンボルとなります。この機能を実現するために、configTitleを追加します。Format Symbolというタイトルの設定メニューを表示できるようになります。

    var definition = {
        typeName: 'simplevalue',
        datasourceBehavior: CS.Extensibility.Enums.DatasourceBehaviors.Single,
        visObjectType: symbolVis,
        getDefaultConfig: function() {
            return {
                DataShape: 'Value',
                Height: 150,
                Width: 150
            };
        },
        configTitle: 'Format Symbol'
    };
    

    18.    次にバックグラウンドとテキスト色のデフォルト値を定義に追加します。

    Var definition = {
        typeName: 'simplevalue',
        datasourceBehavior: CS.Extensibility.Enums.DatasourceBehaviors.Single,
        visObjectType: symbolVis,
        getDefaultConfig: function() {
            return {
                DataShape: 'Value',
                Height: 150,
                Width: 150,
                BackgroundColor: 'rgb(255,0,0)',
                TextColor: 'rgb(0,255,0)'
            };
        },
        configTitle: 'Format Symbol'
    };
    

     

    19.    Format Styleという設定メニューを追加しましたが内容はまだ定義していません。そこで、sym-simplevalue-config.htmlという新しいファイルを作成し、そこに設定メニューの内容を定義していきます。名前はsym-SYMBOL_TYPE_NAME-config.htmlとします。以下のコードでは色の定義とカラーピッカーのコードが追加されています。

    <div class="c-side-pane t-toolbar">
        <span style="color:#fff; margin-left:15px">Text Color</span>
    </div>
    <div class="config-option-format"><cs-color-picker id="textcolor" ng-model="config.TextColor"></cs-color-picker></div>
    <div class="c-side-pane t-toolbar">
        <span style="color:#fff; margin-left:15px">Background Color</span>
    </div>
    <div class="config-option-format"><cs-color-picker id="backgroundcolor" ng-model="config.BackgroundColor"></cs-color-picker></div>
    

    20.    PI Coresightで再度表示してみます。右クリックしてFormat Symbolを選択すると、以下のように表示されますか?

    21.    カラーピッカーの設定を有効にするため、テンプレートのHTMLを変更する必要があります。

    <div ng-style="{background:config.BackgroundColor,color:config.TextColor}">
        <div>{{label}}</div>
        <div>{{value}}</div>
        <div>{{time}}</div>
    </div>
    

     

     

    22.    最後に追加したいのが、Label, Timeを表示するかしないかのオプションを追加することです。

    getDefaultConfig: function() {
        return {
            DataShape: 'Value',
            Height: 150,
            Width: 150,
            BackgroundColor: 'rgb(255,0,0)',
            TextColor: 'rgb(0,255,0)',
            ShowLabel: true,
            ShowTime: false
        };
    },
    

    23.    テンプレートにNg-showを追加し、表示/非表示をコントロールします。

    <div ng-style="{background: config.BackgroundColor, color: config.TextColor}">
        <div ng-show="config.ShowLabel">{{label}}</div>
        <div>{{value}}</div>
        <div ng-show="config.ShowTime">{{time}}</div>
    </div>
    

    24.    さらにConfigファイルにShowオプションを追加します。

    <div class="c-side-pane t-toolbar">
        <span style="color:#fff; margin-left:15px">Text Color</span>
    </div>
    <div class="config-option-format"><cs-color-picker id="textcolor" ng-model="config.TextColor"></cs-color-picker></div>
    <div class="c-side-pane t-toolbar">
        <span style="color:#fff; margin-left:15px">Background Color</span>
    </div>
    <div class="config-option-format"><cs-color-picker id="backgroundcolor" ng-model="config.BackgroundColor"></cs-color-picker></div>
    <div class="c-side-pane t-toolbar">
        <span style="color:#fff; margin-left:15px">Show Options</span>
    </div>
    <div class="c-config-content">Show Label:
        <input type="checkbox" ng-model="config.ShowLabel">
    </div>
    <div class="c-config-content">Show Time:
        <input type="checkbox" ng-model="config.ShowTime">
    </div>
    

     

    25.    マルチステートを追加したければ以下となります。

    var definition = {
        typeName: 'simplevalue',
        datasourceBehavior: CS.Extensibility.Enums.DatasourceBehaviors.Single,
        visObjectType: symbolVis,
        getDefaultConfig: function() {
            return {
                DataShape: 'Value',
                Height: 150,
                Width: 150,
                BackgroundColor: 'rgb(255,0,0)',
                TextColor: 'rgb(0,255,0)',
                ShowLabel: true,
                ShowTime: false
            };
        },
        configTitle: 'Format Symbol',
        StateVariables: [ 'MultistateColor' ]
    };
    

    26.    PI Coresightで再度表示してみます。オプションは表示されるようになります。

    27.    このマルチステートをテキスト色に反映させます。

    <div ng-style="{background: config.BackgroundColor, color: MultistateColor || config.TextColor}">
        <div ng-show="config.ShowLabel">{{label}}</div>
        <div>{{value}}</div>
        <div ng-show="config.ShowTime">{{time}}</div>
    </div>