P. 1
TPDesign4.OperationReferenceGuide

TPDesign4.OperationReferenceGuide

|Views: 852|Likes:
Published by fabs0327

More info:

Published by: fabs0327 on Jul 05, 2011
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

11/20/2012

pdf

text

original

Sections

  • TPDesign4 (v2.11 or higher)
  • Overview
  • What's New in Version 2.11
  • Supported Windows Platforms and PC Requirements
  • Supported Operating Systems
  • Supported Operating System Languages
  • PC Requirements/Recommendations
  • Supported Touch Panels/Screen Resolutions
  • Supported Panel Types
  • Supported Screen Resolutions - NXI-TPI/4
  • Supported Screen Resolutions - TPI-PRO
  • Supported Screen Resolutions - TPI-PRO-DVI
  • Video Capabilities for Modero Panels
  • Video Capabilities for Enhanced Modero Panels
  • Intercom Capabilities for Modero Panels
  • AMX Touch Panels that Support Dynamo Resource Images
  • True Type Font Support
  • Supported Image File Types
  • Related Software Applications
  • NetLinx Studio
  • AMX WebUpdate
  • G4 PanelBuilder
  • G4 PanelPreview
  • The TPDesign4 Work Area
  • Design View Windows
  • Design View Window tab controls
  • Using the Zoom Controls
  • Magnifier Window
  • Workspace Window
  • Workspace Navigator - Pages Tab
  • FIG. 7 Workspace Navigator - Pages Tab
  • Workspace Window- Function Maps Tab
  • Properties Window
  • FIG. 8 Workspace Window- Function Maps Tab
  • Properties Control - General Tab
  • FIG. 9 Properties Control - General Tab
  • Properties Control - Programming Tab
  • FIG. 10 Properties Control - Programming Tab
  • Properties Control - States Tab
  • FIG. 11 Properties Control - States Tab
  • Using the Apply To All option
  • Using the Prev and Next buttons
  • State Manager window
  • State Manager Drag-and-Drop Menu
  • Transfer Status Window
  • Status Bar
  • Button Preview Window
  • Print Preview Window
  • Working With Dockable Windows
  • Moving, Docking and Resizing Dockable Windows
  • Toggling the Windows
  • Using the New Project Wizard
  • New Project Wizard dialogs
  • New Project Wizard - Step 1 dialog
  • FIG. 19 New Project Wizard - Step 1 dialog
  • New Project Wizard - Step Two dialog
  • New Project Wizard - Final Step dialog
  • FIG. 21 New Project Wizard - Final Step dialog
  • TPD4 Project Files (*.TP4)
  • Inappropriate File Name Characters
  • Creating a New Project
  • System-Generated Project File Names
  • Edit Focus
  • Quick Input
  • Undo/Redo
  • Cutting, Copying and Pasting
  • Using the Selection Tool
  • Drag and Drop Support
  • Using G4 PanelPreview
  • Setting Project Properties
  • Project Properties dialog - Project Information tab
  • FIG. 26 Project Properties dialog - Project Information tab
  • Project Properties dialog - Panel Setup Information tab
  • FIG. 27 Project Properties dialog - Panel Setup Information tab
  • Project Properties dialog - Sensors tab
  • FIG. 28 Project Properties dialog - Sensors tab
  • Project Properties dialog - IR Emitters and Receivers tab
  • FIG. 29 Project Properties dialog - IR Emitters and Receivers tab
  • Applying Password Protection to Your Project File
  • Setting a Power Up Page
  • Setting Power Up Popup Pages
  • Setting an Inactive Page Flip
  • Using the Workspace Window
  • Workspace Window - Pages Tab
  • Opening Pages/Popup Pages Via the Workspace Window
  • FIG. 35 Opening Pages/Popup Pages Via the Workspace Window
  • Using the Properties Window
  • Properties Window - General Tab
  • Working With Multiple Projects
  • Opening Multiple Projects Simultaneously
  • Copying/Pasting Across Projects
  • Project Migration (From Previous Versions of TPDesign4)
  • Converting TPD3 files to TPD4
  • R-4 Remote Controller Projects
  • Creating a TPD4 Project for R-4 Remote Controllers
  • R-4 Remote Devices - Unsupported Button Types
  • R-4 Setup Codes
  • Levels:
  • Addresses
  • R-4 External Buttons - Default Channel Codes
  • Working With The Resource Manager
  • Working With Images
  • Resource Manager dialog - Images tab
  • Static Image Files
  • FIG. 40 Resource Manager dialog - Images tab
  • Importing Image Files Into Your Project
  • To import image files into your Project
  • Working With Dynamic Images
  • Resource Manager dialog - Dynamic Images tab
  • FIG. 41 Resource Manager dialog - Dynamic Images tab
  • Dynamic Images
  • Adding Dynamic Image Files To Your Project
  • Dynamic Image Example - Adding a Dynamic Image
  • DynaMo™ Dynamic Images
  • Creating a DynaMo Image
  • Adding an Dynamo Resource Image to the Resource Manager
  • Scaling and Cropping of Dynamo Resource Images
  • Copy/Paste Operations on Dynamo Resource Images
  • Cameras and Servers With M-JPEG Streaming Output
  • Network Path Information
  • Dynamic Image Settings - Example 1: Axis
  • Dynamic Image Settings - Example 2: Panasonic
  • FIG. 49 Dynamic Image Settings - Example 1: Axis
  • FIG. 50 Dynamic Image Settings - Example 2: Panasonic
  • Dynamic Image Settings - Example 3: Vivotek
  • Working With Trendnet IP Cameras
  • DynaMo Dynamic Image Example - Adding a Streaming Webcam Image
  • FIG. 51 Dynamic Image Settings - Example 3: Vivotek
  • Working With Slots
  • Resource Manager dialog - Slots tab
  • FIG. 54 Resource Manager dialog - Slots tab
  • Assigning Images and Sounds to Slot Positions
  • Working With Icons
  • Bitmaps vs. Icons
  • Working With Sounds
  • Resource Manager dialog - Sounds tab
  • FIG. 55 Resource Manager dialog - Sounds tab
  • Supported Sound File Types
  • Importing Sound Files To Your Project
  • Exporting Image and Sound Files From Your Project To a Specified Directory
  • Editing Image and Sound Files Using External Programs
  • Editing Image Files
  • Editing Sound Files
  • Working With Pages
  • Creating a New Page
  • Setting Page Properties
  • Setting General Properties: Pages
  • Setting Programming Properties: Pages
  • Setting States Properties: Pages
  • Renaming a Page
  • Adding a Fill Color to a Page
  • (FIG.60)
  • Adding a Bitmap to a Page
  • (FIG.61)
  • Adding an Icon to a Page
  • Adding Text to a Page
  • (FIG.65)
  • (FIG.66)
  • (FIG.67)
  • Displaying a Video Source on a Page
  • Copying/Pasting Pages
  • Copying Pages
  • Pasting Pages
  • Deleting Pages From a Project
  • Exporting Pages as Image Files
  • Printing Pages
  • Working With Popup Pages
  • Creating a Popup Page
  • Using the Popup Draw Tool
  • Setting Popup Page Properties
  • Setting General Properties: Popup Pages
  • Setting Programming Properties: Popup Pages
  • Setting States Properties: Popup Pages
  • Drawing Assist Support for Popup Pages
  • Renaming a Popup Page
  • Adding a Fill Color To a Popup Page
  • Adding a Bitmap to a Popup Page
  • Adding an Icon to a Popup Page
  • Adding Text to a Popup Page
  • (FIG.84)
  • (FIG.85)
  • Displaying a Video Source on a Popup Page
  • Creating Popup Page Groups
  • Copying/Pasting Popup Pages
  • Copying Popup Pages
  • Pasting Popup Pages
  • Deleting Popup Pages From a Project
  • Show/Hide Popup Pages
  • Working With Buttons
  • Button Draw Tools
  • Drawing a Button
  • Generated Button Names
  • Specifying the Button Type
  • Specifying a Button Border
  • Adding Text to a Button
  • Foreign Language Support for Text
  • Adding a Fill Color To a Button
  • Changing the Button Fill Color
  • Adding a Bitmap to a Button
  • Adding an Icon to a Button
  • Working With Transparent Backgrounds
  • Displaying a Video Source on a Button
  • Adding Text Effects
  • Page Flips
  • Creating a Page Flip
  • Drag & Drop To Set Page Flips
  • Page Flip Actions
  • Copying/Pasting Buttons
  • Copying Buttons
  • Pasting Buttons
  • Editing Button Properties
  • Editing Multiple Selections
  • General Buttons
  • Setting Properties: General Buttons
  • Multi-State General Buttons
  • Setting Properties: Multi-State General Buttons
  • Level Control Parameters
  • Bargraph Buttons
  • Multi-State Bargraph Buttons
  • Setting Properties: Multi-State Bargraph Buttons
  • Slider Types
  • Formatting Codes
  • Creating a Custom Slider
  • Working With Touch Maps
  • Joystick Buttons
  • Setting Properties: Joystick Buttons
  • Text Input Buttons
  • Input Mask Characters
  • Input Mask Ranges
  • Input Mask Next Field Characters
  • Input Mask Operators
  • Computer Control Buttons
  • Setting Properties: Computer Control Buttons
  • TakeNote Buttons
  • Setting Properties: TakeNote Buttons
  • Setting Default New Button Parameters
  • Using the Drawing Assist Features
  • Order Assist toolbar
  • Position Assist toolbar
  • Size Assist toolbar
  • Using the Alignment & Sizing dialog
  • Previewing a Button
  • Creating a Date Button
  • To create a date button:
  • Creating a Time Button
  • Working With External Controls
  • External Button Options
  • Copying/Converting External Controls Between Panels
  • Global Properties for External Pushbuttons/LEDs
  • Setting Global Properties for External Pushbuttons
  • Setting Global Properties for External LEDs
  • Page-Specific Properties for External Pushbuttons/LEDs
  • Setting Page-Specific General Properties: External Pushbuttons
  • Setting Page-Specific General Properties: External LEDs
  • Working With List Box Buttons
  • G4 Devices That Support List Box Buttons
  • List Box Toolbar
  • List Box Buttons: Managed / Unmanaged Mode
  • List Box Buttons: Managed Mode
  • Creating List Box Buttons (Managed Mode)
  • Adding Rows
  • Adding Columns
  • Deleting Columns
  • Deleting Rows
  • Cutting, Copying and Pasting a List Box
  • List Box Buttons - Container Button
  • List Box Container Properties vs. Column Properties
  • Setting Properties: List Box Container Buttons
  • Setting List Box Container Button Properties
  • List Box Buttons - Subordinate Buttons
  • Subordinate Button Placement
  • FIG. 160 List Box Buttons - Subordinate Buttons
  • Subordinate Buttons - Drag and Drop Capability
  • List Box Buttons - Columns
  • Setting Properties: List Box Columns
  • Setting List Box Button Column Properties
  • List Box Buttons: Unmanaged Mode
  • Rules for Unmanaged List Box Buttons
  • Creating List Box Buttons (Unmanaged Mode)
  • List Box Buttons - Resizing
  • List Box Buttons - Z-Order
  • Using the Drawing Toolbar With List Box Buttons
  • List Box Buttons - Navigation Buttons
  • Creating List Box Navigation Buttons
  • Creating a List Box Navigation Scroll Bar
  • Creating a List Box Feedback Scroll Bar
  • Scroll Bar Components
  • Navigation Buttons - Channel Code Values
  • List Data Table
  • List Data Table Properties
  • Static List Box Data
  • Dynamic List Box Data
  • Attaching a List Data Table to a List Box Button
  • Creating a Static List Data Table
  • Attaching a Static List Data Table to a List Box Button
  • Deleting a List Data Table
  • Creating a Dynamic List Data Table
  • Data List Commands
  • Data List Command Rules
  • Command Structure List View
  • Dynamic List box Table Example
  • Attaching a Dynamic List Data Table to a List Box Button
  • Changing Port and Address Assignments for a List Data Table
  • Working With Properties
  • Working With The Property Painter
  • (FIG.186)
  • Saving a Properties Set
  • General Properties
  • Above Popups
  • Animate Time Down
  • Animate Time Up
  • Auto-Repeat
  • Border Style
  • Color Depth
  • Column Display Order
  • Column Sort Order
  • Compression
  • Cursor Color
  • Cursor Name
  • Description
  • Disabled
  • Display Type
  • Group
  • Height
  • Hidden
  • Hide Effect
  • Hide Effect Time
  • Hide Effect X/Y Pos
  • Input Mask
  • Left
  • List Column
  • List Column Padding
  • List Display
  • List Table Port
  • List Table Address
  • List Table Wrap
  • List Filter Column
  • List Managed
  • List Offset Enabled
  • List Preferred Row
  • List Preferred Row Height
  • List Row
  • List Row Height
  • List Row Padding
  • List Selectable
  • Lock Button Name
  • Max Text Length
  • Modal
  • Name
  • Page Flip
  • Password
  • Password Character
  • Password Protection
  • Remote Host
  • Remote Port
  • Reset Pos. On Show
  • Scale To Fit
  • Show Effect
  • Show Effect Time
  • Show Effect X/Y Pos
  • Slider Color
  • Slider Name
  • State Count
  • TakeNote Enabled
  • TakeNote Host
  • TakeNote Port
  • Timeout
  • Touch Map
  • Touch Style
  • Type
  • Value Direction
  • Width
  • Programing Properties
  • Address Code
  • Address Port
  • Channel Code
  • Channel Port
  • Command Output
  • Command Port
  • Feedback
  • Level Aux
  • Level Code
  • Level Control Type
  • Level Control Value
  • Level Control Repeat Time
  • Level Function
  • Level Port
  • Range Aux Inverted
  • Range Drag Increment
  • Range Low
  • Range High
  • Range Inverted
  • Range Time Up
  • Range Time Down
  • String Output
  • String Output Port
  • State Properties
  • Bitmap
  • Bitmap Justification
  • Bitmap X Offset
  • Bitmap Y Offset
  • Border Color
  • Border Name
  • Chameleon Image
  • Draw Order
  • Fill Color
  • Font
  • Icon Justification
  • Icon Slot
  • Icon X Offset
  • Icon Y Offset
  • Marquee Direction
  • Marquee Repeat
  • Overall Opacity
  • Scale Bitmap To Fit
  • Sound
  • Streaming Source
  • Text
  • Text Color
  • Text Effect
  • Text Effect Color
  • Text Justification
  • Text X Offset
  • Text Y Offset
  • Video Cropping
  • Video Fill
  • Video Touch Pass-Thru
  • Word Wrap
  • Using the All States Option
  • Searching For Button Properties
  • To search for button properties:
  • Searching and Replacing Button Properties
  • Working With States
  • State Manager Window
  • State Manager Context Menu
  • Adding States To a Button
  • Duplicating an Existing State on the Button
  • Adding States From the Clipboard
  • Drag & Drop To Add States
  • FIG. 192 Drag & Drop To Add States
  • Setting the Maximum Active State For a Button
  • Removing States From A Button
  • Deleting States
  • Cutting States To the Clipboard
  • Changing the Order Of States On A Button
  • Reordering States Through the Clipboard
  • Reordering States Through Drag-and-Drop
  • Copying/Pasting States From a Page, Popup Page or Button
  • Copying a State to the Clipboard
  • Pasting a State from the Clipboard
  • Draw Order (Z-Order)
  • Changing the Draw Order for Selected States
  • (FIG.195)
  • Working With Function Codes
  • Show/Hide Function Codes
  • Function Codes - Limitations
  • Function Code Map
  • 0- Setup Port
  • Using Power Assign
  • Clear Channels First
  • Assign Codes
  • Begin Assignment At (Power Assign)
  • Ensure Contiguous Code Assignment (Power Assign)
  • Wrap Within Port ID (Power Assign)
  • Working With Colors and Palettes
  • Working With Colors
  • Working With Palettes
  • Working With Multiple Color Palettes
  • Creating New Palette Entries
  • Creating Custom Palettes
  • Renaming Palettes
  • Changing the Active Palette
  • Importing Palette Files
  • Exporting Palette Files
  • Copying Palettes
  • Copying Palette Entries
  • Using Custom Palettes to Enable Color Schemes in G4 PanelBuilder
  • Working With Video Fills
  • Streaming Video Fills
  • Working With Animation Effects
  • Using the Animation Wizard
  • Animation Wizard - Select Type (Step 1 of 6)
  • Animation Wizard - Create Sequence (Step 2 of 6)
  • Animation Wizard - Size & Position (Step 3 of 6)
  • Animation Wizard - Assign Frames (Step 4 of 6)
  • Animation Wizard - Appearance (Step 5 of 6)
  • Animation Wizard - Finish (Step 6 of 6)
  • Tweening
  • Creating Color Transition Effects
  • Creating Animated Bitmap Effects
  • Creating Animated Text Effects
  • To create animated text effects:
  • Tweeners sub-menu
  • Chameleon Images
  • Requirements for Chameleon Images
  • Working With Chameleon Images
  • Working With Chameleon Images - Example
  • Chameleon Images, Custom Palettes and G4 PanelBuilder
  • File Transfer Operations
  • Secure NetLinx Connections
  • Working With Communications Configurations
  • Saving and Recalling Communication Configurations
  • Editing the Settings on an Existing Communication Configuration
  • Connecting to a NetLinx Master
  • Connecting to a NetLinx Master via TCP/IP
  • Connecting to a NetLinx Master via Serial Port
  • Connecting to a NetLinx Master via Modem
  • Transferring Touch Panel Files to/from a NetLinx Master
  • Sending a Panel File To a NetLinx Master
  • Receiving a Panel File From a NetLinx Master
  • Panel File Transfers via TCP/IP
  • Panel File Transfers via Serial Port
  • Panel File Transfers via Modem
  • Transfer Options
  • Virtual NetLinx Master TCP/IP Transfers
  • Configuring the Touch Panel for Virtual NetLinx Master TCP/IP Transfers
  • Configuring TPD4 for Virtual NetLinx Master TCP/IP Transfers
  • Powering Up and Connecting the Panel (via TCP/IP)
  • Transferring Files Using a Virtual NetLinx Master TCP/IP Connection
  • Sending Files To the Panel
  • Receiving Files From The Panel
  • Virtual NetLinx Master USB Transfers
  • Installing the AMX USB Driver for G4 Touch Panels
  • Configuring the Touch Panel for Virtual NetLinx Master USB Transfers
  • Configuring TPD4 for Virtual NetLinx Master USB Transfers
  • Powering Up and Connecting the Panel (via USB)
  • Transferring Files Using a Virtual NetLinx Master USB Connection
  • MVP-5200i USB Driver
  • Working With Templates
  • Importing Template (*.VAT or *.TPT) Files
  • Working With the System Page Template
  • Copying/Pasting Entire System Pages into a Project
  • Copying/Pasting System Page Elements into a Project page
  • Working with System Page Keyboards and Keypads
  • System Page Template Reference
  • System Page Template Popup Pages
  • Exporting Your Project as a G4 PanelBuilder Template
  • G4 PanelBuilder Templates - Required Template Elements
  • Navigation Elements
  • FIG. 224 G4 PanelBuilder Templates - Required Template Elements
  • Placeholder Elements
  • G4 PanelBuilder Templates - Optional Template Elements
  • Mode Elements
  • FIG. 225 G4 PanelBuilder Templates - Optional Template Elements
  • Sub-Navigation Elements
  • Splash Elements
  • Device Elements
  • Feature Elements
  • Sub-Feature Elements
  • Rules for Navigating a G4 PanelBuilder Template
  • G4 PanelBuilder Templates - Template Wide Conventions
  • G4 PanelBuilder Templates - AMX Naming Conventions
  • G4 PanelBuilder Templates - AMX Naming Convention
  • Exporting Your Project as a VisualArchitect Template
  • VA Templates - Navigations as Pages
  • VA Templates - Logical Page Scroll Bar Elements
  • VA Templates - Logical Page Info Element
  • VA Templates - Logical Page Up and Down Elements
  • VA Templates - List Box Page Up and Down Elements
  • Program Preferences
  • Preferences Dialog - Application tab
  • Startup
  • FIG. 226 Preferences Dialog - Application tab
  • Miscellaneous
  • Warning Messages
  • Preferences Dialog - Appearance tab
  • Window
  • FIG. 227 Preferences Dialog - Appearance tab
  • Grid
  • Transparency
  • Preferences Dialog - Directories tab
  • Default Directories
  • Preferences Dialog - Editor Selection tab
  • FIG. 229 Preferences Dialog - Editor Selection tab
  • Preferences Dialog - Undo/Redo tab
  • Undo / Redo Support
  • FIG. 230 Preferences Dialog - Undo/Redo tab
  • Adding an External Editing Program for Image Files
  • Adding an External Editing Program for Sound Files
  • Changing the Default External Image or Sound Editor Program
  • Customizing the Menus and Toolbars
  • Customizing the Toolbars
  • Adding Buttons To Existing Toolbars
  • Removing Buttons From Existing Toolbars
  • Associating an Icon With a New Command
  • Creating a New Custom Toolbar
  • Renaming Custom Toolbars
  • (FIG.239)
  • Deleting Custom Toolbars
  • Customizing the Menus
  • Adding Commands To Existing Menus
  • Removing Commands From Existing Menus
  • Creating a New Custom Menu
  • Adding a Shortcut To an Application In the Tools Menu
  • Hotkeys (Keyboard Accelerators)

Operation/Reference Guide

TPDesign4
Touch Panel Design Program
(v2.11 or higher)

S of t w ar e

Last Revised: 9/22/2009

Software License and Warranty Agreement
• LICENSE GRANT. AMX grants to Licensee the non-exclusive right to use the AMX Software in the manner described in this License. The AMX Software is licensed, not sold. This license does not grant Licensee the right to create derivative works of the AMX Software. The AMX Software consists of generally available programming and development software, product documentation, sample applications, tools and utilities, and miscellaneous technical information. Please refer to the README.TXT file on the compact disc or download for further information regarding the components of the AMX Software. The AMX Software is subject to restrictions on distribution described in this License Agreement. AMX Dealer, Distributor, VIP or other AMX authorized entity shall not, and shall not permit any other person to, disclose, display, loan, publish, transfer (whether by sale, assignment, exchange, gift, operation of law or otherwise), license, sublicense, copy, or otherwise disseminate the AMX Software. Licensee may not reverse engineer, decompile, or disassemble the AMX Software. ACKNOWLEDGEMENT. You hereby acknowledge that you are an authorized AMX dealer, distributor, VIP or other AMX authorized entity in good standing and have the right to enter into and be bound by the terms of this Agreement. INTELLECTUAL PROPERTY. The AMX Software is owned by AMX and is protected by United States copyright laws, patent laws, international treaty provisions, and/or state of Texas trade secret laws. Licensee may make copies of the AMX Software solely for backup or archival purposes. Licensee may not copy the written materials accompanying the AMX Software. TERMINATION. AMX RESERVES THE RIGHT, IN ITS SOLE DISCRETION, TO TERMINATE THIS LICENSE FOR ANY REASON UPON WRITTEN NOTICE TO LICENSEE. In the event that AMX terminates this License, the Licensee shall return or destroy all originals and copies of the AMX Software to AMX and certify in writing that all originals and copies have been returned or destroyed. PRE-RELEASE CODE. Portions of the AMX Software may, from time to time, as identified in the AMX Software, include PRERELEASE CODE and such code may not be at the level of performance, compatibility and functionality of the GA code. The PRE-RELEASE CODE may not operate correctly and may be substantially modified prior to final release or certain features may not be generally released. AMX is not obligated to make or support any PRE-RELEASE CODE. ALL PRE-RELEASE CODE IS PROVIDED "AS IS" WITH NO WARRANTIES. LIMITED WARRANTY. AMX warrants that the AMX Software (other than pre-release code) will perform substantially in accordance with the accompanying written materials for a period of ninety (90) days from the date of receipt. AMX DISCLAIMS ALL OTHER WARRANTIES, EITHER EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE, WITH REGARD TO THE AMX SOFTWARE. THIS LIMITED WARRANTY GIVES LICENSEE SPECIFIC LEGAL RIGHTS. Any supplements or updates to the AMX SOFTWARE, including without limitation, any (if any) service packs or hot fixes provided to Licensee after the expiration of the ninety (90) day Limited Warranty period are not covered by any warranty or condition, express, implied or statutory. LICENSEE REMEDIES. AMX's entire liability and Licensee's exclusive remedy shall be repair or replacement of the AMX Software that does not meet AMX's Limited Warranty and which is returned to AMX in accordance with AMX's current return policy. This Limited Warranty is void if failure of the AMX Software has resulted from accident, abuse, or misapplication. Any replacement AMX Software will be warranted for the remainder of the original warranty period or thirty (30) days, whichever is longer. Outside the United States, these remedies may not available. NO LIABILITY FOR CONSEQUENTIAL DAMAGES. IN NO EVENT SHALL AMX BE LIABLE FOR ANY DAMAGES WHATSOEVER (INCLUDING, WITHOUT LIMITATION, DAMAGES FOR LOSS OF BUSINESS PROFITS, BUSINESS INTERRUPTION, LOSS OF BUSINESS INFORMATION, OR ANY OTHER PECUNIARY LOSS) ARISING OUT OF THE USE OF OR INABILITY TO USE THIS AMX SOFTWARE, EVEN IF AMX HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. BECAUSE SOME STATES/COUNTRIES DO NOT ALLOW THE EXCLUSION OR LIMITATION OF LIABILITY FOR CONSEQUENTIAL OR INCIDENTAL DAMAGES, THE ABOVE LIMITATION MAY NOT APPLY TO LICENSEE. U.S. GOVERNMENT RESTRICTED RIGHTS. The AMX Software is provided with RESTRICTED RIGHTS. Use, duplication, or disclosure by the Government is subject to restrictions as set forth in subparagraph ©(1)(ii) of The Rights in Technical Data and Computer Software clause at DFARS 252.227-7013 or subparagraphs ©(1) and (2) of the Commercial Computer Software Restricted Rights at 48 CFR 52.227-19, as applicable. SOFTWARE AND OTHER MATERIALS FROM AMX.COM MAY BE SUBJECT TO EXPORT CONTROL. The United States Export Control laws prohibit the export of certain technical data and software to certain territories. No software from this Site may be downloaded or exported (i) into (or to a national or resident of) Cuba, Iraq, Libya, North Korea, Iran, Syria, or any other country to which the United States has embargoed goods; or (ii) anyone on the United States Treasury Department's list of Specially Designated Nationals or the U.S. Commerce Department's Table of Deny Orders. AMX does not authorize the downloading or exporting of any software or technical data from this site to any jurisdiction prohibited by the United States Export Laws.

• •

This Agreement replaces and supersedes all previous AMX Software License Agreements and is governed by the laws of the State of Texas, and all disputes will be resolved in the courts in Collin County, Texas, USA. For any questions concerning this Agreement, or to contact AMX for any reason, please write: AMX License and Warranty Department, 3000 Research Drive, Richardson, TX 75082.

Table of Contents

Table of Contents
TPDesign4 (v2.11 or higher) ...............................................................................1
Overview .................................................................................................................. 1 What's New in Version 2.11...................................................................................... 1 Supported Windows Platforms and PC Requirements .............................................. 1
Supported Operating Systems ........................................................................................ 1 Supported Operating System Languages ...................................................................... 1 PC Requirements/Recommendations .............................................................................. 2

Supported Touch Panels/Screen Resolutions............................................................ 2
Supported Panel Types ................................................................................................... 2 Supported Screen Resolutions ........................................................................................ 3 Supported Screen Resolutions - NXI-TPI/4 ...................................................................... 4 Supported Screen Resolutions - TPI-PRO ........................................................................ 4 Supported Screen Resolutions - TPI-PRO-DVI ................................................................. 5 Video Capabilities for Modero Panels ............................................................................. 5 Video Capabilities for Enhanced Modero Panels ............................................................ 5 Intercom Capabilities for Modero Panels ........................................................................ 5 AMX Touch Panels that Support Dynamo Resource Images ........................................... 6

True Type Font Support............................................................................................ 6 Supported Image File Types ..................................................................................... 6 Related Software Applications.................................................................................. 6
NetLinx Studio ................................................................................................................ 6 AMX WebUpdate ............................................................................................................ 7 G4 PanelBuilder .............................................................................................................. 7 G4 PanelPreview ............................................................................................................. 7

The TPDesign4 Work Area .................................................................................9
Overview .................................................................................................................. 9 Design View Windows ............................................................................................ 10
Design View Window tab controls ................................................................................ 11 Using the Zoom Controls .............................................................................................. 11 Magnifier Window......................................................................................................... 12

Workspace Window ................................................................................................ 12
Workspace Navigator - Pages Tab ................................................................................ 13 Workspace Window- Function Maps Tab ...................................................................... 14

Properties Window ................................................................................................. 14
Properties Control - General Tab .................................................................................. 15 Properties Control - Programming Tab ......................................................................... 16 Properties Control - States Tab..................................................................................... 17

TPDesign4 (v2.11 or higher)

i

Table of Contents

Using the Apply To All option ....................................................................................... 18 Using the Prev and Next buttons .................................................................................. 18

State Manager window........................................................................................... 19
State Manager Drag-and-Drop Menu ............................................................................ 20

Transfer Status Window.......................................................................................... 20 Status Bar ............................................................................................................... 21 Button Preview Window ......................................................................................... 22 Print Preview Window ............................................................................................ 23 Working With Dockable Windows .......................................................................... 23
Moving, Docking and Resizing Dockable Windows ....................................................... 23 Toggling the Windows .................................................................................................. 23

Using the New Project Wizard ..........................................................................25
Overview ................................................................................................................ 25 New Project Wizard dialogs.................................................................................... 26
New Project Wizard - Step 1 dialog .............................................................................. 26 New Project Wizard - Step Two dialog.......................................................................... 27 New Project Wizard - Final Step dialog......................................................................... 28

TPD4 Project Files (*.TP4) .................................................................................29
Overview ................................................................................................................ 29 Inappropriate File Name Characters ....................................................................... 29 Creating a New Project........................................................................................... 29 System-Generated Project File Names ................................................................... 30 Edit Focus ............................................................................................................... 31 Quick Input ............................................................................................................. 31 Undo/Redo ............................................................................................................. 32 Cutting, Copying and Pasting ................................................................................. 32 Using the Selection Tool ......................................................................................... 33 Working With Video Fills ........................................................................................ 33 Drag and Drop Support .......................................................................................... 34 Using G4 PanelPreview ........................................................................................... 34 Setting Project Properties ...................................................................................... 34
Project Properties dialog - Project Information tab....................................................... 35 Project Properties dialog - Panel Setup Information tab ............................................... 37 Project Properties dialog - Sensors tab ......................................................................... 38 Project Properties dialog - IR Emitters and Receivers tab ............................................. 39

Applying Password Protection to Your Project File ................................................ 40 Setting a Power Up Page........................................................................................ 41 Setting Power Up Popup Pages.............................................................................. 41

ii

TPDesign4 (v2.11 or higher)

Table of Contents

Setting an Inactive Page Flip .................................................................................. 42 Using the Workspace Window ................................................................................ 43
Workspace Window - Pages Tab ................................................................................... 43 Workspace Window- Function Maps Tab ...................................................................... 44 Opening Pages/Popup Pages Via the Workspace Window ........................................... 44

Using the Properties Window ................................................................................. 45
Properties Window - General Tab ................................................................................. 45 Properties Control - Programming Tab ......................................................................... 46 Properties Control - States Tab..................................................................................... 46

Working With Multiple Projects .............................................................................. 46
Opening Multiple Projects Simultaneously.................................................................... 46 Copying/Pasting Across Projects................................................................................... 46

Project Migration (From Previous Versions of TPDesign4)...................................... 47
Converting TPD3 files to TPD4 ..................................................................................... 47

R-4 Remote Controller Projects .............................................................................. 48
Creating a TPD4 Project for R-4 Remote Controllers .................................................... 48 R-4 Remote Devices - Unsupported Button Types ........................................................ 49

R-4 Setup Codes ..................................................................................................... 49
Levels: .......................................................................................................................... 49 Addresses ..................................................................................................................... 49 External Button Options ............................................................................................... 50 R-4 External Buttons - Default Channel Codes .............................................................. 50

Working With The Resource Manager ..............................................................51
Overview ................................................................................................................ 51 Working With Images ............................................................................................. 53
Resource Manager dialog - Images tab ......................................................................... 53 Static Image Files .......................................................................................................... 53 Supported Image File Types ......................................................................................... 54 Importing Image Files Into Your Project ....................................................................... 54

Working With Dynamic Images............................................................................... 56
Resource Manager dialog - Dynamic Images tab .......................................................... 56 Dynamic Images ............................................................................................................ 57 Adding Dynamic Image Files To Your Project ............................................................... 57 Dynamic Image Example - Adding a Dynamic Image .................................................... 58

DynaMo™ Dynamic Images .................................................................................... 60
Creating a DynaMo Image ............................................................................................ 60 Adding an Dynamo Resource Image to the Resource Manager .................................... 61 Scaling and Cropping of Dynamo Resource Images ...................................................... 62 Copy/Paste Operations on Dynamo Resource Images .................................................. 62

TPDesign4 (v2.11 or higher)

iii

Table of Contents

Cameras and Servers With M-JPEG Streaming Output........................................... 63
Network Path Information............................................................................................. 63 Dynamic Image Settings - Example 1: Axis.................................................................... 64 Dynamic Image Settings - Example 2: Panasonic .......................................................... 64 Dynamic Image Settings - Example 3: Vivotek ............................................................. 65 Working With Trendnet IP Cameras .............................................................................. 65 DynaMo Dynamic Image Example - Adding a Streaming Webcam Image..................... 65

Working With Slots ................................................................................................. 68
Resource Manager dialog - Slots tab............................................................................. 68 Assigning Images and Sounds to Slot Positions ............................................................ 69

Working With Icons................................................................................................. 70
Bitmaps vs. Icons ........................................................................................................... 70

Working With Sounds ............................................................................................. 71
Resource Manager dialog - Sounds tab......................................................................... 71 Supported Sound File Types ......................................................................................... 72 Importing Sound Files To Your Project.......................................................................... 72

Exporting Image and Sound Files From Your Project To a Specified Directory ...... 72 Editing Image and Sound Files Using External Programs ....................................... 73
Editing Image Files ........................................................................................................ 73 Editing Sound Files........................................................................................................ 73

Working With Pages .........................................................................................75
Overview ................................................................................................................ 75 Creating a New Page .............................................................................................. 75 Setting Page Properties.......................................................................................... 76
Setting General Properties: Pages ................................................................................ 76 Setting Programming Properties: Pages ....................................................................... 76 Setting States Properties: Pages ................................................................................... 76

Renaming a Page .................................................................................................... 77 Adding a Fill Color to a Page.................................................................................. 77 Adding a Bitmap to a Page..................................................................................... 78 Adding an Icon to a Page ....................................................................................... 79 Adding Text to a Page............................................................................................ 79 Displaying a Video Source on a Page ..................................................................... 81 Copying/Pasting Pages ........................................................................................... 81
Copying Pages .............................................................................................................. 81 Pasting Pages ................................................................................................................ 81

Deleting Pages From a Project ............................................................................... 81 Exporting Pages as Image Files .............................................................................. 82 Printing Pages......................................................................................................... 83

iv

TPDesign4 (v2.11 or higher)

.......................................................................... 106 Displaying a Video Source on a Button.................. 104 Working With Transparent Backgrounds.......................................................................... 88 Setting General Properties: Popup Pages.......................... 85 Creating a Popup Page.................... 95 Working With Buttons .................................................................................................. 103 Adding an Icon to a Button.......................... 93 Creating Popup Page Groups .......................................................................................................................................................................... 100 Adding Text to a Button ..................................................................... 87 Setting Popup Page Properties ......................................... 90 Adding a Bitmap to a Popup Page .................................................................... 107 Page Flips .............................................. 90 Renaming a Popup Page......................... 89 Drawing Assist Support for Popup Pages .......................... 100 Specifying a Button Border......................................................................................................................................................................................................................................................................................................11 or higher) v ..................... 91 Adding Text to a Popup Page ......................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................... 97 Button Draw Tools ........... 97 Drawing a Button.......................................................... 91 Adding an Icon to a Popup Page .......85 Overview ............. 100 Foreign Language Support for Text .......................... 98 Generated Button Names ...........................97 Overview ........................ 85 Using the Popup Draw Tool............................................................................................................... 107 Adding Text Effects .......Table of Contents Working With Popup Pages .......... 94 Pasting Popup Pages..................................................................................................................................... 99 Specifying the Button Type ......................................................................... 88 Setting Programming Properties: Popup Pages............................................................................................ 102 Changing the Button Fill Color......................................................... 94 Copying Popup Pages .............................................................................................................................................................................................................................................................. 90 Adding a Fill Color To a Popup Page........................................................................................................................................................................................................................ 101 Adding a Fill Color To a Button ....................... 89 Setting States Properties: Popup Pages .......................................... 94 Show/Hide Popup Pages ........................................ 102 Adding a Bitmap to a Button . 107 TPDesign4 (v2....... 93 Copying/Pasting Popup Pages................................................................................................. 94 Deleting Popup Pages From a Project ........................................... 92 Displaying a Video Source on a Popup Page ........................................................................................................................

.................... 113 Setting Properties: Multi-State General Buttons ......................... 129 Previewing a Button ................................................. 123 Input Mask Ranges ......................... 124 TakeNote Buttons........................................... 128 Using the Alignment & Sizing dialog ................... 126 Using the Drawing Assist Features ................................................................................................................................................................................................................................................................................................ 121 Setting Properties: Joystick Buttons .................... 118 Working With Touch Maps ............................................................................................................. 122 Input Mask Characters........ 112 Multi-State General Buttons ..................................................................................................................................................................... 110 Pasting Buttons ................................................................................................................................................................................................................................................................... 127 Position Assist toolbar................................................................................. 115 Multi-State Bargraph Buttons ............. 117 Creating a Custom Slider .... 111 General Buttons ........................................................................ 127 Size Assist toolbar ...................................................................... 110 Copying Buttons........... 108 Drag & Drop To Set Page Flips ........ 131 vi TPDesign4 (v2............................................. 125 Setting Default New Button Parameters ........................................................................................................................................................... 124 Setting Properties: Computer Control Buttons ............................................................................................................................................................. 114 Bargraph Buttons........................................................ 116 Slider Types............................................................................................................................................................................................ 113 Level Control Parameters .................................................................... 111 Editing Multiple Selections.............................................................................................................................................. 117 Formatting Codes .............................................................................................................. 109 Copying/Pasting Buttons .......................................................................................................................................................................... 125 Setting Properties: TakeNote Buttons ..................................................................................................... 121 Text Input Buttons ..Table of Contents Creating a Page Flip .................................................. 123 Computer Control Buttons ....................................11 or higher) .................................................................................................. 116 Setting Properties: Multi-State Bargraph Buttons...................................... 123 Input Mask Next Field Characters ................. 109 Page Flip Actions.......................................... 120 Joystick Buttons.................................................................................................. 110 Editing Button Properties ................................................... 112 Setting Properties: General Buttons ............................ 127 Order Assist toolbar ............................................................................................................................................................................................................................................................................................... 123 Input Mask Operators .................................................................... 130 Creating a Date Button...............................................................................................................................................

........ 141 Creating List Box Buttons (Managed Mode) .... 137 Setting Page-Specific General Properties: External Pushbuttons....... 142 Adding Columns.......................................................................................................................................................................................................Subordinate Buttons ........................... 151 Creating List Box Buttons (Unmanaged Mode) .......................139 Overview ....................................................................................................................................................................................................... 141 Adding Rows ........ 149 List Box Buttons: Unmanaged Mode ..............Resizing.. 148 Setting List Box Button Column Properties............................................... 153 List Box Buttons ..........Container Button.......................................... 143 Cutting......................................................... 136 Setting Global Properties for External LEDs ............................................... 148 List Box Buttons ............................................................................................................................................... 144 List Box Buttons ....................... 145 Setting List Box Container Button Properties .................................................... 152 List Box Buttons ........................................................................................................................................ 144 List Box Container Properties vs............................................. 138 Working With List Box Buttons ..... 145 Setting Properties: List Box Container Buttons.Z-Order ................................Drag and Drop Capability.................................................................................................................................................................................... 150 Rules for Unmanaged List Box Buttons . 135 Copying/Converting External Controls Between Panels ..................................................................................................................................................... 136 Setting Global Properties for External Pushbuttons .....................................................11 or higher) vii ............................................................................................... Column Properties..... 143 Deleting Rows ........................................................................................... 136 Page-Specific Properties for External Pushbuttons/LEDs ............................................................................................ 139 G4 Devices That Support List Box Buttons ............... 148 Setting Properties: List Box Columns ................................ 143 Deleting Columns............ 154 Using the Drawing Toolbar With List Box Buttons ............................... 147 Subordinate Button Placement ................................................................................ 137 Setting Page-Specific General Properties: External LEDs ............................ Copying and Pasting a List Box ...... 154 TPDesign4 (v2............................................................. 135 Global Properties for External Pushbuttons/LEDs ................... 140 List Box Toolbar.................................................................................................................................................................................. 140 List Box Buttons: Managed / Unmanaged Mode ........... 135 External Button Options .................135 Overview ..............................................................................................................Table of Contents Creating a Time Button...Columns.............................................................................................. 132 Working With External Controls .............................. 140 List Box Buttons: Managed Mode.................................... 147 Subordinate Buttons ........................................ 146 List Box Buttons ..............................................................................................................................................................................................................

.............................. 171 Changing Port and Address Assignments for a List Data Table ......................................................... 179 Border Style ............................................................................................................................................... 163 Deleting a List Data Table ....... 180 Compression......................... 179 Auto-Repeat .......... 175 Using the Apply To All option .................................. 179 Column Display Order ...........................................................................................................................Channel Code Values ......................................................... 164 Data List Command Rules....................................................................................................................................... 180 Cursor Name ............. 175 Drag and Drop Support ..................................................................................................... 157 Navigation Buttons ................................................................................................................................................................................................................................ 179 Column Sort Order .................................................................................................................. 180 Cursor Color ................................................ 159 Attaching a List Data Table to a List Box Button...................................................................................... 176 Using the Prev and Next buttons ................................................................................................ 159 Static List Box Data ......................................................... 172 Working With Properties ............................................................................................................................................................................................................................................... 154 Creating List Box Navigation Buttons .................. 180 viii TPDesign4 (v2..................................................................................... 176 Working With The Property Painter........................................................................................................ 179 Animate Time Down .............................................. 156 Creating a List Box Feedback Scroll Bar...................................................... 158 List Data Table ....................Table of Contents List Box Buttons ........................................... 164 Creating a Dynamic List Data Table ..175 Overview ...........................................................11 or higher) ................. 160 Creating a Static List Data Table..................................................................... 178 General Properties...................................................................................................................................... 160 Attaching a Static List Data Table to a List Box Button ............................................................................. 166 Command Structure List View ................................................................................................................................................................................... 167 Dynamic List box Table Example ..................................................................................................................................................... 179 Above Popups ................................................................................................................... 179 Color Depth........ 169 Attaching a Dynamic List Data Table to a List Box Button .................. 157 Scroll Bar Components ..........................................................................................Navigation Buttons ........................................................................................................................................................................................................................................ 159 Dynamic List Box Data............................................... 177 Saving a Properties Set .................................................................................................................................................. 155 Creating a List Box Navigation Scroll Bar.... 179 Animate Time Up............................................................................ 164 Data List Commands ................................................................................... 158 List Data Table Properties .........................

................ 185 Password Protection .................................................................................. 185 Name. 181 Input Mask ............................................................................... 183 List Preferred Row .................................. 184 Lock Button Name.... 184 List Row Padding................................................... 185 Password ................................................. 182 List Table Port .................................................................................................................................................................................................................................................................... 180 Display Type....................................................................................................... 183 List Offset Enabled......................................................................................................................................................................................................................................................................................................... 185 Page Flip ..............................................................................................................................................................Table of Contents Description.............................................................................................................................................................................................................................11 or higher) ix ................................................. 182 List Column Padding ............. 185 Reset Pos..................................................................................................................... 183 List Filter Column ...................................... 181 Hidden ............................... 183 List Managed............................................................................................................................................................................................................ 181 Hide Effect ............... 180 Disabled ......................................................... 186 Show Effect Time ..................... 184 List Row Height ..................................................................................................................................... 186 Show Effect .................................................................... 186 Scale To Fit.................................................................................................................... 180 Group ........................................................ 181 Left...... 185 Modal ................................................................................................................. 184 List Row................................... On Show ......................................................................................................................... 185 Max Text Length .............................. 183 List Table Wrap .................... 181 Hide Effect X/Y Pos................................................................................................................................................................................................ 182 List Column ................................................................................................................................................................................................................................................................................................................................................................................................................................. 185 Remote Host .............................................. 186 TPDesign4 (v2........................................... 184 List Selectable .............................................................................. 185 Password Character ................... 180 Height .................................................................................................................................................. 185 Remote Port.................................................................................................................................................................................................................................................................................................................. 181 Hide Effect Time ...................................... 184 List Preferred Row Height................................................................................................................................................................................................. 182 List Display ................................................................................................................................................................................................................................................. 182 List Table Address........................................................................................

...................................................................................................................................................... 187 Top ........................ 187 TakeNote Host ....................................................................................................................... 191 Range Time Up ........................... 189 Address Code........................................................................................................ 187 Touch Style................................................................................. 191 String Output ................................................................................................................................................................. 190 Level Function ........................................................................................... 189 Address Port .......................... 190 Level Control Repeat Time ..Table of Contents Show Effect X/Y Pos................ 188 Value Direction........ 191 Range Time Down ................................................... 186 Slider Color ................. 190 Range Aux Inverted................ 189 Channel Port............................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................... 189 Command Port ................................................................................................................................................................................................................................................................................................................................................................................................................................................. 189 Level Aux.......................... 190 Range Drag Increment ...................... 191 String Output Port ............................................................. 190 Level Control Value ......................................... 186 State Count ..11 or higher) ................................................................................................................................................................................................................................................................. 191 Range Inverted .................................................................................................................................................................................................................................................................................................................. 192 x TPDesign4 (v2................................................................................................................................................................................................................................................................................................................................ 190 Level Control Type .............. 191 State Properties......................................................................................................... 187 TakeNote Port................................................................................................................................................................................................... 187 Type ................................................................. 187 Touch Map..................................... 189 Feedback.......................................................................................................... 189 Channel Code ................................................................................ 188 Programing Properties........ 189 Command Output .................................................................................................................................................................................................................................... 188 Width.......................................................................... 191 Range Low....................................................................................................................... 190 Level Port .............................................................................................. 192 Bitmap.......................... 187 Timeout ...................................................................................................................................................... 189 Level Code .................................................................... 186 TakeNote Enabled..................................................................................................... 191 Range High........ 186 Slider Name............................................

................................................................................................................................................................................................................................................ 192 Chameleon Image ................................................................................................................. 196 Video Cropping.................. 192 Border Color ..................... 193 Icon Justification ........................................ 194 Overall Opacity ................................................................................................................ 196 Searching For Button Properties .......................................................................................... 192 Bitmap Y Offset.....................................................201 Overview ........................................................................................................................................................................................................................................................................................................................................................................................................................................................... 203 TPDesign4 (v2..................................................................................... 201 State Manager Window ..... 195 Streaming Source .......................................................................................................................................................................................................................................................................................... 192 Bitmap X Offset ............................................................................................................................................................Table of Contents Bitmap Justification..................................................................................................................................................................................................................................... 194 Marquee Repeat ........... 193 Marquee Direction .................................................................................................... 193 Fill Color..................... 196 Video Fill .................................................................................. 195 Text Justification .......................... 195 Text X Offset........................................... 195 Text Effect..................................................................................................................................................................... 196 Word Wrap.............................................................................................................................................................................................................. 201 State Manager Context Menu ........................................................................................................................ 195 Text Color .............................................................................................................................. 193 Font................................................................................................ 201 Adding States To a Button ........................................................................................................................................ 202 Adding States From the Clipboard . 192 Border Name............................. 194 Scale Bitmap To Fit .............................................................................................. 198 Working With States ............................................................... 192 Draw Order ......... 196 Video Touch Pass-Thru ...............................................................................................................................................................................................................................................................................................................11 or higher) xi ................................................................................. 193 Icon X Offset ........................................................... 195 Text Effect Color ........... 196 Using the All States Option ...................................... 197 Searching and Replacing Button Properties ............ 195 Text ................................................................................................... 202 Duplicating an Existing State on the Button ...................................................................... 193 Icon Y Offset ......................................................................................................... 195 Text Y Offset..................................................... 194 Sound ..................................... 193 Icon Slot ..........................

....................................................213 Working With Colors...... 205 Copying a State to the Clipboard............. 208 Function Code Map ...... 205 Pasting a State from the Clipboard ........................................................ 207 Show/Hide Function Codes............................................. 205 Copying/Pasting States From a Page...................................................Setup Port............................................................................................................................................................. 216 Renaming Palettes....................................................................................................................................................................................................................11 or higher) ............................................ 205 Changing the Order Of States On A Button ................................... 209 Using Power Assign ........................................................................................................................................................... 208 0................................................................................................................................................................................................................................................................................................................................................................................................................................................Limitations..................................................................... 210 Begin Assignment At (Power Assign) .......................................... 206 Working With Function Codes ...................... 205 Draw Order (Z-Order) ................................................... 210 Clear Channels First................................. 204 Removing States From A Button....................................... 205 Reordering States Through the Clipboard ................................................................................................... 218 xii TPDesign4 (v2.................................................. 211 Working With Colors and Palettes ......................................................... 211 Wrap Within Port ID (Power Assign)..................................................... 213 Working With Palettes ....................................................Table of Contents Drag & Drop To Add States ................ 203 Setting the Maximum Active State For a Button .............................................................................................................................................................................................................................................................................. 204 Deleting States......................................... 216 Changing the Active Palette.. 217 Using Custom Palettes to Enable Color Schemes in G4 PanelBuilder ............................................................................................................................... 211 Ensure Contiguous Code Assignment (Power Assign) .............................................................. 217 Copying Palettes ......... 215 Working With Multiple Color Palettes................... 210 Assign Codes.................................................... 217 Importing Palette Files ................... Popup Page or Button ............... 215 Creating Custom Palettes...................................207 Overview ......................................................... 208 Function Codes ............................................................................................ 217 Copying Palette Entries...... 206 Changing the Draw Order for Selected States...................................................................................................................... 205 Reordering States Through Drag-and-Drop ............................................................... 215 Creating New Palette Entries ................................................................................... 217 Exporting Palette Files .................................... 218 Using the Microsoft® Paint Utility Program........................................ 204 Cutting States To the Clipboard......................................................................................................................................................

............................... 220 Displaying a Video Source on a Button .................................. 229 Working With Chameleon Images .............................. 224 Animation Wizard ...... 238 Sending a Panel File To a NetLinx Master............................... 225 Creating Color Transition Effects ..223 Overview .. 227 Creating Animated Text Effects ......................................................................................................................................Size & Position (Step 3 of 6) ................................................................................................................ 235 Connecting to a NetLinx Master via Serial Port ................ Custom Palettes and G4 PanelBuilder.......................................................................................................................................................................Example ................................................................. 236 Connecting to a NetLinx Master via Modem.......................................... 237 Transferring Touch Panel Files to/from a NetLinx Master........................................................................................................................................................................................ 219 Displaying a Video Source on a Popup Page ................................ 233 Secure NetLinx Connections ........................Appearance (Step 5 of 6) ....................... 235 Connecting to a NetLinx Master .......................................................... 234 Saving and Recalling Communication Configurations . 223 Animation Wizard .................................................................................................................... 223 Using the Animation Wizard ........................................... 228 Chameleon Images ..........................................................................................................219 Overview ...................... 230 Chameleon Images.................................................. 238 Panel File Transfers via TCP/IP ..........................Assign Frames (Step 4 of 6) .............. 238 TPDesign4 (v2..................................................................... 225 Animation Wizard ..................................... 229 Requirements for Chameleon Images ..................................... 233 Working With Communications Configurations ..........................................................................233 Overview ............................................................................................................ 225 Tweening ....................................................................................................................................................... 224 Animation Wizard ............. 231 File Transfer Operations ...............................11 or higher) xiii ............................................... 238 Receiving a Panel File From a NetLinx Master ... 230 Working With Chameleon Images ................................................................................................................. 234 Editing the Settings on an Existing Communication Configuration......................................................................................................................Finish (Step 6 of 6) ...........................Select Type (Step 1 of 6)............................................................... 223 Animation Wizard ................ 223 Animation Wizard ................................................................................. 226 Creating Animated Bitmap Effects........................................... 219 Displaying a Video Source on a Page......................................................................................................................Create Sequence (Step 2 of 6) .......................... 228 Tweeners sub-menu ................................. 219 Streaming Video Fills ........................................... 220 Working With Animation Effects ............................................................................................... 235 Connecting to a NetLinx Master via TCP/IP ..........................................................................Table of Contents Working With Video Fills .....................................

Table of Contents

Panel File Transfers via Serial Port .............................................................................. 239 Panel File Transfers via Modem................................................................................... 240 Transfer Options ......................................................................................................... 241

Virtual NetLinx Master TCP/IP Transfers............................................................... 241
Configuring the Touch Panel for Virtual NetLinx Master TCP/IP Transfers.................. 241 Configuring TPD4 for Virtual NetLinx Master TCP/IP Transfers .................................. 242 Powering Up and Connecting the Panel (via TCP/IP)................................................... 242

Transferring Files Using a Virtual NetLinx Master TCP/IP Connection .................. 242
Sending Files To the Panel .......................................................................................... 242 Receiving Files From The Panel ................................................................................... 243

Virtual NetLinx Master USB Transfers................................................................... 243
Installing the AMX USB Driver for G4 Touch Panels.................................................... 243 Configuring the Touch Panel for Virtual NetLinx Master USB Transfers...................... 243 Configuring TPD4 for Virtual NetLinx Master USB Transfers ...................................... 244 Powering Up and Connecting the Panel (via USB)....................................................... 244

Transferring Files Using a Virtual NetLinx Master USB Connection ...................... 244
Sending Files To the Panel .......................................................................................... 244 Receiving Files From The Panel ................................................................................... 244

MVP-5200i USB Driver .......................................................................................... 245

Working With Templates ................................................................................247
Importing Template (*.VAT or *.TPT) Files ............................................................ 247 Working With the System Page Template ............................................................ 247
Copying/Pasting Entire System Pages into a Project .................................................. 248 Copying/Pasting System Page Elements into a Project page ...................................... 249 Working with System Page Keyboards and Keypads .................................................. 249 System Page Template Reference ............................................................................... 250 System Page Template Popup Pages .......................................................................... 251

Exporting Your Project as a G4 PanelBuilder Template........................................ 252 G4 PanelBuilder Templates - Required Template Elements.................................. 254
Navigation Elements ................................................................................................... 254 Placeholder Elements .................................................................................................. 255

G4 PanelBuilder Templates - Optional Template Elements .................................. 256
Mode Elements ........................................................................................................... 256 Sub-Navigation Elements ............................................................................................ 257 Splash Elements .......................................................................................................... 257 Device Elements .......................................................................................................... 258 Feature Elements ........................................................................................................ 258 Sub-Feature Elements ................................................................................................. 259

xiv

TPDesign4 (v2.11 or higher)

Table of Contents

Rules for Navigating a G4 PanelBuilder Template ................................................ 259 G4 PanelBuilder Templates - Template Wide Conventions................................... 260 G4 PanelBuilder Templates - AMX Naming Conventions...................................... 261 Exporting Your Project as a VisualArchitect Template.......................................... 262
VA Templates - Navigations as Pages ......................................................................... 262 VA Templates - Logical Page Scroll Bar Elements ....................................................... 262 VA Templates - Logical Page Info Element.................................................................. 263 VA Templates - Logical Page Up and Down Elements ................................................ 263 VA Templates - List Box Page Up and Down Elements ............................................... 263

Program Preferences ......................................................................................265
Overview .............................................................................................................. 265 Preferences Dialog - Application tab .................................................................... 265
Startup ........................................................................................................................ 265 Miscellaneous .............................................................................................................. 266 Warning Messages ...................................................................................................... 266

Preferences Dialog - Appearance tab ................................................................... 267
Window ....................................................................................................................... 267 Grid ............................................................................................................................. 268 Transparency ............................................................................................................... 268

Preferences Dialog - Directories tab..................................................................... 269
Default Directories ...................................................................................................... 269

Preferences Dialog - Editor Selection tab ............................................................. 270 Preferences Dialog - Undo/Redo tab .................................................................... 271
Undo / Redo Support .................................................................................................. 271

Adding an External Editing Program for Image Files............................................ 272 Adding an External Editing Program for Sound Files ........................................... 272 Changing the Default External Image or Sound Editor Program .......................... 273 Customizing the Menus and Toolbars................................................................... 274 Customizing the Toolbars ..................................................................................... 274
Adding Buttons To Existing Toolbars.......................................................................... 274 Removing Buttons From Existing Toolbars ................................................................. 275 Associating an Icon With a New Command................................................................. 275 Creating a New Custom Toolbar ................................................................................. 276 Renaming Custom Toolbars ........................................................................................ 276 Deleting Custom Toolbars........................................................................................... 277

Customizing the Menus ........................................................................................ 277
Adding Commands To Existing Menus........................................................................ 277 Removing Commands From Existing Menus ............................................................... 277 Creating a New Custom Menu .................................................................................... 278

TPDesign4 (v2.11 or higher)

xv

Table of Contents

Adding a Shortcut To an Application In the Tools Menu ...................................... 279 Hotkeys (Keyboard Accelerators) ......................................................................... 280
Setting Custom Hotkeys.............................................................................................. 280

xvi

TPDesign4 (v2.11 or higher)

TPDesign4 (v2.11 or higher)

TPDesign4 (v2.11 or higher)
Overview
The TPDesign4 (or "TPD4") Touch Panel Design program is designed to assist you in creating a state-of-theart touch panel interface for AMX's G4 Level touch panels (including the Modero line, MIO-R4 remote controllers, and the NXP-TPI/4 Touch Panel Interface). Use TPD4 to create Project Files (*.TP4) containing all of the information required to define a user-interface to be utilized on a G4 touch panel. This includes Pages, Popup Pages and associated navigation/page-flip information, as well as buttons (including function code information), and all image and sound-related files that are used in the design (including dynamic images and video feeds).

What's New in Version 2.11
Support for Dynamo Resource Images on the following panel-types: NXD-1000Vi MVP-8400i MVP-8400 MVP-5200i NXD-700Vi NXD-500i

Supported Windows Platforms and PC Requirements
Supported Operating Systems
Windows 2000® (service pack 4 or greater) Windows XP® Professional (service pack 2 or greater) Windows Vista-Business You must have Power User (or Administrator) rights to install and run all required System files.

Supported Operating System Languages
Windows XP® Professional / Windows 2000®: • English (US) • French • German • Spanish Windows Vista-Business®: • Chinese (Classic, HK) • French • Japanese • Spanish • English • Chinese (Simplified, PRC) • Arabic • German • Turkish • Greek • Italian • Portuguese • Flemish (Dutch) • Russian • Turkish

TPDesign4 (v2.11 or higher)

1

TPDesign4 (v2.11 or higher)

PC Requirements/Recommendations
Pentium III 750MHZ processor (minimum requirement); 1.5GHz or faster recommended. 700 MB of free disk space (minimum requirement) 512 MB of RAM (minimum - SQL Server 2005 Express Edition requires 512MB) Minimum (VGA) screen resolution of 800x600. Windows-compatible mouse (or other pointing device). If the mouse wheel on your Microsoft® IntelliMouse® doesn't work with VA, try downloading the latest IntelliMouse drivers from Microsoft.

Supported Touch Panels/Screen Resolutions
Supported Panel Types
TPDesign4 (v2.11 or higher) supports the following AMX (G4) touch panel types: Supported Panel Types
Name MVP-5100 MVP-5150 MVP-5200i MVP-7500 MVP-8400 MVP-8400i NXD-430 NXD-435 NXD-CV5 NXD-500i NXD/NXT-CV7 NXD-700vi NXD/NXT-CV10 NXT-CV10/PB NXD-1000vi NXD/NXT-CA12 NXD/NXT-CV12 NXD/NXT-1200V Description 5.2" Modero® ViewPoint® IR Touch Panel 5.2" Modero® ViewPoint® Wi-Fi Touch Panel 5.2" Modero® ViewPoint® Touch Panel with Intercom 7.5" Modero® ViewPoint® Touch Panel 8.4" Modero® ViewPoint® Touch Panel 8.4" Modero® ViewPoint® Touch Panel with Intercom 4.3" Modero Wall/Flush Mount Touch Panel 4.3" Modero Wall/Flush Mount Touch Panel 5" Modero® Wall/Flush Mount Touch Panel 5" Modero® Wall/Flush Mount Touch Panel 7" Modero Wall/Flush Mount & Table Top Touch Panels 7" Modero® Wall/Flush Mount Touch Panel with Intercom 10" Modero Wall/Flush Mount & Table Top Touch Panels 10" Modero Table Top Touch Panel with Pushbuttons 10" Modero® Wall/Flush Mount Touch Panel with Intercom 12" Flush Mount & Table Top Touch Panels 12" Flush Mount & Table Top Video Touch Panels 12" Modero® Video Wall/Flush Mount & Table Top Touch Panels FG#(s) (FG5966-08) (FG5966-07) (FG5966-01) (FG5965-01) (FG5965-05) (FG5965-04) (FG2262-01) (FG2262-03) (FG2261-01) (FG2261-02) (FG2258-02K, FG2258-01K) (FG2258-04K) (FG2259-02K, FG2259-01K) (FG2259-03K) (FG2259-04K) (FG2251-10, FG2250) (FG2251-12K, FG2250-11K) (FG2251-60K, FG2250-60K) (FG225161RGB, FG2250-61V)

NXD/NXT-1200VG 12" Modero® VG Series Wall/Flush Mount & Table Top Touch Panels with RGB

2

TPDesign4 (v2.11 or higher)

TPDesign4 (v2.11 or higher)

Supported Panel Types (Cont.)
Name NXD/NXT-CA15 NXD/NXT-CV15 Description 15" Flush Mount & Table Top Touch Panels 15" Flush Mount & Table Top Video Touch Panels FG#(s) (FG2253-10, FG2252) (FG2253-12K, FG2252-11K) (FG2253-61V, FG2252-61V) (FG2256K, FG2257K) (FG2256-61V, FG2257-61V) (FG630-100) (FG2275-01) (FG2275-102, FG2275-104) (FG2275-112, FG2275-114) (FG148-04)

NXD/NXT-1500VG 15" Modero VG Series Wall/Flush Mount & Table Top Touch Panels NXD/NXT-CV17 17" Flush Mount & Table Top Color Video Touch Panels

NXD/NXT-1700VG 17" Modero VG Series Wall/Flush Mount & Table Top Touch Panels NXP-PLV NXP-TPI/4 TPI-PRO TPI-PRO-DVI R-4 Modero PosiTrack Pilot Camera Controller NetLinx® Touch Panel Interface Total Presentation Interface, 2/4 Source Input Total Presentation Interface with DVI, 2/4 Source Input Mio R-4 Remote

The prefix " NXT" indicates the table-top (tilt) model, and "NXD" represents the wallmount version.

Supported Screen Resolutions
While most touch panels support a single screen resolution, the NXI-TPI/4, TPI-PRO, TPI-PRO-DVI and NXV-300 support multiple resolutions, selectable in the New Project Wizard - Step 1 dialog. The screen resolution setting for these panel devices can be changed later via the Screen Size option in the Save As Different Panel Type dialog. Supported Panel Types Per Resolutions
Resolution 640x480 720x480 CEA 720x576 CEA 800x480 • MVP-7500 • NXP-TPI4 • TPI-PRO-DVI • TPI-PRO-DVI • MVP-5150 • MVP-5200i • CV5 • MVP-8400i • MVP-8400 800x600 • 1200V • 1200VG • 1500VG 1024x768 • CV15 • CA15 • CV7 • CV10 • CV10/PB • CA12 • CV12 • NXP-TPI4 • TPI-PRO • TPI-PRO-DVI • NXP-TPI4 • TPI-PRO • TPI-PRO-DVI Panel Type • TPI-PRO • TPI-PRO-DVI

TPDesign4 (v2.11 or higher)

3

TPDesign4 (v2.TPI-PRO TPDesign4 supports 24-bit RGB color at the following screen resolutions for the TPI-PRO (Total Presentation Interface .11 or higher) . Supported Screen Resolutions .) Resolution 1280x720 VESA/CEA 1280x768 • TPI-PRO-DVI • 1700VG • CV17 • NXP-TPI4 1280x1024 • TPI-PRO • TPI-PRO-DVI 1360x768 1440x900 1600x1200 1680x1050 1920x1080 1920x1080 VESA/CEA 1920x1200 • TPI-PRO • TPI-PRO-DVI • TPI-PRO • TPI-PRO-DVI • TPI-PRO • TPI-PRO-DVI • TPI-PRO • TPI-PRO-DVI • TPI-PRO • TPI-PRO-DVI • TPI-PRO • TPI-PRO-DVI • TPI-PRO • TPI-PRO-DVI Panel Type TPD4 provides scrolling if a Design View is larger than the available visible work area.11 or higher) Supported Panel Types Per Resolutions (Cont.NXI-TPI/4 TPDesign4 supports 24-bit RGB color at the following screen resolutions for the NXI-TPI/4 (NetLinx Touch Panel Interface 4): • 640x480 • 800x600 • 1024x768 • 1280x1024 Supported Screen Resolutions .Pro Edition (2/4 Source Input)): • 640x480 • 800x600 • 1024x768 • 1280x1024 • 1360x768 • 1440x900 • 1600x1200 • 1680x1050 • 1920x1080 • 1920x1200 4 TPDesign4 (v2.

it also supports Composite video (only).TPI-PRO-DVI TPDesign4 supports 24-bit RGB color at the following screen resolutions for the TPI-PRO (Total Presentation Interface PRO with DVI (2/4 Source Input)): • 640x480 • 720x480 CEA • 720x576 CEA • 800x600 • 1024x768 • 1280x720 VESA • 1280x720 CEA • 1280x768 • 1280x1024 • 1360x768 • 1440x900 • 1600x1200 • 1680x1050 • 1920x1080 VESA • 1920x1080 CEA • 1920x1200 Video Capabilities for Modero Panels Video Capable Modero Panels all support Composite video inputs.11 or higher) 5 . These include: NXT/NXD-1200V (Composite only) NXT/NXD-1200VG NXT/NXD-1500VG NXT/NXD-1700VG While the NXT/NXD-1200V panel is considered to be part of the enhanced Modero family of Panels. These include: NXT/NXD-CV7 NXD/NXT-CV10 NXD/NXT-CV10/PB NXT/NXD-CV12 NXT/NXD-CV15 NXT/NXD-CV17 Video Capabilities for Enhanced Modero Panels Video capable Enhanced Modero Panels all support Composite.11 or higher) Supported Screen Resolutions . Component/RGB and Streaming video inputs. Intercom Capabilities for Modero Panels Intercom-equipped Modero Panels support 2-way full-duplex intercom capabilities.TPDesign4 (v2. These panels include: MVP-5200i MVP-8400i NXD-1000vi NXD-700vi TPDesign4 (v2.

Unless you are actually using transparency.TPDesign4 (v2.11 or higher) AMX Touch Panels that Support Dynamo Resource Images The following list indicates the AMX Touch Panels that support Dynamo Resource Images (at the time of this TPDesign4 release). JPGs are recommended over PNGs. 6 TPDesign4 (v2. The TTF files listed represent those TTF files installed in Windows with their available point sizes. the PNG file must be saved with RGB colors. Fonts are presented in the Properties Control window (States tab). For the transparent color to be interpreted correctly by TPD4. See the Working With Transparent Backgrounds section on page 106 for details. NetLinx Studio is available for free download from www. as well as the Button Selection/Draw toolbar and the Add Page and Add Popup Page dialogs. only one accommodates transparency as a color: PNGs. since they are usually slightly smaller in size.amx.com. Related Software Applications The related AMX software applications described in the following sections are available to download from www. Refer to the NetLinx Studio online help and Instruction Manual for instructions.com: NetLinx Studio NetLinx Studio is a full featured Integrated Development Environment (IDE) for NetLinx and Axcess Control Systems.11 or higher) . This list will be updated as support for Dynamo Resource Images is added to new and existing panels: NXD-1000Vi MVP-8400i MVP-8400 MVP-5200i NXD-700Vi NXD-500i True Type Font Support Since G4 panels have the ability to decode and display Windows True Type Font files (TTF). Supported Image File Types TPD4 supports the following image file types: BMP (Windows bitmap) IFF (Interchange File Format) JPG (Joint Photographic Expert Group) PCT (Macintosh Pict) PCX (PC (Zsoft) Paintbrush) PNG (Portable Network Graphic) PSD (Photoshop) TGA (TrueVision Targa) WMF (Windows Meta File) EPS (Encapsulated Post Script) FPX (FlashPix) Notes: Of all the image file formats supported by TPD4.amx. TPD4 directly utilizes TTF files.

refer to the G4 PanelBuilder online help. For details on using G4 PanelBuilder to generate G4 PanelBuilder project files (*. launches the installation of those downloads. using either pre-fabricated templates from AMX. (including multi-state and bar graph buttons) via the mouse and keyboard on your PC. the File > New From G4 PanelBuilder option (available only if G4 PanelBuilder is installed) launches the G4 PanelBuilder application to allow you to create a new TPD4 project. G4 PanelPreview G4 PanelPreview is a stand-alone application (installed separately) from AMX that allows you to preview TPD4 projects for G4 touchpanels.TPT) or Visual Architect template file (*. To preview your panel project. and must be installed separately. Refer to the G4 PanelPreview online help file for details. allows a user to download the selected installation files. or user-designed templates. Note: The WebUpdate application is not installed by TPD4.PB4). returns a listing of available updates. For example. Although G4 PanelBuilder is installed separately. it is fully integrated with TPD4. allows a user to select from a list of available AMX Software programs to choose for updating.com. select Panel > Send To G4 PanelPreview (or click the toolbar button) to launch the G4 PanelPreview application. TPDesign4 (v2.11 or higher) 7 . Select Help > Web Update to launch this application. Click File > Import Touch Panel Template to import an existing PanelBuilder (*. and must be installed in order to activate this menu option. where you can preview the project and simulate push and release of buttons. and upon request.TPT).amx.TPDesign4 (v2. and to generally fine-tune the project as needed.com. Click File > Export G4 PanelBuilder Template to export the active TP4 project as a PanelBuilder Template file (*. The G4 PanelPreview application is available from www. Refer to the WebUpdate on-line help for details and instructions. TPD4 will prompt you to download the application from www.amx.11 or higher) AMX WebUpdate The AMX WebUpdate program is a stand-alone application that communicates with the AMX website. If not found. The G4 PanelBuilder application is designed to do the bulk of the basic layout and navigational design of a touch panel design. G4 PanelBuilder G4 PanelBuilder is a stand-alone application (installed separately) from AMX that allows you to quickly create TPD4 projects for G4 touchpanels. determines the latest version of the selected applications. Use the set of options in the File menu to access the key functions of the G4 PanelBuilder application: Click File > New From G4 Panel Builder to create a new TP4 panel project using G4 PanelBuilder.VAT) into TPD4 as a starting point for your panel design. TPD4 is required to complete the project by specifying channel mapping information.

TPDesign4 (v2.11 or higher) 8 TPDesign4 (v2.11 or higher) .

and their pages and popup pages. then it is displayed. Tools. a tab is displayed for each open page. Layout. Window. Transfer. Menu Bar . TPDesign4 (v2. If a toolbar has a check next to it in the sub-menu. 1 TPDesign4 Work Area In its default configuration. Note that a MDI tab is displayed for each opened page. Use the View > MDI Page Tabs option to toggle the page tabs. Click View. from top to bottom. Panel. then click in the checkboxes to select/de-select the listed toolbars (including custom toolbars). These tabs normally appear along the bottom edge of the Design View window area.You can choose which toolbars to show in the workspace via the View > Toolbars submenu. toggled or modified via the MDI tabs context menu (right-click inside any of the tabs to open). Button. States. the main components are: Title Bar .Lists the name of the active Project file. Edit.11 or higher) 9 . Design View Windows . but can be moved. Workspace Window . The Function Maps tab allows you to view/edit the function codes associated with each page. Toolbars . Page. 1): Title Bar Menu Bar Toolbars Workspace Window Design View Windows Properties Window State Manager Window Status Bar FIG. Use the Pages tabs to open/edit the pages / popup pages in each project.Contains two tabs: The Pages tab contains a tree structure representing all open projects. View. left to right.The TPDesign4 Work Area The TPDesign4 Work Area Overview The TPD4 work area consists of several main components (FIG. so they'll apply the next time the application is launched.Each tabbed Design View Window represents a Touch Panel page or popup page. and Help). These settings are saved.Contains the main menu options (File. When this option is enabled.

When this option is enabled.The TPDesign4 Work Area Properties Window . 3 Toggle Information Overlay toolbar button (View toolbar) Use the View > MDI Page Tabs option to toggle the page tabs.Contains three tabs: the General tab allows you to view/edit general (non-state oriented) button properties. State Manager Window . panel revision. Address code. Width or Height properties. the Programming tab allows you view/edit programming-oriented properties. Use the Zoom and Magnifier Window features to control the size of the view. toggled or modified via the MDI tabs context menu (rightclick inside any of the tabs). you can click and drag to resize and position it manually. 2 Design View windows The page tabs normally appear along the bottom edge of the Design View window area. Status Bar . 2) represent pages or popup pages in the panel file you are creating.11 or higher) . The status bar also indicates the status of your connection to the NetLinx Master. Since Design View windows represent the pages on the panel themselves. the Status Bar shows the current XY cursor position. 10 TPDesign4 (v2. They provide a canvas upon which you may place buttons of any size that will fit within the confines of the windows. a tab is displayed for each open page. The State Manager window allows you to view/edit the various states of a selected button. The page tabs normally appear along the bottom edge of the Design View window area. Select the Toggle Information Overlay toolbar button (in the View toolbar) to display function codes associated with each button (FIG. but can be moved. Top. Feedback and Initial page file target information. 3). Once the Popup is displayed on the page. but can be moved. Design Views that represent pages are not resizable. Design View Windows Design View windows (FIG. Alternatively. toggled or modified via the MDI tabs context menu (right-click inside any of the tabs to open). and (for the button the mouse is over): Channel code.By default.Displays each state of the selected button as a thumbnail image in this window. you can set their size and dimensions manually by first enabling the Show Popup Page option in the Page menu. and the States tab allows you to view/edit button state information. button size. FIG. FIG. Popup pages are resizable through the Properties Window by adjusting their Left. Level code.

Right mouse click anywhere within a Design View window to open the Design View context menu. center. Using the Zoom Controls The Zoom toolbar (FIG. Design View Window tab controls Each panel page that you open is shown in its own Design View window for editing. only the way it is represented in the workspace area. 4 Zoom toolbar The following Zoom Controls are available via the Zoom toolbar: Full Page: Automatically adjusts the zoom to show the entire page at 100% size. For example.The TPDesign4 Work Area TPD4 will display up to a maximum of 15 page tabs. etc). TPD4 displays up to a maximum of 10 page tabs. The monitor size should represent the diagonal measurement of the visible portion of the monitor or of the space occupied by a full-screen image. Zoom Out/In: With a page or popup page selected. In TPD4. Fit Page: Automatically adjusts the zoom to fit inside the Design View window. This context menu contains shortcuts to many key design tools. Actual Size: Automatically adjusts the zoom to represent how large a page will appear when actually displayed on the target panel type. by the increments listed in the Zoom Control drop-down. Select Layout from the Design View context menu to access the Layout sub-menu. most 21” monitors typically have between a 19. Right mouse click anywhere within a Design View window to open the Design View context menu. each of these windows has its own page tab (normally appearing along the bottom edge of the Design View window area) that shows the Page name. If you open more than 10 pages. Use these tabs to easily flip from page to page. To use this option. 4) contains shortcuts to the main Zoom Controls. Zoom controls do not affect the actual size of the selected object. Use these options to control the zoom factor on the selected page or popup page. as opposed to the monitor’s overall diagonal size. and they can be toggled on/off via the View > MDI Page Tabs option. No data will be lost. By default. align. Select Display from the Design View context menu to access the Display sub-menu. only the most recently opened 15 pages will remain open (the others will be automatically closed). only the view is closed. you must first specify the monitor’s visible size (in the Monitor Size field of the Appearance tab of the Preferences dialog). This context menu contains shortcuts to many key design tools. containing options for layout/design control (send to front/back.11 or higher) 11 . FIG. This menu is identical to the Layout menu. the tabs automatically disappear.5” and 20” viewable area. click the Zoom Out and Zoom In toolbar buttons to adjust the display size of the selected object. Right-click inside any of the page tabs to access the MDI Page tabs context menu. these page tabs are referred to as "MDI tabs". TPDesign4 (v2. containing options that allow you to select which state of a selected button to display in the Design View. accessible from the main menu bar. If you open more than 15 pages. once you have several pages open.

6): FIG. 6 Workspace window 12 TPDesign4 (v2. Fit Height: Automatically adjusts the zoom to accommodate the height of the selected object inside the Design View window. Custom: Opens the Custom Window Zoom dialog. The Workspace Window contains two tabs: Pages and Function Maps (FIG. Additional Zoom options are available via the Window > Zoom submenu: Fit Width: Automatically adjusts the zoom to accommodate the width of the selected object inside the Design View window. 75%. For Width or Fit Height. This floating window is resizable and dockable.400% (in 1-percent increments). where you can specify any zoom percentage within the range of 25 . Workspace Window The Workspace Window is used to open the pages / popup pages in the file (establishing edit focus). where you can select a zoom factor from 2 to 8 times actual size. 50%. Magnifier Window The Magnifier window allows you to magnify a given area of a design view for temporary viewing in a separate floating window. 200% or 400%).The TPDesign4 Work Area Zoom Control Drop-down: Click the down-arrow to open the Zoom control options list. Select View > Magnifier Window (or click the toolbar button) to access the Magnifier Window. Use this list to manually set the zoom to by incremental percentages (25%. 150%. 5 Magnifier Window toolbar button (View toolbar) Right-click inside the Magnifier window to access the Magnify Control context menu. and to view/edit the function codes associated with each page.11 or higher) . 100%. or by Fit Page. FIG. without zooming the entire design view.

Right-click anywhere within the Pages tab to access the Workspace Navigator context menu. one for Pages and one for Popup Pages. or double-click on the folders to view the pages and popup pages they contain. Popup Pages can belong to only one group at a time. 7 Workspace Navigator . each one with a different colored panel icon (FIG. Each open Project is represented by a folder. in the Workspace Navigator. and the presence of a Popup Page in one of these folders indicates that the particular Popup Page belongs to that group. Click the + symbol next to the folders.Pages Tab Click the Pages tab (at the bottom of the Workspace Navigator window) to view the pages/popup pages contained within each open Project.11 or higher) 13 . TPDesign4 (v2. Inside the Popup Page folder you may also see additional folders.Pages Tab Note that each Project folder contains two folders: Pages and Popup Pages. In the Pages tab of the Workspace Navigator you will see that there are two panel level folders. 7): FIG. These folders represent Popup Page Groups. and of course they can live outside of any group at the same level as the group folders (see Popup Pages for additional information). Use the Workspace Navigator to view/open and rename panel pages.The TPDesign4 Work Area Workspace Navigator .

The TPDesign4 Work Area Workspace Window. the title bar of the Properties Control window indicates the number of buttons selected. and the button type is general.Function Maps Tab Click the Function Maps tab (at the bottom of the Workspace Window) to view the Function Code Map. Note that the title bar of the Properties Control window indicates which element of the workspace is currently selected. Click the down arrow next to this field to view a list of all buttons on the active page. Select View > Properties (or click the toolbar button) to display the Properties window. 8). Also note that the button name and type are displayed in the text box above the tabs (in the example below. popup page and button properties. If one or more buttons are selected in the Workspace. Selecting a button from this list is the same as selecting it in a Design View window: the edit focus shifts to the selected button. Properties Window The Properties Window is typically located on the right side of the screen (although you may move it anywhere you like) and is used to view/edit page. String Outputs and Command Outputs utilized in the panel file. displayed in a hierarchical tree format in the Function Map tab of the Workspace Window (FIG. the selected button is named "pause". and to view/edit the states information associated with each element in your project. 8 Workspace Window. The Properties Window contains three tabs: General. The Function Code Map is a representation of the Channel codes.Function Maps Tab This list is sorted by Port.11 or higher) . FIG. Level codes. Programming and States: 14 TPDesign4 (v2. and within Port by Code. Address codes. and the Properties window reflects the properties of the newly selected button.

Depending on the item selected. and drag it to another field. TPDesign4 (v2. 9 Properties Control . and if the selected value is out of the acceptable range for a target field.General Tab To edit any of the listed button properties. or the Page itself). select from a drop-down menu. The selected property or state is automatically applied to all states of the drop target (whether a button or the page itself).The TPDesign4 Work Area Properties Control . Properties from the Properties window can be dragged and dropped onto the Design View (to Buttons on the main Page. General and State properties can also be copied and pasted to a Design View using standard copy/paste menu and keyboard mechanisms. the cursor will change to indicate any fields that cannot accept the selected value.11 or higher) 15 . 9). FIG. TPD4 alerts you with an error dialog. and the original value is left unchanged. General buttons). The General tab contains a table that lists the button properties for the selected button type (in this case. Another feature of the Properties window (all tabs) is that you can click on any value in the right column.General Tab Click the General tab (at the top of the Properties Window) to set/edit general properties for all button types (FIG. When you release the mouse button. With an item selected. click on an item in the right column to activate that field for editing. the value is copied to the new location. you can either set the item manually. or both.

Programming Tab Click the Programming tab (at the top of the Properties Window) to view/edit programming-related information for the selected button (FIG. or both. Another feature of the Properties window (all tabs) is that you can click on any value in the right column. TPD4 alerts you with an error dialog. select from a drop-down menu. General and State properties can also be copied and pasted to a Design View using standard copy/paste menu and keyboard mechanisms.11 or higher) . and the original value is left unchanged.The TPDesign4 Work Area Properties Control .Programming Tab To edit any of the listed button properties. This information is displayed in a table format. the value is copied to the new location. or the Page itself). When you release the mouse button. The selected property or state is automatically applied to all states of the drop target (whether a button or the page itself). click on an item in the right-hand column to activate the field. and drag it to another field. similar to the General tab. Properties from the Properties window can be dragged and dropped onto the Design View (to Buttons on the main Page. Depending on the item selected. 10 Properties Control . With an item selected. 10). you can either set the item manually. the cursor will change to indicate any fields that cannot accept the selected value. and if the selected value is out of the acceptable range for a target field. 16 TPDesign4 (v2. FIG.

select from a drop-down menu. This information is displayed in a table format. similar to the General tab. the cursor will change to indicate any fields that cannot accept the selected value. and drag it to another field.11 or higher) 17 . or the Page itself). All position (X-Y) values in TPD4 are zero-based (measured in pixels). General and State properties can also be copied and pasted to a Design View using standard copy/paste menu and keyboard mechanisms. 11 Properties Control .States Tab To edit any of the listed button properties. you can either set the item manually. 11). FIG.States Tab Click the States tab (at the top of the Properties Window) to view/edit the state information for each state associated with the selected button (FIG. The State tab contains a table that lists the properties for each state for the selected button. Another feature of the Properties window (all tabs) is that you can click on any value in the right column. With an item selected. meaning that the upper-left corner of each page is represented by the X-Y value of 0. the value is copied to the new location. and if the selected value is out of the acceptable range for a target field. Depending on the item selected. Properties from the Properties window can be dragged and dropped onto the Design View (to Buttons on the main Page. The selected property or state is automatically applied to all states of the drop target (whether a button or the page itself). click on an item in the right-hand column to activate the field. 0. TPDesign4 (v2.The TPDesign4 Work Area Properties Control . and the original value is left unchanged. or both. TPD4 alerts you with an error dialog. When you release the mouse button.

select the states that you want to edit and they will appear listed in the States tab of the Properties Control window. Also note that while you have multiple buttons selected. Using the Prev and Next buttons The Prev and Next buttons. Typing in or changing a value in any property box will immediately affect all selected buttons. In the event that a value is appropriate for one (or more) buttons but inappropriate for others.The TPDesign4 Work Area Using the Apply To All option The Apply To All toggle button is located at the bottom of the Properties Control window (FIG. FIG. All modifications are always done on the button with the edit focus. and you select more than one button to act on. but not on multiple states for a single button. You may also notice that one or more (if not all) of the property values in the grid are blank. you will see a message that states that the value was only applied to those buttons for which it was valid. The only values that will display in the grid while the Apply To All button is depressed are those values that are common among all selected items. 12 Apply To All toggle button If the Apply To All button is not depressed. This Apply To All button works on multiple button selections. 18 TPDesign4 (v2. the Prev or Next buttons will activate on the Properties Control window. When you have multiple buttons selected. located at the bottom of the Properties Control window (next to the Apply to All button) are activated only when more than one button is selected on a page. All modifications are always on the button with the edit focus. only one of them has the edit focus at any given time. If the Apply To All button is depressed and you select more than one button to act on.11 or higher) . the Prev or Next buttons are unavailable and every selected button has the edit focus. Use the Prev and Next buttons to cycle through the selected buttons to view each button's properties in the Properties Control window. 12). Use the Prev and Next buttons to cycle through the selected buttons to view each button's properties in the Properties Control window. only one of them has the edit focus at any given time. To make state-oriented changes across multiple states. Use the Apply to All option to set button properties to edit multiple buttons simultaneously. provided that the change can be applied to them all. and the Apply To All button is not depressed (in its active state). The button represented in the Properties Control window is the one with edit focus. These buttons allow you to quickly edit the selected buttons individually. use the All States option in the States tab (located directly above the other listed states for the selected button). Hold down the Shift key and click to select multiple buttons. The button represented in the Properties Control window is the one with edit focus. To make changes that affect all states on a button at once.

and remove states. popup page or button to be set. replace states. Popup page or button to view the state or states associated with it. The State Manager window allows the viewing and modification of individual states. This is only a result of the scaling. and back again to Off (Range Time Down in the States tab). For buttons with multiple states. The interstate time intervals are user definable in 1/10th second increments. and supports full Cut. To display the State Manager window. Use Shift+click to select a range of states (between two selections). Use Ctrl+click to select multiple individual button states. Use Ctrl+A to select all button states. A zero entry will automatically advance / retreat to the ending / beginning state without displaying any intervening states. Send Commands can set the state number provided it is not a level type button.The TPDesign4 Work Area State Manager window The State Manager is typically located along the bottom edge of the screen (although it is a dockable window and you may move it anywhere you like) and is used to view/edit the various states of a selected button (FIG. The user will be able to set an allowable range within a bargraph that has states. insert single or multiple states.11 or higher) 19 . in the Properties Control window (States tab). Delete. Insert. Each state of the selected button is displayed as a thumbnail image in this window. the level will directly reflect the displayed state. and does not represent distortion on the button itself. For Multi-Bargraph buttons. Copy. When the button is turned on it will display all the assigned states from first to last with a specified time interval between each state's display. 13 State Manager window The State Manager interacts with the Properties Control window to allow the visual aspects of a page. the different states (up to 256) are used to animate a button from Off to On (Range Time Up in the States tab). FIG. Anything outside of that range will not be represented by a state. which includes options to add single or multiple states. When the button is turned back off. the states will be displayed in reverse order. Note that because the thumbnails displayed in the State Manager window are scaled versions of the button images. which includes options to Add single or multiple states. some visual distortion may occur. Right mouse click on any thumbnail in the State Manager window to open the State Manager context menu. Insert single or multiple states and Remove states. TPDesign4 (v2. Select a Page. For Multi-General buttons. Right mouse click on any thumbnail to open the State Manager context menu. Replace and Paste as well as drag and drop capabilities. Replace states. Double-click on any thumbnail in the State Manager window to view/edit the properties for the selected state. select View > State Manager. 13).

The TPDesign4 Work Area State Manager Drag-and-Drop Menu To access the State Manager Drag-and-Drop menu. or "Cancel".This column indicates the name of the Project to which the files belong. "Move…". 14). A left mouse button drag-and-drop between states. Project . and the overall status of the transfer. prior to the first state. accessible through the main menu bar: 20 TPDesign4 (v2. prior to the first state. Device . or after the last state executes a move operation. or after the last state will present a drag-and-drop menu with options to "Insert copy…". Right mouse click anywhere in the Transfer Status Window to open the Transfer Status context menu. A right mouse button drag-and-drop between states. A left or right mouse button drag-and-drop between states. and for transferring TP4 files to the panels. containing options for establishing a connection to the NetLinx Master and panels. FIG. "Insert copy…". prior to the first state. which may be docked/undocked from the main application window (FIG. unless all states have been selected. 14 Transfer Status Window This window displays the following data for each transfer: Status . "Move…". For all other button types: A left or right mouse button drag-and-drop over a state will execute a replace operation. or after the last state is disallowed.This column gives the Device # and a description of the target/source device. select a button state (thumbnail view). Note that this context menu is identical to the Transfer Menu. A right mouse button drag-and-drop over a state presents a drag-and-drop menu with options to "Copy over…". or "Cancel".The status bars indicate the progress of each file in the transfer.11 or higher) . The contents of the Drag-and-Drop menu change depending on the type of button selected: For Multi-General or Multi-Bargraph Buttons: A left mouse button drag-and-drop over a state executes a replace operation. the status of which is displayed in the Transfer Status window. Transfer Status Window The Send To Panel and Receive From Panel dialogs place the requested transfer into a queue. and hold the mouse button down while dragging the selected state to another location in the State Manager window.

17): not connected connected to an unsecured master connected to a secured but unencrypted master connected to a secured and encrypted master FIG. and (for the button the mouse is over): Location. and the secondary view which is available via a double-click anywhere inside the status bar. it shows the current Cursor position. 15): FIG. and Feedback (FIG. In the secondary view. it shows the current Cursor position. Address code and Level code (FIG. 17 Status Bar . 0. 16): FIG. Double-click anywhere on the status bar to view this secondary position.The TPDesign4 Work Area Status Bar There are two views available for the status bar (located along the bottom edge of the application window). Ch: Displays the Channel code (port number:channel code) associated with the button that the cursor is over. Lvl: Displays the Level code (port number:level code) associated with the button that the cursor is over. Size. 15 Status Bar .secondary view Cursor: Displays the current X-Y cursor position. All position (X-Y) values in TPD4 are zero-based (measured in pixels). The default view.default view Cursor: Displays the current X-Y cursor position. In the default view. meaning that the upper-left corner of each page is represented by the X-Y value of 0. Size: Displays the size of the button that the cursor is over. The Status Bar also indicates connection status as follows (FIG. Loc: Displays the X-Y location of the button that the cursor is over (relative to the upper-left corner of the button). FbBk: Displays the type of feedback associated with the button that the cursor is over. Add: Displays the Address code (port number:address code) associated with the button that the cursor is over.11 or higher) 21 . 16 Status Bar . and (for the button the mouse is over): Channel code.connection status TPDesign4 (v2.

The TPDesign4 Work Area Button Preview Window Select View > Button Preview to open the Button Preview window (FIG. This window includes three command buttons: Click the Disable button to disable the button preview. Button Preview is not available for Joystick or Listbox Buttons. 22 TPDesign4 (v2. for multi-state buttons). Click the Push button to simulate a push on the selected button. but not close the Button Preview window. but initially it opens undocked. the Button Preview window is fully dockable. Like the other windows in TPD4. Disable Mute Push FIG. This allows you to visually preview the On/Off states (and all states in between. 18).11 or higher) . Initially the button is shown in its Off state. Click again to enable the preview. Right-click inside the preview area of the Button Preview window to access the Button Preview context menu. Click to Mute any sounds associated with this button. Click on the button in the Button Preview window to "push" the button in an identical fashion to utilizing the Push command button. 18 Button Preview window The Button Preview window displays a preview of the selected button. Double-click inside the title bar to dock the window.

To dock/undock a window. click on the title bar and drag and drop the window into place. bottom. or along the edge of another dockable window. Properties Control. or along the edges of other docked windows.Closes the Print Preview window If you don't have a printer installed on your PC.11 or higher) 23 .Displays the previous page of the selected file One Page/Two Page . Dockable windows automatically snap into place once they are positioned near an available docking area (along the edges of the application window. Select or de-select each window to toggle by checking or un-checking the window listings in this menu (checked = window is on/ displayed). TPDesign4 (v2.Toggles the page view to one or two pages. with the image centered on the printed page. To resize the windows. Workspace Navigator. To dock these windows. This option is enabled only if the active file is longer than one page. The options in the Print Preview window toolbar include: Print . click on the bottom-left corner of the window border in the area shaded with parallel diagonal lines and drag the corner in any direction.Prints the current page view Next Page . Zoom In . the File > Print and File > Print Preview options invoke a message alerting you to install a printer. right or left side of the application window. Working With Dockable Windows All windows in TPD4 are fully dockable. Each page and popup page in the project is printed one per page. Toggling the Windows Each of the dockable windows (Design View.The TPDesign4 Work Area Print Preview Window Select File > Print Preview to display a preview of the pages and popup pages in the active project. click on any border and drag the border either vertically or horizontally. The printed output maintains a constant scaling factor across all pages.Zooms in on the page view Zoom Out . State Manager and Button Preview windows) can be toggled on/off via the options in the View menu. as they will appear when printed. Dockable windows can be re-arranged within the application window. The dockable windows in TPD4 are: Design View Properties Control Workspace Navigator State Manager Transfer Status Window Button Preview Magnifier Window Moving.Displays the next page of the selected file Prev Page . Docking and Resizing Dockable Windows To move the windows. drag the window to reposition it next to any border or window frame and the window will automatically snap to the nearest border. They automatically snap to the top. double-click inside the window's title bar. To stretch the windows.Zooms out from the page view Close .

The TPDesign4 Work Area 24 TPDesign4 (v2.11 or higher) .

click Cancel. Use System Generated File Name: Click this checkbox to use a System Generated File Name for this project.Step 2) contains fields for System-Generated File Names. When you finish the New Project Wizard.) to open the Colors dialog. To cancel the wizard at any point in the process. Fill out this information and click Next to proceed. you will have created a project with a single page.11 or higher) 25 . Every project created will have at least one page. where you can select the colors for the Page Background and Page Text. this dialog is skipped since the information entered here would not apply. The next dialog in the wizard (New Project Wizard . Panel Type: Click the down-arrow to view a list of supported panel types. Fill out this information and click Next to proceed. and has the edit focus. Colors (Page background and Text): Click the browse button (. To launch the New Project Wizard. they will not be included in the System Generated File Name. SalesOrder: Enter the Sales Order number in this field. 3. and consists of up to three dialogs: 1.Final Step) contains fields for setting up the initial touch panel page in the project. Click Finish to close the wizard. The initial page is listed under the Pages folder. FileRevision: Enter the Revision in this field. You can change the target panel type for any existing panel file via the File > Save as Different Panel Type option.. If the Use System Generated File Names option (in the Step 1 dialog) is not selected.Using the New Project Wizard Using the New Project Wizard Overview The New Project Wizard steps you through the process of creating a new Project file (also known as a Panel file). If you choose not to populate one or more of these fields. Use the New Project Wizard as a shortcut to starting new TPD4 projects. 2. The New Project Wizard is by its nature self-explanatory and intuitive. note that the new project appears in the Workspace Navigator window (Pages tab). Font: Click the down arrow to select the Page Font. complete with a start page. Name: Enter a name for the page. Fill out this information and click Finish to exit the New Project Wizard. PurchaseOrder: Enter the Purchase Order number in this field. The first dialog to appear (New Project Wizard . TPDesign4 (v2..Step 1) contains fields to allow you set up the basics of your new project. FontSize: Click the down arrow to select the Page Font size. from a list of all available fonts on your PC. If you close the wizard after step 1. select File > New. You can add pages manually via the Panel > Add Page command. Job Name: Enter a name for the new project. DealerID: Enter the Dealer ID in this field. Resolution: Click the down-arrow to select the target resolution for the project. The last dialog in the wizard (New Project Wizard . JobComments: Enter any project-related comments in this field. Designer: Enter the name of the project designer in this field.

). The External Button Options and Panel Resolution selections cannot be modified once the panel project has been created.11 or higher) . select File > New.Step 1 dialog The options in this dialog include: Job Name: Enter a name for the new project. New Project Wizard . the extension is provided with the associated resolution (not all resolutions require an extension). Use the New Project Wizard as a shortcut to starting new TPD4 projects. New Project Wizard . New Project Wizard .Step Two dialog 3. to support transport and Teletext keypads. CEA etc. To launch the New Project Wizard. click the down-arrow to select a target resolution for the project. 19). Select the desired external button layout from the drop-down list (MIO R-4 only). Resolution: If the Panel Type selected supports multiple screen resolutions (such as the TPIs and NXV-300). The New Project Wizard consists of up to three dialogs: 1. If the selected panel type supports resolution extensions (VESA. To change either of these. select File > New. 19 New Project Wizard . complete with a start page.Step One dialog 2. Panel Type: Click the down-arrow to view a list of supported panel types.Using the New Project Wizard New Project Wizard dialogs The New Project Wizard steps you through the process of creating a new Project file (also known as a Panel file). The External Button Option selected here is represented in the Panel Setup Information tab of the Project Properties dialog.Step 1 dialog To launch the New Project Wizard (to create a new TPD4 Project). To cancel the wizard at any point in the process. FIG. This invokes the first of three dialogs in the wizard (FIG. External Button Options: MIO-R4 remotes support multiple external button options. Use System Generated File Name: Click this checkbox to use a System Generated File Name for this project. use the Save As Different Panel Type option (File Menu) 26 TPDesign4 (v2.Final Step dialog New Project Wizard . click Cancel.

The options in this dialog include: Designer: Enter the name of the project designer in this field.Step 2 dialog If the "Use System Generated File Names" option (in the Step 1 dialog) is not selected. they will not be included in the System Generated File Name. Purchase Order: Enter the Purchase Order number in this field.Using the New Project Wizard New Project Wizard . Dealer ID: Enter the Dealer ID in this field. Sales Order: Enter the Sales Order number in this field. 20 New Project Wizard . FIG. Job Comments: Enter any project-related comments in this field. this dialog is skipped since the information entered here would not apply.Step Two dialog Select Next in the New Project Wizard . If you choose not to populate one or more of these fields. TPDesign4 (v2. File Revision: Enter the File Revision identifier in this field.Step One dialog to access the second of three dialogs in the wizard (FIG. 20).11 or higher) 27 .

Font: Click the down arrow to select the Page Font.Final Step dialog Select Next in the New Project Wizard . where you can select the colors for the Page Background and Page Text.) to open the Colors dialog.11 or higher) . Font Size: Click the down arrow to select the Page Font size. FIG..Using the New Project Wizard New Project Wizard . from a list of all available fonts on your PC. 21 New Project Wizard . Colors (Page background and Text): Click the browse button (.Step Two dialog to access the third of three dialogs in the wizard (FIG. 28 TPDesign4 (v2..Final Step dialog The options in this dialog allow you to set up the initial touch panel page in the project: Name: Enter a name for the page. 21).

TPD4 Project Files (*. or click the toolbar button. Each page / popup page name must be unique within their respective panel files in order to be accepted by the program. To launch the New Project Wizard. including pages and popup pages and associated navigation/page-flip information. Refer to the Using the New Project Wizard section on page 25 for details.TP4) Overview TP4 Project (or Panel) files are created in the folder specified in the application preferences. buttons including function code information. Inappropriate File Name Characters Avoid using the following characters when naming TPD4 project files: Inappropriate File Name Characters • Vertical Bar • Question Mark • Asterisk • Less Than Sign • Greater Than Sign • Forward Slash • Back Slash • Double Quotes • Colon • Period | ? * < > / \ " : . and is ready for you to start adding pages. TPD4 will automatically truncate the name to 59 characters. select File > New. At this point. The New Project Wizard is designed to be simple and intuitive. and click Next to proceed to the next dialog.TP4) TPD4 Project Files (*. the project is created with one generic page. to quickly guide you through the process of setting up a new project. TPD4 has a limit of 59 characters for the project name/filename. Creating a New Project TPD4 includes a New Project Wizard. Simply fill in the fields in each New Project Wizard dialog. popup pages and buttons (including External Controls. unless you explicitly choose to save them in another location. and all image and sound-related files that are used in the design. Click the Finish button in the last dialog in the wizard to close the wizard. if the selected panel type features external pushbuttons). TPDesign4 (v2. When creating a new Project file. All name collision checks in the program are case insensitive.11 or higher) 29 . Project Files contain all of the information required to define the user-interface that is displayed on the touch panel. If you try to save with a longer name. avoid using inappropriate file name characters.

22 New Project Wizard . FIG.TP4" The Purchase Order field and the (optional) Job comments field are not incorporated into the generated filename. Use these fields to enter this additional information for this project. System-generated file names are generated automatically based on several fields that hold various types of project information (Designer. the file name will match the Job Name entered in the first dialog of the New Project Wizard. All information entered in this dialog can be viewed/edited at any time via the Panel Properties dialog. they are simply omitted from the file name. Dealer ID. you are given the option to use System Generated File Names (in the New Project Wizard dialog).My TP Project. if all fields are filled in as shown in FIG. 30 TPDesign4 (v2. and Revision). Sales Order. When you utilize System-Generated File Names. If you select not to use System-Generated File Names.11 or higher) .Super-Dave Osborne.5678-9876. Purchase Order. the resulting filename for this project file consists of each of these entries separated by commas.rev a.TPD4 Project Files (*. These fields are all optional. 22.Step 2 dialog (System-Generated File Names) The resulting file name would be: "1234. If you leave any of the fields blank. For example.TP4) System-Generated Project File Names When you are creating a new Project.

TPD4 Project Files (*. The Cut.11 or higher) 31 . edit focus is indicated in the Workspace Navigator (Pages tab) by a small arrow at the lower-left corner of the icon for the selected page or popup page. and you perform a "Copy". if you select the Name property (in the General tab of the Properties control window). 23 shows that "Page 1" has the edit focus. 24 Button Edit Focus as Indicated In the Design View windows Buttons that do not currently have edit focus are displayed with selection handles that are black squares (with white outlines). TPDesign4 (v2. For example. This means the last thing selected (not necessarily a button displayed in the Design View windows) has the edit focus. if you have selected an item in the Properties Control window (let's say you've selected "Channel Port". "Page 2" has current Edit Focus FIG. Button has Edit Focus Button does not currently have Edit Focus FIG. or button(s) that are the target for change actions are said to have the Edit Focus. you are not allowed to paste it to the Address Port field. and not the associated button (even though it is selected in the Design View window).This setting redirects keyboard input to the currently selected property on the currently visible tab of the Properties Window (assuming one is selected). popup page. any time you select a button in the Design View. 23 Page Edit Focus as Indicated In the Workspace Navigator (Pages tab) For buttons. Copy and Paste functions in TPD4 always work on the element which has the current edit focus. since it is not a valid Address Port number . For pages and popup pages. then you will have copied only the Channel Port entry in the Properties Control window.these errors are indicated by a TPD4 error dialog. edit focus is indicated in the Design View window with small red squares (with yellow outlines) on the edges of the selected button. For example.TP4) Edit Focus The page. Quick Input Select Quick Input from the Edit menu or Design View context menu to access the Quick Input sub-menu. you can just type and press the Enter key to enter a new button name for the selected button. You can then paste the Channel Port number anywhere else in the Properties Control window (where the copied data is considered to be a valid entry). The Quick Input setting determines how typing directly into a Design View or into the State Manager will be handled: Current Property . If for example you had copied the value "410" from the Left (position) field in the Properties window. FIG.

see the Copying/Pasting Popup Pages section on page 94 Copying/Pasting Buttons . The following actions may be undone/redone: Button Property Changes Page / Popup Page Renames Button Deletions / Cuts Button Creations / Pastes Page / Popup Page Deletions / Cuts Page / Popup Page Creations / Pastes State Deletions / Cuts State Creations / Pastes Copying/Cutting/Pasting images and sounds Cutting. 32 TPDesign4 (v2. You can then paste the Channel Port number anywhere else in the Properties Control window (where the copied data is considered to be a valid entry).TPD4 Project Files (*. If no states are selected.TP4) The result of the keystroke will depend on the property selected. has the edit focus. Click the down-arrows to view a history list that lists up to 25 of the most recent actions. Copying and Pasting There are several items that can be cut. and not the associated button (even though it is selected in the Design View window). or click Edit > Undo or Edit > Redo. Undo/Redo TPD4 supports full Undo / Redo functionality at the panel level. then you will have copied only the Channel Port entry in the Properties Control window. The ability to utilize these features effectively can greatly increase your productivity. it's undo/redo stack is flushed and is no longer available. Disabled .This setting redirects keyboard input to the button Text property for all selected button states (in the States tab of the Properties Control window). You may either click the Undo or Redo toolbar icons. and you perform a "Copy". This means the last thing selected. The commands alter their text dynamically to indicate which action is next in the undo/redo list. if you select several states on a Multi-State button (in the State Manager window). text is will be applied to all states of the button selected in the Design View. These actions are independent of any file saves. Popup Page or Button section on page 205. which is not always necessarily a button displayed in the Design View windows. even individual button properties displayed in the Properties Control window) which has the current Edit Focus.Disables the Quick Input option. For example. therefore you may undo past a save if you so desire. Once a panel file is closed. For instance. Text . Selecting either option will immediately undo/redo the last action. if you have selected an item in the Properties Control window (let's say you've selected "Channel Port".see the Copying/Pasting Pages section on page 81 Copying/Pasting Popup Pages .11 or higher) . Copying/Pasting Pages .see the Copying/Pasting States From a Page. bitmaps. copied or pasted in TPD4. This means that each panel file that is open in the program maintains a separate undo/redo stack and manages this for the user. Click to select one or more actions to be undone/redone. you can type and press the Enter key to enter new button text for the selected states.see the Copying/Pasting Buttons section on page 110 Copying/Pasting States . The Copy and Paste functions in TPD4 always work on the element (including buttons.

You can also select multiple buttons. then individually select each desired button. hold down the CTRL key while moving the item with the keyboard arrow keys to move by the grid size instead of a single pixel (regardless of the grid visibility or snap to grid setting).TPD4 Project Files (*. When using the Selection Tool. as opposed to clicking on the item. Working With Video Fills If you are designing a project targeted at a video-capable panel. Using the Selection Tool To activate the Selection tool. To de-select a button. either select another button. You may perform a marquis selection by holding down the left mouse button outside the boundaries of the desired buttons and drawing a selection box around the desired buttons. 25 Selection Tool Use the Selection tool to pick/select objects in the Design View window(s). hold down the CTRL key while clicking and dragging to force a "lasso" selection to occur (even if the mouse was clicked over a button or Popup Page shown on the Page). 25). TPI-PRO and TPI-PRO-DVI accommodates up to four video source inputs. popup page or button. Holding the CTRL key while resizing the selected items with the keyboard will resize by the grid size. Lasso selection forces you to draw a square around the outside of the item to select it. 3. See the Supported Panel Types section on page 2 for details. Left click on the remaining desired buttons while simultaneously depressing the Shift key on your keyboard. With an item selected in a Design View window. or click the toolbar button in the Selection/Button Draw Toolbar (FIG. you are not allowed to paste it to the Address Port field.11 or higher) 33 . or left-click on the background of the page or popup page. you may turn the Apply To All toggle button (located at the bottom of the Properties Control window) On. and you can select any available video source (1-4) as the source for a video fill. To select all available buttons on a page or popup page you may either use the Ctrl+A hotkey. you can assign a "video fill" to a page. you may only act on the selected buttons on one page / popup page at a time. TPDesign4 (v2. 2. The NXP-TPI/4. 4. select Edit > Selection Tool. since it is not a valid Address Port number (these errors are indicated by an error dialog). When using the Selection Tool. In the Properties Control window. FIG. using any of the following techniques: 1.TP4) If for example you had copied the value "410" from the Left (position) field in the Properties Control window. hold down the ALT key while clicking and dragging in a Design View window to move the current selections without selecting anything new on the mouse press (useful for moving popup pages whose entire area is filled with buttons). or select Edit > Select All from the main menu. Although you may select and retain the selection of buttons on multiple pages.

TP4) Drag and Drop Support Project Files: Drag and drop TPD4 project files (*.TPD) project files into the workspace.TP4) from a Windows Explorer window onto the TPD4 workspace to open the project. Dealer ID. Sensors tab: Includes Channel/Level and Port settings for Light Sensors. You can also drag and drop TPDesign3 (*. (including multi-state and bar graph buttons) via the mouse and keyboard on your PC. This is a multi-tab dialog allowing you to view and edit the target touch panel's properties. where you can preview the project and simulate push and release of buttons. Designer. Battery Levels and Cradle Sensors. Marquee Speed. select Panel > Send To G4 PanelPreview (or click the toolbar button) to launch the G4 PanelPreview application. Panel Setup Information tab: Includes touch panel setup options including Refresh Frequency. 34 TPDesign4 (v2. AMX IR Receivers and User (non-AMX) IR Emitters. Dragging a Popup Page onto another Popup Page is not supported.11 or higher) . The G4 PanelPreview application is available from www. Setting Project Properties Select File > Project Properties to open the Project Properties dialog. Panel Strings (Startup.com. the Use system generated filenames option and Protection options with Password fields. Popup Pages: Popup Pages can be dragged from the Pages tab and dropped on a Design View as an alternate method of displaying the Popup Page on the full sized Page. IR Emitters and Receivers tab: Includes Channel Port information for AMX IR Emitters. Created with Build Number. each panel will support all or part of the following properties at the panel level: Project Information tab: Includes basic project information such as Job Name. File Name. to open the file via the TPD Conversion Wizard. Last save date. Motion Sensors. Revision Date. Revision. Purchase Order. Power-up and Inactivity Settings and Feedback Blink Rate. Job Comments. Refer to the G4 PanelPreview online help file for details. Creation Date. and must be installed in order to activate this menu option. Depending upon the panel selected.amx. Sales Order. Using G4 PanelPreview To preview your panel project.TPD4 Project Files (*. Wakeup and Sleep).

These items represent the various components of the System-Generated File Name. Designer ID . 26). The options in this tab include: Job Name . 26 Project Properties dialog .This editable field displays the current Sales Order (identifier) associated with this project.TPD4 Project Files (*. Purchase Order .This read-only field displays the creation date for this project.This editable field displays the current Purchase Order (identifier) associated with this project.This read-only field displays the last date on which this project was saved (and the build number of the TPD4 used to create this project). these fields will be blank.This editable field displays the current Dealer ID (identifier) associated with this project. Modified .11 or higher) 35 . Sales Order . If the Use System-Generated File Names option was not selected. Dealer ID .This editable field displays the current Designer associated with this project.Project Information tab The information in this tab was set up when the project was created. FIG.TP4) Project Properties dialog . Created . TPDesign4 (v2.This editable field displays the current Revision (identifier) associated with this project.Project Information tab Use the options in the Project Information tab of the Project Properties dialog to view/edit project information associated with the active project/panel file (FIG.This editable field displays the current Job Name associated with this project. and the build number of the TPD4 used to create this project. File Revision . in the New Project Wizard.

and are only relevant within the context of the TPD4 application. read-only . Password . If the passwords don't match.TPD4 Project Files (*. files opened as read-only cannot be saved to another file name. it must be re-typed in the Confirm text field.This read-only field displays the date of the current revision of this project. prompting the user to enter the correct password in order to gain write access to the file.this is the default setting (no password protection). prompting the user to enter the correct password to open the file.the next time the panel file is selected to open. then selecting this option will replace the original information with the updated information from this dialog.Click this option to apply system-generated filenames to this project.This read-only field displays the full path and disc filename of the project. Once the password has been typed. a "Passwords do not match" message box is displayed. the Enter Access Password dialog appears. locked . and no edits are allowed. this information will be added on the next save. To simply view the file (as read-only). These protection options are not Windows file attributes. File Name . click on the Read-Only command button (in the Enter Access Password dialog).the next time this panel file is opened. Use System Generated File Names for This Project . If system-generated file names were not used for the project.11 or higher) . the word "[Locked]" appears immediately to the right of the project name in the Workspace Navigator. Protection . Also. the Enter Access Password dialog appears. If the project was originally set up to use system-generated file names. If the file opened in read-only mode. Confirm . Job Comments .259 characters) to use if the file is set as either read-only or locked.Use this text field to enter the password (1 .Use this text field to confirm the password by re-typing the password exactly as it was entered in the Password field.Click the down-arrow to select one of three levels of password protection for this project file: none . 36 TPDesign4 (v2.This editable field displays any comments that were added in the New Project Wizard.TP4) Revision Date .

TPD4 Project Files (*.Panel Setup Information tab Use the options in the Panel Setup Information tab of the Project Properties dialog to view/edit setup information associated with the active project/panel file (FIG. For example.Panel Setup Information tab This dialog identifies the panel for which this project is designed. Marquee Speed .Sets the speed of motion for Marquee text. TPDesign4 (v2. the programmer typically creates a buffer or adds a DATA_EVENT/STRING: handler for the device. and indicates it's screen resolution. 27 Project Properties dialog .11 or higher) 37 . Panel Strings . The options in this tab include: Refresh Frequency .TP4) Project Properties dialog . In the case of MIO R-4 remotes. In order to receive strings from a device. Power Up/Inactivity Settings Power up page . during these three conditions (Startup. This will cause an RXON command to be sent to the device.Use these three fields to specify text strings to appear on the panel.Click the down-arrow to view a drop-down list of all pages currently saved in this project.Select the desired refresh frequency for the selected panel. then the master will pass the strings from the device. FIG. if you entered "Hello!" for the Wakeup string. from the dropdown list of supported refresh frequencies (based on the selected panel/resolution). Click to select the initial startup page for the panel. 27). Wakeup and Sleep). the panel will send this string to the NetLinx Master on wakeup. the External Button Option selected is indicated as well.

TP4) Power up popups . 28): FIG. These options include: Automatically calculate port allocation . When this option is selected.Sensors tab Use the options in the Sensors tab of the Project Properties dialog to view/edit Channel/Level and Port settings for Light Sensors. Specify port allocation . a text field is provided for you to manually enter the port number to be allocated.Click the down arrow to select which page to flip to after the specified period of inactivity (set on the touch panel). in 1/10th-second increments (default = 5). Feedback blink rate (10th of second) . Device Port/Channel Allocation . Specify channel allocation . Automatically calculate channel allocation .This field indicates the Power-Up popup pages that will appear over the Power up page. Inactivity page .select to supply a specific channel number to be allocated to dynamic list tables. use this field to specify the blink frequency. Battery Levels and Cradle Sensors associated with the active panel file (FIG. if the ports/channels utilized in the dynamic table(s) will exceed those declared in the project.The use of dynamic list tables with channel codes may require the designer to specify the ports and/or channels to be allocated on the panel.TPD4 Project Files (*.If you are using blinking button feedback in your project.11 or higher) . When this option is selected.Sensors tab 38 TPDesign4 (v2. a text field is provided for you to manually enter the channel number.select to have TPDesign4 calculate the maximum ports required (default setting). 28 Project Properties dialog .select to supply a specific port number to be allocated to dynamic list tables. Project Properties dialog . Motion Sensors.select to have TPDesign4 calculate the maximum channels required (default setting).

and up to two user-defined ports for IR emitting using custom IR files (FIG.Use these fields to specify the Level port/code assignments for the on-board battery charger. Cradle Sensor (MVP panels only) .TP4) Light Sensor . AMX 455KHz IR emitting and receiving. Motion Sensor . and the MVP-7500/8400 and MVP-8400i have AMX and User-defined IR emitters as well as a cradle sensor (see below). Battery Levels .IR Emitters and Receivers tab Use the options in the IR Emitters and Receivers tab of the Project Properties dialog to view/edit port information associated with the active panel file for AMX 38KHz IR emitting and receiving.Use these fields to set the Channel port/code assignments for the Cradle Sensor on MVP panels.Use these fields to specify the Level and Channel port/code assignments for the onboard light sensor. 29). The channel will be turned on when the panel is docked (either in the tabletop docking station or in the wall cradle). TPDesign4 (v2.TPD4 Project Files (*.11 or higher) 39 . 29 Project Properties dialog . FIG. Project Properties dialog .IR Emitters and Receivers tab The NXD/T-CV7 have AMX IR receivers.Use these fields to specify the Channel port/code assignments for the on-board motion sensor.

the file will not be opened at all. Re-type the password in the Confirm field.TP4) The options in this tab include: AMX IR Emitters (MVPs only) . 2. Non-numeric values will be rejected and the value reset to zero. Locked . FIG. To apply password protection to the open Project file: 1. The password is not required to open and view the file. The User IR Emitters table displays a grid of user IR ports and their respective values in two columns. 30). 40 TPDesign4 (v2. or both. If the password is not entered correctly.11 or higher) . Modifying values in the grid control will activate the Apply button as appropriate. The edit field will only accept integer values ranging from zero to 100 (consistent with other port values). 5.These options allow you to specify the IR Channel port (either 38KHz or 455KHZ) to be used for user-defined IR emitting for MVP-7500 and MVP-8400 panels.Project Information tab. and are only relevant within the context of the TPD4 application. Click Apply to save the changes and apply the specified password to the Project file. it cannot be saved under a new file name. User IR Emitters (MVPs only) .Password settings (Project Information tab. If the passwords don't match. Additional User IR Emitters (MVP-5220 & MVP-5200i) .) 3.TP4) files: Read-only . AMX IR Receivers (CV7 and CV10s only) . Applying changes made to the grid control will set the project's "dirty" flag. Select File > Project Properties to open the Project Properties dialog . The default value for each port is zero (not used). all port values entered will be validated against other existing IR emitter or receiver port values to ensure that all non-zero IR port values are unique.These options allow you to specify the IR Channel port (either 38KHz or 455KHZ) to be used for AMX IR receiving for NXD/T-CV7 and NXD/TCV10 panels.the next time this Project file is opened.see FIG. 30 Project Properties dialog .These options allow you to specify the IR Channel port (either 38KHz or 455KHZ) to be used for standard AMX IR emitting for MVP-7500 and MVP-8400 panels. Values in the Port column cannot be edited.TPD4 Project Files (*. prompting the user to enter the correct password in order to gain write access to the file. locked or none . in which case you'll need to re-enter the password. Applying Password Protection to Your Project File TPD4 supports two levels of password protection for Project (. 4. prompting the user to enter the correct password to open the file. Click the down-arrow next to Protection to select a level of password protection from the drop-down list (either read-only. As with the original two user IR ports. Passwords can be from 1 to 259 characters in length. These protection options are not Windows file attributes. the Enter Access Password dialog appears. the Enter Access Password dialog appears. Note that if a read-only file is opened without using the password. Enter the password in the Password text field.These options allow you to use up to 8 IR Emitters with the panel.the next time the panel file is selected to open. The value associated with each port can be modified in-place. or re-confirm the password. a "Passwords do not match" message box is displayed.

Power-up popups settings (Panel Setup Information tab) 3. In the Panel Setup Information tab. Select File > Project Properties to open the Project Properties dialog. click the green Plus sign icon below the Power up popups field to invoke the Add Power Up Popup dialog. The popup at the top of the list is the first to be displayed. If you select more than one popup page.TPD4 Project Files (*. FIG. 31). 32 Project Properties dialog . 3. 31 Project Properties dialog . you can specify the display order via the up/down arrow buttons below the Power up popups field. 2. repeat steps 2 and 3 to select another popup. 32). presenting a list of all popup pages in the active Project (FIG. FIG. Select the page that you want to be used as the Power-up page from this list (FIG. The selected popup page is indicated in the Power up popups field. 2. In the Panel Setup Information tab.11 or higher) 41 . To display multiple popups over the Power up page. click the down arrow next to the Power up page field to display a list of all of the pages in this project. Select a popup page that you want to be displayed over the Power-up page from this list and click OK.Power-up page settings (IR Emitters and Receivers tab) Setting Power Up Popup Pages Use the Power-up popups option in the Panel Setup Information tab of the Project Properties dialog to specify one or more popup pages in your project to be displayed over the Power up page when the panel is turned on: 1. Select File > Project Properties to open the Project Properties dialog.TP4) Setting a Power Up Page Use the Power-up page option in the Panel Setup Information tab of the Project Properties dialog to specify a particular page in your project to be displayed when the panel is turned on: 1. 4. TPDesign4 (v2.

Setting an Inactive Page Flip Use the Inactive Page Flip option in the Panel Setup Information tab of the Project Properties dialog to specify a particular page in your project to be displayed when the panel is inactive for a specified period of time: 1. Click Apply to apply this change. click the Remove Popup (X) button below the Power up popups field. 42 TPDesign4 (v2.TP4) To remove a popup from the Power up popups list.TPD4 Project Files (*. FIG. 33). 5. Select the page that you want the panel to flip to when the panel is inactive for the amount of time specified on the panel. You can use the Inactivity Page Flip option to create a "screen-saver" for the panel as part of your project. Select File > Project Properties to open the Project Properties dialog. click the down arrow next to the Inactivity Page field to display a list of all of the pages in this project (FIG.Inactivity Page settings (Panel Setup Information tab) 3. 2. 33 Project Properties dialog .11 or higher) . In the Panel Setup Information tab.

or double-click on the folders to view the pages and popup pages they contain. Inside the Popup Page folder you may also see additional folders. The Workspace Window contains two tabs: Pages and Function Maps (FIG. In the Pages tab of the Workspace Navigator you will see that there are two panel level folders. Popup Pages can belong to only one group at a time.TP4) Using the Workspace Window The Workspace Window is used to open the pages / popup pages in the file (establishing edit focus). each one with a different colored panel icon: Note that each Project folder contains two folders: Pages and Popup Pages. Use the Workspace Navigator to view/open and rename panel pages.11 or higher) 43 . Right-click anywhere within the Pages tab to access the Workspace Navigator context menu. and the presence of a Popup Page in one of these folders indicates that the particular Popup Page belongs to that group. These folders represent Popup Page Groups. one for Pages and one for Popup Pages. in the Workspace Navigator. and of course they can live outside of any group at the same level as the group folders (see Popup Pages for additional information). and to view/edit the function codes associated with each page. Each open Project is represented by a folder. Click the + symbol next to the folders.all tabs Workspace Window .TPD4 Project Files (*. 34): FIG.Pages Tab Click the Pages tab (at the bottom of the Workspace Navigator window) to view the pages/popup pages contained within each open Project. There are several actions that you can do simply by selecting an item in the tree and choosing the appropriate command or toolbar button: Opening Pages/Popup Pages Via the Workspace Window Renaming Pages via the Workspace Window Drag and Drop Support TPDesign4 (v2. 34 Workspace Navigator .

Level codes. Opening Pages/Popup Pages Via the Workspace Window You can open a page or popup page in the active Project by double-clicking on the Page or Popup Page in the Workspace Window .TPD4 Project Files (*. 35 Opening Pages/Popup Pages Via the Workspace Window 44 TPDesign4 (v2. 35).11 or higher) . displayed in a hierarchical tree format in the Function Map tab of the Workspace Window. The Function Code Map is a representation of the Channel codes. Address codes. String Outputs and Command Outputs utilized in the panel file. FIG.TP4) Workspace Window. and within Port by Code.Function Maps Tab Click the Function Maps tab (at the bottom of the Workspace Window) to view the Function Code Map.Pages tab (FIG. This list is sorted by Port.

The General tab contains a table that lists the button properties for the selected button type . and drag it to another field. Properties Window . 36 Properties Window To edit any of the listed button properties.TP4) Using the Properties Window The Properties Window is typically located on the right side of the screen (although you may move it anywhere you like) and is used to view/edit page. The selected property or state is automatically applied to all states of the drop target (whether a button or the page itself). Properties from the Properties window can be dragged and dropped onto the Design View (to Buttons on the main Page. TPD4 alerts you with an error dialog. popup page and button properties. FIG. Select View > Properties (or click the toolbar button) to display the Properties window.in this case.11 or higher) 45 . General and State properties can also be copied and pasted to a Design View using standard copy/paste menu and keyboard mechanisms. Another feature of the Properties window (all tabs) is that you can click on any value in the right column. When you release the mouse button. the value is copied to the new location. 36). General buttons. click on an item in the right-hand column to activate the field. The Properties Window contains three tabs: General. and the original value is left unchanged. or both. With an item selected. Depending on the item selected. Programming and States (FIG. select from a drop-down menu. you can either set the item manually. and to view/edit the states information associated with each element in your project. and if the selected value is out of the acceptable range for a target field. TPDesign4 (v2. the cursor will change to indicate any fields that cannot accept the selected value.TPD4 Project Files (*. or the Page itself).General Tab Click the General tab (at the top of the Properties Window) to set/edit general properties for all button types.

This can obviously be a major time saver.TP4) Properties Control . The page tabs normally appear along the bottom edge of the Design View window area. FIG. a tab is displayed for each open page. This a powerful tool. and there are a few key points to keep in mind in doing so: Use the Paste Controls dialog to specify wether to retain Function Codes (Address. meaning that the upper-left corner of each page is represented by the X-Y value of 0. 37 Paste Controls dialog 46 TPDesign4 (v2. The State tab contains a table that lists the properties for each state for the selected button.TPD4 Project Files (*. and Images/Slots/Sounds when the page. Properties Control . All position (X-Y) values in TPD4 are zero-based (measured in pixels). You can copy/paste pages. popup page or buttons are pasted into a separate project (FIG. popup pages and buttons. TPD4 will display up to a maximum of 15 page tabs. including all of their various attributes across projects. Page Flip Options. popup pages and buttons across projects to save time and effort. Give some thought to which elements of the page. Copying/Pasting Across Projects TPD4 allows you to copy and paste pages. similar to the General tab. 37). popup page or button you want to retain in the target project. only the most recently opened 15 pages will remain open (the others will be automatically closed). 0. This information is displayed in a table format.States Tab Click the States tab (at the top of the Properties Window) to view/edit the state information for each state associated with the selected button. When this option is enabled. similar to the General tab. toggled or modified via the MDI tabs context menu (rightclick inside any of the tabs). This information is displayed in a table format. Channel and Level codes). Working With Multiple Projects TPD4 supports working on multiple projects simultaneously. with a few limitations: Opening Multiple Projects Simultaneously Each project page has its own tab along the bottom of the Design View window (known as MDI Page Tabs). If you open more than 15 pages.Programming Tab Click the Programming tab (at the top of the Properties Window) to view/edit programming-related information for the selected button. but can be moved. Use the View > MDI Page Tabs option to toggle the page tabs.11 or higher) .

The TPD Conversion Wizard steps you through the conversion process in three dialogs: 1. Click to select the source page or popup page (the one that you want to copy to another project).TPD4 Project Files (*. 2. Page Flip Options. this process will not have to be performed again. a. the Copy toolbar button (). via the Open dialog). select the TPD project file that you want to convert (use the browse button to navigate to the desired file. and Copy (use Ctrl+C. then save the file. You don't have to actually open a page to copy it: simply select the desired page with a single click in the Workspace Navigator window and copy the page. Click the down arrows next to Panel Type and Resolution to specify the target G4 panel for the project file.Warnings & Font Substitution (Step 2 of 3) dialog in the wizard contains two read-only text fields: The Pre-Conversion Warnings list box alerts you to any possible conflicts that will exist in the selected file. if the selected pages. if the target panel/resolution differs from the original target of the TPDesign3 file. the Paste toolbar button. Once the buttons are pasted into the target project. TPI-PRO. However. you can specify the target resolution for the project. Edit > Copy. icons and sounds that came over with the pasted buttons are available in the Resource Manager for the target project. If you selected a panel that supports multiple resolutions (i. Open the Paste Control Options dialog (Button > Paste Controls) to specify wether to retain Function Codes (Address. for use with G4 panels. Click Next to proceed. For example. icons and/or sounds. once the conversion process is applied. project files that were created in TPDesign3 must be converted in order to be compatible with TPDesign4. Copying/Pasting Pages. Click Cancel to abort the file open command. c. you will see a Pre-Conversion warning TPDesign4 (v2. Once the migration process is complete and the project file has been saved. the buttons are copied along with the page. Retain slot references and Retain sound references are all selected in the Paste Controls dialog). TPI-PRO-DVI). and Images/Slots/Sounds when the copied buttons are pasted into a page in a separate project. Click Yes to continue. NXP-TPI4. Step 2 of 3 (View Warnings and Substitute Fonts): The TPD Conversion Wizard . Pages and Popup pages are automatically pasted into the correct folders. 2. A description and image of the selected panel is displayed. the bitmaps. in the Workspace Navigator window (Pages tab).Select a Source & Destination (Step 1 of 3) dialog. Channel and Level codes). or select Paste from the Workspace Navigator context window). Select File > Save As Different Panel Type to launch the TPD Conversion Wizard. popup page or button (assuming that Retain image references. Edit > Paste. click to select the target project (the one that you want to paste the page or popup page into). the Project Migration dialog appears. Project Migration (From Previous Versions of TPDesign4) If a TP4 project file created with a previous version of TPD4 is opened (File > Open). 3. Converting TPD3 files to TPD4 TPDesign4 is backward-compatible with TPDesign3. or select Copy from the Workspace Navigator context window). those elements are copied into the target project along with the page.TP4) When you copy/paste across projects. popup pages and/or buttons contain bitmaps. Step 1 of 3 (Select Source and Destination): In the TPD Conversion Wizard . Popup Pages and Buttons Across Projects: 1. In the Workspace Navigator (Pages tab).e. b. and Paste (use Ctrl+V. prompting you to continue with the migration process. If you copy/paste a page or popup page containing buttons. Using the TPD Conversion Wizard TPDesign4 includes a TPD Conversion Wizard tool that makes it easy to convert your existing TPDesign3 files for use with TPDesign4.11 or higher) 47 .

Creating a TPD4 Project for R-4 Remote Controllers The process of creating a TPD4 project for R-4 remote controllers is essentially the same as for any other panel type. Errors are issues that result in unexpected button borders. 4.11 or higher) . The display area on R-4 remotes is 240 X 320 (pixels). When the TPD file is converted and opened in TPD4. but that are not available to TPDesign4 (i. 48 TPDesign4 (v2. The lower list box indicates any fonts that were specified in the original TPDesign3 file. and the target panel/resolution. The Errors and Warnings reports are displayed in the Errors and Warnings Report dialog. Fill in the fields in this dialog as desired.TPD4 Project Files (*. the pages and popup pages may appear in a different order than they occurred in TPDesign3. the original panel/resolution association. since TPD4 sorts the page and popup pages alphabetically. Click Finish to launch the conversion process and open the Errors and Warnings Report dialog where you can view/fix the resulting warnings. The pushbuttons on R-4 remotes are treated in TPD4 the same as external pushbuttons on any other panel type. with a few caveats: 1. and can be customized as External Controls.e. the message "No unmatched fonts" is displayed.Step 1) dialog. The conversion wizard handles most of these issues for you automatically. Select File > New to launch the New Project Wizard (New Project Wizard . TPDesign4 generates a report that lists errors and warnings relating to the conversion process. you can select a substitute font to use instead.Step Two dialog.Finish (Step 3 of 3) dialog lists the selected file. are not currently installed on your PC). Select an External Button Option from the drop-down list.TP4) message indicating that scaling will occur. If all fonts used in the original file are still available. 5. 4. like minor shifts in shape and size on some buttons. Neither errors nor warnings will prevent the file from being compiled. Click Filter Warnings to select which warning messages to display or suppress via the Filter Conversion Warnings dialog. 3. Select Next to proceed to the New Project Wizard . Fill in the fields in this dialog as desired. R-4 Remote Controller Projects AMX R-4 Remote Controllers feature a color LCD touch screen that can be programmed and customized like any other touch panel type. The bottom text box lists all Warnings encountered during the conversion process. Step 3 of 3 (Finish): The TPD Conversion Wizard . 2. Warnings are issues that represent potential visual/formatting problems.Final Step dialog. When you convert a TPDesign3 project to a TPDesign4 project via the TPD Conversion Wizard. Select Next to proceed to the New Project Wizard . As with the panel resolution. but will probably require that the issues be resolved in order to have buttons and pages that look and function as expected. 3. this selection cannot be modified once the panel project has been created. Select R-4 as the Panel Type. usually because there are button or buttons in the project that are smaller than the minimum size of the selected border. For each unmatched font listed.

Select Finish to close the New Project Wizard.Levels • Mesh: • Mesh: • Mesh Neighbor: • Mesh Neighbor: • Mesh Neighbor: • Mesh Neighbor: • Mesh Neighbor: • Mesh Neighbor: Current TX Link Quality Current RX Link Quality Signal Strength Row 1 Signal Strength Row 2 Signal Strength Row 3 Signal Strength Row 4 Signal Strength Row 5 Signal Strength Row 6 Addresses R-4 Setup Codes .TP4) 6. All button types continue to be available in the Drawing Toolbar.11 or higher) 49 .Unsupported Button Types Computer Control.10. Add Buttons and Popup Pages Set General. R-4 Remote Devices . TPD4 will display an error message if you attempt to add an unsupported button type in an R-4 project. the initial page is opened in the Design View. However. R-4 Setup Codes Levels: R-4 Setup Codes . ready for you to: Set Page Properties and add Pages (note that the display area on R-4 remotes is 240x320 pixels).TPD4 Project Files (*. TakeNote. and are not displayed in the Properties Window (when an R-4 project is active). At this point. Programming and States properties for Buttons Pages Popup Pages (keep in mind that R-4 projects work just like any other panel type) Configure the external pushbuttons.Addresses • Time Display: • Date Display: Selected Format Selected Format These setup codes apply to R-4 firmware versions beginning with version 2.61. TPDesign4 (v2. and Text Input buttons are not supported by R-4 remote controllers.

This option allows you to select from multiple external button layouts. The choices available depend on the type of panel selected in the Panel Type drop-down: If you have selected a panel without external pushbuttons.e. Teletext keypad .11 or higher) . the External Button Options list is empty. If you have selected any touch panel that is equipped with external pushbuttons. If you have selected the MIO R-4 remote. this selection cannot be modified once the panel project has been created.for use with a standard MIO R-4. 50 TPDesign4 (v2. These defaults will not affect any existing R-4 projects. As with the panel resolution.Default Channel Codes Button MENU Up Down Left Right Select EXIT INFO GUIDE LAST G4 API CONSTANT BTN_MENU_FUNC BTN_MENU_UP BTN_MENU_DN BTN_MENU_LT BTN_MENU_RT BTN_MENU_SELECT BTN_MENU_EXIT BTN_MENU_INFO BTN_MENU_GUIDE BTN_TUNER_PREV Code 44 45 46 47 48 49 50 101 105 235 The default values are read in when a new project is created.TP4) External Button Options The first dialog in the New Project Wizard includes an option for selecting External Button Options.for use with a Teletext MIO R-4 with transport keys. Keypad with Transport Functions .TPD4 Project Files (*. "<none>". the only available option is "Default Configuration" (and cannot be changed).for use with a MIO R-4 with transport keys.axi): R-4 External Buttons . Teletext Keypad with Transport Functions .Default Channel Codes The default channel codes for R-4 external buttons match the corresponding G4 API values (defined in G4API.for use with a Teletext MIO R-4. the options include: Default Configuration . R-4 External Buttons . i.

38 Resource Manager dialog This dialog contains features and options that allow you to easily organize and manage Images.11 or higher) 51 . Dynamic images can be refreshed at specified regular intervals or via the Panel > Refresh Dynamic Images option. 39). Slots and Sounds for your project. FIG. 38). The Resource Manager contains its own toolbar. Slots: The Slots tab allows you to manage slot assignments for images and icons.WAV or .MP3) to be used in your project. one or more of the following options will be available: TPDesign4 (v2. above the tabs (FIG. 39 Resource Manager dialog .Toolbar Depending on what you are doing with the listed Image. TPD4 supports most popular image formats. Sounds: The Sounds tab provides a convenient way to import and preview all sound files (. Dynamic Images: The Dynamic Images tab allows you to manage images that exist on an HTTP server or FTP server. FIG. external to the panel. organized into four tabs: Images: The Images tab provides a convenient way to import and preview all image files to be used in your project. Dynamic Image or Sound files.Working With The Resource Manager Working With The Resource Manager Overview Select Panel > Resource Manager (or click the toolbar button) to open the Resource Manager dialog (FIG.

TPD4 automatically adds the "copy of" prefix to the file. containing two fields: Old Name (read-only. when you paste the multiple images. Use this dialog to locate and select image and sound files to import into this tab. Rename: Select an image file and click Rename to open the Rename dialog. with small file icons. The files are not deleted from the hard drive. with small file icons. Delete: Select one or more files and click Delete to delete them from the collection. Undo/Redo: All actions in the Resource Manager can be undone and/or redone. you can toggle the display of this dialog either by selecting the "Don't show me again" checkbox in the dialog.11 or higher) . if you import (or paste) a file that has the same name as a previously imported file (even if it has a different extension). List Style: Click the down-arrow to open a drop-down list of the available display options for this tab: Small Icons . Details .Working With The Resource Manager Cut/Copy/Paste: Use these controls primarily to move images files to and from the Slots tab. Export: Use this option to export one or more files to a specified directory. However. with a listing of all files targeted for deletion. displays the current file name). which allows you to add dynamic images to your project. List . For this reason.lists the files in a single column. the Resource(s) In Use dialog is set to display any time a used resource is deleted. you'll only see the first one that you selected. just from this project. If you only select one slot. the files are automatically converted to JPGs. the Resource(s) In Use dialog is displayed. 52 TPDesign4 (v2.lists the files with file size and image dimension descriptions. Click to open the Create Dynamic Image dialog. and New Name (enter the new file name in this field). When images of any (supported) file type except PNG are imported into a project. Use the Choose Directory dialog to pick the target directory. New: This option is available only on the Dynamic Images tab (and replaces the Import button that is on the other tabs). If any of the files selected for deletion are used by the active project. and support selected multiple files. Thumbnails . They work in the typical way. By default. Click OK to rename the file.lists the files in columns. you must select at least the same number of slots (in the Slots tab) in order to paste all of the files. You can also cut/copy/paste within any of the tabs. PNGs are not converted because they are already sufficiently compressed. or by selecting "When deleting resources in use" in the Application tab of the Preference dialog. Note that if you copy or cut multiple files to clipboard memory.displays a thumbnail image of each file. as well as the Page(s) on which each file is used. Import: Click to invoke the Open dialog.

button state. Static Image Files Before you can apply images to buttons and pages in your Project. before they are applied in the project. Sort (ascending / descending): Click to sort the image files either in ascending (A-Z) or descending (Z-A) order.Images tab Use this tab as a "library" of every image file that will be used in your project (for pages. Edit: Click to edit the file name of the selected item. regardless of their context (i. Assign To Slot: Click to assign the selected image file(s) to slot(s). the image and sound files must first be imported into the Project via the Resource Manager dialog.Images tab The Images tab of the Resource Manager dialog provides a convenient way to import and preview all image files to be used in your project (FIG. popup pages. Once the image has been imported. 40 Resource Manager dialog . The Images tab provides the following command buttons: Select All: Click to select all image files. buttons and icons).e. it is available for selection to be applied to Pages. It is important to import all of your images to this tab first. TPDesign4 (v2. 40).Working With The Resource Manager Working With Images Resource Manager dialog . so that you can maintain an organized profile of all images in the project. Popup pages or Buttons (at the state level).11 or higher) 53 . etc). page background. FIG.

For this reason.Working With The Resource Manager Consider assigning Slot positions to those image files that you expect to use multiple times in the Project. If this option is selected. 5. This functionality works in an identical manner for sound files. anytime an image with a duplicate file name is imported. 4. Notes on importing image files: When images of any supported file type (except PNG) are imported into a project. 54 TPDesign4 (v2. Click the Overwrite resources with duplicate names checkbox to automatically overwrite any existing images that have the same file name as the image selected for import. See the Working With Transparent Backgrounds section on page 106 for details. Click the Import button to invoke the Open dialog. Importing Image Files Into Your Project To import image files into your Project 1. the files are automatically converted to JPGs. 2. Locate and select the file(s) to import. if you import (or paste) a file that has the same name as a previously imported file (even if it has a different extension). JPGs are recommended over PNGs. Unless you are actually using transparency. since they are usually slightly smaller in size. Open the Images tab. 3. only one accommodates transparency as a color: PNGs. Click Open to import the files to the Images tab.11 or higher) . PNGs are not converted because they are already sufficiently compressed. For the transparent color to be interpreted correctly by TPD4. Supported Image File Types TPD4 supports the following image file types: BMP (Windows bitmap) IFF (Interchange File Format) JPG (Joint Photographic Expert Group) PCT (Macintosh Pict) PCX (PC (Zsoft) Paintbrush) PNG (Portable Network Graphic) PSD (Photoshop) TGA (TrueVision Targa) WMF (Windows Meta File) EPS (Encapsulated Post Script) FPX (FlashPix) Notes: Of all the image file formats supported by TPD4. TPD4 automatically adds the "copy of" prefix to the file. the PNG file must be saved with RGB colors. Select Panel > Resource Manager (or click the toolbar button) to open the Resource Manager dialog. it will replace the original image on every button or page that referenced that file name in the Project. 6. TPD4 supports most popular image formats.

TPDesign4 (v2.11 or higher) 55 . the filename is changed to include the prefix "Copy of. If you import an image file that has already been imported to the Images tab. Any scaling that occurs is proportional. Any image files that are imported to the project that are larger than 1280x1024 are automatically scaled down to fit this maximum resolution.. This is true even if the second version of the image file you have imported is of a different file type with a different extension. so that the image will not be stretched..".Working With The Resource Manager The largest image size supported on the panels is 1280x1024.

page background.Working With The Resource Manager Working With Dynamic Images Resource Manager dialog . Dynamic images can be refreshed at specified regular intervals or via the Panel > Refresh Dynamic Images option. regardless of their context (i. Edit: Click to edit the file name of the selected item. 41): FIG. to replace the generic icon in this tab.11 or higher) . Get Live File: Click to retrieve a thumbnail of the live feed. The Dynamic Images tab provides the following command buttons: Select All: Click to select all images. 41 Resource Manager dialog . Sort (ascending / descending): Click to sort the image files either in ascending (A-Z) or descending (Z-A) order. It is important to import all of your dynamic images to this tab first. before they are applied in the project. popup pages.e. so that you can maintain an organized profile of all images in the project. etc). 56 TPDesign4 (v2.Dynamic Images tab Use this tab as a "library" of every dynamic image file that will be used in your project (for pages. Assign To Slot: Click to assign the selected Image file(s) to slot(s). button state. buttons and icons).Dynamic Images tab The Dynamic Images tab of the Resource Manager dialog provides a convenient way to import and preview all dynamic image files to be used in your project (FIG.

States tab) to automatically scale (down only) the dynamic image to fit the button that it is being displayed on. rather than a directory path to an image file. 5. Dynamic images can be applied to all button types except Computer Control and Text Area buttons. Fill in the fields provided: Name: Enter a name for this dynamic image. or FTP. 41 on page 56). 3. 42 Create Dynamic Image dialog 4. Open the Dynamic Images tab (FIG. Path: Enter the Path for the image source. File: Enter the File name for the image source. external to the panel. Host: Enter the Host Name (URL) or IP Address of the image source. Dynamo Resource: Click to specify this image as a Dynamo Resource (for Dynamo Resource images only).Working With The Resource Manager Dynamic Images Dynamic Images are images that exist on an HTTP server or FTP server. Dynamic images can be refreshed at specified regular intervals or via the Panel > Refresh Dynamic Images option. FIG. Select Panel > Resource Manager (or click the toolbar button) to open the Resource Manager dialog. Protocol: Select the communication protocol: HTTP (default). TPDesign4 (v2. Refresh only at panel startup: Click to refresh this image only when the panel is powered up. User: Enter User name if desired (optional). The Dynamic Images tab of the Resource Manager dialog provides a convenient way to import and preview all dynamic image files to be used in your project. 2. Use the Scale Bitmap To Fit state property (Properties Control window . Refresh Rate: Leave the Refresh Rate set to zero (default). This can be any name you choose. try to give the file a descriptive name so that it can be identified easily later. Adding Dynamic Image Files To Your Project To add dynamic image files to the Dynamic Images tab of the Resource Manager dialog: 1. This option is only displayed if the current panel type supports Dynamo Resource images (see the AMX Touch Panels that Support Dynamo Resource Images section on page 6). Click the New button to invoke the Create Dynamic Image dialog (FIG. To use dynamic images in your project you'll specify a URL. Click OK to add the file to the Dynamic Images tab.11 or higher) 57 . 42). Password: Enter Password if desired (optional).

the host address information for this example is listed in the Location entry of the Element Properties dialog. Copy the address string from the Element Properties dialog. Enter a descriptive name for this dynamic image in the Name field (in this example. 43 Example Element Properties dialog As indicated in the drop-down example above. At this point in the Create Dynamic Image dialog (FIG. 3.ac-images. Since HTTP is already selected (by default) as the Protocol in the Create Dynamic Image dialog. Note that the Location entry consists of not only the Host address information.ac-images. Here is the full string provided by the image source for this photo: http://c1.Adding a Dynamic Image The following example steps you through the process of adding a dynamic image to the Resource Manager: 1. FIG. In a web browser. we'll use "Photo 1".myspacecdn. Cut the file information from the Path string and paste it into the File field.ac-images.Working With The Resource Manager Dynamic Image Example .com/images02/64/l_7e3368c694a94bacbbadfeb84f491004. To provide the other information required in this dialog. 58 TPDesign4 (v2. and delete "HTTP://" from the pasted string. but also protocol and path information as well. Open the Resource Manager to the Dynamic Images tab. and paste it into the Host field in the Create Dynamic Image dialog. it is not required as part of the Host.jpg The User and Password fields are left blank. 4. 2. 43).jpg The various types of information included in the Location string (as provided in the Element Properties dialog) must be broken up and entered into the appropriate fields in the Create Dynamic Image dialog in order for this dynamic image to work: c. Right-click to view it's element properties (FIG. At this point.com Path = images02/64 File = l_7e3368c694a94bacbbadfeb84f491004. Cut the path and file information from the string and paste it into the Path field in the Create Dynamic Image dialog. b. 44): Name = Photo 1 Protocol = HTTP Host = c1. e. Click New to invoke the Create Dynamic Image dialog. go to the image that you want to add as a dynamic image to the Resource Manager.jpg d.11 or higher) . refer to the source image properties: a.myspacecdn. Verify that HTTP is selected as the Protocol. since no credentials are required by the Host to access the webcam in this case.com/images02/64/l_7e3368c694a94bacbbadfeb84f491004.myspacecdn. the Host string contains Host address information as well as Path and File information: c1.

Click OK to add this image as a dynamic image to the Resource Manager (FIG. 44 Example Create Dynamic Image dialog The Refresh Rate should be left to zero (default setting). This option directs the panel to refresh this image only when the panel is rebooted. the Refresh Only at Panel Startup option is available. f. When the Refresh Rate is set to zero. 45 Example Dynamic Image TPDesign4 (v2.11 or higher) 59 . FIG. 45).Working With The Resource Manager FIG. to allow the image to update automatically based on the source's refresh rate.

2. Protocol: Select the communication protocol: HTTP (default). and a select number of AMX Touch Panels support "enhanced" or "accelerated" Dynamo images. The process of adding a Dynamo Resource image to the Resource Manager is identical to that of adding a standard Dynamo image. User: Enter User name if required (this field is optional). or FTP. click on New to open the Create Dynamic Image dialog. Password: Enter Password if required (this field is also optional). In the Dynamic Images tab. File: Enter the File name for the image source provided in the camera or video server manufacturer's documentation.11 or higher) . 3. DynaMo™ Dynamic Images TPDesign4 (v2. Select Panel > Resource Manager to open the Resource Manager dialog. 60 TPDesign4 (v2. as opposed to Dynamic (static) or Dynamo (non-accelerated) images. See the AMX Touch Panels that Support Dynamo Resource Images section on page 6. Path: Enter the Path for the image source provided in the camera or video server manufacturer's documentation (see the Network Path Information section on page 63). with one exception: to specify that the dynamic image will be accelerated. simply select the Dynamo Resource option at the bottom of the Create Dynamic Image dialog (FIG. Dynamo Resource images are essentially the same as standard Dynamo images with one key difference: the playback of Dynamo Resource images is accelerated to up to 30 frames-per-second. 46). FIG. these are referred to as Dynamo Resource images.Dynamo Resource option Creating a DynaMo Image 1. Host: Enter the IP Address of the camera/video server. 46 Create Dynamic Image dialog .Working With The Resource Manager When Dynamic images are added to the Resource Manager.11 or higher). they are initially indicated by an icon rather than a thumbnail image such as is shown in the example above Double-click on any Dynamic image icon. In TPDesign4. or click Get Live File to replace the icon with a thumbnail image. Fill in the fields provided: Name: Enter a name for this dynamic image.

only one of them should be set as a Dynamo Resource image. While TPDesign4 will allow you to place more than one Dynamo Resource image on a page. via the button's Bitmap properties: a. To allow other users to access the files via FTP without password protection. with one exception: to specify that the dynamic image will be treated as an (accelerated) Dynamo Resource image. Click Browse to access the Select Resource dialog.Dynamo Resource option The User (name) and Password fields are typically used with FTP servers. When working with Dynamo Resource images. the frame-rate on all Dynamo Resource images may be reduced as a result.Working With The Resource Manager Refresh Rate: Refreshing resources will cause the button displaying that resource to refresh as well.FIG. Refresh only at panel startup: This option is only available if the Refresh Rate is set to zero.. which means that the resource is only downloaded once. 5. select the dynamic image that you want to display on this button. leave the User and Password fields blank. 4.) button b.. Dynamic images that have the Dynamo Resource property set are displayed with a modified icon. as opposed to upon each visit to the page (as is the default). and causes the dynamic image to refresh only upon restart of the panel. select Bitmap to enable the Browse (. 47). simply select the Dynamo Resource option at the bottom of the Create Dynamic Image dialog. The Dynamo Resource option is only displayed if the currently selected panel-type supports Accelerated Dynamo images (see AMX Touch Panels that Support Dynamo Resource Images). it is important to note the following: If there are multiple Dynamic images displayed on a single page. FIG. In the States tab of the Properties window. which resembles the standard Dynamic Image icon but features a lightning bolt (FIG.11 or higher) 61 . Dynamo Resource: Click to specify this image as a Dynamo Resource (for accelerated DynaMo Dynamic images only . TPDesign4 (v2. In the Dynamic Images tab. The user must type either "Anonymous" or "Guest" to access the specified FTP site. Select the DynaMo Dynamic Image that you want to apply to this button. Select one that fits your application requirements and interface design. 48). The default value is 0. Adding an Dynamo Resource Image to the Resource Manager The process of adding a Dynamo Resource image to the Resource Manager is identical to that of adding a standard Dynamo image. c. that matches the output resolution of the camera/video server providing the dynamic image. Some cameras/servers support more than one output resolution. 47 Create Dynamic Image dialog . Create a General button on which the DynaMo Dynamic Image will be displayed.

and the image will be arbitrarily centered on the container button. If the resulting image is larger than it's container. into an FPGA panel-type that supports Dynamo acceleration results in the Scale Bitmap to Fit value being set to No in the pasted button for all states.The Dynamo Resource image will not be scaled at all. If the Dynamo Resource image is larger than it's container. Note that this option is only available for Dynamo Resource Images (not for Dynamo Dynamic Images). the image will be cropped on all sides by equal amounts. 48 Dynamic Resource Image & Dynamic Image icons (Dynamic Images tab of the Resource Manager dialog) Scaling and Cropping of Dynamo Resource Images Dynamo Resource Images have specific scaling/cropping options available via the Scale Bitmap to Fit (State) property for any state that has a Dynamo Resource image assigned to the "Bitmap" property. 62 TPDesign4 (v2. Paste operations of a button with a Dynamo Resource image from an OMAP panel-type that supports Dynamo acceleration with a Scale Bitmap to Fit setting of Scale to Fit. Any paste operation that causes a Dynamo Resource image to be imported into a target panel project that does not support Dynamo Resource images will cause the Scale Bitmap to Fit setting to be reset on the imported resource.The Dynamo Resource image is doubled in size.Working With The Resource Manager FIG. Click here for a listing of all AMX touch panels that support Dynamo Resource Images. popup or page.This option automatically resizes the Dynamo Resource image to fit the container button.11 or higher) . the image will be cropped on all sides by equal amounts. popup or page. Scale To Fit . 2x . This is the default setting. with a Scale Bitmap to Fit setting of 2x. into a panel-type that doesn't support Dynamo Resource images results in the Scale Bitmap to Fit value being set to No in the pasted button for all states. Copy/Paste Operations on Dynamo Resource Images Paste operations of a button with a Dynamo Resource image from a panel-type that supports Dynamo Resource images. The Scale to Fit option for Dynamo Resource images differs from panels that do not support Dynamo Resource images in that the aspect ratio of the image is maintained. The Scale Bitmap To Fit options presented here depend on the panel type selected: No . Use the Bitmap Justification State property to position the dynamic image bitmap within the button borders.

Below is a sample list of popular manufacturers and models: Motion JPEG Cameras and Servers Manufacturer Axis Network camera 205 Network Camera 2100 Network Camera 2120 Network Camera 2420 Network Camera Panasonic KX-HCM280 Color Pan Tilt Zoom KX-HCM10 Indoor Pan Tilt KX-HCM250 Wireless Pan Tilt KX-HCM230 Outdoor Pan Tilt Sony Trendnet Vivotek SCN-RZ30N Pan/Tilt/25x Zoom TV-IP301 IP2111 Network Camera IP2112 Network Camera VS2402 Video Server Network video server 241Q Video Server 4 Inputs 241S Video Server 1 Input Network Path Information While AMX strives to bring to the market innovative features such as support for Motion JPEG. at points we have to work through the different ways manufacturers implement standards. You can download a free version of FireFox at www. and the camera/ server is serving up an HTML page with a video window being a part of the page. What follows are examples for some of most popular manufacturers. at times it can be difficult to get the needed information with respect to the protocol/syntax of a particular camera/server.Working With The Resource Manager Cameras and Servers With M-JPEG Streaming Output A number of leading manufacturers are offering a variety of equipment that provides Motion JPEG streaming output. Like with any other type of equipment AMX controls. One way to work around this is connecting to your networked camera or video server using an Internet browser that captures the location or path to the stream. In general. the panel needs to access only the M-JPEG stream. you may need to consult product documentation. In the case of streaming network cameras/servers. however. manufacturer's documentation and customer support are the most reliable ways of obtaining information on the device's communication protocol/syntax. Depending on the camera/network video server type you are using. not the entire HTML page served by the camera/server by default. TPDesign4 (v2. This can also help you fully utilize optional features available on that specific device. or if necessary. manufacturers are using somewhat different syntax for requesting Motion JPEG streams from their networked cameras and servers. contact manufacturer's technical support. many networked cameras/servers are accessed using a regular HTML browser. Using the browser you can go to your network device's IP address. For Dynamo.org.11 or higher) 63 . left click on the streaming image and select Copy Image Location. However. what is being sent to the camera/server in the path is a CGI call that may have additional parameters based on the feature set of the camera/server and the syntax the manufacturer requires. An example of such browser is Mozilla FireFox. For example.mozilla. however.

just as a number of other features that can be indicated in the path (FIG.cgi?camera=&resolution=320x240 Dynamic Image Settings .Example 1: Axis Manufacturer: Axis Model: 2100 (camera) Path: axis-cgi/mjpg/video. Each camera can also have a camera ID number but that is optional.Example 2: Panasonic FIG. 49 Dynamic Image Settings .Example 1: Axis Axis equipment supports a number of resolutions.Working With The Resource Manager Dynamic Image Settings . 50 Dynamic Image Settings .11 or higher) . FIG. 49).Example 2: Panasonic Manufacturer: Panasonic Model: BL-C10A (camera) Path: nphMotionJpeg?resolution=320x240&Quality=Standard 64 TPDesign4 (v2. and therefore requires that the target resolution be indicated.

52): TPDesign4 (v2. we'll use "Beach 1"). go to the web cam that you want to add as a dynamic image to the Resource Manager. Click New to invoke the Create Dynamic Image dialog. 2.Working With The Resource Manager Dynamic Image Settings . 2.30) Path: goform File: video2 user & password are blank Refresh Rate: 1 (or more) DynaMo Dynamic Image Example . The default settings of "640x480" and "Highest Quality" should be OK. set the dynamic image properties to: Protocol: HTTP (default) Host: (the default IP of this camera is 192. 3.1. Enter a descriptive name for this dynamic image in the Name field (in this example.Example 3: Vivotek FIG. Open the Resource Manager to the Dynamic Images tab.168.Adding a Streaming Webcam Image The following example steps you through the process of adding a dynamic image in the form of an online streaming webcam to the Resource Manager: 1. Right-click to view it's element properties (FIG.11 or higher) 65 .Example 3: Vivotek Manufacturer: Vivotek Model: 2111 (camera) Path: cgi-bin/video. To provide the other information required in this dialog.jpg?cam=1&quality=3&size=2 Working With Trendnet IP Cameras To get a streaming image from the TV-IP301 Trendnet IP camera on to a dynamic image window of a touch panel: 1. Configure the camera for JPEG and 15fps. 4. In TPD4. In a web browser. 51 Dynamic Image Settings . refer to the source image properties: a. b.

Working With The Resource Manager FIG.axiscam. 52 Online webcam . it is not required as part of the Host. Verify that HTTP is selected as the Protocol. and delete "HTTP://" from the pasted string. c. Since HTTP is already selected (by default) as the Protocol in the Create Dynamic Image dialog.cgi? File = camera=1&resolution=480x360&time=1228758918124&dummy=image.element properties As indicated above.net/axis-cgi/jpg/ image. and paste it into the Host field in the Create Dynamic Image dialog. At this point in the Create Dynamic Image dialog: Host = coralsandsinn.jpg The User and Password fields are left blank.net Path = axis-cgi/jpg/image. b. Cut the path and file information from the string and paste it into the Path field in the Create Dynamic Image dialog. At this point. 66 TPDesign4 (v2.jpg 5. Cut the file information from the Path string and paste it into the File field. e. but also protocol and path information as well. Copy the address string from the Element Properties dialog.cgi?camera=1&resolution=480x360&time=1228758918124&dummy=image. the Host string contains Host address information as well as Path and File information: coralsandsinn.11 or higher) .axiscam. since no credentials are required by the Host to access the webcam in this case.net/axis-cgi/jpg/ image. Note that the Location entry consists of not only the Host address information. Here is the full string provided by the image source for this webcam: http://coralsandsinn.axiscam.jpg d. the host address information for this example is listed in the Location entry of the Element Properties dialog. The various types of information included in the Location string (as provided in the Element Properties dialog) must be broken up and entered into the appropriate fields in the Create Dynamic Image dialog in order for this dynamic image to work: a.cgi?camera=1&resolution=480x360&time=1228758918124&dummy=image.

Click Dynamo Resource to use this Dynamic Image as an (accelerated) DynaMo Dynamic Image.11 or higher) 67 . TPDesign4 (v2. or click Get Live File to replace the icon with a thumbnail image. 53 Example Create Dynamic Image dialog f. Double-click on any Dynamic image icon.Working With The Resource Manager The Refresh Rate should be left to zero. The Refresh Only at Panel Startup option directs the panel to refresh this image only when the panel is rebooted. When the Refresh Rate is set to zero. When Dynamic images are added to the Resource Manager. FIG. Click OK to add this webcam as a dynamic image to the Resource Manager. they are initially indicated by an icon rather than a thumbnail image. to allow the image to update automatically based on the source's refresh rate. the Refresh Only at Panel Startup option is available.

Each project has 2000 slots available. the Slot tab lists only those image and sound files that are currently assigned to a slot. it can be assigned to a Slot position. The Slots tab of the Resource Manager dialog lists all Icon Slot assignments currently defined in the Project.Working With The Resource Manager Working With Slots TPD4 utilizes the concept of Slots for adding Icons to Pages.Slots tab Where the Images and Sounds tabs contain "libraries" of all Image and Sound files (even if they have not been assigned to a slot). 68 TPDesign4 (v2. Once an image or sound file has been assigned a slot. Once a Image or Sound has been assigned to a slot in the Resource Manager. FIG. 54). popup pages and/or buttons as Icons.11 or higher) . Resource Manager dialog . it is available for selection as an icon through the Properties Control Window (States tab).Slots tab The Slots tab of the Resource Manager dialog provides a convenient way to preview and manage all image and sound files that are being used in your project (FIG. 54 Resource Manager dialog . TPD4 supports up to 500 icon slot assignments. Once an image file is imported into the Project (via the Resource Manager). Popup Pages or Buttons in the Project. it is considered to be an Icon. Once the image file is assigned to a Slot. All image and sound files must be assigned to a slot before they can applied to pages. it can be used as an Icon in your Project.

Icons). Swap: Use this option to swap two file / slot assignments. you'll have to more careful about how you choose to assign the files. If you select five slots. The files will be pasted consecutively. or Shift + click to select a range of files). Use the Overwrite and Insert radio buttons to select a preference for assigning files to slot(s) with previous file assignments. click the slot where you want to begin pasting the set of images. they will be assigned in the order in which they were selected. In this case. Move: Use this option to move a slot assignment. First select the file that you want to duplicate. The toolbar button in this tab contains several command options: Select All: Click to select all slots (1-2000). click to select the slot to which you want to apply the image file and click Assign (in the Slots tab). you can click Cancel to cancel the process before you set the slot assignment. If there are already some slot assignments present (in the Slots tab). The selected file is moved to the selected slot. First select a file / slot assignment. in the order in which they were selected. Ctrl + click to select two files. you can use up to 9900 slots per panel if necessary by changing the maximum number of slots per panel. However. Duplicate: Use this option to duplicate a selected file to another slot. Select Insert to insert the files without overwriting anything. Select Panel > Resource Manager (or click the toolbar button) to open the Resource Manager dialog. Click Assign To Slot. and click Swap. 54 on page 68). depending on the type of file you are adding. and click Duplicate. The selected file is duplicated in the targeted slot. The two file / slot assignments are swapped.11 or higher) 69 . By default. 3. Dynamic Images or Sounds tab. 2. there is no need to assign it to a slot (see Bitmaps vs. If you are assigning a single file to a slot with a pre-existing file assignment. the other slot assignments are shifted to accommodate the new assignments. Assign: This command assigns the selected Image or Sound file(s) to slot(s). For example. This open the Slots tab (FIG. When pasting multiple image files to the Slots tab. you must select the same number of slots as the number of images copied. TPDesign4 (v2. only the first five files will be assigned. and clicked Assign to Slot (in the Images tab). the program limits you to 2000 slots per panel. if you selected ten files to assign to slots. If you selected multiple files. If there are no images or sounds already assigned to slots (the Slots tab is empty). 4. then click on the target slot for the selected file and click Move. click Assign (in the Slots tab) to assign the file to slot 1. If you select just one slot. Cancel: If have selected one or more images. then select the slot that you want to target for the duplicated file. dynamic images or sound files to slot positions for use in the Project: 1. select ten slots before assigning the files. Note that the Overwrite and Insert options affect how the Move option works. Open the Images. Assigning Images and Sounds to Slot Positions To assign image files.Working With The Resource Manager If you don't intend to use a image or sound file as an Icon. If you are assigning multiple files to multiple slots. Select one or more files (Ctrl + click to select multiple files individually. Select Overwrite to automatically overwrite any pre-existing file assignments in the affected slots. only the first file selected will be assigned.

Icons can also be put into motion via the Slot Position tweener (accessible via the Tweeners sub-menu). PNGs.11 or higher) . icons exist before bitmaps in the Z-Order. on top of the icon. Icons occupy slots in the Resource Manager. Use icons as button graphics that can be placed "on top" of a color fill. you could create a button with a Bitmap image. that image is removed from the entire project. Icons: The term Icon refers to any image file that has been imported into the Project and assigned to a Slot position in the Resource Manager. Bitmaps vs. When an image's slot position assignment is deleted from the Project. Icons are drawn after Bitmaps. In TPD4. PSDs and BMPs (among others) are supported Bitmap file types. Icons TPD4 uses two concepts of image files: Bitmaps and Icons. bitmap or video fill background. Popup Pages and Buttons. Text is always drawn last. but an image cannot also be referenced as an Icon until it is assigned to a slot in the Resource Manager. the image is still available as a Bitmap (and remains in any other slot it is assigned to). a Bitmap can be any supported image type (not limited to . which may also use Icons (as well as text) in addition to the background image (see Z-Order for details). Icons are different than Bitmaps in several ways: All imported images are considered to be Bitmaps. The important thing to understand about Bitmaps in the context of TPD4 buttons is that they are drawn first. In TPD4. you could place a static icon over an animated bitmap or color transition effect. For example. 70 TPDesign4 (v2. You can think of Bitmaps as the background image used on Pages. and they are always placed in a layer beneath any Icons. and icons as the foreground graphic image. For example. and assigned slot numbers (via the Resource Manager dialog). Bitmaps cannot. Icons allow for complex graphics and animations. so they are always drawn on top of a bitmap image. including all slots to which it was assigned.Working With The Resource Manager Working With Icons Icons are bitmap images that have imported into the project. JPGs. Bitmaps that have been imported into the Project are listed in the Images tab of the Resource Manager. Any supported image file can be made to be an icon. See Z-Order for details. Icon Slot Assignments that have been specified in the Project are listed in the Slots tab of the Resource Manager. Having an image assigned to a slot allows you to reference the same image as either a Bitmap or an Icon. For example. when a Bitmap (in the Images tab of the Resource Manager) is deleted. however. and place an Icon on top of the Bitmap. There are important differences in the way each type is treated: Bitmaps: The term Bitmap is a generic term that describes any pixel-based image file. Think of bitmaps as the background button graphic. simply by assigning it to a slot position.BMP files). and are always appear on top of the Bitmap layer.

Working With The Resource Manager Working With Sounds Resource Manager dialog . The Slots tab provides the following command buttons: Select All: Click to select all sound files. Assign To Slot: Click to assign the selected sound file(s) to slot(s). before they are applied in the project. It is important to import all of your sound files to this tab first. 55 Resource Manager dialog . etc). Use this tab as a "library" of every sound file that will be used in your project (for pages. page flip.WAV and . Sort (ascending / descending): Click to sort the sound files either in ascending (A-Z) or descending (Z-A) order. Edit: Click to edit the file name of the selected item. button state. so that you can maintain an organized profile of all sound files in the project.Sounds tab The Sounds tab of the Resource Manager dialog provides a convenient way to import and preview all sound files to be used in your project (FIG. buttons and icons). TPDesign4 (v2. popup pages.Sounds tab TPD4 supports .11 or higher) 71 . regardless of their context (i. 55): FIG.e.MP3 files.

6. Use the Browse button to locate a target directory for the files. Open the appropriate tab for the type of file you want to export (Images. anytime a sound file with a duplicate file name is imported. 6. The primary difference between the two is that MP3 represents a compressed version of a WAV file. 2.11 or higher) . 3. The program prompts you when the export is finished.. 56). If MP3 files are encoded correctly.. 3. 4. There are many freeware programs available to encode WAV files into MP3's.Working With The Resource Manager Supported Sound File Types TPD4 supports WAV and MP3 sound formats. FIG. If you import an sound file that has already been imported to the Sounds tab. 72 TPDesign4 (v2. Click OK. or Shift + click to select a range of files). Click Open to import the files to the Sounds tab. 56 Choose Directory dialog 5. Select Panel > Resource Manager (or click the toolbar button) to open the Resource Manager dialog. 4.". you should experience very little (if any) difference in sound quality. This opens the Choose Directory dialog (FIG. Open the Sounds tab. 2. Click the Export button. This invokes the Open dialog. 5. Click the Overwrite resources with duplicate names checkbox to automatically overwrite any existing sound files that have the same file name as the file selected for import. Click the Import button. Select one or more files to export (Ctrl + click to select multiple files individually. 55 on page 71): 1. the filename is changed to include the prefix "Copy of. it will replace the original file on every button or page that referenced that file name in the Project. Select Panel > Resource Manager (or click the toolbar button) to open the Resource Manager dialog. Dynamic Images. If this option is selected. Importing Sound Files To Your Project To import sound files to the Sounds tab of the Resource Manager dialog (FIG. This is true even if the second version of the sound file you have imported is of a different file type with a different extension. Locate and select the file(s) to import. Slots or Sounds). Exporting Image and Sound Files From Your Project To a Specified Directory To export image (including dynamic images) and sound files from Resource Manager dialog to a specified directory: 1.

Editing Image Files 1. and another for Sound files. Open the Images tab of the Resource Manager dialog.) will cause the link between TPD4 and the external application to be broken. and specify the default editors.Working With The Resource Manager Editing Image and Sound Files Using External Programs TPD4 supports the use of external programs for editing image and/or sound files used in your project.g. Any subsequent changes made in the external editor will not be reflected nor applied. 3. Select the image file that you want to edit. You must first associate one or more external editing programs with Image files. etc. and control is returned to TPD4.11 or higher) 73 . Select the sound file that you want to edit. Editing Sound Files 1. Use the options in the Editor Selection tab of the Preferences dialog to add external image and sound editing programs. When the edit session begins.. Click the Edit button to launch the external program specified as the default editor for image files. See the Adding an External Editing Program for Image Files section on page 272. See the Program Preferences section on page 265 for details. 3. 2. rename. Open the Sounds tab of the Resource Manager dialog. Click the Edit button to launch the external program specified as the default editor for sound files. the Adding an External Editing Program for Sound Files section on page 272 and the Changing the Default External Image or Sound Editor Program section on page 273 for more information. delete. TPDesign4 (v2. 2. the image or sound file is opened in the default editing program. Any action taken in TPD4 that would change the state of the image or sound file being edited (e. Once you have indicated a program to be used as the default editor. undo/redo. Any saved changes to the resource made in the external editor will be immediately reflected in TPD4. you can access it via the Edit button in the Images and Sounds tabs of the Resource Manager dialog.

Working With The Resource Manager 74 TPDesign4 (v2.11 or higher) .

Working With Pages Working With Pages Overview Pages are not only containers for buttons. 58 Add Page dialog TPDesign4 (v2. the page background color. the text color for text applied directly to the page.11 or higher) 75 . Each page must be uniquely named within its respective panel file in order to be accepted by the program. The maximum number of pages in a panel file = 500. If you change any of these properties (except the name) your changes will be saved and future page creations will carry those selections forward. "TPI-PRO-DVI test" is the active project. all name collision checks in the program are case insensitive. The active project/page is indicated in the Workspace Window by a green wedge to the left of the panel and page icons. Select Panel > Add Page (or click the toolbar icon) to open the Add Page dialog (FIG. 58). Creating a New Page 1. Double-click on any page contained in any open project to set it as the active project. and a font for any text specified (including the font size and settings). You may place text directly on a page outside the context of a button. Pages cannot have borders and possess only one state. FIG. 57 Workspace Window (indicating the active Project & Page) Page Flips (which provide the ability to "flip" from one page to another via a button press) are a button-oriented function . but can also have up to one address port / address code and up to one channel port / channel code combination. You can select the name for the page. and "Page 1" is the active page in the project: FIG. In FIG. 57.see the Creating a Page Flip section on page 108.

. The Programming tab contains a table that lists the programming properties for the active page. click on an item in the right-hand column to activate the field. Programming and States). Click the browse button (. To set Page-level properties.Working With Pages 2. b. Single-click to select a new color from the list. To edit any of the listed properties. Set the Page Background color: a. To edit any of the listed properties. The State tab contains a table that lists the page state properties for the active page. With the Page selected. you can either set the item manually. Set the Page Text color (for text applied directly to the page): a. Note the current and new color selections are shown together for comparison on the left side of the dialog. The following programming properties are supported at the page level: Address Port Address Code Channel Port Channel Code Setting States Properties: Pages Use the State tab of the Properties Control window to set/edit page state properties. Depending on the item selected.11 or higher) . In most cases. separated into three tabs (General. 5. A sample of the selected font type and size is displayed in the window beneath these fields. Click OK to add the new page to the active project. select from a drop-down menu. Set the Font Name and Size. The following general properties are supported at the page level: Name Description Setting Programming Properties: Pages Use the Programming tab of the Properties Control window to set/edit page programming properties. or both. Note the current and new color selections are shown together for comparison on the left side of the dialog. Depending on the item selected. 3. the Properties Window displays the properties available for the Page... b. under the project to which the page was added (as the active page). any variation that occurs in the translation is extremely subtle. you can either set the item manually.) next to Text to open the Colors dialog. The new page will be appear in the Workspace Navigator in the Pages folder. Because the RGB Color palette supports more colors than the Palette Index. 6. Setting Page Properties Panel Pages have a set of Page Properties that can be configured via the fields in the Properties Window. Setting General Properties: Pages Use the General tab of the Properties Window to set/edit page properties. 76 TPDesign4 (v2. click on the Page area in the Design View (as opposed to a button on the page). or both. The General tab contains a table that lists the page properties for the active page. you can either set the item manually. since TPD4 tries to match the color exactly. select from a drop-down menu. 4. To edit any of the listed properties.) next to Page Background to open the Colors dialog. Enter a descriptive name for the new page in the Name field (avoid using inappropriate file name characters). click on an item in the right-hand column to activate the field.. Depending on the item selected. or both. select from a drop-down menu. click on an item in the right-hand column to activate the field. Click the browse button (. you might see some slight variation in some colors if you switch from the RGB Color palette to Palette Index. Single-click to select a new color from the list.

In the States tab of the Properties Window.11 or higher) 77 . 59). 60). TPDesign4 (v2. simply click on a Page entry in the Workspace Window and type directly into the text field (FIG. 60 States tab of the Properties Control window . 4. 2. FIG. click on the Fill Color field to enable the browse (. Click the browse button to open the Colors dialog..Pages tab). 59 Renaming a Page (via the Workspace Window) Adding a Fill Color to a Page 1. FIG. Click OK to close the Colors dialog.Fill Color field 3.. Select the page to which you want to add or change the Fill Color (via the Workspace .Working With Pages The following state properties are supported at the page level: Draw Order Fill Color Text Color Text Effect Color Video Fill Video Touch Pass-Thru Bitmap Bitmap Justification Icon Slot Icon Justification Font Text Text Justification Text Effect Word Wrap Sound Renaming a Page To rename any Page in the active project. and select the color that you want to apply to the page.) button (FIG.

11 or higher) . Use the Import button (at the lower-left of this dialog) to import new bitmaps into the project. 5.. 61). FIG. TPD4 does not automatically scale or stretch images to fit the Page. check the Width and Height values in the Properties Control window (General tab). 4. In the States tab of the Properties Window. To scale an image to fit a target Page. Match the image size (in pixels) to the size indicated there. 78 TPDesign4 (v2. where you can select the desired bitmap. 61 States tab of the Properties Control window . Select the page to which you want to add or change a bitmap image (via the Workspace . 1.Bitmap Justification field Select Absolute to manually position the image. Click the browse button to open the Select Resource dialog.Working With Pages Adding a Bitmap to a Page You can apply a bitmap directly to a Page in your project. 62 States tab of the Properties Control window . to serve as the background image.. Click Bitmap Justification (also in the States tab of the Properties Control window) to set the justification of the image on the page (FIG. Note that only bitmaps that have already been imported into the project are listed in the Select Resource dialog. and scale the image to the exact size (in pixels) of the Page. To check the size of the Pages in your project. FIG. click on the Bitmap field to enable the browse (.) button (FIG. 62). 2.Bitmap field 3. Click OK to close the Select Resource dialog. open the image in any graphics editor program.Pages tab).

Click Icon Justification (also in the States tab of the Properties Control window) to set the justification of the image icon on the page (FIG.. Select the page to which you want to add or change a text (via the Workspace . where you can select the desired icon. click on the Icon Slot field to enable the browse (.Pages tab). you need to import the image file into the project and assign it to a slot position. 5. you can display text directly on a Page in your project. 65).Icon Justification field Select Absolute to manually position the image. unless otherwise directed via the Draw Order selection by the user (see the Draw Order (Z-Order) section on page 206). FIG.Text field Click the browse button to open the Enter Text dialog. FIG. You don't have to open the Enter Text dialog unless you intend to enter multiple lines of text. the text will automatically be displayed on top of the bitmap. 4. If you are also displaying a bitmap on the Page. Select the page to which you want to add or change an image icon (via the Workspace . 63 States tab of the Properties Control window . click on the Text field to enable the browse (.) button (FIG. 64). Click the browse button to open the Select Resource dialog. Alternatively. FIG. 1. 2. and type the page text as desired (up to 4096 characters).Pages tab).Icon Slot field 3.11 or higher) 79 . Adding Text to a Page Refer to the True Type Font Support section on page 6 for details on supported text.. Click OK to close the Select Resource dialog. 65 States tab of the Properties Control window . In the States tab of the Properties Control window.Working With Pages Adding an Icon to a Page You can apply an image Icon directly to a Page in your project.) button (FIG.. to serve as the foreground image (see State Draw Order (Z-Order)).. 2. Since G4 panels utilize address and channel port/address codes (and possess a single state). TPDesign4 (v2. If you don't see the desired image icon file listed in the Select Resource dialog. In the States tab of the Properties Control window. 63). 64 States tab of the Properties Control window . you can type directly into the Text field. 1.

.Text Color field Click the browse button to open the Colors dialog where you can select a color for the Page text.11 or higher) . Select Text Color in the States tab of the Properties Control window to enable the browse (. FIG.. 66 States tab of the Properties Control window . Click on Font in the States tab of the Properties Control window to enable the browse (. Click Text Justification in the States tab of the Properties Control window to set the justification of the text on the page (FIG. 4.) button (FIG. depending on the text justification setting and the size of the Page. 68). Click Word Wrap. if any exists.) button (FIG. 5. and select whether to wrap text that doesn't fit on a single line on the selected Page (Yes or No . 6. 67). any text that won't fit on the selected Page may not be visible. FIG.Working With Pages Also use the Enter Text dialog to edit existing page text. 3.FIG. 80 TPDesign4 (v2. 66). FIG.. 67 States tab of the Properties Control window .Word Wrap field If you select No. 68 States tab of the Properties Control window .. 69 States tab of the Properties Control window . FIG.Text Justification field Select Absolute to manually position the text.Font field Select the desired font (in the Font dialog). 69).

Working With Pages Displaying a Video Source on a Page TPD4 allows you to assign a video source as the background image on a Page. Popup Page or Button. The Video Fill options available will depend on the video capabilities of the panel type selected (FIG. TPDesign4 (v2. Pasting Pages You may paste (by either clicking Edit > Paste from the main menu or the Paste button in the main toolbar) a previously copied page onto: (1) an active Design View window (2) the panel name in the Workspace Navigator (3) the folder named Pages Pasting a page onto the Popup Pages folder (which is for popup pages only) is not allowed. and select Edit > Delete.Video Fill field 3. deleting the last remaining page is not allowed.States Tab. Deleting Pages From a Project To delete a page from the active project. Select a video source from the list to apply the video fill to the Page. Immediately below the panel names is a Pages folder (containing Pages). You can copy a page either by selecting a Page only (ensuring that no buttons are selected) in an active Design View window. To apply a video fill to a Page: 1. or by single-clicking on a page in the Workspace Navigator (Pages tab) then clicking Edit > Copy from the main menu (or the Copy button in the main toolbar).11 or higher) 81 . Copying/Pasting Pages Copying Pages In the Workspace Navigator (Pages tab). at the top most level are Panel Names. The program will prompt you to verify the page deletion first. Select (or a create) a Page in your project. select the page to delete in the Workspace Navigator (Pages tab). 70): FIG. 2. and a Popup Pages folder (containing Popup pages). therefore. All panels must include at least one page. click Video Fill to activate the drop-down list of available video sources. 70 States tab of the Properties Control window . In the Properties Control window .

The file extension is automatically. By default. Specify a template for the resulting filenames in the Filename Template field. If this option is not selected. Specify a target directory for the exported image files in the Export Directory field. 6. 71 Export Page Images dialog 2.) to navigate to a target directory via the Browse For Folder dialog. this option is disabled. By default. By default. this option is enabled. the template is set to include the Panel file name and the Page name into the generated image's file name. 82 TPDesign4 (v2. Use the browse button (. only the Page underneath any currently displayed function codes will be exported. only the Page underneath any currently viewed Popup Pages will be exported. If this option is not selected. Use the Scale% up and down arrows indicate a percentage to down-scale the exported images.. Select Export popup pages shown on pages to include any Popup Pages that are being displayed on the Design View at the time of selection in the exported Page image file. with the button's current display state. 3. As described on the dialog. you can select the desired level of image compression 7. 5. If this option is not selected. The default setting is 100% (no scaling). based on the File Format selection. PNG or BMP) for the resulting image files from the File Format dropdown. 4. Select Export current display state for buttons to capture the Pages as they are currently displayed in the Design View. If JPG is selected. 71). it will export the buttons in the (default) Off state. 9. Use the checkboxes in the Pages and Popups lists to select which Pages and Popup Pages to export. this option is enabled. FIG. 8. Select Panel > Export Page Images to open the Export Page Images dialog (FIG. use $P to insert the Panel name and $p to insert the Page name into the exported file's name.11 or higher) . Select a image file type (JPG.Working With Pages Exporting Pages as Image Files Use the options in the Export Page Images dialog to export one or Pages in the current Project as image files: 1.. Select Export information overlay to include any function code information this is currently being displayed on the Design View at the time of selection in the exported Page image file. By default.

72 Print Preview window Each page and popup page in the project is printed one per page. TPDesign4 (v2.11 or higher) 83 . in the Print Preview window (FIG. the File > Print and File > Print Preview options invoke a message alerting you to install a printer. Zoom In: Zooms in on the page view Zoom Out: Zooms out from the page view Close: Closes the Print Preview window If you don't have a printer installed on your PC. The options in the Print Preview window toolbar include: Print: Prints the current page view Next Page: Displays the next page of the selected file Prev Page: Displays the previous page of the selected file One Page/Two Page: Toggles the page view to one or two pages. This option is enabled only if the active file is longer than one page. FIG.Working With Pages Printing Pages Select File > Print Preview to display a preview of the pages and popup pages in the active project. as they will appear when printed. 72).

11 or higher) .Working With Pages 84 TPDesign4 (v2.

you must first enable the Show Popup Pages option in the Page menu.Working With Popup Pages Working With Popup Pages Overview Popup pages are similar to pages in some respects as they are a container for buttons. and click to select the desired border style for the popup page.see the Inappropriate File Name Characters section on page 29). FIG. To position the Popup manually. Select Panel > Add Popup Page (or click the toolbar icon) to open the Add Popup Page dialog (FIG. 1. as well as left. Popup pages. Creating a Popup Page TPD4 features the Popup Draw tool. can be assigned a border style and border color. 73 Add Popup Page dialog 2. top.0) for the desired placement of the popup page when it displayed on the panel. The minimum size for popup pages is 15 pixels in height or width. as well as some special properties that apply only to popup pages. you can click and drag to position it manually. 4. Use the Position fields when you need to achieve exact positioning. Once the Popup is displayed on the page. enter Left and Top coordinates (in pixels. Refer to the Using the Popup Draw Tool section on page 87 for details. 3. Enter a descriptive name for the new popup page in the Name field (avoid using inappropriate file name characters .11 or higher) 85 . You must first select a Popup Page (in the Workspace window) in order to enable the Show Popup Page option in the Page menu. which allows you to quickly create new popup pages. relative to the upper-left corner of the page which is 0. You can also set it's position manually by dragging it wherever you want it to appear. and contain only one state. TPDesign4 (v2. In the Position fields. in a way that is similar to drawing new buttons. 73). they may have up to one address port / address code and up to one channel port / channel code combination. Click the down-arrow to open the Border Style drop-down menu. width or height values. unlike pages. Beyond these properties popup pages have many typically button specific properties.

Popup Pages may be created in any size beyond the minimum and up to the maximum size of the panel. 74 Colors dialog b. This option opens the Select Popup Pages to Show dialog. Single-click to select a new color from the list. any time you display the Popup (via the Page > Show Popup Pages option). 74).. To resize the Popup manually. Note the current and new color selections are shown together for comparison on the right side of the dialog. the Popup will retain the dimensions specified. b. you can click and drag the red handles on the Popup to resize it manually. Click the browse button (. regardless of the page that you display on. 8. 6.) next to Text Color to open the Colors dialog.. Set the Border color: a. any time you display the Popup (via the Page > Show Popup Pages option). Set the Page Background color: a. where you can select the Popup Page that you want to display on the page. Click the browse button (.. Note the current and new color selections are shown together for comparison on the left side of the dialog. b. the Popup will always appear in the position specified.. Single-click to select a new color from the list. You can also set the dimensions manually by dragging the sizing handles on the Popup..) next to Border Color (in the States tab) to open the Colors dialog.Working With Popup Pages Note that once you specify the position of the Popup on the page. enter the desired Width and Height dimensions (in pixels) for the popup window. FIG. you must first enable the Show Popup Pages option in the Page menu. regardless of the page that you display on. Once the Popup is displayed on the page. Click the browse button (. In the Size fields.. 7. 86 TPDesign4 (v2.11 or higher) . Note the current and new color selections are shown together for comparison on the left side of the dialog. Set the Text color (for text applied directly to the popup page): a. 5.) next to Fill Color (in the States tab) to open the Colors dialog (FIG. The minimum size for popup pages is 15 pixels in height or width. Note that once you resize the Popup on the page. Single-click to select a new color from the list.

Select Edit > Popup Draw Tool (or click the toolbar button) to activate the Popup Draw tool. A sample of the selected font type and size is displayed in the Sample window.11 or higher) 87 . 76) allows you to draw Popup Pages directly onto a page. click and hold the Button Draw tool (in the Selection/Drawing Tools toolbar) for one second to open the drop-down menu containing the Popup Draw tool. Using the Popup Draw Tool The Popup Draw Tool (FIG. The new Popup Page will be displayed in the Workspace Navigator Pages folder. under the project to which the page was added. Use the Group drop-down list to assign the newly created popup page to an existing group. hold down the SHIFT key while drawing to constrain the item to a square. Set the Font Name and Size. 11. FIG. FIG. and while holding the left mouse button down. 10. a. In most cases. hold down the ALT key while clicking and dragging in a Design View window to move the current selections without selecting anything new on the mouse press (useful for moving popup pages whose entire area is filled with buttons). Because the RGB Color palette supports more colors than the Palette Index. Left-click inside the desired page (in the active Design View window). if desired.) next to Font to open the Choose Font dialog (FIG. When using the Button Draw or Popup Draw tools. and the result is the same as through standard means: 1.. since TPD4 tries to match the color exactly. 75). you might see some slight variation in some colors if you switch from the RGB Color palette to Palette Index. drag to draw the popup page to the desired size and shape. 76 Popup Draw Tool The technique is similar to drawing a button. Click the browse button (. The minimum popup page size is 15 pixels in height or width. any variation that occurs in the translation is extremely subtle.Working With Popup Pages 9. When using the Selection tool. TPDesign4 (v2. To access the Popup Draw toolbar button.. 75 Choose Font dialog b. 2. Click OK to add the new Popup Page to the active project.

To set Popup Page-level properties. The following general properties are supported at the popup page level: Name Left Top Width Height Reset Pos. Lasso selection forces you to draw a square around the outside of the item to select it. Edit the (Off) state properties as desired. On Show Group Timeout Modal Show Effect Show Effect X/Y Pos Show Effect Time Hide Effect Hide Effect X/Y Pos 88 TPDesign4 (v2. you will see selection handles appear on the outsides of the popup that are small yellow squares with red interiors. select from a drop-down menu. as opposed to clicking on the item. Setting General Properties: Popup Pages Use the General tab of the Properties Control window to set/edit popup page properties. The States tab of the Properties Control window displays state-related information for the new popup in a editable table. The General tab of the Properties Control window displays general (non-states related) properties for the popup page in a editable table. 5. separated into three tabs (General. Select File > Save to save your changes. With an item selected in a Design View window. The Programming tab of the Properties Control window displays programming-related properties for the popup page in a editable table.11 or higher) . hold down the CTRL key while moving the item with the keyboard arrow keys to move by the grid size instead of a single pixel (regardless of the grid visibility or snap to grid setting). Holding the CTRL key while resizing the selected items with the keyboard will resize by the grid size. you can either set the item manually. Upon the creation of a popup page. Use this table to set the popup page's general properties. or both. In most cases. With the Popup Page selected. Use this table to set the popup page's programming properties. the Properties Control window displays the properties available for the Popup Page. This is a visual indication that the newly created popup has the Edit Focus. 6. Setting Popup Page Properties Popup Pages have a set of Page Properties that can be configured via the fields in the Properties Control Window. Programming and States). Because the RGB Color palette supports more colors than the Palette Index. click on an item in the right-hand column to activate the field. To edit any of the listed button properties.Working With Popup Pages When using the Selection tool. The General tab contains a table that lists the properties for the active popup page. hold down the CTRL key while clicking and dragging to force a "lasso" selection to occur (even if the mouse was clicked over a button or Popup Page shown on the Page). click on the Popup Page area in the Design View (as opposed to a button on the page). 3. 4. 7. any variation that occurs in the translation is extremely subtle. Depending on the item selected. you might see some slight variation in some colors if you switch from the RGB Color palette to Palette Index. since TPD4 tries to match the color exactly.

The following programming properties are supported at the popup page level: Address Port Address Code Channel Port Channel Code Setting States Properties: Popup Pages Use the State tab of the Properties Control window to set/edit popup page state properties. click on an item in the right-hand column to activate the field. The State tab contains a table that lists the state properties for the active popup page. Depending on the item selected. select from a drop-down menu.Working With Popup Pages Setting Programming Properties: Popup Pages Use the Programming tab of the Properties Control window to set/edit popup page properties. The following state properties are supported at the popup page level: Draw Order Border Name Chameleon Image Border Color Fill Color Text Color Video Fill Bitmap Bitmap Justification Bitmap X Offset Bitmap Y Offset Icon Slot Icon Justification Icon X Offset Icon Y Offset Font Text Text Justification Text X Offset Text Y Offset Text Effect Word Wrap Sound TPDesign4 (v2. Depending on the item selected. To edit any of the listed button properties. The Programming tab contains a table that lists program-related properties (Address and Channel Port/Channel Code assignments) for the active popup page. you can either set the item manually. you can either set the item manually. select from a drop-down menu. To edit any of the listed button properties. click on an item in the right-hand column to activate the field.11 or higher) 89 . or both. or both.

77).. 78 Renaming a Popup Page Adding a Fill Color To a Popup Page 1.11 or higher) .) button (FIG. 79 States tab of the Properties Control window . all of the existing Drawing Assist tools are available to allow you to size and align their popup page(s) with existing buttons on the page. In the States tab of the Properties Control window. you can utilize several of the Drawing Assist tools available via the Position Assist Tools and Size Assist Tools toolbars and the Layout menu to edit the size and position of the popup page (FIG. 90 TPDesign4 (v2.Fill Color field 3. 4. 79). FIG. FIG. Position Assist Tools toolbar Size Assist Tools toolbar FIG. 78). Select the Popup Page to which you want to add or change the Fill Color (via the Workspace . and select the color that you want to apply to the Popup Page. all five border tools (if a border has been applied to the popup page). With the selection of one or more buttons on the page in conjunction with a popup page selection. Renaming a Popup Page To rename any Popup Page in the active project.. 2. 77 Position Assist Tools and Size Assist Tools toolbars With only the popup page selected. click on the Fill Color field to enable the browse (.Pages tab). Click OK to close the Colors dialog. the Size to Image tool (if an image has been placed on the popup page). as well as apply any of the options from the Aspect Ratio tool.Working With Popup Pages Drawing Assist Support for Popup Pages Once a popup page is displayed on a main Page in the Design View. simply click on a Popup Page entry in the Workspace and type directly into the text field (FIG. you can use the Center Horizontal and Center Vertical. Click the browse button to open the Colors dialog.

Pages tab). 82 States tab of the Properties Control window . Adding an Icon to a Popup Page You can apply an image Icon directly to a Popup Page in your project. where you can select the desired bitmap.. FIG. FIG. 2.Working With Popup Pages Adding a Bitmap to a Popup Page You can apply a bitmap directly to a Popup Page in your project..Icon Slot field 3. Click Bitmap Justification (also in the States tab of the Properties Control window) to set the justification of the image on the Popup Page. 1. To check the size of the Popup Pages in your project. to serve as the foreground image (see State Draw Order (Z-Order)). In the States tab of the Properties Control window.. Use the Import button (at the lower-left of this dialog) to import new bitmaps into the project.Bitmap field 3.. 6.11 or higher) 91 . 80 States tab of the Properties Control window . you need to import the image file into the project and assign it to a slot position. Click OK to close the Select Resource dialog. To scale an image to fit a target Page/panel.Bitmap Justification field Select Absolute to manually position the image. Select the Popup Page to which you want to add or change an image icon (via the Workspace . Match the image size (in pixels) to the size indicated there. click on the Icon Slot field to enable the browse (. Note that only bitmaps that have already been imported into the project are listed in the Select Resource dialog. click on the Bitmap field to enable the browse (. 4. where you can select the desired icon. TPD4 does not automatically scale or stretch images to fit the Popup Page.Pages tab). 2. 81 States tab of the Properties Control window . 1. Select the Popup Page to which you want to add or change a bitmap image (via the Workspace .) button. FIG. to serve as the background image. TPDesign4 (v2. In the States tab of the Properties Control window. Click the browse button to open the Select Resource dialog. open the image in any graphics editor program.) button. and scale the image to the exact size (in pixels) of the Page/panel. check the Width and Height values in the Properties Control window (General tab). If you don't see the desired image icon file listed in the Select Resource dialog. Click the browse button to open the Select Resource dialog. 5.

FIG. Adding Text to a Popup Page Refer to the True Type Font Support section on page 6 for details on supported text. click on the Text field to enable the browse (. Select Text Color in the States tab of the Properties Control window to enable the browse (. 5. 84).Working With Popup Pages 4. Select the Popup Page to which you want to add or change a text (via the Workspace .) button (FIG. 86 States tab of the Properties Control window ..Text field Click the browse button to open the Enter Text dialog.. unless otherwise directed via the Draw Order selection by the user (see the Draw Order (Z-Order) section on page 206).) button (FIG..11 or higher) .. 84 States tab of the Properties Control window . 85 States tab of the Properties Control window .Pages tab). In the States tab of the Properties Control window. 86). You don't have to open the Enter Text dialog unless you intend to enter multiple lines of text. 85). 2. FIG. if any exists. you can display text directly on a Popup Page in your project. 3. 4. If you are also displaying a bitmap on the Popup Page. FIG. and type the page text as desired (up to 4096 characters). Click OK to close the Select Resource dialog. Alternatively.Icon Justification field Select Absolute to manually position the image. 83 States tab of the Properties Control window .Font field 92 TPDesign4 (v2.. Since G4 panels utilize address and channel port/address codes (and possess a single state). FIG.Text Color field Click the browse button to open the Colors dialog where you can select a color for the Popup Page text. Click on Font in the States tab of the Properties Control window to enable the browse (. the text will automatically be displayed on top of the bitmap. 1.. you can type directly into the Text field. Click Icon Justification (also in the States tab of the Properties Control window) to set the justification of the image icon on the Popup Page.) button (FIG. Also use the Enter Text dialog to edit existing page text.

click Video Fill to activate the drop-down list of available video sources. FIG. The Video Fill options available will depend on the video capabilities of the panel type selected (FIG. click Group to activate the text field (FIG. 87 States tab of the Properties Control window . depending on the text justification setting and the size of the Popup Page. 88 States tab of the Properties Control window . 6. Select a video source from the list to apply the video fill to the Page.Group field TPDesign4 (v2. 88).States Tab. To apply a video fill to a Popup Page: 1. FIG. 89): FIG. In the Properties Control window . any text that won't fit on the selected Popup Page may not be visible. To create a Popup Page group: 1. 2. Click Text Justification in the States tab of the Properties Control window to set the justification of the text on the Popup Page (FIG. 2. Click Word Wrap.Word Wrap field If you select No.Video Fill field 3. 5. Select (or a create) a Popup Page in your project. Creating Popup Page Groups Popup Page Groups provide a mechanism to group popup pages into mutually exclusive groups for display purposes. In the Properties Control window (General tab).Text Justification field Select Absolute to manually position the text. 90 States tab of the Properties Control window .Working With Popup Pages Select the desired font (in the Font dialog).FIG. FIG. Popup Page or Button. Displaying a Video Source on a Popup Page TPD4 allows you to assign a video source as the background image on a Page. 90). and select whether to wrap text that doesn't fit on a single line on the selected Popup Page (Yes or No . 87).11 or higher) 93 . 89 States tab of the Properties Control window . Select a popup page in the Workspace Navigator (Pages tab).

94 TPDesign4 (v2. or set the Group field to None in the Properties Control window. Pasting Popup Pages You can paste (by either clicking Edit > Paste from the main menu or the Paste button in the main toolbar) a previously copied popup page onto: (1) an active Design View (2) the panel name in the Panel Navigator (3) the folder named Popup Pages Pasting a popup page onto another page or popup page in the Panel Navigator (which is only a paste target for buttons) or onto the folder named Pages (which is for pages only) is not allowed. Deleting Popup Pages From a Project To delete a popup page from the active project. . and select Edit > Delete. and drag it out of the group. drag the desired popup page(s) into the desired group folder or set the group association via the Group field in the Properties Control window (FIG. The program will prompt you to verify the popup page deletion first. 91 Popup Pages folder in the Workspace Navigator 5. or by single-clicking on a page in the Workspace Navigator (Pages tab) then clicking Edit > Copy from the main menu (or the Copy button in the main toolbar). 92 States tab of the Properties Control window . FIG. Copying/Pasting Popup Pages Copying Popup Pages You can copy a popup page either by selecting a Popup Page only (ensuring that no buttons are selected) in an active Design View window. 92).11 or higher) .Group field To remove a popup page from a group. To place a popup page in a particular popup group: In the Workspace Window. The named Popup Group folder is created under the Popup Pages folder in the Workspace Navigator Pages tab (FIG. select the popup page in the Workspace Navigator. 91). FIG. 4. Enter a name for the popup group folder.Working With Popup Pages 3. select the popup page to delete in the Workspace Navigator (Pages tab).

To hide a selected Popup Page: Select a Popup Page in the Workspace Window (Popup Pages tab). Hide Popup Page & Hide All Popup Pages buttons This option deals only with showing a popup page (selected in the workspace) on a page that is currently open in the design view. or click the Hide All Popup Pages toolbar button. Additionally. you can drag and drop a Popup Page from the Workspace Window onto a Design View window to show the selected Popup Page. To show a Popup Page: Select a Popup Page in the Workspace Window (Popup Pages tab). TPDesign4 (v2. FIG. and select Show Popup Page (or click the toolbar button).Working With Popup Pages Show/Hide Popup Pages The Show Popup Page and Hide Popup Page options can be selected via the Page menu. and select Hide Popup Page (or click the toolbar button). the Workspace Navigator context menu or the toolbar buttons contained in the Main toolbar (FIG. To hide all Popup Pages: Select Hide All Popup Pages in the Page menu. 93). Design View context menu. The Hide All Popup Pages toolbar button is available on the Main toolbar only.11 or higher) 95 . 93 Main Toolbar .Show Popup Page.

Working With Popup Pages 96 TPDesign4 (v2.11 or higher) .

Multi-State General: Basic multi-state buttons that can also be used for most touch panel functions. Joystick: Vertical and horizontal direction controllers that can be used for pan and tilt control (typically for camera operation). List Box: Utilizes a collection of subordinate buttons to display either dynamic or static data as a scrollable list. TakeNote: Allow you to use a G4 panel to annotate to either a windows desktop or on other G4 panels. and select from the list (see List Box Buttons). Joystick buttons only use the Off state. 94): Button Draw Tool Popup Draw Tool List Box Draw Tool FIG. Bargraph: Level monitors and adjustable level controls that can be configured to monitor or adjust audio outputs and lighting levels. there is no On state associated with them.Select to draw Popup Pages. Because Joystick buttons don't work in the same way as the other button types (in that they don't generate pushes/releases). except List Box buttons). 94 Selection/Drawing Tools toolbar Click and hold the Button Draw Tool to select from the other types of Draw Tools: Button Draw Tool . Computer Control: Allow you to connect to a PC running a VNC server for remote control applications. Popup Draw Tool . and support up to 256 states. Button Draw Tools Within the Selection/Drawing Tools toolbar is the Button Draw Tools drop-down (FIG. Text Input: Intended only to display (non-interactive) text on the panel.Select to draw buttons (all types. List Box Draw Tool . List box buttons can be used to allow end-users to view data in list form. not associated with any specific functionality. Multi-state bargraph buttons also allow you to create custom bargraph sliders. TPDesign4 (v2.11 or higher) 97 .Working With Buttons Working With Buttons Overview TPDesign4 supports the following button types: General: Basic dual-state buttons that can be used for most touch panel functions. and support up to 256 states. Multi-state buttons are used to create animation effects. Multi-State Bargraph: Level monitors and adjustable level controls that can be configured to monitor or adjust audio outputs and lighting levels.Select to draw List Box Buttons.

try using "Circle 50" rather than "Circle 100"). 5.Working With Buttons Drawing a Button Within the Selection/Drawing Tools toolbar is the Button Draw Tool. When using the circle. Use the fields and options in the General. oval or diamond border types. Programming and States tabs of the Properties Window to specify general. This is a result of scaling the button smaller than what the selected border requires to accommodate the slider bar. hold down the CTRL key while moving the item with the keyboard arrow keys to move by the grid size instead of a single pixel (regardless of the grid visibility or snap to grid setting).11 or higher) . 4. Holding the CTRL key while resizing the selected items with the keyboard will resize by the grid size. 3. Upon the creation of a button on a page (or popup page) you will see selection handles appear on the outsides of the button that are small yellow squares with red interiors. single-click the State button. Open the Page (or Popup page) that the button will be added to.e. FIG. Refer to Properties Window for details. and state-specific properties for the selected button. Experiment with different border types to get the results you're after. 97 New Button The maximum number of buttons per page / popup page = 500. If you see this. To toggle between Off and On states. and place your cursor within the boundaries of an open Design View. you may notice the slider bar appearing partially outside of the button border. With an item selected in a Design View window. select Edit > Button Draw Tool from the main menu. Buttons are always drawn in the Off State. 96 Drawing a New Button Hold down the SHIFT key while drawing to constrain the button to a square. 96). Click and hold the Button Draw Tool to access a drop-down of the other types of Draw Tools (FIG. programming. 1. The Button Selection/Draw toolbar allows you to control certain new button creation properties for both the Off and the On state of a button. indicating edit focus. Minimum button size is 4 x 4 pixels. try using a "smaller" border (i. To complete the button draw action. 6. 97). You will see a sizing rectangle as you drag the mouse. 95 Button Draw Tool (Selection/Drawing Tools toolbar) Alternatively. 95): Button Draw Tool FIG. Hold down the left mouse button and drag the mouse diagonally. indicating the size of the button you are drawing (FIG. release the left mouse button (FIG. 2. 98 TPDesign4 (v2. FIG. Select the Button Draw Tool (used for all button types other than List Box Buttons).

Select File > Save to save your changes. note that the button is automatically renamed to "Welcome". 98 New Button . when you apply a bitmap to the button. Furthermore. based on the text and/or bitmap applied to the button: If you apply text to the button. 8. the Lock Button Name option is set to Off. 98): FIG. For example if you create a new button (which is automatically named "Button 9"). if the button has no text. click Lock Button Name and select Yes to prevent the button from being automatically renamed by the program when you edit the text or bitmap assignment(s). TPDesign4 (v2.e. However. the button name will not change. any time you change the bitmap or the text on the button. Lock Button Name does not prevent you from manually renaming the button. TPD4 goes further in automatically generating a descriptive name for the button. if there is text associated with a button and you add an icon. However. the button name will not change. when you apply an icon to the button. At any point in the design process. via the Name field. by default the buttons are automatically given a sequential name composed of the button number (relative to the number of buttons already created in the Project). Additionally. if the button has no text. This is where the Lock Button Name option (General tab of the Properties Control Window) comes into play. If there is text associated with a button. By default. and you add a bitmap. Text on a button always overrides the presence of a bitmap.Working With Buttons 7. However. However. Note that this name change occurs on the fly.11 or higher) 99 . the button name is automatically updated with either the latest text or bitmap assignment. then add the text "Welcome". the button is again renamed to reflect the updated text. the button is automatically renamed to reflect the bitmap file name (i.Button Preview window Generated Button Names When new buttons are created. "Background"). the button is automatically renamed to reflect the icon's name. the button text is substituted for the button number. and does not require a Save operation. Select View > Button Preview to preview the button (click Push to simulate a button press) in the Button Preview window (FIG. Note that if you change the text.

11 or higher) . and type the button text as desired. Alternatively.. Click the browse button to open the Enter Text dialog (FIG. FIG. FIG.Working With Buttons Specifying the Button Type To specify the button type for any button: 1. Select the button to which you want to add or change text (with the Selection tool).Text 3. 101 State Properties . If no Border Style was specified (none). then the borders listed here are limited to those contained in the selected Border Style. 100 Border Name drop-down menu (State Property) If a Border Style was specified (in the General tab). and select a border style from the Border Name (State) Property (FIG. 101). select Type to access the drop-down menu of Supported Button Types (FIG. select the button in the Design View window. Adding Text to a Button Since button text is a state-specific property.) button (FIG. click on the Text field in the state that you want add the text to. This enables the browse (. you can add or change the button text via the States tab of the Properties Control window: 1. you can type directly into the Text field. In the States tab of the Properties Control window. Specifying a Button Border To specify a border style for a button. 100): FIG. then all border names are available in the provided list. 2. For List Box buttons. 100 TPDesign4 (v2. Select the desired button type. In the General tab of the Properties Window.. Select or a create a button. 99). this property applies to all the buttons in the selected column. 102). 2. Refer to the TPD4 online help for previews of each Border Style. 99 Button Type drop-down menu (General Property) 3.

See the True Type Font Support section on page 6. If the size of the font exceeds the memory available on the device.11 or higher) 101 . 102 Enter Text dialog You don't have to open the Enter Text dialog unless you intend to enter multiple lines of text. or use the Text field under All States to add the text to every state in the button. Foreign Language Support for Text For page and button state text properties. In order to display such languages on a page or button state. and Devangari. These languages include (but are not limited to) Arabic. TPDesign4 (v2. or only on specific states. the panel designer must create a pre-rendered graphic of the desired text (using a suitable graphics application) that can then be imported into the TPD4 panel project as a graphic (icon or bitmap). the panel designer may be forced to use a pre-rendered graphic to display the desired text.Working With Buttons FIG. Click anywhere outside of the Text field to set the button text (or click OK to close the Enter Text dialog). The size of the font required to support the language (particularly in the case of East Asian languages that utilize ideograms) might be prohibitive due to limits of available memory on the target device. Once imported into the panel project. Each state of the selected button is represented individually in the States tab of the Properties Control window. so use the Text field in the state that you want to change. 4. Hebrew. Button text is state-specific. if any exists. TPD4 (and the G4 firmware itself) do not provide explicit support for languages that utilize complex scripts. TPD4 supports non-complex scripts (those that can be printed correctly without the use of a rendered script) to the extent that the True Type font currently selected for that state supports the language in question. You can also use the Enter Text dialog to edit existing button text. the graphic can be assigned to one or more page or button states. so keep in mind wether you want the text to occur on all states.

so use the Fill Color field in the state that you want to change. Click the browse button to open the Colors dialog. 103 State Properties . This enables the browse (. FIG.). click on the Fill Color field in the state that you want add the Fill Color to. 102 TPDesign4 (v2. In the States tab of the Properties Control window. FIG. 104 Colors dialog 4.Text Button Fill Colors are state-specific. so keep in mind wether you want the Fill Color to occur on all states. or only on specific states.. This enables the browse button (.. In the States tab of the Properties Control window.11 or higher) .Working With Buttons Adding a Fill Color To a Button Since Fill Color is a state-specific property. you can add or change the button Fill Color assignment via the States tab of the Properties Control window: 1. Select the button to which you want to add or change the Fill Color (with the Selection tool). Each state of the selected button is represented individually in the States tab of the Properties Control window.. 104).) button (FIG. so use the Fill Color field in the state that you want to change. click on the Fill Color field in the state that you want to change the fill color on. you can add or change the button fill color via the State tab of the Properties Control window: 1. or use the Fill Color field under All States to change the fill color on every state in the button. Changing the Button Fill Color Since button fill color is a state-specific property. 103). Click OK to close the Colors dialog. Select the button that you want to add or change the fill color on (with the Selection tool). 3. 2. Each state of the selected button is represented individually in the States tab of the Properties Control window. and select the color that you want to apply to the Button/State (FIG. 2.. or use the Fill Color field under All States to add the Fill Color to every state in the button.

Adding a Bitmap to a Button Since bitmap assignment is a state-specific property. Use the Import button (at the lower-left of this dialog) to import new bitmaps into the project (see the Importing Image Files Into Your Project section on page 54). FIG. FIG.Working With Buttons 3. 105). you can add or change the button bitmap assignment via the States tab of the Properties Control window: 1. where you can change the fill color.. Click the browse button to open the Select Resource dialog. Click OK to close the Colors dialog. or use the Bitmap field under All States to add the bitmap to every state in the button. This enables the browse (. where you can select the desired bitmap (FIG. 4. so use the Bitmap field in the state that you want to change. so keep in mind wether you want the bitmap to occur on all states.11 or higher) 103 . Click the browse button (.Bitmap Button bitmaps are state-specific. In the States tab of the Properties Control window. click on the Bitmap field in the state that you want add the bitmap to. 106).) to open the Colors dialog.. 105 State Properties .) button (FIG. 2. TPDesign4 (v2.. 106 Select Resource dialog Note that only bitmaps that have already been imported into the project are listed in the Select Resource dialog. or only on specific states. 3. Each state of the selected button is represented individually in the States tab of the Properties Control window. Select the button to which you want to add or change a bitmap image (with the Selection tool)..

Click the browse button to open the Select Resource dialog. so keep in mind wether you want the icon to occur on all states. you can add or change the button Icon assignment via the States tab of the Properties Control window: 1. Adding an Icon to a Button With TPD4. Each state of the selected button is represented individually in the States tab of the Properties Control window.. you can apply Icons to buttons in your project. Click OK to close the Select Resource dialog. 2. Click Bitmap Justification (also in the States tab of the Properties Control window) to set the justification of the image on the button (FIG. open the image in any graphics editor program. 109). check the Width and Height values in the Properties Control window (General tab). This enables the browse (.Icon Slot Button icons are state-specific.11 or higher) . or use the Icon Slot field under All States to add the icon to every state in the button. and scale the image to the exact size (in pixels) of the Button. so use the Icon Slot field in the state that you want to change. TPD4 does not automatically scale or stretch images to fit the Button. To check the size of the Buttons in your project. to serve as the foreground image (see Z-Order for details).) button (FIG. Select the button that you want to add an Icon to (with the Selection tool). FIG. To scale an image to fit a target Button. 108 State Properties . 107). click on the Icon Slot field in the state that you want add the icon to. 108). FIG.Bitmap Justification drop-down menu Select Absolute to manually position the image. 5. 3. or only on specific states.Working With Buttons 4. where you can select the desired icon (FIG.. Match the image size (in pixels) to the size indicated there. 107 State Properties . 104 TPDesign4 (v2. Since Icon assignment is a state-specific property. In the States tab of the Properties Control window.

4. 110 State Properties . 5.Icon Justification drop-down menu Select Absolute to manually position the image. Click Icon Justification (also in the States tab of the Properties Control window) to set the justification of the icon on the button (FIG. TPDesign4 (v2. Click OK to close the Select Resource dialog. 109 Select Resource dialog If you don't see the desired image file listed in the Select Resource dialog.11 or higher) 105 . FIG.Working With Buttons FIG. 110). you need to import the image file into the project and assign it to a slot position.

you will apply a fill to the areas that you want to appear transparent (in most cases the background). With a transparent background color. However. 111): FIG. For example. by making the background color transparent. you can effectively change the shape of the image. if you have a button with an image (FIG. 112 Button With Image and Icon Obviously you don't want that unsightly box framing the icon! You need to edit the icon's fill color and make the background color transparent. 106 TPDesign4 (v2. 113 Button With Image and Icon using transparent background Check the documentation for your image-editing program to learn about applying transparency to your images. 113): FIG. and select transparent as the fill color. just like you would for any other color in the palette. but will display without the background (FIG. Unless you are actually using transparency. since they are usually slightly smaller in size.11 or higher) . you can take advantage of transparency support in TPD4. JPGs are recommended over PNGs. 111 Button With Image and you apply an icon that doesn't use transparent as the background color.Working With Buttons Working With Transparent Backgrounds When you are applying an icon. For the transparent color to be interpreted correctly by TPD4. the icon actually retains its original rectangular shape. the PNG file must be saved with RGB colors. there are a few key concepts to understand: Of all the image file formats supported by TPD4. Raster images are always created in the shape of a rectangle. When using images with transparencies in TPD4. to accommodate layering of images without trying to match colors across layers. Generally speaking. only PNGs accommodate transparency as a color. you'll wind up with something like this (FIG. 112): FIG. Typically transparency is used in images for the background color.

Select a video source from the list to apply the video fill to the button. To apply a video fill to a Button: 1.Working With Buttons Displaying a Video Source on a Button TPD4 allows you to assign a video source as the background image on a Page. Adding Text Effects To add a text effect to a button. Alternatively. this property applies to all the buttons in the selected column. TPDesign4 (v2. In the Properties Control window . click Video Fill to activate the drop-down list of available video sources (FIG. Popup Page or Button.States Tab. be sure to consider all of the button states when applying the video fill. 114 Video Fill drop-down menu (State Property) The Video Fill options presented will depend on the panel type selected for this project. Organization of device controls is essential to good touch panel design. 115 Text Effect drop-down menu (State Property) For List Box buttons. organize and cross-link your control pages. and select a text effect from the Text Effect (State) Property (FIG. Page Flips A basic touch panel page design concept is the Page Flip. use the All States option in the Properties Control window (States tab). and page flips allow you to separate. Refer to the TPD4 online help for previews of each Text Effect. 115): FIG.11 or higher) 107 . 2. 3. Select (or a create) a Button in your project. FIG. containing only buttons that control the DVD player. A basic example would be a button labeled "DVD Player" on a main page that when touched. A page flip is a button attribute that allows the user to press a button to "flip" through different panel pages. opens a DVD Player page. To apply the video fill across all states. select the button in the Design View window. 114). Typically you would set up a different control page for each piece of equipment. Since this is a state-oriented setting. you can use Ctrl+A to select all states in the State Manager window.

Click the down arrow in the Target column to select the target of the selected Page Flip Action (FIG. 117). Select a (or create a new) button.. Depending on the type of page flip action selected. and access a drop-down list of Page Flip Actions (FIG. See the Page Flip Actions section on page 109. Click the browse button (. 108 TPDesign4 (v2.. click on Page Flip to enable the editable field.11 or higher) . popup page or popup group to open. 118).Working With Buttons Creating a Page Flip 1.) to open the Button Page Flip Actions dialog (FIG. In the Properties Control window (General tab). 3. you may need to also specify the target page. Click the Add command button to create a new page flip for this button. FIG. 116). 116 Button Page Flip Actions dialog 4. FIG. 117 Button Page Flip Actions dialog (Page Flip Actions drop-down menu) 5. 2.

dropping a page will add a 'standard page' flip action. Show Popup . You can apply multiple page flips to any button. drag it into a Design View window and drop it onto a button to create a flip to that page or popup page. drag it into a Design View window and drop it onto a button to create a flip to that page or popup page. Alternatively. If dragged with the right mouse button. Previous Page . you can also drag and drop a page or popup page from the Workspace window onto the Page Flip property in the Properties Window (General tab). TPDesign4 (v2.This selection populates the Target list box with a list of popup pages in your project. Multiple Standard page flips are allowed. By default. Page Flip Actions With a button selected in a Design View window. you can also drag and drop a page or popup page from the Workspace window onto the Page Flip property in the Properties Control window (General tab). Use the up and down arrows to re-arrange the order of the page flips if necessary. If dragged with the right mouse button. Select a target popup page for the page flip (to hide when the button is touched).11 or higher) 109 .Working With Buttons FIG.This selection populates the Target list box with a list of standard pages in your project. By default. 118 Button Page Flip Actions dialog (Target page selection) 6. Select a target page for the page flip. the drop will offer a list of all applicable page flip actions. dropping a page will add a 'standard page' flip action. and specify the target page. Repeat this process as desired to create multiple page flips on the button. Drag & Drop To Set Page Flips TPD4 supports a shortcut for adding page flips: Simply select the target page or popup page for the flip in the Workspace window (Pages tab). Alternatively. where you can set the type of page flip to apply to the selected button. and dropping a popup will add a 'show popup' flip action to that button. Click the Add command button to access the Page Flip Actions drop-down list which allows you to select from a list of available page flip actions: Standard Page . Hide Popup .This selection sets the page flip to go to the previous page (relative to the order of existing page flips) when the button is touched. the drop will offer a list of all applicable page flip actions.This selection populates the Target list box with a list of popup pages in your project. and dropping a popup will add a 'show popup' flip action to that button. click Page Flip in the Properties Control window (General tab) to open the Button Page Flip Actions dialog. TPD4 supports a shortcut for adding page flips: Simply select the target page or popup page for the flip in the Workspace window (Pages tab). Select a target popup page for the page flip (to show when the button is touched).

Copying/Pasting Buttons The Copy and Paste functions in TPD4 always work on the element (including buttons. 110 TPDesign4 (v2. Select a target popup page for the page flip (to toggle hide/show when the button is touched). flip to page three. the location or dimensions of the copied buttons exceeds the boundaries of the target popup page. Hide Popups on Page . then you will have copied only the Channel Port entry in the Properties Control window. Hide Popup Group . which is not always necessarily a button displayed in the Design View windows. If. when copying buttons from a page to a popup page. bitmaps.This selection populates the Target list box with a list of popup page groups in your project. Hide All Popups .This selection sets the page flip to clear all popup pages when the button is touched. the pasted button will use the palette that is currently active in the project that the button is copied into (as opposed to the palette that was used to create the button). only adjusting the properties required for them to properly fit on the target popup page. Depending on the differences between the palette in the button's source project and the palette in the target project. and not the associated button (even though it is selected in the Design View window).This selection flips to the page specified. flip to page two. if you have selected an item in the Properties Control window (let's say you've selected "Channel Port". Use this option when you do not wish to return to the page that initiated the page flip when a subsequent previous page flip action is performed.Working With Buttons Toggle Popup . even individual button properties displayed in the Properties Control window) which has the current Edit Focus. This means the last thing selected.Pages tab (no open Design View window required) or (2) the active Design View window. since it is not a valid Address Port number.11 or higher) . Page Flip Forget . Copying Buttons Copying a button or buttons from a page or popup page is possible by selecting the desired buttons in an active Design View window then either selecting Edit > Copy from the main menu or by clicking the Copy button in the main toolbar. but does not retain the source page in the page flip stack (which is used to execute previous page flips). the pasted items will attempt to maintain their size.This selection populates the Target list box with a list of standard pages in your project. Multiple Popup actions like Toggle popup. Select the page that you want to hide the popups on when the button is touched. then with a previous page flip go directly back to page one. For example. Show Popup and Hide Popup for the same Popup Page are allowed on the same button. you are not allowed to paste it to the Address Port field. Select a target popup page group for the page flip (to hide when the button is touched). This allows the user start on page one. this can cause color shifting on the button. and you perform a "Copy". If for example you had copied the value "410" from the Left (position) field in the Properties Control window. You can then paste the Channel Port number anywhere else in the Properties Control window (where the copied data is considered to be a valid entry). Pasting Buttons You can paste (by either clicking Edit > Paste from the main menu or the Paste button in the main toolbar) a previously copied button or buttons onto: (1) a page or popup page name in the Workspace Navigator window . When you copy a button from one project into another project that is using a different palette.This selection populates the Target list box with a list of popup pages in your project.

Once a property has been modified.Working With Buttons Editing Button Properties Edit Button Properties via the Properties Window: select the button property that you wish to modify. and enter (type or select) a new value in the corresponding field. You can de-select a button by either selecting another button. the Prev or Next button. Click and drag outside the boundaries of the desired buttons to perform a marquis selection. or select Edit > Select All from the main menu. and the previous value will be replaced in the box. If the value is inappropriate for the selected object. you will be notified via a message. Although you may select and retain the selection of buttons on multiple pages. you may only act on the selected buttons on one page / popup page at a time. You can also select multiple buttons. or by left-clicking on the background of the page or popup page. using any of the following techniques: Hold the Shift key and left-click. either press the Enter key. Editing Multiple Selections Buttons may be acted upon individually by clicking the Selection Tool from the toolbar or selecting Edit > Selection Tool from the main menu. or left click the mouse in any box other than the current box to apply the change.11 or higher) 111 . TPDesign4 (v2. then clicking on the desired button. To select all available buttons on a page or popup page you may either use the Ctrl+A hotkey.

The following button properties are supported for General buttons: General Buttons . FIG. Programming and State button properties. To edit any of the properties in the table.Working With Buttons General Buttons General buttons are basic dual-state buttons that can be used for most touch panel functions. Depending on the item selected. 119 General Properties: Type (General button) Setting Properties: General Buttons Once you have created a General button.11 or higher) . or both. you can use the Properties Control window to set/edit General. which have specific functionalities. select from a drop-down menu.Supported Properties General Properties Type Name Lock Button Name Description Left Top Width Height Above Popups Touch Style Border Style Disabled Hidden Password Protection Page Flip Programming Properties Feedback Address Port Address Code Channel Port Channel Code Level Control Type String Output Port String Output Command Port Command Output Note: Maximum command. click on an item in the right-hand column to activate the field. as opposed to other button types. States Properties Draw Order Border Name Chameleon Image Border Color Fill Color Text Color Text Effect Color Overall Opacity Video Fill Video Cropping Video Pass-Thru Streaming Source Bitmap Bitmap Justification Bitmap X Offset Bitmap Y Offset Scale Bitmap To Fit Icon Slot Icon Justification Icon X Offset Icon Y Offset Font Text Text Justification Text X Offset Text Y Offset Text Effect Word Wrap Sound 112 TPDesign4 (v2. and are not associated with a specific functionality. you can either set the item manually. string and text length = 4096 characters.

The following button properties are supported for Multi-State General buttons: Multi-State General Buttons . select from a drop-down menu.11 or higher) 113 . To edit any of the properties in the table. Depending on the item selected. and that support up to 256 states. click on an item in the right-hand column to activate the field. Use multi-state buttons when you want to utilize animation effects.Working With Buttons Multi-State General Buttons Multi-State General buttons are basic multi-state buttons that can be used for most touch panel functions. Programming and State button properties. you can either set the item manually.Supported Properties General Properties Type Name Lock Button Name Description Left Top Width Height Above Popups Touch Style Border Style State Count Animate Time Up Animate Time Down Auto-Repeat Disabled Hidden Password Protection Page Flip Programming Properties Feedback Address Port Address Code Channel Port Channel Code Level Control Type String Output Port String Output Command Port Command Output Note: Maximum command. you can use the Properties Control window to set/edit General. 120 General Properties: Type (Multi-State General button) Setting Properties: Multi-State General Buttons Once you have created a Multi-State General button. FIG. States Properties Draw Order Border Name Chameleon Image Border Color Fill Color Text Color Text Effect Color Overall Opacity Video Fill Video Cropping Video Pass-Thru Streaming Source Bitmap Bitmap Justification Bitmap X Offset Bitmap Y Offset Scale Bitmap To Fit Icon Slot Icon Justification Icon X Offset Icon Y Offset Font Text Text Justification Text X Offset Text Y Offset Text Effect Word Wrap Sound TPDesign4 (v2. or both. string and text length = 4096 characters.

this value determines the level value that will be recalled by this button. Relative or None): Absolute: The button acts like a preset and sets the level to the desired value. Set the time (in 1/10th-second increments) that it takes to ramp from the bottom to the top of the specified range (default = 2). For example. this value determines the amount of adjustment relative to the current level resulting from this button. For Relative level control. Select a level control type for the selected button (Absolute. Select 0 (Setup port) or 1 as the level port for this button. This value determines the repeat time (in 1/1000th-second increments) for relative level control.11 or higher) . • Range Low: • Range High: • Level Control Repeat (Relative Level Control only): Set the bottom of the level range (0-255). if this value is set to 1000. Relative: The button increments or decrements the current level value by a fixed amount. Set the top of the level range (0-255). Set the time (in 1/10th-second increments) that it takes to ramp from the top to the bottom of the specified range (default = 2). Select or enter the level code sent to the master on the selected port. the user can hold the button down for one second to cause the level to raise or lower repeatedly (according to the specified Level Control Value) without having to press the button each time. • Range Time Up: • Range Time Down: 114 TPDesign4 (v2. These options require the following additional parameters to be defined: Level Control Parameters • Level Port: • Level Code: • Level Control Value: Select or enter the port to which the Level code will be applied. For relative level control. this value can be entered as a positive integer (to raise the relative level setting) or a negative integer (to lower the relative level setting). For Absolute level control. Select AutoAssign to automatically assign the level code to this button.Working With Buttons Level Control Parameters The Level Control Type options (set in the Programming tab of the Properties Control Window) allow General and Multi-State General buttons to directly control a level without the need for NetLinx code.

you can use the General tab of the Properties Control window to set/ edit general (non-state oriented) button properties. FIG. select from a drop-down menu. To edit any of the properties in the table. Depending on the item selected.Supported Properties General Properties Type Name Lock Button Name Description Left Top Width Height Above Popups Touch Style Border Style Disabled Hidden Value Direction Slider Name Slider Color Page Flip Programming Properties Address Port Address Code Channel Port Channel Code Level Port Level Code Level Function Range Low Range High Range Drag Increment Range Inverted Range Time Up Range Time Down String Output Port String Output Command Port Command Output Note: Maximum command.11 or higher) 115 . The following button properties are supported for Bargraph buttons: Bargraph General Buttons . string and text length = 4096 characters. you can either set the item manually. click on an item in the right-hand column to activate the field. 121 General Properties: Type (Bargraph button) Setting Properties: Bargraph Buttons Once you have created a Bargraph button.Working With Buttons Bargraph Buttons Bargraph buttons are level monitors and adjustable level controls that can be configured to monitor or adjust audio outputs and lighting levels. States Properties Draw Order Border Name Chameleon Image Border Color Fill Color Text Color Text Effect Color Overall Opacity Video Fill Video Cropping Video Pass-Thru Streaming Source Bitmap Bitmap Justification Bitmap X Offset Bitmap Y Offset Scale Bitmap To Fit Icon Slot Icon Justification Icon X Offset Icon Y Offset Font Text Text Justification Text X Offset Text Y Offset Text Effect Word Wrap Sound TPDesign4 (v2. or both.

The following button properties are supported for Multi-State Bargraph buttons: Multi-State Bargraph Buttons . States Properties Draw Order Border Name Chameleon Image Border Color Fill Color Text Color Text Effect Color Overall Opacity Video Fill Video Cropping Video Pass-Thru Streaming Source Bitmap Bitmap Justification Bitmap X Offset Bitmap Y Offset Scale Bitmap To Fit Icon Slot Icon Justification Icon X Offset Icon Y Offset Font Text Text Justification Text X Offset Text Y Offset Text Effect Word Wrap Sound 116 TPDesign4 (v2. and that (like Multi-State General buttons) support up to 256 states. Depending on the item selected.Supported Properties General Properties Type Name Lock Button Name Description Left Top Width Height Above Popups Border Style State Count Disabled Hidden Value Direction Page Flip Programming Properties Address Port Address Code Channel Port Channel Code Level Port Level Code Level Function Range Low Range High Range Drag Increment Range Inverted Range Time Up Range Time Down String Output Port String Output Command Port Command Output Note: Maximum command. FIG. click on an item in the right-hand column to activate the field. Multi-State Bargraph buttons also allow you to create a custom bargraph slider (using an image icon). select from a drop-down menu. Programming and State button properties. To edit any of the properties in the table. 122 General Properties: Type (Multi-State Bargraph button) Setting Properties: Multi-State Bargraph Buttons Once you have created a Multi-State Bargraph button. Use multi-state buttons when you want to utilize animation effects. or both.11 or higher) .Working With Buttons Multi-State Bargraph Buttons Multi-State Bargraph buttons are level monitors and adjustable level controls that can be configured to monitor or adjust audio outputs and lighting levels. string and text length = 4096 characters. you can either set the item manually. you can use the Properties Control window to set/edit General.

adjusted level value (raw level value . 123 Slider Types Slider types are not available for Multi-State Bargraph buttons.range low) $R . selectable via the General tab of the Properties Control window): FIG. The following formatting codes will be replaced with the identified values: $P .range low $H .raw level value $L .level percentage $V .11 or higher) 117 .range (range high . Formatting Codes Formatting codes can be used in the Text for Bargraph and Multi-State Bargraph buttons.range low) $$ .$ character TPDesign4 (v2.range high $A .Working With Buttons Slider Types There are several slider types available for use with Bargraph buttons.

FIG.. there are no slider-oriented settings to make in the Properties Control window. Note that when you draw a Multi-State Bargraph button. Select State 1 in the Properties Control Window (States tab).. To create a custom slider: 1. you touch the bargraph button and move the slider up and down (or side to side on a horizontal Bargraph button). click the Browse button (. 124). 4. you'll be animating a change in levels as opposed to a push/release. Rather than assign a prepared slider. 124 Image and Text Positioning dialog 6. The start position for Multi-State Bargraph buttons is always the bottom of the bargraph (representing the minimum level setting).) to open the Image and Text Positioning dialog (FIG. like you would for a normal Bargraph button. as on Multi-State General buttons. 118 TPDesign4 (v2. like multi-state General buttons. 5. Also note that unlike regular bargraph buttons. move the icon into the position that you want to be the "start position" for the bargraph slider. In the Icon X Offset state property. that there is no slider indicated on the button (in the Design View window). use up to 255 states to animate the button action. This is because multi-state bargraph buttons. In the Image and Text Positioning dialog. Custom sliders on Multi-state Bargraph Buttons work on the panel basically the same as regular sliders. Apply a Icon Slot assignment to State 1. Set the Icon Justification to Absolute.Working With Buttons Creating a Custom Slider Multi-State Bargraph buttons work differently than regular Bargraph buttons. 2. Create a Multi-State Bargraph button. 3. you can animate an icon across the states to serve as a custom slider. In the case of Bargraph buttons.11 or higher) . or in the State Manager window. You adjust a level.

Ctrl+click to select just the first and last states. Always begin the icon animation starting (at State 1) at the bottom position. Generally. The end position for Multi-State Bargraph buttons is always the top of the bargraph (representing the maximum level setting). or in the State Manager window. FIG. the size of the button that the icon will travel across) needed for the slider should be taken in to consideration as well. TPDesign4 (v2. The user will always press and drag the slider up and down to adjust the level. 126): FIG. 7. 9. In the State Manager window. Keep this in mind when setting up a custom slider.e. A "short" bargraph button would require less states to create a smooth motion than a "long" one (that for example spans the entire touch panel page). 8. Add States to the button (up to 255 total). duplicating State 1 (containing the icon). Select the last State in the Properties Control Window (States tab). Multi-State Bargraph buttons are always oriented vertically. move the icon into the position that you want to be the "end position" for the bargraph slider. The button action is the same (press the bargraph slider and drag to adjust the level). which does not contain the icon (the original State 2 setting). In the Image and Text Positioning dialog. you'll want to delete the "extra" state at the end of the sequence. 126 State Manager Window (new Icon position for final State) 10. 125 State Manager Window (showing Multi-State Bargraph button with 10 states) Keep in mind that the more states used to animate the movement of the icon.Working With Buttons One key difference between regular and Multi-State Bargraph buttons is the way they work on the panel. the icon’s new position in the last State is indicated in the State Manager window (FIG. 125 shows the State Manager Window with 10 states: FIG. the smoother and more accurate the slider will be. but while regular bargraph buttons can be set as either horizontal or vertical. The range of motion (i. When you close the Image and Text Positioning dialog. and ending at the top.11 or higher) 119 .

128). 120 TPDesign4 (v2. you can also utilize the other tweeners in conjunction with the custom slider to create complex color transition effects. 127). open the Button Preview window. See the Working With Animation Effects section on page 223.. The alpha values in the selected image represent the areas where touch will be registered. If you select Touch Map as the Value Direction (General property). 128 General Properties . Right-click on either of the selected states and select Slot Position from the Tweeners sub-menu. Remember. FIG..Touch Map Click the browse button (.Working With Buttons 11. Touch Map images allow you to use irregular shapes for active bargraph buttons. The results of the tweening are displayed in the State Manager window (FIG. FIG.11 or higher) . 127 State Manager Window (showing tweened Icon Position) To preview the custom slider in action. and the red-channel values represent the overall value to change the control to. and click and drag the cursor up and down within the button to move the slider up and down.) next to Touch Map to select an image to use as a Touch Map (via the Resource Manager). Working With Touch Maps TPD4 supports Touch Maps for Multi-State Bargraph buttons. an additional state property is enabled (displayed directly below Value Direction in the Properties Control window) called Touch Map (FIG.

Setting Properties: Joystick Buttons Once you have created a Joystick button. To edit any of the properties in the table. The following button properties are supported for Joystick buttons: Joystick Buttons . select from a drop-down menu. Depending on the item selected. there is no On state associated with them. you can either set the item manually. string and text length = 4096 characters.Supported Properties General Properties Type Name Lock Button Name Description Left Top Width Height Above Popups Border Style Disabled Hidden Cursor Name Page Flip Programming Properties Address Port Address Code Channel Port Channel Code Level Port Level Code Level Aux Level Function Range Low Range High Range Drag Increment Range Inverted Range Time Up Range Time Down String Output Port String Output Command Port Command Output Note: Maximum command. Joystick buttons only use the Off state. or both. FIG. 129 General Properties: Type (Joystick button) Because Joystick buttons don't work in the same way as the other button types (in that they don't generate pushes/releases). you can use the Properties Control window to set/edit General. Programming and State button properties. States Properties Draw Order Border Name Chameleon Image Border Color Fill Color Text Color Text Effect Color Overall Opacity Video Fill Video Cropping Video Pass-Thru Streaming Source Bitmap Bitmap Justification Bitmap X Offset Bitmap Y Offset Scale Bitmap To Fit Icon Slot Icon Justification Icon X Offset Icon Y Offset Font Text Text Justification Text X Offset Text Y Offset Text Effect Word Wrap Sound TPDesign4 (v2.11 or higher) 121 . click on an item in the right-hand column to activate the field.Working With Buttons Joystick Buttons Joystick buttons are vertical and horizontal direction controllers that can be used for pan and tilt control (typically for camera operation). as is reflected in the State tab of the Properties Control window.

or both. Programming and State button properties. you can use the Properties Control window to set/edit General. States Properties Border Name Border Color Fill Color Text Color Text Effect Color Overall Opacity Font Text Text Effect 122 TPDesign4 (v2. string and text length = 4096 characters.Supported Properties General Properties Type Name Lock Button Name Description Left Top Width Height Above Popups Touch Style Border Style Disabled Hidden Password Character Display Type Max Text Length Input Mask Page Flip Programming Properties Address Port Address Code Channel Port Channel Code Note: Maximum command. Setting Properties: Text Input Buttons Once you have created a Text Input button. 130 General Properties: Type (Text Input button) Text Input buttons are not supported on R-4 remote controllers. To edit any of the properties in the table. you can either set the item manually. Depending on the item selected.11 or higher) . click on an item in the right-hand column to activate the field. select from a drop-down menu. FIG. The following button properties are supported for Text Input buttons: Text Input Buttons .Working With Buttons Text Input Buttons Text Input buttons are intended for user-input (using the on-screen keyboards) on the panel.

Input Mask Ranges Input Mask Ranges allow a user to specify the minimum and maximum numeric values for a given field. plus and minus signs allowed). plus [+] and minus [-] signs not allowed). Letter (A to Z.Working With Buttons Input Mask Characters The following table lists the available input mask characters. and which characters each input mask allows in any given position (for use with the Input Mask property for Text Input buttons): Input Mask Characters 0 9 # L ? A a & C Digit (0 to 9. The following table lists the available Input Mask Next Field characters (for use with the Input Mask state property for Text Input buttons): Input Mask Next Field Characters { } Start Next Field List End Next Field List Input Mask Operators Input Mask Operators change the behavior of the field in various ways. Letter (A to Z. The following table lists the available input mask ranges (for use with the Input Mask state property for Text Input buttons): Input Mask Ranges [ ] | Start Range End Range Range Separator Input Mask Next Field Characters Input Mask Next Field Characters allow the user to specify a list of characters that caused the keyboard to advance the focus to the next field when pressed instead of inserting the test into the text input area. TPDesign4 (v2. Only one range is allowed per field and the use of a range implies numeric entry only. The following table lists the available Input Marks Operators (for use with the Input Mask state property for Text Input buttons): Input Mask Operators < > ^ Causes all characters to be converted to lowercase. entry optional).11 or higher) 123 . Letter or digit (entry required). Sets the overflow flag for this field. Letter or digit (entry optional). entry required). Causes all characters to be converted to uppercase. plus and minus signs not allowed). Any character or a space (entry required). Digit or space (entry not required. Digit or space (entry not required. entry required. Any character or a space (entry optional).

select from a drop-down menu. Computer Control buttons support password protection separate from any additional username/ password credentials that the user may require to access the remote system once the connection has been made.Working With Buttons Computer Control Buttons Computer Control buttons provide a remote desktop to an attached PC running a VNC server. To edit any of the properties in the table. 800x600 or 1024x768). Programming and State button properties. States Properties Fill Color Text Color Overall Opacity 124 TPDesign4 (v2. Computer Control buttons only use one state: Off. Computer Control buttons are not supported on R-4 remote controllers. click on an item in the right-hand column to activate the field. allowing you to control the PC via the Touch Panel interface (for remote control purposes).Supported Properties General Properties Type Name Lock Button Name Description Left Top Width Height Above Popups Disabled Hidden Remote Host Remote Port Password Color Depth Compression Scale To Fit TakeNote Enabled Programming Properties Address Port Address Code Channel Port Channel Code String Output Port String Output Command Port Command Output Note: Maximum command. FIG. string and text length = 4096 characters. Depending on the item selected. Setting Properties: Computer Control Buttons Once you have created a Computer Control button. The following button properties are supported for Computer Control buttons: Computer Control Buttons .11 or higher) . or both. 131 General Properties: Type (Computer Control button) Computer Control buttons are constrained to one of three predefined sizes (640x480. you can use the Properties Control window to set/edit General. you can either set the item manually.

or both.Working With Buttons TakeNote Buttons TakeNote buttons work in conjunction with G4 Computer Control to provide a remote desktop to an attached PC running a VNC server.11 or higher) 125 . Setting Properties: TakeNote Buttons Once you have created a TakeNote button. you can use the Properties Control window to set/edit General. Programming and State button properties. allowing you to use a G4 panel to annotate to either a windows desktop or on other G4 panels.Supported Properties General Properties Type Name Lock Button Name Description Left Top Width Height Above Popups Border Style Disabled Hidden TakeNote Host TakeNote Port Programming Properties Address Port Address Code Channel Port Channel Code String Output Port String Output Command Port Command Output Note: Maximum command. 132 General Properties: Type (TakeNote button) TakeNote buttons are not supported on R-4 remote controllers. you can either set the item manually. Depending on the item selected. select from a drop-down menu. The following button properties are supported for TakeNote buttons: TakeNote Buttons . string and text length = 4096 characters. click on an item in the right-hand column to activate the field. FIG. To edit any of the properties in the table. States Properties Draw Order Border Name Chameleon Image Border Color Fill Color Text Color Text Effect Color Overall Opacity Video Fill Video Cropping Video Pass-Thru Streaming Source Bitmap Bitmap Justification Bitmap X Offset Bitmap Y Offset Scale Bitmap To Fit Icon Slot Icon Justification Icon X Offset Icon Y Offset Font Text Text Justification Text X Offset Text Y Offset Text Effect Word Wrap TPDesign4 (v2.

Working With Buttons Setting Default New Button Parameters Use the Drawing toolbar to set the default new button parameters (FIG. until the Font and Font Size specifications are changed. 134 Draw Tools (Selection/Drawing Tools toolbar) 2. Click the down-arrow on the first drop-down menu to the right of the State button to select the Type of button you want to create (default = general). 6. 126 TPDesign4 (v2. This toolbar is normally at the top of your screen and provides you with a mechanism for controlling various elements of future button creation. This selection becomes the default for all subsequent buttons. 3. until the Border Style selection is changed. this selection becomes the default for all subsequent buttons. This selection becomes the default for all subsequent buttons. 133). Click the down-arrow on the first palette button (see FIG. On the extreme left side of the toolbar. Again. Click the down-arrow on the second drop-down menu (to the right of the Button Type drop-down) to select a Border Style for the button. until the settings are changed. Button Type Border Type Font Toggle On/Off State properties Font Size Border Color Fill Color Text Color FIG. This way. border family. Button Draw Tool FIG. 8. You can control the button type. until the Border Color setting is changed. but cannot be docked in a vertical fashion. These selections become the default text settings for all subsequent buttons. as the drop down lists contained on the toolbar do not support this type of docking. When the Button Draw tool is selected. the Drawing toolbar becomes activated. 133 Drawing toolbar The settings that are specified in this toolbar become the default settings for all new buttons. 134). Buttons are always drawn in the Off State. Click the down-arrow on the second palette button (see FIG. 4. Click the down-arrow on the third palette button (see FIG. font. 133) to set the Fill Color for the button. Select the Button Draw tool from the Selection/Draw toolbar (FIG. The Drawing toolbar allows you to control certain new button creation properties for both the Off and the On state of a button. this selection becomes the default for all subsequent buttons.11 or higher) . 5. font size. you will see a button that will allow you to toggle the default choices for both the Off and the On state of a button. until the Text Color setting is changed. Of course. 133) to set the Text Color for the button. This selection becomes the default for all subsequent buttons. Use the next two drop-down menus to specify a Font and Font Size as the default text attributes for new buttons. you can quickly create sets of buttons that are visually consistent. To set new button parameters: 1. until the Fill Color setting is changed. border color and text color. This toolbar can either be free floating or docked. button fill color. 7. 133) to set the Border Color for the button. until the Button Type selection is changed.

and note that the first button you select becomes the controlling button (all other buttons are moved to align with the controlling button). Shift Up/Shift Down . 135 describes the tools in the Order Assist toolbar: Send To Back Send To Front Shift Up Shift Down FIG. 135 Order Assist toolbar Send to Front/Send To Back . Choose which Align tool to use based on the shape and size of the selected buttons. Decrease.Working With Buttons Using the Drawing Assist Features The Order Assist. Increase. 136 describes the tools in the Position Assist toolbar: Align tools Horizontal Spacing tools Center tools FIG. and the desired design effect. relative to each other (not relative to the area of the page). Remove . Horizontal Spacing (Equal. Right.Use the Align commands to quickly align selected buttons on the page. Center Horizontal/Vertical . and note that the first button you select becomes the controlling button (all other buttons are moved to align with the controlling button). You must select at least two buttons to enable the Align options. To distribute buttons evenly on the page. use these commands to shift the selected button(s) up and down just one layer on the page (as opposed to placing them on just the top or bottom layer). then increase or decrease spacing as necessary. Vertical Center.When you have one or more buttons that overlap on the page. select equal spacing. TPDesign4 (v2. Decrease. select equal spacing. Increase. Bottom . You must have at least three buttons selected to enable these options. Position Assist and Size Assist toolbars contain shortcuts to many layout and design control options for controlling various elements of existing button(s) size and position. use these commands to place the selected button(s) to either the top or bottom layer on the page. You must have at least three buttons selected to enable these options. Order Assist toolbar FIG. To distribute buttons evenly on the page.Use these commands to quickly center one or more selected buttons either Horizontally or Vertically on the page. Horizontal Center.Use these commands to control the vertical spacing between selected buttons. Position Assist toolbar FIG.Use these commands to control the horizontal spacing between selected buttons.11 or higher) 127 . Vertical Spacing (Equal.When you have one or more buttons that overlap on the page. and note that the first button you select becomes the controlling button (all other buttons are moved to align with the controlling button). Remove) . Top. then increase or decrease spacing as necessary. 136 Position Assist toolbar Vertical Spacing tools Align: Left.

the Increase/ Decrease Width commands will always adjust the width on the right side of the selected button(s). try to choose button border styles that accommodate and compliment the button image (if there is one). Size To Image may appear to resize the button to be too small to display the entire image (because part of the image is hidden.Working With Buttons Size Assist toolbar FIG. then select the button(s) that you want to resize. Click these buttons to adjust the button width/height in increments specific to the selected border.These commands are like nudge controls for button width and height. 137 describes the tools in the Size Assist toolbar: Make Same tools Make Ideal For Border Increase Height/Width for Border tools Size To Image Aspect Ratio FIG. and click one of these commands.This command automatically resizes the selected button(s) to the smallest size possible that still accommodates the selected border. and click Size To Image to automatically resize the button to the same size as it's associated bitmap or icon.85:1 Anamorphic Video 2. Note that since all measurements in TPD4 are zero-based. Aspect Ratio . 128 TPDesign4 (v2. Size To Image . the Circle and Oval border types are more problematic in terms of potential image cropping than are rectangular borders (assuming the associated image is rectangular). 137 Size Assist toolbar Make Same Width/Height/Size .Select a button that has either a bitmap or icon image assigned to it. or cropped by the border style). For example. and the Increase/Decrease Height command will always adjust the height on the bottom side of the selected button(s). As a design concept. For example. This option is typically for use with the Circle.35:1 Anamorphic Video Make Ideal For Border . Depending on the size of the button. Oval and Diamond border types. Click this command to resize the button to become a perfect circle. and the selected border type. if you create a button with the border "Circle 150". Increase/Decrease Width/Height For Border . the resulting button will not appear as a perfect circle. All selected buttons are resized to match the width or height of the controlling button (the first button selected).11 or higher) .Select a button that has the width or height that you want to match.85:1 Letterbox Video 1.This tool allows you to set the aspect ratio (for use with video fills). Note that the border uses some of the interior area of the button. and draw a circle that is smaller than 150 pixels in diameter (or not perfectly round). Click this button to select from the drop-down menu: 4:3 Video 16:9 Letterbox Video 16:9 Anamorphic Video 1.35:1 Letterbox Video 2.

bottom edges: Aligns the bottom edges of all selected buttons.select the type of horizontal alignment to apply to the selected buttons: none: No alignment (default setting). left to right spacing: Aligns the left edge of the first selected button to the right edge of the next selected button. Select Layout > Alignment & Sizing to access this dialog (FIG. bottom. left edges: Aligns the left edges of all selected buttons.11 or higher) 129 . top edges: Aligns the top edges of all selected buttons. Offset . Horizontal .These options allow you to align the selected buttons horizontally. All selected buttons are aligned this way in the order in which they were selected. FIG. Note that the order in which the buttons are selected in the Design View window controls how several of these options work. 138).select the type of vertical alignment to apply to the selected buttons: none: No alignment (default setting). Vertical. negative values offset them to the left. All selected buttons are aligned this way in the order in which they were selected. or along any edge (top. Default = 0. Positive values offset the selections to the right. right edges: Aligns the right edges of all selected buttons. centers: Aligns the centers of all selected buttons. you must have more than one button selected (in a Design View window). Indicate the number of pixels to offset the alignment options (range = 0 . 138 Alignment & Sizing dialog The options in this dialog include: Alignment .The horizontal alignment values may be offset either absolutely or incrementally.the horizontal measurement of the selected panel in pixels). top edges to bottom: Aligns the top edges of selected buttons to the bottom edge of the button that was selected first. left edges to right: Aligns the left edges of selected buttons to the right edge of the button that was selected first. right to left spacing: Aligns the right edge of the first selected button to the left edge of the next selected button. centers: Aligns the centers of all selected buttons. TPDesign4 (v2. bottom edges to top: Aligns the bottom edges of selected buttons to the top edge of the button that was selected first. left or right).Working With Buttons Using the Alignment & Sizing dialog To access this dialog. vertically (or both) along either the centers of the buttons. right edges to left: Aligns the right edges of selected buttons to the left edge of the button that was selected first. Use the options in this dialog to align and/or resize the selected buttons.

Double-click inside the title bar to dock the window. the Button Preview window is fully dockable. text and color settings on a Push and Release of the button.Resizes all selected buttons to match the height of the button that was selected first. 2. but will not have any data linkage. Sizing . 139 Button Preview window Like the other windows in TPD4.These options allow you to resize the selected buttons to make them match in width. Offset . Default = 0. Button Preview is not available for Joystick buttons. Make Same Height . To preview a button: 1. 139). Make Same Width .Working With Buttons top to bottom spacing: Aligns the top edge of the first selected button to the bottom edge of the next selected button. Note that the order in which the buttons are selected in the Design View window controls how several of these options work. Specify whether to adjust the sizing values absolutely or incrementally. Specify whether to adjust the sizing values absolutely or incrementally. In this case. Button Preview for List Box Buttons is only supported for a selected child button in unmanaged mode.The vertical alignment values may be offset either absolutely or incrementally. Click on the Push button. 3. 130 TPDesign4 (v2. height or both. The Button Preview window displays a preview of the selected button. negative values subtract). Button Preview functions the same as for a General button with no text or graphics. negative values subtract). Initially the button is shown in its Off state. bottom to top spacing: Aligns the bottom edge of the first selected button to the top edge of the next selected button. Change .the vertical measurement of the selected panel in pixels). but initially it opens undocked. All selected buttons are aligned this way in the order in which they were selected.11 or higher) . border. Previewing a Button The Button Preview Window allows you to preview a button so you can check size.specify a number of pixels to add or subtract from the selections height (positive values add pixels.Resizes all selected buttons to match the width of the button that was selected first.specify a number of pixels to add or subtract from the selections width (positive values add pixels. Indicate the number of pixels to offset the alignment options (range = 0 . Select View > Button Preview to open the Button Preview window (FIG. All selected buttons are aligned this way in the order in which they were selected. Change . FIG. Select the button that you want to preview.

FIG.Working With Buttons Creating a Date Button A Date Button is a button that displays the current date on the panel. To create a date button: 1. Click the plus (+) symbol next to Date Display to expose a drop-down menu of time display formats to choose from (FIG. 141 Address Code drop-down menu 5. 142). 140). Create a new button.11 or higher) 131 . Select 0-setup port from the drop-down menu (FIG. click the Address Port field to enable the drop-down menu. 3. FIG. 140 Address Port = 0-Setup Port 4. 2. Click the Address Code field to enable the drop-down menu (FIG. 141). but normally you would use the General button type. The button can be of any type. TPDesign4 (v2. In the Programming tab of the Properties window. It is a read-only (non-interactive) button.

click the Address Port field to enable the drop-down menu. Time and Date buttons do not display any text when viewed in TPD4. To create a time button: 1. The button can be of any type. Select the desired display format (Weekday. Select 0-setup port from the drop-down menu (FIG. 143).11 or higher) . Create a new button. 142 Address Code .Date Display drop-down menu 6. 3. Click the Address Code field to enable the drop-down menu (FIG. 2. etc). dd/mm/yyyy. It is a read-only (non-interactive) button. The time or date is only visible once the project is loaded on a touch panel. In the Programming tab of the Properties window. 143 Address Port = 0-Setup Port 4. yyyy-mm-dd. but normally you would use the General button type. FIG. 132 TPDesign4 (v2. 141). Creating a Time Button A Time Button is a button that displays the current time on the panel.Working With Buttons FIG.

145 Address Code . 144 Address Code drop-down menu 5. Click the plus (+) symbol next to Time Display to expose a drop-down menu of time display formats to choose from (FIG.11 or higher) 133 . 145).Working With Buttons FIG. Select the desired display format (24-hour. The time or date is only visible once the project is loaded on a touch panel. Standard or Standard AM/PM).Time Display drop-down menu 6. FIG. TPDesign4 (v2. Time and Date buttons do not display any text when viewed in TPD4.

11 or higher) .Working With Buttons 134 TPDesign4 (v2.

or cursor select). the options include: Default Configuration .for use with a Teletext MIO R-4.for use with a MIO R-4 with transport keys. cursor left. As with the panel resolution. If you have selected any touch panel that is equipped with external pushbuttons.11 or higher) 135 . This option allows you to select from multiple external button layouts. cursor right. panel-wide settings for external controls can be accessed and edited through the External Controls entry in the Pages tab of the Workspace Navigator Window. Teletext keypad .for use with a standard MIO R-4. the External Button Options list is empty. LED. the configuration of the source external controls are copied to the destination controls according to the type of control (general. Copying/Converting External Controls Between Panels TPD4 supports copying and converting the properties for programmable external controls (external pushbuttons and LEDs) for NXD-CV5. or when converting between panel types that both support external buttons.for use with a Teletext MIO R-4 with transport keys. Double-click this entry to access a Design View Window representing the size and placement of the external buttons and LEDs. and MVP-8400 panels. The choices available depend on the type of panel selected in the Panel Type drop-down: If you have selected a panel without external pushbuttons. this selection cannot be modified once the panel project has been created. TPD4 supports copying and converting external controls between panels: When copying a page between panels. TPDesign4 (v2. The global. cursor down. Keypad with Transport Functions . The global. If you have selected the MIO R-4 remote. Teletext Keypad with Transport Functions . External Button Options The first dialog in the New Project Wizard includes an option for selecting External Button Options. Double-click this entry to access a Design View Window representing the size and placement of the external buttons and LEDs. cursor up. NXD-CV7. MVP-7500. which may be selected like any other button for editing.e. panel-wide settings for external controls can be accessed and edited through the External Controls entry in the Pages tab of the Workspace Navigator Window. which may be selected like any other button for editing. "<none>". the only available option is "Default Configuration" (and cannot be changed). Page specific external controls settings are accessed via each page's Design View (with the Page > Show External Controls option enabled). You can edit external control properties on both a panel-wide basis and on a page specific buttonby-button basis. Page specific external controls settings are accessed via each page's Design View (with the Page > Show External Controls option enabled). i.Working With External Controls Working With External Controls Overview TPD4 supports editing the properties for programmable external controls for panels that feature external pushbuttons and LEDs (including R-4 remote controllers).

Global Properties for External Pushbuttons/LEDs TPD4 allows you to set Global or Page-Specific properties for external controls (for projects targeted at panel types that have external pushbuttons). select from a drop-down menu. Once you have selected an external button. Double-click on the External Controls entry to display a Design View Window representing the layout of the external controls on the target panel. cursor right. you can use the General tab of the Properties Control window to set/edit general external control properties. which may be selected like any other button to edit their properties. cursor down. you can either set the item manually. cursor left. LED. Global (panel-wide) settings for external controls are accessed through the new External Controls entry in the panel's tree (displayed in the Pages tab of the Workspace Navigator Window). The following global button properties are supported for external Pushbuttons: External Pushbuttons .Supported Properties General Properties Name Disabled Password Protection Page Flip Programming Properties Address Port Address Code Channel Port Channel Code Level Control Type String Output Port String Output Command Port Command Output Note: Maximum command. which may be selected like any other button to edit their properties. click on an item in the right-hand column to activate the field. States Properties Note: There are no State properties to configure for external controls. Setting Global Properties for External LEDs TPD4 allows you to set Global or Page-Specific properties for external controls (for projects targeted at panel types that have external pushbuttons and LEDs). Depending on the item selected. Page-specific properties are external control properties that change according to the specific page showing on the panel. or when converting between panel types that both support external buttons. Global settings are panel-wide settings that apply to the external controls regardless of the page currently showing on the panel. 3. or both. string and text length = 4096 characters. 136 TPDesign4 (v2. Use the Selection Tool to pick the external control that you want to configure (in the Design View Window). or cursor select. Global settings are panel-wide settings that apply to the external controls regardless of the page currently showing on the panel. To edit any of the properties in the table. the configuration of the source panel's external controls are copied to the destination panel's controls according to the type of control (general. cursor up. Note that are no State properties to configure for external controls.11 or higher) . Page-specific properties are external control properties that change according to the specific page showing on the panel. 2. Setting Global Properties for External Pushbuttons Global (panel-wide) settings for external controls (pushbuttons and LEDs) are accessed through the new External Controls entry in the panel's tree (displayed in the Pages tab of the Workspace Navigator Window). 1. Double-click on the External Controls entry to display a Design View Window representing the layout of the external controls on the target panel.Working With External Controls When copying a page between panels.

or if its behavior is specific to this page. 3.Supported Properties General Properties Name Disabled Programming Properties Feedback Address Port Address Code Channel Port Channel Code States Properties Note: There are no State properties to configure for external controls. you can use the General tab of the Properties Control window to set/edit general button properties. which may be selected like any other button to edit their properties.Working With External Controls Global (panel-wide) settings for external controls are accessed through the new External Controls entry in the panel's tree (displayed in the Pages tab of the Workspace Navigator Window). select from a drop-down menu. Once you have selected an external control. 4. Override Global Settings . Double-click on the External Controls entry to display a Design View Window representing the layout of the external controls (buttons and LEDs) on the target panel.Supported Properties General Properties Override Global Settings Name Disabled Password Protection Page Flip Programming Properties Address Port Address Code Channel Port Channel Code Level Control Type String Output Port String Output Command Port Command Output Note: Maximum command. string and text length = 4096 characters. 2.11 or higher) 137 . 1. click on an item in the righthand column to activate the field. To edit any of the properties in the table. Use the Selection Tool to pick the external control that you want to configure (in the Design View Window). Page-Specific Properties for External Pushbuttons/LEDs Setting Page-Specific General Properties: External Pushbuttons Page-specific settings for external controls (pushbuttons and associated LEDs) which may override any Global settings are set via the Design View of the page that you want to associate the external controls with. you can either set the item manually.This option (Yes/No) determines if the button performs the global action defined for the button. the remainder of the external buttons properties will indicate their global values as read-only (default = No). The following global button properties are supported for external LEDs: External LEDs . States Properties Note: There are no State properties to configure for external controls. Note that are no State properties to configure for external controls. Depending on the item selected. or both. Select Pages > Show External Controls to change the Design View to represent the layout of the external buttons on the target panel. The following page-specific properties are supported for external Pushbuttons: External Pushbuttons . Double-click on a Page entry (in the Pages tab of the Workspace Navigator Window) to display the selected page in a Design View Window. If set to Yes. TPDesign4 (v2.

11 or higher) . 138 TPDesign4 (v2. The following page-specific properties are supported for external LEDs: External LEDs .Supported Properties General Properties Name Disabled Programming Properties Feedback Address Port Address Code Channel Port Channel Code States Properties Note: There are no State properties to configure for external controls.Working With External Controls Setting Page-Specific General Properties: External LEDs Page-specific settings for external controls (pushbuttons and associated LEDs) which may override any Global settings are set via the Design View of the page that you want to associate the external controls with.

Note that you cannot select individual "cells" (or buttons). via options in the Edit List Tables dialog. and you can specify how the List Box button displays the data (via General and State Button Properties). Select the List Box Container to set button properties for the entire list box button (affecting all subordinate buttons within the container). but you cannot add or delete them. Subordinate buttons and the List Data table: The main List Box button is referred to as the Container. managed mode presents properties by column. The data displayed in List Box buttons comes from an associated List Data Table. you can select. Instead. One example usage for List Box buttons might be to display a scrollable list of music playlists for the end-user to select and playback. in that they use Rows and Columns to organize the data to be displayed. Subordinate buttons are created by adding columns and/or rows to the list box container button. In unmanaged mode. List box buttons can be used to allow the end-user to view data in list form. Once in unmanaged mode the only way to put the list box back in the managed mode is by using the Undo feature.Working With List Box Buttons Working With List Box Buttons Overview TPD4 supports adding "List Box" buttons to projects created from panel types that support List Box buttons. The primary role of the (hidden) list box button is to retain the properties of the list box view. TPD4 supports two modes for List Box buttons . The List Data Table is the data source for list box buttons. In this case.Managed and Unmanaged: Managed Mode: In managed mode TPD4 treats the List Box button as a Container for the Subordinate buttons. There are three main aspects to List Box buttons: the Container button. List Box buttons are visible in TPD4. List Box buttons are set up like tables in TPD4. In many ways. TPDesign4 (v2. since subordinate buttons only operate as a display of list data. but do not have any visible properties on the panel. Each List Box button is associated to a List Data table. List Data Tables are created in TPD4. the text that is displayed in a List Box button comes from a List Data Table.11 or higher) 139 . Every List Box button must be associated to a List Data Table. and every button is populated with data coming from the List Data Table associated with the List Box button. Subordinate buttons appear in a grid fashion. Think of a table where each cell is a button. Every List Box button must be associated to a List Data Table. The List Data Table provides the data to be displayed in the List Box button. For example. such as a MAX Home Theater server. The List Box button is a special-purpose button type for G4 devices/panels which utilizes a collection of subordinate buttons to display either dynamic or static data as a scrollable list (referred to as a "list box view"). Unlike other button types where you specify the text to be displayed on the button (via the Text button state property). Further. The role of the subordinate buttons is to display the data in the list box view. the song titles displayed in the list box buttons are provided by a server. The List Data Table provides the data to be displayed in the List Box button. Strict alignment and spacing rules are forced both by the view and in the properties the user may edit. When a list box button is in Unmanaged mode the subordinate buttons are no longer managed by the List Box Container button. and make selections from the list. You can select subordinate buttons by the column to set button properties that affect only the affected column. individual button properties are not accessible. Unmanaged Mode: You can choose to place a List Box button in unmanaged mode by selecting Button > Make Unmanaged (Listbox). move and edit the properties of the individual subordinate buttons. The List Box Container wraps around the Subordinate buttons which represent the display fields for data populated by the List Data Table. and can be defined statically or dynamically. It also presents properties for the list box button and properties for each column. not as individually customizable buttons.

Working With List Box Buttons The use of Unmanaged mode is typically limited to special circumstances where moving or modifying individual subordinate buttons is absolutely necessary. Add Column: Click to add a column to the selected List Box Button. or fonts for subordinate buttons are done on a column-by-column basis. When a list box button is in Unmanaged mode the subordinate buttons are no longer managed by the List Box Container button. Add Row Add Column Delete Column Delete Row FIG. The use of Unmanaged mode is typically limited to special circumstances where moving or modifying individual subordinate buttons is absolutely necessary. In unmanaged mode. In managed mode. double-click anywhere inside the toolbar (but not on a toolbar button). and should be considered an advanced mode for seasoned programmers only. List Box button support is limited to the following G4 devices: MIO R-4 Remotes List Box Toolbar The List Box toolbar contains shortcuts to the Selection and Button Draw tools (FIG. borders. G4 Devices That Support List Box Buttons At the time of this release. so they can be arranged within the application window. To undock any toolbar. In managed mode. move and edit the properties of the individual subordinate buttons. click and drag using the handle (the single vertical bar) at the far-left side of the toolbar. You also cannot access the channel port and code properties of the subordinate buttons.11 or higher) . you cannot individually select. Delete Column: Click to delete the selected column from a selected List Box Button. To delete subordinate buttons. To create subordinate buttons. its subordinate buttons are managed strictly via edits performed on the list box button or its columns. You can choose to place a List Box button in unmanaged mode by selecting Button > Make Unmanaged (Listbox). To move the toolbar. 140 TPDesign4 (v2. Changing any properties such as colors. Double-click again to dock the toolbar. 146). Delete Row: Click to delete the last row from a selected List Box Button. you can select. Select View>Toolbars>List Box Toolbar to show/hide this toolbar: Add Row: Click to add a row to the selected List Box Button. add columns and/or rows to the list box button. remove columns and/or rows. or delete individual subordinate buttons. create. 146 List Box Toolbar All toolbars in TPD4 are dockable. List Box Buttons: Managed / Unmanaged Mode When a List Box button is in managed mode. you cannot move the subordinate buttons around individually. or modify their Z-Order.

11 or higher) 141 . 149 list box button .showing container 3. In managed mode you add subordinate buttons by adding columns or rows to the list box. If the background color of the page is white. You can select the container and change the border color to black. The example below shows a List Box button with two columns and three rows (FIG. Create a list box button by holding down the right mouse button on the view and dragging the mouse. 148 list box button with one subordinate button By default the list box container is created with a transparent background and a white border. you will not see the container. Select the List Box Container button and click the Add Column or Add Row buttons from the List Box Toolbar (see FIG. 147 Selection/Drawing Tools toolbar Use the List Box Button draw tool to draw list box buttons on the design view as you would any other button type. 148): FIG. 2. Select the List Box Draw Tool from the Selection/Drawing Tools toolbar (FIG. This will create a list box button with one subordinate button (FIG. This property is only visible in TPD4 and will not appear on the panel. To create a list box button: 1. 146 on page 140).Working With List Box Buttons List Box Buttons: Managed Mode Creating List Box Buttons (Managed Mode) By default. 150): TPDesign4 (v2. List Box buttons are in managed mode when first created. 147): List Box Draw Tool FIG. 149): FIG. This way you can see the container (FIG.

151 List Box button 2. 142 TPDesign4 (v2. When a new row is added. the Drawing Tools toolbar can be used to set the border type. each button will have the same state properties (i. Adding Rows 1. when the List Box Button is created. font. Select a List Box button in the Diagram Area (FIG. 152 List Box button . border color. 152). The number of buttons added will be equal to the List Column (general) property. FIG. fill color and text color for the on and off states of the subordinate buttons.) as the button above it.11 or higher) . This function adds a row to the bottom of the list box container (FIG. Click the Add Row toolbar button (in the List Box toolbar). Border Color etc. Fill Color.1 Row Added The height of the row will be equal to the List Row Height (general) property of the list box container. FIG.Working With List Box Buttons FIG. 150 List Box button with 2 columns and 3 rows When the List Box Draw Tool is selected.e. The width of each button is equal to the Column Width (general) property of each column in the list box. 151).

153 List Box button . 2. A column of buttons will appear on the right-hand side of the list and will contain the number of buttons equal to the List Row (general) property. Deleting Columns 1. If the preferred row is deleted.11 or higher) 143 .Working With List Box Buttons Adding Columns 1. 154). Click the Delete Column toolbar button (in the List Box toolbar) to delete the right-most column in the list box container.1 Column Added The width of the last column is used for the new column. If a column is deleted. TPDesign4 (v2. 153). this function is disabled. Click the Add Column toolbar button (in the List Box toolbar). 154 List Box button .2 Rows 2. Select the List Box button in the Diagram Area. FIG. After deletion the container will be resized. this function is disabled. This function adds a column to the righthand side of the list box container (FIG. If only one row exists. Select a List Box button in the Diagram Area (FIG. and is part of the Column Display Order field of the parent. Click the Delete Row toolbar button (in the List Box toolbar) to delete the bottom-most row in the list box container. Select the List Box button in the Diagram Area. the Column Display Order field will be reset to "empty". If only one column exists. If a column is selected. the preferred row property should be set back to 1. the new column will have the same width as the selected column. Deleting Rows 1. The maximum number of column allowed in a List Box Button is 20. 2. FIG.

these features are no longer available. Copying and Pasting a List Box Cutting.11 or higher) . copying and pasting a managed list box works only when the list box container is selected by itself or when the list box container is selected along with other non-subordinate buttons. as shown below (FIG. pasting and deleting all the subordinate buttons for you. 156 List Box Button . 155). TPD4 treats a List Box button as a Container for the subordinate buttons that constitute the columns and/or rows of the List Box button (FIG.Container Button In Managed mode.Container Button Selected 144 TPDesign4 (v2.Working With List Box Buttons Cutting. When one or more of the subordinate buttons are also selected. The (red) handles indicate that the entire button is selected. TPD4 takes care of copying. TPD4 does not support copying and/or pasting individual columns of a managed list box. 156): FIG. Click on the outside edge of the List Box button to select the Container. FIG.Container Button Select the Container to set button properties for the entire button (affecting all subordinate buttons within the container). 155 List Box Buttons . Alternatively. you can select individual columns within the Container button to set button properties at the column level. List Box Buttons . All you have to do is select the container.

The following button properties are supported for List Box Container buttons: If you select the List Box Container.Container Button Selected 2. Managed mode will not allow you to select or move buttons outside of the container. 157): FIG. 158 List Box Button . fill color etc (FIG. 157 List Box Button . List Box button columns do support multiple states. click on an item in the right-hand column to activate the field. When a List Box Container is selected.Working With List Box Buttons List Box Container Properties vs.11 or higher) 145 . Depending on the item selected. 158).Column Selected Setting Properties: List Box Container Buttons Once you have created a List Box button. However. Column Properties In Managed mode. TPDesign4 (v2. you can either set the item manually. since List Box Container buttons do not support multiple states. The List Box button that contains all the subordinate buttons (called the List Box Container button) presents properties that deal with the list box as a whole. you select columns of the list box to change properties for all the buttons in that column such as button width. you can use the Properties Control window to set/edit General. or both. border type. Instead. the following Properties will appear in the Properties window. select from a drop-down menu. Programming and State button properties. additional state properties are supported. These properties are viewed by selecting the list box Container (FIG. properties are split into two perspectives: 1. FIG. If you select a List Box Button Column. To edit any of the properties in the table. only the Off state is indicated. The other perspective is based on columns of the list box.

Working With List Box Buttons List Box Container Buttons . 159 List Box Button . 1.11 or higher) .Supported Properties General Properties Type Name Description Left Top Width Height Above Popups Hidden List Table Port List Table Address Column Display Order Column Sort Order List Table Wrap List Row List Column List Row Height List Preferred Row List Preferred Row Height List Column Padding List Row Padding List Offset Enabled List Managed Programming Properties Address Port Address Code States Properties Border Color Fill Color Overall Opacity Setting List Box Container Button Properties Once you have created a List Box button. select from a drop-down menu. and States tabs of the Properties Window to set/edit button properties for the container button.Container Button Selected 2. To edit any of the properties in the table. Select the Container to set button properties for the entire button (affecting all subordinate buttons within the container). or both. Programming. click on an item in the right-hand column to activate the field. you can use the General. as shown in FIG. The (red) handles indicate that the entire button is selected. Depending on the item selected. Click on the outside edge of the List Box button to select the Container. 146 TPDesign4 (v2. 159: FIG. you can either set the item manually.

See the Setting List Box Button Column Properties section on page 149 for details. The subordinate button's Row and Column property is set to their row/column position.4. 160): FIG. Each subordinate button's Channel Port must be set to the High Port of the list box button. The Z-Order of all subordinate buttons must follow list box button container and continue in sequential order from left to right. top to bottom. The list box button's Row and Column properties are set to the total number of rows/columns. 4 and 1. TPDesign4 (v2. For example.Working With List Box Buttons There are additional properties that can be applied to a selected column within the Container button.Subordinate Buttons List box buttons and subordinate buttons have a special kind of relationship to keep track of which buttons belong to the list box button. List Box Buttons . Rows are added to the bottom of a list box and columns are added to the right-hand side of a list box. The list Box Button's Data Display property is a string surrounded by parenthesis. then this property would be set to 3. the placement of subordinate buttons in a list box is automatic and controlled by the location of the list box container and laid out in a grid fashion. 160 List Box Buttons .1 (FIG. The string is a comma-delimited list of List Table Column Values.11 or higher) 147 . When a row or column is added. the list box container is resized automatically to fit the new region of subordinate buttons added.Subordinate Buttons Subordinate Button Placement In managed mode. top to bottom. The List Box Button's Address Port and Code must be set to an Address Port/Code of a List Data Table. if the list box's 1st 2nd and 3rd columns are assigned to columns 3. The Channel Code of each subordinate button is set in sequential order starting with 1000 from left to right.

or both. 161 List Box Button .Drag and Drop Capability Full drag and drop capability is supported for Subordinate List Box buttons: You can drag a column property of a list box and drop it on another column of a list box.Middle Column Selected Setting Properties: List Box Columns Once you have created a List Box button. select from a drop-down menu. and States tabs of the Properties Window to set/edit button properties for the columns. You can select individual columns within the Container button to set button properties at the column level. you can either set the item manually. 161): FIG. 148 TPDesign4 (v2. Depending on the item selected. select the Container to set button properties for the Container List Box button (affecting all subordinate buttons within the container). you can use the General. The list box column will highlight when dragged on top of the column in the Design View and when dropped the property will change to the value dragged from the properties window.Working With List Box Buttons Subordinate Buttons . Click inside the Container to select a column. To edit any of the properties in the table. List Box button columns support multiple states. List Box Buttons . Alternatively. The (blue) handles indicate that a single column is selected. You can also drag and drop one to two states in the State Manager window on a column of a List Box. Programming.Columns In Managed mode. click on an item in the right-hand column to activate the field. TPD4 treats a List Box button as a Container for the subordinate buttons that constitute the columns and/or rows of the List Box button. as shown below (FIG.11 or higher) .

Properties applied to a column will affect all buttons in that column. Managed list boxes Scale Bitmap To Fit do not have any programming Icon Justification properties available. you can use the General. or both. There are additional properties that can be applied to the List Box button container. See the Setting Properties: List Box Container Buttons section on page 145 for details.Supported Properties General Properties Type Name Description Width Above Popups Border Style Programming Properties Feedback Address Port Address Code String Output Port String Output Command Port Command Output States Properties Draw Order Border Name Border Color Fill Color Text Color Text Effect Color Overall Opacity Note: All of the above are available only for Bitmap Justification unmanaged list boxes. Programming. To edit any of the properties in the table. TPDesign4 (v2. click on an item in the right-hand column to activate the field.11 or higher) 149 . States tabs of the Properties Control window to set/edit button properties for a selected column (within the List Box button container). Font Text Text Justification Text Effect Word Wrap Marquee Direction Marquee Repeat Setting List Box Button Column Properties Once you have created a List Box button. If you select a column within the container (as opposed to the List Box button container itself). Depending on the item selected.Working With List Box Buttons List Box Columns . you can either set the item manually. select from a drop-down menu. you can set button properties that apply specifically to the selected column. List Box buttons consist of a container and subordinate buttons that are created with Columns and Rows.

move and edit the properties of the individual subordinate buttons. and individual subordinate buttons can be selected. In other words. In unmanaged mode. The Z-Order of an unmanaged list box Container/Subordinate buttons cannot be changed. When a List Box button is put into Unmanaged mode: The Container.11 or higher) . This logic is present for managed list boxes. When a list box button is in Unmanaged mode the subordinate buttons are no longer managed by the List Box Container button. Rows and Columns cannot be removed nor added. the only way to get the unmanaged list box back to a managed state is via Edit > Undo. this functionality will carry over to unmanaged list boxes. You can choose to place a selected List Box button in unmanaged mode by selecting Button > Make Unmanaged (Listbox). By removing the check for whether the list box is managed or not. individual (or multiple selection) subordinate buttons can not be deleted. The use of Unmanaged mode is typically limited to special circumstances where moving or modifying individual subordinate buttons is absolutely necessary. you can select.Working With List Box Buttons List Box Buttons: Unmanaged Mode When a List Box button is created.Editable Properties Editable Button Properties of an unmanaged List Box Container button General Properties • Name • Lock Button Name • Description • Left • Top • Width • Height • List Table Port • List Table Address • List Display • Column Sort Order • List Filter Column • List Selectable • List Table Wrap • List Preferred Row Editable Button Properties of an unmanaged List Box Subordinate button General Properties • Name • Lock Button Name • Description • Left • Top • Width • Height • Border Style 150 TPDesign4 (v2.Unmanaged Mode . the Z-Order can only be placed in front of or behind the entire list box collection. Only certain button properties are available to edit in unmanaged mode: List Box Buttons . but you cannot add or delete them. the Z-Order of the unmanaged list box must remain in order without gaps in the sequence. When changing the Z-Order of a non-list box button. moved and resized. it always defaults to Managed mode. However. Note that once a List Box button has been moved to unmanaged mode. all of the subordinate buttons will be deleted as well. If the Container is deleted.

Parent and individual child buttons can be moved and resized.Working With List Box Buttons List Box Buttons . Rows cannot be removed nor added. If the user tries to delete one or more list box child buttons. the Z-Order of the unmanaged list box must remain in order without gaps in the sequence. In other words.Editable Properties (Cont. Columns cannot be removed nor added.) Editable Button Properties of an unmanaged List Box Container button Programming Properties • Address Port • Address Code • Channel Port • Channel Code Editable Button Properties of an unmanaged List Box Subordinate button Programming Properties • Feedback • Address Port • Address Code • String Output Port • String Output • Command Port • Command Output State Properties: Off only • Border Color • Fill Color • Overall Opacity State Properties: Off only • Draw Order • Border Name • Border Color • Fill Color • Text Color • Text Effect Color • Overall Opacity • Bitmap Justification • Scale Bitmap To Fit • Icon Justification • Font • Text Justification • Text Effect • Word Wrap • Marquee Direction • Marquee Repeat Rules for Unmanaged List Box Buttons The following rules apply to List Box Buttons in Unmanaged Mode: Must be constructed from a Managed List Box (create a Managed List Box Button and change it to Unmanaged mode via the Button > Make Unmanaged (Listbox) option).11 or higher) 151 . Changing Z-Order of an unmanaged list box Parent/Child is not available. When changing the Z-Order of a non-list box button. Unmanaged transition is one-way. The parent can be deleted -> all children will be deleted as well.Unmanaged Mode . The only way to get the unmanaged list box back to a managed state is to use the Undo feature. Individual (or multiple selection) child buttons can not be deleted. By TPDesign4 (v2. This logic is present for managed list boxes. Parent and individual child buttons can be selected. a message box is given stating the reason it can not be deleted. the Z-Order can only be placed in front of or behind the entire list box collection.

Select Button > Make Unmanaged (Listbox). 152 TPDesign4 (v2. 164): FIG. Create a list box button by right clicking on the view and dragging the mouse. The High Port of a parent can not be changed via properties. This will create a list box button with one subordinate button (FIG. 2. State properties of individual unmanaged list box button can be changed. Select the List Box Draw Tool from the Selection/Drawing Tools toolbar (FIG. this functionality should carry over to unmanaged list boxes. 164 List Box Button With 2 Columns and 3 Rows 4. 163 list box button with one subordinate button 3. 163): FIG.11 or higher) . 162 Selection/Drawing Tools toolbar Use the List Box Button draw tool to draw list box buttons on the design view as you would any other button type. To create a list box button: 1. Select the List Box Container button and click the Add Column or Add Row buttons from the List Box Toolbar. List Box buttons are in managed mode when first created. The example below shows a list box button with two columns and three rows (FIG.Working With List Box Buttons removing the check for whether the list box is managed or not. The Channel Port/Code of a child can not be changed via properties. 162): List Box Draw Tool FIG. Creating List Box Buttons (Unmanaged Mode) By default.

Use the corner resize handles to do a combination what the center handles do by resizing one of the corners. If Preferred Row is 0. 166). the remainder is applied to the Preferred Row Height. the next column to the right will resize to reflect the change.e.11 or higher) 153 . the maximum width allowed per column is the amount of width from the right-hand side of the list box to the right edge of the page or popup divided by the TPDesign4 (v2.Resizing If the change in size specified by the drag is not equally divisible by the number of rows. 165). If the last column is selected. resizing is limited to the size of the last column plus the width left on the right hand side of the list box to the right edge of the page or popup. If the List Preferred Row is set to a non-zero value (i. 166 Right center handle enabled for resizing When a single column is selected (not including the last column) resizing is limited to the width of the selected column and the next column to the right.Working With List Box Buttons 5. the other rows. This allows you to change the overall width of the list box. plus the offset of the parent if the List Offset Enabled (General) property is set to "yes". The program displays a warning message concerning the rules concerning unmanaged mode: Once set. the change in size is split evenly between each row by adding/subtracting the change in size to the Row Height and Preferred Row Height properties of the Container (FIG. FIG.Resizing When a List Box Container is resized by dragging the center handles. the List Box cannot be set back to managed mode except through the Undo feature. Click Yes to convert the List Box Button to unmanaged mode. 6. When two or more columns are selected. only the right center handle is enabled for resizing (FIG. In unmanaged mode you can resize and move individual subordinate buttons of the list box but you cannot add nor delete rows and columns. The minimum height for each row is 4 pixels. After resizing the column. FIG. When a List Box Column is selected. 165 List Box Buttons . 1). List Box Buttons . resizing maintains the size ratio of the preferred row vs. up to the number of rows present in the list box. the remainder is dropped.

the specified column is sorted alpha-numerically in descending order.Sort the specified column. the new width is applied from right-to-left until the maximum width is met. End .Move list to top of page. These buttons are referred to as List Box Navigation buttons.Move list up one page.e. When resized in this way.Move list to end of page.). send-to-back. fill and text color for the List Box button's subordinate buttons. Using the Drawing Toolbar With List Box Buttons When the List Box Draw Tool is selected. font. at the time that the button is created.Move list down one entry. fill color and text color for the On and Off states of the subordinate buttons.it is either behind or on top of the entire list box). pasted. On first press.Move list up one entry. When resizing the width of a column. Page Down . the properties (including width) of the new column are taken from the selected column. Here are the actions that a list box navigation button can perform (selectable via the Channel Code property). For unmanaged list boxes. the Z-Order (or State Draw order) of the subordinate buttons must follow the list box container's Z-Order in row-column sequential order. when the List Box Button is created. the width of the new column is defined based on the last column in the list box.Z-Order In order for a list box to function correctly on a panel. etc. 154 TPDesign4 (v2. Page Up . List Box Buttons . Z-Order placement remains managed by the list box.Move list down one page. For managed list boxes the Z-Order is managed for you when rows and/or columns are added. 167) can be used to set the border.11 or higher) . the colors are defined via the Drawing Tools Toolbar. Only experienced programmers who fully understand list box construction and the logic of Z-Order placement should use the list box in unmanaged mode. List Box Buttons . a button separate from the list box cannot be behind some of the subordinate buttons of the list box and on top of the rest of the subordinate buttons . If you select a column. or when the list box layout is changed (bring-to-front. Press again for an ascending re-sort. the Drawing toolbar (FIG. you can use the Drawing Tools Toolbar to specify the border type. Home . then click the Add Column button (in the List Box Toolbar). border color. Button Type Border Type Font Toggle On/Off State properties Font Size Border Color Fill Color Text Color FIG. A managed list box's Z-Order cannot be interrupted by another buttons Z-Order (i. Sort Column (1-20) . you can manipulate each subordinate button of an unmanaged list box. When you add columns and rows (with the List Box Button Container selected). Even though you can individually select buttons in unmanaged mode. Up . deleted.Working With List Box Buttons number columns selected. the minimum allowed is 4 pixels.Navigation Buttons General buttons can be used to provide a means for the user to control a List Box button. 167 Drawing toolbar When you draw a List Box button with the List Box Draw Tool. Down .

The second button's Channel Code would be set to "Sort Column 2".11 or higher) 155 . For example. "List Box 2". one above and one below the yellow button could be set to scroll the list box up and down: 6. 4. 168 List Box with Navigation Buttons Creating List Box Navigation Buttons 1. etc. five navigation buttons (in cyan) and a scroll bar (in yellow):. The smaller cyan buttons. Set the top button's Channel Code to "Up" and the bottom button's Channel Code to "Down". Add a general button to the page and set the Channel Port to the List Box and set the Channel Code to the desired function.Working With List Box Buttons FIG. 7. Alternatively you could leave these buttons out and program the external buttons (R4) to move the list up and down. All three button's Channel Port should be set to the List Box (via the Properties Control . 5. Set both button's Channel Port to the List Box. 168 illustrates a List Box (in white).assuming that at least one List Box button is defined in the project). See the SystemGenerated Project File Names section on page 30 for details. FIG. they will be listed as "List Box 1". TPDesign4 (v2. the three large cyan button in the figure above could be used to sort columns of the list box. The third button's Channel Code would be set to "Sort Column 3". If you haven't renamed any of the List Box buttons that have been added to this project. 3. 2. The first button's Channel Code would be set to "Sort Column 1".Programming Tab .

The user can drag the bargraph at runtime to scroll the list up and down.Level Code set to Scroll (option1) The Off state fill color is set to white and the On state fill color is set to green. Again. The size of the list is not represented. 169 List Box Navigation Scroll Bar . Now you have two visual options: The first is depicted below (FIG. 156 TPDesign4 (v2. the user can drag the bargraph at runtime to scroll the list. Set the Level Port of the bargraph to the list box and set the Level Code to "Scroll". 170 List Box Navigation Scroll Bar . These bargraphs depict position only.Working With List Box Buttons Creating a List Box Navigation Scroll Bar One option for List Box Navigation Buttons is to link a single bargraph button to a Listbox for navigating the list data up and down. 169): FIG. The second option (shown below) uses the slider property to indicate position (FIG.Level Code set to Scroll (option 2) Both state fill colors for On and Off are set to white.11 or higher) . 170): FIG.

bg2 and bg3: FIG.Scroll Bar Components Buttons bg1 and bg2 are called Mask buttons. 172 shows that the yellow bargraph is actually made up of 3 bargraph buttons labeled bg1.11 or higher) 157 . 171 List Box Feedback Scroll Bar Scroll Bar Components FIG. It does not have any navigation capability: FIG.Working With List Box Buttons Creating a List Box Feedback Scroll Bar The yellow button in FIG. To set these buttons up as a list box scroll bar set the button properties as follows: Button bg1 properties: Level Port: set to List Box Level Code: bottom mask Off Button State: Fill color set to Transparent On Button State: Fill color set to yellow TPDesign4 (v2. 172 List Box Feedback Scroll Bar . 171 serves as visual feedback to indicate the list size and position. They mask portions of button bg3 to visually indicate slider position and size.

Working With List Box Buttons Button bg2 properties: Level Port: set to List Box Level Code: top mask Off Button State: Fill color set to yellow On Button State: Fill color set to Transparent Button bg3 is not connected to the list box. such as the MAX AVP). Once applied to a Navigation Button.Move to Top of page End .Move up one entry Down . It could have been left out leaving the background color to show through as the slider. The Sort Column entries contain the column titles (up to 20 columns.Enter the number of the column to use for alpha-numeric sorting (1-20).11 or higher) .. edit and delete List Data Tables in support of List Box buttons.Channel Code Values Channel Code values that can be applied to Navigation buttons (via the Channel Code Programming property) include: none . Down.Move down one page Home . List Data Tables provide the information that is displayed on List Box Buttons. TPD4 displays these list values regardless of the panel type. It is located behind buttons bg1 and bg2 and it's color will show through the transparent parts of bg1 and bg2 to represent the slider of the scroll bar..Move up one page Page Down . a panel without a touch overlay. the table can be designated for a list box through a property of the List Box Button.Move down one entry Page Up . the button will sort the list box based on this column selection. Up .Move to bottom of page Sort Column (1-20) . 173). TPD4 will save the "List" or "Selection" version of "Up. This separates the data from the view so that List Data Table can be created statically or dynamically: TPD4 presents a list table view to create and define a static List Data Table. Navigation Buttons . based on whether the PPF says the panel type supports "Selection" (i. Once created. List Data Table TPD4 supports the ability to create. and it's associated dialogs: 158 TPDesign4 (v2. Since the purpose of List Box Buttons is to present data. supplied by the List Data Table). You can also designate dynamic List Data Table data for a List Box Button that is created at runtime by the panel firmware. However. Button bg3 is not really needed.e.no navigation command will be associated with this button. It is up to you to make sure a column exists in the table when defining a "Sort Column #"." automatically. List Data Tables are created via options in the Edit List Table dialog (FIG. a list data table is used to manage the data of a List Box Button and can be designated through a property of the List Box Button..

Conversely. A dynamic table type is updated dynamically from the master with data. TPDesign4 (v2. Table Address Code .Select either a static or a dynamic table type.11 or higher) 159 . Dynamic List data must be included in the NetLinx code running on the NetLinx Master in order to be available for use on List Box Buttons. Dynamic List Box Data Dynamic List Box data populates button information based upon communications between the panel and a NetLinx Master. Therefore. no raw data will be entered by the user.The Address Port property is an integer value representing the port of the list data table. Table Type .The Name is a character value used to identify the list table data. Note that unlike Dynamic List Box data. the information displayed on the device is on the master and not the device.Working With List Box Buttons FIG. Table Address Port . Opposed to static data. Static List Box Data A static list box populates button information based on data stored on the panel. the device will resume the last known static table event should power be cycled. the device cannot display current state information provided by the master.The Address Code property is an integer value representing the address code of the list data table. 173 Edit List Table dialog List Data Table Properties The following list data table properties are editable: Table Name .

Port: Assign a Port and Address for the table. Click New to open the Create New Table dialog (FIG. Select Panel > Edit List Tables (or click the toolbar button) to open the Edit List Tables dialog (FIG. Address: Assign a Port and Address for the table. 4.e. If you haven't already done so. See Attaching a Dynamic List Data Table to a List Box Button section on page 171. 3. which populates the List Box Button dynamically.Working With List Box Buttons Dynamic tables are great for creating parameters for displaying changing options. There are two variations on this concept: Static List Box Data. where you will specify basic properties for the new table. See the Attaching a Static List Data Table to a List Box Button section on page 163. Creating a Static List Data Table To create a Static List Data Table and associate it to a List Box Button. as well as a List Data Table. Number of Rows: Enter the number of rows to include in the table. This dialog displays the number of columns indicated in the Create New Table dialog: 160 TPDesign4 (v2. 174 Create New Table dialog Name of Table: Type a unique name for the table. Click OK to save your changes and proceed to the Column Types dialog (FIG. FIG. however. See the Working With Function Codes section on page 207 for more information on Ports and Addresses. Attaching a List Data Table to a List Box Button Once you have created a list Box Button. 2. Dynamic List Box Data. if the device loses power it will not be able to display the last known states. you are ready to associate the List Data Table to the List Box Button. which populates the associated List Box Button with the data entered into a List Data Table via the Edit List Tables dialog. time or temperature. i. Number of Columns: Enter the number of columns to include in the table. with data defined in NetLinx Code. with enough rows and columns to accommodate the data that you will enter into the List Data Table. so that the data in the List Data Table is displayed in the List Box button: 1.11 or higher) . date. Use the options in this dialog to assign a name and type to each column in the table. 174).. 175). 173 on page 159). create a new List Box button. It is this association that allows the data in the List Data Table to be displayed on the List Box Button.

Use the options in this dialog to assign a name and type to each column in the table. 176). Delete Row . As you create more new tables. 5. Add Column . Icon . At this point.The column will display icons from a table of icon references. This option invokes the Add List Table Column dialog (FIG.Working With List Box Buttons FIG.This column will contain a port/channel code combination that is sent to the master upon activation of a particular row.The column will display bitmap images from a table of bitmap references. use the command buttons along the top of this dialog to add/delete rows and columns from the active table. 175 Column Types dialog Column: Displays the number associated with each column in the table. Note that the Table Data display reflects the columns/rows and column names that you specified. Also note that the table you just created is listed in the Tables list box (left side of the dialog). Click OK to save your changes and return to the Edit List Tables dialog. This column is hidden from the user on the display and is used as navigation. each one is added to the Tables list.Click to add a row to the table.11 or higher) 161 .The column will display valid page names that will be activated as page flips. Page Flip . Name: Use these text fields to enter a unique name for each column. You can select any table from the list to edit its properties. and specify a Port and Address to the table: Add Row .The column will contain a variable length text value. to assign a specific type to each column. The following are the available column types to select from: Text .Click to add a column to the table. 6. Port/Channel Code . Type: Click inside these fields to access the Type drop-down menu. Click the Column button to sort the columns in descending/ascending order. TPDesign4 (v2. Bitmap . resize the table.Click to delete one or more selected rows from the table.

162 TPDesign4 (v2. Fit Table . then a drop-down list of available pages is displayed. Note that this option is disabled once the table reaches the minimum allowed width. If the type is of the type "Channel Code". Power Assign . Use the Table Port and Table Address fields to specify the port/address combination. you will be able to select a bitmap that has already been defined in the project.Assign to columns that will be used to display channel code information. If the column is of the type "Bitmap". and code parameters to one or more selected buttons.Click to resize the table to fit inside the Table Data window.Working With List Box Buttons FIG. Use the options in this dialog to set button-level actions. 7.Assign to columns that will invoke a page flip when selected. Bitmap . the user will be able to enter data. Shrink Columns . Expand Columns . If the column is of the type "Page Flip".Assign to columns that will be used to display bitmaps. channel/variable text. Edit the cell data as desired: When you click inside a particular cell: If column is of the type "Text". The column type options include: Text (default) . Rename Column . then you will need to enter a channel port/code combination value. Note that this option is disabled once the table reaches the maximum allowed width. Type: Click inside these fields to access the Type drop-down menu.Click to open the List Table Power Assign dialog.Click to delete the column that currently has focus. 8. This option invokes the Change Port/Addr dialog.Assign to columns that will be used to display icons. Name: Use these text fields to enter a unique name for each column. Page Flip .Click to shrink each column by equal amounts. Click OK to return to the Edit List Tables dialog. Icon .Click to assign a unique Port and Address combination for the table. Port/Addr .11 or higher) .Assign to columns that will be used to display text.This option allows you to rename the column label at the top of a column. 176 Add List Table Column This dialog displays the number of columns indicated in the Create New Table dialog: Column: Displays the number associated with each column in the table. Delete Column . Click the Column button to sort the columns in descending/ascending order. to assign a specific type to each column. Channel Code .Click to expand each column by equal amounts.

you will be able to select an icon that has already been defined in the project. This dialog lists all Static List Data Tables in your project. In the General tab of the Properties Control Window. To move rows. 2. Clicking inside these fields enables the browse (. select one or more rows and click and drag them to another spot in the table. the Table Port and Table Address fields are automatically updated with that table's port/address assignments. Once a table is selected. Select the table that you want to attach to the selected List Box Button. It is this association that allows the data in the List Data Table to be displayed on the List Box Button. Click OK to save your changes and close the dialog. you are ready to associate the List Data Table to the List Box Button.Working With List Box Buttons If the column is of the type "Icon". In the Design View window. 9. 177 Attach Table To List Box dialog 3. 1. as well as a Static List Data Table... TPDesign4 (v2. FIG. 177). Attaching a Static List Data Table to a List Box Button Once you have created a list Box Button. click inside either the List Table Port or the List Table Address fields.) button.see Attaching a List Data Table to a List Box Button section on page 160. Click this button to access the Attach Table To List Box dialog (FIG. select the List Box Button that you want to associate with a List Data Table.11 or higher) 163 . Now you will attach the List Data Table to a List Box Button . 4.

List box commands contain comma-delimited fields. and Anything for Love are all cells within the new row.Working With List Box Buttons Deleting a List Data Table To delete a List Data Table from your project: 1.0. Attach the Dynamic List Data Table to a List Box Button There are two types of List Box Commands that can be used to define List Box Data in your NetLinx Code: Data List Commands Command Structure List View Data List Commands Data List Commands ^LDN Creates a new data list. Unique list addresses and names are handled programmatically.. Click the Delete command button. Syntax: "'^LDN-<list port>. 0 . but you can use commas within the fields.11 or higher) . column data information. 2.No unicode. 1. 4. Select Panel > Edit List Tables to open the Edit List Tables dialog (FIG.1.Meatloaf. Select the table that you want to delete. "'^LDA-1.Best of. 164 TPDesign4 (v2. ^LDA Adds a new row to an existing data list. 1 .my songs'" Creates a data list of 4 columns named "my songs" and places it at port 5. address 1. in the Tables list.<column count>. Use double-quotes to surround fields in which commas are needed. Meatloaf.<data2>.Anything for Lunch'" Adds a text row to the data list located at address 1. "'^LDN-5.<primary data>.<list address>.Uses unicode • primary data = the "key" data column. Best of. The program will prompt you to verify this action before the table deleted. • data2 = variable.<list name>'" Variables: • list port = port where data resides • list address = address where data resides • column count = the number of data columns (includes hidden columns) • list name = User specified name for the data list Example: SEND_COMMAND Keypad..<uniflag>. 2. 3. Creating a Dynamic List Data Table Dynamic List Data is provided to the associated List Box Button by the NetLinx Code running on the NetLinx Master that the panel is connected to. Syntax: "'^LDA-<list address>. 173 on page 159). Example: SEND_COMMAND Keypad.'" Variables: • list address = address where data resides • uniflag = indicates unicode. Primary data is required.4. The information in this column provides each row with its uniqueness. The number of data fields is limited only to the number of columns in the data list.Entry5. Click OK to proceed. Use Data List Commands to define List Data in your NetLinx Code. The primary data is set as Entry5..

0 . TPDesign4 (v2. 1 . Syntax: "'^LDT-<list address>. ^LDD Deletes the data list.<uniflag>. the second and third columns are also Text. 3 .Uses unicode • primary data = the "key" data column.11 or higher) 165 . "'^LDT-1.0'" Sets the column type for the data list located at address 1.<column>. "'^LDR-1. Syntax: "'^LDC-<list address>'" Variables: • list address = address where data resides Example: SEND_COMMAND Keypad.1.Entry5'" Removes the text row Entry5 from an existing data list at address 1. Column is the index of the first type to set..<primary data>'" Variables: • list address = address where data resides • uniflag = indicates unicode.Channel..0.0.<type>.) ^LDR Removes a row from an existing data list Syntax: "'^LDR-<list address>. additional types sent are set in order.Working With List Box Buttons Data List Commands (Cont. Note: Data List Command Rules apply (see the Data List Command Rules section on page 166). Syntax: "'^LDD-<list address>'" Variables: • list address = address where data resides Example: SEND_COMMAND Keypad.Text.0. "'^LDC-1'" Clears all rows in data list located at address 1. ^LDT Sets the column type for a data list.No unicode. the first column is Text. ^LDC Clears all rows in a given list. The information in this column provides each row with its uniqueness. 4 .'" Variables: • list address = address where data resides • column = the starting column number • type = subsequent columns. The column type starts at column 1.Page Example: SEND_COMMAND Keypad. 0 ..<type>. "'^LDD-1'" Deletes the data list located at address 1. Example: SEND_COMMAND Keypad.

This is to allow double quote literals within the string bounded by double quotes. Syntax: "'^LDL-<list address>.0. There are 2 cases in which you would use the backslash to escape a double quote literal within the field. Data List Command Rules The following rules apply to several of the Data List Commands. Any data field that has a double quote literal as its first character MUST use double quotes to delimit the field. Within double quotes. 166 TPDesign4 (v2.Working With List Box Buttons Data List Commands (Cont. as indicated in the Data List Commands table: Leading and trailing spaces are ignored before and after opening and closing double quotes.<uniflag>.Entry5. 1 . 0 . then use the backslash to escape the double quote literal.<new cell data>'" Variables: • list address = address where data resides • column = the starting column number.<column>.No unicode.Music'" The field located in column 1.Uses unicode • primary data = the "key" data column.) and the last nonspace character before the following delimiter (or end of command).1. This can be used to load a data list that has long text fields. The information in this column provides each row with its uniqueness. the next character is read as a literal value and the backslash is discarded. the backslash (\) is used as an escape character. Double quotes must be the first non-space character after the previous delimiter (. "'^LDL-1. numbering starts at 1 • uniflag = indicates unicode.11 or higher) . to escape another backslash (commas do not need to be escaped).<primary data>. Note: Data List Command Rules apply (see the Data List Command Rules section on page 166). When a backslash is parsed. • new cell data = data information for a single field or "cell" Example: SEND_COMMAND Keypad.) ^LDL Modifies the data in a single column field. in the row with the primary data "Entry5" and in the data list located at the address of 1 is a text value of Music.

the reverse bit should not be used alone. When used on a reverse sorted list. Possible values for the sort field: 0 = None 1 = Forward Sort 2 = Reverse the current list ordering (may or may not be sorted) 3 = Reverse Sort 4 = Filter 5 = Forward Sort + Filter 6 = Reverse current + filter 7 = Reverse sort + filter Example: SEND_COMMAND Keypad.1'" Sets the data list viewed to the information located at port 2.Working With List Box Buttons Command Structure List View Command Structure List View ^LVO Filter sort. "'^LVL-5. Note that the <sort> field is a bitmask. Syntax: "'^LVL-<view address>.<sort>'" Variables: • view address = the address of the view definition • sort: Bit 0x0001 .Reverse Bit 0x0040 .2.7'" Displays the data list according to the view definitions located at address 1 and filters and reverse sorts the list. When used on a sorted list. so that the 3 bit positions may be combined. "'^LVO-1. tells the view which of the possible orderings to use.<list port>. it results in a forward sorted list.<list address>'" Variables: • view address = the address of the view definition • list port = port where list resides • list address = address where data resides Example: SEND_COMMAND Keypad. address 1 and displays it according to the view definitions located at address 5. In most cases. Syntax: "'^LVO-<view address>. it results in a reverse sort. set the data list displayed.Sort Bit 0x0002 .11 or higher) 167 . ^LVL Data list. but should be used in combination with the sort bit (0x0003) such that it always results in a reverse sorted list. TPDesign4 (v2.Filter Reverse bit (0x0002) reverses the list from whatever order it is currently in.

"'^LVS-3. ^LVC Column display order.1'" Sets the column display order to column 5 first.'" Variables: • view address = the address of the view definition • column = the starting column number Example: SEND_COMMAND Keypad...'" Variables: • view address = the address of the view definition • column = the column number to display Example: SEND_COMMAND Keypad. display a new position. Syntax: "'^LVP-<view address>.. ^LVS Sort.numeric display shift Example: SEND_COMMAND Keypad. Syntax: "'^LVS-<view address>.5.5. Syntax: "'^LVC-<view address>. display a new position.<column>.1'" Sets the column sort order to column 5 first.-4'" Shifts the display -4 and displays the list according to the view definitions located at address 2. "'^LVC-3. The data list is displayed according to the view definitions located at address 3.<column>.<column>.<index>'" Variables: • view address = the address of the view definition • index = the row number in sequential order. sets column order for sorting.<offset>'" Variables: • view address = the address of the view definition • offset = + / . "'^LVM-2.2.. numbering starts at 1 Example: SEND_COMMAND Keypad. Update must be called for changes to take effect. ^LVM Move. Syntax: "'^LVM-<view address>. "'^LVP-5.) ^LVP Set position.. 168 TPDesign4 (v2. then column 2 and then column 1.Working With List Box Buttons Command Structure List View (Cont.2.3'" Sets the display position starting at the third row and displays it according to the view definitions located at address 5.<column>. then column 2 and then column 1.. The data list is displayed according to the view definitions located at address 3.11 or higher) . sets the table column each view column displays.

Syntax: "'^LVU-<view address>'" Variables: • view address = the address of the view definition Example: SEND_COMMAND Keypad. • Filter is case sensitive. "'LVU-3'" Updates the data list and displays it according to the view definitions located at address 3.0.1.3'" //Adds rows to the data list at address 1 SEND_COMMAND Keypad.1.01. Kissing the Lipless.0.my music'" //Specifies column types for the data list at address 1 starting at column 1 SEND_COMMAND Keypad.Smith'" • Filters list based on column 2 such that only those rows whose column 2 contains Smith are displayed.0. Note: This must be called after changes to list data. "'LVF-1. Chutes Too Narrow.5] { PUSH: { //Deletes any existing data list at address 1 SEND_COMMAND Keypad. 1 .0.<uniflag>. sets what column to use and what string to compare. "'^LDN-1. Dynamic List box Table Example The following is an example of a dynamic List Box table as it appears in NetLinx code.2. "'^LDT-1. address 1 named "my music" SEND_COMMAND Keypad.0.<column>. Update must be called for changes to take effect. or list data changes. Setting column to 1 or data to none makes the filtered ordering the same as sorted ordering. filter.0.No unicode. DEFINE_DEVICE Keypad = 11001:1:4 Keypad2 = 11001:2:4 KeypadMusic = 11001:10:4 DEFINE_EVENT BUTTON_EVENT[Keypad. "'^LDA-1.The Shins. "'^LDD-1'" //Creates new 5-column data list at port 1. ^LVU Update.11 or higher) 169 . See Listbox Commands for more information on Listbox commands. Dynamic List Box buttons require the same List Box navigation buttons as static tables do. Syntax: "'^LVF-<view address>. numbering starts at 1 • search data = the data on which to filter Example: SEND_COMMAND Keypad.5.1"'" TPDesign4 (v2. 0 . this will update the view to any sort. • The data is displayed according to the view definitions located at address 1.Uses unicode • column = the starting column number.Working With List Box Buttons Command Structure List View (Cont.<search data>'" Variables: • view address = the address of the view definition • uniflag = indicates unicode. "10.) ^LVF Filter.

08. Chutes Too Narrow. "Mine's Not a High Horse". "'^LDA-1.2] BUTTON_EVENT[KeypadMusic.The Shins.1'" //Set the column of the list on which to base the sort of the data displayed //at view address 2 (in this case column 4 which contains titles) SEND_COMMAND Keypad. "'^LDA-1.09.The Shins. "10. "'^LVO-2. "'^LDA-1. Turn a Square.04. Chutes Too Narrow. "'^LVS-2. "'^LDA-1.5"'" SEND_COMMAND Keypad. "'^LVU-2'" } } //Sort the list by title instead of Track number BUTTON_EVENT[Keypad. Chutes Too Narrow. "'^LVU-2'" } } BUTTON_EVENT[KeypadMusic. The 1 indicates forward sort.The Shins.0.0.07.1'" //Set the column of the list on which to base the sort of the data displayed //at view address 2 (in this case column 1 which contains track numbers) SEND_COMMAND Keypad.The Shins.4"'" SEND_COMMAND Keypad. "'^LDA-1. So Says I. "'^LVC-2.0.2"'" SEND_COMMAND Keypad. "10. Chutes Too Narrow. "'^LDA-1.7] { PUSH: { //Set the sort order for view address 2.Working With List Box Buttons SEND_COMMAND Keypad. "'^LDA-1. "10. "10. "10.The Shins. SEND_COMMAND Keypad.4'" //Updates the view at address 2 SEND_COMMAND Keypad. "'^LDA-1.10. Chutes Too Narrow. SEND_COMMAND Keypad.05. "'^LVS-2. "10.0.10"'" //Sets the column number (4) to display in the view with address 2 SEND_COMMAND Keypad.1'" //Updates the view at address 2 SEND_COMMAND Keypad.3"'" SEND_COMMAND Keypad.9"'" SEND_COMMAND Keypad. Chutes Too Narrow.0. "'^LDA-1.0. "'^LVO-2.The Shins. Pink Bullets.8"'" SEND_COMMAND Keypad.02. Fighting in a Sack. Saint Simon.03. "'^LVU-2'" } } //Sort the list by Track number instead of title BUTTON_EVENT[Keypad.0. "10.4'" //Updates the view at address 2 SEND_COMMAND Keypad.0. The 1 indicates forward sort. Chutes Too Narrow.1] BUTTON_EVENT[KeypadMusic. "10. Those to Come. Chutes Too Narrow. Gone for Good.0.6] { PUSH: { //Set the sort order for view address 2.The Shins. "10.3] 170 TPDesign4 (v2.The Shins.06.6"'" SEND_COMMAND Keypad.11 or higher) .The Shins. Chutes Too Narrow.7"'" SEND_COMMAND Keypad. Young Pilgrim.

.) button. "'^TXT-1.11 or higher) 171 . 178 Attach Table To List Box dialog 3.8] BUTTON_EVENT[KeypadMusic. Clicking inside these fields enables the browse (.[Track '. 178). Enter the Table Port and Table Address of the dynamic List Table. Click this button to access the Attach Table To List Box dialog (FIG.6] BUTTON_EVENT[KeypadMusic.']'" Attaching a Dynamic List Data Table to a List Box Button Once you have created a List Box Button. FIG.itoa(BUTTON. select the List Box Button that you want to associate with a List Data Table. Click OK to save your changes and close the dialog.7] BUTTON_EVENT[KeypadMusic. TPDesign4 (v2.5] BUTTON_EVENT[KeypadMusic.0.CHANNEL). It is this association that allows the data in the List Data to be displayed on the List Box Button.10] { PUSH: { SEND_COMMAND Keypad2. you are ready to associate the List Data Table to the List Box Button. In the General tab of the Properties Window. In the Design View window. and defined List Data in your NetLinx Code (with Data List Commands). click inside either the List Table Port or the List Table Address fields..INPUT. 4.Working With List Box Buttons BUTTON_EVENT[KeypadMusic. 2.9] BUTTON_EVENT[KeypadMusic. 1.4] BUTTON_EVENT[KeypadMusic.

11 or higher) . or click the toolbar button). Enter the new Port and Address assignments for this List Data Table in the Table Port and Table Address fields at the bottom of this dialog. This opens the Change/Port Addr dialog (FIG. Open the Edit List Tables dialog (FIG. via Panel > Edit List Tables. 5. Click OK to save the changes and close this dialog. 172 TPDesign4 (v2.Working With List Box Buttons Changing Port and Address Assignments for a List Data Table 1. FIG. 173 on page 159). Select a List Data Table (in the Tables list). via the List Table Power Assign dialog. showing the current Port/Address assignments for the selected table. 3. 164). 179 Change/Port Addr dialog 4. You can use the Power Assign feature in the Edit List Tables dialog to quickly assign Port and Channel information for multiple columns in the List Data Table. Click the Port/Addr command button. 2.

11 or higher) 173 .Working With List Box Buttons TPDesign4 (v2.

Working With List Box Buttons 174 TPDesign4 (v2.11 or higher) .

When you release the mouse button. popup page and button properties.11 or higher) 175 . Note that the title bar of the Properties Control window indicates which element of the workspace is currently selected. 180). Select View > Properties (or click the toolbar button) to display the Properties Window. The selected property or state is automatically applied to all states of the drop target (whether a button or the page itself). and the Properties window reflects the properties of the newly selected button. General and State properties can also be copied and pasted to a Design View using standard copy/paste menu and keyboard mechanisms. TPD4 alerts you with an error dialog. and if the selected value is out of the acceptable range for a target field. Another feature of the Properties window (all tabs) is that you can click on any value in the right column. Selecting a button from this list is the same as selecting it in a Design View window: the edit focus shifts to the selected button. the title bar of the Properties Control window indicates the number of buttons selected. If one or more buttons are selected in the Workspace. The Properties Window contains three tabs: General. the cursor will change to indicate any fields that cannot accept the selected value. Programming and States (FIG. With an item selected.Working With Properties Working With Properties Overview The Properties Window is typically located on the right side of the screen (although you may move it anywhere you like) and is used to view/edit page. and drag it to another field. and the button type is general. Click the down arrow next to this field to view a list of all buttons on the active page. the value is copied to the new location. the selected button is named "pause". 180 Properties Window Drag and Drop Support Properties from the General tab and states from the States tab can be dragged and dropped onto the Design View (to Buttons on the main Page. Also note that the button name and type are displayed in the text box above the tabs (in the example below. FIG. TPDesign4 (v2. and to view/edit the states information associated with each element in your project. and the original value is left unchanged. or the Page itself).

FIG. The button represented in the Properties Control window is the one with edit focus. 182). This Apply To All button works on multiple button selections. In the event that a value is appropriate for one (or more) buttons but inappropriate for others. You may also notice that one or more (if not all) of the property values in the grid are blank. use the All States option in the States tab (located directly above the other listed states for the selected button). the Prev or Next buttons will activate on the Properties Control window.11 or higher) . but not on multiple states for a single button. FIG. All modifications are always on the button with the edit focus. 176 TPDesign4 (v2. 182 Prev and Next buttons These buttons allow you to quickly edit the selected buttons individually. located at the bottom of the Properties Control window (next to the Apply to All button) are activated only when more than one button is selected on a page. The only values that will display in the grid while the Apply To All button is depressed are those values that are common among all selected items. 181 Apply To All button Use the Apply to All option to set button properties to edit multiple buttons simultaneously. If the Apply To All button is depressed and you select more than one button to act on. To make state-oriented changes across multiple states. and you select more than one button to act on. the Prev or Next buttons are unavailable and every selected button has the edit focus. All modifications are always done on the button with the edit focus.Working With Properties Using the Apply To All option The Apply To All button is located at the bottom of the Properties Window (FIG. Use the Prev and Next buttons to cycle through the selected buttons to view each button's properties in the Properties Control window. select the states that you want to edit and they will appear listed in the States tab of the Properties Control window. only one of them has the edit focus at any given time. provided that the change can be applied to them all. If the Apply To All button is not depressed. When you have multiple buttons selected. only one of them has the edit focus at any given time. 181). and the Apply To All button is not depressed (FIG. The button represented in the Properties Control window is the one with edit focus. Also note that while you have multiple buttons selected. To make changes that affect all states on a button at once. Using the Prev and Next buttons The Prev and Next buttons. Typing in or changing a value in any property box will immediately affect all selected buttons. Use the Prev and Next buttons to cycle through the selected buttons to view each button's properties in the Properties Control window. you will see a message that states that the value was only applied to those buttons for which it was valid. Hold down the Shift key and click to select multiple buttons.

the Design View context menu. 185). This action invokes the Property Painter dialog (also accessible via the View menu). 5. FIG. See Saving a Properties Set. 183). The following example shows the Property Painter dialog invoked as a result of selecting a General-type button (FIG. 184 Property Painter dialog 3. 184). Page or Popup Page in the Design View. Click Grab Selected to grab (copy) the selected Properties. 185 Selection Tool TPDesign4 (v2.Working With Properties Working With The Property Painter The Grab Properties and Paint Properties tools work together with the Property Painter dialog to allow you to grab (copy) the properties of a selected Button. and paint (copy) them onto another Button. Select Grab Properties Tool from the Edit menu. Page or Popup Page that you want to grab. The set of selected properties (but not their values) may be named and saved for later use by entering a name in the Property Set text box. In the Property Painter dialog. FIG. Click on a Button or Page in a Design View window to take a snapshot of the properties and values of the Button. Page or Popup Page: 1. FIG. select another Button. Page or Popup Page. or click the toolbar button to activate the Grab Properties tool (FIG.11 or higher) 177 . 4. With the Selection tool (FIG. Page or Popup Page that is clicked on. click the checkboxes to select the Properties of the selected Button. 183 Grab Properties Tool 2.

186 Property Painter dialog Saving a Properties Set Use the Property Set feature in the Property Painter dialog to save a set of Properties (but not their values) that can be recalled later.11 or higher) . 186). 178 TPDesign4 (v2. 6.Working With Properties Hold the Shift key and left-click to apply the properties to multiple selected Buttons. FIG. Click Paint Selected to apply the properties that were "grabbed" from the first item to the selected item(s) (FIG.

11 or higher) 179 . Color Depth Select the color depth to be applied to the button. Column 2 on the List Box Button will display column 4 from the List Data Table. Auto-repeat causes the button to constantly cycle through its states (Yes/No. This button property is available for Computer Control buttons only. default = No). 187 Column Display Order For example. Default = high-color (16-bit) This setting should match that of the host PC. Column 3 on the List Box Button will display column 5 from the List Data Table. from left to right. and select the desired style from the drop-down list There are several types of border styles to choose from. using a List Data Table that contains 5 columns. Popup Page and Button properties) are listed below. Column Display Order Enter a string of space-delimited integers to specify the order in which the columns in the List Data Table are displayed in the List Box button. FIG. This value is in 1/100th second increments (default = 2). you could enter (without quotes) "3 4 5 2 1" to populate the List Box Button as follows: Column 1 on the List Box Button will display column 3 from the List Data Table. and they all can all be assigned to both popup pages and buttons. TPDesign4 (v2. Animate Time Up The time intervals between states as the button animates from the Off to the On state. This property is available for Multi-State buttons only. click Border Style. Border Style To change the Border Style for the selected button. The options are high-color (16-bit) or true color (24-bit). Auto-Repeat Select wether to apply auto-repeat to the button.Working With Properties General Properties All General properties (including Page. These properties are editable via the General tab of the Properties Window: Above Popups This option allows you the selected button(s) on a Main page to always remain on top of any popup pages (Yes/No. This property is available for Multi-State buttons only. Animate Time Down The timer intervals between states as the button animates from the On to the Off state. default = No). This value is in 1/100th second increments (default = 2). This property is available for Multi-State buttons only. This option is not available for buttons on a popup page.

where you can type the description. To add a group. then column 1. One or more columns can be specified.. This property is enabled only for List Box Buttons. and a List Table Address and Port is assigned. Description Use this text field to enter a general or functional description for this button. when a List Data Table is assigned. and a List Table Address and Port is assigned. The value is a space delimited string of integers representing columns in the List Data Table. This will create a corresponding folder under the Popup Pages folder in the Workspace Navigator (Pages tab). the value would be (without quotes. Cursor Name Select the desired visual style for the joystick cursor.11 or higher) . If however the user wishes the table data to be sorted by column 3. This button property is available for Joystick buttons only. This button property is available for Text Input buttons only. Group Use this field to add the selected Popup Page to a specific Popup Page Group. Display Type Click to select the display type to be invoked by this Text Input button (single line or multiple lines). Disabled Indicates how the selected button will be rendered. when a List Data Table is assigned. This button property is available for Joystick buttons only. the button will be rendered by the panel in a subdued state (default = No).) button to open the Enter Text dialog.. This button property is available for Computer Control buttons only. Cursor Color Specify a color for the Joystick cursor. The default is single line. Click the browse (. Compression Select wether to compress the image on the button (Yes/No. If the button is set as Disabled (select Yes from the drop-down).. For example. Click the browse (. Column Sort Order Specifies the column sort order for the list table data before populating the list box control. if the user wishes to sort the table based on column 1. and finally column 5. Click the down arrow to select from the list of available cursor types. This property is available for Popup Pages only. Multiple column sorting is useful when a column contains duplicates or more than one cell is empty. simply drag the desired popup pages into the desired group folder. To place a popup page in a particular popup group. default = No).. with a space between each number) "3 1 5". the value would be "1".. Column 5 on the List Box Button will display column 1 from the List Data Table. 180 TPDesign4 (v2. where you can type the description.Working With Properties Column 4 on the List Box Button will display column 2 from the List Data Table. Click the browse (. This property is enabled only for List Box Buttons.) button to open the Enter Text dialog..) button to select a color from the Colors dialog. type any value in the Group field.

enter any character other than those shown in the topics above.11 or higher) 181 . This button property is available for Text Input buttons only. A back-slash ('\') causes the character that follows to be displayed as the literal character. This property is available for Popup Pages only. Use this option to synchronize your popup page transition effects. option may become available: This property is available for Popup Pages only. you can set the X position for the start of the hide effect (range = 0 . you may decide to start the slide at some other point than the absolute left edge of the page. The default setting is 0 (top edge of the page). you can set the Y position for the start of the hide effect (range = 0 . to create multiple logical fields that act as a single field.Working With Properties Height Size values. including spaces and symbols. For example. characters). the button will disappear when transferred to the panel (default = No). the Hide Effect X/Y Pos (position) fields allow you to specify the starting point on the page for the selected Slide Hide Effect. TPDesign4 (v2. to be invoked when the popup is closed (hidden). The default is 0 (the left edge of the page). depending on the page design and graphics. Depending on the Slide Hide Effect selected. these values constantly update to indicate the current dimensions. \A is displayed as just A. If you have selected a left or right slide effect (including slide/fade effects). If the button is set as Hidden (select Yes from the drop-down). Hide Effect Time This property allows you to specify the total amount of time it will take to execute the selected Hide effect.9999).9999). You can edit these fields to apply specific dimension info for the button. This property is available for Popup Pages only. To define a literal. If you have selected a top or bottom slide effect (including slide/fade effects). Hide Effect This property allows you to apply a transition effect to the popup page. Hidden Indicates wether or not the selected button is displayed on the panel. The Height rows indicate the vertical dimensions of the selected button. in pixels. to specify a range of characters / numbers for each field. Input Mask This field allows you apply a mask to user input on the panel. the Hide Effect X Pos. An input mask allows you to force the user to enter the correct type of characters (numbers vs. to change or force character case. In some cases. Hide Effect X/Y Pos Measured in pixels. or Hide Effect Y Pos. suggest a proper format with fixed characters. and/or fill the field from the right or the left. measured in 1/10th-second increments. to set the input as required or optional. Note that if you select the button and manually resize it on the page.

one subordinate button is created automatically. The width of the first column is determined at creation by the width of the list box control. List Column An integer value representing the total number of columns in the List Box button. The other way is to press the Browse button (click inside this field to enable). and the minimum is 1. This button property is available for List Box buttons only. You may alternatively enter the port/address manually (in the Table Port and Table Address text fields in the dialog). to open the Attach Table To List Box dialog. in pixels. List Table Port An integer value representing the port of the List Data Table that the List Box button is attached to. List Column Padding An integer value indicating the number of pixels between columns of buttons. 182 TPDesign4 (v2. The options in this dialog allow you to select a static table that has already been created for in the project. This dialog will populate both the "List Table Port" and "List Table Address" properties when finished. At creation.Working With Properties Left Position values. A list box column contains one or more subordinate buttons of the same width. The number of subordinate buttons in a column depends on the number of rows defined for the list box. justified vertically.11 or higher) . and only when a List Table Port is assigned. This property is read-only and cannot be edited. In unmanaged mode this property is visible (but still read-only) for the unmanaged subordinate buttons. Note that if you select the button and manually move it around on the page. You can edit these fields to apply specific positioning info for the button. This property is available for List Box buttons only. This property is present only when the List Box is in Managed Mode. these values constantly update to indicate the button's current position. relative to the upper-left corner of the Design View window. List Display A string formatted as a space-delimited list of table column numbers in a List Box Button that the columns of the List Data Table are assigned to. This button property is available for List Box buttons only. This way you can keep track of which row the button is identified with. There are two ways to define this property: One is to edit the property directly by typing the Table Port number of a data table (static or dynamic). The maximum number of columns that can be set/created is 10. The Left and Top rows indicate the position of the selected button.

List Table Wrap specifies that the list box will "wrap around" and start at the beginning again if the user presses the next page button when the list is at the end of the table data. If set to "no" (default setting). therefore scrolling would go no further than the beginning or end of the table data. This property is enabled only when a List Table Address and Port are assigned. beginning and end limits are present for the list box. This button property is available for List Box buttons only.11 or higher) 183 . The other way is to press the Browse button (click inside this field to enable). If the user presses the scroll bar down button. to open the Attach Table To List Box Dialog. This button property is available for List Box buttons only. TPDesign4 (v2. When set to no. This property is present only when the List Box button is in Managed Mode. the next page of data will show up in the list box. There are two ways to define this property: One is to edit the property directly by typing the Table Address number of a data table (static or dynamic). The options in this dialog allow you to select a static table that has already been created for in the project. When set to "yes". List Offset Enabled A flag (yes/no) indicating whether an offset of five pixels is applied to the List Box Container all the way around the subordinate buttons of the list box (default = on). This button property is available for List Box buttons only. List Table Wrap This property specifies a behavior for a list box when attached to two or more pages of table data. In this way. Scrolling past the beginning would wrap back around to the end of the list. the subordinate buttons will completely cover the list box container (unless List Row Padding and/or List Column Padding is set to a value greater than 0). A page of table data is simply how much of the table data that can fit on the list box. This button property is available for List Box buttons only. List Managed This display-only field indicates wether the selected List Box Button is in Managed or Unmanaged mode. This dialog will populate both the "List Table Port" and "List Table Address" properties when finished. This button property is available for List Box buttons only.Working With Properties List Table Address An integer value representing the address of the List Data Table that the List Box button is attached to. The same goes for scrolling up. the list becomes cyclical. You may alternatively enter the port/address manually (in the Table Port and Table Address text fields in the dialog). List Filter Column This property sets the column order for filtering data. It is used so that the List Box Container can be selected via the Design View.

Zero "0" disables the preferred row functionality. List Selectable This property is a value representing the current selection type: single or multi. If a row is specified (greater than 0) then the row has some special properties.Working With Properties List Preferred Row An integer value designating a particular row in the list box as the preferred row. This button property is available for List Box buttons only. 184 TPDesign4 (v2. A list box row contains one or more subordinate buttons of the same height. Second. only the cell in the preferred row implements the marquee feature on the panel. The List Preferred Row value has the range from 0 to Row Count (default = 0). This button property is available for List Box buttons only. At creation. This property is present only when the List Box button is in Managed Mode. In unmanaged mode this property is visible (but still read-only) for the unmanaged subordinate buttons. All other rows are specified the same height. This button property is available for List Box buttons in Managed Mode only. So even though a column's state has marquee enabled. it can have a different height specification than all the other rows through the Preferred Row Height property. This property is present only when the List Box is in Managed Mode. This property is read-only and cannot be edited.e. List Row An integer value representing the total number of rows in the List Box button. This is useful for Panels like the R4 where the screen is very small. and the minimum is 1. The height of the first row is determined at creation by the width of the list box control. List Preferred Row Height An integer value indicating the height of the preferred row in the list box. justified horizontally. List Row Padding An integer value indicating the number of pixels between rows of buttons. This way you can keep track of which row the button is identified with. First. List Row Height An integer value indicating the height (in pixels) of all the rows in the list box (i. The maximum number of rows that can be set/created is 50. Marquee state properties are column-based properties. This button property is available for List Box buttons only. Only the preferred row can have a separate height specification.11 or higher) . and the Preferred Row is greater than zero "0". The number of subordinate buttons in a row depends on the number of columns defined for the list box. This button property is available for List Box buttons only. The height of one row bigger than the rest is needed for easy thumb access via the touch screen. the height of all the buttons) excluding the preferred row. This button property is available for List Box Container buttons only. one subordinate button is created automatically. by enabling preferred row all marquee state properties (Marquee Direction and Marquee Repeat) defined for each column are now exclusive to the preferred row.

separated by a colon (i. Password Protection This option allows you to apply password protection to the selected button(s). This property is available for Popup Pages only. You can set up to four passwords per panel. Modal This setting (Yes/No) controls the user's ability to press a button outside the boundaries of the popup page when the popup page is visible. "Button 1 : general". and you cannot apply the Job name (set in the New Project Wizard) to a page. Max Text Length Use this field to specify the maximum number of characters allowed to be entered via this button.Working With Properties Lock Button Name This option controls how the name of the selected button is managed by the program (Yes/No. This button property is available for Text Input buttons only. "Button 2 : multi-state general". This password must match the password entered into the PC remote desktop server.e. where you can type the new name. password 3. Default = 5900. default = No). page and popup page.. by default the buttons are automatically given a sequential two-part name composed of the button number (relative to the number of buttons already created in the Project) and button type. See the Generated Button Names section on page 99 for details...11 or higher) 185 . use this drop-down list to select which of four possible passwords to apply to the selection (none. password 1. Click the browse button (. click Name in the Properties Control Window (General tab) to activate the text field. When new buttons are created. You must use a unique name for each button. Name To give the button a specific name other than the default Button/Popup 1. This button property is available for Text Input buttons only. TPDesign4 (v2. Button/Popup 3 etc. password 2. Remote Port The port to be used on the PC whose desktop is to be displayed. This button property is available for Computer Control buttons only. Password The password supplied by the designer. or password 4). Button/Popup 2. etc). Remote Host The IP or DNS resolvable address of the PC whose desktop is to be displayed. This button property is available for Computer Control buttons only. Page Flip Use this option to assign a page flip (type and target page) to the selected button(s). The range is 0-2000 (default = 0). This button property is available for Computer Control buttons only.) to open the Button Page Flip Actions dialog. S See the Page Flips section on page 107 for details. Password Character Type a single character to be used as the password to access this Text Input button on the panel.

depending on the page design and graphics. Click the browse button (. This property is available for Multi-State (General and Bargraph) buttons only. By default. you can set the Y position for the start of the slide transition effect (range = 0 . option may become available: This property is available for Popup Pages only. To change the state count for the selected button. This button property is available for Computer Control buttons only.) to open the Colors dialog. either the Show Effect X Pos. or Show Effect Y Pos. 186 TPDesign4 (v2. If the state count is increased. If the count is decreased. Show Effect This property allows you to apply a transition effect to the popup page. measured in 1/10th-second increments. If you have selected a top or bottom slide effect. The default setting is 0 (top edge of the page). Show Effect X/Y Pos Measured in pixels. This property is available for Bargraph buttons only.11 or higher) . State Count This field indicates the number of states currently associated with the selected button. Show Effect Time This property allows you to specify the total amount of time it will take to execute the Fade Hide effect. to be invoked when the popup is opened (shown). This property is available for Popup Pages only. This feature allows the state count to be changed via Edit > Find & Replace and with the Paint Properties tool. new states are added to the end of the set as a duplicate of the last existing state. The default is 0 (the left edge of the page). you can set the X position for the start of the slide transition effect (range = 0 . the popup page will always appear at the position established during popup page design each time it is displayed. click inside the text field and enter the desired number. Slider Color Select a color to apply to the bargraph slider. default = No). This property is available for Popup Pages only.9999). This might be desirable if the popup page contains a button which provides the end user with the ability to move the popup page at will. In some cases. states are removed from the end of the set. Depending on the Slide Show Effect selected.Working With Properties Reset Pos. This property is available for Popup Pages only..9999).. If you have selected a left or right slide effect. you may decide to start the slide at some other point than the absolute left edge of the page. the Show Effect X/Y Pos (position) fields allow you to specify the starting point on the page for the selected Slide Show Effect. Slider Name Select the desired visual style for the bargraph slider from the list of Slider types. Scale To Fit Select wether to automatically scale the image to fit the button (Yes/No. This property is available for Bargraph buttons only. Use this option to synchronize your popup page transition effects. scaling is disabled. On Show If this option is turned on.

by using transparencies you could create a button that appears to be round (although the actual shape of the button is rectangular). This button property is available for TakeNote buttons only. via the Select Resource dialog. Timeout This property allows you to specify the Popup Page Timeout. Touching the transparent areas of the button does not active the button. Areas of the button that are totally transparent will not respond to a press.) to select an image to use as the Touch Map image. TPDesign4 (v2. This property is available for Popup Pages only. default = No). Touch Map Click the browse button (.Working With Properties TakeNote Enabled Select wether to enable TakeNote functionality on the selected Computer Control button (Yes/No. Active Touch requires total transparency on the button in order to work. Similarly. This button property is available for TakeNote buttons only. Top Left/Top . Active Touch will not work. in which case you may not the button to respond if the user presses outside of the circular border. Note that if you select the button and manually move it around on the page. the user simply presses the page (with no resulting action). set the Overall Opacity (state) setting to 0. Pass through: This style allows the user to press "through" one button to press another button underneath.Position values. if a transparent button has a visible border but no icon. For example. TakeNote Port Enter the port to be used on the PC whose desktop is to be displayed on this TakeNote button (default = 1541). and only if the Value Direction is set to Touch Map. This button property is available for Computer Control buttons only.11 or higher) 187 . Touch Style This selection drop-down allows you to set a "touch style" for the selected button(s). only the icon would respond to a press.. in terms of the shape and border style used. Bounding box: This touch style forces the panel to respond to a press anywhere within the rectangular boundaries of the button (regardless of transparencies or border styles). If there is no other button underneath the pass through button. The Left and Top rows indicate the position of the selected button. To make a button totally transparent. TakeNote Host Enter the IP or DNS resolvable address of the PC whose desktop is to be displayed on this TakeNote button. in 1/10th second increments. This button property is available for Multi-State Bargraph buttons only. in pixels. For example. relative to the upper-left corner of the Design View window. Active touch: This touch style limits the active touch area to the visible area of the button. if you created a totally transparent button with no border and an icon. If Overall Opacity is set to any other value (for partial transparency). Popup Page Timeout specifies how long a popup page will remain open and active without a button press (default = 0). Touch style describes the way buttons behave when pressed. only the border will respond to a press.. You can edit these fields to apply specific positioning info for the button. these values constantly update to indicate the button's current position.

the options are Vertical. 188 TPDesign4 (v2. click Type in the Properties Control Window (General tab) to activate the button type drop-down menu. the options are Vertical or Horizontal. Value Direction Click the down arrow to select the orientation of the bargraph. You can edit this field to apply specific dimension info for the button.11 or higher) . For Multi State Bargraph buttons. Note that if you select the button and manually resize it on the page. containing a list of all available button types. or Touch Map. these values constantly update to indicate the current dimensions. Horizontal. This property is available for Bargraph and Multi-State Bargraph buttons only.Working With Properties Type The Type (button type) defaults to the button type that was set when the button was created. This property indicates the horizontal width in pixels of every button in the column. Width Size value. To change a selected button's type. For non-multi state Bargraph buttons.

then click on Advanced Codes to access the advanced codes menu. always on. Channel Port Select or enter the port to which the selected button's channel code will be applied.the button will change states (On to Off) on a Push/Release to indicate a channel event always on . Channel Code Select or enter the channel code sent to the master on the selected port. inverted channel. These properties are editable via the Programming tab of the Properties Window: Address Code Select or enter the address code sent to the master on the selected port. Command Output Specify the command string sent to the master on button push.. 1. This button property is available for Joystick buttons only.) to open the Enter Text dialog. blink . or none). to expand the Advanced Codes menu to show the available functions. The NXP-PLV (PosiTrack Video Touch Panel) uses a set of reserved channel and level codes that are reserved for hardware functionality.the button will change states. 2. Enter the command output and click OK (or Cancel to exit without saving). If the Channel Port is set to 0 = Setup Port.the button will "blink" (switch between On and Off states) on a Push/Release Level Aux This (read-only) field indicates the auxiliary level sent to the Master on the selected port. Feedback Select the type of feedback to associate with this button (channel. The combination of Address Port and Address Code must be unique. Click the browse button (.the button will always display the Off state (and will not indicate a Push/Release) channel . and only if a Level Code has been assigned.the button will always display the On state (and will not indicate a Push/Release) momentary . only while the button is being pressed. momentary. Click the '+' sign beside Computer Control. you can click on Channel Code to open the Basic Codes options. Popup Page and Button properties) are listed below. Command Port Select or enter the port to which the command string output will be applied. blink.11 or higher) 189 . none . Address Port Select or enter the port to which the selected button's address code will be associated. TPDesign4 (v2. The combination of Channel Port and Channel Code must be unique.Working With Properties Programing Properties All Programming properties (including Page. These codes cannot be re-assigned to other pages or buttons in the panel project.the button will change states (Off to On) on a Push/Release to indicate a channel event inverted channel ..

Absolute: The button acts like a preset and sets the level to the desired value. this value determines the amount of adjustment relative to the current level resulting from this button. Level Control Repeat Time This value determines the repeat time (in 1/1000th-second increments) for Relative level control. For Relative level control. this value can be entered as a positive integer (to raise the relative level setting) or a negative integer (to lower the relative level setting). the user can touch anywhere inside the joystick button and move the level (according to the Range Drag Increment setting). this value determines the level value that will be recalled by this button. Level Function This option is only available for Bargraph. For example. For relative level control. These options require additional Level Control parameters to be defined. Select Auto-Assign to automatically assign a level code to this button. Relative or None). Select a level control type for the selected button (Absolute. Level Control Type These options allow General buttons to directly control a level without the need for NetLinx code. Active Centering: This option creates an active bargraph or joystick button that returns to it's center position when released. 190 TPDesign4 (v2. if this value is set to 1000. Relative: The button increments or decrements the current level value by a fixed amount. Drag Centering: This option creates an active drag bargraph or joystick button that returns to it's center position when released. This button property is available for Joystick buttons only. Multi-State Bargraph and Joystick buttons. Level Port Select or enter the port to which the Level Code will be applied. to allow for glide-point style controls. These codes cannot be re-assigned to other pages or buttons in the panel project. 2 or auto-assign). Drag: This option creates an active bargraph or joystick button that responds to a relative touch distance on the button after the initial touch. 1. Active: This option creates a bargraph or joystick button for controlling levels according the other button parameters set here. Range Aux Inverted If set to Yes. only the Level Aux range is inverted (default = No). Level Control Value For Absolute level control.Working With Properties Level Code Select or enter the level code sent to the Master on the selected port (none. Select the desired level function: Display Only: This option creates a bargraph or joystick button that only displays level information (but cannot be used to control levels).11 or higher) . When set to Drag. The NXP-PLV (PosiTrack Video Touch Panel) uses a set of reserved channel and level codes that are reserved for hardware functionality. the user can hold the button down for one second to cause the level to raise or lower repeatedly (according to the specified Level Control Value) without having to press the button each time. Select 0 (Setup port) or 1 as the level port for this button.

Working With Properties

Range Drag Increment
This field allows you to specify the amount of change that will be registered by one full drag across the control, to allow for fine/coarse adjustments. This property is available for Bargraph, Multi-State Bargraph and Joystick buttons only, and only if Drag is selected as the Level Function.

Range Low
Set the bottom of the level range (0-255).

Range High
Set the top of the level range (0-255).

Range Inverted
If set to Yes, the range is inverted, so that the top of the level range is 0 and the bottom of the range is 255 on both the X and Y axis (default = No). This button property is available for Bargraph, Multi-State Bargraph and Joystick buttons only.

Range Time Up
Specify the amount of time (in 1/10th seconds) it will take for the bargraph to go from the bottom to the top of the specified range (default = 2). This button property is available for General buttons, if a Level Control Type (other than "none") has been selected. This button property is available for Bargraph and Multi-State Bargraph buttons, and only if one of a specific set of Level Functions was selected. These are: Active Active Centering Drag Drag Centering It is not applicable if the Level Function property is set to "display only".

Range Time Down
Specify the amount of time (in 1/10th seconds) it will take for the bargraph to go from the top to the bottom of the specified range (default = 2). This button property is available for General buttons, if a Level Control Type (other than "none") has been selected. This button property is available for Bargraph and Multi-State Bargraph buttons, and only if one of a specific set of Level Functions was selected. These are: Active Active Centering Drag Drag Centering It is not applicable if the Level Function property is set to "display only".

String Output
Specify the output string sent to the master on button push, on the specified String Output Port.

1. Click the browse button (...) to open the Enter Text dialog. 2. Enter the output string and click OK (or Cancel to exit without saving). String Output Port
Select or enter the port to which the String Output will be applied.

TPDesign4 (v2.11 or higher)

191

Working With Properties

State Properties
All State properties (including Page, Popup Page and Button properties) are listed below. These properties are editable via the States tab of the Properties Window:

Bitmap
To apply an image file as the background image to the selected state(s), click the browse button (...) to open the Select Resource dialog, where you can select an image file from among those imported into the project. If pairs of image resources exist that end in *off/*on, *f/*n, *0/*1, *1/*2 (case insensitive), and the first in the pair is applied to the Off state of a General button, the second will be automatically applied to the On state to make it easier to set up images on a General button.

Bitmap Justification
To set or reset the justification setting for the bitmap (on the selected state(s)), click the down-arrow and select an option from the list. For List Box buttons, this property applies to all the buttons in the selected column.

Bitmap X Offset
To apply an X and/or Y offset to the bitmap (on the selected state(s)), enter the value for the desired offset (in pixels) in these text fields. Alternatively, you can click the browse button (...) to open the Image/Text Positioning dialog where you can make several alignment adjustments to the bitmap, icon and text elements of the button, for each state. This property is available only if the Bitmap Justification State property has been set to Absolute.

Bitmap Y Offset
To apply an X and/or Y offset to the bitmap (on the selected state(s)), enter the value for the desired offset (in pixels) in these text fields. Alternatively, you can click the browse button (...) to open the Image/Text Positioning dialog where you can make several alignment adjustments to the bitmap, icon and text elements of the button, for each state. This property is available only if the Bitmap Justification State property has been set to Absolute.

Border Color
To change the border color for the selected state(s), click the browse button (...) to open the Colors dialog. For List Box buttons, this property applies to all the buttons in the selected column.

Border Name
To change the Border Name for the selected button, click Border Name, and select the desired border from the drop-down list. If a Border Style was specified (in the General tab), then the borders listed here are limited to those contained in the selected Border Style. If no Border Style was specified (none), then all border names are available in the provided list. For List Box buttons, this property applies to all the buttons in the selected column.

Chameleon Image
This field allows you to apply a Chameleon Image to the selected state(s). This property is only available only if the Border Name has been set to None. Chameleon Images can be used to create special effects such animated glow and drop-shadows. Click the browse button (...) to open the Select Resource dialog, where you can select an image to apply as a Chameleon Image.

192

TPDesign4 (v2.11 or higher)

Working With Properties

Draw Order
This field allows you to specify the order in which the elements of a button, page or popup page are drawn. By default, the draw order is: 1) fill, 2) bitmap,3) icon, 4) text, 5) border. Click the browse button (...) to access the State Draw Order dialog to change the draw order. For List Box buttons, this property applies to all the buttons in the selected column.

Fill Color
To change the fill color for the selected state, click the browse button (...) to open the Colors dialog. For bargraph buttons, the preview image in the State Manager works differently than for the other button types. For bargraph buttons, the on and off states are used to indicate a level setting rather than a push/release. As a result, the button image in the Design View window will indicate the bargraph button as it will appear on the touch panel, but the thumbnails in the State Manager window indicate each state as a separate preview image. For example, the bargraph button shown below uses yellow as the On state fill color, and green as the Off state fill color. In the State Manager window you would see the On state (yellow) and the Off state (green) as individual thumbnails. The Button Preview window works differently for bargraph buttons than for the other button types. Rather than using the Push button to view the different states, click and drag on the slider with your mouse cursor (in the Button Preview window) to preview the feedback. For List Box buttons, this property applies to all the buttons in the selected column.

Font
To change the font used for text on the selected state(s), click the browse button (...) to open the Font dialog, where you can select a Font, Style and Size for the button text. For List Box buttons, this property applies to all the buttons in the selected column.

Icon Justification
To set or reset the justification setting for the icon (on the selected state(s)), click the down-arrow and select an option from the list. For List Box buttons, this property applies to all the buttons in the selected column.

Icon Slot
To apply an icon to the selected state(s), click the browse button (...) to open the Select Resource dialog, where you can select a slot assignment (icon) to apply.

Icon X Offset
To apply an X and/or Y offset to the icon (on the selected state(s)), enter the value for the desired offset (in pixels) in these text fields. Alternatively, you can click the browse button (...) to open the Image/Text Positioning dialog where you can make several alignment adjustments to the bitmap, icon and text elements of the button. This property is only available only if the Icon Justification State property has been set to Absolute.

Icon Y Offset
To apply an X and/or Y offset to the icon (on the selected state(s)), enter the value for the desired offset (in pixels) in these text fields. Alternatively, you can click the browse button (...) to open the Image/Text Positioning dialog where you can make several alignment adjustments to the bitmap, icon and text elements of the button. This property is only available only if the Icon Justification State property has been set to Absolute.

TPDesign4 (v2.11 or higher)

193

Working With Properties

Marquee Direction
This field allows you to specify the direction in which marquee text will move. By default, this property is set to Disabled. Click inside the field to activate the down arrow, to select from the other marquee direction options: The marquee direction options include: Disabled - When this property is set to Disabled, the text on the button will not be treated as marquee text. Scroll left - Text scrolls horizontally to the left. Scroll right - Text scrolls horizontally to the right. Ping-pong - Text "bounces" back and forth horizontally between the left and right boundaries of the button area. Scroll up - Text scrolls vertically upward. Scroll down - Text scrolls vertically downward. Both Marquee Direction and Marquee Repeat are disabled if Word Wrap is set to Yes.

Marquee Repeat
This field allows you to specify whether the marquee text element on a button will appear to repeat the text string once it has moved all the characters beyond the boundaries of the button. The movement of marquee text is specified by the Marquee Direction button state property. By default, this property is set to No. To enable repeat marquee text, click inside the field to activate the down arrow to change to Yes. Both Marquee Direction and Marquee Repeat are disabled if Word Wrap is set to Yes.

Overall Opacity
Use this field to specify the level of opacity for the selected button (0 - 255, where 0 is totally transparent, and 255 is totally opaque). The default is 255. For List Box buttons, this property applies to all the buttons in the selected column.

Scale Bitmap To Fit
This property is available only if the Bitmap selected for this button/state is a dynamic image. Note that this option is available only for Dynamo Dynamic Images (not for Dynamo Resource Images) This option scales the Dynamo Dynamic Image down to fit the container button, popup or page. It will not scale Dynamo Dynamic Images up to fit. To automatically scale the dynamic image (down only) to fit the button, click the down-arrow and select Scale To Fit (default = No). The options available for Scale Bitmap To Fit depend on the panel type associated with your project: No - The Dynamo Resource image will not be scaled at all, and the image will be arbitrarily centered on the container button, popup or page. If the Dynamo Resource image is larger than it's container, the image will be cropped on all sides by equal amounts. This is the default setting. Use the Bitmap Justification State property to position the dynamic image bitmap within the button borders. 2x - This option doubles the size of the Dynamo Resource image. Note that this option is only available for Dynamo Resource Images (not for Dynamo Dynamic Images). See the AMX Touch Panels that Support Dynamo Resource Images section on page 6. If the resulting image is larger than it's container, the image will be cropped on all sides by equal amounts. Scale To Fit - This option automatically resizes the Dynamo Dynamic image, maintaining the aspect ratio of the image.

194

TPDesign4 (v2.11 or higher)

Working With Properties

Sound
To change or apply a new sound file to the selected state(s), click the browse button (...) to open the Select Resource dialog, where you can select a sound file (WAV or MP3) from among those imported into the project.

Streaming Source
Enter the URL or IP Address of the server that will provide the video stream. This property is available only if Streaming Video is selected as the Video Fill). Streaming Video is only available as a Video Fill option if the project specifies a touch panel that supports streaming video.

Text
To change or enter the text to be displayed on the selected state(s), click the browse button (...) to open the Enter Text dialog, where you can type the new button text. Use the Preview Using Font option to view the text as it will appear in the selected font, style and size (on by default). Unicode characters may be entered via the Enter Text dialog only (not through in-place editing in the States tab of the Properties Control window). When Unicode text is input, the name of the button will not match it's Off state text. Formatting codes can be used in the state text for Bargraph and Multi-State Bargraph buttons.

Text Color
To change the text color for the selected state, click the browse button (...) to open the Colors dialog. For List Box buttons, this property applies to all the buttons in a selected column.

Text Effect
Text effects are graphic effects that can applied to button/page/popup text (for example, the Glow effect applies a neon glow or halo effect to the text on the selected button/state(s). Each text effect is available in several variations ((i.e. Small, Medium, Large or XtraLarge). To apply a text effect to the button text, click the browse button (...) to access the Text Effect sub-menu. This sub-menu presents all available text effects, sorted by type. Click the + symbol next to any effect type in the sub-menu to see all of the variations on that effect. Once you have selected a text effect, use the Text Effect Color field to specify a color for the effect. For List Box buttons, this property applies to all the buttons in the selected column.

Text Effect Color
If you have selected to apply a text effect, use this field to specify the color of the selected effect. Click the browse button (...) to open the Colors dialog. For List Box buttons, this property applies to all the buttons in the selected column.

Text Justification
To set or reset the justification setting for the button text (on the selected state(s)), click the down-arrow and select an option from the list. For List Box buttons, this property applies to all the buttons in the selected column

Text X Offset
To apply an X and/or Y offset to the text (on the selected state(s)), enter the value for the desired offset (in pixels) in these text fields. Alternatively, you can click the browse button (...) to open the Image/Text Positioning dialog where you can make several alignment adjustments to the bitmap, icon and text elements of the button. This property is available only if the Text Justification State property has been set to Absolute).

TPDesign4 (v2.11 or higher)

195

Working With Properties

Text Y Offset
To apply an X and/or Y offset to the text (on the selected state(s)), enter the value for the desired offset (in pixels) in these text fields. Alternatively, you can click the browse button (...) to open the Image/Text Positioning dialog where you can make several alignment adjustments to the bitmap, icon and text elements of the button. This property is available only if the Text Justification State property has been set to Absolute).

Video Cropping
Use this field to specify the number of scan lines to be removed from both the top and bottom of the video signal. For best results, set the video button's aspect ratio to match the video input aspect ratio. This property is only available if the Video Fill State property is set to either Composite Video or Component/RGB Video.

Video Fill
Click the down arrow to select from a drop-down list of video formats that are supported by the touch panel specified in your project. Video-capable Modero panels support Composite video, and Enhanced Modero panels support Composite, Component/RGB and Streaming video formats. If you have specified the NXP-TPI4, click the down-arrow to select from the list of available video slots on the TPI4 (video slot 1,2,3 or 4) to use as the source for this video fill. If you select Streaming Video as the Video Fill, then the Streaming Source state property is made available. Enter the URL or IP Address of the server that will provide the video stream. This property is only available for video-capable panels. See the Video Capabilities for Modero Panels section on page 5 and the Video Capabilities for Enhanced Modero Panels section on page 5 for details.

Video Touch Pass-Thru
Select Yes from the drop-down menu to enable video pass-thru (disabled by default). This property is enabled only if the Video Fill State property has been set to either Composite Video or Component/RGB Video. Video pass-thru allows you to pass touch/control information from a touch input device (touch panel, mouse or keyboard) through a NXP-TPI/4 to a controlled device with video-out capabilities. This feature is also used in conjunction with the MPS (mouse pass-thru) and KPS (keyboard passthru) commands.

Word Wrap
Use this option to enable the wrapping of text strings that are too long to be displayed across the page on one line. Click the down-arrow and select Yes or No from the drop-down list (default = No). Note that both Marquee Direction and Marquee Repeat are disabled if Word Wrap is set to Yes. For List Box buttons, this property applies to all the buttons in the selected column.

Using the All States Option
Use the All States option (in the States tab of the Properties Control window) to apply any changes you make to all states on the selected button. Note that if you have multiple buttons selected (Shift+click to select multiple buttons a page), the All States option only affects states for the button that has Edit Focus. The button with edit focus would be the last one selected, and is indicated by having red-colored square handles (as opposed to the black squares that indicate that a button is selected, but does not currently have edit focus).

196

TPDesign4 (v2.11 or higher)

3. In the Search Scope area. or across the entire Project. which allows you to search for any button property value either within the currently open Page. based on the specified criteria and scope. select the button properties to use as the search criteria. Click the plus symbol (+) to expand the views. You can include any General or State button property as search criteria. If the scope of the search is set to Entire Panel. Open the Find dialog (FIG. Select Find Next to continue the search.11 or higher) 197 . For example. General and State properties are separated into two sections (labeled as General and States). You can specify to search for any General or State button property. FIG. TPDesign4 (v2. Select Select All to close the Find dialog and select every button that meets the criteria. To search for button properties: 1. you can perform a search based on button type. the Select All button is disabled. select either Entire Panel or Current Page. the Find In Page dialog is compressed to only show the buttons that satisfy the search criteria. 188 Find dialog 2. and state count (among many others). If the scope of the search is set to Current Page. When the first instance of the criteria is found.Working With Properties Searching For Button Properties Select Edit > Find (or click the toolbar button) to access the Find dialog. 188). The program will inform you if no buttons are found that match the search criteria. To select all General button properties. Scroll down to view all of the available button properties that can be used as search criteria. name. Click the minus symbol (-) next to the General and States headings to collapse the sections. or any combination of search criteria. in which case you can use the Find Next button to cycle through the pages that contain buttons whose values match the search criteria. and the first button found that satisfies the search criteria is selected in the Design View. use the Find Next button to search the current page only. 4. click in the checkbox next to the States heading. to select all State-oriented button properties. In the Search Criteria table. border style. click in the checkbox next to the General heading.

Working With Properties

When you select a General as well as a State-oriented search criteria, only buttons that match the General criteria, and within that set, the states that match the State criteria will be candidates for the replace operation. For example, if you set the search criteria to include both the Glow-S border style (a General property) and yellow as the Fill Color (a State property), only those buttons with a Border Style of Glow-S are candidates, and within that set of candidates, only those states whose Fill Color is set to yellow satisfy the search criteria.

Searching and Replacing Button Properties
Select Edit > Find & Replace (or click the toolbar button) to access the Find and Replace dialog, which allows you to find (and optionally replace) any button property value with another value of your choosing. You can specify the scope of the search to either the currently open Page only, or across the entire Project (FIG. 189).

FIG. 189 Find and Replace dialog,

To search and replace button properties:

1. Open the Find & Replace dialog (see above). 2. In the Search Criteria table, select the button properties to use as the search criteria. You can include any
General or State button property as search criteria. General and State properties are separated into two sections (labeled as General and States). Scroll down to view all of the available button properties that can be used as search criteria. Click the minus symbol (-) next to the General and States headings to collapse the sections. Click the plus symbol (+) to expand the views. To select all General button properties, click in the checkbox next to the General heading; to select all State-oriented button properties, click in the checkbox next to the States heading.

3. In the Search Scope area, select either Entire Panel or Current Page.
If the scope of the search is set to Entire Panel, the Select All button is disabled, in which case you can use the Find Next button to cycle through the pages that contain buttons whose values match the search criteria. If the scope of the search is set to Current Page, use the Find Next to search the current page only, based on the specified criteria and scope.

4. In the Replace Values table, select the button properties to use as the replace values. The Replace Values
do not necessarily have to match the Search Criteria (although they may). It is also possible to replace multiple values or establish multiple search criteria. For example, to change the Border Style on one or more buttons, select Border Style in the Search Criteria table, then select the particular border style to search for from the drop-down list. Then, select

198

TPDesign4 (v2.11 or higher)

Working With Properties

Border Style in the Replace Values table, and select the desired replacement border style from the dropdown list. Repeat this process for as many other button properties as needed.

5. When the first instance of the criteria is found, the Find In Page dialog is displayed, listing the buttons
that satisfy the search criteria, and the first button found that satisfies the search criteria is selected in the Design View. Select Find Next to continue the search. Select Replace All to close the Find dialog select every button that meets the criteria. The program informs you of the number of buttons affected by this change. All replace actions support full Undo / Redo capabilities. The program will inform you if no buttons are found that match the search criteria. When you select a General as well as a State-oriented search criteria, only buttons that match the General criteria, and within that set, the states that match the State criteria will be candidates for the replace operation. For example, if you set the search criteria to include both the Glow-S border style (a General property) and yellow as the Fill Color (a State property), only those buttons with a Border Style of Glow-S are candidates, and within that set of candidates, only those states whose Fill Color is set to yellow satisfy the search criteria.

TPDesign4 (v2.11 or higher)

199

Working With Properties

200

TPDesign4 (v2.11 or higher)

Working With States

Working With States
Overview
All G4 panel entities (Pages, popup pages and buttons) have at least one state. Pages and popup pages have only one state. General, Bargraph and Text Input buttons have only two states (on/off). Joystick buttons only use one state (Off). Multi-State General and Multi-State Bargraph buttons can have up to 256 states. States start at 1. The ability to set the State Properties (including border name, border color, fill color, text color, video fill, bitmap, bitmap justification, icon assignment, icon justification, font, text, text justification, word wrap preference and sound) is provided at the state level, via the States tab of the Properties Window.

State Manager Window
The State Manager window allows you to view and modify individual states. The State Manager window supports full Cut, Copy, Delete, Insert, Replace and Paste as well as drag and drop capabilities (FIG. 190).

FIG. 190 State Manager window - showing a multi-state button (6 states)

The State Manager context window (open via right mouse click on any thumbnail in the State Manager) support allows the user to Add single or multiple states, Replace states, Insert single or multiple states and Remove states. For Multi-State General buttons the different states are used to animate a button from Off to On (Range Time Up) and back again to Off (Range Time Down). When the button is turned on it will display all the assigned states from first to last with a specified time interval between each state's display. When the button is turned back off, the states will be displayed in reverse order. The interstate time intervals are user definable in 1/10th second increments. A zero entry will automatically advance / retreat to the ending / beginning state without displaying any intervening states. For Multi-State Bargraph buttons, the level will directly reflect the displayed state. You can set an allowable range within a bargraph that has states. Anything outside of that range will not be represented by a state. For buttons with multiple states, Send Commands can set the state number, provided it is not a level type button.

State Manager Context Menu
Right mouse click on any thumbnail in the State Manager window to open the State Manager context menu, which includes options to add single or multiple states, replace states, insert single or multiple states, and remove states. Use Ctrl+click to select multiple individual button states. Use Shift+click to select a range of states (between two selections). Use Ctrl+A to select all button states.

TPDesign4 (v2.11 or higher)

201

Working With States

The items in this context menu include: Size - This option sets the size of the button thumbnail views as they appear in the State Manager window. Add States - This option opens the Add States dialog, which allows you to add multiple states to the selected button (up to a total of 255 states). Insert States - This option opens the Insert States dialog, which allows you to insert multiple states to the selected button. This option inserts the specified number of states directly after the selected (highlighted) state. Quick Input - Click to open the Quick Input sub-menu, where you can specify how to use the Quick Input feature (Current Property, Text or Disabled). Use Quick Input to make fast edits to various page and button elements and properties. Cut/Copy/Paste - Use these options to either cut, copy or paste a selected button state to/from clipboard memory. Replace - Use this option to replace the selected button state with the contents of clipboard memory. Delete - Use this option to delete the selected button state(s) from the button. Select All - This option selects all states associated with the selected button. Reverse States - This option reverses the order of states selected in the State Manager window. The selected states do no have to be contiguous. Set As Display State - This option sets the state that is currently being displayed in the Design View as the display state for the button. Image/Text Positioning - This option opens the Text/Image Position dialog, which allows you to specify the position of images and/or text on the selected button state(s). Animation Wizard - This option launches the Animation Wizard. The Animation Wizard guides you through the process of creating an animated button. Tweeners - Click to open the Tweeners sub-menu where you can select from several types of tweeners to use (for animation purposes).

Adding States To a Button
There are three ways in which new states can be added to a Multi-State General or Multi-State Bargraph button (the number of states is fixed for the other button types): Duplicating an Existing State on the Button Adding States From the Clipboard Adding States Through Drag-and-Drop

Duplicating an Existing State on the Button
One way to add new states to a Multi-State General or Multi-State Bargraph button is by duplicating an existing state on the button:

1. If the new states are to be added to the end of the collection (in the State Manager window), right-click to
open the State Manager Context Menu, and select Add States.

2. If the new states are to be inserted elsewhere in the collection, first select the state prior to which the new
states will be created, then right-click to open the State Manager Context Menu and select Insert States.

3. The Add States dialog (or the Insert States dialog if you selected Insert States) is displayed (FIG. 191).

FIG. 191 Add States dialog & Insert States dialogs

202

TPDesign4 (v2.11 or higher)

Working With States

Use these dialogs to specify the number of states to be created, and which existing state to duplicate (which will be highlighted in the State Manager as the state number is changed).

4. When the desired number of states and the state to duplicate have been chosen, press OK and the new
states will be added to the collection in the desired location. Otherwise, press Cancel to exit the dialog without creating any states.

Adding States From the Clipboard
One way to add new states to a Multi-State General or Multi-State Bargraph button is by pasting states from the clipboard. Pasting states from the clipboard offers more power and flexibility than single state duplication. States may be copied from another button, page, or popup page, or even from a different panel:

1. First select the button, page, or popup page whose states will be copied. 2. In the State Manager window, select the source states. Hold down the Ctrl key while left-clicking to add
states to the selection. Left-click + Shift to select a range of states.

3. When the source states have been selected, copy them to the clipboard (Ctrl-C). 4. With the source states copied to the clipboard, select the Multi-General or Multi-Bargraph button to
which the states in the clipboard should be copied (in the State Manager). Select the state prior to which the new states will be inserted. To add the copied states to the end of the series, ensure that no states are currently selected in the State Manager (or select the last state in the series).

5. Paste the states from the clipboard (Ctrl-V).
When copying states from another button or from a popup page, the pasted state's border style may be modified to ensure that it is an acceptable style in the button's border family.

Drag & Drop To Add States
A simplified alternative to using the clipboard to add copies of states within the same button is to use drag-anddrop:

1. First select the source state(s). Hold down the Ctrl key while left-clicking to add multiple states to the
selection. Hold down the Shift key while left-clicking to select a range of states.

2. With the source states selected, press and hold the right mouse button while over one of the selected
states. While continuing to press the right mouse button, move the mouse to the location where the states will be copied (FIG. 192).

FIG. 192 Drag & Drop To Add States

If the states are to be added to the end of the collection, drag the source states beyond the last state. If they are to be added elsewhere in the collection, drag the source states either over the state prior to which the new states will be inserted, or over the space between state thumbnails where the new states will be inserted.

TPDesign4 (v2.11 or higher)

203

Working With States

3. Release the right mouse button and select Insert copy... from the drag-and-drop menu (FIG. 193).

FIG. 193 Drag & Drop To Add States (Insert Copy...selected)

4. The new States are added according to the option selected in the drag-and-drop menu (FIG. 194):

FIG. 194 Drag & Drop To Add States (States copied before State 3)

Setting the Maximum Active State For a Button
You can set the maximum active state on a multi-state button by selecting the last state in a sequence (in the State Manager window) and selecting the States > Set As Max Active State option. The state tagged as the max active state will be the last one included in the multi-state sequence. All states beyond the max active state are ignored when the button is pushed. Note that the states that occur after the max active state in the sequence are displayed with crosshatching across the labels on the thumbnails in the State Manager window, to indicate which states will not be included in the multi-state sequence.

Removing States From A Button
States can be removed from a Multi-State General or Multi-State Bargraph button (the number of states is fixed for the other button types) by either deleting them from the collection, or by cutting them to the clipboard. Multi-General or Multi-Bargraph buttons must have at least two states. Actions that would cause the number of states to drop below two are not allowed.

Deleting States 1. Select the states to be deleted. Hold down the Ctrl key while left-clicking to add states to the selection.
Hold down the Shift key while left-clicking to add a range of states to the selection.

2. Delete the selected states by selecting the Edit > Delete, State Manager Context Menu > Delete, or the
Del key.

204

TPDesign4 (v2.11 or higher)

Working With States

Cutting States To the Clipboard 1. Select the states to be cut. Hold down the Ctrl key while left-clicking to add states to the selection. Hold
down the Shift key while left-clicking to add a range of states to the selection.

2. Cut the selected states to the clipboard by selecting Edit > Cut, State Manager Context Menu > Cut, or
the Ctrl-X keyboard accelerator.

Changing the Order Of States On A Button
Changing the order of states in a Multi-State General or Multi-State Bargraph button can be accomplished either through the clipboard or by drag-and-drop:

Reordering States Through the Clipboard 1. In the State Manager window, select the states to be moved.
Ctrl + click to select multiple states individually. Shift + click to select a range of states.

2. Cut the selected states to the clipboard (Ctrl-X). 3. If the states are to be moved to the end of the collection: a. Ensure that no states are currently selected in the State Manager (click anywhere outside of a state
thumbnail, or press ESC).

b. Then, paste the states from the clipboard by selecting Edit > Paste, State Manager Context Menu >
Paste, or the Ctrl-V keyboard accelerator.

4. If the states are to be moved elsewhere in the collection: a. Left-click to select the state prior to which the new states will be inserted. b. Then insert the states from the clipboard by selecting Edit > Insert, State Manager Context Menu >
Insert, or the Ctrl-V keyboard accelerator.

Reordering States Through Drag-and-Drop
A simplified alternative to using the clipboard to reorder states is to use drag-and-drop.

1. Select the states to be moved.
Ctrl + click to select multiple states individually. Shift + click to select a range of states.

2. Press and hold the left mouse button while over one of the selected states. While continuing to press the
left mouse button, move the mouse to the location where the states will be moved. If the states are to be moved to the end of the collection, drag the states beyond the last state. If they are to be moved elsewhere in the collection, drag the states over the space between state thumbnails where they will be moved.

3. Release the left mouse button (the same operation can also be performed with a right mouse button dragand-drop, selecting "Move…" from the drag-and-drop menu).

Copying/Pasting States From a Page, Popup Page or Button
Copying a State to the Clipboard
Copying a state from a page or popup page is possible by selecting the desired states in the State Manager then either clicking Edit > Copy from the main menu or clicking on the Copy button from the main toolbar. You may also right click and select copy from the context menu.

Pasting a State from the Clipboard
You may paste (by either clicking Edit > Paste from the main menu or by clicking the Paste toolbar button) a previously copied state onto a corresponding state in the State Manager (for the page or popup page).

TPDesign4 (v2.11 or higher)

205

Working With States

Pasting a state on the panel name in the Panel Navigator (which is for pages or popup pages only), on the folder named Pages (which is for pages only), on the folder named Popup Pages (which is for popup pages only) is not allowed.

Draw Order (Z-Order)
Z-Order, or "Draw Order" refers to the order in which the various visual elements of a Page, Popup Page or Button are drawn on the screen. The element at the top of the Z-Order overlaps all other elements. The top of the Z-Order is like the top layer in a multi-layer drawing. The element at the bottom of the Z-Order is overlapped by all other elements. The bottom of the ZOrder is like the bottom layer in a multi-layer drawing. By default, the state draw order is:

1. 2. 3. 4. 5.

fill bitmap icon text border

You can change the draw order via the options in the State Draw Order dialog.

Changing the Draw Order for Selected States
Use the State Draw Order dialog to specify the draw order for selected states:

1. Select a button, page or popup page. 2. Click the Browse button (...) in the Draw Order State property to access the State Draw Order dialog
(FIG. 195).

FIG. 195 State Draw Order dialog

3. Select an element in the list, and use the Move Up and Move Down buttons to move the element up or
down in the list.

4. Repeat with the other elements in the list to rearrange the order as desired. 5. Click OK to close the dialog.
Note that the new draw order is indicated in the Draw Order state property.

206

TPDesign4 (v2.11 or higher)

Working With Function Codes

Working With Function Codes
Overview
In terms of designing buttons that interact with and control the various devices on the control system, TPD4 uses a concept that is familiar to TPDesign3 users, but which has a new name in TPD4: Function Codes. Function Codes were known as Channel Codes and Variable Text Codes in TPDesign3. In TPD4, the term Function Codes refers to all three of the code types that can be assigned to buttons: Channel Codes: Displayed in the upper-left corner of the button, the channel codes indicate the port number and the channel code associated with the button. The channel codes represent communication out of the panel to the master controller. Address Codes: Displayed in the lower-right corner of the button, address codes in TPD4 are similar to the Variable Text Codes in TPDesign3. The address code represents communication from the master controller to the panel, causing the panel to do something (i.e. indicate feedback, display a text string, etc). Level Codes: Displayed in the lower-left corner of the button, level codes represent bi-directional communication between the panel and the master controller (i.e. the panel can cause a change in a level setting, and a changed level setting generates feedback on the panel). Each function code is a two-part number separated by a colon: Port Number:Channel/Address/Level Number (depending on which function code you are looking at). In the example below, the button function code assignments all indicate port 1 and channel/level/address 1 (FIG. 196).

FIG. 196 Button Function Code Assignments

The easiest way to handle function codes is to create and finalize your touch panel pages and buttons (with function codes) before generating the supporting Axcess or NetLinx program code. That way, in case you have to change any aspect of the project (i.e. add/remove controlled equipment, test strings, graphics, etc), you can update the function code assignments in TPD4, rather than having to re-write your code. There are several key differences in the way Function Codes work in TPD4 relative to the way they worked in TPDesign3: "Devices" in TPDesign3 are known as "Ports" in TPD4 (the maximum number of available ports in TPD4 is 100). Where there was a maximum number of 255 channel codes per device in TPDesign3, you can assign up to 4000 codes per port in TPD4. Unlike TPDesign3, TPD4 lets you to assign Address and Channel Codes directly to a page.

TPDesign4 (v2.11 or higher)

207

FIG. 197 Function Code Map 208 TPDesign4 (v2.Working With Function Codes Show/Hide Function Codes You can choose to display function codes. Function Code Map Click the Function Maps tab (at the bottom of the Workspace Navigator window) to view the Function Code Map (FIG.11 or higher) . Function Codes . Alternatively. they will also be included in printed output. If Display Function Codes is enabled. 197). The maximum number of ports in TPD4 is 100. as well as the current state of buttons in the Design View window via the View > Display Function Codes option (or the toolbar button). The maximum number of address codes per port is 4000.Limitations The maximum number of channel codes per port is 4000. press the F7 key to toggle the function codes. The maximum number of level codes per port is 600.

Select Panel > Verify Function Codes to automatically verify the active project's Function Code Map. A double-click action on the item will open the associated page (or popup page) and place the edit focus on that item. ensure that the codes selected apply to your particular panel type.e.11 or higher) 209 . For example. motion.Working With Function Codes The Function Code Map is a representation of the Channel codes. Address codes. 0. you cannot drag and drop an Address Code (regardless of the port folder that contains it) into any port folder contained in either the Channel or Level folders. and/or cradle). that code will be ignored. you cannot edit String or Command Outputs the same way. Some of the actions may be hardware dependent. and fix any problems that are found. You can use the Function Code Map to delete codes as well as drag and drop items from one port to another. Channel or Level port to the setup port provides a list of predefined actions. displayed in a hierarchical tree format in the Function Map tab of the Workspace Navigator window. Therefore. In the event that an inappropriate code is selected for a given panel type. Level codes. Neither String or Command Outputs support any type of drag and drop operations. Address Codes. TPDesign4 (v2. battery. and within Port by Code. Channel or Level port to the setup port ("0") provides a list of predefined actions. they will now appear in the Function Map and can be modified there just like button function codes. These can only be edited via the Programming tab of the Properties Control window. String Outputs and Command Outputs utilized in the panel file. This list is sorted by Port. Level Codes). Channel Codes. Setting the Address. While you can (in-place) edit the Channel.Setup Port Setting the Address. Address and Level codes via these folders. within the primary folder the selected item belongs to (i. If codes have been assigned to any of the panel's sensors (light. Selecting an item in the tree and then left clicking again will provide an in-place edit of the code value.

you need to understand the nuances of some of the options involved: 210 TPDesign4 (v2. 2. Click Assign. and other properties that depend on button type. 198 Power Assign dialog One valuable use of this feature is to establish a contiguous range of channel / address codes on a set of buttons. they will show up as used when Power Assign does its' checks. 3. In some cases. Click Assign. and any of the buttons in the group you are assigning already have codes assigned. select each of the remaining buttons in the set in the order in which you want the channel / address codes to be assigned. select Clear. It is good practice to clear the function codes before any Assign Codes operations. left-click on the button in the set that should receive the first channel / address code. Select Button > Power Assign (or press F8) to open the Power Assign dialog (FIG. one can assign channel / address codes to every button in the set with significantly fewer mouse clicks and keystrokes than would otherwise be possible. Under Function Code Type. If you don't clear the codes first.11 or higher) . Once you ensure that the desired button or buttons have been selected. Address or Level. To accomplish this. 3. address and level function codes for any given button. Under Function Code Type. all you need to do is bring up the Power Assign dialog. or on a group of selected buttons. and does not affect pages or popup pages. then: 1. Finally. 2. select Channel. Under Function Code Action. To use take full advantage of Power Assign. Power Assign works only at the button level. select Assign. but usually you'll want to clear them before assigning. Assign Codes Next assign new function codes: 1. Under Function Code Action. by following the instructions below and utilizing the Begin Assignment At and Ensure Contiguous Code Assignment options. Address or Level. this may be what you want to have happen. 198).Working With Function Codes Using Power Assign One of the big time-eating factors of creating a touch panel file is correctly setting up the channel. Use Power Assign to streamline this process. select Channel. Clear Channels First One powerful feature of Power Assign is the ability to clear the various function codes from the buttons. The Power Assign feature can operate on a single button. then by holding down the CTRL key. FIG.

Look for a clear range of channel and address codes large enough. This will visually display the channel. use the Functions tab of the Workspace Navigator and click back and forth between the channel and address options. You can visually verify that the desired action was accomplished by ensuring that the Display Function & State Overlay option is selected from the View menu. use CTRL-select to select the buttons in the order you want to assign the channels. Next. if you make a mistake. and level codes (in addition to the currently displayed state) in the corners of the buttons.11 or higher) 211 . Here's the setup you would use: 1. While initially somewhat confusing. Another thing that comes into play with being able to use multiple ports is that you may need to confine certain ranges of channel codes to a single port to take advantage of the DEFINE_MUTUALLY_EXCLUSIVE channel grouping in the code. Check Begin Assignment At and Ensure Contiguous Code Assignment. Since MUTUALLY EXCLUSIVE works on a particular port. Since the selection is retained after any operation. you're not limited to 256 channel and address codes.Working With Function Codes Begin Assignment At (Power Assign) When Begin Assignment At is selected (in the Power Assign dialog) you can specify the starting value of the Port and Function (Channel. the assign operation begins at the first available channel. Ensure Contiguous Code Assignment (Power Assign) This is used when the channel codes have to be in order. since the order is important. which ensures that all channel codes assigned fall within a single port. and make a note of the start channel. and click Assign again. 2. click Channel under Function Code Type. The Begin Assignment At function is particularly useful for setting up things like numeric keypads. Then supply the port and channel code values. just like the standard Auto Assign. 3. which is handy when you need both the channel and address codes to have the same numeric values. one must ensure that the group of buttons is entirely within a single port. In these cases. with no breaks between them. However. things like SYSTEM_CALLS are based upon all the channels coming from a single device (port). or Level) code. if the order is important to you. open the Power Assign dialog. click Address under Function Code Type. make sure to create the selection using CTRL-Select. TPDesign4 (v2. Next. address. the feedback part of the System Call won't work. as in a numeric keypad. uncheck this option. check the Wrap Within Port ID option. Remember that Power Assign processes the function code assignments based on the order in the selection so. and click Assign. where you need the channel codes to begin at a specific value. since you might be using offset math in your code to process the button pushes. an immense amount of power is available in the options within the floating Power Assign dialog. In this case the values will be subject to whether or not you've set the Begin Assignment At checkbox. it's easy to click Clear Codes and hit the assign button again. One nice thing about the Power Assign palette is that it retains its settings after use. Address. If you don't care what channels are assigned. and TPD4 will find the next available free channels. One can also simply undo the action if desired. If the channels are split across ports. skipping used channels and continuing on until all available channels have been assigned. First. Wrap Within Port ID (Power Assign) Since touch panels support more than one port. If you don't check the Begin Assignment At option. In either of these cases.

Working With Function Codes 212 TPDesign4 (v2.11 or higher) .

Palettes are saved as part of the panel file. or by dragging the cursor around the palette. Additionally. Every color element that is not assigned either directly via an RGBA selection or the named color table will reference this palette and be affected by any changes made to it.Working With Colors and Palettes Working With Colors and Palettes Working With Colors A key feature of TPD4 is it's ability to utilize the full 32-bit RGB color palette. Because the RGB Color palette supports more colors than the Palette Index. Blue and Green) values. Color assignments are made through the Colors dialog. Brightness and Opacity. transparencies (popup pages and buttons). 199 Colors dialog . The RGB palette offers millions of possible colors that can be applied to fills (pages. The RGB palette offers millions of possible colors (FIG. then click More Colors. Click to select an existing page. which allows you to specify RGB (Red. and buttons). 199). Fill Color or Text Color toolbar icons to open the base palette. Saturation. There are several ways to open the Colors dialog: When setting new button parameters. plus Hue. or a custom palette file previously saved from within the application. popup pages. Saturation. popup page or button.RGB Color TPDesign4 (v2. and text (pages. Brightness and Opacity) values numerically. TPD4 also allows you to save or load custom palettes. any variation that occurs in the translation is extremely subtle. click on the Border Color. TPD4 supports the importing of either a JASC® formatted palette file. a Microsoft® formatted palette file. since TPD4 tries to match the color exactly. The Colors dialog supports three ways to select colors from the RGB color palette: 1. and click on Fill Color in the States tab of the Properties Control Window. RGB Color: a full-feature RGB palette that allows you specify RGB (plus Hue. you might see some slight variation in some colors if you switch from the RGB Color palette to Palette Index.11 or higher) 213 . In most cases. FIG. popup pages and buttons).

Palette Index 3.Color Name 214 TPDesign4 (v2.11 or higher) . FIG. 201 Colors dialog . Palette Index: a default palette that provides the Base 88 colors (which the can be modified if desired). and include the transparent color in position 255 (FIG. Color Name: a named color selection dialog based on the Base 88 color scheme. The Palette Index offers a maximum of 255 colors (FIG. 200). 201).Working With Colors and Palettes 2. 200 Colors dialog . These Base 88 colors are identical to those provided in previous versions of TPDesign3. FIG.

and named palette entries.one color scheme for each season. Working With Multiple Color Palettes TPDesign4 supports multiple color palettes to allow easy switching between color schemes. Use the options in the Edit Palettes dialog to create custom palettes and save them as *. custom palettes cannot be reopened in another graphics package.Working With Colors and Palettes Neither JASC nor Microsoft palette files support transparency in the same manner that TPD4 utilizes transparency. Working With Palettes TPD4 supports creating and saving multiple custom color palettes within a project. Use the options in the Edit Palettes dialog to create and save custom palettes. Creating New Palette Entries 1. Select Panel > Edit Palettes (or click the toolbar button) to open the Edit Palettes dialog (FIG. 202 Edit Palettes dialog TPDesign4 (v2. 202). Custom Palettes can be saved as *. this can cause color shifting on the button. FIG. When you copy a button from one project into another project that is using a different palette.11 or higher) 215 . Custom palettes can be used to enable the Color Schemes feature in the G4 PanelBuilder application. which can then be imported/exported for use in other TPD4 projects. without having to edit the buttons directly. Depending on the differences between the palette in the button's source project and the palette in the target project.PAL files that can then be imported/exported for use in other projects.PAL files. Color Schemes allow you to apply different color schemes to an entire template (in G4 PanelBuilder). so once imported. the pasted button will use the palette that is currently active in the project that the button is copied into (as opposed to the palette that was used to create the button). you could create a single template file with four different color palettes that would allow you to use the same template to quickly produce four different variations on the design . For example.

Enter the new name for this palette in the text field and select OK. select an existing color. 4. Enter a description of the new palette entry in the Name text field. Click the New button to clear the palette index of all entries. 2.Working With Colors and Palettes By default. as indicated in the palette selection drop-down list in the upper-left corner of this dialog. 6. select a slot with no color assignment. 4. Use the cursor in the Color Value chart. the palette that is currently being used for the active Project is selected. Select Panel > Edit Palettes (or click the toolbar button) to open the Edit Palettes dialog (FIG. 2. Red/Blue/Green. 5. Click the Rename button to open the Rename dialog (FIG. Each color that is listed in the palette is considered to be a palette entry. the new palette is titled Unnamed. To edit an existing palette entry. 202 on page 215). This is optional. in the upper-left corner of this dialog. Click on the Commit button to add the selected color and color name (if applicable) to the selected slot in the palette. in the palette selection drop-down list. By default. 203 Rename dialog 4. To add palette entries (colors) to this palette. opacity (and/or Hex value) to specify the color that you want to add to the palette. Select the palette that you want to add a new palette entry (color) to. Repeat steps 3 . Click on the Commit button to add the selected color (and color name if applicable) to the selected slot in the palette. Note that it is tagged as (active) in the drop-down list. Red/Blue/Green.11 or higher) . Note that it is tagged as (active) in the drop-down list. use the cursor in the Color Value chart. The index numbers correlate to the slot in the palette that this color occupies. Select the palette that you want to rename from the palette selection drop-down list. 5. opacity (and/or Hex value) to specify the color that you want to add to the palette. Note that it is tagged as (active) in the palette selection drop-down list (in the upper-left corner of this dialog). By default. 3. 202 on page 215). 3. 203 on page 216). 216 TPDesign4 (v2. By default. in conjunction with the Hue/Sat/Bright. FIG. in conjunction with the Hue/Sat/Bright.5 to add as many additional colors to this palette as needed. the palette that is currently being used for the active Project is selected. but highly recommended since this is the name that will appear with the color in the palette when the view option is set to details. 6. and each palette entry is represented by an index number (1-256). Enter a description of the new palette entry in the Name text field. the palette that is currently being used for the active Project is selected. 2. Creating Custom Palettes 1. Renaming Palettes 1. 3. Select Panel > Edit Palettes (or click the toolbar button) to open the Edit Palettes dialog (FIG. but highly recommended since this is the name that will appear with the color in the palette when the view option is set to details. This is optional. Select a palette entry: To add a new palette entry to the palette.

Exporting Palette Files You can export palette (*.PAL file. you must select the Set Active button at the top of the dialog. Click the Copy button. If you desire to make the imported palette the active palette.11 or higher) 217 .PAL) files for use in other projects via the Export option in the Edit Palettes dialog. as a *. and select from the listing of available palettes in the palette selection drop-down list. Copying Palette Entries Use the Copy Entry and Paste Entry buttons at the bottom of the Edit Palettes dialog to copy and paste individual palette entries (colors): 1. Changing the Active Palette To select a different palette to use. Use this dialog to locate and select the desired *. 2. Importing Palette Files You can import palette (*. select Panel > Edit Palettes (or click the toolbar button) to access the Edit Palettes dialog (FIG. Click the Import button to access the Open dialog. Select the palette that you want to copy from the palette selection drop-down list (in the upper-left corner of the dialog).PAL) files for use in your project via the Import option in the Edit Palettes dialog: 1.PAL file. TPDesign4 (v2. Click the New button to open a new (empty palette) or select an existing one from the drop-down list. 2. 202 on page 215). 4. 3. Click the Export button to access the Save As dialog. 4. 3. 3. Alternatively. 202 on page 215). If you select a slot that already has a palette entry. 202 on page 215). Copying Palettes Use the Copy and Paste buttons at the top of the Edit Palettes dialog to copy and paste entire palettes: 1. you could open an existing palette and paste over the existing palette entries. 2. 2. 4. Select the slot that you want to paste the copied palette entry into and click Paste Entry. 202 on page 215). Use this dialog to save the palette to a specified directory. Click the Paste button to paste the contents of the source palette into the new (target) palette. 6. The new name of the palette is indicated in the palette selection drop-down list. the copied color will overwrite the original. Click Open to import the selected palette file and close the Open dialog. Select Panel > Edit Palettes (or click the toolbar button) to open the Edit Palettes dialog (FIG. Select Panel > Edit Palettes to open the Edit Palettes dialog (FIG. Select Panel > Edit Palettes to open the Edit Palettes dialog (FIG. Click the Copy Entry button. Select Panel > Edit Palettes (or click the toolbar button) to open the Edit Palettes dialog (FIG. 202 on page 215).Working With Colors and Palettes 5. Select the palette that contains the color(s) that you want to copy from the palette selection drop-down list (in the upper-left corner of the dialog). in the upper-left corner of the dialog. Use this feature to save and distribute custom palettes that can be imported back into TPD4 via the Import option: 1. 5. Click to select the palette entry that you want to copy. Note that the new name overwrites the previous name (removing the previous name from the list).

the Color Schemes feature in G4 PanelBuilder will be disabled for this template. While it is not an enforced requirement. Color Schemes allow you to apply different color schemes to an entire template (in G4 PanelBuilder).TPT). These preview images are used to display the color schemes that are available for this template in G4 PanelBuilder. and then opened in the G4 PanelBuilder application.11 or higher) . Using the Microsoft® Paint Utility Program Select Tools > Paint to launch the Microsoft Paint Utility program. the Project > Color Schemes option (in the G4 PanelBuilder application) allows you to apply different color schemes to the template with a single click.one color scheme for each design.Working With Colors and Palettes Using Custom Palettes to Enable Color Schemes in G4 PanelBuilder TPDesign4 supports creating and saving multiple custom color palettes within a project. the buttons in the project must use the border types that come with TPD4 (as opposed to a custom image that defines the button's look). Custom palettes can be used to enable the Color Schemes feature in the G4 PanelBuilder application. The project must include one preview image for each of the custom palettes that are included. Not all TPD4 projects support the Color Schemes feature in G4 PanelBuilder. In order to utilize Color Schemes in G4 PanelBuilder. you could create a single template file with four different color palettes that would allow you to use the same template to quickly produce four different variations on the design . and saved as part of the TPD4 project. You can also use Chameleon Images in conjunction with custom palettes to further enhance the use of Color schemes in G4 PanelBuilder. For example. However. without having to edit the buttons directly. TPDesign4 is also required to export the project as a G4 PanelBuilder Template (*. 218 TPDesign4 (v2. Using custom palettes to create Color Schemes requires the use of both TPDesign4 and G4 PanelBuilder: Custom palettes are created in TPDesign4. in order for the project to actually make use of multiple palettes in G4 PanelBuilder. the TPD4 project must meet several requirements before being exported as a G4 PanelBuilder template file (via the File > Export as G4 PanelBuilder Template option): The project must include at least one custom palette (in addition to the default palette). When a valid TPD4 project file is exported as a G4 PanelBuilder template. Note that if the exported project does not meet these requirements. the Color Schemes feature is applied via the Project menu in G4 PanelBuilder. Refer to the Paint online help for instructions on using Microsoft® Paint.

Popup Page or Button. Select a video source from the list to apply the video fill to the Page. 2. Enter the URL or IP Address of the server that will provide the video stream in the Streaming Source field. TPDesign4 (v2. you can assign a "video fill" to a page. without having to create a page-size button (as was the case in TPDesign3). be sure to click on the page (not on a button) to bring up the State Properties for the Page. and you can select any available video source (1-4) as the source for a video fill. and NXD/NXT-1700VG only). popup page or button. 3.11 or higher) 219 . If Streaming Source is selected from the drop-down list of Video Fill options (in the States tab of the Properties Window). To apply a video fill to a Page: 1. and not a button on the page. The NXP-TPI/4. Select (or a create) a Page in your project. TPI-PRO and TPI-PRO-DVI accommodate up to 4 video source inputs. Displaying a Video Source on a Page TPD4 allows you to assign a video source as the background image on a Page. TPD4 supports video fills directly to the page/popup page. The NXP-TPI/4 and TPI-PRO accommodate up to four video source inputs. FIG. 204).Working With Video Fills Working With Video Fills Overview If you are designing a project targeted at a video-capable panel. Streaming Source is available as a video fill option. NXD/NXT-1500VG. Streaming Video Fills If the project specifies a touch panel that supports streaming video (NXD/NXT-1200VG. 204 State Properties: Video Fill options If you are working with an existing page with buttons. The Video Fill options available will depend on the video capabilities of the panel type selected (FIG. then Streaming Source is added to the list of state properties. click Video Fill to activate the drop-down list of available video sources. and you can select any available video source (1-4) as the source for a video fill.States Tab. In the Properties Control window .

2. To apply a video fill to a Popup Page: 1. Select (or a create) a Popup Page in your project.Working With Video Fills Displaying a Video Source on a Popup Page TPD4 allows you to assign a video source as the background image on a Page. 3. 220 TPDesign4 (v2. and not a button on the Popup Page. 2. Popup Page or Button. Popup Page or Button. In the Properties Control window . To apply a video fill to a Button: 1. click Video Fill to activate the drop-down list of available video sources (Source 1-4). click Video Fill to activate the drop-down list of available video sources (Source 1-4). 3. Since this is a state-oriented setting. If you are working with an existing Popup Page with buttons.States Tab. Displaying a Video Source on a Button TPD4 allows you to assign a video source as the background image on a Page. In the Properties Control window . To apply the video fill across all states. Select a video source from the list to apply the video fill to the Popup Page. be sure to consider all of the button states when applying the video fill. Alternatively. be sure to click on the popup page (not on a button) to bring up the State Properties for the Popup Page. you can use Ctrl+A to select all states in the State Manager window. Select (or a create) a Button in your project.11 or higher) .States Tab. use the All States option in the Properties Control window (States tab). Select a video source from the list to apply the video fill to the button.

Working With Video Fills TPDesign4 (v2.11 or higher) 221 .

Working With Video Fills 222 TPDesign4 (v2.11 or higher) .

This opens the first of six dialogs: Animation Wizard . You can create an animation sequence for a multi-state button manually. or Shift+click to select the range of files between two selections. make sure the numbering convention used for the files is consistent (i. the wizard will allow you to add the necessary number of states to the button to accommodate the animation sequence (and automatically change the button type to Multi-State General). would be a very tedious and time-intensive process. Click Next to proceed to the Animation Wizard . Select Bitmap to use bitmaps in the animation. Note that the only images that are available to choose from are those that have been imported into the project. Select Icon to use icons in the animation. and there are no other options in this dropdown list until at least one sequence has been created.Select Type (Step 1 of 6) Use the radio buttons in this dialog to specify the type of animation to create (Bitmap or Icon). by creating a series of states and applying a different bitmap or icon to each state and treating each state as an individual frame.Working With Animation Effects Working With Animation Effects Overview TPD4 utilizes three main concepts for supporting animation effects in your projects: Animation Wizard Tweening Chameleon Images Using the Animation Wizard The Animation Wizard is a powerful tool included with TPD4. through the File > Import Resources option. Note: If you select a General (two-state) button to use with the animation wizard. Select Button > Animation Wizard to start the wizard. Use this dialog to specify the images to be included in the animation. In order for images to appear in the Sequence drop down for selection. it makes things easier if you take naming into consideration before importing the files. Animation Wizard .jpg. cool_button_spin03. don't mix "1" and "01" or "001").e.11 or higher) 223 . TPDesign4 (v2.Create Sequence (Step 2 of 6) dialog. Once you import a series of images with identical names except for a post-fixed numeric indicator. and set the sequence of the images. Ctrl+click to select multiple files. cool_button_spin02. This however. Also. cool_button_spin04.Create Sequence (Step 2 of 6) Use this dialog to specify the images to be included in the animation. Multi-state buttons can have up to 256 states. It guides you through the steps of generating an animation sequence that can be applied to a multi-state button to apply impressive visual effects to your buttons. etc. click the Add button.). 2. all of which are available to be used as "frames" in an animation. they will be available via this drop-down list. Select Chameleon Image to use (32-bit PNG) chameleon images in the animation. the images that you use to create the animation must be named in sequence (i.jpg. Although you can edit the sequence of the images in the animation manually. To create a simple button animation using the Animation Wizard: 1..jpg. and set the sequence of the images. Animation Wizard . cool_button_spin01. The Sequence selection is set to "[custom]" by default. where you can select which images to include in the animation.. or via the Import button on the Resource Manager dialog (see the Importing Image Files Into Your Project section on page 54 for details).e.jpg. This opens the Select Resource dialog. The Animation Wizard automates most of the process and makes the task easy.Select Type (Step 1 of 6). To add the images that will comprise the animation sequence.

there are also many freeware applications available). Click Next to proceed to the Animation Wizard .Assign Frames (Step 4 of 6) Use this dialog to create enough states to accommodate the number of frames in the animation sequence. If the images were named consecutively. Use the options in the lower-half of this dialog to specify the positioning of the animated image relative to the button containing it. 3. Once extracted. The image files you selected now appear in alpha-numeric order in the preview window of this dialog. Click Next to proceed to the Animation Wizard . This dialog tells you two important pieces of information: the size of the animated image. The general concept is that you start with an existing animated GIF image. these files can be imported into your TPD4 project. Click Next to proceed to the Animation Wizard . If button states exist beyond the end of the animation. Click OK in the Select Resource dialog to return to the Animation Wizard . The options in this dialog allow you to automatically detect the number of frames in the animation sequence. you'll have to add at least eight states to the button (one frame per button state).version 7 or higher. use the radio buttons to indicate how to handle them (Leave Alone or Remove). meaning that the upper-left corner of each page is represented by the X-Y value of 0. 224 TPDesign4 (v2. and save each frame in the animation out as an individual image file (resulting in a series of image files).11 or higher) . So. or to simply apply the animation to the button at its current size. All position (X-Y) values in TPD4 are zero-based (measured in pixels). Animation Wizard . and the size of the button that will contain it. Use the next field to indicate which of the existing states to duplicate. the animation sequence will have more than two frames. and open the Animation Wizard before adding any states. If you select Absolute. use the X and Y fields to indicate the desired position. and the original GIF animation can be simulated. If you are applying an animation that is bigger than the containing button.Size & Position (Step 3 of 6) Use this dialog to specify the size and position of the animation relative to the button that will contain it. 0. for a ten-frame animation. you shouldn't have to modify the sequence at all. if you create a multi-state button. 4. if more states are required for the animation. you have only two states on the button. For example. and the number of states available on the button to which the animation is to be applied. Select the desired position option from the drop-down list. the first state). you will have to save the frames out to a supported file type.Appearance (Step 5 of 6) dialog. Animation Wizard . Use the first field to indicate which state to start the animation on (default = 1.Size & Position (Step 3 of 6) dialog.Assign Frames (Step 4 of 6) dialog.GIF file type. a warning message is displayed along the bottom of the dialog. Lets say that your sequence has ten frames. Obviously. and the animated image will be clipped (cropped) to fit in the button.Create Sequence (Step 2 of 6) dialog.Working With Animation Effects You can bring existing animated GIF files into your project via a third-party application (for example JASC® 's Animation Shop which comes bundles with Paint Shop Pro . Use the Move Left and Move Right buttons to re-arrange the image sequence (if necessary). Note that since TPD4 does not support the (proprietary) . Use the Add and Remove buttons to add/remove selected images from the sequence (if necessary). 5. Use the radio buttons in the top-half of the dialog to specify wether to scale the button to fit the animated image.

these options default to no border (Set to "none") and transparent fill (Set to "transparent").Finish (Step 6 of 6) This dialog lists the actions to be taken to generate the button animation. including: The number of states to be added to the button. When the button is turned back Off. you might say that you have 256 frames available for the animation. The starting state for the animation. TPD4 supports multi-state buttons. Click Next to proceed to the Animation Wizard . In TPD4. Beyond simplifying the process of creating motion animations. Provided you are not creating an image-based animation. Note that the animation is indicated in the State Manager window. if you create a multi-state button with 256 states. to make a button fade completely in/out on a page. This is called "Animate Time Down". If creating a bitmap animation. TPDesign4 (v2. these options default to leave both border an fill color alone (Leave alone).Finish (Step 6 of 6) dialog. When used in combination with TPD4's ability to handle RGB colors (including the opacity setting). it is also possible to use tweening to make buttons fade in and out on the page. and click Push). and which state to duplicate. Click Finish to generate the animation. Remember. If creating a icon animation. tweening also generates very smooth color transition effects that would be difficult or impossible to do any other way. the states will be displayed in reverse order. The position of the animation on the button. many other animation effects can be achieved via the Tweening tools of TPD4. the number of frames in the animation.Appearance (Step 5 of 6) Use this dialog to specify how treat the Button Border Style.11 or higher) 225 . Since transparent borders are not supported in this version of TPD4. Animation Wizard . and the animation type (Bitmap or Icon). So. and is definable in 1/10th second increments. also definable in 1/10th second increments. the tweening process greatly simplifies the process of generating each state individually by automatically creating a gradual transition across all states based on the state properties of the first and last states. The Animate Time Up and Animate Time Down values are set in the General tab of the Properties Control window. When the multi-state button is turned On it will display all the assigned states from first to last within a specified time interval. 6. and Button Fill Color on the resulting button.Working With Animation Effects Animation Wizard . "tweening" is the process of altering the display properties of intermediate frames between two images to give the appearance that the first image evolves smoothly into the second image. each state of a multi-state button can be thought of as an individual frame. Use the Button Preview window to view the animation (select View > Button Preview. Tweening Short for in-betweening. you would have to create the button without borders. This is called "Animate Time Up". Tweening is a common concept in all sorts of animation software. which can have up to 256 states which are used to animate a button push from Off to On and back again to Off. A listing of each state and the image file associated with it.

most color transition effects don't require that many frames to produce a very smooth fade. and is definable in 1/10th second increments. Note that the more states you use. Fill Color and Text Color tweeners to easily apply color transition effects to multi-state buttons. 206 Multi-State Button (4 States) To create a fade effect. you would have to create the button without a border assignment. Border Color. set to RGB colors). The color tweeners can be used individually. However. these effects can be made to be very subtle and smooth. Ctrl+click to select two states in the State Manager window that are separated by at least one state (do not select the intermediate states). Note that to make buttons fade in/out completely. This is called "Animate Time Down". the smoother the transitions will appear.Working With Animation Effects Creating Color Transition Effects Use the Border Color. FIG. 206). 207). 205). Fill Color. Apply a color (Fill Color. When the button is turned back Off. With 256 states available to use as "frames" in a tweened animation. An opacity setting of 255 (max) makes the button totally opaque. also definable in 1/10th second increments. Select (or create a new) multi-state button with at least three states (FIG. or in combinations to create smooth fades from one color to another when the button is pressed. leave the colors the same for the first and last states. 226 TPDesign4 (v2. When the button is turned On it will display all the assigned states from first to last within a specified time interval. This is called "Animate Time Up". since transparent borders are not supported in this version of TPD4. 205 Multi-State Button (4 States) 2. 3. The color tweener(s) will generate a transition effect that fades the first color into the second (FIG. An opacity setting of zero makes the button totally transparent. When used in combination with TPD4's ability to handle RGB colors (including the opacity setting). Text Effect Color or any combination) to the last state that is different from that of the first state (FIG. To create a color transition effect: The following steps apply to all three button color attributes (Border Color. but change the opacity on one of them to zero (via the Colors dialog. it is also possible to use tweening to make buttons fade in and out on the page. FIG. the states will be displayed in reverse order. The Animate Time Up and Animate Time Down values are set in the General tab of the Properties Control window.11 or higher) . Text Color. Text Color and Text Effect Color): 1.

8. 4. Experiment with applying multiple color tweens to the same button. Animated bitmap effects can be used alone or in conjunction with the other tweeners to create all sorts of eyecatching visual effects. Right-click on one of the highlighted states in the State Manager window. 6. Duplicate the state that the tweening should begin across all states to be included in the tween. The Bitmap Position tweener allows you to cause a bitmap to move around the button area when it is pressed. Move the icon into it's starting position for the animation via the Image/Text Positioning dialog (select Image/Text Positioning from the State Manager context menu). 2. and with different combinations of tweeners. Select one or more of the color tweeners to apply effects. and select Tweeners from the context menu to open the Tweeners sub-menu. The results are displayed immediately in the State Manager window (FIG. place the icon in its end position in the animation via the Image/ Text Positioning dialog (select Image/Text Positioning from the State Manager context menu). 208 Multi-State Button (4 States) Use the All Colors Tweener to tween all colors applied to the button. 4. 3. However. TPDesign4 (v2. Creating Animated Bitmap Effects Use the Icon Position and Bitmap Position tweeners to apply animated bitmap effects to multi-state buttons. 207 Multi-State Button (4 States) The most basic type of color transition effect starts at the first state (or frame) and ends at the last. Select (or create a new) multi-state button. Ctrl+click to select just the two states containing the icon start and end positions in the State Manager window.States tab).11 or higher) 227 .Working With Animation Effects FIG. 208). Set the Icon Justification property to Absolute. To create animated bitmap effects with an icon: 1. The Icon Position tweener allows you to cause an icon to move around the button area when it is pressed. Add an icon to the button (via the Icon field in the Properties Control window . 5. the TPD4 tweening tools are not limited to one tween effect per multi-stage button press. and you should not select the intermediate states). 5. They must be separated by at least one stage. Insert at least one state (tweeners require at least three states to work). FIG. 7. In the last state included in the tween.

To create animated text effects: 1. Select (or create a new) multi-state button. and Text Effect colors between two selected states all at once.This option tweens the Fill color (only) between two selected button states. Text. Text Color .This option tweens the Border color (only) between two selected button states. 5. and move it to its end position in the animation via the Image/Text Positioning dialog (select Image/Text Positioning from the State Manager context menu). The Text Position tweener will generate a motion effect that moves the text across the button. Fill. 2. bitmap or text must be set to Absolute. Text Effect Color . and you should not select the intermediate states). the Bitmap Position option is only available if the selected buttons use a bitmap. 228 TPDesign4 (v2. Text Position . Copy the text from the first state to the last state to be tweened.Working With Animation Effects To create animated bitmap effects with a bitmap image. Fill Color . In order to apply motion tweening to an icon. Set the Text Justification property to Absolute. the justification for the icon. Add text to the button (via the Text field in the Properties Control window .11 or higher) .This option tweens the position of an icon applied to two selected button states. bitmap or text. Tweeners sub-menu Select Tweeners from the States Menu or the State Manager context menu to open the Tweeners sub-menu.This option tweens the Border. Icon Position . Overall Opacity .This option tweens the Overall Opacity (only) between two selected button states.This option tweens the Text color (only) between two selected button states. For example. Icon. They must be separated by at least one stage. bitmap or text. Note that depending on the elements of the selected buttons. 7. This menu allows you to select a type of tweener to use in creating animations on multi-state buttons. and Text positions applied to two selected button states all at once. Animated text effects can be used alone or in conjunction with the other tweeners to create all sorts of eye-catching visual effects.States tab).This option tweens the Text Effect Color (only) between two selected button states. All Positions .This option tweens the position of a bitmap applied to two selected button states. The options in this menu include: Border Color . Insert at least one state (tweeners require at least three states to work). 3. The text position tweener allows you to have the button text move around the button area when it is pressed. bitmap or text must be set to Absolute. the justification for the icon. Ctrl+click to select just the two states containing the text start and end positions in the State Manager window. some of these options may not be available. Creating Animated Text Effects Use the Text Position tweener to apply animated text effects to multi-state buttons.This option tweens the position of text applied to two selected button states. Move the text into it's starting position for the animation via the Image/Text Positioning dialog (select Image/Text Positioning from the State Manager context menu). All Colors . 6. In order to apply tweening to an icon. 4.This option will tween the Bitmap. follow the steps outlined above. The only difference is that you will select and apply a bitmap rather than an icon to the button. Bitmap Position .

chameleon images may also use a companion bitmap which. When used with multi-state buttons. chameleon images can also take advantage of TPD4's tweening tools to easily create color transition effects.Working With Animation Effects Text Size . When the border name is set to none. One possible benefit of using chameleon images is that. To access AMX Tech Notes. The Red channel defines the area that will be filled with the state's Fill Color. then the Chameleon Image property becomes available. A chameleon image is a PNG image file that. glow and drop-shadow effects. Computer Control and TakeNote buttons. As a result. Red. refer to the "Chameleon Demo" TPD4 file attached to Tech Note TN733 to provide an example of chameleon images. Green and Blue). Custom Palettes and G4 PanelBuilder help topic for details. Refer to the Chameleon Images. the image to be used is one that either was created or was selected specifically with the concept of colorizable regions that could be changed to suit different design needs. Note that chameleon images are not necessarily different from any other PNG image file. Ideally. and chameleon images use the button/state's Fill and Border color assignments to determine the colors used in the image as follows: The Alpha channel of the Chameleon image defines the overall shape mask for the state. then the colors used in the chameleon image will change accordingly. if the Fill and/or Border colors are changed. For an example of a chameleon image. Furthermore. Requirements for Chameleon Images Chameleon images can be applied to buttons to create animated highlighting. This file can be viewed in G4 PanelPreview or on an actual G4 panel. Chameleon Images TPD4 supports a button state property called Chameleon Image. The basic requirements that allow an image file to be recognized as a chameleon image in TPD4 are: It is a PNG image file It uses RGB color (8 bits/channel) It has an alpha channel defined In order for a chameleon image to be applied to buttons or popup pages. the Border Name state property must be set to none. when applied to a button/state. The Blue channel is not used. TPDesign4 (v2. set the image properties to RGB Color and 8 Bits/Channel.amx. they enable the ability to create multiple color schemes that can be applied to a single template in the G4 PanelBuilder application. you must be logged into www. when placed on top (via the Draw Order state property). while virtually any PNG file could be applied as a chameleon image. When creating an image to be used as a Chameleon image in TPD4. when used in conjunction with custom palettes. PNG images consist of four separate color channels (Alpha. some images make more sense and would give better results than others.com as a dealer.This option tweens the size of text applied to two selected button states. In other words. uses the Fill and Border colors assigned to the button/state to determine the colors in the image. it is an image that can have its colors changed on the panel itself (at runtime). The Chameleon Image state property is available for all button types except Text Input.11 or higher) 229 . The position-oriented tweener options only work when the selected elements are set to use absolute positioning. That is. can add highlighting and shadow effects to convincingly create an illusion of depth. The Green channel defines the area that will be filled with the state's Border Color.

Using an image editing program to create an image to use as the chameleon image: Only PNG image files can be used as chameleon images. Working With Chameleon Images Chameleon Images utilize the 4 color channels (Red. For the transparent color to be interpreted correctly by TPD4. The Blue color channel is not used for chameleon buttons. 4. for the purpose of illustrating the basic concepts used: 1. In a Design View window.Example Here's an example of creating a simple chameleon image. It meets the technical requirements for a chameleon image. Blue. since in TPD4. Green and Alpha) that comprise 32-bit images to define separate colorizable regions (FIG. the PNG file must be saved with RGB colors (32-bit). 2. Import the image file into TPD4 (via the Import button on the Images tab of the Resource Manager dialog). 3. Computer Control or TakeNote button types. create or select a button to which you wish to apply the chameleon image.11 or higher) . 2. Keep in mind that the Chameleon Image state property is not available for Text Input. FIG. Use the alpha channel to define the overall desired shape of the button (see Working with Transparent Backgrounds for more information). keep in mind that the Red and Green color channels will be replaced by the colors specified as the Fill and Border colors in TPD4 for each state of the button. 209). 230 TPDesign4 (v2. Export the image as a PNG file. The exported file must be a 32-bit RGB Color (8 Bits/Channel) file in order to be interpreted correctly by TPD4 as a chameleon image. When creating an image to be used as a chameleon image.Working With Animation Effects The characteristics that define any image as a chameleon image are: 1. It has been applied to a button as the Chameleon Image (via the Chameleon Image state property). 209 Working With Chameleon Images Working With Chameleon Images . only PNGs accommodate transparency as a color.

For example. Since the Fill and Border colors are in turn associated with a particular color palette (which is saved as part of the TPD4 project). 211 Chameleon Image .11 or higher) 231 . the primary benefits of these features are realized in the G4 PanelBuilder application (via the Project > Color Schemes feature). 210 Chameleon Image . However. note that any portion of the image that exists on the Red color channel now matches the color specified in the Fill Color state property. In the States tab of the Properties Window. the TPD4 project must meet several requirements before being exported as a G4 PanelBuilder template file (via the File > Export as G4 PanelBuilder Template option): The project must utilize at least one chameleon image (meaning that a chameleon image has been applied to at least one button in the project). Chameleon Images. click the browse button (. set the button's Border Name to None.TPT). There are also several requirements for images to allow them to be recognized as chameleon images by TPD4. Text) make up your button. the Chameleon Image property becomes available (directly beneath Border Name). the Chameleon images can by used in conjunction with any of the other Tweening tools. Custom Palettes and G4 PanelBuilder Chameleon images can be used in conjunction with custom palettes to create G4 PanelBuilder template files that. 211): FIG.. In the Chameleon Image property. The project must include at least one custom palette (in addition to the default palette). you could create a single template file with four different color palettes that would allow you to use the same template to quickly produce four different variations on the design .Fill and Border colors Since chameleon buttons rely on the Border and Fill color settings. 6. The Color Schemes feature in G4 PanelBuilder allow you to apply different "color skins" to a single template. Select the chameleon image (in the Image tab) and click OK to apply it to the selected button. when opened in the G4 PanelBuilder application. are capable of switching from one color scheme to another without having to edit the buttons directly.one color scheme for each design. In order to utilize Chameleon Images and Color Schemes in G4 PanelBuilder. Note that at this point. Custom palettes are created in TPD4. Not all TPD4 projects support the Color Schemes feature in G4 PanelBuilder. Chameleon images utilize the 4 color channels that comprise 32-bit PNG images to define separate colorizable regions. Similarly. Now that the image has been applied as a chameleon image.Working With Animation Effects 5.Fill and Border colors tweened In fact. Icons. depending on what elements (Bitmaps. Using chameleon images coupled with custom palettes to create Color Schemes requires the use of both TPD4 and G4 PanelBuilder: Chameleon images are imported and applied to buttons (or popup pages) in TPD4. any portion of the image that exists on the Green color channel now matches the color specified in the Border Color state property.) to access the Resource Manager dialog. you can use the Fill Color and Border Color Tweening tools to quickly create color transition effects for each of the color channels (FIG. A few examples of color changes resulting from changing the Fill and Border colors for the button/state with the chameleon image (FIG. TPDesign4 (v2. TPD4 is also required to export the project as a G4 PanelBuilder Template (*. 210): FIG. and saved as part of the TPD4 project.. the colors used to render the chameleon image will change if and when a different color palette is applied to the template in the G4 PanelBuilder application.

232 TPDesign4 (v2. These preview images are used to display the color options that are available for this template in G4 PanelBuilder.11 or higher) . When a valid TPD4 project file is exported as a G4 PanelBuilder template. and then opened in the G4 PanelBuilder application.Working With Animation Effects The project must include one preview image for each of the custom palettes that are included. the Project > Color Schemes option (in the G4 PanelBuilder application) allows you to apply different color schemes to the template with a single click. the Color Schemes feature in G4 PanelBuilder will be disabled for this template. Note that if the exported project does not meet these requirements.

11 or higher) 233 .TP4) file to a specified Master. To access the Connection Settings dialog. and select New to create a new communication configuration. the files themselves are routed to the panels. There are three types of file transfer operations in TPD4 (both accessible via the Transfer menu): Send To Panel: Sends the currently open project (*. Use the Connect dialog to define and save one or more connection settings. FIG. without opening the file in TPD4. so they do not need to be established/dropped each time a transfer is performed.File Transfer Operations File Transfer Operations Overview In TPD4. 3. Enter the User Name/Password combination to save them as part of this configuration. 212 Connection Settings dialog (Authentication enabled) TPDesign4 (v2. 4. Once they are entered here. Connections are maintained separate from the transfer itself. 2. via the User Name and Password fields in the Connection Settings dialog. Send File To Panel: Sends a selected project file to a specified Master. You can save the User Name/Password combination as part of the communication configuration for that Master. Click the Connection requires authentication checkbox to enable the User and Password text fields. You'll have to be aware of the security settings on the target Master before trying to connect. Secure NetLinx Connections If the target NetLinx Master has authentication enabled. Specify the User Name and Password for NetLinx Masters that require authentication in the Connection Settings dialog. you will be able to establish this connection (by selecting it by name in the Connect dialog) without having to type the authentication information each time you connect (FIG. Receive From Panel: Receives a project file from a Master. While all file transfer operations to touch panels are managed by the Master. all file transfer operations are routed through the NetLinx Master to which the target/source touch panels are connected. 212). or select an existing configuration from the drop-down list and click Properties to edit those saved settings. where they will reside (touch panel files never reside on the Master). Refer to the NetLinx Studio (v2.3 or higher) online help for details on enabling authentication on NetLinx Masters. select Transfer > Connect (or click the toolbar button) to open the Connect dialog. you must enter a User Name and Password in order to establish a connection. 1.

and select the desired configuration from the Connection drop-down list (FIG.11 or higher) . they will be ignored. 215). 215 Connect dialog . 213): not connected connected to an unsecured master connected to a secured but unencrypted master connected to a secured and encrypted master FIG. the program requires you to enter a name for the configuration (in the Name field of the Connection Settings dialog). so it does not need to be established/ dropped each time a transfer is performed. See the Connecting to a NetLinx Master section on page 235 for details on establishing a new connection. 214). The configuration you specify under that name can then be accessed via the Connection drop-down list in the Connect dialog. if the correct User Name/Password combination is not entered (or if the entries are incorrect).File Transfer Operations When attempting to connect to a secured NetLinx Master. 213 Connection Status (indicated in the Status Bar) Working With Communications Configurations Saving and Recalling Communication Configurations Connection information is maintained separate from the transfer itself. Use the Connect dialog to define and save one or more connection settings (FIG. To recall a saved communication configuration.Connection drop-down list 234 TPDesign4 (v2. If a User Name/Password is specified for a Master that does not require authentication. 214 Connect dialog Anytime you establish a new communication connection configuration (via the New button in the Connect dialog). FIG. FIG. The status bar reflects the status of the connection as follows (FIG. Specify the User Name and Password for NetLinx Master that require authentication in the Connection Settings dialog. select Transfer > Connect to open the Connect dialog. the connection will fail and TPD4 will display an error message indicating why the connection was denied.

Select the configuration that you want to edit from the Connection drop-down list. click New to establish a new connection. FIG. Click the Edit button to invoke the Connection Settings dialog (FIG. There are three possible ways to connect to a NetLinx Master: TCP/IP. 2. In the Connect dialog. Once these steps have been completed.TCP/IP selected as Transport 5. 212 on page 233). 2. without having to re-configure. Therefore. This allows you to recall the configuration you specify later. Specify the User Name and Password for NetLinx Master that require authentication in the Connection Settings dialog. TPDesign4 (v2. The IP Port should always be set to 1319 (default). The invokes the Connection Settings dialog (FIG. 216). Edit the communication settings for the selected configuration as needed. you will prompted to enter a User Name and Password in order to establish a connection. and click OK to save your changes and return to the Connect dialog. Then the communication configuration can be easily reused by simply selecting it from the drop-down list in the Connect dialog. enter a unique name for the connection configuration that are you setting up (in the Name field). The Connect dialog allows you to set up communications. If the target NetLinx Master has authentication enabled. in order to transfer touch panel files for use on G4compatible panels. you will have defined a named communication configuration that will then be included in the Connection list (in the Connect dialog).11 or higher) 235 .File Transfer Operations To delete a saved configuration. Connecting to a NetLinx Master Typically. In the Connection Settings dialog. 4. 216 Connection Settings dialog . select a configuration (in the Connect dialog) and click the Delete button. file transfer operations are routed through the NetLinx Master to which the panels are connected. Serial or Modem. and save multiple connection configurations for easy access. Select Transfer > Connect (or click the toolbar button) to open the Connect dialog. 3. Select Transfer > Connect to open the Connect dialog. 1. 6. 4. Editing the Settings on an Existing Communication Configuration 1. as opposed to connecting directly to the panels. Connecting to a NetLinx Master via TCP/IP These steps describe establishing TCP/IP communication with a NetLinx Master for the first time. Select Transfer > Connect to access this dialog. 212 on page 233). 3. Do not change this number. 7. you will first establish communication between the PC running TPD4 and the NetLinx Master to which the target panels are connected. Enter the IP Address of the target NetLinx Master in the IP Address/DNS Name field. Select TCP/IP from the Transport drop-down list (FIG.

9. The invokes the Connection Settings dialog (FIG.3 or higher) online help for details on enabling authentication on NetLinx Masters. 6. 217). Refer to the NetLinx Studio (v2. If the target NetLinx Master has authentication enabled. Enter the User Name/Password combination to save them as part of this configuration. Click OK to save these settings and return to the Connect dialog.3 or higher) online help for details on enabling authentication on NetLinx Masters. 8. Enter the User Name/Password combination to save them as part of this configuration. 2. FIG. Click OK to save these settings and return to the Connect dialog. Once they are entered here. 1. This allows you to recall the configuration you specify later. Refer to the NetLinx Studio (v2. Press the Connect button to establish the connection. Data Bits. In the Connect dialog. Select Serial from the Transport drop-down list (FIG. Once these steps have been completed. 3. Click the Connection requires authentication checkbox to enable the User and Password text fields. without having to re-configure. Select Transfer > Connect to open the Connect dialog. you will be able to establish this connection (by selecting it by name in the Connect dialog) without having to type the authentication information each time you connect. Press the Connect button to establish the connection. you will have defined a named communication configuration that will then be included in the Connection list (in the Connect dialog). 236 TPDesign4 (v2. 212 on page 233).Serial selected as Transport 5. Configure the Settings parameters (COM Port. you will prompted to enter a User Name and Password in order to establish a connection. Stop Bits and Flow control) as needed. Once they are entered here. Then the communication configuration can be easily reused by simply selecting it from the drop-down list in the Connect dialog. In the Connection Settings dialog. 217 Connection Settings dialog .11 or higher) . Connecting to a NetLinx Master via Serial Port These steps describe establishing serial communication with a NetLinx Master for the first time. you will be able to establish this connection (by selecting it by name in the Connect dialog) without having to type the authentication information each time you connect. 8. click New to establish a new connection. Baud Rate. enter a unique name for the connection configuration that are you setting up (in the Name field).File Transfer Operations Click the Connection requires authentication checkbox to enable the User and Password text fields. Parity. 7. 4.

11 or higher) 237 . Enter the User Name/Password combination to save them as part of this configuration. 7. In the Connection Settings dialog. Stop Bits. Once these steps have been completed. 218 Connection Settings dialog . Click OK to save these settings and return to the Connect dialog. Flow control and Phone #) as needed. Configure the Settings parameters (COM Port. click New to establish a new connection. you will have defined a named communication configuration that will then be included in the Connection list (in the Connect dialog). Once they are entered here. 5. 218). 3. enter a unique name for the connection configuration that are you setting up (in the Name field). Press the Connect button to establish the connection. TPDesign4 (v2. Select Modem from the Transport drop-down list (FIG. This allows you to recall the configuration you specify later. The invokes the Connection Settings dialog (FIG. 212 on page 233). Click the Connection requires authentication checkbox to enable the User and Password text fields. you will be able to establish this connection (by selecting it by name in the Connect dialog) without having to type the authentication information each time you connect.File Transfer Operations Connecting to a NetLinx Master via Modem These steps describe establishing modem communication with a NetLinx Master for the first time. 2. without having to re-configure. Parity. FIG. Data Bits. 1. Refer to the NetLinx Studio (v2. Baud Rate.3 or higher) online help for details on enabling authentication on NetLinx Masters. 6. If the target NetLinx Master has authentication enabled. you will prompted to enter a User Name and Password in order to establish a connection. Then the communication configuration can be easily reused by simply selecting it from the drop-down list in the Connect dialog. In the Connect dialog.Modem selected as Transport 4.

the panel files are routed to the panels. the panel files are routed to the panels. c. There are three ways to connect and upload Panel files: TCP/IP.01 or higher. Use the Send File To Panel option to send a project file without having to open it in TPD4. If you have already established a TCP/IP communication configuration. Click Connect in the Connect dialog to establish the TCP/IP connection. While the Master manages all file transfers to and from the panels. the Connect dialog is invoked (FIG. The IP Port should always be set to 1319 (default). Click OK to save the configuration and close the Connection Settings dialog 2. file transfer operations are always routed through the Master to which the target/source touch panels are connected. the panel files are routed to the panels. Use the Connect dialog to define and save connection settings. file transfer operations are always routed through the Master to which the target/source touch panels are connected. In TPD4. enter a name for this communication configuration. Verify the TPD4 program being used is Version 1. where they will reside (panel files never reside on the Master). appear in the drop-down list of the Connect dialog. Select TCP/IP from the Transport drop-down list. 238 TPDesign4 (v2. via the Connect dialog. To transfer to a G4 panel. Connections are maintained separate from the transfer itself. Panel File Transfers via TCP/IP In TPD4. If you are not already connected to the Master. Do not change this number.11 or higher) . Connections are maintained separate from the transfer itself. Use the Connect dialog to define and save connection settings. While the Master manages all file transfers to and from the panels. Configure the TCP/IP connection (IP Address/DNS Name of the target/source device).File Transfer Operations Transferring Touch Panel Files to/from a NetLinx Master Sending a Panel File To a NetLinx Master Select Transfer > Send To Panel (or Transfer > Send File To Panel) to send a panel file to a NetLinx Master with a G4-compatible panel (or panels) on its bus. 214 on page 234). In order to transfer touch panel files. Select Transfer > Send to Panel or Receive From Panel. so they do not need to be established/dropped each time a transfer is performed. you must first establish communication between the PC and the NetLinx Master. This is the name that will b. e. Serial and Modem. verify that the NetLinx Master Firmware is build 85 or later. via the Connect dialog. While the Master manages all file transfers to and from the panels. select it from the dropdown list. In the Name field. file transfer operations are always routed through the Master to which the target/source touch panels are connected. create and save a serial communication configuration via the Connection Settings dialog: a. Serial and Modem. Receiving a Panel File From a NetLinx Master Use the Transfer > Receive From Panel option (or click the toolbar button) to connect to a Master and upload a panel file from a compatible G4 touch panel on that Master's bus. There are three transport types available to transfer touch panel files: TCP/IP. In order to transfer touch panel files. To use TCP/IP as the transport type: 1. Earlier versions of the firmware and TPD4 software are incompatible with G4 panels. d. where they will reside (panel files never reside on the Master). Otherwise. In TPD4. where they will reside (panel files never reside on the Master). you must first establish communication between the PC and the NetLinx Master. so they do not need to be established/dropped each time a transfer is performed.

If you have already established a serial communication configuration. c. If you are not already connected to the Master. Device #. 5. Panel ID.1 Flow Control . Configure the selected serial (COM port) connection (Baud Rate. displaying an online device tree. the Connect dialog is invoked. either the Send To Panel or Receive From Panel dialog is invoked (depending on wether you selected Send to Panel or Receive From Panel from the Transfer menu). d.none Stop Bits . select it from the drop-down list. To refresh the Online Devices Tree. Select Transfer > Send to Panel or Receive From Panel. This is the name that will appear in the drop-down list of the Connect dialog. displaying an online device tree. TPDesign4 (v2. where they will reside (panel files never reside on the Master).11 or higher) 239 . b. Select Serial from the Transport drop-down list. (firmware) Version.File Transfer Operations 3. Click OK to save the configuration and close the Connection Settings dialog 2. Once communication is established. verify the IP Address. While the Master manages all file transfers to and from the panels. 4. and Manufacturer. The online device tree lists the online devices by System #. enter a name for this communication configuration. To use Serial as the transport type: 1. Parity. See the Transfer Options section on page 241. Data Bits.none These settings must match those of the selected COM port. the panel files are routed to the panels. disconnect and reconnect via the commands in the Transfer menu. and connection status of both NetLinx Master and Modero panel. Use the Options checkboxes in the Send to Panel or Receive From Panel dialog to enable/disable the transfer options. In the Name field. Otherwise. indicating all devices connected to the Master that are currently online (according to the Filter setting). file transfer operations are always routed through the Master to which the target/source touch panels are connected. 3. Once communication is established. indicating all devices connected to the Master that are currently online (according to the Filter setting). The suggested settings are: Baud Rate . If you encounter a transfer error. either the Send To Panel or Receive From Panel dialog is invoked (depending on wether you selected Send to Panel or Receive From Panel from the Transfer menu). Click Send or Receive to begin the transfer. Stop Bits and Flow Control).38400 Data Bits .8 Parity . Click Connect in the Connect dialog to establish the serial connection. create and save a serial communication configuration via the Connection Settings dialog: a. Description. Panel File Transfers via Serial Port In TPD4.

the Connect dialog is invoked. 240 TPDesign4 (v2. In the Name field. b. select it from the dropdown list. 4.none Stop Bits . If you are not already connected to the Master. Click Connect in the Connect dialog to establish the modem connection. The suggested settings are: Baud Rate . While the Master manages all file transfers to and from the panels.38400 Data Bits . Click OK to save the configuration and close the Connection Settings dialog 2. Select Transfer > Send to Panel or Receive From Panel. (firmware) Version. Device #. create and save a modem communication configuration via the Connection Settings dialog: a. Description. 3. either the Send To Panel or Receive From Panel dialog is invoked (depending on wether you selected Send to Panel or Receive From Panel from the Transfer menu). disconnect and reconnect via the commands in the Transfer menu. Parity.1 Flow Control . Stop Bits. Use the Options checkboxes in the Send to Panel or Receive From Panel dialog to enable/disable the transfer options.File Transfer Operations The online device tree lists the online devices by System #. Otherwise. the panel files are routed to the panels. Click Send or Receive to begin the transfer. Description. enter a name for this communication configuration.none These settings must match those of the Modem. indicating all devices connected to the Master that are currently online (according to the Filter setting). Select Modem from the Transport drop-down list. where they will reside (panel files never reside on the Master). and Manufacturer. d. 5. Note: Modem transfer is the slowest method of transferring TPD4 panel files to the target device. If you have already established a modem communication configuration. file transfer operations are always routed through the Master to which the target/source touch panels are connected. This is the name that will appear in the drop-down list of the Connect dialog. To use Modem as the transport type: 1. Panel File Transfers via Modem In TPD4. Data Bits. and Manufacturer. Once communication is established. Device #. disconnect and reconnect via the commands in the Transfer menu.11 or higher) . See the Transfer Options section on page 241. This method can range in speed but on average communicates at 3 Kbps. To refresh the Online Devices Tree. The online device tree lists the online devices by System #.8 Parity . Configure the selected modem connection (Baud Rate. Flow Control and Phone Number). (firmware) Version. c. displaying an online device tree. To refresh the Online Devices Tree.

This feature is primarily intended for use by graphic designers. In this situation. to allow them to create panel files and then test them on a panel without necessarily having access to a Master. To configure the panel for Virtual NetLinx Master transfers via TCP/IP: 1. press and hold the Setup Access button (on the front panel. using your PC as a Virtual NetLinx Master. Use the Options checkboxes in the Send to Panel or Receive From Panel dialog to enable/disable the transfer options. TPDesign4 (v2. There are three basic steps to Virtual NetLinx Master TCP/IP file transfers: 1. sound files and fonts that all already resident on the target panel. apply power to the touch panel and verify that it is connected to the LAN via the TCP/IP connector on the rear (or side) of the panel (G4 panels only). Press the Protected Setup button to access the Protected Setup page. Clear from status queue when complete: This option (enabled by default) clears each transfer from the Transfer Status Window when complete. Select the Master URL / IP input box and enter the IP address of your PC (displayed in the Virtual NetLinx Master Properties dialog). 8.File Transfer Operations 4. Select Ethernet as the Master Connection. If you are simply sending a panel file to a panel. Set the System Number to 0 (zero). since it involves sending many more files. 7. Full clean transfer (all panel & system graphic files): Select this option to automatically wipe out any existing project files resident in the target panel before loading the new panel file. Select URL as the Connection Mode. On the Touch Panel. or in your panel file on your PC (for uploads) are not included in the transfer. Open received panel (uploads only): Select this option to automatically open the panel file once it is received. Any bitmaps. Transferring Files Using a Virtual NetLinx Master TCP/IP Connection Configuring the Touch Panel for Virtual NetLinx Master TCP/IP Transfers If it is not already powered up and connected. See the Transfer Options section on page 241. Normal transfer (all panel files): This option sends all panel files. 3. Click Send or Receive to begin the transfer Transfer Options Smart transfer (updated panel files only): Select to utilize the Smart Transfer feature. Virtual NetLinx Master TCP/IP Transfers TPD4 supports direct connection to G4 panels via TCP/IP. 2. Configuring TPD4 for Virtual NetLinx Master TCP/IP Transfers 3. you can use your PC's Ethernet connection to connect directly to the panel. 6. below the touch screen) for 3 seconds to access the Setup page. Press the System Connection button to access the System Connection Setup page. Use the on-screen keyboard to enter the password (the default password is 1988). you don't need to use the Full Clean option. 5. and is not necessary in most cases.11 or higher) 241 . which reduces the transfer time by only replacing those panel files that have been updated (relative to the files already loaded in the panel). since any existing panel files on the target panel will be wiped out anyway. for situations where the target panel is not connected to a NetLinx Master. The Full Clean option adds considerable time to the transfer. Configuring the Touch Panel for Virtual NetLinx Master TCP/IP Transfers 2. 5. 4.

listed as Virtual NetLinx Master. Connect the terminal end of the PSN6. Once you can see the device online. Click the Send button to initiate the transfer. Click the Properties button to access the Virtual NetLinx Master Properties dialog. 3. b. Normal Transfer or Full Clean) as desired. you may transfer the files. Verify the green Ethernet LED (on the rear Ethernet port) is illuminated (indicating a proper connection). Write down the IP address. 10. 2. Configuring TPD4 for Virtual NetLinx Master TCP/IP Transfers 1.File Transfer Operations 9. The Virtual NetLinx Master connection allows G4 devices to directly connect to TPDesign4 instead of a physical NetLinx master for transfers.5 power cable to the 12 VDC power connector on the rear/side of the touch panel. Powering Up and Connecting the Panel (via TCP/IP) 1. press the Reboot button on the System Connection Setup page to reboot the panel.11 or higher) . After several seconds. Select Transfer > Connect to open the Connect dialog (or click the toolbar button). The progress of the transfer is indicated in the Status column of the Transfer Status Window. Transferring Files Using a Virtual NetLinx Master TCP/IP Connection Once you have configured both the touch panel and TPD4 for Masterless TCP/IP Transfers. 4. Verify that an Ethernet cable is connected from either the rear (NXT models) or side (NXD models) of the panel to a valid Ethernet Hub. select Transfer > Receive From Panel. Select Transfer > Send to Panel to open the Send to Panel dialog. 2. a. Allow several seconds after the panel is rebooted for it to appear in the Online Device list in the Send To Panel or Receive From Panel dialogs. 2. Press the Back button to return to the Protected Setup page and press the Reboot button to reboot the panel. 3. the panel should appear in the online device tree. 3. 242 TPDesign4 (v2. Select <Virtual NetLinx Master>[] from the Connection drop-down list. To receive files from the panel. you may transfer panel files to and from the G4 device without the need for an intermediate NetLinx master. The panel should appear in the list of Online Devices. which displays the Host Name and IP address for your PC. Select any Options (Smart Transfer. Once you can see the panel online. 5. Once you have entered the IP address of the PC (acting as a Virtual NetLinx Master). you are ready to transfer files to/from the panel without the need for an intermediate master: Sending Files To the Panel 1. Enter this IP address as the Master's URL/IP on the System Connection Setup page on the touch panel. Select Transfer > Send to Panel to open the Send To Panel dialog.

Click the Receive button to initiate the transfer. Driver button. In this situation. Configuring TPD4 for Virtual NetLinx Master USB Transfers 3. please follow the steps below to ensure a valid USB connection to the G4 panels: 1. 3. 5. Configuring the Touch Panel for Virtual NetLinx Master USB Transfers 2. the panel should appear in the online device tree. Press and hold the grey Front Setup Access button (below the touch screen) for 3 seconds to access the Setup page. Plug in the USB cable into the G4 panel. This is acceptable. you can use your PC's USB connection to connect directly to the panel. Press the Protected Setup button to access the Protected Setup page. 3. 3. 7. After several seconds. you are ready to connect to the USB port of the G4 panel. There are three basic steps to Virtual NetLinx Master USB file transfers: 1. click on the Next buttons. in the Send To Panel or Receive From Panel dialog TPDesign4 (v2. Configuring the Touch Panel for Virtual NetLinx Master USB Transfers If it is not already powered up and connected. This feature is primarily intended for use by graphic designers. This is done via the Virtual NetLinx Master connection in the Connect dialog (Transfer > Connect). 2. Double click on the icon to bring up the list of USB devices (you should see the AMX USB LAN LINK device in the list). Select USB as the Master Connection (this selection causes all other fields in the Master Connection section become read-only). If the Install Driver dialog doesn't appear automatically. apply power to the touch panel and verify that it is connected to the LAN via the TCP/IP connector on the rear (or side) of the panel (G4 panels only). 5. Select any Options (Smart Transfer. The OS will complain about the fact that the driver you are installing/updating does not have a digital signature. You should see an USB icon show up in the System Tray. To configure the panel for Virtual NetLinx Master transfers via USB: 1. 4. Press the System Connection button to access the System Connection Setup page. Use the on-screen keyboard to enter the password (the default password is 1988). After installation is complete. using your PC as a Virtual NetLinx Master. Select Transfer > Receive from Panel to open the Receive from Panel dialog. 4. When the Install Driver dialog does appear. Transferring Files Using a Virtual NetLinx Master USB Connection Installing the AMX USB Driver for G4 Touch Panels After installation of TPD4. 2. panel. listed as Virtual NetLinx Master.11 or higher) 243 . 2. Press the Back button to return to the Protected Setup page and press the Reboot button to reboot the 7. 6. for situations where the target panel is not connected to a NetLinx Master. Power up the Panel without the USB cable connected to the panel. accepting all the default prompts. select the Properties button and then the Update 6.File Transfer Operations Receiving Files From The Panel 1. to allow them to create panel files and then test them on a panel without necessarily having access to a Master. select to continue the installation. Virtual NetLinx Master USB Transfers TPD4 supports direct connection to G4 panels via USB. The progress of the transfer is indicated in the Status column of the Transfer Status Window. Normal Transfer or Full Clean) as desired.

Select Transfer > Receive from Panel to open the Receive from Panel dialog. 2. select Transfer > Receive From Panel. Select any Options (Smart Transfer. Connect the terminal end of the PSN6. The panel should appear in the list of Online Devices. Normal Transfer or Full Clean) as desired. 2. To receive files from the panel. 3. Select Transfer > Send to Panel to open the Send to Panel dialog.5 power cable to the 12 VDC power connector on the rear or side (depending on the model) of the touch panel. Click the Receive button to initiate the transfer. you may transfer panel files. The Virtual NetLinx Master connection allows G4 devices to directly connect to TPDesign4 instead of a physical NetLinx master for transfers. Click the Send button to initiate the transfer. Transferring Files Using a Virtual NetLinx Master USB Connection Once you have configured both the touch panel and TPD4 for Masterless USB Transfers. Use a (type-A) USB cable to connect the panel to an available USB port on your PC. Powering Up and Connecting the Panel (via USB) 1. Select any Options (Smart Transfer. 3. 2. Configuring TPD4 for Virtual NetLinx Master USB Transfers 1. 244 TPDesign4 (v2. 2. The progress of the transfer is indicated in the Status column of the Transfer Status Window. The progress of the transfer is indicated in the Status column of the Transfer Status Window. you may transfer panel files to and from the G4 device without the need for an intermediate NetLinx master. you are ready to transfer files to/from the panel without the need for an intermediate master: Sending Files To the Panel 1. then connect to the panel. Select Transfer > Connect to open the Connect dialog (or click the toolbar button). Once you can see the panel online. Receiving Files From The Panel 1. Normal Transfer or Full Clean) as desired. Select <Virtual NetLinx Master>[] from the Connection drop-down list. First plug the USB cable into the PC. Select Transfer > Send to Panel to open the Send To Panel dialog.File Transfer Operations Once you can see the device online.11 or higher) . Allow several seconds after the panel is rebooted for it to appear in the Online Device list in the Send To Panel or Receive From Panel dialogs. 3.

via Windows Network Connections settings: 1. FIG. It is necessary to supply a static IP address for this LAN connection. Launch the Network Connections dialog (select Start > Programs > Accessories > Communications > Network Connections . 220).FIG. 219). you must edit the properties of the TCP/IP interface of the connection itself. 219 Network Connections dialog 2. Right-click on the Network Connection that indicates "AMX USB Device Link".11 or higher) 245 . and select Properties from the context menu. it should create a new LAN connection (see My Computer | My Network Places | View network connections). This invokes the Local Area Connection Properties dialog (FIG. This driver utilizes Ethernet-over-USB. FIG. 220 Local Area Connection Properties dialog TPDesign4 (v2. When the MVP-5200i device is connected to the computer. To enter a static IP address for the connection.File Transfer Operations MVP-5200i USB Driver The MVP-5200i utilizes a native RNDIS USB driver.

5. Select Use the following IP address. and enter the desired (static) IP Address and Subnet Mask for the panel. This invokes the Internet Protocol (TCP/ IP) Properties dialog (FIG. Click OK to save your changes.File Transfer Operations 3. Select Internet Protocol (TCP/IP). and click on Properties. FIG. 246 TPDesign4 (v2.11 or higher) . The static IP assigned to this connection should be on the same subnet as the IP address entered on the device Setup Pages (Protected Setup | System Settings | IP Settings | IP Address). 221 Internet Protocol (TCP/IP) Properties dialog 4. 221).

Select File > Import Touch Panel Template to open the Import Touch Panel Template dialog. *.11 or higher) 247 . Locate and select a Touch Panel Template file (*.TPT) Files TPD4 allows you to import VisualArchitect (VA) template files (*. Once the template has been loaded. popup pages and buttons that are pre-defined with functions that allow you to view/edit various panel and system parameters.TPT) to import into TPD4 for editing.Working With Templates Working With Templates Importing Template (*.VAT template files are created and exported using the VisualArchitect application. copied and pasted just like any other TPD4 project. 2.VAT or *. Select File > Open System Page Template to open the system page template. When a VAT or TPT template file is imported. FIG. Working With the System Page Template The System Page Template is a set of pages. a Status dialog indicates the progress as the various component files are loaded. containing a set of system pages and popup pages (FIG.TPT). *. 222 Example System Page Template TPDesign4 (v2. Depending on the size of the template. 222). this could take several minutes.VAT) as well as TPD4 template files (*.TPT template files are created and saved as templates in TPD4. You will see the System Page Template open in the Workspace Navigator as a separate project folder. it is opened in TPD4 as a project file. When you open the System Page Template.VAT or *. The buttons and pages can be edited. TPD4 automatically selects the template that matches the panel and resolution specified for the active project. To import a touch panel template file into TPD4: 1.

Channel Code: System Page buttons are each assigned a descriptive name as the Channel Code for easy identification. For example. or copy/paste selected elements from a System Page into a page in your project. you only want to use some of the features on a System Page. and once these pages or buttons exist within your Project they can be modified as needed. you can edit function codes (and all other page and button parameters). This is to protect the original System Page Template pages from being edited.setup port) by default. The System Page Template Pages are all intentionally locked. since they always retain their function codes. Keep in mind that if the System Page Template was opened as part of the Workspace. the Channel Port is always set to the reserved setup port (0 .Working With Templates The System Page template is a resource that you can use to copy/paste entire System Pages into your project. System Page buttons always use these settings: Address Port: System Page buttons which require communication from the master controller to the panel. Once the System Page is pasted into your project. Since there is not a password to unlock the file. and pasted into a Project.setup port) by default. it is fully editable. the name is automatically changed to a single underscore (i. "__RGB setup"). you may decide that rather than pasting an entire system page into your project. 248 TPDesign4 (v2.e. You can edit or modify the page and contained buttons. To copy an entire System Page out of the System Page Template folder and paste it into a project: Select File > System Page Template to open the System Page Template folder as a separate project folder in the Workspace Navigator window (Pages tab). In this case. Once you copy the System Page into your project. the Address and Channel Port/Code assignments work differently than the buttons you create. if necessary. TPD4 will not allow you to save any Page using the doubleunderscore prefix. Alternatively.e. just like you would for any other page in the Project. Address Code: System Page buttons are each assigned a descriptive name as the Address Code for easy identification. In this case you will be presented with the Enter Access Password dialog.e. You can open the System Page Template (via the File menu) and copy entire pages or particular elements from a page. "__RGBsetup"). you may want to include the entire RGB Setup page in your project. and them paste them into your Project. just like any other page in the Project. System Pages and the buttons they contain will remain fully functional when they are copied into your project. and the name is (automatically) changed to use a single-underscore prefix. TPD4 treats the System File Template as a password-protected file to avoid accidentally modifying the template pages directly. Note that the System Page Templates all have names that begin with two underscores (i. When these pages are pasted into a Project.11 or higher) . The pages and popup pages included in the System Page Template are displayed in the Pages tab. and paste them into any page in your project. However. you can copy/paste just the buttons you want out of a System Page. The pages that make up the template cannot be modified directly. The double-underscore prefix indicates that the System Pages are intentionally locked. The pages and the buttons they contain are not editable until they are copied out of the System Page Template folder. Note that each System Template page has a descriptive name that begins with two underscores (i. "_RGB setup"). the Reload last workspace option (in the Application tab of the Preferences dialog) will cause the application to attempt to open the (protected) System Page Template as part of the last opened workspace. it is treated like any other page in your project. To avoid potential conflicts with the System Page Template. Copying/Pasting Entire System Pages into a Project You can add System Pages to your project by copying and pasting. once the System Page Template is copied into a Project. TPD4 will not allow you to create and save a page with the two underscore prefix. Again. Note that if you click on a button on a System Page. Channel Port: Since System Page buttons require communication out of the panel to the master controller. the only option is to open the System Page Template as a Read-Only file. are always set to the reserved setup port (0 .

Note that once the System Page is pasted into the project. 2. until they are pasted into a Project.11 or higher) 249 . /. Similar to the keypad popup page. You can use these keyboards and keypads in your Project without having to build the keys or assign the function codes.. Once the System Page button(s) are pasted into your project. Clear. . Select the target project and select Edit > Paste (or use the Paste toolbar button). Select the System Page (or pages) that you want to copy (in the Pages tab of the Workspace Navigator). Copying/Pasting System Page Elements into a Project page In some cases. these popup pages and their contained buttons are locked to editing. Green and Blue Level bargraphs into a page. including Caps Lock. TPDesign4 (v2. and International functionality. The System Popup Pages include: • keyboard: This is a full 63-key keyboard. Select Edit > Copy (or use the Copy toolbar button). • keypad: • keypadExtend: • keypadPrivate: • keypadTele: This is standard 10-key numeric keypad (also includes Backspace. The pages in the System Page Template. '). Working with System Page Keyboards and Keypads One of the most helpful features of the System Page Template is the set of keyboard and keypad System Popup Pages it contains. and the buttons they contain are locked for editing. you would simply select and copy that set of bargraph buttons from the RGBsetup System Page and paste them right into an existing page in your project. This is a more secure version of the keypad popup page. and edit the page and contained buttons like you would any other page in the project. where only asterisks are displayed when you type. Similar to the keypadExtend popup page. for use with telephone connections. where only asterisks are displayed when you type. For example. You cannot cut a System Page out of the System Page Template. you may want to use just the Red. you may have a need for a particular element or set of elements in one of the System Page Templates in your project. if necessary. 3.e. TPD4 allows you to copy/paste specific items from a System Page into an existing page in your project. but with several additional symbols (-. while you may not necessarily want to include the entire RGBsetup System Page as a page in your project. • keyboardPrivate: This is a more secure version of the keyboard popup page. "_RGBsetup"). However. the System Page name automatically changes from a double. This indicates that the page will be treated like a "normal" project page from this point on. Double-click the copied System Page to open it in a Design View window. and they will be fully functional. This is generally used as the primary standard keyboard. :. Like the other System Pages in the System Page Template. Shift. but includes asterisk and pound symbols additional symbols. Abort and Done buttons). In addition to copying/pasting entire System Page Template pages into your project. they can be modified just like any other button in the project. Simply copy/paste these popup pages into your Project. for text/numeral entries made on the panel. the popup pages and all of their buttons can be edited just like any other popup pages and buttons in your Project. Once you bring the keyboard/keypad popup pages into your Project. In this case. allowing text/numeric entries on the panel.Working With Templates 1. System Page buttons will remain fully functional when they are copied into your project. once the copied buttons are pasted into a page in your project. Use the keyboard and keypad System Popup Pages anytime you need to add text/numeric entry functions to your Project.to a single-underscore prefix (i. since they always retain their function codes. you can edit the associated function codes (and all other button parameters).

However. This is the Protected Setup page. Either way. including one protected password (which only displays asterisks when the password is being entered for additional security). Time Adjustment.Working With Templates There are two ways to add a keyboard or keypad to your Project: 1. remember that once pasted into your Project. • Time: 250 TPDesign4 (v2. The elements on this page allow you to confirm that the calibration was done properly. Use the elements in this page to store information specific to your Project (File Name. Panel Volume and Default Panel Sounds . Protected Setup). then enter the text for each button in the States tab of the Properties Control window. copy/paste the system page (or just those elements that you want to use in your project) into your Project. etc). Touch Input Select. This page also contains buttons that have page flips to other related System Pages (Project Information. The pasted popup page is automatically pasted to the Popup Pages folder for the target Project. Bus Blink. and copy only the buttons/keys that you plan to use into an existing page in a Project. Select File > Open System Page Template to open the system page template. The elements on this page allow you to reset the vertical and horizontal touch points on the LCD.single or double-beep). used to indicate the progress of file transfer operations. Panel Information. System Page Template Reference • Battery: • Calibrate: • Calibrate Test: • Panel: • Progress: • Project: The Battery Base page allows you to configure various battery and power related options.11 or higher) . Use the elements in this page to store information specific to the target panel for this Project. Version. Job Name. TPD4 automatically selects the template that matches the panel and resolution specified for the active project. Dealer ID. etc). System Page Template Reference The System Page Template is a set of pages. This is the Project Information page. these popup pages and buttons are fully editable. • Protected: • Protected ID: • Protected Password: • Protected Secondary ID: This page contains options to allow you to apply password protection to a secondary (wireless) connection. This page contains a Progress Bar. Master Connection. Panel Information. • Protected Sensors: • Resolution: • Setup: This page contains options to allow you to configure light and motion sensors on the panel. then select the target Project in the Workspace Navigator and select Edit > Paste. The Setup page allows you to set several basic setup options (Panel Timeout. you won't have to do any additional work to make the keyboard/keypad work on the panel. etc). Revision. containing the following pages. Use the Time page to set the system clock. This is the Protected ID page. and to specify how time and date values will be displayed on the panel. select Edit > Copy. When you open the System Page Template. To use these pages in your project. This page allows you to match the outgoing screen resolution on an NXP-TPI/4 to the connected touch panel. This page contains options to allow you change any passwords associated with this Project. Baud Rate. 2. Copy and Paste the entire Keyboard or Keypad Popup Page into an existing project: Select the appropriate System Template Popup Page in the Workspace Navigator (Pages tab). popup pages and buttons that are pre-defined with functions that allow you to view/edit various panel and system parameters. Copy and Paste only selected elements from a Keyboard or Keypad Popup Page into an existing project: Open a Keyboard or Keypad Popup Page. which contains various setup options that are not usually exposed to the end-user (Device Number. You will see the System Page Template open in the Workspace Navigator as a separate project folder. Video/RGB Adjustment. containing options for various system identification information (IP Settings.

Shift. Horizontal and Vertical Size/Position and Tracking). Saturation and Hue). plus buttons for returning to default settings. . KeypadTele: Similar to the keypadExtend popup page. Green and Blue levels. This is generally used as the primary standard keyboard. TPDesign4 (v2. plus buttons to indicate video source slot assignments (which relate to video sources coming from the NXP-TPI/4). KeyboardPrivate: This is a more secure version of the keyboard popup page.Working With Templates System Page Template Reference (Cont.11 or higher) 251 . :. Version and Status text-area buttons. Keyboard Virtual: For use with Computer Control buttons to simulate the keyboard on the PC. Undo changes. Keypad: This is standard 10-key numeric keypad (also includes Backspace. where only asterisks are displayed when you type. Input and Format). undo changes. for use with telephone connections. and several other buttons to allow a return to the Default RGB values. Full Screen Edit. '). save changes and other textarea buttons relating to video sources (Version. KeypadExtend: Similar to the keypad popup page. • RGB Setup: • Video Setup: • Volume: System Page Template Popup Pages The System Page Template also includes several popup pages: Keyboard: This is a full 63-key keyboard. where only asterisks are displayed when you type. Contrast. and International functionality. Warning Message: This is the Battery Base warning message. The options in this page allow you to configure the master volume settings for the panel. Clear. /. but includes asterisk and pound symbols additional symbols. This page also contains a clock adjust button for setting the system clock. Abort and Done buttons). This page contains all of the items in the RGB Full Screen System Page. KeypadPrivate: This is a more secure version of the keypad popup page. The Video Setup page contains options for setting/adjusting the video sources coming from the NXP-TPI/4 (Brightness. for text/numeral entries made on the panel. Save Settings. including Caps Lock.. Status.) • RGB Full Screen: This page contains options to allow you to adjust various aspects of the RGB signal (Red. but with several additional symbols (-.

TPT) can be created to constitute a template family. This method allows you to modify and delete thus the pages are more likely to be similar. 252 TPDesign4 (v2. Both examples are situations where you might consider making specific templates for those panel types. Start with the Device and Navigation elements first and the Placeholder elements last. According to the table there are only 6 resolutions. Careful consideration will reveal the type of navigation you will need. where the Pixels Per Inch is higher than the CV12 and the MVP-7500's limited color depth. Select File > Export As G4 PanelBuilder Template to open the Export As G4 PanelBuilder Template dialog. Now rename the new image to the appropriate element name. The key for creating your own elements naming conventions. based on the established elements. What navigation model are you going to use? You know you're going to have the required template elements but are some of your menus so complex they will require sub-menus? What devices and features will the template include? Consider using some optional template elements.TPT) file. Your navigation menus will always be on top of your Devices. popups and buttons. Things to remember: You must have a minimum of 1 Navigation element. in fact AMX templates utilize a 1/4 screen size to reduce the template file size. Then open the resource manager and select Paste. but many more panel types. Select Page > Copy Image To Clipboard.png"). the minimum number to make a template family. You only need one template per resolution but you should consider instances such as the MVP-8400. Also.jpg" or "[preview]. etc. The resolutions and panel types are provided here. This dialog indicates errors and warnings relating to the G4 PanelBuilder Template (*. 4 items. You are ready to begin restructuring the elements to fit your needs. 2. TPD4 does not support the creation of G4 PanelBuilder templates for R-4 remote devices (since R-4 remotes must implement navigation elements in the form of pages in order for the Back and Up/Down buttons on the remote to function correctly). You should spend some time deciding what you want the panel to do. Images do not have to be full size. A G4 PanelBuilder template is a TPD4 file complete with pages. Suggestion: Create a simple TPD4 file showing the desired output.TPT) file that will be created from this project. Suggestion: Start with the most complex Device element first. You must have a main preview image ("[preview].. named in a manner that G4 PanelBuilder will understand the relationship between all of the elements. create several different variations of Navigation and Sub-Navigations (3 items. Doing this gives you a starting point to begin looking at how to modify the TPD4 file to create a template.11 or higher) . Create the preview images for the elements. Then.. 1.Working With Templates Exporting Your Project as a G4 PanelBuilder Template TPD4 allows you to export your TPD4 project as a G4 PanelBuilder Template (*. You cannot create a "drill-down" style of navigation with G4 PanelBuilder. Suggestion: Mock up the interface in TPD4 by opening the corresponding page and display all applicable popups. Any number of template files (*. You must have a minimum of 1 Placeholder element.). G4 PanelBuilder looks for navigations with the name. The menu option to export a project as a G4 PanelBuilder template will be disabled for R-4 projects. 3. Make sure they do not conflict with each other. G4 PanelBuilder requires that navigation elements in a template be implemented as pop-ups. it is suggested you create one for each resolution totaling 6. On the other hand. G4 PanelBuilder customizes the TPD4 file based on the navigation flow you designed. then make copies of it. [nav#navName]pageName.

TPT file is created and a list of errors and warnings are displayed at this time. Below is the workspace for TPD4. If necessary you can build the ones you currently need and address the other resolutions as they present themselves. 223 TPD4 Workspace . FIG. A . 5. Leave the "Job Name" in the Panel Properties the same for all related TPD4 files. Things to remember: You can use TPD4's Save As Other Panel Type when appropriate or as a starting point. this is the basis of a template family.Example G4 PanelBuilder Template TPDesign4 (v2. After you have completed the template design. do a generate. Not all resolutions have to be done at once. The pages are highlighted in the color of the element they represent (FIG. Repeat the design for other resolutions.Working With Templates 4.11 or higher) 253 . 223). if applicable.

11 or higher) .Required Template Elements The template must have at least one of each of the following elements: Navigation Elements This is the main menu where most of your navigation selections are made. [item]buttonName buttonName . The chart below demonstrates these rules (FIG. FIG. The popups in the Navigation element must contain at lest one item button that will be filled with navigation information. Cannot contain any pages Only one can be displayed at a time. The text will be replaced with the name given to the Navigation in the generated TP4 project. Item buttons are ordered within the Navigation element in order of left to right then top to bottom. [info]buttonName This text is used to populate the mouse-over element description in the toolbox. 254 TPDesign4 (v2. [title]buttonName buttonName .This is the button name used in the generated TP4 project. Only one of the pages or popups in A Navigation element can contain an Info button. Element Specific Conventions: [nav#navName]pageName navName .This is unused and the button is deleted in the generated TP4 project.Working With Templates G4 PanelBuilder Templates . The Info button contains the page flip information for displaying the Navigation element and can contain an optional icon image. buttonName. pageName . 224). 224 G4 PanelBuilder Templates . Popups in a Navigation element can contain one or more Title buttons.The base page name that will be used in the generated TP4 project.This is the button name used in the generated TP4 project.The name of the Navigation as it will appear within G4 PanelBuilder.Required Template Elements When designing a template it is important to remember the rules that govern elements and their relation with the templates. Consists of at least one popup but can contain multiple popups.

The name of the Navigation as it will appear within G4 PanelBuilder.This is the button name used in the generated TP4 project. buttonName .The name of the Placeholder element as it appears in G4 PanelBuilder. Only one page or popup within a Placeholder element can contain an Info button. Consists of one page and may have optional popups. Element Specific Conventions: [placeholder#placeholderName]pageName placeholderName . buttonName .This is unused and the button is deleted in the generated TP4 project. [title]buttonName buttonName . The pages and popups in a Placeholder element can contain one or more Title buttons. The text is replaced with the name given to the Placeholder element in the generated TP4 project. pageName .11 or higher) 255 .The base page name used in the generated TP4 project.Working With Templates navName .The base page name that will be used in the generated TP4 project.The button name will be used in the generated TP4 project. TPDesign4 (v2. Only one Placeholder element can be displayed at a time. buttonName . Placeholder Elements This is a blank device element that allows you to represent unique items in the diagram area. buttonName . pageName .This is the button name used in the generated TP4 project.This is unused and the button is deleted in the generated TP4 project. [info]buttonName This text is used to populate the mouse-over element description in the toolbox. The Info button contains the page flip information for displaying the Placeholder element and can also contain an optional icon image.

The button name used in the generated TP4 project. Consists of a single page and can contain multiple popups. The page in the Mode element must contain at least one Item button that contains the navigation information. Only one page in a Mode element can contain an Info button. 225): FIG. "Video Conference Mode" or "Presentation Mode. The Info button contains the page flip information for displaying the Mode element and can also contain an optional icon image. [item]buttonName buttonName .The name of the Mode as it will appear in G4 PanelBuilder. Only one Mode element can be displayed at a time. There are rules that govern all template elements (FIG. [info]buttonName This text is used to populate the mouseover element description in the toolbox.Optional Template Elements Your templates can have any of the following: Mode Elements This element is generally used for designating "modes" your system will work in. 256 TPDesign4 (v2.. pageName .The base page name used in the generated TP4 project.Working With Templates G4 PanelBuilder Templates . 225 G4 PanelBuilder Templates .11 or higher) . Mode elements can be associated with rooms.Optional Template Elements There are required elements when developing templates but G4 PanelBuilder also supports a series of optional elements that will make your templates more robust. buttonName .Unused. the button is deleted in the generated TP4 project. Item buttons are ordered within the Mode element by left-to-right then top-to-bottom.e. i. Element Specific Conventions: [mode#modeName]pageName modeName ." Additionally.

buttonName .The name of the Splash element as it appears in G4 PanelBuilder.The name of the Mode as it will appear in G4 PanelBuilder. which contains the page flip information for displaying the Sub-Navigation element and can also contain an optional icon image.The button name used in the generated TP4 project. whose text is replaced with the name given to the Mode in the generated TP4 project. Sub-Navigation Elements This element is a submenu and can occur on screen with Navigation elements. pageName .The base page name that is used in the generated TP4 project.The name of the Sub-Navigation element as it appears in G4 PanelBuilder pageName . Consists of at least one popup and can contain multiple popups. [title]buttonName buttonName .The button name used in the generated TP4 project.Working With Templates Popups in a Mode element can contain one or more Title buttons.The button name used in the generated TP4 project. Cannot contain pages. [item]buttonName buttonName .e. Element Specific Conventions: [splash#splashName]pageName splashName .The base page name that is used in the generated TP4 project. buttonName . Only one of the popups in a Sub-Navigation element can contain an Info button. buttonName .The button name used in the generated TP4 project. Item buttons are ordered in the Navigation element left-to-right then top-to-bottom.The name of the Sub-Navigation element as it appears in G4 PanelBuilder pageName . Popups in the Sub-Navigation element must contain at least one Item button that will contain navigation information. navName . corporate logo. pageName . i.The button name used in the generated TP4 project. [info]buttonName This text is used to populate the mouseover element description in the toolbox. [title]buttonName buttonName .11 or higher) 257 . the button is deleted in the generated TP4 project. modeName . TPDesign4 (v2. Cannot contain pages. buttonName .The base page name used in the generated TP4 project.The button name used in the generated TP4 project. The text within the Title buttons are replaced with the name given to the Sub-Navigation in the generated TP4 project.The base page name that is used in the generated TP4 project. buttonName .Unused. buttonName . buttonName .Unused.The button name used in the generated TP4 project. The popups in a Sub-Navigation element can contain one or more Title buttons. the button is deleted in the generated TP4 project. Splash Elements This element is a popup that can contain an image.. Consists of at least one popup and can contain multiple popups.Unused. Element Specific Conventions: [subnav#navName]pageName navName . the button is deleted in the generated TP4 project.

[title]buttonName buttonName . [title]buttonName buttonName . which contains the page flip information for displaying the Splash element and can also contain an optional icon image. Feature Elements This element resembles the Device element. Only one page or popup in a Device element can contain an Info button which contains the page flip information for displaying the Device element and can also contain an optional icon image.The button name used in the generated TP4 project. pageName .e. However. The text within the buttons is replaced with the name given to the Splash element in the generated TP4 project. pageName . there can only be one Feature element in a panel design.Unused.Unused.The name of the Splash element as it appears in G4 PanelBuilder. buttonName .Unused. Consists of one page and can contain multiple popups. consult AMX templates where we list the most commonly used devices. The text within the buttons is replaced with the name given to the Device element in the generated TP4 project.The base page name used in the generated TP4 project. For reference. 258 TPDesign4 (v2. deviceName .Unused. buttonName .The base page name that is used in the generated TP4 project.The base page name that is used in the generated TP4 project. Popups in a Splash element can contain one or more Title buttons. [info]buttonName This text is used to populate the mouseover element description in the toolbox..11 or higher) . buttonName . buttonName . buttonName . i. Element Specific Conventions: [feature#featureName]pageName featureName . buttonName . the "Clean Panel" feature. the button is deleted in the generated TP4 project. Only one Device element can be displayed at a time. pageName . pageName .The button name used in the generated TP4 project. Only one Feature element can be displayed at a time.The button name used in the generated TP4 project. Element Specific Conventions: [device#deviceName]pageName deviceName .The name of the feature as it appears in G4 PanelBuilder.The base page name used in the generated TP4 project. the button is deleted in the generated TP4 project.The name of the Device as it appears in G4 PanelBuilder. Pages and popups in a Device element can contain one or more Title buttons. Device Elements This element is the actual device used.Working With Templates Only one of the popups in a Splash element can contain an Info button. Consists of one page and can contain multiple popups.The button name used in the generated TP4 project. [info]buttonName This text is used to populate the mouseover element description in the toolbox. splashName . this button is deleted in the generated TP4 project.The name of the Device as it appears in G4 PanelBuilder. this button is deleted in the generated TP4 project.

The button name that is used in the generated TP4 project. TPDesign4 (v2.Unused. Rules for Navigating a G4 PanelBuilder Template In addition to the template requirements and required elements.The button name that is used in the generated TP4 project. buttonName . Perform the standard page flip to the page for that element. Element Specific Conventions: [subFeature#subFeatureName]pageName subFeatureName . subFeatureName .The base page name that is used in the generated TP4 project. buttonName .The name of the feature as it appears in G4 PanelBuilder. [info]buttonName This text is used to populate the mouseover element description in the toolbox.The base page name that is used in the generated TP4 project. [title]buttonName buttonName . When navigating to a Device. Only one of the pages or popups in a Sub-Feature element can contain an Info button. Feature or Placeholder element from a Navigation element: Hide all popups on the page for that element." Consists of at least one popup and can contain multiple popups. buttonName . [info]buttonName This text is used to populate the mouseover element description in the toolbox. the button is deleted in the generated TP4 project. buttonName . "volume. i. pageName . whose text is replaced with the name given to the Feature in the generated TP4 project. [title]buttonName buttonName .The button name that is used in the generated TP4 project.Unused. which contains the page flip information for displaying the Feature element and can also contain an optional icon image. featureName .Working With Templates Only one page or popup in a Feature element can contain an Info button. when applicable. which contains the page flip information for displaying the Sub-Feature element and can also contain an optional icon image. the button is deleted in the generated TP4 project. pageName ..The button name that is used in the generated TP4 project.The name of the Sub-Feature element as it appears in G4 PanelBuilder.Unused.The base page name that is used in the generated TP4 project. Cannot contain pages. Popups in a Sub-Feature element can contain one or more Title buttons. buttonName .Unused. pageName . there are rules for navigating the templates and template wide conventions you need to heed. the button is deleted in the generated TP4 project.11 or higher) 259 . Sub-Feature Elements This element represents the "universal" features that appear on many pages. Show any popups for the element. buttonName . Show the Navigation element that is linked to the element. Show any popups for the linked Sub-Feature. the button is deleted in the generated TP4 project.The name of the Sub-Feature element as it appears in G4 PanelBuilder. whose text is replaced with the name given to the Sub-Feature element in the generated TP4 project. The pages and popups in the Feature element can contain one or more Title buttons.e.

if not all popup pages should be initially shown. "[device#DVD].jpg" (or . the Sub-Navigation is not shown. For Sub-Navigations the user must set "Hide On Action" to No. or if an icon is used on the corresponding Navigation or Sub-Navigation button.The string "[text]" is required on the button wherever text is to be replaced in the output file. they are replaced with the "Job Name" of the panel. The element previews should follow the same naming conventions as their page prefixes.11 or higher) . Info buttons are optional and only have to be included within an element if the order the popup pages is shown is important. then show the Sub-Navigation element that is linked to the element.. i. when applicable.png).e." There can only be one preview image per element. G4 PanelBuilder Templates . popup pages are shown in alphabetical order. Perform the standard page flip to the page for that element.jpg. Preview Images . The string "[text]" allows you to prepend/postpend text with characters. If the Info button is omitted. If the text on a button to be replaced does not contain '[text]" then it is unchanged. Feature or Placeholder element from a Sub-Navigation element: Hide all popups on the page for that element.Working With Templates Any Sub-Navigation elements that may have been currently displayed will be hidden. When navigating to a Device.A template can contain as many buttons named "[panelTitle]" as necessary. Show the Navigation element that is linked to the Sub-Navigation element or chain.A template must contain a main preview image and can also contain a preview image for each element. Otherwise.Template Wide Conventions Text Replacement . Panel Title . Show any popups for the linked Sub-Feature. 260 TPDesign4 (v2. Show any popups for the element. The main preview image should be named '[preview].

Single [device#Lift]Lift [device#Light Zone]Light Zone [device#Monitor]Monitor [device#Pool]Pool [device#Screen]Screen [device#Security]Security [device#Shade]Shade [device#Slide Projector]Slide Projector [device#Spa]Spa [device#Switcher size]Switcher size [device#Radio]Radio [device#TV]TV [device#VCR]VCR [device#Video Projector]Video Projector [device#Volume -Dual]Volume .Single]Volume .Single Feature Names US Weather Maps Mode Names Mode X Navigation Names Nav X Example [device#Audio Conference]Audio Conference [device#Cable Box]Cable Box [device#Camera]Camera [device#Cassette Deck]Cassette Deck [device#CD]CD [device#Document Camera]Document Camera [device#Door]Door [device#DSS]DSS [device#DVD]DVD [device#DVR]DVR [device#HVAC .11 or higher) 261 .Single Example [feature#US Weather Maps]US Weather Maps Example [mode#Mode 3]Mode 3 Example [nav#Nav 3]Nav 3 Description [mode#Mode x] x = the number of mode options Description [nav#Nav 3]Nav 3 x = the number of navigation options G4 Computer Control [device#Computer Control]G4CC TPDesign4 (v2.Dual HVAC .Dual [device#Volume . G4 PanelBuilder Templates .Dual [device#HVAC .Single]HVAC .Dual Volume . Errors could occur if the elements do not match from template to template.AMX Naming Convention Device Names Audio Conference Cable Box Camera Cassette Deck CD Document Camera Door DSS DVD DVR HVAC .Working With Templates G4 PanelBuilder Templates .AMX Naming Conventions AMX urges you to use the following naming convention to allow for portability between templates.Single Lift Light Zone Monitor Pool Screen Security Shade Slide Projector Spa Switcher size Radio TV VCR Video Projector Volume .Dual]HVAC .

Logical Page Scroll Bar Elements Logical pages contain two button elements that are used to implement a scrollbar. You only need one template per resolution but you should consider instances such as the MVP-8400. VA Templates .Working With Templates Exporting Your Project as a VisualArchitect Template TPD4 allows you to export your TPD4 project as a VisualArchitect Template (*. Then.Navigations as Pages TPD4 modifies the export of panel projects as VisualArchitect templates to allow navigation elements to be implemented as pages instead of popup pages for panel projects of device class "remote". named in a manner that VisualArchitect will understand the relationship between all of the elements. A VisualArchitect template is a TPD4 file complete with pages. where the Pixels Per Inch is higher than the CV12 and the MVP-7500's limited color depth. based on the established elements.VAT) file. Also. TPD4 limits navigation elements of device class "panel" to pop-up pages only.VAT) file that will be created from this project. The resolutions and panel types are as follows: Resolution 640x480 800x600 Panel Type • MVP-7500 • TPI4 • MVP-8400 • CA12 • CV12 • TPI4 800x480 • CV7 • CV10 • CV10/PB 1024x768 • CV15 • CA15 • TPI4 1280x1024 1280x768 • TPI4 • CV17 According to the table there are only 6 resolutions. VisualArchitect customizes the TPD4 file based on the navigation flow you designed. Both examples are situations where you might consider making specific templates for those panel types.11 or higher) . Any number of template files (*. the minimum number to make a template family. it is suggested you create one for each resolution totaling 6.TPT) can be created to constitute a template family. This dialog indicates errors and warnings relating to the VisualArchitect Template (*. 262 TPDesign4 (v2. but 12 different panel types. popups and buttons. VA Templates . Select File > Export As VisualArchitect Template to open the Export As VisualArchitect Template dialog. These two buttons are named [scrollbartop] and [scrollbarbottom].

VA Templates . starting with itself. feature. These two buttons are named [logicalupbtn] and [logicaldownbtn].List Box Page Up and Down Elements List box pages contain two button elements that will be used to implement list box single up/down operations. or placeholder implementation.11 or higher) 263 . TPDesign4 (v2.Working With Templates VA Templates . There should be one and only one [logicalinfobtn] button element for each logical page group. A [logicalinfobtn] button element must be present in addition to a [info] button element that might be required to indicate that the logical page belongs to a device. A logical page that is itself the only page of a logical page group must still contain a [logicalinfobtn] button element containing at least one page flip (to itself).Logical Page Info Element Logical pages must contain a [logicalinfobtn] button element that will be used to identify the first page of a logical page group. Each logical page must contain one of each of these elements.Logical Page Up and Down Elements Logical pages contain two button elements that will be used to implement page flips within the logical page group. VA Templates . Each list box page must contain one of each of these elements. This button should contain the list of individual logical pages belonging to the logical page collection. These two buttons are named [listboxupbtn] and [listboxdownbtn].

Working With Templates 264 TPDesign4 (v2.11 or higher) .

Use the Customize dialog to customize the TPD4 GUI. 226 Preferences Dialog .Application tab The items in the Application tab include: Startup Prompt for system generated name: This option will default the checkbox for system generated filenames (in the New Project Wizard) to the checked position. Editor Selection: The items in this tab allow you associate external editing programs with image and sound files that can be accessed through TPD4.Application tab FIG. Backup copies and the image library directory.11 or higher) 265 . Preferences Dialog . Undo/Redo Support and Miscellaneous program settings. 226 shows the Application tab of the Preferences dialog: FIG. With this option unchecked. "Directories: The items in this tab allow you to specify default directories for Panel files. where you can set general program preferences for TPD4. although the data that makes them up is still saved. Appearance: The items in this tab relate to the Design View window. This dialog contains four tabs: Application: The items in this tab relate to Startup.Program Preferences Program Preferences Overview Select Edit > Preferences to open the Preferences dialog. system generated filenames are not generated. TPDesign4 (v2. Reload last workspace: This option will reopen the last panel file and the pages (including popup pages) that were open when the application was closed (assuming that a panel file was open when the application was closed).

11 or higher) . the user will be asked to resolve the name conflict. Increase the cache size to keep more images in memory (potentially. by design the only option is to open the System Page Template as a Read-Only file. The image cache size value specifies the amount of memory allocated for images used in displaying buttons (in the Design View. Use "Copy of" prefixes: This option automatically adds the prefix "Copy of" to any pasted pages and popup pages. Reset All: Click to reset all options in all tabs to their default settings. With this option unchecked. State Manager. With this option unchecked. Retain selected tool: This option locks the selected tool (Selection Tool or Button Draw Tool). but will take effect the next time you open a project file. Create backup copy: This option saves a backup copy of the panel file to the backup folder every time you perform a save operation. the Reload last workspace option will cause the application to attempt to open the (passwordprotected) System Page Template as part of the last opened workspace. it must be loaded again from disc. if a name conflict occurs. Click Cancel to close the Preferences dialog. Click Apply to apply any changes. 266 TPDesign4 (v2. Since there is not a password to unlock the file.Program Preferences If the System Page Template was opened as part of the Workspace. when the project is saved successfully (default = enabled). If an image is not found in the in-memory cache. depending on their size) to speed up loading and displaying those images. Reset: Click to reset all options in this tab to their default settings. the tool is reverted to the Selection Tool at the completion of every button draw operation. Warning Messages When deleting resources in use: Click to receive a warning from TPD4 when you attempt to delete resources that are currently being used by the open project. this option flushes system memory of any pages that were previously opened but now closed. which is a much slower operation.Pages tab) on application startup. and Button Preview). Note that this option does not take effect immediately on pressing Apply. In this case you will be presented with the Enter Access Password dialog. Miscellaneous Flush Closed Pages on Save: When enabled. Image Cache Size (MB): Use the up and down arrows to adjust the size of the image cache (default = 8 MB). without saving any changes. Expand Workspace Navigator: This option will expand the tree structure (in the Workspace Navigator . Click OK to save your changes and close the Preferences dialog.

Click the down arrow to open a palette used to set the default color for the gutter on all new Design View windows. Use this option if you are working on a resolution or zoom setting that takes up most or all of your screen area. 227 Preferences Dialog . You can also manually set the zoom factor on any page or popup page by selecting the page and using the Zoom Toolbar. TPDesign4 (v2. most 21" monitors typically have between a 19. Gutter Color: The Gutter is the area around the outer edge of the Design View windows. this option allows you to see how large a page will appear when actually displayed on the panel. where you can either use the zoom in and out icons to zoom in/out (in 25% increments). you must first specify their monitor's visible size (in the Monitor Size field . To use this option. Auto Stack New Windows: This setting causes all page windows to stack directly on top of the last active (selected) page window.Program Preferences Preferences Dialog . 227 shows the Appearance tab of the Preferences dialog: FIG. Default = enabled.Appearance tab The items in the Appearance tab include: Window Initial Zoom: Click the down arrow to open a drop-down list of the zoom settings that can be applied as the default initial zoom setting for all new Design View windows. and you want to work with multiple pages without cascading them (which could result in part of the page window being outside of the viewable area). Monitor Size: Use this field to specify the size of the visible portion of the monitor that your pages will actually be displayed on (see Initial Zoom and Note above). This setting does not affect the zoom setting for pages that are already open. as opposed to the monitor's overall diagonal size. Fit Height) from the drop-down list. Fit Width.11 or higher) 267 . Because there are variations in dots per inch measurements among panels and among computer monitors.5" and 20" viewable area.Appearance tab FIG.see below). For example. Once of the Initial Zoom options is called Actual Size. This number should represent the diagonal measurement of the visible portion of the monitor or of the space occupied by a fullscreen image. or select the zoom setting (including Fit Page.

Snap Tolerance: Use the up/down arrows to specify the snap tolerance for the grid. Style: Click the down arrow to open a drop-down list of available checkerboard styles that can be used to represent transparency. Medium. Grid Color: Click the down arrow to open a palette used to set the default color for the grid (if enabled) on all new Design View windows.Program Preferences The Auto Stack and Initial Zoom settings are retained the next time you launch the program. Dark and Custom. If Custom is selected. in the State Manager when a state is transparent.11 or higher) . The snap tolerance represents the number of pixels within which objects in the Design View window will "snap" to the nearest grid line (applicable only when the Snap To Grid option is enabled. via the Button Selection/Drawing Tools toolbar). Grid Size: Use the up/down arrows to set the default grid size (measured in pixels). Click Apply to apply any changes. The range is 4 . Small. shades and/or colors can facilitate viewing and working with graphics. Click Cancel to close the Preferences dialog.255. changing the checkerboard style to different sizes. Transparency Transparent colors in TPDesign4 are represented by a checkerboard pattern. 268 TPDesign4 (v2. The options are Tiny. The options are Light. and in the Button Preview when a state is transparent. without saving any changes. Click OK to save your changes and close the Preferences dialog. Medium and Large. Reset All: Click to reset all options in all tabs to their default settings. Size: Click the down arrow to open a drop-down list of available checkerboard sizes. Grid Grid Style: Select from the drop-down list of styles that the grid can be displayed in (Line. In certain situations. Dashed Line or Dots). Reset: Click to reset all options in this tab to their default settings. The Transparency checkerboard is visible on pages and popup pages that are transparent. This set of options allow you to modify the way that the transparency checkerboard appears. then you can specify a custom color combination for the checkerboard by selecting from these two drop-down lists. Custom Colors: If Custom was selected as the Style (see above). the Custom Colors option is enabled (see below). the default setting is 8.

Click the browse button (.. Click Apply to apply any changes. 228 shows the Directories tab of the Preferences dialog: FIG.Program Preferences Preferences Dialog .) to open the Browse For Folder dialog. This field is re-enabled once all panels are closed and transfers are completed.TP4 Backup files.Directories tab FIG. Temp folder location: Use this field to set the location of the folder TPD4 uses for any temp files. without saving any changes.. Backup copies: This text box displays the directory that is currently set as the default directory for all *. 228 Preferences Dialog . where you can navigate to an alternative folder.TP4).11 or higher) 269 . In these situations the Temp folder cannot be changed since it is being actively used..Directories tab The items in the Directories tab include: Default Directories Panels: This text box displays the directory that is currently set as the default directory for all Panel (or project) files (*. Click OK to save your changes and close the Preferences dialog. where you can navigate to an alternative folder. TPDesign4 (v2. Reset: Click to reset all options in the Directories tab to their default settings.) to open the Browse For Folder dialog.. If you either have a panel open or a transfer in progress the Temp Folder Location field is disabled. Click Cancel to close the Preferences dialog. Reset All: Click to reset all options in all tabs to their default settings. Click the browse button (. This feature accommodates the potential for large projects which need an especially large amount of temporary disk space.

you can edit image and files by selecting the file in either the Images or Sounds tab of the Resource Manager and clicking the Edit button.EXE and file path.With an editor selected (in the Editors list).Click to add either an image or a sound editing program to the Editors list (depending on the Editor Type selected). Remove Editor button . Once you have associated an external program to image and/or sound editor. The Default column indicates which of the programs is currently set as the default editor. 229 Preferences Dialog . Add Editor button . by filename (*.Program Preferences Preferences Dialog . and disassociate it from image or sound files in TPD4. 229 shows the Editor Selection tab of the Preferences dialog: FIG.11 or higher) . to accommodate in-place editing of the images and sounds used in your Project.Lists all external image or sound editing programs (depending on the Editor Type selected) that have been added. Editors table . click this button to remove it from the list.Click the down arrow to select either Image Editors or Sound Editors from the drop-down list. 270 TPDesign4 (v2.Editor Selection tab The options in the Editor Selection tab allow you to associate external programs of your choice with image and sound files.Editor Selection tab FIG. The items in the Editor Selection tab include: Editor Type menu .

Change selection on Undo: When enabled. Enable the Redo system: This option enables/disables the ability to redo actions. Show affected pages on Undo: With this option enabled. Number of Undo Levels: Use the up/down arrows to change the number of undo actions allowed (default = 500). that page will automatically be reopened to show the button that was affected at the point that the Undo is performed.11 or higher) 271 . Reset: Click to reset all options in this tab to their default settings. 230 shows the Undo/Redo tab of the Preferences dialog: FIG. For example. without saving any changes. 230 Preferences Dialog . even they have been closed since that action was performed. if you changed a button property on a button that exists on a page that has been closed. Click OK to save your changes and close the Preferences dialog. this option is selected. this option will automatically change the selection so that the item(s) affected by the Undo / Redo action are selected. this option is selected. Click Apply to apply any changes. the program will always display the page(s) affected by an undo operation.Undo/Redo tab FIG.Program Preferences Preferences Dialog . Click Cancel to close the Preferences dialog. By default. By default. Pressing OK or Accept after enabling/disabling the undo system will result in a clearing of the undo/redo history. Reset All: Click to reset all options in all tabs to their default settings.Undo/Redo tab The items in the Undo/Redo tab include: Undo / Redo Support Enable the Undo system: This option enables/disables the ability to undo actions. TPDesign4 (v2.

If you add additional programs to the list. in the Open dialog.Program Preferences Adding an External Editing Program for Image Files Use the options in the Editor Selection tab of the Preferences dialog to associate one or more image editing programs with image files in TPD4 projects.Editor Selection tab Note that Image Editors is already selected in the Editor Type drop-down menu. but one is specified as the default image editor: 1. 2. Click OK in the Choose Editor dialog to add the selected program to the Editors list. FIG. 2. 3. and open the Editor Selection tab (FIG. 231). 272 TPDesign4 (v2. you have the option (in the Choose Editor dialog) to set the default image editor. Adding an External Editing Program for Sound Files Use the options in the Editor Selection tab of the Preferences dialog to associate one or more image editing programs with image files in TPD4 projects. Click the Browse button (. Select Edit > Preferences to open the Preferences dialog. Click the Browse button (. Click the down arrow and select Sound Editors from the Editor Type drop-down menu. in the Open dialog. The first program added to the Editors list is automatically designated as the default image editor.EXE) file. Select Edit > Preferences to open the Preferences dialog. Click the Add Editor (+) button to access the Choose Editor dialog... and open the Editor Selection tab (FIG.. 231 Preferences dialog . 3. Note that you can associate multiple editor programs with image files..11 or higher) . Note that you can associate multiple editor programs with image files.) to locate and select the desired program's executable (. Click the Add Editor (+) button to access the Choose Editor dialog. 231).EXE) file.) to locate and select the desired program's executable (. 4. 4. but one is specified as the default image editor: 1.

Editor Selection tab The first program added to the Editors list is automatically designated as the default image editor. TPDesign4 (v2. Select Edit > Preferences to open the Preferences dialog. 233). Click OK in the Choose Editor dialog to add the selected program to the Editors list. The Default column indicates which program is the current default (TRUE = current default). 2. and open the Editor Selection tab.11 or higher) 273 . you have the option (in the Choose Editor dialog) to set the default image editor. FIG. 3. 5. Select the Editor Type that you want to change the default program for (Image Editors or Sound Editors) from the drop-down menu. This selection populates the Editors table with a listing of all editing programs that have been added. Changing the Default External Image or Sound Editor Program You can change the default image or sound editor program via the Editor Selection tab of the Preferences dialog: 1. Check the Default Editor checkbox to set the selected program as the default editor (FIG. 232 Preferences dialog . Click OK to close the Choose Editor dialog. 233 Choose Editor dialog (Default Editor option selected) 5. If you add additional programs to the list. Double-click on any program in the list (other than the current default) to access the Choose Editor dialog. 4.Program Preferences FIG.

The command/icon is placed as a button in the toolbar. 4. along with their associated toolbar icon. drag the command/icon to a toolbar.11 or higher) . 235 Customize dialog . 235). select All Commands to view a full list of all commands. to the Commands tab. 3. Open the Customize dialog (select View > Customize). 234 Default Editor Indicated In the Default Column of the Editors Table Customizing the Menus and Toolbars Use the options in the Command tab of the Customize dialog to customize the contents of the TPD4 toolbars and menus (FIG. FIG. and release the mouse button. Alternatively. regardless of category. Position the command/icon right where you want to drop it in the toolbar. 5. Click to highlight a command/icon (under Commands). 274 TPDesign4 (v2. FIG. 6. Note that the cursor symbol indicates that it is not allowed to be placed anywhere except inside the area of a toolbar (any toolbar). The commands included in the selected category are displayed (under Commands). Select a command category (under Categories). 2. 234). While holding the mouse-button down.Command tab Customizing the Toolbars Adding Buttons To Existing Toolbars 1.Program Preferences The new default editor is indicated in the Default column of the Editors table (FIG. if one exists.

5. drag the button to any area outside of a toolbar. Select an icon from the User-Defined Image field. 236 Customizing menu items 3. Note that the cursor symbol changes to an "x" when the button is dragged outside of the toolbars.11 or higher) 275 . you can simply right-click on any button to open the New Command context menu. In the Button Appearance dialog. Click to select a toolbar button from an existing toolbar. you can associate an icon with the command: 1. Associating an Icon With a New Command Once you have added a new command to a Toolbar or Menu. Select Delete to delete the button. 237 Button Appearance dialog 4. Alternatively. Open the Customize dialog (select View > Customize). 2. Select Button Appearance to open the Button Appearance dialog (FIG. as long as the Customize dialog is open. right-click on a menu item (FIG. Release the mouse button to delete the button from the toolbar. right-click on the select the button that you want to associate an icon with to open the context menu. 3. select Image Only or Image and Text (the Text Only option does not allow you to associate an icon). 2. FIG. Click OK. 237). FIG. 236).Program Preferences Removing Buttons From Existing Toolbars 1. 6. While holding the mouse button down. TPDesign4 (v2. 4. For toolbar buttons. Open the Customize dialog (select View > Customize). For menu items.

Enter the new name in the Toolbar Name text field and click OK to save the change. FIG. 276 TPDesign4 (v2. Click and drag to move the new toolbar icon into position. 238). 7. Open the Customize dialog to the Toolbars tab (FIG. FIG. Click and drag commands from the Commands list and drop them inside the area of the new toolbar. Enter a name for the new toolbar in the text field and click OK. along with an empty new toolbar icon. 5. This opens the Toolbar Name dialog (FIG. and click Rename to open the Toolbar Name dialog (FIG. open the Commands tab of the Customize dialog. Select the toolbar you want to rename from the list.Toolbars tab 2. 6.11 or higher) . The new toolbar name appears in the Toolbars list. Select a command category (under Categories) to display a list of commands (under Commands). 240 Dragging a Command From the Commands List Into the New Toolbar Renaming Custom Toolbars 1. Open the Customize dialog to the Toolbars tab (FIG. FIG.Program Preferences Creating a New Custom Toolbar 1. 238 Customize dialog . 3. 239 Toolbar Name dialog 3. 8. Click the New button. 4. 239). With the empty toolbar in place. 238 on page 276). 239). 2. 240). in an empty area near the other toolbars. Repeat this process to add as many commands as you like to your custom toolbar(s) (FIG.

The commands included in the selected category are displayed (under Commands). 4. The command/icon is placed as a new option in the menu.11 or higher) 277 . regardless of category (FIG. you can simply right-click on any menu item to open the Command context menu.Adding Commands To Existing Menus 4. Open the menu to which you want to add a command. Open the Customize dialog. 3. 5. While holding the mouse button down. While holding the mouse-button down. drag the command/icon to the open menu. along with their associated toolbar icon. Alternatively. Click Delete to permanently delete the selected toolbar. Click to select a custom toolbar. Open the Customize dialog. TPDesign4 (v2. Customizing the Menus Adding Commands To Existing Menus 1. 235 on page 274). The standard TPD4 toolbars cannot be deleted. Click to highlight a command/icon (under Commands). 2. Removing Commands From Existing Menus 1. drag the menu item to any area outside of a menu. Note that the cursor symbol changes to an "x" when the menu item is dragged outside of the menus. select All Commands to view a full list of all commands. FIG. as long as the Customize dialog is open. Release the mouse button to delete the item from the menu. 3. 241 Customize dialog . to the Commands tab (FIG. Click to select a menu item from an existing menu. 2. if one exists. 241). Alternatively. and release the mouse button. Select a command category (under Categories). 7. Open the Customize dialog to the Toolbars tab.Program Preferences Deleting Custom Toolbars To delete custom (user-added) toolbars from the TPD4 workspace: 1. 6. Select Delete to delete the button. 2. 3. Position the command/icon right where you want to drop it in the menu.

FIG. 2. 3. drag the New Menu icon to a location within the Menu Bar (FIG. 243). FIG. 245). This opens the Button Appearance dialog. and select Button Appearance.Creating a New Custom Menu This item represents a new "empty" menu. While holding the mouse button down. 7. FIG. to the Commands tab (FIG. FIG. right-click on the menu to open the New Command context menu. Type the name for the new menu in the Button Text field and press OK. 6.11 or higher) . 243 Dragging the New Menu Icon To a Location Within the Menu Bar 4.Program Preferences Creating a New Custom Menu 1. Release the mouse button to place the selected command in the new menu. This places the "New Menu" entry in the Commands list (FIG. 242 Customize dialog . To name the new menu. Release the mouse button to create the new (empty) menu at the cursor location (FIG. Open the Customize dialog. 244). Select a command category (under Categories) to display a set of commands (under Commands). 278 TPDesign4 (v2. Add commands to the new menu by clicking and dragging commands from the Commands list to the new menu (FIG. 244 Creating the New (Empty) Menu At the Cursor Location 5. 235 on page 274). Select New Menu from the Categories list. 242). 245 Dragging the New Menu Icon To a Location Within the Menu Bar 8.

4.11 or higher) 279 .) to locate and select the application's. Click the New (Insert) button to create an empty text field in the Menu Contents list. The new shortcut should appear at the bottom of the Tools menu. Enter a name for the application. 5. if necessary. TPDesign4 (v2. 6. if necessary.Toolbars tab 2. Open the Customize dialog to the Tools tab (FIG. The directory path is displayed in the Command text box. 7..EXE file in the Open dialog. as you want it to appear in the Tools menu. Click Close to close the Customize dialog. 246). Specify any Arguments. Specify an Initial Directory. New (Insert) button FIG.. 246 Customize dialog . 3.Program Preferences Adding a Shortcut To an Application In the Tools Menu Use the options in the Tools tab of the Customize dialog to add/remove shortcuts to external applications in the Tools menu: 1. Next to the Command field. click the browse button (.

Program Preferences Hotkeys (Keyboard Accelerators) Hotkeys. You can view all of the current hotkey assignments in the Help Keyboard dialog (Help > Keyboard Map). but only the first one will be displayed next to the item in the menu after this type of change. 280 TPDesign4 (v2. sometimes referred to as "Keyboard Accelerators" (such as CTRL+C for the "Copy" command) can be customized in TPD4. Click Assign to assign the key(s) to the selected menu item. Multiple hotkeys can be assigned to the same command. The information in this dialog is read-only. select the command in the Commands list. 2. click Reset All. 3. or to modify existing ones (FIG. To reset all hotkey assignments to their default settings. To remove a hotkey assignment. 5. to the Keyboard tab. If you assign the minus key (-). then highlight the command's hotkey assignment in the Current Keys list. as opposed to the minus key in the main key set. 4. 247): FIG. Open the Customize dialog. and click Remove.11 or higher) . Choose a command category in the Category drop-down menu. Choose a command in the Commands list.Keyboard tab 1. 247 Customize dialog . Enter the new Hotkeys) in the Select New Shortcut Key field. always use the number pad on your keyboard. Setting Custom Hotkeys Use the Keyboard tab of the Customize dialog to create new Hotkeys (Keyboard Accelerators).

11 or higher) 281 .Program Preferences TPDesign4 (v2.

932.It’s Your World .com 9/09 ©2009 AMX. AMX reserves the right to alter specifications without notice at any time. RICHARDSON.6993 technical support • www.Take Control™ 3000 RESEARCH DRIVE.0193 • 469.amx. AMX and the AMX logo are registered trademarks of AMX. All rights reserved.8000 • 469-624-7153 fax • 800.624. TX 75082 USA • 800. .222.

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->