Advanced Demo - Three Drop Groups

The following instructions illustrate creating a set of draggable buttons that represent input devices, and a set of drop target

buttons that represent three output device (Displays).

NOTE: This set of instructions uses f iles that are included in the "Drag-and-Drop " demo f ile which is available to download from the UI RESOURCE CENTER at www.amx.com.

The resulting demo page will provide five draggable buttons that represent source (input) devices, and three drop target buttons representing three output (Display) devices. End users will be able to switch sources on the Displays by dragging and dropping a draggable button within the bounds of the drop target buttons (FIG. 223):

FIG. 245 Drag and Drop Demo - Five Draggable (Inputs) buttons and three Drop Target (Outputs) button

Before You Begin

Download the AdvancedDragAndDropExample.ZIP file from www.amx.com and extract its contents to a known location. This ZIP file contains the following files, all of which are required for the demo described in this manual:

  • AdvancedDragAndDropExample.TP5 - A TPDesign5 project file, as well as all of the image files used by the Page and Buttons in this project:
    • amxicons_target-invalid.png • icon-apple.png
    • amxicons_target-invalid-small.png • icon-enzo.png
    • amxicons_target-valid.png • icon-iPad.png
    • amxicons_target-valid-small.png • icon-windows8.png
      • SZ9_icon display.png
  • AdvancedDragAndDropExample.APW - A NetLinx Studio workspace file that contains the NetLinx code:
    • AdvancedDragAndDropExample.axs • AdvancedDragAndDropExample.tkn
    • AdvancedDragAndDropExample.src • AdvancedDragAndDropExample.tko

Create a TPDesign5 Project/Import Images

In order to display the images on the page and buttons shown in this demo, the image files must be added to the project, via the Resource Manager - Images tab:

  1. Open TPDesign5 (v1.3 or higher) and start a new Project (File > New).
  2. Open the Resource Manager to the Images tab.
  3. Click Import to locate and select all of the image files that were included in the Drag and Drop Demo.ZIP file.
  4. Click OK to import the selected files and return to the Resource Manager (FIG. 224):

FIG. 246 Resource Manager Images tab - AdvancedDragAndDropExample Demo images imported

  1. Click Close to close the Resource Manager.

NOTE: The AdvancedDragAndDropExample.TP5 f ile in the Drag and Drop demo has the images shown above already imported into the project.

Create & Conf igure Drop Target Buttons

In this example, there are three Drop Target buttons that will represent the Output devices (Displays) that can accept input from the source devices represented by the draggable buttons.

Create Three Drop Target Buttons

  1. Use the Button Draw tool to create three new buttons.
  2. Arrange them horizontally on the top half of the page, and enter the following names for each button, in the Name (General) property:
    • LEFT DISPLAY
    • CENTER DISPLAY
    • RIGHT DISPLAY
  3. Set each button’s Type (General) property to multi-state general (FIG. 225):

Only General and Multi-State General buttons

can be used as Draggable or Drop Target buttons

FIG. 247 TPDesign5 General Properties - Type set to "general"

  1. Set each button’s Drag/Drop Type (General) property to drop target (FIG. 226):

FIG. 248 TPDesign5 General Properties - Drag/Drop Type set to "drop target"

Set Drop Target Button Properties - General

Set the remaining General properties for the Drop Target buttons as shown in FIG. 227:

FIG. 249 Drop Target Buttons - General Properties

Set Drop Target Button Properties - Programming

Set the Programming properties for each of the Drop Target buttons as shown in FIG. 228:

FIG. 250 Drop Target Button - Programming Properties

    • On the LEFT DISPLAY button, set the Address Code to 16 and set the Channel Code to 16.
    • On the CENTER DISPLAY button, set the Address Code to 17 and set the Channel Code to 17.
    • On the RIGHT DISPLAY button, set the Address Code to 18 and set the Channel Code to 18.

Set Drop Target Button Properties - States

In this example, these button will represent output (Display) devices. Use the Text (States) property to add the following labels to each button (All States):

    • On the LEFT DISPLAY button, set the Text to LEFT DISPLAY.
    • On the CENTER DISPLAY button, set the Address Code to 17 and set the Channel Code to 17.
    • On the RIGHT DISPLAY button, set the Address Code to 18 and set the Channel Code to 18.

NOTE: As explained below, the drop-targets will use multiple states to provide visual feedback to the user in terms of whether each drop target is valid or invalid for a selected draggable button. While each of these states includes a bitmap that specifically indicates whether the target is valid or not, the button text remains the same across all States. Add and configure each button’s text before duplicating states to avoid having to add the text to each individual state.

Use the Bitmaps (States) property to add the Display bitmap to each button (All States):

    • Note that all images must first be imported in to the project via the Resource Manager in order to be available to apply to buttons or pages in the project. The images used in this demo are pre-loaded in the TP5 project file.
    • Select each drop target button and under All States, apply the bitmap: SZ9_icon-display.png.
    • In this example, the Bitmap Justification is set to center-middle.

Add States to each Drop Target Button

