Skip navigation
All People > Cédric Canguilhem > Cédric Canguilhem's Blog

Hi all, PI Vision developers !

 

In this first post of the mini-series about PI Vision native shapes, you will learn how to change few things to the sliders found in the configuration pane.

 

Particularly, the Weight slider that manages the width in pixels of the rectangle shape :

 

You will then be able to apply those changes to the other standard shapes :

  • Ellipse
  • Line
  • Arc
  • Pentagon

 

For all shapes, the border's default weight is set to 3 pixels. If you let the hand pointer enough time above the slider cursor, a tooltip will show you the actual value of the Weight attribute :

 

If you move the slider, you'll find out that :

  1. The step for the slider is 0.25
  2. The minimum value equals 2 
  3. You don't see the actual value being edited, unless you stop moving the slider and wait until the tooltip shows up

 

I don't really get the point about quarter pixels (?!), but I think it may be for graphics rendering considerations I don't understand, or may be linked to the display's "zoom in / zoom out / fit screen" feature.

 

However, the 2 other points really annoy me.

 

Change the range of a slider

This is very simple :

  • Edit the file "sym-rect-template.html" located under "PIPC\PIVision\Scripts\app\editor\symbols"
  • Locate the "<pv-slider [...] />" element associated to the StrokeWidth attribute (lines 27 on my instance) :
  • Change the minimum value to 0
  • Change the maximum value to 20
  • Change the step value to 1

 

Your code should look like :

<div
style
="margin-left: 20px; margin-right: 32px;"
>


<pv-slider keyword="res.WeightKeyword"
ng-model="config.StrokeWidth" min="0" max="20" step="1" />


</div>

 

Check the result :

 

Always display the current value of a slider

We are going to change the configuration file that is shared by native shapes.

So be careful of what you're doing, and keep in mind the changes will apply to all 5 shapes.

Also very simple :

  • Edit the file "sym-shape-config.html" located under "PIPC\PIVision\Scripts\app\editor\symbols"
  • Remove the "keyword" attribute from the "pv-slider" element :
<pv-slider ng-model="config.StrokeWidth" min="0" max="20" step="1" />
  • Add the following line above the "pv-slider" element :
<div class="config-label">{{::res.WeightKeyword}} : {{config.StrokeWidth}}</div>

 

Check the result :

 

If you have any question or suggestion, don't hesitate to comment this post !

Hi all, PI Vision developers !

 

This blog post is part of a mini-series about adding a log feature to the native Value symbol, and hiding it into an easter egg. I suggest reading the previous blog posts if not done yet :

 

In the first steps of this mini-series of blog post, we created 2 custom option groups inside the configuration pane of the native "Value" symbol, and a button to manage their visibility :

 

 

Step 5 : How to hide some configuration options behind an easter egg

For the easter egg, I choose those very uncommon settings :

 

  • Fill color is set to "#abcdef"
  • Text color is set to "#cdefab"
  • Value color is set to "#efabcd"
  • Font size is set to "1.2"

 

Add the following lines in the "configChange" function, just after the lines implementing the log added during the previous blog post :

// Easter Egg trick
if (newConfig.Fill == "#abcdef"
&& newConfig.Stroke == "#cdefab"
&& newConfig.ValueStroke == "#efabcd"
&& newConfig.FontSize == 1.2) {

// Show the secret configuration option groups
newConfig.ShowEasterEggOptions = true;
}

 

Check the result :

 

Few imperfections that have to be fixed :

  1. The "Change Status" button must be part of the easter egg (not shown by default), and its text has to be more significant.
  2. The user has to change at least one value of the configuration items linked to the easter egg, otherwise the "Change Status" button has no effect.
  3. The font size of 1.2 make the symbol not readable at all. This value is obviously not the one to be kept in long term.

 

2 solutions for point 1. :

  1. Just move the button inside the "About" option group in the "sym-value-config.html" file, and rename it as below :
  2. Or add the "ng-show" directive to the button (preferred one) :

 

Points 2. and 3. will be solved with the following lines in the "configChange" function :

 

Check the result :

 

If you have any question or suggestion about this mini-series, don't hesitate !

 

 

Hi all, PI Vision developers !

 

This blog post is part of a mini-series about adding a log feature to the native Value symbol, and hidding it into an easter egg. I suggest reading the previous blog posts if not done yet :

 

