Custom Instrument Tutorial - Designing the Custom GUI
Now it's time to create the GUI – the customized panel for the instrument that will be accessed once the design is programmed into the daughter board FPGA.
Click on the Design tab at the bottom of the Custom Instrument Configuration dialog. You will be presented with a 'shell' instrument form with which to build the GUI (Figure 1).
There are three tabbed panels associated to the form:
- Palette – provides a range of standard scripting components and instrument-specific controls for use on the form
- Properties – displays all attributes of the currently selected control (or object) in the form
- Events – lists the applicable events for the currently selected control (or object) in the form. This tab is used to hook-up a script procedures or function to a control, which will be called when the specified event occurs.
The currently selected object in the form, named DesignedAreaPanel
, represents the bounds of form design. We can only place controls and objects within this area.
We are going to add a variety of controls to the panel, so let's increase the area we have to work with. Increase the Height property for the DesignedAreaPanel object from 270
to 352
.
Table 1 identifies the various instrument controls that we will use in our custom panel GUI and the corresponding entries in the Instrument Controls region of the Palette panel used to place them within the form.
Control | Control Name | Placed from the Palette by Clicking... | Quantity |
---|---|---|---|
| TInstrumentCaption |
| 2 |
| TInstrumentGauge |
| 1 |
| TInstrumentProgressBar |
| 8 |
| TInstrumentLEDsPanel |
| 2 |
| TInstrumentLEDDigits |
| 1 |
| TInstrumentGraph |
| 1 |
| TInstrumentNumericPanel |
| 1 |
| TInstrumentLabel |
| 2 |
| TInstrumentButton |
| 1 |
Go ahead and place all of these controls within the form, as shown in Figure 2. Note that the only modification to default controls, at this stage, is to reduce the size of each Progress Bar control.
Now the base controls are placed, we need to modify properties so that we get the panel looking just the way we want it. Let's consider each control in turn, in terms of the property adjustments to be made (from the Properties panel). For those controls we are using to monitor inputs, we will directly specify the signal to be hooked up to the control.
- Click to select the top-left Caption control. Modify the following properties:
- AutoSize: Disable
- Caption: Change to
DATA INPUT MONITORING
- Font » Color: Change to
CaptionText
- Font » Height: Change to
-11
- Font » Name: Change to
Tahoma
- Style » fsItalic: Enable
- Width: Change to
296
- Click to select the Gauge control. Modify the following properties:
- BigTicks » Color: Change to
Lime
- BigTicks » Step: Change to
32
- Color: Change to
Black
- Font » Color: Change to
White
- Max: Change to
256
- MediumTicks » Color: Change to
Silver
- MediumTicks » Step: Change to
16
- Needle » Kind: Change to
gnkTearDrop
- Numbers » Step: Change to
32
- Position: Change to
0
- SignalName: Use the drop-down to assign the
Data_In[7..0]
input signal to this control - SmallTicks » Color: Change to
White
- SmallTicks » Step: Change to
8
- BigTicks » Color: Change to
- Use shift+click to select all eight Progress Bar controls. Modify the following properties:
- BarColor: Change to
Yellow
- BarInactiveColor: Change to
Gray
- BarMiddleColor: Change to
Gray
- ColorScheme: This will automatically change to
icsCustom
by virtue of the color changes made - Max: Change to
1
- Position: Change to
0
Starting with the left-most Progress Bar control, select each control in turn and set the SignalName property to assign the corresponding signal line of theData_In[7..0]
input. So setData_In[7]
for the leftmost control, thenData_In[6]
for the next control, through toData_In[0]
for the right-most control.
- BarColor: Change to
- Click to select the left-hand LEDs Panel control. Modify the following properties:
- DigitsInGroup: Change to
8
- Metrics » EndSpace: Change to
1
- Metrics » Space: Change to
1
- Metrics » StartSpace: Change to
1
- SignalName: Use the drop-down to assign the
Data_In[7..0]
input signal to this control
- DigitsInGroup: Change to
- Click to select the LED Digits control. Modify the following properties:
- DigitsInGroup: Change to
8
- Metrics » Space: Change to
6
- SignalName: Use the drop-down to assign the
Data_In[7..0]
input signal to this control
- DigitsInGroup: Change to
- Click to select the Graph control. Modify the following properties:
- Color: Change to
InfoBk
- Grid » Visible: Disable
- Height: Change to
64
- HighThreshold » Enabled: Enable
- HighThreshold » Pen » Color: Change to
Teal
- HighThreshold » Value: Change to
255
- LowThreshold » Enabled: Enable
- LowThreshold » Pen » Color: Change to
Teal
- Max: Change to
265
- Min: Change to
-10
- SignalForm » NormalSignal » Color: Change to
Red
- SignalName: Use the drop-down to assign the
Data_In[7..0]
input signal to this control - Width: Change to
264
- Color: Change to
- Click to select the top-right Caption control. Modify the following properties:
- AutoSize: Disable
- Caption: Change to
DATA OUTPUT CONTROL
- Font » Color: Change to
CaptionText
- Font » Height: Change to
-11
- Font » Name: Change to
Tahoma
- Style » fsItalic: Enable
- Width: Change to
296
- Click to select the Numeric Panel control. Modify the following properties:
- Name: Change to
Output_Data
- UseDefaultDigitClick: Enable
- Name: Change to
- Click to select the InstrumentLabel1 control. Modify the following properties:
- Caption: Change to
NB_Override
- Font » Color: Change to
Red
- Font » Height: Change to
-13
- Name: Change to
NB_Override
- Caption: Change to
- Click to select the InstrumentLabel2 control. Modify the following properties:
- Caption: Change to
Panel_Override
- Font » Color: Change to
Red
- Font » Height: Change to
-13
- Name: Change to
Panel_Override
- Caption: Change to
- Click to select the right-hand LEDs Panel control. Modify the following properties:
- Color: Change to
3DDkShadow
- Digits: Change to
1
- DigitsInGroup: Change to
1
- SignalName: Use the drop-down to assign the
Override
input signal to this control - Style: Change to
icsGreen
- Color: Change to
- Click to select the Button control. Modify the following properties:
- AllowAllUp: Enable
- Caption: Enter
SOFTWARE OVERRIDE
- Font » Height: Change to
-13
- Style » fsBold: Enable
- Style » fsItalic: Enable
- GroupIndex: Change to
1
- Height: Change to
48
- Name: Change to
Panel_Override_Button
- Width: Change to
200
Having made these changes, the instrument panel form should now appear as shown in Figure 3.
Let's finish off the design of the instrument panel by adding a few descriptive labels. We will add labels next to the Graph control for the High and Low threshold values and various labels to describe the operation of the controls on the panel. Add InstrumentLabel controls with captions and placement as shown in Figure 4. In each case, disable the AutoSize property and size the label accordingly.
We have now finished designing our custom panel, in terms of controls and aesthetics. For the controls used to monitor incoming signals to our custom instrument, we have directly assigned the input signal to the relevant control. For data output however, our design requires a bit more 'smarts' in terms of how the data to the User LEDs on the Desktop NanoBoard is controlled. For this, we need to turn to scripting to achieve the requirements of our simple design.