Promotic
WikipediaLinkedInYoutubeTwitterFacebook

Creation of the Visual Part of the application

The simple application you have created so far can now be launched. The application contains "Temperature", "Power" and Status variables inside, but none of the data can be seen by user, which is a major drawback fromt the visualization point of view So now it is necessary to create a boiler graphic panel that will visualy display the desired data and control objects.
 
Creating of graphic panel design:
 
In the folder "Boiler1" use the same procedure to add the new object of the "PmaPanel type – User graphics" and name it "Panel". The object of this type will "represent" graphics of the panel window in the tree of Pma objects. The text entered in the "Panel title" configurator will be seen by the user in the application panel list. As the panel title use for example the text: Panel of boiler no. 1. The text intered in the "Web component identifier" configurator defines the unique name of the web page of the panel in the framework of the entire application. Enter the Web component identifier text for example text: boiler1panel. Leave the other configurators unchanged.
 
 
Creating of Panel Window Graphics:
 
You have already defined the panel name, now you have to complete the graphic design, i.e. the desired texts, data and images you want to see, define the colors sizes, etc.

This is done on the "Graphic" tab that is used as editor of PmaPanel graphics. The panel is empty at the beginning and prepared for Pmg objects placement.

 
 
Creating of the First Pmg object for Numeric Representation of the Power:
 
By mouse double-clicking into the empty workspace or after pressing the button, display a window with the Pmg object palette. This window is divided into left and right sections.
 
 
On the left you can see a list of Pmg object groups, on the right there is a list of individual Pmg object configurations of specified type.

Select "Real number with background" and in the "Object name" configurator type temperature.

 
After the Pmg object is selected then use the configuration window to set its basic parameters and then place it using the crosshair cursor.

Use the mouse to place the selected Pmg object into the workspace. Press and hold left mouse button and then drag the cursor to define the item size. Then release the mouse button.

 
 
 
 
Simultaneously, the object is selected, i.e. you can see 8 small blue squares on its edges and corners. These squres can be used for modification of object shape (dimensions). The object can also be moved around the workspace.
 
Note: If you want to delete the object, then select the active Pmg object and press Delete key.
 
The Pmg object is placed but some of its other properties have to be modified (set up), especially the data to be displayed. By default the object shows the static value "50.5", but we need it to display a number that represents the temperature of the boiler.
 
Editing Properties of the Created Pmg object:
 
By mouse double-clicking on the object you display the editor of PmaPanel graphics.
 
 
The object tree is locaten on the left, active object configurators are located on the right.
 
Many configurators has a dynamic data binding button placed next to its description and also a static value imput button to the right.
 
Note: In order to demonstrate the location of left (dynamic) and right (static) set of configurators a red line has been added into the image.
 
The static configurators can be used for entering permanent values or properties, for example color, text, etc.. The dynamic data binding allow you to bind values/properties to specific variables in the application.
 
In order to display the value of boiler temperature, it is necessary to bind the content of the text field with the variable containing this value. Therefore use the data binding button in the "Value" configurator.
 
By creating the data binding assure that the specific property of the Pmg object is modified based on the changes of the current value of connected variable. By default, each graphic panel (and each Pmg object) is refreshed twice every second (the refresh frequency can be modified in the PmaRoot object, on the "Application" tab, in the "Panels timer period" configurator). Each time the Pmg object is refreshed, it evaluates the data binding and detects the value of the connected variable and changes its own properties accordingly.
 
Select the "PP - Data binding to Pma object property" data binding. In the "Object" configurator select the variable (object) named "Temperature". Check the "Relative path" configurator.
 
Note: The path to the "Temperature" object can be defined as absolute or relative. In our case it is better to use the relative path. Based on the relative path definition it would be possible to, for example, copy the Boiler1 folder and the data binding would still be connected with the correct data. If the absolute path was used then the connection would still point to the Temperature variable in "Boiler1".
 
This way, you have just created a data binding between the configurator of the PmgNumber object and the Value of the "Temperature" variable. In the data binding button, you can now see "PP", that indicates that the configurator is connected by an active binding to the property of Pma object. Confirm all by pressing OK button.
 
 
Creating of Pmg objects for displaying of variable value:
 
Current value of a variable can be displayed as text or graph. Create a new object consisting of of the Bar type (PmgBarPane). In the "Object name" configurator type temperature1 and in the "Title" configurator type Temperature.
 
 
The Pmg objects items consisting of multiple subitems can be edited in two ways:
1. Click the button in the toolbar and then select the desired subobject.
2. By mouse double-clicking the desired object the Editor of Pmg objects is opened. In the object tree expand the Pmg object and select the subobject you want to edit.
 
The data binding that will modify the height of the bar can be created the similar way as the binding to text field.
 
 
Creating of Pmg objects for entering variable values:
 
In the same panel, create a new Pmg object that can be used for entering the value of boiler power. The Pmg object for entering the power value can be created by copying the existing Pmg object:
 
- by clicking the mouse select the PmgNumber object that you want to copy
- Press and hold the Ctrl key (i.e. activating the copy operation), set your mouse cursor to the desired object, press the left mouse button and then move the mouse cursor to the desired location where you want to place the new object. The copied object is placed once the mouse button is released.
- On the "Object" tab, in the "Object name" configurator type power.
- Now you need to set this object in order to used it for data input. Type of editing: Editing on value location.
 
 
Create the data binding the similar way as in previous Pmg objects and connect this object with the "Power" variable.
 
In the Pmg object selection window select the"Slider (PmgSlider)" group and select the Slider with scale" item (object of the PmgSliderPane type). In the "Object name" configurator type power1 and name it "Power".
 
 
Create the data binding the same way as in previous Pmg objects and connect this object (in the "PmgSlider > Slider > Value" configurator) to the "Power" variable.
 
 
Confirm all changes in the graphics editor by pressing the button
PROMOTIC 9.0.12 SCADA system documentation - MICROSYS, spol. s r.o.

Send page remarkContact responsible person
© MICROSYS, spol. s r. o.Tavičská 845/21 703 00 Ostrava-Vítkovice