hzhao

如何定制化Coresight 2016的外观

Blog Post created by hzhao Employee on Aug 9, 2016

原文post在此链接How to customize the appearance of PI Coresight 2016  ,作者为KenjiJerome。以下为原文链接的翻译:

 

改变Coresight页面Tab的外观,如下

to

您能将“PI Coresight”的title改为任意内容,如此处所示,内容已被改为Kenji Coresight,有三处地方可以做这些修改

 

1. For the Homepage:

%PIHOME64%\Coresight\Views\Home\Index.cshtml

ViewBag.Title = "PI Coresight";

 

2. For a ProcessBook Page:%PIHOME64%\Coresight\Scripts\app\pbviewer\pbviewer.navigation.js

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

 

3 PI Coresight Display:%PIHOME64%\Coresight\Scripts\app\editor\display\coresight.display-controller.js

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

 

如果想改变移动端的展示,可以修改如下内容: %PIHOME64%\Coresight\Views\M\Index.cshtml

<title>PI Coresight</title>  
<div data-role="page" data-title="PI  Coresight" id="mostrecent" class="appBackground">  
<div data-role="page" data-title="PI Coresight" id="search" class="appBackground">  
<div data-role="page" data-title="PI Coresight" id="csdisplay" class="appBackground" data-add-back-btn="true">  
<div data-role="page" data-title="PI Coresight" id="pbdisplay" class="appBackground" data-add-back-btn="true">  
<div data-role="page" data-title="PI Coresight" id="element" class="appBackground unselectable" data-add-back-btn="true">  
<div data-role="page" data-title="PI Coresight" id="trend" class="appBackground unselectable" data-add-back-btn="true">  
<div data-role="page" data-title="PI Coresight" id="servicesandtools"> 

 

您也能改变site的网站图标,只要改变%PIHOME64%\Coresight\Images\logo.png文件即可

to

 

如果您想改变Help的内容,您可以在%PIHOME64%\Coresight\Scripts\app\editor\layout\coresight.cs-header-directive.js中修改,例如如果您将以下内容注释了,将会在Help中删除PI Live Library

  1. { id: 'HelpMenuOnLine', title: CS.Messages.HelpMenuOnLine, url: 'https://livelibrary.osisoft.com/LiveLibrary/content/' + lang + '/coresight-v7/GUID-7EF650C5-1235-4F8A-AC61-2EB1D2A3A5BF ' }, 

to

 

如果您不想让用户创建新的display

删除 在 %PIHOME64%\Coresight\Scripts\app\editor\layout\coresight.cs-header-directive.js中的div class="c-new-display"

You can delete all of the followings.

<div class="c-new-display t-display-content-font">  
            <div class="c-icon-display" ng-click="navCtrl.newDisplay()" title="{{::newDisplayTooltip}}">  
                <div class="c-new-display-rollover">  
                    <div>  
                        <svg id="new-display-icon" class="t-icon-fill" version="1.1" x="0px" y="0px"  
                             width="25px" height="25px" viewBox="0 -4 25 25" enable-background="new 0 0 25 25" xml:space="preserve">  
                        <path d="M9.677,0.823c-5.12,0-9.271,4.188-9.271,9.354c0,5.169,4.151,9.356,9.271,9.356  
                                    c5.119,0,9.271-4.188,9.271-9.356C18.948,5.012,14.796,0.823,9.677,0.823" />  
                        <polygon fill="#091d3a" points="15.553,8.831 10.982,8.831 10.982,4.114 8.37,4.114 8.37,8.831 3.8,8.831 3.8,11.527 8.37,11.527  
                                    8.37,16.243 10.982,16.243 10.982,11.527 15.553,11.527" />  
                        </svg>  
                    </div>  
                    <div class="t-font-color-white" style="text-decoration: none">{{::newDisplayLinkText}}</div>  
                </div>  
            </div>  
        </div>

 

这样所有用户都不能再创建新display了

但是您仍然可以手动通过如下url来创建新的display

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

 

如果您想保持所有display都是显示kiosk mode,您可以注释以下语句

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

 

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

If you do this, all users/ all displays can be seen as Kiosk mode.We could not choose which users can see display without kiosk. So if you want to create/edit display, you need to change comments out again. (Found with Jerome Lefebvre)

 

PI Coresight 2016 Value object 会显示工具提示. 如果您不想显示

%PIHOME64%\Coresight\Scripts\app\editor\symbols\coresight.sym-value.js

//valueLabel.path = data.Path;  

 

如果您这样做,您将不会看到工具提示

在默认情况下,多状态(multi-state)将会改变背景颜色By default, Value object's Multi-State changes background color.

如果您想改变字体本身大小,需要修改 sym-value-template.html的"Fill ||”

%PIHOME64%\Coresight\Scripts\app\editor\symbols\sym-value-template.html

     
               
     
                         
     
               
 
 

这样您将可以改变文字颜色而不是背景色

 

为了改变画面的背景色,您可以修改t-display-container类

%PIHOME64%\Coresight\Content\css\theme.base-colors.css

contains the t-display-container.

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

 

这样就显示白色的背景色了

PI Coresight 2016 可以使用自定义的图案,具体可以参考如下repository

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

如果您不自己设置,默认您定义的custom symbol将会显示 图案.

您可以找自己想要的图案(png/jpg格式),或者直接截屏(注意将display背景色改为#48586b

将图案放置到 %PIHOME64%\Coresight\Images 文件夹下

在custom symbol的配置js文件中指定iconURL参数

 

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

效果如下图所示.

如果您点击这个item,您会发现这个图片是包含背景颜色的。当然您最好可以创建一个没有背景色的图案,但能用系统自带的画图工具来获得image总是比较简单的方法

第三方软件也是个不错的方案,例如

https://inkscape.org/en/

 

我还没有检查所有的item,但是看上去HTML5在修改了很多内容之后,仍然可以正常工作。当然这些并不是我们OSI官方的修改

Outcomes