Hi all, PI Vision fans !

 

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

https://feedback.osisoft.com/forums/320517-pi-vision-formerly-pi-coresight/suggestions/17335021-glow-effect-or-outline-around-text

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 :

 

.outline 
{ 
  color: white; 
  text-shadow: 
  -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
  displayProvider.removeSymbol(scope.runtimeData.name);
  $rootScope.$broadcast('selectedSymbolChangeEvent');
} 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
  validateConfig(scope.config);
  that.onResize();
}

 

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"
         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}">
  -->
  <div class="{{config.Outline ? 'static-text-symbol outline': '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}">
  <!-- 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;"
                  ng-style="{color:config.Stroke}"
                  ng-bind="config.StaticText">
            </span>
        </a>
    </div>
</div>

 

 

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>
<div class="config-option-format">
  <input type="checkbox"
  class="c-config-checkbox"
  ng-checked="def.configure.isOutlined(config)"
  ng-click="def.configure.toggleOutline(config)"
  value="{{def.configure.isOutlined(config)}}"> {{::def.configure.outlineKeyword}} <br />
</div>

 

And voilà !! :

 

Static text outline.png

 

Please feel free to add any comment or suggestion