For today's little adventure down the rabbit hole we are going to look at getting some extra time ranges available as quick links on PI Coresight hosted ProcessBook displays.

This is only a short block post because it is very simple to achieve, but actually gives you some nice functionality!

 

Some new time ranges.

By default you should all be familiar with these time ranges...

 

 

However, check out the time ranges on my PI Coresight instance:

 

That is correct, not only do I have some smaller time ranges such as 15 minutes, 30 minutes and 45 minutes, but I have introduced a quick start time of "t" or "midnight today".

If you are looking hard enough you will also see the time range "y > t" which will set my display to "midnight yesterday to midnight today".

Of course it works flawlessly.

 

 

Got your attention? Then read on.

Note: you'll be modifying some files so make a backup of each file before you modify it!

 

Modifying the MVC files.

PI Coresight is built as an MVC app so there are some parts that we can use to our advantage to add some useful features. We could build some of these into Coresight Candy but this direct approach actually feels neater to me.

 

I am going to fast forward some parts of the explaining MVC as there are plenty of resources out on the web for that type of explanation.

Anyway, I just finished a cup of tea and the tea leaves at the bottom of my cup told me that I should focus my attention on 3 files:

 

  • ~/Views/Home/_TimeBar.cshtml    (the page that puts the time bar together)
  • ~/Content/Display.css   (where the style of the time bar is held)
  • ~/Scripts/app/pbviewer.timebar.viewmodel.js    (where some voodoo happens to change the time range)

 

_TimeBar.cshtml

My first job was to add some extra buttons to click on for the additional time ranges. So I opened up "_TimeBar.cshtml" and found where the buttons are defined:

<div id="timeBar-buttons-bar" class="btn-group">
        <button type="button" class="btn btn-default timeBar-duration-button" data-bind="click: changeRange('1h')">
            @OSIsoft.PBViewer.Web.Properties.Resources.TimeBarButton1h
        </button>
        <button type="button" class="btn btn-default timeBar-duration-button" data-bind="click: changeRange('8h')">
            @OSIsoft.PBViewer.Web.Properties.Resources.TimeBarButton8h
        </button>
        <button type="button" class="btn btn-default timeBar-duration-button" data-bind="click: changeRange('1d')">
            @OSIsoft.PBViewer.Web.Properties.Resources.TimeBarButton1d
        </button>
        <button type="button" class="btn btn-default timeBar-duration-button" data-bind="click: changeRange('1w')">
            @OSIsoft.PBViewer.Web.Properties.Resources.TimeBarButton1w
        </button>
        <button type="button" class="btn btn-default timeBar-duration-button" data-bind="click: changeRange('1mo')">
            @OSIsoft.PBViewer.Web.Properties.Resources.TimeBarButton1mo
        </button>
    </div>

 

That looks straightforward enough. There's a js function "changeRange" that is being called to change the range so I'll re-use that (for now). I'll copy one of the button definitions and just change the range to make sure it works...

       <button type="button" class="btn btn-default timeBar-duration-button" data-bind="click: changeRange('45m')">
            45m
        </button>

 

I've added the text for the button directly as the text for 45m won't exist in the resources.

Save.

Load PI Coresight ProcessBook display.

Voila.

I now see 45m on the time bar, and if I click on it then I see the start time change to "-45m"!

 

Hang on a minute, I've lost the "1mo" option. It seems to have been pushed off the end. Time to dive into the css to see how it is being styled...

 

Display.css

Okay, I know the containing div had an id of "timeBar-buttons-bar" so I'll have a quick search for that.

Here we go:

 

Now it makes sense, there is a fixed width and a margin being applied. That's easy enough to solve. As OSIsoft were displaying 5 options for the time ranges then each button needs 55px (275px / 5) and the margin needs -27.5px (137.5px / 5) for the number of buttons.

As I've added a 6th button I'll just modify the width to 330px and the margin-left to -165px.

Save.

Load PI Coresight ProcessBook display.

Voila.

I now see all six of my time ranges!

 

So now I can just add some extra time ranges and make sure I adjust the css too.

 

pbviewer.timebar.viewmodel.js

I thought this was a little bit too easy, I've just added the time range button for "today" ("t") but it has a problem.

   <div id="timeBar-buttons-bar" class="btn-group">
        <button type="button" class="btn btn-default timeBar-duration-button" data-bind="click: changeRange('t')">
            t
        </button>
        <button type="button" class="btn btn-default timeBar-duration-button" data-bind="click: changeRange('15m')">
            15m
        </button>
        <button type="button" class="btn btn-default timeBar-duration-button" data-bind="click: changeRange('30m')">
            30m
        </button>
        <button type="button" class="btn btn-default timeBar-duration-button" data-bind="click: changeRange('45m')">
            45m
        </button>
        <button type="button" class="btn btn-default timeBar-duration-button" data-bind="click: changeRange('1h')">
            @OSIsoft.PBViewer.Web.Properties.Resources.TimeBarButton1h
        </button>
        <button type="button" class="btn btn-default timeBar-duration-button" data-bind="click: changeRange('8h')">
            @OSIsoft.PBViewer.Web.Properties.Resources.TimeBarButton8h
        </button>
        <button type="button" class="btn btn-default timeBar-duration-button" data-bind="click: changeRange('1d')">
            @OSIsoft.PBViewer.Web.Properties.Resources.TimeBarButton1d
        </button>
        <button type="button" class="btn btn-default timeBar-duration-button" data-bind="click: changeRange('1w')">
            @OSIsoft.PBViewer.Web.Properties.Resources.TimeBarButton1w
        </button>
        <button type="button" class="btn btn-default timeBar-duration-button" data-bind="click: changeRange('1mo')">
            @OSIsoft.PBViewer.Web.Properties.Resources.TimeBarButton1mo
        </button>
    </div>

 

It I use the same "changeRange" function as per the other time range buttons then the range is being prefixed with a "-" (minus) symbol, and "-t" is an illegal time syntax. So my button isn't working and PI Coresight doesn't hold back in telling me so!

I am going to need to take a look at the changeRange function, which is why I open up the "pbviewer.timebar.viewmodel.js" file.

Here is the function:

 

Okay, that makes sense and I can live with that.

For my "t" time range I only need to change the start time, which is basically the same just without the "-" prefix. I'll just add another function...

    self.changeStartTime = function (startTime) {
        if (startTime) {
            changeStartAndEnd(startTime, self.endHasError() ? lastEndTime : lastEndRequested);
        }
    };

Save.

 

So I can now change my button definition to call this function instead...

       <button type="button" class="btn btn-default timeBar-duration-button" data-bind="click: changeStartTime('t')">
            t
        </button>

Save.

Load PI Coresight ProcessBook display.

Voila.

 

 

It now changes the start time to be "t" just as I hoped.

That literally took me no time at all to do.

 

Now for my special "y > t" time range I am going to need to change the start time AND end time. I'm going to need another function...

    self.changeStartEndTime = function (startTime,endTime) {
        if (startTime && endTime) {
            changeStartAndEnd(startTime, endTime);
        }
    };

 

Now I can add my button. Remember to enlarge the time bar area in the css file, we're up to ten buttons now (550px width, -275px margin-left)!

 

<button type="button" class="btn btn-default timeBar-duration-button" data-bind="click: changeStartEndTime('y','t')">

  y > t
</button>  

Save.

Load PI Coresight ProcessBook display.

Voila.

 

 

Now you can add other time ranges that make sense for your needs.

Isn't it a shame that we don't have an Event Frames option so that the start & end time is based on a selected Event Frame. Now there's an idea...