Step 4 : How to create a simple javascript console log feature from scratch

Debugging your custom symbols and extensions is fundamental, even in Production environments.

Everyone agrees that third-party developments SHOULD NEVER push debug traces to the javascript console, unless they are explicitly told to. And this feature MUST be able to be deactivated.

 

The javascript "console" object has many functions very useful : error(), warn(), debug(), group(), table()...

(see Console specifications on the Mozilla Developer Network)

 

For this example, we will only use the "console.log(..)" statement.

 

Step 4.1 : Create a new option group dedicated to the log feature

  • Edit the "sym-value-config.html" file.
  • Duplicate the "<li> ... </li>" code block dedicated to the "About" option group.
  • The new group will be placed between "Visibility" and "About", rename its title as "Log"
  • Remove everything inside the div

 

your code should now look like :

<!-- LOG -->
<li class="k-state-active k-state-active-custom" ng-show="config.ShowEasterEggOptions">
<span class="panel-bar-label-no-wrap">Log</span>

<div
style
="margin: 10px 20px 15px 10px;"
>

</div>
</li>

<!-- ABOUT -->
[...]

 

And the configuration pane should be :

 

Step 4.2 : Create a new attribute to store the activation status for the log feature

Similarly to what we've done in the previous blog post, edit the "PIVisualization.sym-value.js" file, then add a new attribute named "LogIsActivated" inside the "getDefaultConfig" function :

// CUSTOM ATTRIBUTES
config.ShowEasterEggOptions = false;
config.LogIsActivated = false;
// END CUSTOM ATTRIBUTES

 

Step 4.3 : Add a checkbox for activating / deactivating the log feature

In the "Visibility" option group, checkboxes are encapsulated into labels.

 

To be consistent, we'll do the same :

  • Create a new label inside the div, update its content to "Log is activated" :
    <div
    style
    ="margin: 10px 20px 15px 10px;"
    >


    <label class="flex-align-center">Log is activated</label>
    </div>
  • Insert a input field of type "checkbox" above the text of the label, as below :
    <label class="flex-align-center">
    <input type="checkbox" class="c-config-checkbox"
    ng-model="config.LogIsActivated" />

    Log is activated
    </label>

The "ng-model" AngularJS directive creates a double-way binding between this checkbox and the attribute in the symbol's configuration.

 

This means that every change on one side will be reflected to the other :

  • If you change the value of the attribute (by javascript code), the checkbox will be checked or unchecked accordingly in the user interface
  • If you click on the checkbox to check or uncheck it, the attribute's value will be updated

 

This synchronization is done automatically by the AngularJS framework.

Direct benefit : you don't need to add a callback to the checkbox in order to catch click or status change events (like we did for the button).

 

Bonus : Test the double-way binding

If you want to bypass this optional paragraph, you can go directly to step 4.4.

You may make a copy of what you've done till now, since the following steps have to be undone at the end of the process.

 

  1. From checkbox to attribute
    Add the following line at the end of the configuration file :
    LogIsActivated = {{config.LogIsActivated}}

    The aim of the double brackets around "config.LogIsActivated" is to evaluate its contents.

    The symbol's configuration pane should have the following behavior :

    The checkbox status masters the value of the attribute.
  2. From attribute to checkbox
    Replace the div containing the button at the end of the configuration file by the following lines :
    <div
    style
    ="margin: 10px 15px; padding: 6px 0"
    >


    <input
    type="button" class="c-primary-button" value="Change Log Status"
    ng-click="config.LogIsActivated = !config.LogIsActivated;"/>

    </div>

    The aim of this code is to invert the value of the configuration attribute "LogIsActivated" every time the user clicks on the button "Change Log Status". 

    The symbol's configuration pane should have the following behavior :

    The attribute's value masters the checkbox status.

 

Now don't forget to undo the changes made in this bonus paragraph

 

Step 4.4 : Create a new attribute for the log level

When I debug my custom symbols, I usually start with 3 common log levels :

  • None : no log at all is pushed to the console (*)
  • Basic : the log feature logs a new line in the console each time a function is called.
  • Full : all detailed information required for my debugging

 

(*) You probably wonder why this option is required, since deactivating the whole log will have the same effect ?!

I'll later show you why I think it is useful.

 

