Kenji Hashimoto

How to change Font-Family by PI Coresight 2016 R2 Value Symbol

Blog Post created by Kenji Hashimoto on Jan 26, 2017

I checked PI Coresight Value symbol and found that the font-family is Arial by default.

I used Google Chrome + F12 key to found out.

However, sometimes we want to change font-family like following.

How to achieve it?

We can change the value symbol code to achieve it.

For doing this change, please take a back up of the original files.

Please change these files by your responsibilities.

 

At first, we can add font-family pull down to the config file. (The top of the file code)

C:\Program Files\PIPC\Coresight\Scripts\app\editor\symbols\sym-value-config.html

<div class="c-side-pane t-toolbar">
 <span style="color:#fff; margin-left:10px;">Font</span>
</div>
<div class="config-option-format">
<select ng-model="config.fontFamily">
 <option style="font-family: Georgia">Georgia</option>
 <option style="font-family: 'Times New Roman'">Times New Roman</option>
 <option style="font-family: Arial">Arial</option>
 <option style="font-family: Impact">Impact</option>
 <option style="font-family: Tahoma">Tahoma</option>
 <option style="font-family: 'Trebuchet MS'">Trebuchet MS</option>
 <option style="font-family: Verdana">Verdana</option>
 <option style="font-family: 'Courier New'">Courier New</option>
 <option style="font-family: 'Lucida Console'">Lucida Console</option>
</select>
</div>

We use config.fontFamily object to get the font-family name. It shows following.

For changing the visibility we need to change template file.

C:\Program Files\PIPC\Coresight\Scripts\app\editor\symbols\sym-value-template.html

We just need to add 'font-family':config.fontFamily to the ng-style of value-symbol-portionn-text div.

<div class="value-symbol-portion-text" style="white-space:nowrap;text-align:left;overflow:hidden;" ng-style="{background: (Fill || config.Fill), 'font-size': fontSize, 'font-family':config.fontFamily}" ng-class="{'blink': Blink}">

Also it is good to add default value to the .js file.

C:\Program Files\PIPC\Coresight\Scripts\app\editor\symbols\coresight.sym-value.js

getDefaultConfig: function () {
var config = CS.SymValueLabelOptions.getDefaultConfig({
                DataShape: 'Value',
                Height: 60,
                Fill: 'rgba(255,255,255,0)',
                Stroke: 'rgba(119,136,153,1)',
                ValueStroke: 'rgba(255,255,255,1)',
                ShowTime: true,
                IndicatorFillUp: 'white',
                IndicatorFillDown: 'white',
                IndicatorFillNeutral: 'gray',
                ShowDifferential: true,
                DifferentialType: 'percent',
                ShowIndicator: false,
                ShowValue: true,
                ShowTarget: true,
                fontFamily : 'Arial'
});

You can enjoy a lot of fonts.

Adding, you can add your fonts to .config file!!

I hope PI Coresight in future version support settings for font-family too.

 

 

https://fonts.google.com/

It contains google fonts and by default, windows machine does not contain these.

We can click plus icon on the page to use the font. Can select multiple items.

You can copy the link to template file.

C:\Program Files\PIPC\Coresight\Scripts\app\editor\symbols\sym-value-template.html

Add the link to the top of the file with <head> to show the fonts.

<head>
<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
</head>

You need to add the font name to config file!

 <option style="font-family: 'Dancing Script'">Dancing Script</option>

 

Now I can use Dancing Script font.

You can do the same thing to plain text too.

sym-statictext-config.html

The same as previous.

 

sym-statictext-template.html (Added 'font-family':config.fontFamily)

 <div class="static-text-symbol"
 style="white-space:nowrap;text-align:left;overflow:visible;"
 ng-dblclick="showDialog()"
 ng-style="{background: (Fill || config.Fill), 'font-size': fontSize}"
 ng-class="{'blink': Blink}">
 <a ng-href="{{linkURL}}" ng-attr-target="{{config.NewTab ? '_blank': '_self'}}" rel="noreferrer">
 <span class="text-symbol-sizing-line"
                  ng-class="{link: config.LinkURL}"
                  style="font-family:Arial, Helvetica, sans-serif;display: inline-block;"
 ng-style="{color:config.Stroke, 'font-family':config.fontFamily}"
 ng-bind="config.StaticText">

 

Now I can see text with font-family too.

Some font shows bigger size than value symbol space. So we need to change the value symbol size for some specific fonts though. I have not done yet.

I worked with Jerome Lefebvre about the Google fonts. Thank you Jerome!!

Outcomes