Cédric Canguilhem

PI Vision Shapes #1 - Little upgrades for the value sliders

Blog Post created by Cédric Canguilhem on Oct 29, 2020

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 :

="margin-left: 20px; margin-right: 32px;"

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



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 !