MeasurementValueGUI
Aus ExpeccoWiki
This is an example of how a more sophisticated user interface can be created. This is done with the integrated GUI builder, which is part of the soon to be released new "expecco pro" versions (1.8). Sorry, but it cannot be executed in the free demo version, which can be downloaded from out main site, http://www.exept.de.
Inhaltsverzeichnis |
The GOAL
We have to send trigger data in the range 0..360 (a circle) to a device, which processes them somehow (actually, it turns on a motor and turns an actuator). After that, we call for a measurement device which checks for the correct position.
Both the output and the returned values are to be displayed (for the sake of the example, one in a Digital-Led-Like fashion, the other in an old-style VU-meter fashion...).
Here is what the GUI should look like:
(sorry that I took some of the pictures with a german language setting...)
The UI-Specification
The GUI-Editor is opened by clicking on the "Edit-GUI" button in a compound block's schema view:
Then, UI components are dragged from the gallery, placed into the canvas as required, and attributes such as color and label texts are specified. Finally, the GUI-components are linked to variables from the compound block's variable-environment. These are the values to be displayed by the GUI or where values as entered by the user are to be stored into.
Here is a snapshot of the edit-session:
In the lower-left, you see the canvas, into which components are dragged from the widget-gallery (lower right). The main editor's view in the center presents all components in a tree-hierarchy, and also provides entry forms for the selected component's attributes.
The major components are:
- the "DigitalLed" component; this is configured to display the value of a variable named "ledDisplay":
- the meter, which displays the value of the "meterValue" variable:
- and a "Proceed"-button (which has been added to demonstrate user-interaction with the model):
When those model-names (also called "aspects") are defined in the UI-painter, a click on the "create variable" button (star-icon) defines the corresponding variables in the compound's variable environment:
All GUI components read their display-values from those variables, and write new data into them (for example, input fields or radio buttons). The technical term for this is "MVC" (Model View Controller) - where the components themself watch for any change of a value and react by updating their image (the low-level mechanism used here is the "Observer Pattern").
The Control and Data Flow
Finally, the logic. Here is the full logic, including comment annotations (in two pieces, so I can create the bitmaps easier, and you can print it on two pages...):
All the components are from the "Standard Library", except for the two user-defined interface blocks: "Send value to Equipment" and "Receive Value from Equipment". Their inner workings are of course highly dependent on how the equipment is conencted to the test-host. In a real world testSuite, these would be implemented as compound blocks which use other low-level interfacing blocks, such as socket-IO, TCP/IP, Serial-Line or USB interfaces, GPIB/IEE488 or even a DLL-call into a third-party interface library.
(PS: notice the breakpoint placed on the delay step above - obviously I was debugging that thing using single step execution ;-)
Execution
You can specify where the Test-GUI should be shown; either in the "Control- and Monitor Window" of expecco itself, or inside a web-page, which can be viewed in any web-browser. The later is especially useful to stay informed on the state of your test-execution when the test-host is located on the test-floor. These are often in a location remote from your office. These details are specified in the projects "execution" tab:
Expecco pro already contains its own web-server. That means, that you do not have to setup and maintain an extra apache or other service. To use the "web-GUI", all you have to do is to specify "web" in the "User Inteface" pull-down list (see the above picture) and optionally provide an http-port number (this is only needed, if the default port (80) is already in use by another web-server within the test-host, for example a running apache service).
Notice, that when multiple tests are executed in sequence, each of the GUIs is shown one after the other in the same "Control- & Monitor Window" (or webPage). The info-labels at the bottom show which testcase is currently being executed, and which GUI within the testcase is currently shown. If specified, tests can even interact with the user via this mechanism (as specified in the above example, the test will wait for the user to press the "Proceed" button at the end. However, it was programmed to timeout after 30 seconds, in case the user does not react (see the last block in the activity diagram for how this is done).
Obviously, I cannot show how it executes here - but believe me: the VUMeter and the led display are showing actual live animated values (even in the webBrowser) ! The server uses the most advanced AJAX technology to update the webpage without a need for the user to press reload or otherwise ask for a refresh.
Download
Sorry, this example cannot be executed in the present 30-day demo versions. Please contact us for more information or a live demonstration (http://www.exept.de/en/products/expecco/expecco-webinar).
Back to Examples.
