Editor
- PI Vision Widget -
Revision History
| Revision No. | Date | Author | Document ID | Description of changes |
|---|---|---|---|---|
| 9.0 | July 2025 | RS | EW_Editor_v9.0 | -Compatibility PIVision 2024 -Added Get support-Added rest provider -Graphic restyle |
| 8.0 | August 2023 | DC | EW_Editor_v8.0 | Compatibility PIVision 2023 |
| 7.0 | August 2022 | AM | EW_Editor_v7.0 | Compatibility PIVision 2022 |
| 6.0 | October 2021 | MDC | EW_Editor_v6.0 | Compatibility PIVision 2021 |
| 4.0 | June 2021 | CC | EW_Editor_v4.0 | First version documentation |
Document References
| Document | Description |
|---|---|
| PI Vision Installation and Administration Guide | PI Vision™ user manual from AVEVA |
Introduction
The EW Editor visualizes a document with editable text from the widget, it’s able to customize the text getting inspired by other text editors.
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 Editor, select the corresponding icon and drag on display the attribute that contains the text to display.
Figure 1 - PI Vision Menu
When the mouse is released, the widget will be visualized like this:
Figure 2 - Editor
Later, calling up the contextual menu with the right mouse button, further customizations and configurations are possible.
Figure 3 - Contextual Menu
Functionality and use
Initially the widget is in reading mode, on click this icon 
open the possibility to edit text.
When the widget is in editable mode, on the top it will be a menu with different icons for modify the color, font and size.
Figure 4 - Menù
Undo: turn back at previous operation.
Redo: if before an operation was cancelled, this make a redo.
Font size: for changing font size.
Bold, Italic, Underline: for changing the font shape.
Align Right, Left, Justify: for changing the alignment.
Bullet and Order List: for starting a list.
Indent: on clicking this icon it’s possible to indent the list, and have a sublevel list. For use this icon we have to proceed like this:
- Click on the icon for the List;
- Write something;
- Start a new paragraph for write a new element at the same level;
- Click the icon for indent, without pressing enter, for create a sublevel;
- Write something and start a new paragraph for stay on the level;
- start a new paragraph without write for turn back at previous level
When a chapter is added, the text is detached from the previous text and on top there are two icons.
Figure 5 - Chapter
On the left there is the icon used for hide/expand the chapter, on the right there is the icon for delete the chapter when it is clicked a popup is shown to confirm the choice.
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 6 - Language selection
Configurations
Figure 7 - Configurations
| Setting | Description |
|---|---|
| Server Web API | Textual input for the path of the server webAPI |
| Collection | Allows the uses of collections. |
| REST Provider | Allows the user to select between default or custom protocol for api requests. |
Table 1 - Configurations table
Appearance Settings
In the Appearance settings section it is possible to change the value and color of:
- Title;
- Title color;
- Text color;
- Background color;
Figure 8 - 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 9 - 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 10 - 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 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-EWEditor.js
- sym-EWEditor-config.html
- sym-EWEditor-template.html
and in the folder ..\PIPC\PIVision\Public the following folders:
- Images that contains the control icon:
- EWEditor.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 11).
Save the file and restart the IIS.
Figure 11 - 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.