In this example, the drop target buttons will use multiple states to provide a visual indication of whether it is a valid target for draggable buttons. For example, if a drag is started on a draggable button, a bitmap featuring either a "Target-Valid" or "Target- Invalid" icon is displayed on Drop Target buttons, depending on whether each Drop Target button is a valid or invalid target for the selected draggable button.

NOTE: Use Drop Groups to configure valid/invalid drop targets for draggable buttons. See the

Drop Groups section on page 168

for details.

Additionally, this example includes the option to use either "small icons" or large icons", so there are large versions of the "Target- Valid" and "Target-Invalid" icons as well. Therefore, there are five potential bitmap arrangements that need to be available to the drop target button - these are all configured as separate States for these buttons.

By default, multi-state general buttons have two states. To add three states:

  1. Select a Drop Target button and open the State Manager window.
  2. In the General tab of the Properties window, click in the State Count property and change the value to 5 (FIG. 251):

FIG. 251 State Count (General) Property - set to "5"

  1. Press Enter to save changes. The new states are indicated in the State Manager window (FIG. 230):

FIG. 252 State Manager window indicating five states

  1. Repeat these steps for the CENTER DISPLAY and RIGHT DISPLAY Drop Target buttons.

Add a "Target-Valid" or "Target-Invalid" Icon to each State of each Drop Target Button

As described on

page 19

2, each of the five States for the drop target buttons are used to indicate whether each drop target is a valid target for a selected draggable button:

Additionally, this example includes the option to use either small or large icons, so there are large versions of the "Target-Valid" and "Target-Invalid" icons for each drop target button as well. Therefore, there are five potential bitmap arrangements that need to be available to the drop target button - these are all configured as separate States for each button.

NOTE: This example employs specific "Target-Valid" and "Target-Invalid" icons, as well as a change in opacity to indicate the fact that there are drop-targets, and whether they are valid targets for each draggable button. However, the icons and opacity settings are optional. Any bitmaps (or no bitmaps) can be used; any change in opacity (or no change) can be used. There are many possible ways to indicate the presence of drop target buttons as well as the validity of each drop target relative to a selected draggable

State 1 is used to when the drop target is being displayed (with no drag and drop action). Therefore, bitmaps must be added to states 2-5 to indicate a valid target or invalid target:

Drop Target Button - States 1-5
State 1 State 1 (no feedback)
State 2 State 2 (small "Target-Valid" icon)
Drop Target Button - States 1-5 (Cont.)
State 3 State 3 (small "Target-Invalid" icon)
State 4 State 4 (large "Target Valid" icon)
State 5 State 5 ( large "Target Invalid" icon)

The result of these updates, as indicted in the State Manager window are shown in FIG. 253:

FIG. 253 State Manager - Drop Target button states with icons placed

Set Drop Target Button Properties - Events

TPDesign5 (1.3.23 or higher) supports three new Events for drop target buttons: Drop Enter, Drop Exit and Drop (see the

Drag and

Drop-Specif ic Events section on page 170

for details):

FIG. 254 Events for Drop Target Buttons

Button Event Actions are listed in the Edit Event Actions dialog. Use the Add Action option in this dialog to create new custom (event) actions via the Edit Custom Action dialog (FIG. 255):

FIG. 255 Edit Event Actions dialog indicating a new (empty) custom event

Conf igure the "Drop Enter" Event for All Drop Target Buttons

The following steps describe how to configure custom events that will be sent to the Master, and picked up with our NetLinx code (which then handles the visual changes). Refer to

page 208

to view the accompanying code.

  1. Select a drop target button (in this example, start with the "LEFT DISPLAY" button).
  2. In the Events tab of the Properties window, select the Drop Enter event and click the browse (...) button to open the Edit Event Actions dialog.
  3. Click Add Action, and select "custom" from the drop-down list - this adds a new (empty) custom event action to the Action list.
  4. Click Edit Custom to open the Edit Custom Action dialog. Use the fields in this dialog to define the event action for the selected drop target button event.

To configure the Drop Enter event for the drop target buttons, enter the ID, Type, Flag and Value 1 fields according the table below. These fields must be configured for each drop target button in the demo. Note that in this case, the Custom Action Settings values are the same for all three drop target buttons:

Custom Action Settings for "Drop Enter" Event
"LEFT DISPLAY", CENTER DISPLAY," and "RIGHT DISPLAY" drop
  • ID: 17
  • Type: 2
  • Flag: 0

  • Value 1: ${dropChannelCode}

    |

Once they have been configured, the custom event properties are displayed in the Drop Enter property for each drop target button (FIG. 256):

FIG. 256 Drop Enter Event indicating sample data

Conf igure the "Drop Exit" Event for All Drop Target Buttons

The following steps describe how to configure custom events that will be sent to the Master, and picked up with our NetLinx code (which then handles the visual changes). Refer to

page 208

to view the accompanying code.

  1. Select a drop target button (in this example, start with the "LEFT DISPLAY" button).
  2. In the Events tab of the Properties window, select the Drop Exit event and click the browse (...) button to open the Edit Event Actions dialog.
  3. Click Add Action, and select "custom" from the drop-down list.
  4. This adds a new (empty) custom event action to the Action list.
  5. Click Edit Custom to open the Edit Custom Action dialog. Use the fields in this dialog to define the event action for the selected drop target button event.

To configure the Drop Exit event for the drop target buttons, enter the ID, Type, Flag and Value 1 fields according the table below. These fields must be configured for each drop target button in the demo.

Note that in this case, the Custom Action Settings values are the same for all three drop target buttons:

Custom Action Settings for "Drop Exit" Event
"LEFT DISPLAY", CENTER DISPLAY," and "RIGHT DISPLAY" drop
  • ID: 17
  • Type: 3
  • Flag: 0

  • Value 1: ${dropChannelCode}

    |

Once they have been configured, the custom event properties are displayed in the Drop Exit property for each drop target button (FIG. 257):

FIG. 257 Drop Exit Event indicating sample data

Conf igure the "Drop" Event for All Drop Target Buttons

The following steps describe how to configure custom events that will be sent to the Master, and picked up with our NetLinx code (which then handles the visual changes). Refer to

page 208

to view the accompanying code.

  1. Select a drop target button (in this example, start with the "LEFT DISPLAY" button).
  2. In the Events tab of the Properties window, select the Drop Exit event and click the browse (...) button to open the Edit Event Actions dialog.
  3. Click Add Action, and select "custom" from the drop-down list.
  4. This adds a new (empty) custom event action to the Action list.
  5. Click Edit Custom to open the Edit Custom Action dialog. Use the fields in this dialog to define the event action for the selected drop target button event.

To configure the Drop event for the drop target buttons, enter the ID, Type, Flag and Value 1 fields according the table below. These fields must be configured for each drop target button in the demo.

Note that in this case, the Custom Action Settings values are the same for all three drop target buttons:

Custom Action Settings for "Drop" Event
"LEFT DISPLAY", CENTER DISPLAY," and "RIGHT DISPLAY" drop
  • ID: 17
  • Type: 4
  • Flag: 0

  • Value 1: ${dropChannelCode}

    |

Once they have been configured, the custom event properties are displayed in the Drop property for the selected button (FIG. 258):

FIG. 258 Drop Event indicating sample data

When all of the Events have been configured for the drop target buttons, save your project file.

Add Each Drop Target Button to a Drop Group

Each Drop Target button will be added a Drop Group. The Drop Groups that have been created in this demo are named "group_1", "group_2" and "group_3" (see

page 198

for details on creating these Drop Groups).

This will allow draggable buttons associated each group to use specific drop target buttons as a "valid" targets.

For example, only draggable buttons that are associated with "group1" will be able to use the _group 1 drop target button as a valid target. Only draggable buttons that are associated with "group2" will be able to use the _group 2 drop target button as a valid target. Only draggable buttons that are associated with "group3" will be able to use the _group 3 drop target button as a valid target.

Drop Group assignments are managed in the Drop-Target Groups dialog (FIG. 259):

FIG. 259 Drop-Target Groups dialog (detail)

Add the LEFT DISPLAY and CENTER DISPLAY Drop Target Buttons To "group_1"

  1. Select Panel > Edit Drop Target Groups to open the Drop-Target Groups dialog.
  2. In the Drop Target Groups window, select "group_1".

  3. The Drop Target buttons created in Step 3 (see

    page 1

    98) are indicated in the Available Drop Target Buttons window. Select LEFT DISPLAY and click Add to Group to move it into the Member Buttons window.

  4. Select CENTER DISPLAY and click Add to Group to move it into the Member Buttons window.
  5. The Member Buttons window indicates that the LEFT DISPLAY and CENTER DISPLAY Drop Target buttons are "members" of the "group_1" Drop-Target Group (FIG. 260):

"group_1" selected

FIG. 260 Drop-Target Groups dialog - the LEFT DISPLAY dropTarget button is a member of "group_1"

Add the CENTER DISPLAY Drop Target Button To "group_2"

  1. Select Panel > Edit Drop Target Groups to open the Drop-Target Groups dialog.
  2. In the Drop Target Groups window, select "group_2".
  3. Select CENTER DISPLAY and click Add to Group to move it into the Member Buttons window. This indicates that the CENTER DISPLAY Drop Target button is now a "member" of the "group_2" Drop-Target Group (FIG. 261):

"group_2" selected

FIG. 261 Drop-Target Groups dialog - the CENTER DISPLAY dropTarget button is a member of "group_2"

Add the RIGHT DISPLAY Drop Target Button To "group_3"

  1. Select Panel > Edit Drop Target Groups to open the Drop-Target Groups dialog.
  2. In the Drop Target Groups window, select "group_3".
  3. Select RIGHT DISPLAY and click Add to Group to move it into the Member Buttons window. This indicates that the RIGHT DISPLAY Drop Target button is now a "member" of the "group_3" Drop-Target Group (FIG. 262):

"group_3" selected

FIG. 262 Drop-Target Groups dialog - the RIGHT DISPLAY dropTarget button is a member of "group_3"

After all three drop target buttons have been assigned to their Drop Groups, click Close to save changes and close the Drop-Target Groups dialog.

Create Drop Groups

Drop Groups are created via the Drop-Target Groups dialog. After creating a drop group, drop target buttons will then be available for assignment.

    • Drop Target buttons are added as "Members" of a specific Drop Group.
    • Draggable buttons are associated with a specific Drop Group via the Drop Group (General) button property.

Once a Drop Target button has been added to a Drop Group (as a "member"), only draggable buttons that are associated with that Drop Group can be dragged and dropped onto the Drop Target button. Refer to the

Drop Groups section on page 168

for a more detailed explanation of Drop Groups. In this example there are three Drop Target buttons, each of which represents a Display as an output device (see FIG. 223 on page 181):

    • LEFT DISPLAY - This will be a valid drop target for the ENZO and iPAD draggable buttons.
    • CENTER DISPLAY - This will be a valid drop target for all of the draggable buttons (ENZO, iPAD, LAPTOP, COMPUTER and

HDMI).

    • RIGHT DISPLAY - This will be a valid drop target for the COMPUTER and HDMI draggable buttons . To create new Drop Groups:

  • Select Panel > Edit Drop-Target Groups to open the Drop-Target Groups dialog (FIG. 263):

Click to define 3 new Drop Groups

FIG. 263 Drop-Target Groups dialog

  1. Click New Group to add a new Drop Group, via the Create Drop-Target Group dialog.
    1. Create a new group named "group_1", (FIG. 264):

FIG. 264 Create Drop-Target Group dialog

    1. Click OK to save changes and close the Create Drop Group Target dialog.
    2. Create two additional groups named "group_2" and "group_3".
    3. The new Groups are indicated in the Drop Target Groups window (FIG. 265):

FIG. 265 Drop-Target Groups dialog - indicating "group_1", "group_2" and "group_3"

  1. Click Close to save changes and close the Drop-Target Groups dialog.

Create & Conf igure Draggable Buttons

In this example, four draggable buttons represent four source (input) devices that are used as inputs for the Output (Display) devices represented by the three Drop Target buttons.

Create Five Draggable Buttons

  1. Use the Button Draw tool to create a new button.
  2. Set the button’s Type (General) property to general (FIG. 231):

Only General and Multi-State General buttons can be set as draggable or Drop Target

FIG. 266 TPDesign5 General Properties - Type set to "general"

  1. Set the button’s Drag/Drop Type (General) property to draggable (FIG. 232):

FIG. 267 TPDesign5 General Properties - Drag/Drop Type set to "draggable"

  1. Repeat these steps to create a total of five draggable buttons. Alternatively, copy and paste the new button four times (FIG. 233):

FIG. 268 Draggable Buttons

Set Draggable Button Properties - General

Set the remaining General properties for the draggable buttons as shown in FIG. 234:

FIG. 269 Draggable Buttons - General Properties

Associate Draggable Buttons With a Drop Group

In this example, three Drop Groups have been created. Draggable buttons are associated with a specific Drop Group via the Drop Group (General) property (FIG. 270):

FIG. 270 General Properties - Drop Group

FIG. 270 indicates that three Drop Groups have been created: "group1", "group_2" and "group_3". In this example, the ENZO and iPAD draggable buttons will be assigned to "_group_1". The LAPTOP draggable button will be assigned to "group_2". The COMPUTER and HDMI draggable buttons will be assigned to "group_3":

  1. Select the ENZO draggable button.
    1. In the General tab of the Properties window, click on Drop Group to access the drop-down list of all drop groups currently defined in this project.
    2. Select "group_1". This selection associates the ENZO draggable button with the "group_1" Drop Group.

As a result, the ENZO button will treat the LEFT DISPLAY and CENTER DISPLAY drop target buttons as valid targets (since they are both members of "group_1").

  1. Select the iPAD draggable button.
    1. In the General tab of the Properties window, click on Drop Group to access the drop-down list of all drop groups currently defined in this project.
    2. Select "group_1". This selection associated the selected draggable button with the "group_1" Drop Group.

As a result, the iPAD button will treat the LEFT DISPLAY and CENTER DISPLAY drop target buttons as valid targets (since they are both members of "group_1").

  1. Select the LAPTOP draggable button.
    1. In the General tab of the Properties window, click on Drop Group to access the drop-down list of all drop groups currently defined in this project.
    2. Select "group_2". This selection associated the selected draggable button with the "group_2" Drop Group.

As a result, the LAPTOP button will treat the CENTER DISPLAY drop target button as it’s only valid targets (since it is a the only member of "group_2").

  1. Select the COMPUTER draggable button.
    1. In the General tab of the Properties window, click on Drop Group to access the drop-down list of all drop groups currently defined in this project.
    2. Select "group_3". This selection associated the selected draggable button with the "group_2" Drop Group - the same Drop Group that includes the Drop Target button in this example.

As a result, the COMPUTER button will treat the CENTER DISPLAY and RIGHT DISPLAY drop target buttons as valid targets (since they are both members of "group_3").

  1. Select the HDMI draggable button.
    1. In the General tab of the Properties window, click on Drop Group to access the drop-down list of all drop groups currently defined in this project.
    2. Select "group_3". This selection associated the selected draggable button with the "group_2" Drop Group - the same Drop Group that includes the Drop Target button in this example.

As a result, the HDMI button will treat the CENTER DISPLAY and RIGHT DISPLAY drop target buttons as valid targets (since they are both members of "group_3").

group_1 members:

LEFT DISPLAY, CENTER DISPLAY

group_2 members: CENTER DISPLAY

group_3 members:

CENTER DISPLAY, RIGHT DISPLAY

FIG. 271 Drop Target and Draggable Buttons - Drop Group assignments

Set Draggable Button Properties - Programming

Each of the draggable buttons needs to be configured with unique Address and Channel Codes. For this example, set the Address/ Channel Codes as shown below (FIG. 235):

FIG. 272 Draggable Buttons - Programming Properties

  • On the ENZO draggable button, set the Address Code to 1 and set the Channel Code to 1.
  • On the iPAD draggable button, set the Address Code to 2 and set the Channel Code to 2.
  • On the LAPTOP draggable button, set the Address Code to 3 and set the Channel Code to 3.
  • On the COMPUTER draggable button, set the Address Code to 4 and set the Channel Code to 4.
  • On the HDMI draggable button, set the Address Code to 5 and set the Channel Code to 5.

Set Draggable Button Properties - States

In this example, each of these buttons will represent a different type of input (source) device. Edit the buttons to add text and icons to indicate the specific device represented by each button:

  1. Use the Text (States) property to add labels to each of the buttons. Select each button and under All States, enter the following labels: ENZO, iPAD, LAPTOP, COMPUTER and HDMI.
  2. Use the Bitmaps (States) property to apply an appropriate icon to each of the buttons.
    • Note that all images must first be imported in to the project via the Resource Manager in order to be available to apply to buttons or pages in the project. The images used in this demo are pre-loaded in the TP5 project file.
    • Select each button and under All States, apply the following bitmaps: icon-enzo.png, icon-iPad.png, icon-windows8.png, icon-apple.png and SZ9_icon-wallplate-hdmi.png.
    • In this example, the Bitmap Justification is set to top-middle for all five draggable buttons. Set the remaining States properties for the draggable buttons as shown in FIG. 236:

FIG. 273 Draggable Buttons - States Properties (All States shown)

For this example, the draggable buttons should look similar to the buttons shown below (FIG. 237):

FIG. 274 Draggable Buttons (Representing four Input Devices)

Set Draggable Button Properties - Events

TPDesign5 (1.3.23 or higher) supports a set of new Events for Draggable buttons: Drag Start and Drag Cancel (see the

Drag and

Drop-Specif ic Events section on page 170

for details):

FIG. 275 Events for Draggable Buttons

Button Event Actions are listed in the Edit Event Actions dialog. Use the Add Action option in this dialog to create new custom (event) actions via the Edit Custom Action dialog (FIG. 276):

FIG. 276 Edit Event Actions dialog indicating a new (empty) custom event

Conf igure the "Drag Start" Event for Draggable Buttons

The following steps describe how to configure custom events that will be sent to the Master, and picked up with our NetLinx code (which then handles the visual changes). Refer to

page 208

to view the accompanying code.

  1. Select a draggable button (for example, the "ENZO" button).
  2. In the Events tab of the Properties window, select the Drag Start event and click the browse (...) button to open the Edit Event Actions dialog.
  3. Click Add Action, and select "custom" from the drop-down list (FIG. 277):

FIG. 277 Edit Event Actions dialog - Add Action drop-down list

  1. This adds a new (empty) custom event action to the Action list (FIG. 278):

FIG. 278 Edit Event Actions dialog - new (empty) custom event action

  1. Click Edit Custom to open the Edit Custom Action dialog (FIG. 279). Use the fields in this dialog to define the event action for the selected button/draggable button event.

Note: In this example, the Value 2, Value 3, Text and Encode fields are not used.

FIG. 279 Edit Custom Action dialog

  1. To configure the Drag Start Event for the selected button, enter the ID, Type, Flag and Value 1 fields according the table below. These fields must be configured for each draggable button.
  2. Click OK to save changes and close the Edit Custom Action dialog and return to the Edit Event Actions dialog.
  3. Press OK to save changes and close this dialog.

The Custom Action settings for each draggable button in this demo are provided in the table below. Note that the Drag Start

settings are identical for all buttons, with the exception of the ID value, which identifies each button:

Custom Action Settings for "Drag Start" Event
"ENZO" button
  • ID: 1
  • Type: 1
  • Flag: 0
  • Value 1: ${dragChannelCode}

  • Text: ${dragGroupName}

    | | "iPAD" button |

  • ID: 2

  • Type: 1
  • Flag: 0
  • Value 1: ${dragChannelCode}

  • Text: ${dragGroupName}

    |

Custom Action Settings for "Drag Start" Event (Cont.)
"LAPTOP" button
  • ID: 3
  • Type: 1
  • Flag: 0
  • Value 1: ${dragChannelCode}

  • Text: ${dragGroupName}

    | | "COMPUTER" button |

  • ID: 4

  • Type: 1
  • Flag: 0
  • Value 1: ${dragChannelCode}

  • Text: ${dragGroupName}

    | | "HDMI" button |

  • ID: 5

  • Type: 1
  • Flag: 0
  • Value 1: ${dragChannelCode}

  • Text: ${dragGroupName}

    |

Once they have been configured The custom event properties are displayed in the Drag Start property for the selected button (FIG. 280):

FIG. 280 Drag Start Event indicating sample data

Conf igure the "Drag Cancel" Event for Draggable Buttons

The following steps describe how to configure custom events that will be sent to the Master, and picked up with our NetLinx code (which then handles the visual changes). Refer to

page 208

to view the accompanying code.

  1. Select a draggable button (for example, the "ENZO" button).
  2. In the Events tab of the Properties window, select the Drag Start event and click the browse (...) button to open the Edit Event Actions dialog.
  3. Click Add Action, and select "custom" from the drop-down list (see FIG. 277 on page 204):
  4. This adds a new (empty) custom event action to the Action list (see FIG. 278 on page 204):
  5. Click Edit Custom to open the Edit Custom Action dialog (see FIG. 279 on page 204). Use the fields in this dialog to define the event action for the selected button/draggable button event.

To configure the Drag Cancel Event for the selected button, enter the ID, Type, Flag and Value 1 fields according the table below. These fields must be configured for each draggable button.

The Custom Action settings for each draggable button in this demo are provided in the table below. Note that the Drag Cancel

settings are identical for all buttons, with the exception of the ID value, which identifies each button:

Custom Action Settings for "Drag Cancel" Event
"ENZO" button
  • ID: 1
  • Type: 5
  • Flag: 0

  • Value 1: ${dragChannelCode}

    | | "iPAD" button |

  • ID: 2

  • Type: 5
  • Flag: 0

  • Value 1: ${dragChannelCode}

    | | "LAPTOP" button |

  • ID: 3

  • Type: 5
  • Flag: 0

  • Value 1: ${dragChannelCode}

    | | "COMPUTER" button |

  • ID: 4

  • Type: 5
  • Flag: 0

  • Value 1: ${dragChannelCode}

    | | "HDMI" button |

  • ID: 5

  • Type: 5
  • Flag: 0

  • Value 1: ${dragChannelCode}

    |

Once they have been configured The custom event properties are displayed in the Drag Cancel property for the selected button (FIG. 281):

FIG. 281 Drag Cancel Event indicating sample data

Add a "SMALL/LARGE ICONS" Button

This example includes a button that allows the end-user to toggle between small and large "target valid" and "target invalid" icons on the drop target buttons, when a draggable button has started a drag (FIG. 282):

The end-user can press the SMALL ICONS button to display small icons for "target-valid" and "target-invalid"

The end-user can press the LARGE ICONS button to display large icons for "target-valid" and "target-invalid"

valid target - large icon invalid target - large icon

FIG. 282 SMALL ICONS and LARGE ICONS - as they will appear on the touch panel

Create a "SMALL/LARGE ICONS" Button

  1. Use the Button Draw tool to create a new button.
  2. Set the button’s Type (General) property to general.

Set the remaining General properties for the "SMALL/LARGE ICONS" as shown in FIG. 283:

FIG. 283 "SMALL/LARGE ICONS" Button - General Properties

Set "SMALL/LARGE ICONS" Button Properties - Programming

Set the Programming properties for the "SMALL/LARGE ICONS" button as shown in FIG. 284:

FIG. 284 "SMALL/LARGE ICONS" Button - Programming Properties

On the "SMALL/LARGE ICONS" button, set the Channel Port to 9.

Set "SMALL/LARGE ICONS" Button Properties - States

Set the States properties for the "SMALL/LARGE ICONS" button as shown in FIG. 285:

Off State Selected On State Selected

FIG. 285 "SMALL/LARGE ICONS" Button - States Properties

    • Set the Text property on State 1 to "SMALL ICONS"
    • Set the Text property on State 2 to "LARGE ICONS"

Add a "CLEAR DISPLAY SOURCE" Button

This example includes the option for the user to "clear" the current input (Source) device setting on the Displays (FIG. 238):

FIG. 286 CLEAR DISPLAY SOURCE button

To add a button that supports this option:

Create a "CLEAR DISPLAY SOURCE" Button

  1. Use the Button Draw tool to create a new button.
  2. Set the button’s Type (General) property to general.

Set "CLEAR DISPLAY SOURCE" Button Properties - General

Set the remaining General properties for the "CLEAR DISPLAY SOURCE" buttons as shown in FIG. 239:

FIG. 287 "CLEAR DISPLAY SOURCE" Button - General Properties

Set "CLEAR DISPLAY SOURCE" Button Properties - Programming

Set the Programming properties for the "CLEAR DISPLAY SOURCE" button as shown in FIG. 240:

FIG. 288 "CLEAR DISPLAY SOURCE" Button - Programming Properties

On the "CLEAR DISPLAY SOURCE" button, set the Channel Code to 8.

Write NetLinx Code To Respond To Custom Event

The NetLinx Code below utilizes the custom events that were configured in the TP file for "behavior" changes on the drop target buttons via the states configured earlier in this section.

  1. Use NetLinx Studio 4 to add the following code to the NetLinx program loaded on the Master:

PROGRAMNAME='MASTER'_

DEFINE_DEVICE

dvTP = 10001:1:0

DEFINE_CONSTANT

//dropTargets

INTEGER leftDT = 16

INTEGER centerDT = 17 INTEGER rightDT = 18

//draggables INTEGER btnDG1 = 1 INTEGER btnDG2 = 2 INTEGER btnDG3 = 3 INTEGER btnDG4 = 4 INTEGER btnDG5 = 5

DEFINE_VARIABLE

//an array to store our dropTarget buttons INTEGER dTBTNS[] = {leftDT ,centerDT ,rightDT}

//an array to store our draggable buttons

INTEGER dgBTNS[] = {btnDG1 ,btnDG2 ,btnDG3 ,btnDG4,btnDG5}

//an array to store draggable buttons belonging to group_1 INTEGER dgG1[] = {btnDG1,btnDG2}

//an array to store draggable buttons belonging to group_2 INTEGER dgG2[] = {btnDG3}

//an array to store draggable buttons belonging to group_3 INTEGER dgG3[] = {btnDG4,btnDG5}

//to track small/large Icon INTEGER nLargeIcon = 0

//to store draggable address from start event INTEGER nDragAddress = 0

//to store which group we are in INTEGER ngroupID = 0

DEFINEMUTUALLY_EXCLUSIVE ([_dvTP,1]..[dvTP,5])

//In this example the groups are defined as follows

// - buttonAddresses 1,2 are assigned: group_1

// - buttonAddress 3 are assigned: group_2

// - buttonAddresses 4,5 are assigned: group_3

// - leftDT [16] will accept draggables from: group_1

// - centerDT [17] will accept draggables from: group_1, group_2, group_3

// - rightDT [18] will accept draggables from: group_3 DEFINE_EVENT

DATAEVENT[_dvTP]

{

ONLINE:

{

nLargeIcon = 0

//By default ^BDC is enabled, let's disable it SENDSTRING _dvTP,"'BDC-0,0,0,0,0'"

//Let's make sure we are starting in state 1 SENDCOMMAND _dvTP,"'^ANI-',ITOA(leftDT),',1,1,0'" SENDCOMMAND _dvTP,"'^ANI-',ITOA(centerDT),',1,1,0'" SENDCOMMAND _dvTP,"'^ANI-',ITOA(rightDT),',1,1,0'"

}

}

//Custom event for START [1]

//Any time a draggable is initiated (long press, dragShadow appears)

//a START event is sent.

//CUSTOM_EVENT[dvTP,ID,Type]

CUSTOMEVENT[_dvTP,dgBTNS,1]

{

//to store the draggable group name CHAR cDragGroup[DATA_MAX_VALUE_LENGTH]

//Get the dragButtonAddress from the customEvent nDragAddress = custom.value1

cDragGroup = custom.text

if(COMPARESTRING(cDragGroup,'group1'))

{

ngroupID = 1 if(nLargeIcon)

{

SENDCOMMAND _dvTP,"'^ANI-',ITOA(leftDT),',4,4,0'" SENDCOMMAND _dvTP,"'^ANI-',ITOA(centerDT),',4,4,0'" SENDCOMMAND _dvTP,"'^ANI-',ITOA(rightDT),',5,5,0'"

}

else

{

SENDCOMMAND _dvTP,"'^ANI-',ITOA(leftDT),',2,2,0'" SENDCOMMAND _dvTP,"'^ANI-',ITOA(centerDT),',2,2,0'" SENDCOMMAND _dvTP,"'^ANI-',ITOA(rightDT),',3,3,0'"

}

}

else if(COMPARESTRING(cDragGroup,'group2'))

{

ngroupID = 2 if(nLargeIcon)

{

SENDCOMMAND _dvTP,"'^ANI-',ITOA(leftDT),',5,5,0'" SENDCOMMAND _dvTP,"'^ANI-',ITOA(centerDT),',4,4,0'" SENDCOMMAND _dvTP,"'^ANI-',ITOA(rightDT),',5,5,0'"

}

else

{

SENDCOMMAND _dvTP,"'^ANI-',ITOA(leftDT),',3,3,0'" SENDCOMMAND _dvTP,"'^ANI-',ITOA(centerDT),',2,2,0'" SENDCOMMAND _dvTP,"'^ANI-',ITOA(rightDT),',3,3,0'"

}

}

else

{

ngroupID = 3 if(nLargeIcon)

{

SENDCOMMAND _dvTP,"'^ANI-',ITOA(leftDT),',5,5,0'" SENDCOMMAND _dvTP,"'^ANI-',ITOA(centerDT),',4,4,0'" SENDCOMMAND _dvTP,"'^ANI-',ITOA(rightDT),',4,4,0'"

}

else

{

SENDCOMMAND _dvTP,"'^ANI-',ITOA(leftDT),',3,3,0'" SENDCOMMAND _dvTP,"'^ANI-',ITOA(centerDT),',2,2,0'" SENDCOMMAND _dvTP,"'^ANI-',ITOA(rightDT),',2,2,0'"

}

}

}

//Since we are signaling what groups are valid on the START event,

//there is no need to handle ENTER or EXIT events.

//Custom event for DROP [4]

//A DROP event occurs when a draggable has been released within the boundaries

//of a valid dropTarget. A valid dropTarget is a dropTarget that has a group

//which the draggable is assigned to.

CUSTOMEVENT[_dvTP,dTBTNS,4]

