Custom Instrument GUI - Editing Placed Objects on the Form

After an object has been placed on the form, there are a variety of ways in which its location, size, or appearance can be edited. These methods of editing generally fall into two categories – graphical editing, directly within the form, and editing performed using the associated attributes on the Properties panel.

Graphical Editing

When you click to select an object on the form, a number of editing handles will appear. To relocate the object, simply click on it, away from any editing handles, and drag to the required new position (Figure 1).

Figure 1. Moving an object directly on the form.

If the object can be resized – such as a Graph or Progress Bar – the cursor will change to a double-headed arrow when hovered over an editing handle. Using the applicable editing handle, you can simply click and drag to resize the object as required, in the vertical or horizontal (or both) planes (Figure 2).

Figure 2. Resizing an object directly on the form.

In addition to these basic graphical editing features, there are also various commands available on the right-click context menu that apply to the currently selected object or objects (use Shift+click to select multiple objects).

• Align To Grid – use this command to align the selected object(s) to the form's grid.

• Bring To Front – use this command to bring the selected object to the front in terms of drawing order for a group of collocated objects.

• Send To Back – use this command to send the selected object to the back in terms of drawing order for a group of collocated objects.

• Align – use this command to access the Alignment dialog. This dialog is most useful when you want to align multiple selected objects on the form. For a single object, you can quickly center it in the vertical and/or horizontal planes.
   
  
  Figure 3. Alignment dialog.

• Size – use this command to access the Size dialog, from where you can quickly change the size of the selected object(s) in terms of width and/or height. Options are also provided to quickly resize all objects in a selection based on the width and/or height of either the smallest object in the selection, or the largest.
   
  
  Figure 4. Size dialog.

• Scale – use this command to access the Scale dialog, which is used to enlarge or reduce the selected object(s) based on the positive scaling factor entered. The default value of 100 equates to no change. If you want to halve the size, enter a value of 50. To double, enter a value of 200, and so on. The result is similar to resizing an object by using the bottom-right editing handle.
   
  
  Figure 5. An example of scaling (200) applied to a default Graph control.

• Tab Order – use this command to access the Tab Order dialog. This dialog lists all those components and controls currently exist on the form, which can be used by the user to make something happen – such as an edit box or a clickable button. Use the dialog to determine the order in which these objects will be accessed on the run-time instrument panel when using the Tab key.
   
  
  Figure 6. All objects for use on a form that allow tabbed access - define tab order using the Tab Order dialog.

• Creation Order – use this command to access the Creation Order dialog. This dialog lists all non-visual components currently used on the form. Non-visual components are not seen by the user on the run-time instrument panel. The creation order becomes important where one non-visual component requires the existence of another non-visual component prior to executing its functionality. Use this dialog to determine that creation order as required.
   
  
  Figure 7. All non-visual objects for use on a form - define creation order using the Creation Order dialog.

Editing of Associated Properties

The main avenue used when defining the look and feel of a control on the form – especially when that control is being used to display the value of a monitored signal – is the Properties panel.

Simply select the object whose properties you wish to change in some way, and then edit the required attributes on the panel as required. The majority of properties are straight forward and intuitive (e.g. Font, Color, Width, etc). Bear in mind that the Properties panel will populate with only those properties applicable to the selected object type.
 

 
Figure 8 illustrates how changing properties can make a Gauge control appear differently on the form.

Figure 8. Change the appearance of an object using its associated properties.