Skip to main content

Time Slider

- PI Vision Widget -​

Revision History​

Revision No.DateAuthorDocument IDDescription of changes
9.0June 2025RSEW_TimeSlider_v9.0.doc-Compatibility PIVision 2024 -Added Get support-Added rest provider -Graphic restyle
8.0August 2023DCEW_TimeSlider_v8.0.docCompatibility PIVision 2023
7.0August 2022AMEW_TimeSlider_v7.0.docCompatibility PIVision 2022
6.0October 2021MDCEW_TimeSlider_v6.0.docCompatibility PIVision 2021
4.0October 2020OSEW_TimeSlider_v4.0.docCompatibility PIVision 2020
2.3.1August 2020VSEW_TimeSlider_v2.3.1.docReview
2.1March 2019GIEW_TimeSlider_v2.1.docReview
1.1October 2018GTEW_TimeSlider_v.1.1.docRestyle
1.0January 2018GTTQS_TimeSlider_v.1.0.docxFirst review

Document References​

DocumentDescription
PI Vision Installation and Administration GuidePI Vision™ user manual from AVEVA

Introduction​

The Time Slider widget allows a simple time sliding through a bar placed in the PI Vision display. Sliding on the bar, all widgets belonging to the display are automatically synchronized in order to see all data at the same time.

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.

TermDefinition

Operating Principles And Use​

To insert the widget you must select the corresponding icon and navigate to the asset you want to display and drag and drop it into the display area.

Figure 1 - PI Vision Menu​

Then by selecting the contextual menu you can access the specific configuration of the widget.

Figure 2 - Contextual Menu​

Functionality and use​

The use of the product is very user-friendly. On the PI Vision display a horizontal bar it’s displayed with a slider that can be dragged to the right and to the left. The Time Slider operates within the display time interval and moves the endtime within itself.

Figure 3 - Time slider widget​

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​
SettingDescription
Server Web APITextual input for the path of the server webAPI
Slider step(s)It is the slider minimum step in seconds (Attention: it must be lower than the display time interval).
Fit all*If selected, a “fit-all” will be performed at the display opening (the display is designed so as to provide a good fit to the contents).
REST ProviderAllows 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;
  • Title size;
  • Background color;
  • Text color;

Figure 6 - Appearance settings​

Colors selection​

To configure the different colors simply select the color drop-down menu and choose the gradation on the first horizontal scrollbar, the possible point of the color palette and indicate with the second horizontal scrollbar the eventual transparency level. To confirm, select 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:

SoftwareVersionNote
PI Vision2024 (*)Requirements are linked to the PI Vision correct functioning
Table 2 - Installation prerequisites​

(*)This widget is also compatible with PI Vision 2023, 2022, 2021, 2020 and 2019.

We suggest using Google Chrome for full compatibility with the widget.

Installation procedure​

The installation procedure involves the copy of different folders and files in the predefined PI Vision path.

In particular it is necessary to copy the following filed in the folder ..\PIPC\PIVision\Scripts\app\editor\symbols\ext:

  • sym-TQSTimeSlider.js
  • sym-TQSTimeSlider-config.html
  • sym-TQSTimeSlider-template.html

and in the folder ..\PIPC\PIVision\Public the following folders:

  • Images that contains the control icon:
    • TQSTimeSlider.png
  • Libs with the libraries used:
    • EWClasses.js
    • Moment.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.