Creation of the Visual Part of the Application

The simple application you have created so far can now be launched. The application contains "Power" and "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 items.
Graphic panel design
In the folder "Boiler1" use the same procedure to add the new object of the "PmPanel type – User graphics" and name it "Panel". The object of this type will "represent" graphics of the panel window in the object tree. The text entered in the "Panel title" configurator will be seen by the operator in the application panel list. Enter the panel title text for example: Panel Boiler 1. Leave the other configurators unchanged.
Creation of Panel Window Graphics
You have already defined the 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. These operations cannot be made in the application editor you have used so far (i.e. in the PROMOTIC.exe program). It is necessary to open another editor that is used for the purpose of graphic panel design. This panel editor (Gpvw.exe program) is easily launched by pressing the "Edit graphic content" button on the PmPanel > Panel page. The opened panel is empty at first and you will be guided to place some graphic items there.
Creation of the First Graphic Item for Numeric Representation of the Power
By double clicking into the empty workspace you will display a window offering graphic item palette. This window is divided into left and right portion.
On the left you can see a list of item groups, on the right there is a list of individual item configurations of specified type. Select Text with background Text with background (Real number).
After the item is choosen, the window dissapears and a cross shaped cursor appears. By clicking (and holding) the left mouse button, you can place the selected item on the workspace and by moving the cursor you can define the item size. The item is placed after the mouse button is released.
Simultaneously, the item is selected, i.e. you can see 8 small black squares on its edges and corners. These squres can be used for modification of item shape (dimensions). The item can also be moved around the workspace.
Note: If you want to delete the item, hover the cursor over it and press Delete.
The item is placed but some of its other properties have to be modified (set up), especially the data to be displayed. By default the item shows the word "999", but we need it to display a number representing the temperature of the boiler.
Editing Properties of the Created Item
By double clicking on the item you display the item configuration window.
If some of the configurator description is displayed in bold font then it means this is some essential property that should be defined.
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 of the "Text" configurator.
By creating the data binding assure that the specific property of a graphic item is modified based on the changes of the current value of connected variable. By default, each graphic panel (and each graphic item) is refreshed twice every second (the refresh frequency can be modified in the PmRoot object, on the "Application" page, in the "Panels timer period" configurator). Each time the item is refreshed, it evaluates the data binding and detects the value of the connected variable and changes its own properties accordingly.
Select the PP - Binding to Promotic object property data binding. In the "Object" configurator select the variable (object) named "Temperature". Check the "Relative path" checkbox.
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 PmiText graphic item configurator 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 PROMOTIC object. Confirm all by pressing OK.
Adding graphic items for visualization of variable value
Current value of some variable can be displayed in both text and graphic way. Create a new graphic item of the Bar (PmiBarPane) type and enter Temperature into 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.
adding graphic items for entering variable values
In the same panel, create a new item that can be used for entering the value of boiler power. The item for entering the power value can be created by copying the existing text item:
- Click your mouse and select the PmiText item that you want to copy
- Press and hold the Ctrl key (i.e. activating the copy operation), move your mouse cursor to the desired item, press the left mouse button and then move the mouse curso to the desired location where you want to place the copied item. The copied item is placed once the mouse button is released.
- Now you need to configure this item 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 items and connect this graphic item with the "Power" variable.
In the graphic item selection window select the"Slider (PmiSlider)" group and choose the Slider with scale" item. It is a PmiSliderPane type item. Name it "Power".
Create the data binding the same way as in previous items and connect this graphic item (in the PmiSlider PmiSlider > Slider > Where to write configurator) to the "Power" variable.
Compilation of Panels and Closing the Panel Editor:
In the previous steps, you have created a very simle graphic panel. In order to make this panel work in the running app, it is necessary to complete the panel compilation procedure. The compilation can be initiated in two ways: either compile only those panels that have been modified since last compilation or compile all panels in the application. During the compilation process all data bindings are checked together with all other links and references and the compilation report is displayed. The compilation can be started by selecting the menuitem in Project menu of the panel editor, or by clicking one of the corresponding icons in the toolbar.
After the compilation it is possible to leave the panel editor. You can close it or you can keep it opened and switch to the application editor.
Open panel after application launch:
Now we can do one handy setting, that will instruct the application to open your panel when launched. Select the "Workspace" object from the object tree, and in its Frames configuration page doubleclick the "main" frame. In the Viewer of component configurator, specify the path to the "Panel" object.
© MICROSYS, spol. s r. o.Tavičská 845/21 703 00 Ostrava-Vítkovice