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. Enter the Web component identifier text for example: Panel Boiler 1. 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" page 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 double clicking into the empty workspace you will display a window offering Pmg object palette. This window is divided into left and right portion.
 
 
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 "Text with background Text with background (Real number)".
 
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.
 
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 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 the 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" page, 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.
 
 
Creating of Pmg objects for displaying of variable value:
 
Current value of some variable can be displayed in both text and graphic way. Create a new object of the Bar type (PmgBarPane) and enter Temperature in the "Title" configurator.
 
 
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 PmgString object that you want to copy
- Press and hold the Ctrl key (i.e. activating the copy operation), move 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 configure 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 choose the Slider with scale" item. It is a PmgSliderPane type object. 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.
 
 
Open panel after starting the application:
 
Now we can do one handy setting, that will instruct the application to open your panel after starting the application. Select the "Workspace" object in the tree of Pma objects, and in its Frames configuration page click the "main" frame. In the "Viewer of component" configurator, specify the path to the "Panel" object.
 
PROMOTIC 9.0.8 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