Cédric Canguilhem

PI Coresight (Vision) - Static text outline option

Blog Post created by Cédric Canguilhem on Jun 27, 2017

Hi all, PI Vision fans !


I saw the feature suggestion "Glow effect or outline around text" on the  customer feedback site :


and tried to implement this requirement.

(version : PI Coresight 2016 R2)


I am very unfamiliar with Angular, so if what I've done is making you mad at me, please advise in the comments! Thanks.


Here is the demo of the result : https://youtu.be/D_m35_3lKxg


First of all, we need a specific css class for outlined content :


  color: white; 
  -1px -1px 0 #000, 
  1px -1px 0 #000, 
  -1px 1px 0 #000, 
  1px 1px 0 #000 


I added it at the end of the "Content\css\shared.css" file.


Instead of creating a new custom symbol, I decided to modify and extend the existing one : statictext.

The 3 following files must be updated :

  •   coresight.sym-statictext.js
  •   sym-statictext-template.html
  •   sym-statictext-config.html


Modifications to the "Scripts\app\editor\symbols\coresight.sym-statictext.js" file :


1) Add an "outline" attribute to the symbol configuration :


var config = { 
  title: CS.ResourceStrings.StaticTextDialogTitle, 
  confirmEvent: 'staticTextSaved', 
  cancelEvent: 'staticTextCanceled', 
  allowNoInput: true, 
  dialogType: 'staticText', 
  data: { 
  textLabel: CS.ResourceStrings.StaticTextLabel, 
  inputText: angular.copy(scope.config.StaticText), 
  linkLabel: CS.ResourceStrings.URLLabel, 
  linkText: angular.copy(scope.config.LinkURL), 
  newTabLabel: CS.ResourceStrings.NewTabLabel, 
  newTab: angular.copy(scope.config.NewTab), 

  /* ADDED BY CGI/Cédric Canguilhem */ 
  outline: angular.copy(scope.config.Outline) 
  /* END ADDED */  

  validateTextSize: true 


2) Set its default value (no outline) :


function getDefaultConfig() { 
  return { 
  Height: 35, 
  StaticText: '', 
  LinkURL: '', 
  NewTab: false, 

  /* ADDED BY CGI/Cédric Canguilhem */ 
  Outline: false, 
  /* END ADDED */ 

  Fill: 'rgba(255,255,255,0)', 
  Stroke: 'rgba(255,255,255,1)', 
  Rotation: 0 


3) Store the current configuration value when exiting or saving the "Format symbol" panel :


// if there is still no input, delete it. This happens when enter is pressed on the dialog with no input
// or URL
if (!data.inputText) {
  // delete
} else {
  scope.config.StaticText = data.inputText;
  scope.config.LinkURL = data.linkText;
  scope.config.NewTab = data.newTab;

  /* ADDED BY CGI/Cédric Canguilhem */
  scope.config.Outline = data.outline;
  /* END ADDED */

  // load does some validation/repair of the configuration that also happens on loading
  // we may not want to do all the loading validation here if those checks become more expensive
  // but for now this is OK


4) Provide functions to get the current configuration value, or to toggle the outline on/off :


var def = { 
  typeName: 'statictext', 
  datasourceBehavior: CS.Extensibility.Enums.DatasourceBehaviors.None, 
  createSymbolOnDataSourceDrop: true, 
  iconUrl: 'Images/chrome.toolbar_static_text.white.svg', 
  getDefaultConfig: getDefaultConfig, 
  inject: ['$rootScope', 'displayProvider', 'routeParams', '$location'], 
  templateUrl: 'scripts/app/editor/symbols/sym-statictext-template.html', 
  StateVariables: ['Fill', 'Blink'], 
  resizerMode: 'AutoWidth', 
  loadConfig: validateConfig, 
  visObjectType: textVis, 
  configTemplateUrl: 'scripts/app/editor/symbols/sym-statictext-config.html', 
  configTitle: CS.ResourceStrings.FormatTextOption, 
  configure: { 
  shapeFillKeyword: CS.ResourceStrings.ShapeFillKeyword, 
  textColorKeyword: CS.ResourceStrings.TextColorKeyword, 
  shapeRotationKeyword: CS.ResourceStrings.ShapeRotationKeyword, 

  /* ADDED BY CGI/Cédric Canguilhem */ 
  outlineKeyword: CS.ResourceStrings.OutlineKeyword || "Outline", 
  isOutlined: function (config) { 
  if (config && config.Outline) { 
  return config.Outline; 
  } else {
  return false;
  toggleOutline: function (config) {
  if (config && config.Outline) { 
  onfig.Outline = !(config.Outline);
  /* END ADDED */



Modifications to the "Scripts\app\editor\symbols\sym-statictext-template.html" file :


Just add the outline css class to the container div, depending on the outline option value :


<div style="width:100%; height:100%;padding-top:5px;">
  <!-- MODIFIED BY CGI/Cédric Canguilhem
  <div class="static-text-symbol"
         ng-style="{background: (Fill || config.Fill), 'font-size': fontSize}"
         ng-class="{'blink': Blink}">
  <div class="{{config.Outline ? 'static-text-symbol outline': 'static-text-symbol'}}"
         ng-style="{background: (Fill || config.Fill), 'font-size': fontSize}"
         ng-class="{'blink': Blink}">
  <!-- END MODIFIED -->
        <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;"



Modifications to the "Scripts\app\editor\symbols\sym-statictext-config.html" file :


Add the following lines to the beginning of the file :


<div class="c-side-pane t-toolbar">
    <span style="color:#fff; margin-left:10px">{{::def.configure.outlineKeyword}}</span>
<div class="config-option-format">
  <input type="checkbox"
  value="{{def.configure.isOutlined(config)}}"> {{::def.configure.outlineKeyword}} <br />


And voilà !! :


Static text outline.png


Please feel free to add any comment or suggestion