The simple application you have created so far can now be launched. The application contains "Temperature"
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.
object is placed but some of its other properties have to be modified (set up), especially the data to be displayed. By default this 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
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 bindings allow you to bind value/property 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
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 entered 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 the Pma
object. Confirm all by the "OK
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 (PmgBarBox). In the "Object name
" configurator type temperature1
and in the "Title
" configurator type Temperature
The Pmg objects
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
- 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.
- 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 PmgSliderBox
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