Jerome Lefebvre

Visualizing realtime pictures in PI Coresight

Blog Post created by Jerome Lefebvre on Feb 9, 2017

I wrote the code below with the help of Kenji Hashimoto (apologizes for the Japanese screenshots they come from my original post.)


There is a lot of types of time index data other than sensor data, here is one example of dealing with pictures that are tagged with the time that they are taken.

(There are many ways to do so, this is only one approach)


The first step, is to store in the file names along with their times as tag.

For example, here are times taken every seconds.

(if the filenames are simply indexed numerically as above, it would make a lot more sense to just store the number in a numerical tag than the whole file name as string, to save up on space in the archive. Just make sure you turn off compression/exception!)


To visualize this data, we will write a custom symbols, but first we must make the pictures available to PI Coresight.

To do so we add the folder that stores the pictures as a virtual folder to PI Coresight (this folder can also be a network folder)

Doing so, we could see the pictures in Coresight by looking at the url: https://{servername}/ExternalPicutures/SpinningTop115.png.

Note that these Virtual folders added to the PI Coresight site may be removed during upgrades.


The symbol is base on the Simple Value tutorial example and we only need to edit the html template file to the code below:


<img src="../ExternalPictures/{{value}}" ng-attr-style="height:100%; width:100%; background: {{Fill || 'rgba(255,255,255,0)'}};">


One we do so, we can now easily visualize everything in PI Coresight! Here is a quick animation of what this looks like.




Don't forget that the default refresh time in PI Coresight is 5 seconds. But, to loop things as in the above, you can make use of the playback custom symbol.

You can view the code below.

GitHub - JeromeLefebvre/PictureCustomSymbol: A simple custom symbol to display pictures