To create a dedicated attribute, same thing as previously : edit the "PIVisualization.sym-value.js" file, then add a new attribute named "LogLevel" inside the "getDefaultConfig" function :

// CUSTOM ATTRIBUTES
config.ShowEasterEggOptions = false;
config.LogIsActivated = false;
config.LogLevel = "None";
// END CUSTOM ATTRIBUTES

By default, the log is deactivated (line 3), so the log level must default to "None" to be consistent.

 

Step 4.5 : Add dropdown list for the log level

Paste the following lines under the "LogIsActivated" checkbox (actually, under the label containing its input field) :

<select
class="config-option-list"
style
="width: 50%;"

ng-model="config.LogLevel"
ng-model-options="{ getterSetter: true }">


<option value="None">None</option>
<option value="Basic">Basic</option>
<option value="Full">Full</option>

</select>

 

The result is :

 

Available values are :

 

OK, but not fully satisfying.

  1. The list needs a text to indicate its purpose. The text will be located at its left.
  2. Since the list depends on the checkbox, I like indenting it and aligning the first letter of both texts (the one of the checkbox, and the one next to the list).
    One option is to nest the list into a single-row div that has specific margins, and to put the text "Log Level" inside a new div, before the list :
    <div
    class="config-option-single-row"
    style
    ="margin: 0px 15px 0 28px;"
    >


    <div class="config-label">Log level</div>

    <select
    class="config-option-list"
    style
    ="width: 50%;"

    ng-model="config.LogLevel"
    ng-model-options="{ getterSetter: true }">


    <option value="None">None</option>
    <option value="Basic">Basic</option>
    <option value="Full">Full</option>

    </select>
    </div>
  3. Moreover, when the log is deactivated, we expect the dropdown list not to be displayed.
    To achieve this, just add the following "ng-show" directive to the div with margins :
    <div
    class="config-option-single-row"
    style
    ="margin: 0px 15px 0 28px;"

    ng-show="config.LogIsActivated">

    This directive will map the visibility of the Log Level list to the value of the "LogIsActivated" attribute.

Result :

 

Note : I assume there are various different solutions for this.

I'm far from an experienced web developer, so if you have better implementation, please advise ! 

 

Step 4.6 : Add log statements to the implementation file

Some functions are commonly used in native and custom symbols :

  • getDefaultConfig
  • loadConfig
  • configInit
  • configChange
  • dataUpdate

 

Add the following lines at the very beginning of the "dataUpdate" function :

// LOG
if (this.scope.config.LogIsActivated) {

if (this.scope.config.LogLevel != "None") {
console.log("[VALUE] dataUpdate(data)");
}

if (this.scope.config.LogLevel == "Full") {
console.log("data = ");
console.log(data);
}
}

What does this code do ?

  1. If the log is not activated, nothing at all
  2. If the log is activated :
    1. if the log level is set to "None", nothing at all
    2. if the log level is set to "Basic", it pushes one single line to the console window in order to log the function call
    3. if the log is set to "Full", it logs the function call (same as 2.b) and logs the entire content or the "data" parameter that is passed to the "dataUpdate" function by the PI Vision framework.

 

Note : the object "this.scope" represents the whole symbol's characteristics : its metadata, its configuration, its runtime data, etc...

 

Let's see the result of each case.

You'll need to display the developpement tools pane in your web browser (F12 in Chrome).

 

Here you can see that the log level's value (Full) was kept when I deactivated the log.

Then, when I reactivated the log, it restarted to push the data's content to the console.

 

This may not be the expected behavior, especially when you have many traces in your javascript code.

 

What we are going to do, is to set the log level to "None" when the log is deactivated.

 

4.7 Track configuration changes

Let's add some log to the "configChange" function, that is called every time... the symbol's configuration is changed (thanks Captain !!!).

 

Add the following lines at the very beginning of the "configChange" function :

// LOG
if (this.scope.config.LogIsActivated) {

if (this.scope.config.LogLevel != "None") {
console.log("[VALUE] configChange(newConfig, oldConfig)");
}

if (this.scope.config.LogLevel == "Full") {
console.log("oldConfig = ");
console.log(oldConfig);
console.log("newConfig = ");
console.log(newConfig);
}
}

 

Here, the Full log level will display the content of the symbol's previous and current configuration settings.

 

4.8 Make the symbol's configuration consistent

