This tutorial covers the process of creating a simple widget for monitoring your Device. Here we assume that our Device is a digital temperature/humidity sensor that communicates with AggreGate Server using SNMP protocol. Our widget will show the current temperature and humidity in real-time mode.
Connection of the sensor to the server and its configuration is beyond the scope of this article, so we assume it is already online and visible for the system as a Device.
1. Launch GUI Builder
To start creating a widget, find the Device's node in the System Tree (
). Drag and drop it on the Widgets node (
):
This operation will show the Properties: Widget window. Set Widget Name to thmonitor and Widget Description to Temperature/Humidity Monitor. Clicking OK will open the GUI Builder with an empty widget template. Dragging the Device to the Widgets node means that the newly created widget will be available for every Device context.
2. Adding Widget Components
Let's add some components to the widget. See Editing Widget Layout for details on manipulating widget components.
Drag the Label component (
) from the component palette and drop it to the root panel of the widget in work form mode:
Add another label by dropping it under the current one to column 0, row 1 of the root panel:
Add one more label to column 1, row 0:
Then add a Slider component (
) to column 1, row 1:
3. Editing Component Properties
Click on label1 in the work form and change its Text property in the properties window to "Temperature: ".
Change text of label2 to "Humidity: ". Then change text of label3 to 0.
Then right-click label3 in resources window and select Rename from context menu. Call it temperature.
Rename slider1 to humidity in a similar way.
Now open Font property of label1 in properties window. Check Use Custom Font, set Name to Arial, Size to 20 and check Bold.
Set the same font to label2 and temperature (former label3).
Set the slider's Enabled property to false to prevent is from being moved.
Select all four components one by one and set their anchor to West by clicking 
button in the toolbar.
Then edit constraints of temperature and humidity labels and set Left Margin to 15.
|
You can also edit margins using the mouse, see Editing Widget Layout for details. |
Now your widget should look like that in the work form:
4. Creating Bindings
At this step we'll bind components of our widget to real data. This data is presented in the form of context variables. Our sensor has two handy variables:
| • | Temperature*10 that contains a temperature value in Celsius degreed multiplied by 10 at Integer number (i.e. value 234 corresponds to 23.4 degrees by Celsius); |
| • | Humidity*10 that contains relative humidity in percents multiplied by 10 as Integer number (i.e. value 456 corresponds to relative humidity 45.6%). |
Let's first bind the field of Temperature*10 variable to our temperature label. Find this variable in the entity selector window under the default Device context (it should be bold). Expand it to see its single field, called Temperature*10. Drag this field and drop it over the temperature label:
You'll see a message showing which bindings were created:
In the same manner, bind the Humidity*10 field of the Humidity*10 variable to the humidity slider using drag and drop operation.
Editing Bindings Manually
We now need to manually edit the created bindings. Select the Root Panel by clicking on Root in the top left corner of the work form and open its All Bindings property in the properties window.
There should be four bindings in the table:
Bindings 1 and 3 should be removed as they will try to write new temperature and humidity values to the Device. This operation is, indeed, not permitted and will be blocked by the server. Therefore, remove these bindings by clicking on their numbers and then clicking Remove Row (
) in the toolbar of the Data Table Editor.
Now we have to correct measurements of temperature and humidity that are multiplied by 10. Edit expression field of the remaining bindings by adding / 10 to them:
| • | {.:temperaturei$temperaturei} => {.:temperaturei$temperaturei} / 10 |
| • | {.:humidityi$humidityi} => {.:humidityi$humidityi} / 10 |
It's also necessary to remove the activators of remaining bindings so that they will be re-processed every time temperature or humidity changes. Set the activators to empty strings.
The resulting bindings table:
Click OK to save the table.
5. Resizing the Widget Template
Click Toggle Decorations (
) in the toolbar. This will make widget appearance in the work form similar to what it would look like during normal operation.
Select the root panel by clicking Root in the top-left corner of the work form. Set Application Window Width to 370 and Application Window Height to 120.
|
You can also resize the widget and its components using a mouse. See Editing Widget Layout for details. |
Finally, the template looks like this:
6. Saving Widget Template
The template is ready. Click Done (
).
Now new a new widget context (
) should be created and appear in the System Tree:
7. Launching Widget
It's time to see our new widget in action. Right-click on any System Tree node for a Device (). You should see a new launch widget action in a context menu:
Select this action to launch the widget for a certain temperature/humidity sensor. A new dockable window containing our widget will appear in AggreGate Client:
Voila! The new widget is up and running. You can now monitor the current temperature and humidity. See How to a create a dashboard to monitor your devices in real-time to find out how to start your widget automatically when AggreGate Client is launched.