Tiny Calculator

- PI Vision Widget -

Revision History

Revision No.	Date	Author	Document ID	Description of changes
9.0	June 2025	RS	EW_TinyCalculator_v.9.0_en.doc	-Compatibility PIVision 2024 -Added Get support-Added rest provider -Graphic restyle
8.0	Agosto 2023	AR	EW_TinyCalculator_v.8.0_en.doc	Compatibility PIVision 2023
7.0	August 2022	AM	EW_TinyCalculator_v.7.0_en.doc	Compatibility PIVision 2022
6.0	October 2021	MDC	EW_TinyCalculator_v.6.0_en.doc	Compatibility PIVision 2021
4.0	October 2020	OS	EW_TinyCalculator_v.4.0_en.doc	Compatibility PIVision 2020
2.7*	August 2020	OS	EW_TinyCalculator_v.2.7_en.doc	Review * change of revision number for alignment with Widget version
2.5	March 2019	GI	EW_TinyCalculator_v.2.5.doc	Review
2.1	September 2018	GT	TQS_TinyCalculator_v.2.1.docx	Information about referring values added
2.0.2	March 2018	PC	TQS_TinyCalculator_v.2.0.2.docx	Functionality added: error message
2.0.1	January 2018	PC	TQS_TinyCalculator_v.2.0.1.docx	Review
2.0	December 2017	GT	TQS_TinyCalculator_v.2.0.docx	Widget configuration restyling Installation procedure modification
1.0	September 2017	GT	TQS_TinyCalculator_v.1.0.docx	First review

Document References

Document	Description
PI Vision Installation and Administration Guide	PI Vision™ user manual from AVEVA

Introduction

The EW_TinyCalculator widget allows to display, and write in PI, the result of an AF formula after having modified one of the two input parameters.

Figure 1 - Tiny Calculator

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
AF	Asset Framework

Operating Principles And Use

The EW_TinyCalculator Widget operates in stand-alone mode or jointly to the EW_TreeEvent widget, which makes available parameters required for the proper functioning. To insert the widget in a display it is necessary to select firstly the icon relative to the control, then pressing CTRL and the three elements to be displayed the user has to drag them on the display.

Figure 2 - 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 3 - Contextual Menu

Functionality and use

To use the widget, it is sufficient to modify input values and force the calculation.
To better understand the flow the widget is composed by 3 logic parts:

• Input where there are attributes and relative values that can be modified;
• Button that forces the recalculation and allows the result visualization;
• Output where attributes with final result are displayed.

If the insertion ends well, the result is displayed correctly, otherwise an error string is laid out and it can be configured previously in an attribute.

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 part 1

Figure 6 - Configurations part 2

Setting	Description
Server Web API	Textual input for the path of the server webAPI
Interaction TreeView	Activate/deactivate widget interaction with TreeView widget.
Title Attribute	It is possible to define the title indicating the AF attribute that contains it; if both the titles are configured, they are co-catenated. This function turns out to be very useful in the treeview mode, because in such a way the title string becomes dynamic.
Element Template Name	In the section Element template name it is necessary to provide the name of the element template that owns input data and the result.
Input attribute category*	To indicate the attributes in Input to be displayed, it is necessary to indicate the name of the category of the attributes in Input in the Input Attributes Category section.
Output attribute category*	To select attributes to be displayed, within the calculation result, the user has to select the name of the category of output attributes in the section Output attribute category.
Error message attribute*	To display a custom message in case of calculation error, it is possible to configure it within an appropriate string attribute.
Input/output attribute/value	It is possible to customize the two tables headers settings names to be displayed in the section Fields name.
Input	Sets the number of decimal places for input data
Attribute decimal places	Sets the number of decimal places, attribute for attribute
Max/min with set decimal places	Displays maximum and minimum with the set number of decimal places
Approximate values for the calculation	If selected it considers approximate values when calculating, otherwise it considers real values (ex. If 0 is set and PI sends a value of 0.51, this value is approximated to 1, and risks adversely affecting calculations; by deselecting this option original values will be used, without considering approximated values)
Show attribute default	The name of sub-attributes containing the default value proposed by the user.
Show attribute min/max	Minimum/Maximum allowed value; if the inserted value is out of range a color (previously set) highlights the matter to the user.
Show attribute order	Ordering, managed through integers, in ascending order.
Show attribute active	Active allows to disable the manual insertion of the individual attribute.
Show attribute font format	Format: “G” to set the bold type, “I” for the italic one, or a combination of the two.
Orient	Orientation selects if the widget is displayed vertically, that is with input parameters at the top and output parameters at the bottom, or horizontally, that is with the two items from left to right.
REST Provider	Allows the user to select between default or custom protocol for api requests.

Table 1 - Configurations description

Input attribute category

In order to exclude attributes in the category, it is sufficient to operate on Hidden properties.
Before setting up the widget, AF attributes have to be properly configured in terms of template:

Figure 7 - Input attributes configuration

N.B. To ensure to the user the possibility to change the values of the attributes on the widget, please make sure that all attributes in the selected category are not linked to a Data Archive Tag

Output attribute category

AF attributes have to be properly configured in terms of template:

Figure 8 - Output attributes configuration

Error message attribute

Figure 9 - Element attribute configuration

Attributes to show

It represents the list of displayed attributes and it allows to specify the number of decimal places for each one of them.

Figure 10 - Attributes to show

Appearance Settings

In the Appearance settings section it is possible to change the value and color of:

• Title;
• Title size;
• Title color;
• Header size;
• Table text size;
• Background color;
• Table header text color;
• Table text color;
• Table header background color;
• Table background color;
• Out of range color;
• Correct response color;
• Error response color;

Figure 11 - 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 12 - 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 13 - 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-TQSTinyCalculator.js
• sym-TQSTinyCalculator-config.html
• sym-TQSTinyCalculator-template.html

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

• Images that contains the control icon:
  • TQSTinyCalculator.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 14).
Save the file and restart the IIS.

Figure 14 - web.config

Additional notes

For the proper functioning of the widget, it should disable the Cross-Site Request Forgery (CSRF) and explicitly enable PUT e POST methods in the PI Vision configuration database:

• Connect to the Connection database through the PI System Explorer
• Expand the element Osisoft
• Expand the element PI WEB API
• Expand the element PI Vision-srv
• Select the element System Configuration
• Select the attribute Cors Methods and add PUT, POST and BATCH methods separated by commas
• Select the attribute EnableCSRF and set the value to FALSE

Figure 15 - Configuration Database

At the end of the procedure, the PI Web API service has to be restarted.

Figure 16 - PI Web API service restart

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.