Inside the "configChange" function, add the following line just after the log feature :

// Check log activation status
if (!newConfig.LogIsActivated) {

// Update log level
newConfig.LogLevel = "None";
}

 

Now your code should look like :

 

Check the whole result of steps 4.7 and 4.8 :

 

In the next blog post, we will implement the final eater egg trick to hide everything that is non-native.

 

Don't hesitate to comment if you have any suggestion !

 

 

Hi all, PI Vision developers !

 

This blog post is part of a mini-series about adding a log feature to the native Value symbol, and hiding it into an easter egg. I suggest reading the previous blog posts if not done yet :

 

In the first steps of this mini-series of blog post, we created a custom option group inside the configuration pane of the native "Value" symbol :

 

Step 3 : How to manage the visibility of option groups with a simple button

 

3.1 Add a new attribute to the symbol's configuration, in order to store the visibility status

The name I choose for the new attribute is "ShowEaterEggOptions", and it will hold boolean values (true / false).

 

Edit the file "PIVisualization.sym-value.js", and locate the definition of the symbol's configuration.

This statement begins with the words "var def = {", and is located just before the symbol's registration.

 

Few lines below, you can find the implementation of the "getDefaultConfig" function, which ends by returning an object named "config". This object contains the default values of the symbol's configuration :

 

Paste the following lines just before the "return config;" statement :

// CUSTOM ATTRIBUTES
config.ShowEasterEggOptions = false;
// END CUSTOM ATTRIBUTES

 

For the moment, this has no effect on the symbol.

 

3.2 Map the option group visibility to the new configuration attribute

Visibility can simply be managed through the "ng-show" AngularJS directive.

 

Edit the "sym-value-config.html" configuration file, and add the "ng-show" directive to the "<li>" tag corresponding to the "About" option group, as below :

<!-- ABOUT -->
<li class="k-state-active k-state-active-custom" ng-show="config.ShowEasterEggOptions">

 

The "ng-show" directive evaluates the "ShowEasterEggOptions" attribute as a boolean, and shows or hide the HTML element "<li>" depending on its value.

 

If you restart IIS, the "About" option group is now invisible, because of the false default value in the symbol's definition :

 

No worry, we'll make it appear again 

 

3.3 Add a new button at the end of the configuration pane

Add the following lines add the end of the "sym-value-config.html" file :

<div
style
="margin: 10px 15px; padding: 6px 0"
>


<input type="button" class="c-primary-button" value="Change Status" />
</div>

 

Check that you can see the button in the config pane :

 

3.4 Add a callback to the button

Callbacks for the button's click events can be managed through the "ng-click" AngularJS directive.

 

Add the "ng-click" directive to the button as below :

<div
style
="margin: 10px 15px; padding: 6px 0"
>


<input type="button" class="c-primary-button" value="Change Status"
ng-click="config.ShowEasterEggOptions = !config.ShowEasterEggOptions;" />

</div>

 

The aim of the statement "config.ShowEasterEggOptions = !config.ShowEasterEggOptions;" is to invert the attribute's value each time the button is clicked.

 

This is the result :

 

In the next blog post, we will reuse all this work and implement a log feature with the following requirements :

  • The log feature pushes traces to the javascript console of the browser
  • Log can be activated / deactivated
  • Several log levels are available : None, Basic, Full

 

If you have any comment or suggestion, don't hesitate !

 

And stay tuned for the next steps !

 

 

Hi all, PI Vision developers !

 

This blog post is part of a mini-series about adding a log feature to the native Value symbol, and hiding it into an easter egg. I suggest reading the previous blog post if not done yet :

 

Step 2 : How to style custom extensions to native symbols with CSS

Custom symbols require at least 3 files :

  • sym-[SYMBOL NAME]-template.html : presentation
  • sym-[SYMBOL NAME]-config.html : configuration
  • sym-[SYMBOL NAME].js : implementation

(Please refer to the PI Vision Extensibilty Guide for more details)

 

Custom symbols can be styled directly in the presentation layer with the "style" attribute inside HTML tags.

It is often more readable and maintainable if custom symbols come with their own dedicated stylesheets.

 

Contrarily, native symbols rely on global CSS files, so one simple but dangerous way to achieve styling your extensions is to modify directly those core PI Vision CSS files. One great benefit is that your custom styles will then be shared with all your extensions and custom symbols.

 

