Jerome Lefebvre

Adding to the graphic library experiment

Blog Post created by Jerome Lefebvre on Apr 4, 2018

This article is simply a showcase of an idea, while we know that customers want to have the ability to add and remove graphics in the graphic library, this feature is not fully supported in PI Vision 2017 R2.

 

Since version 2017, the much beloved Graphic Library has made an entrance in PI Vision.

Probably since then, users have wanted to add to this library, for example to help with distributing standard images.

Or, also to reduce the number of symbols included in a display. (Once one reaches hundreds of symbols in a single page, PI Vision does suffer lost of performance)

 

Let's see how we could tackle that second problem.

In PI vision, it is common to create a shapes like the one below to help group and highlight values.

This would then introduce 5 symbols (one green box, 4 white box)

 

Here is the, again unsupported way, to add a single SVG that would replace those 5 symbols, with one svg image.

This image would have the added advantage that it would be stored in the browser cache.

 

First, part of this being unsupported, is that there is a huge amount of diversity within SVG files. It is a protocol that is much harder to work with than PNGs or other graphics.

Thus, if you simply grab a file from a public internet source, there is a high chance it will not work.

 

To re-create the graphic above, I've used the free utility https://inkscape.org/en/  that is also available from the Windows 10 App store.

Re-creating the graphic above is done quite easily using the various tools available in Inkscape.

 

On my PI Vision folder, I created a folder in %pihome64%\PIVision\Graphics folder.

I tend set the security for that folder, so that the folder content is readable by all PI Vision users.

One way to test if the security is correctly set is to see if the file is accessible from PI Vision users' browsers.

In my case, I checked by opening the link below from my browser.

https://pivisionserver/pivision/graphics/CustomJerome/GridJerome.svg

 

For PI VIsion to be aware of the addition of this file, an iisreset is needed to be performed on the PI Vision server.

Once that is done, in the graphic library, a new folder was added in and my new graphic was created.

Outcomes