Image
- PI Vision Widget -
Revision History
| Revision No. | Date | Author | Document ID | Description of changes |
|---|---|---|---|---|
| 9.6 | October | RS | EW_Image_9.6 | Configuration “Remove container padding” removes vertical and horizontal padding |
| 9.5 | October | RS | EW_Image_9.5 | Added the option to remove the container horizontal padding |
| 9.4 | September | RS | EW_Image_9.4 | Bug: Fixed image dimensions |
| 9.3 | September 2025 | RS | EW_Image_9.3 | Bug Fix:- Added Background Shader configuration - Added Toggle Show / Hide Title |
| 9.2 | June 2025 | RS | EW_Image_9.2 | Bug Fix |
| 9.1 | May 2025 | RS | EW_Image_9.1 | Added feature Get Support |
| 9.0 | March 2025 | ID | EW_Image_9.0 | Compatibility PI Vision 2024 and introduced new widget style |
| 8.0 | August 2023 | AM | EW_Image_8.0 | Compatibility PI Vision 2023 |
| 7.0 | August 2022 | AM | EW_Image_7.0 | Compatibility PIVision 2022 |
| 6.0 | October 2021 | MDC | EW_Image_6.0 | Compatibility PIVision 2021 |
| 4.0 | October 2020 | OS | EW_Image_4.0 | Compatibility PIVision 2020 |
| 2.2 | August 2020 | VS | EW_Image_2.2 | Review |
| 2.0* | March 2019 | GI | EW_Image_2.0 | Review * Review of the modified N. in order to align it with the version number of the Widget |
| 2.0.2 | December 2018 | GT | EW_Image_2.0.2 | Restyling |
| 2.0.1 | January 2018 | PC | TQS_Image_v2.0.1 | Review |
| 2.0 | November 2017 | GT | TQS_Image_v2.0 | Widget configuration restyling Installation procedure modification |
| 1.0 | September 2017 | GT | TQS_Image_v1.0 | First review |
Document References
| Document | Description |
|---|---|
| PI Vision Installation and Administration Guide | PI Vision™ user manual from AVEVA |
Introduction
The Image widget allows you to display images in a PI Vision display. The main feature of the widget is that it offers different settings for image selection. For example, it is possible to read the file name directly from an attribute, making it dynamic by navigating between pages.
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 to 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, select the corresponding icon and navigate to the asset to be displayed and drag all the attributes involved by the Advanced Manual Entry in the display area.
Figure 1 - PI Vision Menu
Once the mouse button is released the table area is set. Then, selecting the contextual menu, it is possible to access the widget configuration box.
Figure 2 - Contextual Menu
Functionality and use
Once the widget is placed and configured, it is in the display as its correct image. It is possible to associate a link to this image.
Figure 3 - Image viewer
The image can be set both as a complete image within the display (for example a logo), or as a background and display only a part of it. Moreover, it is possible to choose if pick up directly the file name from an attribute or specify the path and its name.
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 visualize labels and configuration parameters.
Figure 4 - Language selection
Exclusion table
If defined, the widget checks in the database settings if the legged user has visualization right for the widget (if in the table there is a row in which the Widget field is equal to EW_Image and the User field equal to the name of the logged user, the user CANNOT visualize the widget).
Figure 5 - Exclusion table
Image source file
Indicate the path of image file in the Image path section
Figure 6 - Template choice
In case you choose to take the image from an attribute, you must always write the full path and the last character must be a "/". This provided that the relative attribute is configured as in the figure: as Value Type, String and as Default Value, the name of the desired image that must be contained in /PIVision/Public/Images/.
Figure 7 - Attribute Configuration
If the image is not taken from an attribute, it should indicate in this field the name of the file involving the complete path and the extension. Select always .jpg or .png files.
It should also notice that the folder containing files must be visible to the IIS, therefore, it is recommended to keep the default path /PIVision/Public/Images/.
Settings
In the Configuration section the following settings are available:
- From element: if the file is taken from a specific element or if it is specified in an absolute way in the previous section;
- Keep proportion: the image zooms itself keeping the proportions or according to the widgets dimensions;
- Is background: if selected, the zone dedicated to the widget is totally used; this may involve an image cutting or, instead, a replica of the image itself (used in the case in which a background is set);
- Transparent background: if selected, it is possible to use the rectangle as background managing color, intensity and transparency (useful for realizing shading).
- Remove container padding: if selected, the horizontal padding of the widget will be removed.
Figure 8 - Widget dimensions
Text size
It is possible to customize text sizes selecting the number of pixels from the proper box.
Figure 9 - Text size customization
Widget colours
It is possible to customize widget colours in terms of background:
Figure 10 - Widget colours
In order to configure the color it is enough to select the colour drop-down menu and choose the gradation on the first horizontal scrollbar, the potential point on the colour palette and indicate through the second horizontal scrollbar the level of transparency. Confirm with the button 
.
Figure 11 - Color choice
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 12 - 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 | 2024 (*) | Requirements are linked to the PI Vision correct functioning |
Table 1 - 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-TQSImage.js;
- sym-TQSImage-config.html;
- sym-TQSImage-template.html;
and in the folder ..\PIPC\PIVision\Public the following folders:
- Images which involves the control icon:
- TQSImage.png;
- Libs which involves the four libraries:
- EWClasses.js.
Additional notes
Image Viewer works with images with .jpg and .png extensions, while different formats could generate troubles. It is recommended to put all images in the folder PIVision\ Public\ Images in the server which hosts the PIVision.
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.