Step 2.1 : How to deal with bulleted lists inside the configuration pane

In the first step of this mini-series of blog post, we created a custom option group inside the configuration pane of the native "Value" symbol :

 

Let's add a credits list under the version number :

<label>Author(s) :</label>
<ul>
<li>Style : OSIsoft LLC</li>
<li>Visibility : OSIsoft LLC</li>
<li>About : Cédric Canguilhem</li>
</ul>

 

The list isn't displayed as usual :

No indentation, no bullet.

 

That's because inside the configuration pane, lists aren't bulleted by default.

(the option groups are themselves list items)

 

To fix that :

  1. Edit the "shared.css" file located under "PIPC\PIVision\Content\css", and add the following lines at the end :
    /**********************************************\
    CUSTOM CSS
    \**********************************************/

    .ul-bulleted {
    list-style-type: square;
    list-style-position: inside;
    }

    .ul-bulleted li {
    margin-left: 10px;
    }
    /********** END CUSTOM CSS **********/
  2. In the configuration file of the Value symbol, add the class "ul-bulleted" to the new list :
    <ul class="ul-bulleted">
    <li>Style : OSIsoft LLC</li>
    <li>Visibility : OSIsoft LLC</li>
    <li>About : Cédric Canguilhem</li>
    </ul>

     

Now the list should render correctly :

 

Step 2.2 : How to highlight your custom configuration option groups

Implementing custom features that have the same Look&Feel as the core ones is a very good idea. It strengthens the user understanding and confidence in the product.

 

But you sometimes want to brag about your specific developments, and make them highly distinguishable from the standard !

 

So let our option group be more fancy :

  1. Edit the "shared.css" file located under "PIPC\PIVision\Content\css", and add the following lines inside the "CUSTOM CSS" block created previously at the end of the file :
    .k-state-active-custom span {
    background-color: #d78900 !important;
    }

    .k-state-active-custom span:hover,
    .k-state-active-custom span:hover span
    {
    background-color: #e4b220 !important;
    }
  2. In the configuration file of the Value symbol, add the class "k-state-active-custom" to the top-level "<li>" tag

Your code should now look like :

 

And the option group should render like :

 

When hover with the mouse pointer :

 

In the next blog post, I'll show you how to manage the visibility of an entire option group with a simple button.

 

Stay tuned for the next steps !

 

 

Hi all, PI Vision developers !

 

This blog post is part of a mini-series about adding a log feature to the native Value symbol, and hiding it into an easter egg. Very little knowledge about the PI Vision extensibilty, HTML, CSS, Javascript, and AngularJS directives should be sufficient

 

Step 1 : How to add a custom option group inside the configuration pane

If you plan to create complex custom symbols, or to add many options to existing native symbols, you will probably have to deal with the configuration pane's option groups, in order to organize the symbol's features.

There are surprisingly various configuration pane layouts implemented inside the native symbols and shapes : different HTML tag structures, different CSS classes, different margins, different paddings, etc...

 

I strongly recommand to keep it as simple as possible, and to copy-paste existing code blocks when modifying any of the "sym-[SYMBOL NAME]-config.html" files.

 

First things first, let's add a very simple "About" option group to the Value symbol, which displays the current version number of the symbol :

 

 

  1. Open the file "sym-value-config.html".
  2. Copy the second "<li> ... </li>" block that corresponds to the "Visibility" option group, then paste it under the third option group, just before the closing "</ul>" tag.
  3. In this new block, keep the "<span> ... </span>" that corresponds to the title of the option group, and update it :
    <span class="panel-bar-label-no-wrap">About</span>

  4. Remove everything inside the "<div> ... </div>" block.
  5. Add a label inside the div to display the version number :
    <label>Version : <b><font color="#657281">2020.10.02.</font>01</b></label> 
  6. Add the class "k-state-active" to the top-level "<li>" tag, so that the option group is expanded by default :
    <li class="k-state-active">

 

Your code sould now look like :

 

And the configuration pane should render correctly (don't forget your iisreset ):

 

In the next blog post, I'll add a bulleted list to this new option group (not as straightforward as expected !), and style the option group header with CSS in order to distinguish it from the native ones :

 

Don't hesitate to post any comment or suggestion, I'll really appreciate.

 

And stay tuned for the next steps !

 

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