4.4.3. UI Design

This UI inherits several elements from the Python Application Tutorial UI. The Menu Bar and Toolbar are still the same.

Taurus Designer: UI form for Demo Service Client

The QeDartBoard has been replaced by TaurusDartBoard. The Double Spin Box entries for the angles have been replace for TaurusLabels.

Since this GUI client will connect to a server, the reader should use the widgets that provide declarative databinding. This will make the creation of the UI very fast.

4.4.3.1. Form

Start by creating a new Form. Click on the New button on the toolbar. This will cause the New form – Qt Widgets Design dialog to pop up. From the its list of options on the left, select templates/forms ‣ Main Window entry. Then click on the Create button at the bottom of the dialog.

A new Form will appear at the gray area in the center of the Designer.

Start by adding three top-level menus called &Application, &View, and &Help. As explained in Python Application Tutorial the & creates an accelerator for accesing the menu by keyboard. You can do this by clicking the Type Here entry in the new form.

Open the Action Editor docking window. Use the Top Menubar and select Settings ‣ Action Editor. If the entry is already checked, then the docking window should already be present in your Designer. Please create the entries as describe in the picture below. You can use Actions as instructions on how to do this reference.

Actions for the Demo Service Client

Add Exit action to Application menu, and the rest of the help actions to the Help menu. Small changes has been applied. The removal of Edit menu, changing File for Application, and the removal of several entries in Application. Also the Manual entry has a shortcut.

4.4.3.2. TaurusDartBoard

From the Designers Widget Box located on the left of the designers window, search or locate the TaurusDartBoard entry. Start the drag and drop operation by clicking and dragging a new TaurusDartBoard into an empty space of the UI Form.

Using the Property Editor set its model to:

eval:Q([{cii.oldb:///cut/demoservice/instance1/double-vector-current-altaz}[0], {cii.oldb:///cut/demoservice/instance1/double-vector-current-altaz}[1], {cii.oldb:///cut/demoservice/instance1/double-vector-target-altaz}[0] ,{cii.oldb:///cut/demoservice/instance1/double-vector-target-altaz}[1]])

This combines the evaluation plugin and the OLDB plugin to generate a four element vector. You can see that the original elements of the OLDB are also vectors.

The first two elements will be used as entries for the current alt/az, while the third and the fourth will be used for the target alt/az.

4.4.3.3. OLDB Datapoints

From the Designers Widget Box located on the left of the designers window, search or locate the Form Layout entry. Start the drag and drop operation by clicking and dragging a new Form Layout into an empty space of the UI Form.

This will create a red rectangle in the UI form. A Form Layout always has two columns and it is a standard way design pattern for collecting or displaying information. On the left column add 5 Labels. Make sure you end the drag and drop operation on that side. Change the text on the Labels to State, Current Altitude, Current Azimuth, Target Altitude and Target Azimuth.

Now, drag and drop a new TaurusState widget, and four TaurusLabel widgets, each to the corresponding cell to the right of its label. Using the Property Editor set their model and model Index to:

Label	model	modelIndex
State	cii.oldb:///cut/demoservice/instance1/state	Do not modify
Current Altitude	cii.oldb:///cut/demoservice/instance1/double-vector-current-altaz	0
Current Azimuth	cii.oldb:///cut/demoservice/instance1/double-vector-current-altaz	1
Target Altitude	cii.oldb:///cut/demoservice/instance1/double-vector-target-altaz	0
Target Azimuth	cii.oldb:///cut/demoservice/instance1/double-vector-target-altaz	1

4.4.3.4. MAL RR Commands

From the Designers Widget Box located on the left of the designers window, search or locate the Grid Layout entry. Start the drag and drop operation by clicking and dragging a new Grid Layout into an empty space of the UI Form.

For executing commands on the server we will use the Taurus Command Button. Drag 5 Taurus Command Button to the grid layout. Edit their properties using the Property Editor as indicate in the table below:

Command	model	icon –> XDG Theme
Init	zpb.rr://127.0.0.1:12801	send_signal
Enable	zpb.rr://127.0.0.1:12801	send_signal
Disable	zpb.rr://127.0.0.1:12801	send_signal
StartUpdates	zpb.rr://127.0.0.1:12801	send_signal
StopUpdates	zpb.rr://127.0.0.1:12801	send_signal

Add a Label to the Grid Layout and modify its text property to Reply.

Add a Line Edit to the Grid Layout and make its readOnly property true; and set its placeholderText property Command reply will appear here.

As an exercise to the reader try to match the design at the top of this document using three GroupBoxes and moving the layouts into them. Remember to create a Splitter as well, so that the TaurusDartBoard is on the left and the GroupBoxes are on the right side.

As a final task, set the MainWindow layout to Vertical, so that all the design grows and shrinks with the MainWindow.

Save the document as mainwindow_ui.ui. This name convention will ensure that the generated python document has a _ui suffix and is not mixed with the source code that is not generated.