Customizing Controls Using a Picture Ring

Many applications require a type of control or indicator that is not included in LabVIEW. This document describes how to use a picture ring in LabVIEW to create a custom control, such as a chess board control. This document is not intended to give a detailed description of custom controls. If your application requires an interface more complicated than the standard string, numeric, and Boolean controls, you can use these controls in combination to create a custom interface. Refer to Application Note 159: LabVIEW Custom Controls, Indicators, and Type Definitions (linked below) for more information about custom controls. Refer to the 2-Player Chess example (linked below) to see the chess board control used in a VI.

Scenario

Suppose you want to create a chess VI. The digital controls and indicators would not be useful for displaying a chess board with squares and pieces. XY graphs, charts, and other such indicators also would not be useful. You could use a picture control, but doing so would require a lot of work to draw each piece. One solution is to use a picture ring to build a custom control to use in making a chess board.

This document describes how to create a custom indicator (Square) from a picture ring that represents one square of the board. An 8 x 8 array of these custom indicators displays the board (Board Array). To allow the user to select which piece to move and where to move it, an 8 x 8 array of transparent Boolean buttons is placed over the board (Controls Array). When the user clicks one of these buttons, LabVIEW can then react. In addition, a third 8 x 8 Boolean array is placed under the 8 x 8 Controls Array but over the Board Array (Indicator Array). This indicator array shows the user possible moves.

Step 1. Creating the Square Custom Indicator

Complete the following steps to create the Square custom indicator.

1. On the Controls»Ring & Enum palette, select a pict ring and place it on the front panel.



2. Right-click the pict ring and select Advanced»Customize from the shortcut menu to display the Control Editor.



3. In the Control Editor, click the Edit Mode button in the toolbar.



4. Draw all the chess pieces in a paint program. Because each piece can either be light or dark, and can exist on a light or dark square, you must draw 26 pieces (6 chess pieces * 2 piece colors * 2 square colors + 2 empty squares).



5. Paste each piece by right-clicking the pict ring and selecting Import Picture from the shortcut menu. Because each piece picture is associated with a number, the picture order is important. In this example, even-numbered pictures correspond to light squares, and odd-numbered pictures correspond to dark squares. After you paste all the pictures into the pict ring, the ring appears as follows.



6. Hide the increment and decrement buttons and resize the control to minimize the border and avoid distorting the piece picture by selecting Operate»Change to Customize Mode. You can spread out the components of the pict ring as follows.



7. Make the chess square by resizing the background rectangle and the frame rectangle to the same size as the picture.



8. Overlay all components on top of each other by selecting Operate»Change to Edit Mode. The pict ring appears as follows.



9. Right-click the control and remove the checkmark by Visible Items»Label.



10. Use the Coloring tool to make the up/down buttons transparent. The chess square appears as follows.



11. Save this chess square as a custom control with the name Chess Square.ctl.

Step 2. Creating the Board

Complete the following steps to create the board.

1. Create a 2-dimensional array of Chess Squares by changing the Chess Square.ctl to an indicator, placing it inside an array, and resizing the array to a size of 8 x 8.



2. Right-click the array and remove the checkmarks from Visible Items»Indexes and Visible Items»Label to simplify the appearance of the array.



3. Create a VI to fill the array with valid data, as follows.



4. After running this VI, the chess board appears as follows.

Step 3. Creating the Indicator Array

To allow the user to select a piece to move and where to move it, complete the following steps to create an 8 x 8 transparent array and place it over the chess board.

1. Create the indicator array by selecting an array object from the Controls palette and using the Coloring tool to make it transparent.



2. On the Controls»Classic Controls»Boolean palette, select a flat Boolean button and place it in the empty array.



3. Resize the flat Boolean button to match the exact size of the Chess Square and change the button to an indicator.



4. Hide the indexes and the label of the indicator array.



5. Resize the array to be the same size as the chess board and add a dimension if necessary to make the array 2-dimensional, as follows.



6. Use the Coloring tool to make the background and foreground of the flat Boolean button transparent in the off state. In the on state, make only the background invisible and the foreground (outline) yellow. Therefore, when a specific element in the indicator array is turned on, a yellow outline appears around the selected piece or pieces. The following example shows both the chess board and the invisible indicator array on top of each other. The yellow squares around both kings come from the indicator array.

Step 4. Creating the Control Array

Repeat step 3, but make the Boolean button a control instead of an indicator.

Step 5. Grouping the Arrays

Group the three arrays to avoid accidentally moving one of them by using the Positioning tool to select all the arrays, clicking the Reorder button in the toolbar, and selecting Group from the shortcut menu.
Related Links:
2-Player Chess in LabVIEW
LabVIEW Custom Controls, Indicators, and Type Definitions

Reader Comments | Submit a comment »