{

SENDCOMMAND _dvTP,"'^ANI-',ITOA(leftDT),',1,1,0'" SENDCOMMAND _dvTP,"'^ANI-',ITOA(centerDT),',1,1,0'" SENDCOMMAND _dvTP,"'^ANI-',ITOA(rightDT),',1,1,0'"

//turn on the source(draggable) ON[dvTP,nDragAddress]

}

//Custom event for CANCEL [5]

//A CANCEL event occurs when a draggable has been released over anything that

//is not a VALID dropTarget.

CUSTOMEVENT[_dvTP,dgBTNS,5]

{

SENDCOMMAND _dvTP,"'^ANI-',ITOA(leftDT),',1,1,0'" SENDCOMMAND _dvTP,"'^ANI-',ITOA(centerDT),',1,1,0'" SENDCOMMAND _dvTP,"'^ANI-',ITOA(rightDT),',1,1,0'"

}

BUTTONEVENT[_dvTP,8] //CLEAR DISPLAY SOURCES

{

PUSH:

{

OFF[dvTP,1] OFF[dvTP,2] OFF[dvTP,3] OFF[dvTP,4] OFF[dvTP,5]

}

}

BUTTONEVENT[_dvTP,9] //SMALL/LARGE ICON DEMO MODE

{

PUSH:

{

[dvTP,9] = ![dvTP,9]

nLargeIcon = [dvTP,9]

}

}

  1. Save changes.

NOTE: The NetLinx code shown above is included in the NetLinx Studio Workspace f ile (AdvancedDragAndDropExample.apw) that is in the Drag and Drop Demo.ZIP f ile.

Use NetLinx Studio 4 to Compile and Transfer the Project Files

Use NetLinx Studio 4 to compile the code and transfer the project files to the Master:

  1. At the top of the AdvancedDragAndDropExample.axs source code file, change the dvTP value to match the device number of your touch panel (FIG. 241):

FIG. 289 dvTP Device Number value - Change to match the device number of your Touch Panel

  1. Compile the code (select Build > Build Active System).
  2. Transfer the DragAndDropNoGroups.apw workspace file to the NetLinx Master:
    1. Select Tools > File Transfer to open the File Transfer dialog.
    2. Open the Send tab and clear any files that are listed by clicking Remove All.
    3. Click Add to open the Select Files for File Transfer dialog.
    4. Select the top-level Projects folder to select all files in the workspace for transfer (FIG. 242):

FIG. 290 Select Files for File Transfer dialog

    1. Select OK to return to the File Transfer dialog (FIG. 243):

FIG. 291 File Transfer dialog - indicating files in the DragAndDropNoGroups.apw workspace queued for transfer

    1. Click Send to initiate the file transfer.
    2. The progress of the transfer is indicated in the Output Bar.

End Result

The result of this demo is a touch panel page with five draggable buttons representing source (input) devices and three drop target buttons representing output devices (Displays):

FIG. 292 Drag and Drop Demo - Page Layout

  • The LEFT DISPLAY, CENTER DISPLAY and RIGHT DISPLAY buttons are drop target buttons representing three output devices (Displays) that can potentially accept the sources represented by the five draggable buttons as inputs:
    • The ENZO and iPAD draggable (source) buttons are configured to use LEFT DISPLAY and CENTER DISPLAY as valid drop targets.
    • The LAPTOP draggable (source) button is configured to use CENTER DISPLAY (only) as valid drop target.
    • The COMPUTER and HDMI draggable (source) buttons are configured to use CENTER DISPLAY and RIGHT DISPLAY as valid drop targets.
  • These buttons can each be dragged onto the drop target buttons individually. When one of the draggable buttons is released within the bounds of a drop target, NetLinx code receives the custom events and makes visual changes to reflect the validity of the drag. If the drop target is valid for the selected draggable button, the target Display switches to the source represented by the draggable button that was dropped.

Note that the LEFT DISPLAY (drop target) button indicates that it is a valid drop target for the ENZO and iPAD draggable buttons (FIG. 293):

FIG. 293 Drag and Drop Demo - Dragging the COMPUTER Source button onto the LEFT DISPLAY Drop Target button

When the ENZO button is released, the LEFT DISPLAY uses it as it’s new input. Note that the currently selected input is indicated with a highlighted source button (FIG. 294):

FIG. 294 Drag and Drop Demo - COMPUTER is the currently selected Source for the LEFT DISPLAY

  • The LAPTOP draggable button is configured such that the LEFT DISPLAY button is an invalid target, therefore this buttons cannot be released on the LEFT DISPLAY drop target button.

Note that the LEFT DISPLAY and RIGHT DISPLAY drop targets indicates that they are both invalid drop targets for the LAPTOP draggable button (FIG. 295):

FIG. 295 Drag and Drop Demo - iPAD not allowed as a Source for the LEFT DISPLAY

  • The CLEAR VTC SOURCE button will clear the current input setting on all displays when pressed.
  • The SMALL ICONS button will toggle the "valid target" and "invalid target" icons (on the Display buttons) from small icons to large icons (FIG. 296):

FIG. 296 Target Valid Icons (Small/Large)

results matching ""

    No results matching ""