Playback
- PI Vision Widget -
Revision History
| Revision No. | Date | Author | Document ID | Description of changes |
|---|---|---|---|---|
| 10.0 | January 2026 | RS | EW_Playback_v10.0 | Compatibility PIVision 2025, changed configOptions function functionality and changed colors selection visuals. supportsCollections setted to false. |
| 9.0 | June 2025 | RS | EW_Playback_v9.0.doc | -Compatibility PIVision 2024 -Added Get support -Added rest provider -Graphic restyle |
| 8.1 | April 2024 | MDC | EW_Playback_v8.1.doc | - Play button introduced - Added symbol highlighting |
| 8.0 | March 2024 | MDC | EW_Playback_v8.0.doc | First version |
Document References
| Document | Description |
|---|---|
| PI Vision Installation and Administration Guide | PI Vision™ user manual from AVEVA |
Introduction
The Playback widget allows you to move through the time of a PIVision display using a time step defined in the widget configuration.
The PI Vision of AVEVA is available from 2017 and allows viewing real-time data from PI Data Archive and data organized in assets from the AVEVA Asset Framework (PI-AF). In order to achieve PI Vision displays, simply access https://webServer/PIVision (indicating the correct name of the webserver machine).
The most recent versions of most HTML5 compatible browsers are supported on computers, tablets and phones running Android and iOS.
In PI Vision the configuration of the elements is quite intuitive and is characterized by a simple drag-and-drop of the control into the display.
Definitions, Acronyms And Abbreviations
Acronyms and definitions that are used in the current manual are listed below.
| Term | Definition |
|---|
Operating Principles And Use
To insert the widget you must first select the widget icon, then drag the attribute to which you want to link the widget asset.
Figure 1 - PI Vision Menu
When you release the mouse, the following image appears and the widget is ready to be used.
In the configuration of the widget it is necessary to configure the time persistence interval (recommended values from 2 seconds and above) and the time step of movement over time (in seconds).
Figure 2 - Playback widget
Example: user defines in configuration a time step of 1 minute and persistence of 5 seconds
- Click on the button
( or 
) to go back (or forward) in time by 1 minute and then stop. - Click on the button
( or 
) to go backwards (or forwards) in time by 1 minute without stopping at 1x speed (the relative symbol will turn green, a color that can be modified by the user during configuration). Each click on the button increases the speed (2x, 4x, 8x, 16x and then starts again from 1x) - Click on the button
to stop the display time - Click on the button
to restart the time at 1x speed. - Click on the button
to return the display to the initial time.
Later by right clicking on the widget the user can open the configuration panel.
Figure 3 - Context menu
Customization and configuration
The widget configuration allows to change the appearance in terms of colours, text size and language visualization.
Language
The section Language allows users to choose the language with which the user visualizes labels and configuration parameters.
Figure 4 - Language selection
Configurations
Figure 5 - Configurations
| Setting | Description |
|---|---|
| Persistence time (s) | The persistence time interval (recommended values from 2 seconds and up) |
| Time step (s) | Time step of movement over time in seconds. |
| Lock start time | Lock/unlock the start time. |
| REST Provider | Allows the user to select between default or custom protocol for api requests. |
Table 1 - Configurations description
Appearance Settings
In the Appearance settings section it is possible to change the value and color of:
- Title;
- Text size;
- Background color;
- Text color;
- Playback border color;
- Buttons color;
- Highlighted button color;
Figure 6 - Appearance settings
Colors Selection
To select a color click on the color’s dropdown menu. The Gradient panel will open. From this panel the user can select which color, transparency or color format he wants. A second panel named Palette view is present if the user wants to select from a few pre-determined colors. Confirm with the button 
.
Figure 7 - Choice of color
Contacts
Get Support button (read Get Support documentation)
Link to e-matica.com (click on the icon)
Link to widget online documentation (click on link)
Figure 8 - Contacts
Installation
Following are the installation requirements and procedure.
Requirements
In order to install the product, minimum requirements are listed in the table below:
| Software | Version | Note |
|---|---|---|
| PI Vision | 2025 (*) | Requirements are linked to the PI Vision correct functioning |
Table 2 - Installation prerequisites
(*)This widget is also compatible with PI Vision 2024, 2023, 2022, 2021, 2020 and 2019.
We suggest using Google Chrome for full compatibility with the widget.
Installation procedure
Widget Installer
To install the widget’s files and common libraries using the widget installer follow the guide at this link:
https://documentation.e-matica.com/docs/WidgetInstaller.
Manual installation
The installation procedure includes a copy of the folders and files in the default path of the PI Vision.
In particular, it is necessary to copy the following files in the folder
...\PIPC\PIVision\Scripts\app\editor\symbols\ext
- sym-EWPlayback.js
- sym-EWPlayback-config.html
- sym-EWPlayback-template.html
and in the folder ..\PIPC\PIVision\Public the following folders:
- Images that contains the control icon:
- EWPlayback.png
- Libs with the libraries used:
- EWClasses.js
Then, open the web.config file inside the PIVision folder (..\PIPC\PIVision) and check that debug is set to "true" (Figure 9).
Save the file and restart the IIS.
Figure 9 - web.config
Notes And References
For more information about Vision PI refer to documentation on AVEVA © portal.
For information about the web service to refer to the specific documentation.