Web View+

Overview

When to use it

Use this symbol when you need to:

• Show another PI Vision display inside the current display, so operators do not have to navigate away.
• Offer several displays or pages as tabs, or rotate through them as a slideshow.
• Keep a page out of the way until needed, and open it in a movable window from a button.
• Pass the display time range, the asset, or a data source value on to the page you show.

Choose Navigation Button+ when the target page should replace the current display instead of staying embedded.

Before you begin

• Use pages that allow embedding. PI Vision displays always work. For any other site, the PI Vision administrator must allow it first, see the section "Allow WebView+ frames" in the installation and administration guide.
• A site can still refuse to be framed. That is the site's own decision, and PI Vision cannot override it.
• Use HTTPS pages when PI Vision runs on HTTPS. Browsers block mixed content.
• For Attribute mode, have a string PI Point or AF attribute that holds the page address.
• The SeeQ page type needs a Seeq URL that the administrator sets in config.js. Until then SeeQ stays dimmed.

Add and set up the symbol

1. Select Web View+ in the PI Vision symbol gallery and drag it onto the display.
2. Right-click the symbol and select Configure WebView....
3. Under General, select Embedded for Display (1) and Single for Mode (2).
4. Under Page, select PI Vision for Type (1).
5. Enter the address of the display (2), for example ./#/Displays/184/Production-Report-Page-1. To search by name or owner instead, select Search for Displays ....
6. Close the configuration pane. The display appears in the symbol, without its own toolbar, sidebar, and time bar.

Common tasks

Match the embedded display to the display time range

Use this when the embedded display should show the same period as the display around it. The embedded display keeps its own saved range until you do this. Here it was showing 7 days, as in the quick start.

1. Right-click the symbol and select Configure WebView....
2. Under Page, select Set start and end time (1).
3. To show the time bar of the embedded display, select Show Timebar (2).

The embedded display now shows the range of the display time bar, here 8 hours.

Show several pages as tabs

Use this to let operators switch between related displays in one frame.

1. Right-click the symbol and select Configure WebView....
2. Under General, select Multiple for Mode (1) and Tabs for Type (2).
3. Under Pages, select the first page in the list. Select its Type, enter the address, and enter a Title (1).
4. Select + (2) to add another page, and repeat step 3.

Each enabled page becomes a tab. A page without a Title shows as Page 1, Page 2, and so on. Select a tab to show its page.

Rotate pages as a slideshow

Use this on a wall display where nobody clicks. Set up the pages as in the previous task, steps 3 and 4.

1. Right-click the symbol and select Configure WebView....
2. Under General, select Multiple for Mode and Slideshow for Type (1).
3. To let viewers step through the pages, turn Slideshow Buttons on (2).
4. Under Interval, select Global, and enter the seconds each page stays visible in Time [s] (3).

The pages rotate. The previous, pause, and next buttons appear in the lower-right corner of the frame.

To give each page its own dwell time, select Individual, and set Interval on each page under Pages. To keep several displays in step, give them the same Reference Time.

Open a page in a dialog from a button

Use this to keep the display uncluttered and show the page only on request.

1. Right-click the symbol and select Configure WebView....
2. Under General, select Dialog for Display (1).
3. Select Fixed for Size and enter Width and Height in pixels (2), or select Relative to size the window as a share of the browser window.
4. Under Button, set Background (3) to transparent if the display should show through, and set the Foreground and Font Size.
5. Select Custom for Text (4) and enter the label.
6. Under Border, set Width (5), Color, and Radius.
7. Under Mode and Page, choose the page as in the quick start.

The symbol becomes a button.

Select the button to open the page. The dialog is centered on the display, and its title bar shows the page address.

Choose the page from a data source value

Use this when the page changes with a process state, such as a different overview for each product. The data source must be a string value that holds the page address.

1. Drag the string PI Point or attribute onto the symbol, or add it with the symbol.
2. Right-click the symbol and select Configure WebView....
3. Under General, select Attribute for Mode.
4. Under Page, select PI Vision or Custom for Type. SeeQ is not available in this mode.

The symbol shows the page at the address in the first data source (1) of Trace Options. When the value changes, the symbol loads the new address. The page settings under Page still apply to it.

Pass the display time to a custom page

Use this for a page that is not a PI Vision display, or when you need to control the address yourself. A parameter is a key and a value that the symbol adds to the address. A placeholder such as %displayStartTime% in a value is replaced by live display context.

1. Under General, set Mode to Single.
2. Under Page, select Custom for Type and enter the address (1).
3. Select + (2) to add a parameter, and enter the key (3), for example starttime.
4. Select @ (4) next to its value and choose Display Start Time.
5. Add a second parameter with the key endtime and the value Display End Time.

The symbol builds the address with the current range. This dialog title shows ?starttime=*-8h&endtime=*, and the page shows the same 8 hours.

Placeholders are case sensitive. A placeholder the symbol does not know, such as %Element%, is sent to the page unchanged. The full list is under Substitution placeholders.

Use the symbol

• Interact with the page when Interaction is on. When it is off, the page is read-only and clicks do not reach it.
• Pause freezes the slideshow on the page it shows, and the button becomes Play. Next and Previous still change the page while paused.
• Tabs show the page of the selected tab. In tabs mode, Reload reloads the selected tab only.
• Dialog buttons open the page in a window. Drag the title bar to move it, drag the lower-right corner to resize it, select the arrow icon at the left of the title bar to open the page in a new browser tab, and select the x to close it.
• Web View+ never writes data. What an action inside the page does belongs to that page.
• Nothing to show: when there is no valid address, the symbol shows a short message instead of a page. See Troubleshooting.

Configure the symbol

Right-click the symbol and select Configure WebView.... The pane has the groups General, Page (Single and Attribute mode), Pages (Multiple mode), Trace Options, and Help.

General

Slideshow

Available in Multiple mode with Slideshow.

Tabs

Available in Multiple mode with Tabs.

Page

Available in Single and Attribute mode. In Multiple mode the same settings are under Pages for the selected page.

PI Vision page

Navigation Button opens the page in a new tab with the toolbar, sidebar, and context menu restored, because a full page normally wants them.

Custom page

Enter an address and any number of parameters. Select + to add a parameter, @ to insert a placeholder, and the trash icon to remove one. See Pass the display time to a custom page.

Substitution placeholders

Placeholders work in parameter values and in the address itself. Each substituted value is encoded for you.

For a specific data source, append : and its position: %value:2%, %attributePath:3%. A position without a data source gives an empty value. The order is set under Trace Options.

Pages

Available in Multiple mode. Use the list to add, reorder, and remove pages. Each page has its own Type, address, and Scale, with the settings of Page above.

Seeq page

A SeeQ page opens Seeq's workbook builder on the Seeq server from config.js. No address is entered. Seeq accepts only ISO 8601 times and *-8h style relative times, so enter custom times in one of those forms. A time that cannot be converted leaves the whole start and end pair out of the address.

Assets are sent as Seeq asset paths: af:\\Server\Database\Pump1|Status becomes Pump1>>Status. Check Asset Swap against your Seeq version before you rely on it.

Trace Options

Lists the data sources of the symbol. Reorder or remove them here. The first one supplies the address in Attribute mode and the unindexed placeholders such as %value%.

Help

Shows how the administrator allows other sites to be framed.

Troubleshooting and limitations

Limitation: A page that refuses framing stays blank. Web View+ does not work around that.

Limitation: Setting FrameSrcPolicy to Disable removes the frame restriction from the whole PI Vision application, not only from this symbol. Ask the administrator to list the hosts you embed instead.