Custom Instrument Tutorial - Designing the Custom GUI

Frozen Content

Modified by Admin on Nov 6, 2013

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).

Figure 1. Design tab - providing the canvas with which to create our custom GUI.

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.

Table 1. Instrument controls required in the custom instrument panel.

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.

Figure 2. Initial controls added to the form.

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
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 the Data_In[7..0] input. So set Data_In[7] for the leftmost control, then Data_In[6] for the next control, through to Data_In[0] for the right-most control.
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
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
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
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
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
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
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
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.

Figure 3. Panel controls after modification of properties.

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.

Figure 4. Finished instrument panel design, complete with descriptive labeling.

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.

Writing the Script