Skip navigation
All Places > PI Developers Club > Blog > Authors Kenji Hashimoto

PI Developers Club

2 Posts authored by: Kenji Hashimoto

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!!

I want to share Delete PI Data Archive tag values tool.

Some customers have requested to delete events for specific time span and specific values.

I've created sample tool by AFSDK.

Code is in GitHub.

GitHub - kenji0711/DeleteTagEvents: DeleteTagEvents Created by Visual Studio 2013 / C# / AFSDK

This tool can delete tag's events.

You can specify followings.

PI Tags name

All Events/ Specific Events (Manual entery of value)

Start Time/End Time

If you have interesting, please check this tool.

Also remember that deleting PI tag values effects performance for PI Data Archive.

So I recommend to delete a few events/tags.

Filter Blog

By date: By tag: