Skip navigation
All Places > PI Developers Club > Blog > 2017 > January
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!!

I occasionally see people in the Developer's Club requesting information on how to get PI SDK logs (such as information from their PI Data Archive) using the PI AF SDK.  The AF SDK does not provide this functionality and often our go-to response is to use the PowerShell Tools for the PI System. It's a great product but I can understand not wanting to learn how to use Powershell to do something simple such as getting message logs.

 

To make things easier, I decided to write a quick C# wrapper so that you can leverage these tools without leaving the comfort of .NET .   This is by no means an official solution.  Just something I thought might be helpful.

You can download the project here: GitHub - osipmartin/PowershellLogWrapper: C# Wrapper for Powershell Get-PIMessage to get PI SDK logs.

 

There are two projects in the solution.

Powershell_Logging: This is the actual library.  When you build the project, it will produce a dll that you can use elsewhere.

ReadPSLog: This is a simple console application that shows how to use one of the functions from the library.

 

I did just a bare minimum of testing.  If you have issues please feel free to tell me or fork the repository and fix it.

 

Note: I included the switches that I use regularly when I am getting messages but left out a couple switches that I never use.  Feel free to fork and modify to your hearts content.

Filter Blog

By date: By tag: