This post is Japanese version of How to customize appearance of PI Coresight 2016  . (このブログはリンク先の日本語版です)

 

PI Coresight をブラウザで開いた時に、タブに表示される文字はデフォルトで、「PI Coresight」です。

この文字を自分の好きな文字列に変えることも可能です。

に変更します。

(この例では「Kenji Coresight」に変えています)

以下4か所の変更が必要です。

1 ホームページ用の変更

%PIHOME64%\Coresight\Views\Home\Index.cshtml を変更します。

ViewBag.Title = "PI Coresight"; 

 

2 ProcessBook用の変更

%PIHOME64%\Coresight\Scripts\app\pbviewer\pbviewer.navigation.js を変更します。

function setTitle(displayName) {  var title = 'PI Coresight';


3 PI Coresight画面用の変更

%PIHOME64%\Coresight\Scripts\app\editor\display\coresight.display-controller.js を変更します。

function setTitle(displayName) {  var title = 'PI Coresight'; 

 

4 モバイルアクセス用の変更

%PIHOME64%\Coresight\Views\M\Index.cshtml を変更します。

 
 
 
 
 
 
  div data-role="page" data-title="PI Coresight" id="servicesandtools"> 

 

ファビコン(タブのアイコン画像)を変えることもできます。

%PIHOME64%\Coresight\favicon.ico

favicon.icoを自分の画像に変更します。

 

PI Coresight のホームのロゴを変更することもできます。

%PIHOME64%\Coresight\Images\logo.png を好きな画像に変更します。

に変更しました。

 

ユーザーに新規画面を作成させたくない場合、以下の変更が利用できるかもしれません。

%PIHOME64%\Coresight\Scripts\app\editor\layout\coresight.cs-header-directive.js を変更します。

この中のdiv class="c-new-display" をすべて削除します。

 

この変更により、すべてのユーザーで"New Display"のリンクが表示されなくなります。

管理者の方であれば、アドレスから新しい画面の作成ができます。 (ただし、ユーザーもこのアドレスを知っていれば新規作成はできてしまいます)

https://ServerName/coresight/#/Displays/New/

 

ユーザーに"?mode=kiosk"で必ず表示させたいですか?

以下ファイルのif文をコメントアウトすれば可能です。

%PIHOME64%\Coresight\Scripts\app\editor\display\coresight.displays-controller.js

// if (parms.mode === 'kiosk')
setKioskMode(true);

この変更を行うと、すべてのユーザー、すべての画面にてkisokモードで表示されるようになります。

どのユーザーが変更できるなどは残念ながら選べません。もし画面を追加/変更したければこのコメントアウトを消す必要があります。 (Jerome Lefebvreと見つけました)

 

値オブジェクトのツールチップを表示させたくないのであれば、

%PIHOME64%\Coresight\Scripts\app\editor\symbols\coresight.sym-value.js を変更します。

//valueLabel.path = data.Path;

上記をコメントアウトすればツールチップは表示されません。

 

値オブジェクトのコンディションシンボルはバックグラウンドカラーを変更します。

しかし、ここではフォントのカラーが変わるように変更したいと思います。

%PIHOME64%\Coresight\Scripts\app\editor\symbols\sym-value-template.html を変更します。

"Fill ||"の位置を以下のように変えることで変更できます。

   
           
   
                   
   
           

この変更により、コンディションシンボルの条件に合致した際にはフォントカラーが変わるようになりました。

画面自体の背景色を変更する場合、%PIHOME64%\Coresight\Content\css\theme.base-colors.css を変更します。

.t-display-container {   background-color: white; }

変更後は白い背景色となりました。

 

PI Coresight 2016ではカスタムシンボルを作成することができます。これは非常に良い機能です。(リンク先は英語となります)

GitHub - osisoft/PI-Coresight-Custom-Symbols: Learn how to add a custom symbol, created with JavaScript and HTML, to PI …

デフォルトでカスタムシンボルのアイコンは となります。

変更したければPNGやJPEGとしてスクリーンショットを取って使用することができます。(バックグラウンドが入ってしまうので "#48586b" をバックグラウンドカラーにセットしてスクリーンショットを取ります)

その画像を以下フォルダに置きます。%PIHOME64%\Coresight\Images

カスタムシンボルのjsファイルを開き、以下のようにiconUrlをセットします。

var defintion = {  
typeName: 'liquidgauge',  
iconUrl: 'Images/liquid.png',  

更新するとiconが表示されます。

クリックすると、色が反転した際にバックグラウンドカラーがあることに気が付くかと思います。

もちろん、背景色のない画像を用意したほうが良いですが、この方法であればペイントツールのみでアイコンができるので、簡単です。

アプリケーションを使用すれば背景のない画像も作成可能です。たとえば以下のinkscapeなども利用できます。

https://inkscape.org/en/

 

なお、いままで紹介した変更は公式にはサポートされていないため、変更する場合、ご自身の責任で行ってください。

いずれにせよ、PI Coresight 2016を変更することは割と容易に可能です。