Jerome Lefebvre

Slightly editing the timebar

Blog Post created by Jerome Lefebvre on Sep 28, 2020

Slightly editing the timebar

PI Vision timebar is a convenient way to navigate through your data and provides common time increments that useful for most of our users. But, we do have many users that tend to operate on different scales than what is provided.

 

Warning

!!This is NOT a supported change!! This could have an adverse on PI Vision
What you should use this in a test environment and contact us directly or post on our feedback site for how such a change would be beneficial to you.

Timebar: Add control for flexible time manipulation
Additional options for the timebar time-range

The change

On your PI Vision server, navigate to %pihome64%\PIVision\Scripts\app\editor\timebar, before we edit, make sure to backup timebar-template.html so that you can revert back to it.

Starting on line 3, we see the following. The things we obviously want to change is the 1h, 8h, 1d, etc. As PI Vision is localized the strings themselves are not in the file itself, but instead, we have ways of referring to them via the buttonLabels.onehour, etc. We will instead hard code some values in.

<div class="t-header buttonbar">
<button type="button" ng-click="timebarModel.changeRange('1h')" ng-bind="::timebarModel.buttonLabels.onehour"></button>
<button type="button" ng-click="timebarModel.changeRange('8h')" ng-bind="::timebarModel.buttonLabels.eighthours"></button>
<button type="button" ng-click="timebarModel.changeRange('1d')" ng-bind="::timebarModel.buttonLabels.oneday"></button>
<button type="button" ng-click="timebarModel.changeRange('1w')" ng-bind="::timebarModel.buttonLabels.oneweek"></button>
<button type="button" ng-click="timebarModel.changeRange('1mo')" ng-bind="::timebarModel.buttonLabels.onemonth"></button>
</div>

Change the above to:

<div class="t-header buttonbar">
<button type="button" ng-click="timebarModel.changeRange('10s')" ng-show=true>10s</button>
<button type="button" ng-click="timebarModel.changeRange('1m')" ng-show=true>1m</button>
<button type="button" ng-click="timebarModel.changeRange('10m')" ng-show=true>10m</button>
<button type="button" ng-click="timebarModel.changeRange('1h')" ng-show=true>1h</button>
</div>

Where, 10s, 1m, etc are the increment you want to test out.
Now all that is needed is to a refresh in PI Vision.

Further tweaking

Again, not in any way supported, please do not do this on your production environment. This is simply for testing!
When you hit the back and forward arrows in PI Vision, this will cause a full jump by the specified time range. This is done by calling the scrollBack and scrollForward function. It is relatively to implement those functions to your liking, such as creating a new scrollBackJustABit function.

Outcomes