Overview

G5 Panels and TPDesign5 support "drag-and-drop" functionality for General and Multi-State General buttons. This function allows the end-user to initiate a drag on a button with a "long press", then drag and release (or "drop") the button onto a drop target (FIG. 208):

FIG. 208 Draggable buttons and Drop Target button

Draggable buttons can be dragged and dropped onto valid drop target buttons

AMX System Requirements for Listview Buttons

The following software, hardware and firmware requirements must be met to support Drag and Drop functionality:

• TPDesign5 - version 1.3 (or higher)
• X Series G5 Touch Panels - panel firmware v1.3.23 (or higher)
• NetLinx Masters - master firmware v1.3.17 (or higher)

Draggable Buttons and Drop Target Buttons

To use the drag-and-drop function, the TPDesign5 project must include at least one "draggable" button, and at least one "drop target" button. General and Multi-State General Buttons (only) can be set as either a Draggable or as a Drop Target button, via the Drag/Drop Type (General) button property.

• "Draggable" buttons are buttons that can be long-pressed and dragged onto a drop target button.
• "Drop Target" buttons are buttons that serve as potential targets for draggable buttons.

Using Draggable Buttons (on the Touch Panel)

To use draggable buttons on a G5 touch panel (FIG. 209):

Note that when the drag-shadow appears, the Drop Target button decreases in opacity to indicate that it is a drop target

Drag Shadow button

1 2 3

Long-press the draggable button until a "drag-shadow" appears

FIG. 209 Using Draggable Buttons on the Touch Panel

Press and drag the drag- shadow onto a Drop Target

Release to drop the draggable button onto the Drop Target button

1. Long-press (press and hold for 1 second) the draggable button (1).
2. In approximately 1 second, a transparent copy of the button appears on the screen (2).
3. Drag the button onto a valid Drop Target button, and release to "drop" the draggable button (3).

NOTE: As shown in FIG. 209, when the drag shadow appears, the target will decrease opacity to indicate it is a drop target. See

page 183

for details on details on States properties for Drop Target buttons.

Drag/Drop Type Button (General ) Property

A new General property called "Drag/Drop Type" is available in TPDesign5 that sets the selected General or Multi-State General button as either "draggable" or as a "drop target" . By default, this property is set to "none" (FIG. 210):

FIG. 210 General Property - Drag/Drop Type

Drop Groups

Drop groups provide a means of a validity check for drop targets - they allow you to control which drop target buttons will serve as valid targets for draggable buttons.

Drop Groups are assigned to draggable buttons, and determine which Drop Target buttons are considered to be valid targets for each draggable button. Once a draggable button has a Drop Group assigned to it, only those drop targets that exist within the assigned Drop Group are valid targets. Conversely, draggable buttons are not allowed to be dragged and dropped onto an invalid drop target.

NOTE: While Drop Groups are not a requirement for drag and drop functionality, they provide a powerful method of limiting drag and drop functionality to ensure an optimal user experience.

Example - Grouping By Connection Type

FIG. 211 on page 169 provides an example of three Drop Groups being used to organize the source (input) devices that can be dragged onto each of four Video Output devices:

Drop Target buttons representing four Video Output devices

Drop Group B accepts Component

Assigned

DROP TARGET:

DROP TARGET:

Video Output Device 1

DROP TARGET:

Video Output Device 2

Accepts: HDMI sources

Component source

DROP TARGET:

Video Output Device 3

Accepts: HDMI source

Component source 4K source

Video Output Device 4

Accepts: HDMI source

Accepts: HDMI source

Source Device: HDMI

Source Device: Component

Source Device: 4K

Source Device: HDMI, 4K

Source Device: HDMI, Component

Source Device: HDMI

Draggable buttons representing six Source (Input) devices

FIG. 211 Using Drop Groups to Control targets for Draggable Buttons

• • Each Video Output device is represented by a Drop Target button - each one supports a different set of inputs.
  • Each Source (Input) device is represented by a Draggable button - each one provides a different type of source. This example indicates three Drop Groups:
  • Drop Group A: This group accepts all source inputs that provide HDMI input. Note that Drop Group A includes Video Output devices 1, 2 and 3, as all of these devices support HDMI.
  • Drop Group B: This group accepts all source inputs that provide Component input. Note that Drop Group B includes Video Output devices 2 and 3, since both devices support Component.
  • Drop Group C: This group accepts all source inputs that provide 4K input. Note that Drop Group C includes only Video Output device 3, since it is the only one that supports 4K.
  • Note that Video Output Device 4 has no Drop Group assignment. Therefore, the only source inputs allowed to be dragged and dropped on this Drop Target are those that also have no Drop Group assignment.

