Custom Instrument Tutorial - Designing the Custom GUI

Transcription

1 Custom Instrument Tutorial - Designing the Custom GUI Frozen Content Modified by on 6-Nov-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 s for use on the form Properties displays all attributes of the currently selected (or object) in the form Events lists the applicable events for the currently selected (or object) in the form. This tab is used to hook-up a script procedures or function to a, 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 s and objects within this area. We are going to add a variety of s 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.

2 Table 1 identifies the various instrument s 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 s required in the custom instrument panel. Control Control Name Placed from the Palette by Clicking... TInstrumentCaption 2 Quantity TInstrumentGauge 1 TInstrumentProgressBar 8 TInstrumentLEDsPanel 2 TInstrumentLEDDigits 1 TInstrumentGraph 1 TInstrumentNumericPanel 1 TInstrumentLabel 2 TInstrumentButton 1 Go ahead and place all of these s within the form, as shown in Figure 2. Note that the only modification to default s, at this stage, is to reduce the size of each Progress Bar.

3 Figure 2. Initial s added to the form. Now the base s are placed, we need to modify properties so that we get the panel looking just the way we want it. Let's consider each in turn, in terms of the property adjustments to be made (from the Properties panel). For those s we are using to monitor inputs, we will directly specify the signal to be hooked up to the Click to select the top-left Caption. 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. 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 SmallTicks» Color: Change to White SmallTicks» Step: Change to 8 Use shift+click to select all eight Progress Bar s. 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 Starting with the left-most Progress Bar, select each 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, then Data_In[6] for the next, through to Data_In[0] for the right-most. Click to select the left-hand LEDs Panel. Modify the following properties: DigitsInGroup: Change to 8 Metrics» EndSpace: Change to 1 Metrics» Space: Change to 1 Metrics» StartSpace: Change to 1 Click to select the LED Digits. Modify the following properties: DigitsInGroup: Change to 8 Metrics» Space: Change to 6

4 Click to select the Graph. 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 Width: Change to 264 Click to select the top-right Caption. 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. Modify the following properties: Name: Change to Output_Data UseDefaultDigitClick: Enable Click to select the InstrumentLabel1. 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. 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. 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 Style: Change to icsgreen Click to select the Button. 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

5 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 s 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 for the High and Low threshold values and various labels to describe the operation of the s on the panel. Add InstrumentLabel s 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 s and aesthetics. For the s used to monitor incoming signals to our custom instrument, we have directly assigned the

6 input signal to the relevant. 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 led. For this, we need to turn to scripting to achieve the requirements of our simple design. Writing the Script Source URL: 0