Basic Demo - No Drop Groups

The following instructions illustrate creating a set of draggable buttons that represent input devices, and a drop target button that represents an output device (a VTC).

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

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

FIG. 223 Drag and Drop Demo - Four (draggable) Input buttons and one (drop target) Output button

Before You Begin

Download the DragAndDropNoGroups.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:

    • DragAndDropNoGroups.TP5 - A TPDesign5 project file, as well as all of the image files used by the Page and Buttons in this project:
      • icon-apple.png • icon-windows8.png
      • icon-enzo.png • vtc.png
      • icon-iPad.png
    • DragAndDropNoGroups.apw - A NetLinx Studio workspace file that contains the NetLinx code:
      • DragAndDropNoGroups.axs • DragAndDropNoGroups.tkn
      • DragAndDropNoGroups.src • DragAndDropNoGroups.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 DragAndDropNoGroups.ZIP file.
  4. Click OK to import the selected files and return to the Resource Manager (FIG. 224):

FIG. 224 Resource Manager Images tab - DragAndDropNoGroups Demo images imported

  1. Click Close to close the Resource Manager.

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

Create & Conf igure a Drop Target Button

In this example, there is only a single Drop Target button that will represent the Output Device (VTC) that can accept input from the source devices represented by the draggable buttons.

Create a Drop Target Button

  1. Use the Button Draw tool to create a new button.
  2. Set the 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. 225 TPDesign5 General Properties - Type set to "general"

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

FIG. 226 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 button as shown in FIG. 227:

FIG. 227 Drop Target Button - General Properties

Set Drop Target Button Properties - Programming

Set the Programming properties for the Drop Target button as shown in FIG. 228:

FIG. 228 Drop Target Button - Programming Properties

On the Drop Target button, set the Address Code to 17 and set the Channel Code to 17.

Set Drop Target Button Properties - States

In this example, this button will represent the output (VTC) device. Use the Text (States) property to add the following labels to the button (All States): DRAG SOURCES HERE TO SEND TO VTC.

Use the Bitmaps (States) property to add the VTC bitmap to the 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 the drop target button and under All States, apply the bitmap: VTC.png.
    • In this example, the Bitmap Justification is set to center-middle.

Drop target buttons can use states to provide a visual indication of target validity for draggable buttons. In this example, if a drag is started on a draggable button, the opacity of the drop target button is reduced to indicate that it is a drop target.

  1. Select the Drop Target button and open the State Manager window.
  2. In the State Manager window, select State 1, and set the State properties as shown in FIG. 229:
  3. In the State Manager window, select State 2, and set the State properties as shown in FIG. 229:

FIG. 229 State Manager context menu - Insert States

NOTE: In this example the only difference between the two states is the Overall Opacity property setting: State one uses "255" (totally opaque), and State 2 uses "128" (half-opacity). This provides a visual indication that this button is a drop target.

  1. The two states are indicated in the State Manager window (FIG. 230):

FIG. 230 State Manager window indicating five states

Create & Conf igure Draggable Buttons

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

Create Four Draggable Buttons

  1. In TPDesign5, open a Page and 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. 231 TPDesign5 General Properties - Type set to "general"

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

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

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

FIG. 233 Draggable Buttons

Set Draggable Button Properties - General

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

FIG. 234 Draggable Buttons - General Properties

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):

ENZO button

selected iPAD button

selected LAPTOP button

selected COMPUTER button selected

FIG. 235 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.

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 and COMPUTER.
  2. Use the Bitmaps (States) property to apply an appropriate icon to each of the buttons.

NOTE: All images must f irst 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 f ile.

    • Select each button and under All States, apply the following bitmaps: icon-enzo.png, icon-iPad.png, icon-windows8.png

and icon-apple.png.

    • In this example, the Bitmap Justification is set to top-middle for all four draggable buttons. Set the remaining States properties for the draggable buttons as shown in FIG. 236:

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

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

FIG. 237 Draggable Buttons (Representing four Input Devices)

Create and Conf igure a "CLEAR VTC SOURCE" Button

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

FIG. 238 CLEAR VTC SOURCE button

To add a button that supports this option:

Create a "CLEAR VTC 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 VTC SOURCE" Button Properties - General

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

FIG. 239 "CLEAR VTC SOURCE" Button - General Properties

Set "CLEAR VTC SOURCE" Button Properties - Programming

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

FIG. 240 "CLEAR VTC SOURCE" Button - Programming Properties

On the "CLEAR VTC 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 btnDT = 17

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

DEFINE_VARIABLE

//an array to store our draggable buttons

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

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

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

//In this example the groups are defined as follows

// - buttonAddresses 1,2, are assigned: group_1

// - buttonAddresses 3,4 are assigned: group_2

// - btnDT [17] will accept draggables from: group_2 DEFINE_EVENT

DATAEVENT[_dvTP]

{

ONLINE:

{

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

}

}

//Custom event for START [1410]

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

//a START event is sent.

//CUSTOMEVENT[dvTP,ID,Type] CUSTOM_EVENT[_dvTP,dgBTNS,1410]

{

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

SENDCOMMAND _dvTP,"'^ANI-',ITOA(btnDT),',2,2,0'"

}

//Custom event for ENTER [1411]

//Once the dragShadow enters the boundaries of a valid dropTarget

//a ENTER event is sent

CUSTOMEVENT[_dvTP,btnDT,1411]

{

SENDCOMMAND _dvTP,"'^ANI-',ITOA(btnDT),',2,2,0'"

}

//Custom event for EXIT [1412]

//Once the dragShadow leaves the boundaries of a valid dropTarget

//a EXIT event is sent

CUSTOMEVENT[_dvTP,btnDT,1412]

{

SENDCOMMAND _dvTP,"'^ANI-',ITOA(btnDT),',1,1,0'"

}

//Custom event for DROP [1413]

//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,btnDT,1413]

{

SENDCOMMAND _dvTP,"'^ANI-',ITOA(btnDT),',1,1,0'"

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

}

//Custom event for CANCEL [1414]

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

//is not a VALID dropTarget. CUSTOMEVENT[_dvTP,dgBTNS,1414]

{

SENDCOMMAND _dvTP,"'^ANI-',ITOA(btnDT),',1,1,0'"

}

BUTTONEVENT[_dvTP,8] //CLEAR VTC SOURCES

{

PUSH:

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

SENDCOMMAND _dvTP,"'^ANI-',ITOA(btnDT),',1,1,0'"

}

}

  1. Save changes.

NOTE: The NetLinx code shown above is included in the NetLinx Studio Workspace f ile (DragAndDropNoGroups.apw) that is in the DragAndDropNoGroups.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 DragAndDropNoGroups.axs source code file, change the dvTP value to match the device number of your touch panel (FIG. 241):

FIG. 241 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. 242 Select Files for File Transfer dialog

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

FIG. 243 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 four draggable buttons representing source (input) devices and one drop target button representing an output device (VTC):

FIG. 244 Drag and Drop Demo - Page Layout

  • The VTC button ("DRAG SOURCES HERE TO SEND TO VTC") is a drop target button representing an output device (VTC) that can accept any of the sources represented by the four draggable buttons. Note that in this example the VTC is a valid target for all sources, since no Drop Groups have been defined.
  • Source buttons can each be dragged onto the VTC button individually. When one of the draggable buttons is released within the bounds of the VTC button, NetLinx code receives the custom events and turns on the source represented by the draggable button that was dropped.
  • Press the CLEAR VTC SOURCE button to clear the current input setting.

results matching ""

    No results matching ""