In this example, Drop Groups prevent Input devices from being dragged and dropped onto incompatible video output devices. With the configuration indicated in FIG. 211, HDMI sources are only allowed to be dragged and dropped onto Video Output devices that support HDMI. Likewise, 4K sources are not allowed to be dragged and dropped onto Video Output devices that support do not support 4K input.

NOTE: Use multiple states on drop target buttons to display a specific bitmap on the drop target button based on Drop Group assignments. For example, when a draggable button is dragged onto a valid drop target, a bitmap can be displayed on the drop target button to indicate that it is a valid target for the selected button. Conversely, a different image can be used to indicate that the drop target is invalid for the selected button.

Drop Group Button (General ) Property

A new General property called "Drop Group" is available in TPDesign5 (v1.3 or higher) that associates the selected Draggable button with a specific Drop Group (FIG. 212):

FIG. 212 General Property - Drop Group

In this example, three Drop Groups have been created (via the Drop-Target Groups dialog)

page 19

8). |

Note that this property is only available for General and Multi-State General buttons that have been set as Draggable via the Drag/ Drop Type (General) property (see

page 168

).

Drop Groups - Notes

• • Drop Group names are case-insensitive.
  • Only drop targets can be grouped.
  • Drop targets can exist in multiple Drop Groups.
  • A draggable button can only have 1 Drop Group assigned to it.
  • If no group is assigned to a draggable button, then only drop targets that are not assigned to Drop Groups are valid targets. Note that this is the default (and simplest) use case: it allows designers to quickly create a page with draggables that can be dropped on any drop target with no additional configuration required.

Drag and Drop-Specif ic Events

TPDesign5 (1.3.23 or higher) supports a set of new Events for Draggable and Drop Target buttons:

Events for Draggable Buttons

Draggable buttons support two drag-specific Events (FIG. 213):

FIG. 213 Drag-Specific Events

• • Drag Start: The event will occur when the specified draggable button has initiated a drag. Drag starts are initiated by a long press on a draggable button.
  • Drag Cancel: The event will occur when the specified draggable button has been dropped outside of a valid drop target.

Events for Drop Target Buttons

Drop Target buttons support three drop-specific Events (FIG. 214):

FIG. 214 Drop-Specific Events

• • Drop Enter: The event will occur when a draggable button has entered a valid drop target.
  • Drop Exit: The event will occur when a draggable button has exited a valid drop target.
  • Drop: The event will occur when a draggable button has been dropped onto a valid drop target.

Custom Event Parameters for Drag and Drop Events

The events are:

• • ActionDragStarted - a draggable button has initiated a drag
  • ActionDragCancel - a draggable button has been dropped outside of a valid target
  • ActionDropEntered - a draggable button has entered a valid target
  • ActionDrop Exited - a draggable button has exited a valid target
  • ActionDrop - a draggable button has been dropped on a valid target

Also, the Drag/Drop events provide predefined variables that are populated when action event occurs. These values can be used in the custom event definition:

• ${dragChannelPort}

  |

• ${dropChannelPort}

  | |

• ${dragChannelCode}

  |

• ${dropChannelCode}

  | |

• ${dragAddressPort}

  |

• ${dropAddressPort}

  | |

• ${dragAddressCode}

  |

• ${dropAddressCode}

  | |

• ${dragGroupName}

  |

• ${dragChannelPort}

  | |

• ${dragButtonName}

  |

• ${dragChannelCode}

  | |

• ${dragPageName}

  |

• ${dragAddressPort}

  | |

• ${dragInfo}

  |

• ${dragAddressCode}

  | |

• ${dropTargetsValid}

  |

• ${dragGroupName}

  | |

• ${dropTargetsInvalid}

  |

• ${dragButtonName}

  | | |

• ${dragPageName}

  | | |

• ${dragInfo}

  | | |

• ${dropTargetsValid}

  | | |

• ${dropTargetsInvalid}

  |