advertisement
▼
Scroll to page 2
of 210
instruction manual TPDesign4 Touch Panel Design Program (v2.5 or higher) So ftw are 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. 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. YOU MAY NOT LICENSE, RENT, OR LEASE THE AMX SOFTWARE. You may not reverse engineer, decompile, or disassemble the AMX Software. 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 AND UPON WRITTEN NOTICE TO LICENSEE. In the event that AMX terminates this License, then Licensee shall return all copies of the AMX Software to AMX and certify in writing that all copies have been destroyed. PRE-RELEASE CODE. Portions of the AMX Software may, from time to time, as identified in the AMX Software, include PRE-RELEASE CODE and such code may not be at the level of performance, compatibility and functionality of the final 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 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 YOU SPECIFIC LEGAL RIGHTS. Any supplements or updates to the AMX SOFTWARE, including without limitation, any (if any) service packs or hot fixes provided to you 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 your 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. 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 YOU. 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 (c)(1)(ii) of The Rights in Technical Data and Computer Software clause at DFARS 252.227-7013 or subparagraphs (c)(1) and (2) of the Commercial Computer Software Restricted Rights at 48 CFR 52.227-19, as applicable. This Agreement replaces and supercedes 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. Should you have any questions concerning this Agreement, or if you desire to contact AMX for any reason, please write: AMX Corporation, 3000 Research Drive, Richardson, TX 75082. Table of Contents Table of Contents TPDesign4 Program Overview ................................................................................1 Supported Operating Systems ................................................................................................ 1 PC Requirements .................................................................................................................... 1 Other PC requirements ........................................................................................................... 1 Touch Panel Pages - Overview......................................................................................... 2 Supported Panel Types............................................................................................................ 2 Video Capabilities for Modero Panels ...................................................................................... 3 Video Capabilities for Enhanced Modero Panels..................................................................... 3 Supported Screen Resolutions ................................................................................................ 3 Supported Image File Types .................................................................................................... 3 True Type Font Support ........................................................................................................... 4 WebUpdate ....................................................................................................................... 4 G4 PanelBuilder ................................................................................................................ 4 G4 PanelPreview............................................................................................................... 5 TPDesign4 Work Area....................................................................................................... 5 Toolbars ............................................................................................................................ 7 Design View Windows ...................................................................................................... 7 Workspace Navigator Window .......................................................................................... 8 Workspace Navigator - Pages Tab .......................................................................................... 9 Opening pages/popup pages via the Workspace Navigator .................................................... 9 Renaming Pages via the Workspace Navigator..................................................................... 10 Edit Focus .............................................................................................................................. 10 Drag and Drop Support .......................................................................................................... 10 Workspace Navigator - Function Maps Tab........................................................................... 10 Workspace Navigator Context Menu ..................................................................................... 11 Properties Control Window.............................................................................................. 11 Properties Control Window - General Tab ............................................................................. 13 Properties Control Window - Programming Tab .................................................................... 13 Properties Control Window - States Tab................................................................................ 13 Using the Apply To All option ................................................................................................. 13 Using the Prev and Next buttons ........................................................................................... 14 State Manager Window ................................................................................................... 14 State Manager Context Menu ................................................................................................ 15 State Manager Drag-and-Drop Menu..................................................................................... 15 Transfer Status Window .................................................................................................. 16 Transfer Status Context Menu ............................................................................................... 16 TPDesign4 Touch Panel Design Program i Table of Contents Button Preview Window .................................................................................................. 16 Button Preview Context Menu................................................................................................ 17 Magnifier Window............................................................................................................ 17 Working With Dockable Windows ................................................................................... 17 Moving, Docking and Resizing Dockable Windows ............................................................... 18 Toggling the Windows............................................................................................................ 18 Status Bar ....................................................................................................................... 18 Print Preview Window ..................................................................................................... 19 Workspace Context Menu............................................................................................... 20 TPDesign4 Project Files ........................................................................................ 21 Overview ......................................................................................................................... 21 Drag & Drop .................................................................................................................... 21 Creating a New Project Using G4 PanelBuilder.............................................................. 21 Using The New Project Wizard ....................................................................................... 21 Setting Project Properties ............................................................................................... 23 Project Properties dialog - Project Information tab................................................................. 23 Project Properties dialog - Panel Setup Information tab ........................................................ 24 Project Properties dialog - Sensors tab.................................................................................. 25 Project Properties dialog - IR Emitters and Receivers tab ..................................................... 25 Applying Password Protection to Your Project File......................................................... 26 Setting a Power Up Page................................................................................................ 26 Setting an Inactive Page Flip .......................................................................................... 26 Creating a Screen Saver................................................................................................. 27 Converting TPD3 files to TPD4 ....................................................................................... 27 Using the TPD Conversion Wizard ........................................................................................ 27 Notes on converting TPD3 files to TPD4 ............................................................................... 28 Errors and Warnings Report dialog........................................................................................ 28 Project Migration (from previous versions of TPDesign4)............................................... 29 System-Generated File Names.............................................................................................. 29 Inappropriate File Name Characters ...................................................................................... 30 Edit Focus ....................................................................................................................... 30 Using Quick Input............................................................................................................ 31 Undo/Redo Support ............................................................................................................... 31 Using the Workspace Navigator...................................................................................... 32 Workspace Navigator - Pages tab ......................................................................................... 32 Opening pages/popup pages via the Workspace Navigator .................................................. 33 Renaming Pages via the Workspace Navigator..................................................................... 33 Workspace Navigator - Function Maps tab ............................................................................ 33 Cutting, Copying and Pasting.......................................................................................... 34 ii TPDesign4 Touch Panel Design Program Table of Contents Copying States to the Clipboard ............................................................................................ 34 Pasting States from the Clipboard ......................................................................................... 34 Cutting Objects....................................................................................................................... 35 Replacing States On a Page, Popup Page or Button...................................................... 35 Replacing States From the Clipboard .................................................................................... 35 Replacing States Through Drag-and-Drop............................................................................. 35 Saving the Active Project as a Different Panel Type....................................................... 36 Working With Multiple Projects........................................................................................ 36 Opening Multiple Projects Simultaneously............................................................................. 36 Copying/Pasting Across Projects ........................................................................................... 37 Copying/Pasting Pages, Popup Pages and Buttons Across Projects .................................... 37 Using the Grab and Paint Properties Tools..................................................................... 37 Property Painter dialog........................................................................................................... 38 Working With the System Page Template....................................................................... 39 Copying/Pasting Entire System Pages into a Project ............................................................ 40 Copying/Pasting System Page Elements into a Project page................................................ 40 Working with System Page Keyboards and Keypads ............................................................ 41 System Page Template Reference ........................................................................................ 42 Working With the Resource Manager ...................................................................45 Resource Manager dialog - Images tab .......................................................................... 46 Resource Manager dialog - Dynamic Images tab ........................................................... 46 Resource Manager dialog - Slots tab .............................................................................. 46 Resource Manager dialog - Sounds tab.......................................................................... 47 Editing Image and Sound Files Using External Programs .............................................. 48 To edit image files: ................................................................................................................. 48 To edit sound files: ................................................................................................................. 48 Adding an External Editing Program for Image Files ............................................................. 49 Adding an External Editing Program for Sound Files............................................................. 49 Changing the Default External Image or Sound Editor Program ........................................... 49 Working With Images ...................................................................................................... 50 Supported Image File Types .................................................................................................. 50 Importing Image Files To Your Project................................................................................... 50 Assigning Images to Slot Positions ........................................................................................ 51 Working With Dynamic Images ....................................................................................... 52 Adding Dynamic Image Files To Your Project ....................................................................... 52 Assigning Dynamic Images to Slot Positions ......................................................................... 52 Preserve Dynamic Images (Refresh only at Panel Startup)................................................... 52 Working With Dynamo Video .......................................................................................... 53 Setting Up a DynaMo Video Image........................................................................................ 53 TPDesign4 Touch Panel Design Program iii Table of Contents Motion JPEG Cameras and Servers that provide Motion JPEG streaming output ................ 54 Network Path Information....................................................................................................... 55 Bitmaps vs. Icons ............................................................................................................ 57 Working With Icons ......................................................................................................... 57 Working With Slot Assignments ...................................................................................... 58 Assigning Image and Sound Files to Slot Positions............................................................... 58 State Draw Order (Z-Order) ............................................................................................ 59 Working With Sound Files............................................................................................... 59 Importing Sound Files To Your Project .................................................................................. 59 Assigning Sound Files to Slot Positions................................................................................. 60 Exporting Image and Sound Files From Your Project To a Specified Directory .................... 60 Working With Video Fills ................................................................................................. 61 Streaming Video Fill ............................................................................................................... 61 Working With Pages and Popup Pages ............................................................... 63 Working With Pages........................................................................................................ 63 Adding a New Page to the Active Project .............................................................................. 63 Setting Page Properties ......................................................................................................... 64 Setting Page State Properties................................................................................................ 64 Adding a Fill Color to a Page ................................................................................................. 65 Adding Text to a Page............................................................................................................ 66 Adding a Bitmap to a Page .................................................................................................... 66 Adding an Icon to a Page....................................................................................................... 67 Adding Text to a Page............................................................................................................ 67 Displaying a Video Source on a Page.................................................................................... 68 Creating a Page Flip ....................................................................................................... 68 Drag & Drop To Set Page Flips.............................................................................................. 68 Page Flip Actions ................................................................................................................... 69 Copying Pages....................................................................................................................... 69 Pasting Pages ........................................................................................................................ 69 Copying States From a Page ................................................................................................. 70 Pasting States From a Page .................................................................................................. 70 Deleting Pages From a Project .............................................................................................. 70 Exporting Pages as Image Files ..................................................................................... 70 Working With Popup Pages ............................................................................................ 71 Adding a New Popup Page .................................................................................................... 72 Using the Popup Draw Tool ................................................................................................... 73 Drawing Assist Support for Popup Pages Displayed on Pages ............................................. 74 Setting Popup Page Properties.............................................................................................. 75 Setting Popup Page State Properties .................................................................................... 77 Border Styles.......................................................................................................................... 78 iv TPDesign4 Touch Panel Design Program Table of Contents Adding a Fill Color To a Popup Page..................................................................................... 78 Adding a Bitmap to a Popup Page ......................................................................................... 78 Adding an Icon to a Popup Page ........................................................................................... 79 Adding Text to a Popup Page ................................................................................................ 79 Displaying a Video Source on a Popup Page ........................................................................ 80 Replacing States On a Page, Popup Page or Button...................................................... 80 Replacing States Through Drag-and-Drop............................................................................. 81 Popup Page Groups........................................................................................................ 81 Copying Popup Pages ........................................................................................................... 82 Pasting Popup Pages............................................................................................................. 82 Show/Hide Popup Pages ....................................................................................................... 82 Select Popup Pages to Show dialog ...................................................................................... 82 Deleting Popup Pages From a Project................................................................................... 83 Printing Pages and Popup Pages ................................................................................... 83 Working With Buttons ............................................................................................85 Setting New Button Parameters ...................................................................................... 86 Editing Button Properties................................................................................................. 87 Creating New Buttons ..................................................................................................... 88 Generated Button Names ...................................................................................................... 89 Using the Drawing Assist Features ................................................................................. 90 Alignment & Sizing Tool .................................................................................................. 91 Alignment ............................................................................................................................... 91 Sizing ..................................................................................................................................... 92 Setting General Button Properties................................................................................... 93 Level Control Parameters ...................................................................................................... 96 Input Mask Characters (Text Area button only) ..................................................................... 96 Input Mask Ranges (Text Area button only)........................................................................... 97 Input Mask Operators (Text Area button only) ....................................................................... 97 Input Mask Next Field Characters (Text Area button only) .................................................... 97 Setting Button Programming Properties.......................................................................... 97 Level Functions ...................................................................................................................... 99 Setting Button State Properties ....................................................................................... 99 All States option ................................................................................................................... 102 Working With Touch Styles and Active Touch ..................................................................... 102 Adding Text to a Button........................................................................................................ 103 Changing Button Text Color................................................................................................. 103 Formatting Codes (Bargraph and Multi-Bargraph buttons only) .......................................... 103 Adding a Bitmap to a Button ................................................................................................ 104 Adding an Icon to a Button................................................................................................... 104 TPDesign4 Touch Panel Design Program v Table of Contents Changing the Button Fill Color ............................................................................................. 105 Border Styles........................................................................................................................ 105 Chameleon Buttons.............................................................................................................. 105 Displaying a Video Source on a Button................................................................................ 106 Creating a Time Button ........................................................................................................ 106 Creating a Date Button......................................................................................................... 106 Creating a Custom Slider (Multi-Bargraph Buttons)............................................................. 107 Using Touch Maps for Multi-State Bargraphs Buttons ......................................................... 108 Working With Joystick Buttons............................................................................................. 108 Working With Text Input Buttons.......................................................................................... 108 Working With Computer Control Buttons ............................................................................. 108 Working With State Properties ...................................................................................... 109 Setting State Properties ....................................................................................................... 109 Adding States To a Button ............................................................................................ 110 Duplicating an Existing State on the Button ......................................................................... 110 Adding States From the Clipboard ....................................................................................... 110 Adding States Through Drag-and-Drop ............................................................................... 111 Removing States From A Button................................................................................... 111 Deleting States..................................................................................................................... 111 Cutting States To the Clipboard ........................................................................................... 112 Changing the Order Of States On A Button .................................................................. 112 Reordering States Through the Clipboard ........................................................................... 112 Reordering States Through Drag-and-Drop......................................................................... 112 Setting the Maximum Active State For a Button .................................................................. 112 Choose Display State dialog ................................................................................................ 113 Button Preview window ........................................................................................................ 113 Working With External Controls (Pushbuttons/LEDs) ................................................... 113 Setting Global General Properties for External Pushbuttons and/or LEDs .......................... 114 Setting Global Programming Properties for External Pushbuttons and/or LEDs ................. 114 Setting Page-Specific General Properties for External Pushbuttons and/or LEDs .............. 115 Setting Page-Specific Programming Properties for External Pushbuttons and/or LEDs ..... 115 Copy/Convert External Controls Between Panels................................................................ 115 Copying/Pasting Buttons............................................................................................... 116 Paste Controls dialog ........................................................................................................... 116 Searching and Replacing Button Properties ................................................................. 117 Using Quick Input.......................................................................................................... 118 Working With Function Codes....................................................................................... 119 Show/Hide Function Codes.................................................................................................. 120 Power Assign ................................................................................................................ 120 The Power Assign dialog ..................................................................................................... 121 vi TPDesign4 Touch Panel Design Program Table of Contents Using Power Assign: 1) Clear Channels .............................................................................. 121 Using Power Assign: 2) Assign Codes................................................................................. 122 Begin Assignment At............................................................................................................ 122 Ensure Contiguous Code Assignment ................................................................................. 122 Wrap Within Port ID ............................................................................................................. 122 File Transfer Operations ......................................................................................125 Working With Communications Configurations ............................................................. 125 Saving and Recalling Communication Configurations ......................................................... 125 Editing the Settings on an Existing Communication Configuration ...................................... 125 Connecting to a NetLinx Master .................................................................................... 126 Connecting to a NetLinx Master via TCP/IP......................................................................... 126 Connecting to a NetLinx Master via Serial Port ................................................................... 126 Connecting to a NetLinx Master via Modem ........................................................................ 126 Secure NetLinx Connections......................................................................................... 127 Transferring Touch Panel Files to/from a NetLinx Master............................................. 127 Panel File Transfers via TCP/IP........................................................................................... 128 Panel File Transfers via Serial Port...................................................................................... 129 Panel File Transfers via Modem .......................................................................................... 130 Virtual NetLinx Master TCP/IP Transfers ...................................................................... 132 Configuring TPDesign4 for Virtual NetLinx Master TCP/IP Transfers.................................. 132 Powering Up and Connecting the Panel .............................................................................. 132 Configuring the Touch Panel for Virtual NetLinx Master TCP/IP Transfers ......................... 133 Transferring Files Using a Virtual NetLinx Master TCP/IP Connection ......................... 133 Sending Files To the Panel .................................................................................................. 133 Receiving Files From The Panel .......................................................................................... 133 Virtual NetLinx Master USB Transfers .......................................................................... 134 Configuring the Touch Panel for Virtual NetLinx Master USB Transfers ............................. 134 Configuring TPDesign4 for Virtual NetLinx Master USB Transfers...................................... 134 Transferring Files Using a Virtual NetLinx Master USB Connection ............................. 135 Sending Files To the Panel .................................................................................................. 135 Receiving Files From The Panel .......................................................................................... 135 Sending a Project Without Opening the File ........................................................................ 135 Transfer Status Window ................................................................................................ 135 Working With Palettes and Colors ......................................................................137 Working With Colors...................................................................................................... 137 Working with Transparent Backgrounds .............................................................................. 138 Working With Multiple Color Palettes ............................................................................ 139 Creating New Palette Entries ............................................................................................... 139 Creating Custom Palettes .................................................................................................... 140 TPDesign4 Touch Panel Design Program vii Table of Contents Renaming Palettes............................................................................................................... 140 Changing the Active Palette................................................................................................. 140 Importing Palette Files ......................................................................................................... 140 Exporting Palette Files ......................................................................................................... 141 Copying Palettes .................................................................................................................. 141 Copying Palette Entries........................................................................................................ 141 Using Custom Palettes to Enable Color Schemes in G4 PanelBuilder......................... 142 Chameleon Images ....................................................................................................... 143 Requirements for Chameleon Images ................................................................................. 143 Working With Chameleon Images........................................................................................ 144 Chameleon Images, Custom Palettes and G4 PanelBuilder ............................................... 146 Animations and Tweening ................................................................................... 147 Using the Animation Wizard.......................................................................................... 147 Animation Wizard - Select Type (Step 1 of 6) ...................................................................... 148 Animation Wizard - Create Sequence (Step 2 of 6) ............................................................. 148 Animation Wizard - Size & Position (Step 3 of 6)................................................................. 149 Animation Wizard - Assign Frames (Step 4 of 6) ................................................................. 149 Animation Wizard - Appearance (Step 5 of 6)...................................................................... 150 Animation Wizard - Finish (Step 6 of 6) ............................................................................... 150 Tweening....................................................................................................................... 150 Creating Color Transition Effects ......................................................................................... 152 Creating Animated Bitmap Effects ....................................................................................... 153 Creating Animated Text Effects ........................................................................................... 154 Tweeners sub-menu ............................................................................................................ 154 Program Preferences ........................................................................................... 157 Preferences Dialog........................................................................................................ 157 Preferences Dialog - Application tab.................................................................................... 157 Preferences Dialog - Appearance tab .................................................................................. 159 Preferences Dialog - Directories tab .................................................................................... 160 Preferences Dialog - Editor Selection tab ............................................................................ 160 Customizing the Menus and Toolbars........................................................................... 161 Adding or Removing Command Shortcuts from the Toolbars/Menus.................................. 161 Customize dialog........................................................................................................... 161 Customize dialog - Commands tab ...................................................................................... 161 Customize dialog - Toolbars tab .......................................................................................... 161 Customize dialog - Tools tab................................................................................................ 162 Customize dialog - Keyboard tab ......................................................................................... 162 Customize dialog - Menu tab ............................................................................................... 163 Customize dialog - Options tab ............................................................................................ 163 viii TPDesign4 Touch Panel Design Program Table of Contents Command Context Menu ..................................................................................................... 164 Adding Buttons To Existing Toolbars ................................................................................... 164 Removing Buttons From Existing Toolbars.......................................................................... 164 Creating a New Custom Toolbar.......................................................................................... 165 Renaming Custom Toolbars ................................................................................................ 165 Deleting Custom Toolbars.................................................................................................... 165 Adding a Shortcut To an Application In the Tools Menu ...................................................... 165 Creating a New Custom Menu ............................................................................................. 166 Adding Commands To Existing Menus ................................................................................ 166 Associating an Icon With a New Command ......................................................................... 166 Removing Commands From Existing Menus....................................................................... 167 Hotkey Shortcuts ........................................................................................................... 167 Help Keyboard dialog........................................................................................................... 167 Setting Custom Hotkeys....................................................................................................... 167 Visual Style Options ...................................................................................................... 168 Appendix A: G4 Computer Control .....................................................................169 System Requirements for G4CC................................................................................... 169 Supported Operating Systems: ............................................................................................ 169 System Requirements:......................................................................................................... 169 Setting Up G4CC........................................................................................................... 169 1: TPD4 Touch Panel File .................................................................................................... 169 2: Source Code .................................................................................................................... 170 3: G4CC (Computer Control) Configuration: ........................................................................ 170 Using configCC.exe to Configure G4CC ....................................................................... 170 Setting Programming Properties: Computer Control Buttons........................................ 171 Running the G4CC Application ..................................................................................... 172 Appendix B: G4 Panel Builder .............................................................................173 Creating a New Project Using G4 PanelBuilder ............................................................ 173 Importing G4 PanelBuilder Templates .......................................................................... 174 Creating G4 PanelBuilder Templates............................................................................ 174 Template Requirements....................................................................................................... 175 Optional Template Elements................................................................................................ 175 Rules for Navigating A Template ......................................................................................... 176 Template Wide Conventions ................................................................................................ 177 Creating Navigation Elements....................................................................................... 177 Creating Placeholder Elements..................................................................................... 179 Placeholder Element Conventions ...................................................................................... 180 Creating Preview Images .............................................................................................. 181 Alternate Screen Names for Template Elements................................................................. 181 TPDesign4 Touch Panel Design Program ix Table of Contents Element Specific Conventions ...................................................................................... 182 Navigation Element Conventions ........................................................................................ 182 Sub-Navigation Element Conventions .............................................................................. 183 Splash Element Conventions .............................................................................................. 183 Device Element Conventions .............................................................................................. 184 Feature Element Conventions ............................................................................................. 184 Sub-Feature Element Conventions ..................................................................................... 185 Appendix C: TakeNote ......................................................................................... 187 Introduction ................................................................................................................... 187 USB Stick Specifications ..................................................................................................... 187 Pre-Configuration Procedures....................................................................................... 188 Updating AMX Hardware and Software ............................................................................... 188 Developing a TPD4 project with G4CC and TakeNote Support........................................... 188 Modifying the Source Code on your Master......................................................................... 189 Configuring Computer Control ............................................................................................. 190 Running the Computer Control Application.......................................................................... 191 Running the TakeNote Application....................................................................................... 191 x TPDesign4 Touch Panel Design Program TPDesign4 Program Overview TPDesign4 Program Overview The TPDesign4 Touch Panel Design program is designed to assist you in creating a state-of-the-art touch panel interface for AMX's new G4 Level touch panels (including the Modero line and the NXP-TPI/4 Touch Panel Interface - see the Supported Panel Types section on page 2 for details). Many of the concepts for this program will be familiar to users of TPDesign3, however, this program takes giant strides ahead in terms of ease of use, speed, functionality and conformance to Windows standards (except in those rare instances when a departure from Windows standards supports customized functionality). This instruction manual contains instructions for using TPDesign4, and describes the main elements of the program. For more detailed program reference-type material (i.e. descriptions of each menu, toolbar, dialog and options), refer to the on-line help. Click the AMX.COM toolbar button on the help window to visit the WWW.AMX.COM web site. Click the TPD4 On-line Help toolbar button on the help window to launch the on-line version of the help file (recommended). Supported Operating Systems • Windows 2000® (Service Pack 3 or greater) • Windows XP® Professional (Service Pack 1 or greater) PC Requirements • Pentium 233 MHZ processor (minimum requirement); 300 MHZ or faster recommended. • 75 MB of free disk space (minimum requirement); 150 MB recommended. • 128 MB of installed memory (RAM). • Minimum (VGA) screen resolution of 800x600. Other PC requirements • Windows-compatible CD-ROM drive. • Windows-compatible mouse (or other pointing device). Note: If the scroll wheel on your Microsoft® IntelliMouse® doesn’t work with TPD4, try downloading the latest IntelliMouse drivers from Microsoft. TPDesign4 Touch Panel Design Program 1 TPDesign4 Program Overview Touch Panel Pages - Overview The area of display on an AMX touch panel is called a page. Pages can be designed as a control panel. Use TPD4 to create Pages, add buttons, bargraphs, sliders, and graphics, and designate the control functions for each object. You can create up to 500 pages and 500 popup pages as needed to achieve your functional goals. Like the name suggests, popup pages are smaller pages that "pop" up in their own window, above the actual page file that is displayed on the panel. Popup pages are similar to regular pages in that they contain buttons, but are different in that you can assign a border style. Use popup pages in conjunction with regular pages to design and create an impressive and intuitive user-interface for your touch panels. When you create multiple pages, you must link them (via page flips) to be able to go from one page to another. Do this with a page-flip attribute assigned to the specific button. As a basic example, you might have a main page with a one button labeled "Audio", one labeled "Video", and any number of others. You could set the "Audio" button to cause a page flip to another page containing buttons specific to selecting a piece of audio equipment to control (i.e. several buttons labeled CD, DVD, DAT, etc). Each of these buttons could in turn cause a page flip to another page containing buttons specific to controlling the selected piece of audio equipment (i.e. Play, Pause, Stop, etc). FIG. 1 An example of a basic page flipping Supported Panel Types TPDesign4 currently supports the following AMX (G4) touch panel types: • MVP-7500: 7.5" Modero ViewPoint (wireless) Touch Panel • MVP-8400: 8.4" Modero ViewPoint (wireless) Touch Panel • NXD/NXT-CV7: 7" Modero Touch Panel (with video capabilities) • NXD/NXT-CV10: 10" Modero Touch Panel (with video capabilities) • NXT-CV10/PB: 10" Modero Touch Panel (with video capabilities and external pushbuttons) • NXD/NXT-1200V: Enhanced 12" Modero Touch Panel (with video capabilities) • NXD/NXT-1200VG: Enhanced 12" Modero Touch Panel (with video capabilities) • NXD/NXT-CA12: 12" Modero Touch Panel • NXD/NXT-CV12: 12" Modero Touch Panel (with video capabilities) • NXD/NXT-1500VG: Enhanced 15" Modero Touch Panel (with video capabilities) • NXD/NXT-CA15: 15" Modero Touch Panel • NXD/NXT-CV15: 15" Modero Touch Panel (with video capabilities) • NXD/NXT-1700VG: Enhanced 17" Modero Touch Panel (with video capabilities) 2 • NXD/NXT-CV17: 17" Modero Touch Panel (with video capabilities) • NXP-TPI/4: Touch Panel Interface 4 TPDesign4 Touch Panel Design Program TPDesign4 Program Overview The nomenclature " NXT" indicates the table-top (tilt) model, and "NXD" represents the wall-mount version. Video Capabilities for Modero Panels Video Capable Modero Panels all support Composite video inputs. These include: • NXT/NXD-CV7 • NXT/NXD-CV12 • NXT/NXD-CV15 • NXT/NXD-CV17 Video Capabilities for Enhanced Modero Panels Video capable Enhanced Modero Panels all support Composite, Component/RGB and Streaming video inputs. These include: • NXT/NXD-1200VG • NXT/NXD-1500VG • NXT/NXD-1700VG Supported Screen Resolutions The application supports 24-bit RGB color at the following screen resolutions (based on Panel definition file information): • 1280x1024 • 1024x768 • 800x600 • 640x480 TPDesign4 provides scrolling if a Design View is larger than the available visible work area. Supported Image File Types TPDesign4 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) TPDesign4 Touch Panel Design Program 3 TPDesign4 Program Overview True Type Font Support Since G4 panels have the ability to decode and display Windows True Type Font files (TTF), TPDesign4 directly utilizes TTF files. Fonts are presented in the Properties Control window (States tab), as well as the Button Selection/Draw toolbar and the Add Page and Add Popup Page dialogs. The TTF files listed represent those TTF files installed in Windows with their available point sizes. WebUpdate The AMX WebUpdate program is a stand-alone application that communicates with the AMX website, allows a user to select from a list of available AMX Software programs to choose for updating, determines the latest version of the selected applications, returns a listing of available updates, allows a user to download the selected installation files, and upon request, launches the installation of those downloads. The WebUpdate application is not installed by TPDesign4, and must be installed separately. If not found, TPDesign4 will prompt you to download the application from www.amx.com. Select Help > Web Update to launch this application. Refer to the WebUpdate on-line help for details and instructions. G4 PanelBuilder G4 PanelBuilder is a stand-alone application (installed separately) from AMX that allows you to quickly create TPDesign4 projects for G4 touchpanels, using either pre-fabricated templates from AMX, or user-designed templates. The G4 PanelBuilder application is designed to do the bulk of the basic layout and navigational design of a touch panel design. TPD4 is required to complete the project by specifying channel mapping information, and to generally fine-tune the project as needed. The G4 PanelBuilder setup application is available for download from www.amx.com (Dealers > Tech Center > Downloadable Files). Although G4 PanelBuilder is installed separately, it is fully integrated with TPDesign4. For example, the File > New From G4 PanelBuilder option launches the G4 PanelBuilder application to allow you to create a new TP4 project. Use the set of options in the File menu to access the key functions of the G4 PanelBuilder application: Click File > New From G4 PanelBuilder to create a new TP4 panel project using G4 PanelBuilder. Click File > Import G4 PanelBuilder Template to import an existing PanelBuilder template file (*TPT) into TPDesign4 as a starting point for your panel design. Click File > Export G4 PanelBuilder Template to export the active TP4 project as a PanelBuilder Template file (*.TPT). 4 TPDesign4 Touch Panel Design Program TPDesign4 Program Overview Note that the File menu options relating to G4 PanelBuilder are disabled if G4 PanelBuilder is not installed. For details on using G4 PanelBuilder, refer to the Appendix B: G4 Panel Builder section on page 173. G4 PanelPreview G4 PanelPreview is a stand-alone application (installed separately) from AMX that allows you to preview TPDesign4 projects for G4 touchpanels. To preview your panel project, select Panel > Send To G4 PanelPreview (or click the toolbar button) to launch the G4 PanelPreview application, where you can preview the project and simulate push and release of buttons, (including multi-state and bargraph buttons) via the mouse and keyboard on your PC. The G4 PanelPreview application is available from www.amx.com, and must be installed in order to activate this menu option. Refer to the G4 PanelPreview online help file for details. TPDesign4 Work Area The TPDesign4 work area (FIG. 2) comprises several main components: Title Bar Menu Bar Design View Windows Properties Control Window Toolbars Workspace Navigator Window State Manager Window Status Bar FIG. 2 TPDesign4 Work Area TPDesign4 Touch Panel Design Program 5 TPDesign4 Program Overview In its default configuration, from top to bottom, left to right, the work area main components are: TPDesign4 Work Area Components Item Description • Title Bar Lists the name of the active Project file. • Menu Bar Contains the main menu options (File, Edit, Panel, Page, Button, States, Layout, View, Window, and Help). • Toolbars You can choose which toolbars to show in the workspace via the View > Toolbars sub-menu. Click View, then click in the checkboxes to select/de-select the listed toolbars (including custom toolbars). If a toolbar has a check next to it in the sub-menu, then it is displayed. These settings are saved, so they'll apply the next time the application is launched. • Workspace Navigator Contains two tabs: The Pages tab contains a tree structure representing all open projects, and their pages and popup pages. Use the Pages tabs to open/edit the pages / popup pages in each project. The Function Maps tab allows you to view/edit the function codes associated with each page. • Design View Windows Each Design View Window represents a Touch Panel pages or popup page. Note that a MDI tab is displayed for each opened page. Use the View > MDI Page Tabs option to toggle the MDI page tabs. When this option is enabled, a tab is displayed for each open page. The page tabs normally appear along the bottom edge of the Design View window area, but can be moved, toggled or modified via the MDI tabs context menu (right-click inside any of the tabs to open). Note: TPDesign4 will display up to a maximum of 10 page tabs. If you open more than 10 pages, the tabs automatically disappear. • Properties Control Window Contains three tabs: the General tab allows you to view/edit general (non-state oriented) button properties, the Programming tab allows you to edit program-related parameters, and the States tab allows you to view/edit button state information. • State Manager Window Displays each state of the selected button as a thumbnail image in this window. The State Manager window allows you to view/edit the various states of a selected button. • Status Bar Located along the bottom edge of the application window, the Status Bar can show the current XY cursor position, and (for the button the mouse is over): Channel code, Address code, Level code, button size, panel revision, Feedback and Initial page file target information. The status bar also indicates the status of your connection to the NetLinx Master. Refer to the online help for detailed descriptions of each menu item and toolbar button. 6 TPDesign4 Touch Panel Design Program TPDesign4 Program Overview Toolbars All toolbars in TPDesign4 are dockable, so they can be arranged within the application window. To undock any toolbar, double-click anywhere inside the toolbar (but not on a toolbar button). Doubleclick again to dock the toolbar. To move the toolbar, click and drag using the handle (the single vertical bar) at the far-left side of the toolbar. To view a brief description of each toolbar button, place the mouse cursor directly over a button, without clicking. Try placing the Main toolbar vertically, along the right side of the Workspace Navigator. This configuration is especially efficient in terms of cursor movement back and forth between the toolbar buttons and the Design View Window(s). Design View Windows FIG. 3 Example Design View Window (with function codes showing) Design View windows represent pages or popup pages in the panel file you are creating. They provide a canvas upon which you may place buttons of any size that will fit within the confines of the windows. An enforced limit of 15 Design View windows can be open at any time. If you should attempt to exceed that number, the page or popup page that is the oldest will be automatically closed. No data will be lost through this action, as only the view to the data is closed. Usually from 1 to 10 windows open at a time is the maximum number that is practical to work with. Since Design View windows represent the pages on the panel themselves, Design Views that represent pages are not resizable. Popup pages are resizable through the Properties Control by adjusting their Left, Top, Width or Height properties. Alternatively, you can set their size and dimensions manually by first enabling the Show Popup Pages option in the Page menu. This option opens the Select Popup Pages to Show dialog, where you can select the TPDesign4 Touch Panel Design Program 7 TPDesign4 Program Overview Popup Page that you want to display on the page. Once the Popup is displayed on the page, you can click and drag to resize and position it manually. Use the View > MDI Page Tabs option to toggle the page tabs. When this option is enabled, a tab is displayed for each open page. The page tabs normally appear along the bottom edge of the Design View window area, but can be moved, toggled or modified via the MDI tabs context menu (right-click inside any of the tabs). TPDesign4 will display up to a maximum of 10 page tabs. If you open more than 10 pages, the tabs automatically disappear. Right mouse click anywhere within a Design View window to open the Design View context menu. This context menu contains shortcuts to many key design tools. Select Display from the Design View context menu to access the Display sub-menu, containing options that allow you to select which state of a selected button to display in the Design View. Select Layout from the Design View context menu to access the Layout sub-menu, containing options for layout/design control (send to front/back, align, center, etc). This menu is identical to the Layout menu, accessible from the main menu bar. Workspace Navigator Window The Workspace Navigator (FIG. 4) is typically located on the left side of the screen (although you may move it anywhere you like) and is used to open the pages / popup pages in the file, and to view/ edit the function codes associated with each page. The Workspace Navigator contains two tabs: Pages Function Maps Pages tab Function Maps tab FIG. 4 Workspace Navigator Window 8 TPDesign4 Touch Panel Design Program TPDesign4 Program Overview Workspace Navigator - 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, in the Workspace Navigator (FIG. 5). Use the Workspace Navigator to view/open and rename panel pages. Each Project is represented by a folder (each one with a different colored panel icon): FIG. 5 Workspace Navigator - Pages Tab Note that each Project folder contains two folders: Pages and Popup Pages. Click the + symbol next to the folders, or double-click on the folders to view the pages and popup pages they contain. In the Pages tab of the Workspace Navigator you will see that there are two panel level folders, one for Pages and one for Popup Pages. Inside the Popup Page folder you may also see additional folders. These folders represent Popup Page Groups, and the presence of a Popup Page in one of these folders indicates that the particular Popup Page belongs to that group. Popup Pages can belong to only one group at a time, and of course they can live outside of any group at the same level as the group folders (See “Working With Popup Pages” on page 71.) Right-click anywhere within the Pages tab to access the Workspace Navigator context menu. There are also 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 Navigator You can open a page or popup page in the Workspace Navigator by double-clicking on the page. If you have a button or buttons copied into the Windows clipboard you can also single click on any page or popup page, then paste the buttons into that page without having to open the page. You can delete a page or popup page (as long as it is not the only page in the panel file) by single clicking on the page and clicking the delete key, the delete menu command or the delete toolbar button. You can have up to 15 Projects open at any time. TPDesign4 Touch Panel Design Program 9 TPDesign4 Program Overview Renaming Pages via the Workspace Navigator You can rename a Page or Popup Page by single clicking on the Page or Popup Page name, then single clicking again. This will allow for in-place editing of the name value for the item. Edit Focus When the Workspace Navigator has an item highlighted, that item has the focus and menu's and toolbar buttons will act on that item. When the Workspace Navigator only has an item that is selected in grey, the commands and toolbar buttons will act on whatever is selected in the Design View. Certain cut, copy and paste items may be limited depending on what you have in the Windows clipboard and which item you currently have selected (see Cutting, Copying and Pasting for more details). A tiny arrow in the Workspace Navigator indicates which Project and page (or popup page) is currently in focus (the one you are currently working on in the current Design View). See Edit Focus for more details. Drag and Drop Support 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. Dragging a Popup Page onto another Popup Page is not supported. Workspace Navigator - Function Maps Tab Click the Function Maps tab (at the bottom of the Workspace Navigator window) to view the Function Code Map (FIG. 6). FIG. 6 Function Code Map 10 TPDesign4 Touch Panel Design Program TPDesign4 Program Overview The Function Code Map is a representation of the Channel codes, Address codes, Level codes, String Outputs and Command Outputs utilized in the panel file, displayed in a hierarchical tree format in the Function Map tab of the Workspace Navigator window. This list is sorted by Port, and within Port by Code. If codes have been assigned to any of the panel's sensors (light, motion, battery, and/or cradle), they will now appear in the Function Map and can be modified there just like button function codes can be. You can use the Function Code Map to delete codes as well as drag and drop items from one port to another, within the primary folder the selected item belongs to (i.e. Channel Codes, Address Codes, Level Codes). For example, 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. Neither String or Command Outputs support any type of drag and drop operations. Select an item in the tree and then left click to edit the code value. While you can edit the Channel, Address and Level codes via these folders, you cannot edit String or Command Outputs the same way. These can only be edited via the General tab of the Properties Control window. Double-click on the item to open the associated page (or popup page) and place the edit focus on that item. Setting the Address, Channel or Level port to the setup port provides a list of predefined actions. Some of the actions may be hardware dependent, in which case do nothing. Workspace Navigator Context Menu Right mouse click anywhere within the Pages tab of the Workspace Navigator to open the Workspace Navigator context menu, containing various options relating to creating and displaying Pages and Popup Pages in the active Design View window. Properties Control Window The Properties Control 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, popup page and button properties, and to view/edit the states information associated with each element in your project. Select View > Properties (or click the toolbar button) to display the Properties Control window. Note that the title bar of the Properties Control window indicates which element of the workspace is currently selected. If one or more buttons are selected in the Workspace, the title bar of the Properties Control window indicates the number of buttons selected (the example below shows that only one button is selected). Also note that the button name and type are displayed in the text box above the tabs (in the example below, the selected button is named "pause", 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. Selecting a button from this list is TPDesign4 Touch Panel Design Program 11 TPDesign4 Program Overview the same as selecting it in a Design View window: the edit focus shifts to the selected button, and the Properties Control window reflects the properties of the newly selected button. The Properties Control contains three tabs: General tab Programming tab States tab General tab Programming tab States tab FIG. 7 Properties Control Window Properties from the Properties Control window can be dragged and dropped onto the Design View (to Buttons on the main Page, or the Page itself). The selected property or state is automatically applied to all states of the drop target (whether a button or the page itself). 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 Control window (all tabs) is that you can click on any value in the right column, and drag it to another field. When you release the mouse button, the value is copied to the new location. With an item selected, 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, TPDesign4 alerts you with an error dialog, and the original value is left unchanged. All position (X-Y) values in TPDesign4 are zero-based (measured in pixels), meaning that the upper-left corner of each page is represented by the X-Y value of 0, 0. 12 TPDesign4 Touch Panel Design Program TPDesign4 Program Overview Properties Control Window - General Tab Click the General tab (at the top of the Properties Control window) to set/edit general properties for all button types. The General tab contains a table that lists the button properties for the selected button type. To edit any of the listed button properties, click on an item in the right column to activate that field for editing. Depending on the item selected, you can either set the item manually, select from a drop-down menu, or both. One feature of the Properties Control window (both tabs) is that you can click on any value in the right column, and drag it to another field. When you release the mouse button, the value is copied to the new location. With an item selected, 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, TPDesign4 alerts you with an error dialog, and the original value is left unchanged. Properties Control Window - Programming Tab Click the Programming tab (at the top of the Properties Control window) to view/edit programming-related information for the selected button. This information is also displayed in a table format. One feature of the Properties Control window (both tabs) is that you can click on any value in the right column, and drag it to another field. When you release the mouse button, the value is copied to the new location. With an item selected, 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, TPDesign4 alerts you with an error dialog, and the original value is left unchanged. Properties Control Window - States Tab Click the States tab (at the top of the Properties Control window) to view/edit the state information for each state associated with the selected button. This information is displayed in a table format. The State tab contains a table that lists the properties for each state for the selected button. To edit any of the listed button properties, click on an item in the right-hand column to activate the field. Depending on the item selected, you can either set the item manually, select from a dropdown menu, or both. Using the Apply To All option The Apply To All toggle button is located at the bottom of the Properties Control window. Use the Apply to All option to set button properties to edit multiple buttons simultaneously. If the Apply To All button is not depressed, and you select more than one button to act on, the Prev or Next buttons will activate on the Properties Control window. Also note that while you have multiple buttons selected, only one of them has the edit focus at any given time. Use the Prev and Next buttons to cycle through the selected buttons to view each button's properties in the Properties Control window. The button represented in the Properties Control window is the one with edit focus. All modifications are always on the button with the edit focus. If the Apply To All button is depressed 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. You TPDesign4 Touch Panel Design Program 13 TPDesign4 Program Overview may also notice that one or more (if not all) of the property values in the grid are blank. 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. Typing in or changing a value in any property box will immediately affect all selected buttons, provided that the change can be applied to them all. In the event that a value is appropriate for one (or more) buttons but inappropriate for others, you will see a message that states that the value was only applied to those buttons for which it was valid. This Apply To All option works on multiple button selections, but not on multiple states for a single button. To make state-oriented changes across multiple states, select the states that you want to edit and they will appear listed in the States tab of the Properties Control window. To make changes that affect all states on a button at once, use the All States option in the States tab (located directly above the other listed states for the selected button). Using the Prev and Next buttons The Prev and Next buttons, located at the bottom of the Properties Control window (next to the Apply to All option) are activated only when more than one button is selected on a page, and the Apply To All option is not depressed (in its active state). These buttons allow you to quickly edit the selected buttons individually. Hold down the Shift key and click to select multiple buttons. Note that when you have multiple buttons selected, only one of them has the edit focus at any given time. Use the Prev and Next buttons to cycle through the selected buttons to view each button's properties in the Properties Control window. The button represented in the Properties Control window is the one with edit focus. All modifications are always done on the button with the edit focus. State Manager Window The State Manager window(FIG. 8) 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. Each state of the selected button is displayed as a thumbnail image in this window. To display the State Manager window, select View > State Manager. FIG. 8 State Manager Window The State Manager interacts with the Properties Control window to allow the visual aspects of a page, popup page or button to be set. Select a Page, Popup page or button to view the state or states associated with it. Double-click on any thumbnail in the State Manager window to view/edit the properties for the selected state, in the Properties Control window (States tab). The State Manager window allows the viewing and modification of individual states, and supports full Cut, Copy, Delete, Insert, Replace and Paste as well as drag and drop capabilities. 14 TPDesign4 Touch Panel Design Program TPDesign4 Program Overview Right mouse click on any thumbnail 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. For Multi-General buttons, the different states (up to 256) are used to animate a button from Off to On (Range Time Up in the States tab), and back again to Off (Range Time Down in the States tab). 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-Bargraph buttons, the level will directly reflect the displayed state. The user will be able to 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. Note that because the thumbnails displayed in the State Manager window are scaled versions of the button images, some visual distortion may occur. This is only a result of the scaling, and does not represent distortion on the button itself. 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. State Manager Drag-and-Drop Menu To access the State Manager Drag-and-Drop menu, select a button state (thumbnail view), and hold the mouse button down while dragging the selected state to another location in the State Manager window. 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. A left mouse button drag-and-drop between states, prior to the first state, or after the last state executes a move operation, unless all states have been selected. A right mouse button drag-and-drop over a state presents a drag-and-drop menu with options to "Copy over…", "Insert copy…", "Move…", or "Cancel". TPDesign4 Touch Panel Design Program 15 TPDesign4 Program Overview A right mouse button drag-and-drop between states, prior to the first state, or after the last state will present a drag-and-drop menu with options to "Insert copy…", "Move…", or "Cancel". For all other button types: A left or right mouse button drag-and-drop over a state will execute a replace operation. A left or right mouse button drag-and-drop between states, prior to the first state, or after the last state is disallowed. Transfer Status Window The Send To Panel and Receive From Panel dialogs place the requested transfer into a queue, the status of which is displayed in the Transfer Status window, which may be docked/undocked from the main application window. This window displays the following data for each transfer: Status - The status bars indicate the progress of each file in the transfer, and the overall status of the transfer. Device - This column gives the Device # and a description of the target/source device. Project - This column indicates the name of the Project the files belong to. Transfer Status Context Menu Right mouse click anywhere in the Transfer Status Window to open the Transfer Status context menu, containing options for establishing a connection to the NetLinx Master and panels, and for transferring TP4 files to the panels. Note that this context menu is identical to the Transfer Menu, accessible through the main menu bar. Button Preview Window Select View > Button Preview to open the Button Preview window. Like the other windows in TPDesign4, the Button Preview window is fully dockable, but initially it opens undocked. Doubleclick inside the title bar to dock the window. The Button Preview window displays a preview of the selected button. Initially the button is shown in its Off state. Button Preview is not available for Joystick Buttons. This window includes three command buttons: • Disable • Click the disable button to disable the button preview, but not close the Button Preview window. Click again to enable the preview. • Mute • Click to Mute any sounds associated with this button. • Push • Click the Push button to simulate a push on the selected button. This allows you to visually preview the On/Off states (and all states in between, for multi-state buttons). Right-click inside the preview area of the Button Preview window to access the Button Preview context menu. 16 TPDesign4 Touch Panel Design Program TPDesign4 Program Overview Button Preview Context Menu Right-click inside the preview area of the Button Preview window to access the Button Preview context menu: • Size Click to open the Size fly-out menu, where you can specify the size of the preview image (25%, 50%, 75%, 100%, or Auto). The default size setting is Auto, which automatically scales the preview image to fit the Button Preview window (which is also scalable). These options only affect the size of the preview image, not the button itself. • Background Click to open the Background fly-out menu, where you can specify the way that the background color in the button preview windows appears. Depending on the colors used, you may want to experiment with these options to help you view the various aspects of the button (text, icon and/bitmap). • None no background color is displayed (so it appears white). • Checkerboard renders the background in a checkerboard pattern (helpful when dealing with transparent buttons). • Page Fill Color renders the background in the same color as was assigned to the page containing the selected button. Magnifier Window The Magnifier window allows you to magnify a given area of a design view for temporary viewing in a separate floating window, without zooming the entire design view. Select View > Magnifier Window (or click the toolbar button) to access the Magnifier Window. Right-click inside the Magnifier window to access the Magnify Control context menu, where you can select a zoom factor from 2 to 8 times actual size. This floating window is resizable and dockable. Working With Dockable Windows All windows in TPDesign4 are fully dockable. Dockable windows can be re-arranged within the application window. They automatically snap to the top, bottom, right or left side of the application window, or along the edges of other docked windows. To dock/undock a window, double-click inside the window's title bar. The dockable windows in TPDesign4 are: Design View Properties Control Workspace Navigator State Manager Button Preview Magnifier Window TPDesign4 Touch Panel Design Program 17 TPDesign4 Program Overview Moving, Docking and Resizing Dockable Windows All of the windows (Design View, Properties Control, Workspace Navigator, State Manager and Button Preview windows) in TPDesign4 are fully dockable. To move the windows, click on the title bar and drag and drop the window into place. Dockable windows automatically snap into place once they are positioned near an available docking area (along the edges of the application window, or along the edge of another dockable window. To dock these windows, drag the window to reposition it next to any border or window frame and the window will automatically snap to the nearest border. To stretch the windows, click on any border and drag the border either vertically or horizontally. To resize the windows, 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. Toggling the Windows Each of the windows (Design View, Properties Control, Workspace Navigator, State Manager and Button Preview windows) can be toggled on/off via the options in the View menu. Select or de-select each window to toggle by checking or un-checking the window listings in this menu (checked = window is on/displayed). Status Bar There are two views available for the status bar (located along the bottom edge of the application window). The default view, and the secondary view which is available via a double-click anywhere on the status bar. All position (X-Y) values in TPDesign4 are zero-based (measured in pixels), meaning that the upper-left corner of each page is represented by the X-Y value of 0, 0. In the default position (shown below) it shows the current XY cursor position, and (for the button the mouse is over): Location, Size, and FdBk. FIG. 9 Status Bar - default position Cursor: Displays the current X-Y cursor position. Loc: Displays the X-Y location of the button that the cursor is over (relative to the upper-left corner of the button). Size: Displays the size of the button that the cursor is over. FbBk: Displays the type of feedback associated with the button that the cursor is over. 18 TPDesign4 Touch Panel Design Program TPDesign4 Program Overview In the secondary position (FIG. 10) it shows the current XY cursor position, and (for the button the mouse is over): Location, Address code, Level code, Feedback and Initial page file target. Doubleclick anywhere on the status bar to view this secondary position. FIG. 10 Status Bar - secondary position Cursor: Displays the current X-Y cursor position. Ch: Displays the Channel code (port number:channel code) 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. Lvl: Displays the Level code (port number:level code) associated with the button that the cursor is over. The status bar also reflect the status of the connection to the NetLinx Master as follows: not connected connected to an unsecured master connected to a secured but unencrypted master connected to a secured and encrypted master FIG. 11 Status bar icons reflect the status of the connection to the NetLinx Master Print Preview Window Select File > Print Preview to display a preview of the pages and popup pages in the active project, as they will appear when printed. Each page and popup page in the project is printed one per page. The printed output maintains a constant scaling factor across all pages, with the image centered on the printed page. 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. 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 File > Print and File > Print Preview options invoke a message alerting you to install a printer. TPDesign4 Touch Panel Design Program 19 TPDesign4 Program Overview Workspace Context Menu Right mouse click on the title bar of the Workspace Navigator window, Properties Control window, State Manager window, Button Preview window, or in any empty area of the workspace to open the Workspace context menu. This context menu contains shortcuts to key toolbars and dialogs. Click to display any of the following items via this context menu: • Workspace: Hide/show the Workspace Navigator window. • Properties: Hide/show the Properties Control window. • State Manager: Hide/show the State Manager window. • Button Preview: Hide/show the Button Preview window. • Power Assign: Hide/show the Power Assign dialog. • Paste Controls: Hide/show the Paste Controls dialog. • Errors and Warnings Report: Hide/show the Errors and Warnings Report. • Main Toolbar: Hide/show the Main Toolbar. • Button Selection/Draw Toolbar: Hide/show the Button Selection/Draw Toolbar. 20 • Drawing Toolbar: Hide/show the Drawing Toolbar. • Drawing Assist Toolbar: Hide/show the Drawing Assist Toolbar. TPDesign4 Touch Panel Design Program TPDesign4 Project Files TPDesign4 Project Files Overview TPD4 Project (or Panel) files are created in the folder specified in the application preferences, unless you explicitly choose to save them in another location. Each page / popup page name is limited to 50 characters and must be unique within their respective panel files in order to be accepted by the program. All name collision checks in the program are case insensitive. You can have up to 15 Projects open at any time. Drag & Drop TPDesign4 project files (*.TP4) can be dragged from a Windows Explorer window onto the TPDesign4 workspace to open it in TPD4 automatically. Creating a New Project Using G4 PanelBuilder The G4 PanelBuilder application (installed separately) provides a quick alternative to creating touch panel projects from scratch. Use this option to launch the G4 PanelBuilder application and create the basic layout and navigation of your panel file. Refer to the Appendix B: G4 Panel Builder section on page 173 for details. Using The New Project Wizard TPDesign4 includes a New Project Wizard, to quickly guide you through the process of setting up a new project. To launch the New Project Wizard, select File > New (or click the New Project toolbar button). The New Project Wizard is designed to be simple and intuitive. Simply fill in the fields in each New Project Wizard dialog, and click Next to proceed to the next dialog. Click the Finish button in the last dialog in the wizard to close the wizard. At this point, the project is created with one generic page, and is ready for you to start adding pages, popup pages and buttons. When creating a new Project file, avoid using inappropriate file name characters. Refer to the Inappropriate File Name Characters section on page 30 for details. The New Project Wizard steps you through the process of creating a new Project file (also known as a Panel file), complete with a start page. Use the New Project Wizard as a shortcut to starting new TPDesign4 projects. To launch the New Project Wizard, select File > New. To cancel the wizard at any point in the process, click Cancel. The New Project Wizard consists of up to three dialogs: 1. The first dialog to appear (New Project Wizard - Step 1) contains fields to allow you set up the basics of your new project: • Job Name: Enter a name for the new project. • Panel Type: Click the down-arrow to view a list of supported panel types • Resolution: Click the down-arrow to select the target resolution for the project. TPDesign4 Touch Panel Design Program 21 TPDesign4 Project Files • Use System Generated File Name: Click this checkbox to use a System Generated File Name for this project. Fill out this information and click Next to proceed. Click Finish to close the wizard. If you close the wizard after step 1, you will have created a project with a single page. Every project created will have at least one page. You can add pages manually via the Panel > Add Page command. 2. The next dialog in the wizard (New Project Wizard - Step 2) contains fields for SystemGenerated File Names. If the Use System Generated File Names option (in the Step 1 dialog) is not selected, this dialog is skipped since the information entered here would not apply. • Designer: Enter the name of the project designer in this field. • Dealer ID: Enter the Dealer ID in this field. • Sales Order: Enter the Sales Order number in this field. • Purchase Order: Enter the Purchase Order number in this field. • Revision: Enter the Revision identifier in this field. • Job Comments: Enter any project-related comments in this field. Fill out this information and click Next to proceed. If you choose not to populate one or more of these fields, they will not be included in the System Generated File Name. 3. The last dialog in the wizard (New Project Wizard - Final Step) contains fields for setting up the initial touch panel page in the project: Name: Enter a name for the page. Colors (Page background and Text): Click the browse button (...) to open the Colors dialog, where you can select the colors for the Page Background and Page Text. Font: Click the down arrow to select the Page Font, from a list of all available fonts on your PC. Font Size: Click the down arrow to select the Page Font size. Fill out this information and click Finish to exit the New Project Wizard. When you finish the New Project Wizard, note that the new project appears in the Workspace Navigator window (Pages tab). The initial page is listed under the Pages folder, and has the edit focus. You can change the target panel type for any existing panel file via the File > Save as Different Panel Type option. Use the Panel > Send to G4 PanelPreview option to preview the resulting panel file in the G4 PanelPreview application. 22 TPDesign4 Touch Panel Design Program TPDesign4 Project Files Setting Project Properties Select File > Project Properties to open the Project Properties dialog. This is a multi-tab dialog containing various options that allow you to view and edit properties of both the active TPD4 Project, and the target touch panel. Depending upon the capabilities of the panel type selected for this project, some options described in the following sections may not enabled. Project Information tab: Includes Job Name, Designer, Dealer ID, Sales Order, Purchase Order, Revision, Creation Date, Revision Date, Last save date, Created with Build Number, File Name, Job Comments, and the Use system generated filenames option. Panel Setup Information tab: Includes Startup, Wakeup and Sleep strings, Power-up Page, and Feedback Blink Rate. Sensors tab: Includes Channel and Port information for Light, Motion and Battery Levels sensors. IR Emitters and Receivers tab: This tab only appears if you have selected a panel that supports either IR receivers, emitters, or both. The NXD/T-CV7 have AMX IR receivers The MVP-7500/8400 have AMX and User-defined IR emitters The options in this tab allow you specify channel port assignments for AMX IR Emitters, User IR Emitters and AMX IR Receivers. The options that are available in this tab depend on the IR capabilities of the target touch panel for this project. For example, the Modero CV7 panel has an IR receiver, but does not have an IR emitter. In this case, the only field that is enabled in this tab would be the AMX IR Receivers fields, where you could specify a channel port assignment for either 38 Hz or 455 Hz IR reception. Each tab of the Project Properties dialog is described in the following sections: Project Properties dialog - Project Information tab Use the options in the Project Information tab of the Project Properties dialog to view/edit file information associated with the active project file. The information in this tab was set up when the project was created, in the New Project Wizard. These items represent the various components of the System-Generated File Name. If the Use System-Generated File Names option was not selected in the New Project Wizard, these fields will be blank. The options in this tab include: • Job Name: This editable field displays the current Job Name associated with this project. • Designer ID: This editable field displays the current Designer associated with this project. • Dealer ID: This editable field displays the current Dealer ID (number) associated with this project. • Sales order: This editable field displays the current Sales Order (number) associated with this project. • Purchase order: This editable field displays the current Purchase Order (number) associated with this project. • File revision: This editable field displays the current Revision (number) associated with this project. TPDesign4 Touch Panel Design Program 23 TPDesign4 Project Files • Creation date: This read-only field displays the creation date for this project. • Revision date: This read-only field displays the date of the current revision of this project. • Last save date: This read-only field displays the last date on which this project was saved. • Created with build number: This read-only field displays the build number of the version of TPDesign4 used to create this project. • File name: This read-only field displays the full path and disc filename of the project. • Job comments: This editable field displays any comments that were added in the New Project Wizard. • Protection: Click the down-arrow to select one of three levels of password protection for this project file: none- this is the default setting (no password protection). read-only - the next time this panel file is opened, the Enter Access Password dialog appears, prompting the user to enter the correct password in order to gain write access to the file. To simply view the file (as read-only), click on the Read-Only command button (in the Enter Access Password dialog). If the file is opened in read-only mode, the word "[Locked]" appears immediately to the right of the project name in the Workspace Navigator and no edits on the panel file are allowed. Also, files opened as read-only cannot be saved to another file name. locked - the next time the panel file is selected to open; the Enter Access Password dialog appears, prompting the user to enter the correct password to open the file. Note: These protection options are not Windows file attributes, and are only relevant within the context of the TPDesign4 application. • Password: Use this text field to enter the password (1 - 259 characters) to use if the file is set as either read-only or locked. Once the password has been typed, it must be re-typed in the Confirm text field. • Confirm: Use this text field to confirm the password by re-typing the password exactly as it was entered in the Password field. If the passwords don't match, a "Passwords do not match" message box is displayed. • Use system generated file names for this project: Click this option to apply system-generated filenames to this project. If the project was originally set up to use system-generated file names, then selecting this option will replace the original information with the updated information from this dialog. If system-generated file names were not used for the project, this information will be added on the next save. Project Properties dialog - Panel Setup Information tab Use the options in the Panel Setup Information tab to view/edit setup information associated with the active project. The options in this tab include: 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. This dialog identifies the panel that this project is designed for, and indicates it's screen resolution. The options in this tab include: 24 • Refresh Frequency Select the desired refresh frequency for the selected panel, from the drop-down list of supported refresh frequencies (based on the selected panel). • Panel Strings Use these three fields to specify text strings to appear on the panel, during these three conditions (Startup, Wakeup and Sleep). For example, if entered the string "Hello!" for the Wakeup string, the panel will display the message "Hello!" on wakeup. • Power up page Click the down-arrow to view a drop-down list of all pages currently saved in this project. Click to select the initial startup page for the panel. • Power up popups This read-only field indicates the Power-Up popup pages that will appear over the Power up page. TPDesign4 Touch Panel Design Program TPDesign4 Project Files • Inactivity page Click the down arrow to select which page to flip to after the specified period of inactivity (set on the touch panel). • Feedback blink rate If you are using blinking button feedback in your project, use this field to specify the blink frequency, in 1/10th-second increments (default = 5). Project Properties dialog - Sensors tab Use the options in the Sensors tab of the Project Properties dialog to view/edit light, motion and battery charge level sensor information associated with the active panel file. The options in this tab include: • Light Sensor: Use these fields to specify the Level and Channel port/code assignments for the on-board light sensor. • Motion Sensor: Use these fields to specify the Channel port/code assignments for the on-board motion sensor. • Battery Levels: Use these fields to specify the Level port/code assignments for the on-board battery charger. • Cradle Sensor Button (MVP panels only): Use these fields to set the Channel port/code assignments for the Cradle Sensor on MVP panels. The channel will be turned on when the panel is docked (either in the tabletop docking station or in the wall cradle). Note: The cradle sensor shares the same device number as the MVP panel. Project Properties dialog - IR Emitters and Receivers tab This tab is only present if the target panel selected for this project supports an IR emitter or an IR receiver. Use the options in this tab to view/edit port information associated with the active panel file for AMX 38KHz IR emitting and receiving, AMX 455KHz IR emitting and receiving, and up to two user-defined ports for IR emitting using custom IR files. The options that are available in this tab depend on the IR capabilities of the target touch panel for this project. For example, the Modero CV7 panel has an IR receiver, but does not have an IR emitter. In this case, the only fields that are enabled in this tab would be the AMX IR Receivers (38KHz and 455KHz) fields, where you could specify a channel port assignment for either 38KHz or 455KHz IR reception. The NXD/T-CV7 have AMX IR receivers, and the MVP-7500 and MVP-8400 have AMX and User-defined IR emitters, as well as a cradle sensor. The options in this tab include: • AMX IR Emitters (MVPs only): 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 MVP8400 panels. • User IR Emitters (MVPs only): 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 MVP8400 panels. • AMX IR Receivers (CV7s only) : 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 panels. The IR receivers and transmitters on G4 panels share the device address number of the panel. TPDesign4 Touch Panel Design Program 25 TPDesign4 Project Files Applying Password Protection to Your Project File TPDesign4 supports two levels of password protection for Project (.TP4) files: Read-only - the next time this Project file is opened, the Enter Access Password dialog appears, prompting the user to enter the correct password in order to gain write access to the file. The password is not required to open and view the file. Note that if a read-only file is opened without using the password, it cannot be saved under a new file name. Locked - the next time the panel file is selected to open; the Enter Access Password dialog appears, prompting the user to enter the correct password to open the file. If the password is not entered correctly, the file will not be opened at all. These protection options are not Windows file attributes, and are only relevant within the context of the TPDesign4 application. To apply password protection to the open Project file: 1. Select File > Project Properties to open the Project Properties dialog - Project Information tab. 2. Click the down-arrow next to Protection to select a level of password protection from the drop-down list (either read-only, locked or none). 3. Enter the password in the Password text field. Passwords can be from 1 to 259 characters in length. 4. Re-type the password in the Confirm field. If the passwords don't match, a "Passwords do not match" message box is displayed, in which case you'll need to re-enter the password, or reconfirm the password, or both. 5. Click Apply to save the changes and apply the specified password to the Project file. 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. Select File > Project Properties to open the Project Properties dialog. 2. In the Panel Setup Information tab, click the down arrow next to the Power up page field to display a list of all of the pages in this project. 3. Select the page that you want to be used as the Power-up page from this list. 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. Select File > Project Properties to open the Project Properties dialog. 2. In the Panel Setup Information tab, click the down arrow next to the Inactive page flip field to display a list of all of the pages in this project. 26 TPDesign4 Touch Panel Design Program TPDesign4 Project Files 3. 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. Creating a Screen Saver You can create a "screen-saver" for the panel as part of your project by using the Inactivity Page Flip option in the Panel Setup Information tab of the Project Properties dialog. 1. Select File > Project Properties to open the Project Properties dialog. 2. In the Panel Setup Information tab, click the down arrow next to the Inactive page flip field to display a list of all of the pages in this project. 3. 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. Converting TPD3 files to TPD4 TPDesign4 is backward-compatible with TPDesign3. However, project files that were created in TPDesign3 must be converted in order to be compatible with TPDesign4, for use with G4 panels. 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. The TPD Conversion Wizard steps you through the conversion process in three dialogs: 1. Step 1 of 3 (Select Source and Destination): In the first dialog, select the TPD3 project file that you want to convert (use the browse button to navigate to the desired file, via the Open dialog). Then click the down arrows next to Panel Type and Resolution to specify the target G4 panel for the project file. If you selected a panel that supports multiple resolutions (i.e. NXPTPI4), you can specify the target resolution for the project. A description and image of the selected panel is displayed. Click Next to proceed. 2. Step 2 of 3 (View Warnings and Substitute Fonts): The second 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, once the conversion process is applied. For example, if the target panel/resolution differs from the original target of the TPDesign3 file, you will see a PreConversion warning message indicating that scaling will occur. The conversion wizard handles most of these issues for you automatically. The lower list box indicates any fonts that were specified in the original TPDesign3 file, but that are not available to TPDesign4 (i.e. are not currently installed on your PC). For each unmatched font listed, you can select a substitute font to use instead. If all fonts used in the original file are still available, the message "No unmatched fonts" is displayed. 3. Step 3 of 3 (Finish): The final dialog in the wizard lists the selected file, the original panel/ resolution association, and the target panel/resolution. Following the conversion process, any warnings and/or errors encountered will be displayed in the Errors and Warnings report dialog. Click Filter Warnings to select which warning messages to display or suppress (via the Filter Conversion Warnings dialog). TPDesign4 Touch Panel Design Program 27 TPDesign4 Project Files 4. Click Finish to launch the conversion process and open the Errors and Warnings Report dialog where you can view/fix the resulting warnings. When the TPD file is converted and opened in TPDesign4, the pages and popup pages may appear in a different order than they occurred in TPDesign3, since TPD4 sorts the page and popup pages alphabetically (rather than the order in which they occur in the project file). Alternatively, you can simply open a TPD3 file in TPD4, via the File > Open command. In this case, TPDesign4 automatically launches the TPDesign4 Conversion Wizard and populates the first dialog to indicate the selected file. Notes on converting TPD3 files to TPD4 Be sure to lock the buttons in the TPDesign3 project to ensure that the button identifier names do not change during the conversion process. If you do not lock the buttons first in TPDesign3, the button names will change to the name of the bitmap applied to the button. When the TPD file is converted and opened in TPDesign4, the pages and popup pages may appear in a different order than they occurred in TPDesign3, since TPD4 sorts the page and popup pages alphabetically. Errors and Warnings Report dialog When you convert a TPDesign3 project to a TPDesign4 project via the TPD Conversion Wizard, TPDesign4 generates a report that lists errors and warnings relating to the conversion process. The Errors and Warnings reports are displayed in the Error and Warnings Report dialog. Neither errors or warnings will prevent the file from being compiled, but will probably require that the issues be resolved in order to have buttons and pages that look and function as expected. Errors are issues that result in unexpected button borders, usually because there are button or buttons in the project that are smaller than the minimum size of the selected border. Warnings are issues that represent potential visual/formatting problems, like minor shifts in shape and size on some buttons. The bottom text box lists all Warnings encountered during the conversion process. The Pages and Popup pages are listed alphabetically in the reports, based on page ID's. Double-click on any item (with a few exceptions) to open the page or popup page, with edit focus on the selected item so you can quickly fix the indicated problem. Click the Finished button to close the Errors and Warnings Report dialog. As long as the project file is not closed, you can access the error and warnings reports in this dialog by selecting View > Errors and Warnings Report (or by pressing the F10 hotkey). 28 TPDesign4 Touch Panel Design Program TPDesign4 Project Files Project Migration (from previous versions of TPDesign4) If a TP4 project file created with a previous version of TPDesign4 is opened (File > Open), the Project Migration dialog appears, prompting you to continue with the migration process. Click Yes to continue, then save the file. Click Cancel to abort the file open command. Once the migration process is complete and the project file has been saved, this process will not have to be performed again. System-Generated File Names When you are creating a new Project, you are given the option to use System Generated File Names (in the New Project Wizard dialog). System-generated file names are generated automatically based on several fields that hold various types of project information (Designer, Dealer ID, Sales Order, Purchase Order, and Revision). When you utilize System-Generated File Names, the resulting filename for this project file consists of each of these entries separated by commas. These fields are all optional. If you leave any of the fields blank, they are simply omitted from the file name. For example, if all fields are filled in as shown in below, FIG. 12 System Generated File Names The resulting file name would be: "1234,My TP Project,5678-9876,rev a,Super-Dave .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. All information entered in this dialog can be viewed/edited at any time via the Panel Properties dialog. If you select not to use System-Generated File Names, the file name will match the Job Name entered in the first dialog of the New Project Wizard. TPDesign4 Touch Panel Design Program 29 TPDesign4 Project Files Inappropriate File Name Characters Avoid using the following characters when naming TPDesign4 project files: • Vertical Bar • Question Mark • Asterisk • Less Than Sign • Greater Than Sign • Forward Slash • Back Slash • Double Quotes • Colon • Period Edit Focus The page, popup page, or button(s) that are the target for change actions are said to have the Edit Focus. For pages and popup pages, 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. The following example shows that "Page 1" has the edit focus. FIG. 13 Edit focus - pages For buttons, edit focus is indicated in the design view window with small red squares with yellow outlines on the edges of the selected button. Buttons that do not currently have the Edit Focus are displayed with selection handles that are black squares with white outlines (FIG. 14): Edit focus indicated by red handles (No edit focus) FIG. 14 Edit focus - buttons The Copy and Paste functions in TPDesign4 always work on the element which has the current edit focus. This means the last thing selected, which is not always necessarily a button displayed in the Design View windows, has the edit focus. 30 TPDesign4 Touch Panel Design Program TPDesign4 Project Files For example, if you have selected an item in the Properties Control window (let's say you've selected "Channel Port", and you perform a "Copy", then you will have copied only the Channel Port entry in the Properties Control window, and not the associated button (even though it is selected in the Design View 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). If for example you had copied the value "410" from the Left (position) field in the Properties Control window, you are not allowed to paste it to the Address Port field, sine it is not a valid Address Port number (these errors are indicated by a TPDesign4 error dialog. Using Quick Input Select Quick Input from the Edit menu or Design View context menu to access the Quick Input sub-menu. The Quick Input setting determines how typing directly into a Design View or into the State Manager will be handled: Current Property - This setting redirects keyboard input to the currently selected property on the currently visible tab of the Properties Control (assuming one is selected). For example, if you select the Name property (in the General tab of the Properties control window), any time you select a button in the Design View, you can just type and press the Enter key to enter a new button name for the selected button. The result of the keystroke will depend on the property selected. Text - This setting redirects keyboard input to the button Text property for all selected button states (in the States tab of the Properties Control window). For example, if you select several states on a Multi-State button (in the State Manager window), you can type and press the Enter key to enter new button text for the selected states. If no states are selected, text is will be applied to all states of the button selected in the Design View. The Text setting is the replacement for the Quick Text Tool found in TPDesign3 Disabled - Disables the Quick Input option. Undo/Redo Support TPDesign4 supports full Undo / Redo functionality at the panel level. This means that each panel file that is open in the program maintains a separate undo/redo stack and manages this for the user. You may either click the Undo or Redo toolbar icons, or click Edit > Undo or Edit > Redo. Click the down-arrows to view a history list that lists up to 25 of the most recent actions. Click to select one or more actions to be undone/redone. The commands alter their text dynamically to indicate which action is next in the undo/redo list. Selecting either option will immediately undo/redo the last action. These actions are independent of any file saves, therefore you may undo past a save if you so desire. Once a panel file is closed, it's undo/redo stack is flushed and is no longer available. The following actions may be undone/redone: TPDesign4 Touch Panel Design Program 31 TPDesign4 Project Files • 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 Using the Workspace Navigator The Workspace Navigator is typically located on the left side of the screen (although you may move it anywhere you like) and is used to open the pages / popup pages in the file, and to view/edit the function codes associated with each page. The Workspace Navigator window contains two tabs: Pages and Function Maps. Workspace Navigator - 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, in the Panel Navigator. Use the Panel Navigator to view/ open and rename panel pages. Each Project is represented by a folder, each one with a different colored panel icon (FIG. 15): FIG. 15 Workspace Navigator - Pages tab Note that each Project folder contains two folders: Pages and Popup Pages. Click the + symbol next to the folders, or double-click on the folders to view the pages and popup pages they contain. In the Pages tab of the Workspace Navigator you will see that there are two panel level folders, one for Pages and one for Popup Pages. Inside the Popup Page folder you may also see additional folders. These folders represent Popup Page Groups, and the presence of a Popup Page in one of these folders indicates that the particular Popup Page belongs to that group. Popup Pages can belong to only one group at a time, and of course they can live outside of any group at the same level as the group folders (See “Working With Popup Pages” on page 71.) 32 TPDesign4 Touch Panel Design Program TPDesign4 Project Files There are also a couple of 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 Navigator You can open a page or popup page in the Workspace Navigator by double-clicking on the page. If you have a button or buttons copied into the Windows clipboard you can also single click on any page or popup page, then paste the buttons into that page without having to open the page. You can delete a page or popup page (as long as it is not the only page in the panel file) by single clicking on the page and clicking the delete key. Renaming Pages via the Workspace Navigator You can rename a Page or Popup Page by single clicking on the Page or Popup Page name, then single clicking again. This will allow for in-place editing of the name value for the item. Workspace Navigator - Function Maps tab Click the Function Maps tab at the bottom of the Workspace Navigator window to view the Function Code Map (FIG. 16). FIG. 16 Function Code Map The Function Code Map is a representation of the Channel codes, Address codes, Level codes, String Outputs and Command Outputs utilized in the panel file, displayed in a hierarchical tree format in the Function Map tab of the Workspace Navigator window. This list is sorted by Port, and within Port by Code. You can use the Function Code Map to delete codes as well as drag and drop items from one port to another, within the primary folder the selected item belongs to (i.e. Channel Codes, Address Codes, Level Codes). For example, 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. TPDesign4 Touch Panel Design Program 33 TPDesign4 Project Files Neither String or Command Outputs support any type of drag and drop operations. Selecting an item in the tree and then left clicking again will provide an in-place edit of the code value. While you can (in-place) edit the Channel, Address and Level codes via these folders, you cannot edit String or Command Outputs the same way. These can only be edited via the General tab of the Properties Control window. A double-click action on the item will open the associated page (or popup page) and place the edit focus on that item. Setting the Address, Channel or Level port to the setup port provides a list of predefined actions. Some of the actions may be hardware dependent, in which case do nothing. Cutting, Copying and Pasting There are several items that can be cut, copied or pasted in TPDesign4 and your ability to utilize these features effectively and with an absolute minimum of frustration will greatly increase your productivity. The Copy and Paste functions in TPDesign4 always work on the element (including buttons, bitmaps, even individual button properties displayed in the Properties Control window) which has the current Edit Focus. This means the last thing selected, which is not always necessarily a button displayed in the Design View windows, has the edit focus. For example, if you have selected an item in the Properties Control window (let's say you've selected "Channel Port", and you perform a "Copy", then you will have copied only the Channel Port entry in the Properties Control window, and not the associated button (even though it is selected in the Design View 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). If for example you had copied the value "410" from the Left (position) field in the Properties Control window, you are not allowed to paste it to the Address Port field, since it is not a valid Address Port number (these errors are indicated by an error dialog). Copying States to the Clipboard Copying a state or states from a page, popup page or button 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 States from the Clipboard You may paste (by either clicking Edit > Paste from the main menu or by clicking the Paste button from the main toolbar) a previously copied state or states onto any corresponding state or states in the State Manager, whether it be for a page, a popup page, a different button or the same button. Pasting a state or states 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) or on a button in the design view is not allowed. 34 TPDesign4 Touch Panel Design Program TPDesign4 Project Files Cutting Objects Cutting an object or objects is identical in nature to copying, with the exception that the selected object or objects will be removed. You may cut by selecting Edit > Cut from the main menu, using the Ctrl + X hotkey, or by clicking the Cut toolbar button. Replacing States On a Page, Popup Page or Button Replacing is a powerful way to populate the states of a button, page, or popup page, and can be accomplished either through the clipboard or by drag-and-drop: Replacing States From the Clipboard 1. First select the button, page, or popup page whose states will be copied. From the State Manager window, select the source states. 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. When the source states have been selected, copy them to the clipboard by selecting either Edit > Copy, State Manager Context Menu > Copy , or the Ctrl-C keyboard accelerator. 3. With the source states copied to the clipboard, select the Multi-General or Multi-Bargraph button whose states will be replaced. 4. Select the destination states. The power of Replace is in its ability to handle sets of destination states unequal in number to the set of source states. If the number of destination states is equal to the number of source states, the destination states are replaced one-for-one from the clipboard. If the number of destination states is less than the number of source states, the destination states are replaced one-for-one until all have been replaced, with remaining source states being unused. If the number of destination states is greater than the number of source states, the destination states are replace one-for-one until all source states have been used, at which point replacing will start again at the beginning of the source states until all destination states have been replaced. Replacing States Through Drag-and-Drop A simplified alternative to using the clipboard to replace states within the same button is to use drag-and-drop. 1. First select the source states. 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. With the source states selected, press and hold the left mouse button while over one of the selected states. 3. While continuing to press the left mouse button, move the mouse over the first state to be replaced. 4. Release the left mouse button. Beginning at the state the drop occurred over, states will be replaced one-for-one until either the number of source states have been used or the end of the TPDesign4 Touch Panel Design Program 35 TPDesign4 Project Files states collection is reached. The same operation can also be performed with a right mouse button drag-and-drop, selecting Copy over… from the drag-and-drop menu. If you copy/paste or drag/drop a bitmap, icon or sound state property to a button or page in a different opened panel, only the property value is copied, not the image or sound file itself. If the destination panel does not have an image or sound file by the same name the operation will ultimately fail. For copy/paste or drag-and-drop operations of individual state properties between panel files to work, an image or sound file of the same name must exist in the target panel. Saving the Active Project as a Different Panel Type Select File > Save As Different Panel Type to open the Save As Different Panel Type dialog. Use the options in this dialog to save the active panel project to be compatible with a different panel type than was specified when the file was created (in the New Project Wizard). The options in this dialog include: Panel Type: This field initially shows the panel type currently associated with this project. Click the down arrow to open a drop-down list of all supported panel types, and select a different panel type from the list. Screen Size: This field initially shows the screen size (resolution) currently associated with this project. Each panel type has its own specific resolution, so this is a read-only field unless you have selected the NXP-TPI/4 (Touch Panel Interface), which supports four resolution settings (640 x 480, 800 x 600, 1024 x 768 and 1280 x 1024). Move the slider to select the desired resolution. New Filename: Use this field to rename the project file, if desired. Use the browse button to navigate to a different target directory if you need to. Working With Multiple Projects TPDesign4 supports working on multiple projects simultaneously, with a few limitations: Opening Multiple Projects Simultaneously You can have up to 50 projects open at once. 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 10 pages at a time, the tabs disappear since they wouldn't have enough room to identify each page by name (which is their purpose). Use the View > MDI Page Tabs option to toggle the page tabs. When this option is enabled, a tab is displayed for each open page. The page tabs normally appear along the bottom edge of the Design View window area, but can be moved, toggled or modified via the MDI tabs context menu (right-click inside any of the tabs). You can copy/paste pages, popup pages and buttons across projects to save time and effort. 36 TPDesign4 Touch Panel Design Program TPDesign4 Project Files Copying/Pasting Across Projects TPDesign4 allows you to copy and paste pages, popup pages and buttons, including all of their various attributes across projects. This can obviously be a major time saver, and there are a few key points to keep in mind in doing so: Use the Paste Control Options dialog to specify whether to retain Function Codes (Address, Channel and Level codes), Page Flip Options, and Images/Slots/Sounds when the page, popup page or buttons are pasted into a separate project. This a powerful tool. Give some thought to which elements of the page, popup page or button you want to retain in the target project. When you copy/paste across projects, if the selected pages, popup pages and/or buttons contain bitmaps, icons and/or sounds, those elements are copied into the target project along with the page, popup page or button (assuming that Retain image references, Retain slot references and Retain sound references are all selected in the Paste Control dialog). Once the buttons are pasted into the target project, the bitmaps, icons and sounds that came over with the pasted buttons are available in the Resource Manager for the target project. If you copy/paste a page or popup page containing buttons, the buttons are copied along with the page. Copying/Pasting Pages, Popup Pages and Buttons Across Projects 1. Open the Paste Control Options dialog (Button > Paste Controls) to specify whether to retain Function Codes (Address, Channel and Level codes), Page Flip Options, and Images/Slots/ Sounds when the copied buttons are pasted into a page in a separate project. 2. Click to select the source page or popup page (the one that you want to copy to another project), in the Workspace Navigator window (Pages tab). and Copy. You don't have to actually open a page to copy it (double-click to open a page in a Design View window). 3. In the Workspace Navigator (Pages tab), click to select the target project (the one that you want to paste the page or popup page into), and Paste. Pages and Popup pages are automatically pasted into the correct folders. Using the Grab and Paint Properties Tools The Grab Properties and Paint Properties tools work together to allow you to grab (copy) the properties and values of a selected Button or Page and apply them to another Button or Page: 1. Select Grab Properties Tool from the Edit menu, the Design View context menu, or click the toolbar button to activate the Grab Properties tool. 2. Click on a Button or Page in a Design View window to take a snapshot of the properties and values of the item that is clicked on, and open the Property Painter dialog (also accessible via the View menu). 3. In the Property Painter dialog, click the checkboxes to select the Properties that of the selected Button or 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. TPDesign4 Touch Panel Design Program 37 TPDesign4 Project Files 4. Select Paint Properties Tool from the Edit menu, the Design View context menu, or click the toolbar button to activate the Paint Properties tool. 5. Click on the Button or Page that you want to apply the selected properties to. The Paint Properties tool will apply the selected properties/values from the Property Painter dialog to the Button or Page that is clicked on. Hold the Shift key and left-click to apply the properties to multiple selected Buttons. Property Painter dialog The Property Painter dialog can be accessed via the Edit menu or the Design View context menu. The Property Painter dialog is used in conjunction with the Grab Properties and Paint Properties tools. The Properties Painter option is only enabled after the Grab tool has been used to select a Page, Popup Page or Button. The items in this dialog include: • Property Set Use this field to name the current set of Properties (resulting from using the Grab Properties tool to take a snapshot of the properties and values of the selected Button or Page). Once one or more sets of Properties have been named and saved, you can use this drop-down list to select from the list of saved property configurations, to apply to a selected Button or Page. There are three default property sets to choose from (All Properties, No Properties and Border, Fill and Text Colors). These default property sets cannot be deleted. • Save As Once a name has been entered for the current Property Set, click Save As to save the configuration under a unique name. • Delete Select a saved Properties Set from the drop-down and click Delete to delete that configuration. • Properties table This table indicates the Properties of the button or page selected with the Grab Properties tool. The list is separated into two parts: General and States. Scroll down to view the entire list. Click the checkboxes to select which of the Properties in this set to Paint (via the Paint Selected command button) or to Grab (via the Grab Selected command button). The checkbox in the General heading selects all General properties, the checkbox in the States headings selects all state properties for the indicated state. • Paint Selected Select one or more buttons in the Design View, and select the Paint Selected command button to paint those properties onto the selected button(s). Alternatively, once a Property Set has been acquired (either via the Grab Properties tool, or by opening a saved Properties Set), you can close this dialog and select the Paint Properties Tool from the toolbar. Each button or page you click on will be painted with the indicated Properties Set. • Grab Selected 38 Select a single button and select Grab Selected to populate the Properties table with the selected button's property set. TPDesign4 Touch Panel Design Program TPDesign4 Project Files Working With the System Page Template The System Page Template is a set of pages, popup pages and buttons that are pre-defined with functions that allow you to view/edit various panel and system parameters. When you open the System Page Template, TPDesign4 automatically selects the template that matches the panel and resolution specified for the active project. Select File > Open System Page Template to open the system page template. You will see the System Page Template open in the Workspace Navigator as a separate project folder, containing a set of system pages and popup pages. You can use the System Page template to copy/paste entire System Pages into your project, or copy/ paste selected elements from a System Page into a page in your project. For example, you may want to include the entire RGB Setup page in your project. Once you copy the System Page into your project, it is treated like any other page in your project. You can edit or modify the page and contained buttons, just like you would for any other page in the Project. Alternatively, you may decide that rather than pasting an entire system page into your project, you only want to use some of the features on a System Page. In this case, you can copy/paste just the buttons you want out of a System Page, and paste them into any page in your project. The System Page Template Pages are all intentionally locked. The pages and the buttons they contain are not editable until they are copied out of the System Page Template folder, and pasted into a Project. Note that the System Page Templates all have names that begin with two underscores (i.e. "__RGBsetup"). When these pages are pasted into a Project, the name is automatically changed to a single underscore (i.e. "_RGB setup"). This is to protect the original System Page Template pages from being edited. TPDesign4 will not allow you to create and save a page with the two underscore prefix. Again, once the System Page Template is copied into a Project, and the name is (automatically) changed to use a single-underscore prefix, it is fully editable, just like any other page in the Project. Note that if you click on a button on a System Page, the Address and Channel Port/Code assignments work differently than the buttons you create. System Page buttons always use these settings: • Address Port: System Page buttons which require communication from the master controller to the panel, are always set to the reserved setup port (0 - setup port) by default. • Address Code: System Page buttons are each assigned a descriptive name as the Address Code for easy identification. • Channel Port: Since System Page buttons require communication out of the panel to the master controller, the Channel Port is always set to the reserved setup port (0 setup port) by default. • Channel Code: System Page buttons are each assigned a descriptive name as the Channel Code for easy identification. The pages that make up the template cannot be modified directly. You can open the System Page Template (via the File menu) and copy entire pages or particular elements from a page, and them paste them into your Project, and once these pages or buttons exist within your Project they can be modified as needed. However, TPDesign treats the System File Template as a password-protected file to avoid accidentally modifying the template pages directly. TPDesign4 Touch Panel Design Program 39 TPDesign4 Project Files Keep in mind that if the System Page Template was opened as part of the Workspace, 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. In this case you will be presented with the Enter Access Password dialog. Since there is not a password to unlock the file, the only option is to open the System Page Template as a Read-Only file. Copying/Pasting Entire System Pages into a Project You can add System Pages to your project by copying and pasting. System Pages and the buttons they contain will remain fully functional when they are copied into your project, since they always retain their function codes. Once the System Page is pasted into your project, you can edit function codes (and all other page and button parameters), if necessary. 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). Note that each System Template page has a descriptive name that begins with two underscores (i.e. "__RGB setup"). The double-underscore prefix indicates that the System Pages are intentionally locked. To avoid potential conflicts with the System Page Template, TPDesign4 will not allow you to save any Page using the doubleunderscore prefix. - or 1. Select the System Page (or pages) that you want to copy (in the Pages tab of the Workspace Navigator). 2. Select Edit > Copy. Note that you cannot cut a System Page out of the System Page Template. 3. Select the target project and select Edit > Paste. Note that once the System Page is pasted into the project, the System Page name automatically changes from a double- to a singleunderscore prefix (i.e. "_RGBsetup"). 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 edit the page and contained buttons like you would any other page in the project. Copying/Pasting System Page Elements into a Project page In some cases, you may have a need for a particular element or set of elements in one of the System Page Templates in your project. In addition to copying/pasting entire System Page Template pages into your project, TPDesign4 allows you to copy/paste specific items from a System Page into an existing page in your project. For example, while you may not necessarily want to include the entire RGBsetup System Page as a page in your project, you may want to use just the Red, Green and Blue Level bargraphs into a page. In this case, 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. System Page buttons will remain fully functional when they are copied into your project, since they always retain their function codes. Once the System Page button(s) are pasted into your project, you can edit the associated function codes (and all other button parameters), if necessary. 40 TPDesign4 Touch Panel Design Program TPDesign4 Project Files The pages in the System Page Template, and the buttons they contain are locked for editing. However, once the copied buttons are pasted into a page in your project, they can be modified just like any other button in the project. 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. You can use these keyboards and keypads in your Project without having to build the keys or assign the function codes. Use the keyboard and keypad System Popup Pages anytime you need to add text/numeric entry functions to your Project. The System Popup Pages include: • keyboard: This is a full 63-key keyboard, including Caps Lock, Shift, and International functionality. This is generally used as the primary standard keyboard, for text/numeral entries made on the panel. • keyboardPrivate: This is a more secure version of the keyboard popup page, where only asterisks are displayed when you type. • KeyboardVirtual: For use with Computer Control buttons to simulate the keyboard on the PC. • keypad: This is standard 10-key numeric keypad (also includes Backspace, Clear, Abort and Done buttons). • keypadExtend: Similar to the keypad popup page, but with several additional symbols (-, /, ., :, '). • keypadPrivate: This is a more secure version of the keypad popup page, where only asterisks are displayed when you type. • keypadTele: Similar to the keypadExtend popup page, but includes asterisk and pound symbols additional symbols, for use with telephone connections. • Warning Message: This is the Battery Base warning message. Use the keyboard and keypad System Popup Pages anytime you need to add text/numeric entry functions to your Project. There are two ways to add a keyboard or keypad to your Project: 1. 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), select Edit > Copy, then select the target Project in the Workspace Navigator and select Edit > Paste. The pasted popup page is automatically pasted to the Popup Pages folder for the target Project. 2. Copy and Paste only selected elements from a Keyboard or Keypad Popup Page into an existing project: Open a Keyboard or Keypad Popup Page, and copy only the buttons/keys that you plan to use into an existing page in a Project. Either way, you won't have to do any additional work to make the keyboard/keypad work on the panel. However, remember that once pasted into your Project, these popup pages and buttons are fully editable. TPDesign4 Touch Panel Design Program 41 TPDesign4 Project Files System Page Template Reference The System Page Template is a set of pages, popup pages and buttons that are pre-defined with functions that allow you to view/edit various panel and system parameters. When you open the System Page Template, TPDesign4 automatically selects the template that matches the panel and resolution specified for the active project. Select File > Open System Page Template to open the system page template. You will see the System Page Template open in the Workspace Navigator as a separate project folder, containing the following pages. To use these pages in your project, copy/paste the system page (or just those elements that you want to use in your project) into your Project, then enter the text for each button in the States tab of the Properties Control window. • Battery: The Battery Base page allows you to configure various battery and power related options. • Calibrate: The elements on this page allow you to reset the vertical and horizontal touch points on the LCD. • Calibrate Test: The elements on this page allow you to confirm that the calibration was done properly. • Panel: Use the elements in this page to store information specific to the target panel for this Project. • Progress: This page contains a Progress Bar, used to indicate the progress of file transfer operations. • Project: This is the Project Information page. Use the elements in this page to store information specific to your Project (File Name, Version, Revision, Dealer ID, Job Name, etc). • Protected: This is the Protected Setup page, which contains various setup options that are not usually exposed to the end-user (Device Number, Touch Input Select, Baud Rate, etc). • Protected ID: This is the Protected ID page, containing options for various system identification information (IP Settings, Master Connection, Panel Information, etc). • Protected Password: This page contains options to allow you change any passwords associated with this Project, including one protected password (which only displays asterisks when the password is being entered for additional security). • Protected Secondary ID: This page contains options to allow you to apply password protection to a secondary (wireless) connection. 42 • Protected Sensors: This page contains options to allow you to configure light and motion sensors on the panel. • Resolution: This page allows you to match the outgoing screen resolution on an NXP-TPI/4 to the connected touch panel. • Setup: The Setup page allows you to set several basic setup options (Panel Timeout, Bus Blink, Panel Volume and Default Panel Sounds - single or double-beep). This page also contains buttons that have page flips to other related System Pages (Project Information, Panel Information, Time Adjustment, Video/RGB Adjustment, Protected Setup). • Time: Use the Time page to set the system clock, and to specify how time and date values will be displayed on the panel. • RGB Full Screen: This page contains options to allow you to adjust various aspects of the RGB signal (Red, Green and Blue levels, Horizontal and Vertical Size/Position and Tracking). This page also contains a clock adjust button for setting the system clock. TPDesign4 Touch Panel Design Program TPDesign4 Project Files • RGB Setup: This page contains all of the items in the RGB Full Screen System Page, plus buttons to indicate video source slot assignments (which relate to video sources coming from the NXP-TPI/4), and several other buttons to allow a return to the Default RGB values, Undo changes, Save Settings, Full Screen Edit, Version and Status textarea buttons. • Video Setup: The Video Setup page contains options for setting/adjusting the video sources coming from the NXP-TPI/4 (Brightness, Contrast, Saturation and Hue), plus buttons for returning to default settings, undo changes, save changes and other text-area buttons relating to video sources (Version, Status, Input and Format). • Volume: The options in this page allow you to configure the master volume settings for the panel. TPDesign4 Touch Panel Design Program 43 TPDesign4 Project Files 44 TPDesign4 Touch Panel Design Program Working With the Resource Manager Working With the Resource Manager Select Panel > Resource Manager (or click the toolbar button) to open the Resource Manager dialog. This dialog contains features and options that allow you to easily organize and manage Images, Slots and Sounds for your project, 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. TPDesign4 supports most popular image formats. Dynamic Images: The Dynamic Images tab allows you to manage images that exist on an HTTP server or FTP server, external to the panel. Dynamic images can be refreshed at specified regular intervals or via the Panel > Refresh Dynamic Images option. Slots: The Slots tab allows you to manage slot assignments for images and icons. Sounds: The Sounds tab provides a convenient way to import and preview all sound files (.WAV or .MP3) to be used in your project. The Resource Manager contains its own toolbar (above the tabs). Depending on what you are doing with the listed Image, Dynamic Image or Sound files, one or more of the following options will be available: Cut/Copy/Paste: Use these controls primarily to move images files to and from the Slots tab. They work in the typical way, and support selected multiple files. Note that if you copy or cut multiple files to clipboard memory, you must select at least the same number of slots (in the Slots tab) in order to paste all of the files. If you only select one slot, when you paste the multiple images, you'll only see the first one that you selected. You can also cut/copy/paste within any of the tabs. Delete: Select one or more files and click Delete to delete them from the collection. The files are not deleted from the hard drive, just from this project. Rename: Select an image file and click Rename to open the Rename dialog, containing two fields: Old Name (read-only, displays the current file name), and New Name (enter the new file name in this field). Click OK to rename the file. Undo/Redo: All actions in the Resource Manager can be undone and/or redone. Import: Click to invoke the Open dialog. Use this dialog to locate and select image and sound files to import into this tab. When images of any (supported) file type except PNG are imported into a project, the files are automatically converted to JPGs. For this reason, if you import (or paste) a file that has the same name as a previously imported file (even if it has a different extension), TPDesign4 automatically adds the "copy of" prefix to the file. PNGs are not converted because they are already sufficiently compressed. TPDesign4 Touch Panel Design Program 45 Working With the Resource Manager New: This option is available only on the Dynamic Images tab (and replaces the Import button that is on the other tabs). Click to open the Create Dynamic Image dialog, which allows you to add dynamic images to your project. Export: Use this option to export one or more files to a specified directory. Use the Choose Directory dialog to pick the target directory. List Style: Click the down-arrow to open a drop-down list of the available display options for this tab: Small Icons - lists the files in columns, with small file icons. List - lists the files in a single column, with small file icons. Details - lists the files with file size and image dimension descriptions. Thumbnails - displays a thumbnail image of each file. 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. Use this tab as a "library" of every image file that will be used in your project (for pages, popup pages, buttons and icons). It is important to import all of your images to this tab first, before they are applied in the project, so that you can maintain an organized profile of all images in the project, regardless of their context (i.e. button state, page background, etc.) Resource Manager dialog - 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. Dynamic Images are images that exist on an HTTP server or FTP server, external to the panel. This feature requires you to specify a URL in place of image file. Dynamic images can be refreshed at specified regular intervals or via the Panel > Refresh Dynamic Images option. Use this tab as a "library" of every dynamic image file that will be used in your project (for pages, popup pages, buttons and icons). It is important to import all of your dynamic images to this tab first, before they are applied in the project, so that you can maintain an organized profile of all images in the project, regardless of their context (i.e. button state, page background, etc.) Resource Manager dialog - 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. Where the Images and Sounds tabs contain "libraries" of all Image and Sound files (even if they have not been assigned to a slot), the Slot tab lists only those image and sound files that are currently assigned to a slot. Once a Image or Sound has been assigned to a slot in the Resource Manager, it is considered to be an Icon. All image and sound files must be assigned to a slot before they can applied to pages, popup pages and/or buttons as Icons. Once an image or sound file has been assigned a slot, it is available for selection as an icon through the Properties Control Window (States tab). 46 TPDesign4 Touch Panel Design Program Working With the Resource Manager Each project has 2000 slots available. If you don't intend to use a image or sound file as an Icon, there is no need to assign it to a slot (see See “Bitmaps vs. Icons” on page 57.). The toolbar button in this tab contains several command options: • Select All Click to select all slots (1-2000). By default, the program limits you to 2000 slots per panel. However, you can use up to 9900 slots per panel if necessary by changing the maximum number of slots per panel. • Move Use this option to move a slot assignment. First select a file / slot assignment, then click on the target slot for the selected file and click Move. The selected file is moved to the selected slot. Note that the Overwrite and Insert options affect how the Move option works. • Duplicate Use this option to duplicate a selected file to another slot. First select the file that you want to duplicate, then select the slot that you want to target for the duplicated file, and click Duplicate. The selected file is duplicated in the targeted slot. • Swap Use this option to swap two file / slot assignments. Ctrl + click to select two files, and click Swap. The two file / slot assignments are swapped. • Assign This command assigns the selected Image or Sound file(s) to slot(s). • Cancel If have selected one or more images, and clicked Assign to Slot (in the Images tab), you can click Cancel to cancel the process before you set the slot assignment. Resource Manager dialog - 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 ( TPDesign4 supports .WAV and .MP3 files). Use this tab as a "library" of every sound file that will be used in your project (for pages, popup pages, buttons and icons). It is important to import all of your sound files to this tab first, before they are applied in the project, so that you can maintain an organized profile of all sound files in the project, regardless of their context (i.e. button state, page flip, etc.) The Resource Manager contains its own toolbar (above the tabs). Depending on what you are doing with the listed Image, Dynamic Image or Sound files, one or more of the following options will be available: • Cut/Copy/Paste: Use these controls primarily to move images files to and from the Slots tab. They work in the typical way, and support selected multiple files. Note that if you copy or cut multiple files to clipboard memory, you must select at least the same number of slots (in the Slots tab) in order to paste all of the files. If you only select one slot, when you paste the multiple images, you'll only see the first one that you selected. Note: You can also cut/copy/paste within any of the tabs. • Delete: Select one or more files and click Delete to delete them from the collection. The files are not deleted from the hard drive, just from this project. • Rename: Select an image file and click Rename to open the Rename dialog, containing two fields: Old Name (read-only, displays the current file name), and New Name (enter the new file name in this field). Click OK to rename the file. • Undo/Redo: All actions in the Resource Manager can be undone and/or redone. TPDesign4 Touch Panel Design Program 47 Working With the Resource Manager • Import: Click to invoke the Open dialog. Use this dialog to locate and select image and sound files to import into this tab. Note: When images of any (supported) file type except PNG are imported into a project, the files are automatically converted to JPGs. For this reason, if you import (or paste) a file that has the same name as a previously imported file (even if it has a different extension), TPDesign4 automatically adds the "copy of" prefix to the file. PNGs are not converted because they are already sufficiently compressed. • New: This option is available only on the Dynamic Images tab (and replaces the Import button that is on the other tabs). Click to open the Create Dynamic Image dialog, which allows you to add dynamic images to your project. • Export: Use this option to export one or more files to a specified directory. Use the Choose Directory dialog to pick the target directory. • List Style: Click the down-arrow to open a drop-down list of the available display options for this tab: Small Icons - lists the files in columns, with small file icons. List - lists the files in a single column, with small file icons. Details - lists the files with file size and image dimension descriptions. Thumbnails - displays a thumbnail image of each file. Editing Image and Sound Files Using External Programs TPDesign v2.2 (or higher) supports the use of external programs for editing image and/or sound files used in your project. You must first associate one or more external editing programs with Image files, and another for Sound files. Once you have indicated a program to be used as the default editor, you can access it via the Edit button in the Images and Sounds tabs of the Resource Manager dialog. Use the options in the Editor Selection tab of the Preferences dialog to add external image and sound editing programs, and specify the default editors. To edit image files: 1. Open the Images tab of the Resource Manager dialog. 2. Select the image file that you want to edit. 3. Click the Edit button to launch the external program specified as the default editor for image files. To edit sound files: 1. Open the Sounds tab of the Resource Manager dialog. 2. Select the sound file that you want to edit. 3. Click the Edit button to launch the external program specified as the default editor for sound files. 4. When the edit session begins, the image or sound file is opened in the default editing program, and control is returned to TPDesign4. Any saved changes to the resource made in the external editor will be immediately reflected in TPDesign4. 48 TPDesign4 Touch Panel Design Program Working With the Resource Manager Any action taken in TPDesign4 that would change the state of the image or sound file being edited (e.g., delete, rename, undo/redo, etc.) will cause the link between TPDesign4 and the external application to be broken. Any subsequent changes made in the external editor will not be reflected nor applied. 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. Note that you can associate multiple editor programs with image files, but one is specified as the default image editor: 1. Select Edit > Preferences to open the Preferences dialog, and open the Editor Selection tab. Note that Image Editors is already selected in the Editor Type drop-down menu. 2. Click the Add Editor button to access the Choose Editor dialog. 3. Click the Browse button (...) to locate and select the desired program's executable (.EXE) file. 4. Click OK in the Choose Editor dialog to add the selected program to the Editors list. The first program added to the Editors list is automatically designated as the default image editor. If you add additional programs to the list, you have the option (in the Choose Editor dialog) to set the default image editor. Adding an External Editing Program for Sound Files 1. Select Edit > Preferences to open the Preferences dialog, and open the Editor Selection tab. 2. Click the down arrow and select Sound Editors from the Editor Type drop-down menu. 3. Click the Add Editor button to access the Choose Editor dialog. 4. Click the Browse button (...) to locate and select the desired program's executable (.EXE) file. 5. Click OK in the Choose Editor dialog to add the selected program to the Editors list. 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. Select Edit > Preferences to open the Preferences dialog, and open the Editor Selection tab. 2. 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. The Default column indicates which program is the current default (TRUE = current default). 3. Double-click on any program in the list (other than the current default) to access the Choose Editor dialog. 4. Check the Default Editor checkbox to set the selected program as the default editor. 5. Click OK to close the Choose Editor dialog. The new default editor is indicated in the Default column of the Editors table. TPDesign4 Touch Panel Design Program 49 Working With the Resource Manager Working With Images Before you can apply images and sounds to buttons and pages in your Project, the image and sound files must first be imported into the Project via the Resource Manager dialog. Once the image or sound file has been imported, it is available for selection to be applied to Pages, Popup pages or Buttons (at the state level). Consider assigning Slot positions to those image files that you expect to use multiple times in the Project. To access the Resource Manager dialog, select Panel > Resource Manager (or click the toolbar button). Supported Image File Types TPDesign4 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 Importing Image Files To Your Project To import image files into your Project 1. Select Panel > Resource Manager (or click the toolbar button) to open the Resource Manager dialog. 2. Open the Images tab. 3. Click the Import button to invoke the Open dialog. 4. 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. If this option is selected, anytime an image with a duplicate file name is imported, it will replace the original image on every button or page that referenced that file name in the Project. This functionality works in an identical manner for sound files. 5. Locate and select the file(s) to import. TPDesign4 supports most popular image formats. 6. Click Open to import the files to the Images tab. 50 TPDesign4 Touch Panel Design Program Working With the Resource Manager Notes on importing image files: When images of any supported file type (except PNG) are imported into a project, the files are automatically converted to JPGs. For this reason, if you import (or paste) a file that has the same name as a previously imported file (even if it has a different extension), TPDesign4 automatically adds the "copy of" prefix to the file. PNGs are not converted because they are already sufficiently compressed. The largest image size supported on the panels is 1280x1024. Any image files that are imported to the project that are larger than 1280x1024 are automatically scaled down to fit this maximum resolution. Any scaling that occurs is proportional, so that the image will not be stretched. If you import an image file that has already been imported to the Images tab, the filename is changed to include the prefix "Copy of...". 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. Assigning Images to Slot Positions To assign images to slot positions for use in the Project: 1. Select Panel > Resource Manager (or click the toolbar button) to open the Resource Manager dialog. 2. Open the Images tab. 3. Select one or more image files (Ctrl + click to select multiple files individually, or Shift + click to select a range of files). 4. Click Assign To Slot. This open the Slots tab. 5. If there are no images already assigned to slots (the Slots tab is empty), click Assign (in the Slots tab) to assign the file to slot 1. If you selected multiple image files, they will be assigned in the order in which they were selected. 6. If there are already some slot assignments present (in the Slots tab), you'll have to more careful about how you choose to assign the files. Use the Overwrite and Insert radio buttons to select a preference for assigning files to slot(s) with previous file assignments. Select Overwrite to automatically overwrite any pre-existing file assignments in the affected slots. Select Insert to insert the files without overwriting anything. In this case, the other slot assignments are shifted to accommodate the new assignments. If you are assigning a single file to a slot with a pre-existing file assignment, click to select the slot to which you want to apply the image file and click Assign (in the Slots tab). If you are assigning multiple files to multiple slots, click the slot where you want to begin pasting the set of images. The files will be pasted consecutively, in the order in which they were selected. When pasting multiple image files to the Slots tab, you must select the same number of slots as the number of images copied. For example, if you selected ten files to assign to slots, select ten slots before assigning the files. If you select just one TPDesign4 Touch Panel Design Program 51 Working With the Resource Manager slot, only the first file selected will be assigned. If you select five slots, the first five files copied will be assigned. Working With Dynamic Images Adding Dynamic Image Files To Your Project To add dynamic image files to the Dynamic Images tab of the Resource Manager dialog: 1. Select Panel > Resource Manager (or click the toolbar button) to open the Resource Manager dialog. 2. Open the Dynamic Images tab. 3. Click the Add button to invoke the Create Dynamic Image dialog. 4. Specify the URL information for the dynamic image resource. 5. Click OK to import the files to the Images tab. Assigning Dynamic Images to Slot Positions To assign dynamic images to slot positions for use in the program: 1. Select Panel > Resource Manager (or click the toolbar button) to open the Resource Manager dialog. 2. Open the Dynamic Images tab. 3. Select one or more dynamic image files (Ctrl + click to select multiple files individually, or Shift + click to select a range of files). 4. Click Assign To Slot. This open the Slots tab. 5. If there are no dynamic images already assigned to slots (the Slots tab is empty), click Assign (in the Slots tab) to assign the file to slot 1. If you selected multiple dynamic image files, they will be assigned in the order in which they were selected. 6. If there are already some slot assignments present (in the Slots tab), you'll have to more careful about how you choose to assign the files. Use the Overwrite and Insert radio buttons to select a preference for assigning files to slot(s) with previous file assignments. Preserve Dynamic Images (Refresh only at Panel Startup) Dynamic Images with a refresh of 0 have the option to refresh only upon restart of the panel, and not upon each visit to the page as is currently the case. This setting is specified in the Create Dynamic Image dialog. Click the New button on the Dynamic Images tab of the Resource Manager dialog to access the Create Dynamic Image dialog. The options in this dialog allow you to name and define dynamic image resources to add to your Project. The options in this dialog include: Name: Enter a name for the dynamic image resource. Connection: Use these options to specify the protocol and URL information. To allow other users to access the files via FTP without password protection, leave the User and Password fields blank. The user must type either "Anonymous" or "Guest" to access the specified FTP site. 52 TPDesign4 Touch Panel Design Program Working With the Resource Manager Refresh Rate: Use the up/down arrows to adjust the number of seconds between refreshes in which the resource is downloaded again. Refreshing resources will cause the button displaying that resource to refresh as well. The default value is 0, which means that the resource is only downloaded once. Refresh only at Panel Startup: This option is only available if the Refresh Rate is set to zero, and causes the dynamic image to refresh only upon restart of the panel, as opposed to upon each visit to the page (as is the default). Working With Dynamo Video Dynamo is an extension of the Dynamic Images feature of AMX G4 devices. With the growing popularity of Motion JPEG (or M-JPEG), streaming being adopted by leading manufacturers of video equipment, DynaMo now enables the use of this technology in AMX systems. The setup process is essentially identical to that for setting up other Dynamic Images. It includes three easy steps: 1. Create a Dynamic Image in TPDesign4 project. 2. Create a General button the Dynamic Image will be displayed on. 3. Select the Dynamic Image in the button's Bitmap properties. Setting Up a DynaMo Video Image 1. In TPDesign4 software, create a new project (or open an existing project in which you would like to add DynaMo video). Open Resource Manager, go to the Dynamic Images tab, and click on New to create a new Dynamic Image (FIG. 17): FIG. 17 Creating a Dynamic Image - Step 1 TPDesign4 Touch Panel Design Program 53 Working With the Resource Manager 2. Create a button (type General) in the interface that matches the output resolution of the camera/ video server (some cameras/servers support more than one output resolution - in this case, select one that fits your application requirements/interface design). FIG. 18 Creating a Dynamic Image - Step 2 3. Go to the States tab in Button Properties and select the Dynamic Image (in our case, "Network Camera") created in Step I as Bitmap image for the target button created in Step 2. FIG. 19 Creating a Dynamic Image - Step 3 Motion JPEG Cameras and Servers that provide Motion JPEG streaming output A number of leading manufacturers are offering a variety of equipment that provides Motion JPEG streaming output. Below is a sample list of the most popular manufacturers and models: Manufacturer Network camera Network video server Axis • 205 Network Camera • 241Q Video Server 4 Inputs • 2100 Network Camera • 241S Video Server 1 Input • 2120 Network Camera • 2420 Network Camera 54 TPDesign4 Touch Panel Design Program Working With the Resource Manager Manufacturer Network camera Panasonic • KX-HCM280 Color Pan Tilt Zoom Network video server • KX-HCM10 Indoor Pan Tilt • KX-HCM250 Wireless Pan Tilt • KX-HCM230 Outdoor Pan Tilt Sony Vivotek • SCN-RZ30N Pan/Tilt/25x Zoom • IP2111 Network Camera VS2402 Video Server • IP2112 Network Camera Network Path Information While AMX is striving 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. In the case of streaming network cameras/servers, manufacturers are using somewhat different syntax for requesting Motion JPEG streams from their networked cameras and servers. Case in point, many of the networked cameras/servers are accessed using a regular HTML browser, and the camera/server is serving up an HTML page with a video window being a part of the page. For DynaMo, however, the panel needs to access only the M-JPEG stream, not the entire HTML page served by the camera/server by default. Depending on the camera/network video server type you are using, you may need to consult product documentation, or if necessary, contact manufacturer's technical support. In general, 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. What follows are examples for some of most popular manufacturers. Axis Model: 2100 (camera) Path: axis-cgi/mjpg/video.cgi?camera=&resolution=320x240 Dynamic image settings: FIG. 20 Edit Dynamic Image dialog - Axis Model: 2411 (video server) Path: axis-cgi/mjpg/video.cgi?resolution=704x480 TPDesign4 Touch Panel Design Program 55 Working With the Resource Manager Axis equipment supports a number of resolutions, and therefore requires that the target resolution be indicated. Each camera can also have a camera ID number but that is optional, just as a number of other features that can be indicated in the path. Panasonic Model: BL-C10A (camera) Path: nphMotionJpeg?resolution=320x240&Quality=Standard Dynamic image settings: FIG. 21 Edit Dynamic Image dialog - Panasonic Vivotek Model: 2111 (camera) Path: cgi-bin/video.jpg?cam=1&quality=3&size=2 Dynamic image settings: Dynamic image settings: FIG. 22 Edit Dynamic Image dialog - Vivotek 56 TPDesign4 Touch Panel Design Program Working With the Resource Manager Like with any other type of equipment AMX controls, manufacturer's documentation and customer support are the most reliable ways of obtaining information on the device's communication protocol/syntax. This can also help you fully utilize optional features available on that specific device. However, at times it can be difficult to get the needed information with respect to the protocol/ syntax of a particular camera/server. 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. An example of such browser is Mozilla FireFox. Using the browser you can go to your network device's IP address, left click on the streaming image and Copy Image Location. You can download a free version of FireFox at www.mozilla.org. Bitmaps vs. Icons TPDesign4 uses two concepts of image files: Bitmaps and Icons. There are important differences in the way each type is treated: The term Bitmap is a generic term that describes any pixel-based image file. In TPD4, a Bitmap can be any supported image type (not limited to .BMP files). For example, JPGs, PNGs, PSD's and BMPs (among others) are supported Bitmap file types. 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 that have been imported into the Project are listed in the Images tab of the Resource Manager. Working With Icons Use icons as button graphics that can be placed "on top" of a color fill, bitmap or video fill background. Any supported image file can be made to be an icon, simply by assigning it to a slot position. Icons allow for complex graphics and animations. For example, you could place a static icon over an animated bitmap or color transition effect. Icons can also be put into motion via the Slot Position tweener (accessible via the Tweeners sub-menu). Icons are different than Bitmaps in several ways: All imported images are considered to be Bitmaps, but an image cannot also be referenced as an Icon until it is assigned to a slot in the Resource Manager. Having an image assigned to a slot allows you to reference the same image as either a Bitmap or an Icon. When an image's slot position assignment is deleted from the Project, the image is still available as a Bitmap (and remains in any other slot it is assigned to), however, when a Bitmap (in the Images tab of the Resource Manager) is deleted, that image is removed from the entire project, including all slots to which it was assigned. Icons occupy slots in the Resource Manager; Bitmaps cannot. In TPDesign4, icons exist before bitmaps in the Z-order, so they are always drawn on top of a bitmap image. Think of bitmaps as the background button graphic, and icons as the foreground graphic image (see the State Draw Order (Z-Order) section on page 59 for details). TPDesign4 Touch Panel Design Program 57 Working With the Resource Manager The Slots tab of the Resource Manager dialog lists all Icon Slot assignments currently defined in the Project. Working With Slot Assignments TPDesign4 utilizes the concept of Slots for adding Icons to Pages, Popup Pages or Buttons in the Project. Once an image file is imported into the Project (via the Resource Manager), it can be assigned to a Slot position. Once the image file is assigned to a Slot, it can be used as an Icon in your Project. TPDesign4 supports up to 500 icon slot assignments. Assigning Image and Sound Files to Slot Positions To assign image files, dynamic images or sound files to slot positions for use in the program: 1. Select Panel > Resource Manager (or click the toolbar button) to open the Resource Manager dialog. 2. Open the Images, Dynamic Images or Sounds tab, depending on the type of file you are adding. 3. Select one or more files (Ctrl + click to select multiple files individually, or Shift + click to select a range of files). 4. Click Assign To Slot. This open the Slots tab. 5. If there are no dynamic images already assigned to slots (the Slots tab is empty), click Assign (in the Slots tab) to assign the file to slot 1. If you selected multiple dynamic image files, they will be assigned in the order in which they were selected. 6. If there are already some slot assignments present (in the Slots tab), you'll have to more careful about how you choose to assign the files. Use the Overwrite and Insert radio buttons to select a preference for assigning files to slot(s) with previous file assignments. Select Overwrite to automatically overwrite any pre-existing file assignments in the affected slots. Select Insert to insert the files without overwriting anything. In this case, the other slot assignments are shifted to accommodate the new assignments. If you are assigning a single file to a slot with a pre-existing file assignment, click to select the slot to which you want to apply the image file and click Assign (in the Slots tab). If you are assigning multiple files to multiple slots, click the slot where you want to begin pasting the set of images. The files will be pasted consecutively, in the order in which they were selected. When pasting multiple image files to the Slots tab, you must select the same number of slots as the number of images copied. For example, if you selected ten files to assign to slots, select ten slots before assigning the files. If you select just one slot, only the first file selected will be assigned. If you select five slots, the first five files copied will be assigned. 58 TPDesign4 Touch Panel Design Program Working With the Resource Manager State Draw Order (Z-Order) State Draw Order (or "Z-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 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 draw order is 1) fill, 2) bitmap,3) icon, 4) text, 5) border. You can change the draw order via the options in the State Draw Order dialog. Use the State Draw Order dialog to specify the order in which the elements of a button, page or popup page are drawn. To change the draw order (for the selected states): 1. Select a button, page or popup page. 2. In the States tab of the Properties Control window, click the Browse button (...) next to Draw Order to access the 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. Working With Sound Files TPDesign4 supports WAV and MP3 sound formats. The primary difference between the two is that MP3 represents a compressed version of a WAV file. If MP3 files are encoded correctly, you should experience very little (if any) difference in sound quality. There are many freeware programs available to encode WAV files into MP3's. Importing Sound Files To Your Project To import sound files to the Sounds tab of the Resource Manager dialog: 1. Select Panel > Resource Manager (or click the toolbar button) to open the Resource Manager dialog. 2. Open the Sounds tab. 3. Click the Import button. This invokes the Open dialog. 4. 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. If this option is selected, anytime a sound file with a duplicate file name is imported, it will replace the original file on every button or page that referenced that file name in the Project. This functionality works in an identical manner for image files. 5. Locate and select the file(s) to import. 6. Click Open to import the files to the Sounds tab. TPDesign4 Touch Panel Design Program 59 Working With the Resource Manager If you import an sound file that has already been imported to the Sounds tab, the filename is changed to include the prefix "Copy of...". 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. Assigning Sound Files to Slot Positions To assign sounds to slot positions for use in the program: 1. Select Panel > Resource Manager (or click the toolbar button) to open the Resource Manager dialog. 2. Open the Sounds tab. 3. Select one or more sound files (Ctrl + click to select multiple files individually, or Shift + click to select a range of files). 4. Click Assign To Slot. This open the Slots tab. 5. If there are no sounds already assigned to slots (the Slots tab is empty), click Assign (in the Slots tab) to assign the file to slot 1. If you selected multiple sound files, they will be assigned in the order in which they were selected. 6. If there are already some slot assignments present (in the Slots tab), you'll have to more careful about how you choose to assign the files. Use the Overwrite and Insert radio buttons to select a preference for assigning files to slot(s) with previous file assignments. Select Overwrite to automatically overwrite any pre-existing file assignments in the affected slots. Select Insert to insert the files without overwriting anything. In this case, the other slot assignments are shifted to accommodate the new assignments. 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. Select Panel > Resource Manager (or click the toolbar button) to open the Resource Manager dialog. 2. Open the appropriate tab for the type of file you want to export (Images, Dynamic Images, Slots or Sounds). 3. Select one or more files to export (Ctrl + click to select multiple files individually, or Shift + click to select a range of files). 4. Click the Export button. This opens the Choose Directory dialog. 5. Use the Browse button to locate a target directory for the files. 6. Click OK. The program prompts you when the export is finished. 60 TPDesign4 Touch Panel Design Program Working With the Resource Manager Working With Video Fills If you are designing a project targeted at a video-capable panel, you can assign a "video fill" to a page, popup page or button. TPDesign4 supports video fills directly to the page/popup page, without having to create a page-size button (as was the case in TPDesign3). The NXP-TPI/4 accommodates up to four video source inputs, and you can select any available video source (1-4) as the source for a video fill. See the Supported Panel Types section on page 2. Streaming Video Fill If the project specifies a touch panel that supports streaming video (NXD/NXT-1200VG, NXD/NXT-1500VG, and NXD/NXT-1700VG only), Streaming Source is available as a video fill option. If Streaming Source is selected from the drop-down list of Video Fill options (in the States tab of the Properties Control window), then Streaming Source is added to the list of state properties. Enter the URL or IP Address of the server that will provide the video stream in the Streaming Source field. TPDesign4 Touch Panel Design Program 61 Working With the Resource Manager 62 TPDesign4 Touch Panel Design Program Working With Pages and Popup Pages Working With Pages and Popup Pages Working With Pages Pages are not only containers for buttons, but can also have up to one address port / address code and up to one channel port / channel code combination. Pages cannot have borders and possess only one state. You may place text directly on a page outside the context of a button. You can select the name for the page, the page background color, the text color for text applied directly to the page, and a font for any text specified (including the font size and settings). If you change any of these properties (except the name) your changes will be saved and future page creations will carry those selections forward. Each page must be unique within its respective panel file in order to be accepted by the program; all name collision checks in the program are case insensitive. The maximum number of pages in a panel file = 500. The active project/page is indicated in the Workspace Navigator window by a green wedge to the left of the panel and page icons. Double-click on any page contained in any open project to set it as the active project. In the example below, "CP4 test" is the active project, and "Page 1" is the active page in the project: FIG. 23 CP4 test" is the active project, and "Page 1" is the active page in the project. Adding a New Page to the Active Project 1. Select Page > Add Page (or click the toolbar icon) to open the Add Page dialog. 2. Enter a descriptive name for the new page in the Name field (50 characters max - avoid using inappropriate file name characters). 3. Set the Page Background color: a. Click the browse button (...) next to "Page Background" to open the Colors dialog. b. Single-click to select a new color from the list. Note the current and new color selections are shown together for comparison on the left side of the dialog. 4. Set the Page Text color (for text applied directly to the page): a. Click the browse button (...) next to "Text" to open the Colors dialog. b. Single-click to select a new color from the list. Note the current and new color selections are shown together for comparison on the left side of the dialog. TPDesign4 Touch Panel Design Program 63 Working With Pages and Popup Pages 5. Set the Font Name and Size. A sample of the selected font type and size is displayed in the window beneath these fields. 6. Click OK to add the new page to the active project. The new page will be appear in the Workspace Navigator in the Pages folder, under the project the page was added to (as the active page). Because the RGB Color palette supports more colors than the Palette Index, you might see some slight variation in some colors if you switch from the RGB Color palette to Palette Index. In most cases, any variation that occurs in the translation is extremely subtle, since TPDesign4 tries to match the color exactly. Setting Page Properties Use the General tab of the Properties Control window to set/edit page properties. The General tab contains a table that lists the page properties for the active page. To edit any of the listed button properties, click on an item in the right-hand column to activate the field. Depending on the item selected, you can either set the item manually, select from a dropdown menu, or both. The following general properties are supported at the page level:: General (Non-State Oriented) Page Properties Parameter Description • Name: By default, the first page generated in the project is named "Page 1" (in the New Project Wizard), and all subsequent pages are automatically named "Page 2", "Page 3", etc. NOTE: You must use a unique name for each page, and you cannot apply the Job name (set in the New Project Wizard) to a page. • Address Port: Enter a unique Address Port assignment for this page. • Address Code: Enter a unique Address Code assignment for this page. • Channel Port: Enter a unique Channel Port assignment for this page. • Channel Code: Enter a unique Channel Code assignment for this page. Setting Page State Properties Use the State tab of the Properties Control window to set/edit page state properties. The State tab contains a table that lists the page state properties for the active page. To edit any of the listed button properties: 1. Click on an item in the right-hand column to activate the field. 2. Depending on the item selected, you can either set the item manually, select from a drop-down menu, or both. The following state properties are supported at the page level: Page State Properties 64 Parameter Description • Fill Color: To change the border color for the selected state(s), click the browse button (...) to open the Colors dialog. • Text Color: To change the border color for the selected state(s), click the browse button (...) to open the Colors dialog. TPDesign4 Touch Panel Design Program Working With Pages and Popup Pages Page State Properties (Cont.) Parameter Description • Video Fill: To apply a video fill to the selected state(s), click the down-arrow to open the list of available video sources (1-4). This option is only available for video-capable panels. • Video Pass-Thru: This option is available only if a Video Fill has been selected (select Yes from the drop-down menu to enable). With Video Pass-Thru enabled, the panel's touch coordinates are passed from the RGB card on a TPI/4 to the connected PC as USB commands. This feature works only if the TP4-RGB card is connected directly to the PC, via the USB port on the RGB card. The touch coordinates are scaled to fit the resulting window. This feature allows you to "synch" the touch actions on the panel to those on the connected PC. • Bitmap: To apply an image file as the background image to the active page, click the browse button to open the Select Resource dialog, where you can select an image file from among those imported into the project. • Bitmap Justification: To set or reset the justification setting for the bitmap, click the down-arrow and select an option from the list. • Icon Slot: To apply an icon to the active page, click the browse button to open the Select Resource dialog, where you can select a slot assignment (icon) to apply. Icons appear on top of the bitmap image (if one is applied). See Z-Order for details. • Icon Justification: To set or reset the justification setting for the icon, click the down-arrow and select an option from the list. • Font: To change the font used for text on the active page, click the browse button to open the Font dialog, where you can select a Font, Style and Size for the page text. • Text: To change or enter the text to be displayed on the active page, click the browse button to open the Enter Text dialog, where you can type the new page 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). Note: The maximum Command, String and Text length is 4096 characters. • Text Justification: To set or reset the justification setting for the page text, click the down-arrow and select an option from the list. • Word Wrap: Use this option to specify whether to wrap 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. • Sound: To change or apply a new sound file to the page, 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. The sound will be played when the page is opened. Adding a Fill Color to a Page To add a fill color to a page: 1. Create a new Page (Panel > Add Page), or open an existing one (via the Workspace Navigator - Pages tab). 2. With the Page selected, click on Fill Color, in the States tab of the Properties Control window to activate the browse button (...). 3. Click the browse button to open the Colors dialog, and select the color that you want to apply to the Page. TPDesign4 Touch Panel Design Program 65 Working With Pages and Popup Pages Adding Text to a Page Since G4 panels utilize address and channel port/address codes (and possess a single state), you can display text directly on a Page in your project. If you are also displaying a bitmap on the Page, the text will automatically be displayed on top of the bitmap. To add text to a Page: 1. Create a new Page (Panel > Add Page), or open an existing one (via the Workspace Navigator - Pages tab). 2. With the Page selected, click Text Color in the States tab of the Properties Control window to enable the browse button. Click the browse button to open the Colors dialog where you can select a color for the Page text. 3. Click on Font in the States tab of the Properties Control window to enable the browse button, and select the desired font (in the Font dialog). 4. Click on Text, in the Properties Control window to open the Enter Text dialog. 5. Type the text to be displayed on the Page (up to 4096 characters), and click OK. 6. Click Text Justification (in the Properties Control window) to set the justification of the text on the page. Select Absolute to manually position the text. 7. Click Word Wrap, and select whether to wrap text that doesn't fit on a single line on the selected Page (Yes or No). If you select No, any text that won't fit on the selected Page may not be visible, depending on the text justification setting and the size of the Page. Adding a Bitmap to a Page With TPDesign4, you can apply a bitmap directly to a Page in your project, to serve as the background image (See “State Draw Order (Z-Order)” on page 59.) This can be a powerful design tool, new to TPDesign4 and G4 panels. To add a bitmap to a Page: 1. Create a new Page (Panel > Add Page), or open an existing one (via the Workspace Navigator - Pages tab). 2. With the Page selected, click on Bitmap, in the States tab of the Properties Control window to activate the browse button (...). 3. Click the Browse button to open the Select Resource dialog, and select the bitmap that you want to apply to the Page. If you don't see the desired image file listed in the Select Resource dialog, you need to import the image file into the project first. 4. Click Bitmap Justification (in the Properties Control window) to set the justification of the image on the page. Select Absolute to manually position the image. TPDesign4 does not automatically scale or stretch images to fit the Page. To scale an image to fit a target Page/panel, simply open the image in any graphics editor program, and scale the image to the exact size (in pixels) of the Page/panel. 66 TPDesign4 Touch Panel Design Program Working With Pages and Popup Pages To check the size of the Pages in your project, open the Display tab of the Panel Properties dialog (select File > Properties to open). Match the image size to the screen size indicated here. Adding an Icon to a Page With TPDesign4, you can apply an Icon directly to a Page in your project, to serve as the foreground image (See “State Draw Order (Z-Order)” on page 59.) This can be a powerful design tool, new to TPDesign4 and G4 panels. To add an icon to a Page: 1. Create a new Page (Panel > Add Page), or open an existing one (via the Workspace Navigator - Pages tab). 2. With the Page selected, click on Icon Slot in the States tab of the Properties Control window to activate the Browse button. 3. Click the browse button (...) to open the Select Resource dialog, and select the icon that you want to apply to the Page. If you don't see the desired image file listed in the Select Resource dialog, you need to import the image file into the project first and apply it to a slot position. 4. Click Icon Justification (in the Properties Control window) to set the justification of the image on the page. Select Absolute to manually position the image. Adding Text to a Page Since G4 panels utilize address and channel port/address codes (and possess a single state), you can display text directly on a Page in your project. If you are also displaying a bitmap on the Page, the text will automatically be displayed on top of the bitmap (See “State Draw Order (Z-Order)” on page 59.). To add text to a Page: 1. Create a new Page (Panel > Add Page), or open an existing one (via the Workspace Navigator - Pages tab). 2. With the Page selected, click Text Color in the States tab of the Properties Control window to enable the browse button (...). Click the browse button to open the Colors dialog where you can select a color for the Page text. 3. Click on Font in the States tab of the Properties Control window to enable the browse button (...), and select the desired font (in the Font dialog). 4. Click on Text, in the Properties Control window to open the Enter Text dialog. 5. Type the text to be displayed on the Page (up to 4096 characters), and click OK. 6. Click Text Justification (in the Properties Control window) to set the justification of the text on the page. Select Absolute to manually position the text. 7. Click Word Wrap, and select wether to wrap text that doesn't fit on a single line on the selected Page (Yes or No). If you select No, any text that won't fit on the selected Page may not be visible, depending on the text justification setting and the size of the Page. TPDesign4 Touch Panel Design Program 67 Working With Pages and Popup Pages Displaying a Video Source on a Page TPDesign4 allows you to assign a video source as the background image on a Page, Popup Page or Button. To apply a video fill to a Page: 1. Select (or a create) a Page in your project. 2. In the Properties Control window - States Tab, click Video Fill to activate the drop-down list of available video sources (Source 1-4). If you are working with an existing page with buttons, be sure to click on the page (not on a button) to bring up the State Properties for the Page, and not a button on the page. 3. Select a video source from the list to apply the video fill to the Page. Creating a Page Flip A basic touch panel page design concept is the page flip. A page flip is a button attribute that allows the user to press a button to "flip" through different panel pages. A basic example would be a button labeled "DVD Player" on a main page that when touched, opens a CDP Player page, containing only buttons that control the CD player. Typically you would set up a different control page for each piece of equipment. Organization of device controls is essential to good touch panel design, and page flips allow you to separate, organize and cross-link your control pages. To create a page flip: 1. Select (or create a new) button. 2. In the Properties Control window (General tab), click on Page Flip to enable the editable field. 3. Click the browse button to open the Button Page Flip Actions dialog. 4. Click the Add Page Flip button to create a new page flip for this button. This activates the two drop-down lists at the top of the dialog. 5. Click the down-arrow in the first list box to select from a list of page flip types. 6. Depending on the type of page flip selected, you may need to also specify the target page or popup page to open. 7. Repeat this process as desired to create multiple page flips on the button. You can apply multiple page flips to any button. Use the up and down arrows to re-arrange the order of the page flips. The maximum number of page flips on a button is 10. Drag & Drop To Set Page Flips TPD4 v2.4 (or higher) supports a shortcut for adding page flips: Simply select the target page or popup page for the flip in the Workspace window (Pages tab), drag it into a Design View window and drop it onto a button to create a flip to that page or popup page. Alternatively, 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). 68 TPDesign4 Touch Panel Design Program Working With Pages and Popup Pages By default, dropping a page will add a ‘standard page’ flip action, and dropping a popup will add a ‘show popup’ flip action to that button. If dragged with the right mouse button, the drop will offer a list of all applicable page flip actions. Page Flip Actions With a button selected in a Design View window, click Page Flip in the Properties Control window (General tab) to open the Button Page Flip Actions dialog, where you can set the type of page flip to apply to the selected button, and specify the target page. Click the Add Page Flip button to activate the two drop-down lists at the top of the dialog. The first of the lists allows you to select from a list of available page flip action types, and the second allows you to select the target page for the flip. • Standard Page: This selection populates the second list box with a list of standard pages in your project. Select a target page for the page flip. • Previous Page; 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. • Show Popup: This selection populates the second list box with a list of popup pages in your project. Select a target popup page for the page flip (to show when the button is touched). • Hide Popup: This selection populates the second list box with a list of popup pages in your project. Select a target popup page for the page flip (to hide when the button is touched). • Toggle Popup: This selection populates the second list box with a list of popup pages in your project. Select a target popup page for the page flip (to toggle hide/ show when the button is touched). • Hide Popup Group: This selection hides a popup page group. • Hide Popups on Page: This selection populates the second list box with a list of standard pages in your project. Select a target page for the page flip to clear from the display when the button is touched. • Hide All Popups: This selection sets the page flip to clear all pages from the display when the button is touched. Copying Pages In the Workspace Navigator (Pages tab), at the top most level are Panel Names. Immediately below the panel names is a Pages folder (containing Pages), and a Popup Pages folder (containing Popup pages). You can copy a page either by selecting a Page only (ensuring that no buttons are selected) in an active Design View window, 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). Pasting Pages You may paste by clicking Edit > Paste from the main menu (or the Paste button in the main toolbar) a previously copied page onto: An active Design View window The panel name in the Workspace Navigator The folder named Pages TPDesign4 Touch Panel Design Program 69 Working With Pages and Popup Pages Pasting a page onto another page or popup page in the Workspace Navigator (which is only a paste target for buttons), or onto the Popup Pages folder (which is for popup pages only) is not allowed. Copying States From a Page Copying a state or states from a page, popup page or button 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 States From a Page You may paste (by either clicking Edit > Paste from the main menu or by clicking the Paste button from the main toolbar) a previously copied state or states onto any corresponding state or states in the State Manager, whether it be for a page, a popup page, a different button or the same button. Pasting a state or states 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) or on a button in the design view is not allowed. Deleting Pages From a Project To delete a page from the active project, select the page to delete in the Workspace Navigator (Pages tab), and select Edit > Delete. The program will prompt you to verify the page deletion first. All panels must include at least one page, therefore, deleting the last remaining page is not allowed. 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 Panel > Export Page Images to open the Export Page Images dialog. 2. Use the checkboxes in the Pages & Popups list to select which Pages and Popup Pages to export. 3. Specify a target directory for the exported image files in the Export Directory field. Use the browse button (...) to navigate to a target directory via the Browse For Folder dialog. 4. Specify a template for the resulting filenames in the Filename Template field. By default, the template is set to include the Panel file name and the Page name into the generated image's file name. As described on the dialog, use $P to insert the Panel name and $p to insert the Page name into the exported file's name. The file extension is automatically, based on the File Format selection. 5. Use the Scale% up and down arrows indicate a percentage to down-scale the exported images. The default setting is 100% (no scaling). 6. Select a image file type (JPG, PNG or BMP) for the resulting image files from the File Format drop-down. If JPG is selected, you can select the desired level of image compression 70 TPDesign4 Touch Panel Design Program Working With Pages and Popup Pages 7. Select Export current display state for buttons to capture the Pages as they are currently displayed in the Design View, with the button's current display state If this option is not selected, it will export the buttons in the (default) Off state. By default, this option is enabled. 8. 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. If this option is not selected, only the Page underneath any currently viewed Popup Pages will be exported. By default, this option is enabled. Working With Popup Pages Popup pages are similar to pages in some respects as they are a container for buttons and they may have up to one address port / address code and up to one channel port / channel code combination and only one state. Beyond these properties popup pages have many typically button-specific properties, as well as some special properties that apply only to popup pages. Popup pages, unlike pages, can be assigned a border style and border color, as well as left, top, width or height values. Specific to popup pages are the properties: Popup Page Timeout which is set in 1/10th second increments and specifies how long a popup page will remain open and active without a button press, Modal / Non-Modal which controls the user's ability to press buttons that not on an open pop-up page. If a popup page is set as modal, then the only buttons that work are those on the open popup page. Buttons that occur on the background page are not functional. If a popup page is set to non-modal, then the user can access buttons on the popup page, and any other buttons that occur on the background page (as an example, a floating toolbox type dialog would be considered to be non-modal, because you are not required to close the toolbox dialog in order to access the other options in the program. Groups which provide a mechanism to group popup pages into mutually exclusive groups for display purposes. To add a group you type any value in the Properties Control's Group field. This will create a corresponding folder under the Popup Pages folder in the Workspace Navigator. To place a popup page in a particular popup group, simply drag the desired popup pages into the desired group folder. If you create a popup page with either the width or the height dimension smaller than 100, you will see a crosshatched background in the Design View window. This prevents the creation of a Design View window so small that you would be unable to move the window around the desktop with the mouse. The design area is inside the crosshatched area. The minimum size for popup pages is 15 pixels in height or width. The active project/page is indicated in the Workspace Navigator window by a green wedge to the left of the Panel and Page icons. Double-click on any page contained in any open project to set it as the active project. TPDesign4 Touch Panel Design Program 71 Working With Pages and Popup Pages Adding a New Popup Page To add a new popup page to the active project: 1. Select Page > Add Popup Page (or click the toolbar icon) to open the Add Popup Page dialog. If a button is selected in a Design View window when you invoke the Add Popup Page dialog, then the initial values for Left, Top, Width and Height of the new popup page will match the selected button. Use this feature as a shortcut, especially in cases where you plan to create several popup pages of the same size and position. 2. Enter a descriptive name for the new popup page in the Name field (50 characters max - avoid using inappropriate file name characters). 3. Click the down-arrow to open the Border Style drop-down menu, and click to select the desired border style for the popup page. 4. In the Position fields, enter Left and Top coordinates (in pixels, relative to the upper-left corner of the page which is 0,0) for the desired placement of the popup page when it displayed on the panel. Use the Position fields when you need to achieve exact positioning. You can also set it's position manually by dragging it wherever you want it to appear. To position the Popup manually, you must first enable the Show Popup Pages option in the Page menu. This option opens the Select Popup Pages to Show dialog, where you can select the Popup Page that you want to display on the page. Once the Popup is displayed on the page, you can click and drag to position it manually. Note that once you specify the position of the Popup on the page, any time you display the Popup (via the Page > Show Popup Pages option), the Popup will always appear in the position specified, regardless of the page that you display on. 5. In the Size fields, enter the desired Width and Height dimensions (in pixels) for the popup window. Popup Pages may be created in any size beyond the minimum and up to the maximum size of the panel. If you create a popup page with either the width dimension or the height dimension smaller than 100, you will begin to see a crosshatched background to the Design View window. This feature prevents the creation of a Design View window so small that you would be unable to move the window around the desktop with the mouse. The design area is inside the crosshatched area. The minimum size for popup pages is 15 pixels in height or width. You can also set the dimensions manually by dragging the sizing handles on the Popup. To resize the Popup manually, you must first enable the Show Popup Pages option in the Page menu. This option opens the Select Popup Pages to Show dialog, where you can select the Popup Page that you want to display on the page. Once the Popup is displayed on the page, you can click and drag the red handles on the Popup to resize it manually. Note that once you resize the Popup on the page, any time you display the Popup (via the Page > Show Popup Pages option), the Popup will retain the dimensions specified, regardless of the page that you display on. 6. Set the Page Background color: a. Click the browse icon next to "Page Background" to open the Colors dialog. 72 TPDesign4 Touch Panel Design Program Working With Pages and Popup Pages b. Single-click to select a new color from the list. Note the current and new color selections are shown together for comparison on the left side of the dialog. 7. Set the Border color: a. Click the browse icon next to "Border" to open the Colors dialog. b. Single-click to select a new color from the list. Note the current and new color selections are shown together for comparison on the left side of the dialog. 8. Set the Page Text color (for text applied directly to the page): a. Click the browse icon next to "Text" to open the Colors dialog. b. Single-click to select a new color from the list. Note the current and new color selections are shown together for comparison on the left side of the dialog. 9. Set the Font Name and Size. A sample of the selected font type and size is displayed in the window beneath these fields. 10. Click OK to add the new Popup page to the active project. The new Popup page will be appear in the Workspace Navigator in the Pages folder, under the project the page was added to, as the active page. Because the RGB Color palette supports more colors than the Palette Index, you might see some slight variation in some colors if you switch from the RGB Color palette to Palette Index. In most cases, any variation that occurs in the translation is extremely subtle, since TPDesign4 tries to match the color exactly. Using the Popup Draw Tool The Popup Draw tool allows you to draw Popup Pages directly onto a page. The technique is similar to drawing a button, and the result is the same as through standard means: 1. Select Edit > Popup Draw Tool (or click the toolbar button) to activate the Popup Draw tool. To access the Popup Draw toolbar button, 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. 2. Left-click inside the desired page (in the active Design View window), and while holding the left mouse button down, drag to draw the popup page to the desired size and shape. The minimum popup page size is 15 pixels in height or width. When using the Button Draw or Popup Draw tools, hold down the SHIFT key while drawing to constrain the item to a square. When using the Selection tool, 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). When using the Selection tool, 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). Lasso selection forces you to draw a square around the outside of the item to select it, as opposed to clicking on the item. With an item selected in a Design View window, 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 TPDesign4 Touch Panel Design Program 73 Working With Pages and Popup Pages (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. 3. Upon the creation of a popup page, you will see selection handles appear on the outsides of the popup that are small yellow squares with red interiors. This is a visual indication that the newly created popup has the Edit Focus. 4. The General tab of the Properties Control window displays general (non-states related) properties for the popup page in a editable table. Use this table to set the popup page's general properties. 5. The Programming tab of the Properties Control window displays programming-related properties for the popup page in a editable table. Use this table to set the popup page's general properties. 6. The States tab of the Properties Control window displays state-related information for the new popup in a editable table. Edit the (Off) state properties as necessary. 7. Select File > Save to save your changes. Because the RGB Color palette supports more colors than the Palette Index, you might see some slight variation in some colors if you switch from the RGB Color palette to Palette Index. In most cases, any variation that occurs in the translation is extremely subtle, since TPDesign4 tries to match the color exactly. Hold down the SHIFT key while drawing to constrain the popup page to a square. With an item selected in a Design View window, 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. Drawing Assist Support for Popup Pages Displayed on Pages Once a popup page is displayed on a main Page in the Design View, you can utilize several of the Drawing Assist tools (available via the Position and Size Assist toolbars (FIG. 24) and the Layout menu) to edit the size and position of the popup page. With only the popup page selected, you can use the Center Horizontal and Center Vertical tools as well as apply any of the four options from the Aspect Ratio tool. Position Assist Toolbar Size Assist Toolbar FIG. 24 Position and Size Assist toolbars With the selection of one or more buttons on the page in conjunction with a popup page selection, 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. 74 TPDesign4 Touch Panel Design Program Working With Pages and Popup Pages Setting Popup Page Properties Use the General tab of the Properties Control window to set/edit popup page properties. The General tab contains a table that lists the properties for the active popup page. To edit any of the listed button properties, click on an item in the right-hand column to activate the field. Depending on the item selected, you can either set the item manually, select from a dropdown menu, or both. The following general properties are supported at the popup page level: General Popup Page Properties Parameter Description • Name: By default, the first popup page generated in the project is named "Popup Page 1" (in the New Project Wizard), and all subsequent popup pages are automatically named "Popup Page 2", "Popup Page 3", etc. Note: You must use a unique name for each popup page, and you cannot apply the Job name (set in the New Project Wizard) to a popup page. • Left/Top: Position values. The Left and Top rows indicate the position of the selected popup page, in pixels, relative to the upper-left corner of the Design View window. You can edit these fields to apply specific positioning info for the popup page. Note that if you select the popup page and manually move it around on the page, these constantly update to indicate the current position. • Width/Height: Size values. The Width and Height rows indicate the dimensions of the selected popup page, in pixels. You can edit these fields to apply specific dimension info for the popup page. Note that if you select the popup page and manually resize it on the page, these constantly update to indicate the current dimensions. • Group: To add a group you type any value in the Group field. This will create a corresponding folder under the Popup Pages folder in the Workspace Navigator (Pages tab). To place a popup page in a particular popup group, simply drag the desired popup pages into the desired group folder. • Timeout: Popup page timeout is set in 1/10th second increments, and specifies how long a popup page will remain open and active without a button press (default = 0). • 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. • Show Effect: This field allows you to apply a transition effect to the popup page, to be invoked when the popup is opened (shown). The Slide effects cause the popup page to appear to slide across the page when invoked, the Fade effect causes the popup to appear to fade into view on the page. • Show Effect X/Y Pos: Measured in pixels, the Show Effect X/Y Pos (position) fields allow you to specify the starting point on the page for the selected "show" transition effect. Depending on the Show Effect selected, either the Show Effect X Pos. or Show Effect Y Pos. option may become available: If you have selected a left or right slide effect (including slide/fade effects), you can set the X position for the start of the slide transition effect (range = 0 9999). The default is 0 (the left edge of the page). In some cases, depending on the page design and graphics, you may decide to start the slide at some other point than the absolute left edge of the page. If you have selected a top or bottom slide effect (including slide/fade effects), you can set the Y position for the start of the slide transition effect (range = 0 - 9999). The default setting is 0 (top edge of the page). Neither of these options apply to the Fade effect. • Show Effect Time: This field allows you to specify the total amount of time it will take to execute the selected effect, measured in 1/10th-second increments. Use this option to synchronize your popup page transition effects. TPDesign4 Touch Panel Design Program 75 Working With Pages and Popup Pages General Popup Page Properties (Cont.) Parameter Description • Hide Effect: This field allows you to apply a transition effect to the popup page, to be invoked when the popup is closed (hidden). • Hide Effect X/Y Pos - Measured in pixels, the Hide Effect X/Y Pos (position) fields allow you to specify the starting point on the page for the selected "hide" transition effect. Depending on the Hide Effect selected, either the Hide Effect X Pos. or Hide Effect Y Pos. option may become available: If you have selected a left or right slide effect (including slide/fade effects), you can set the X position for the start of the hide effect (range = 0 - 9999). The default is 0 (the left edge of the page). In some cases, depending on the page design and graphics, you may decide to start the slide at some other point than the absolute left edge of the page. If you have selected a top or bottom slide effect (including slide/fade effects), you can set the Y position for the start of the hide effect (range = 0 - 9999). The default setting is 0 (top edge of the page). Neither of these options apply to the Fade effect. • Hide Effect (Cont.) • Hide Effect X/Y Pos: Measured in pixels, the Hide Effect X/Y Pos (position) fields allow you to specify the starting point on the page for the selected "hide" transition effect. Depending on the Hide Effect selected, either the Hide Effect X Pos. or Hide Effect Y Pos. option may become available: If you have selected a left or right slide effect (including slide/fade effects), you can set the X position for the start of the hide effect (range = 0 - 9999). The default is 0 (the left edge of the page). In some cases, depending on the page design and graphics, you may decide to start the slide at some other point than the absolute left edge of the page. If you have selected a top or bottom slide effect (including slide/fade effects), you can set the Y position for the start of the hide effect (range = 0 - 9999). The default setting is 0 (top edge of the page). Neither of these options apply to the Fade effect. Setting Popup Page Programming Properties Use the Programming tab of the Properties Control window to set/edit popup page properties. The Programming tab contains a table that lists program-related properties (Address and Channel Port/ Channel Code assignments) for the active popup page. The Address and Channel Port/Channel Code assignments allow you to apply bitmaps, icons, text, sound, even video fills to the popup page itself (without having to create a page-sized button). To edit any of the listed button properties, click on an item in the right-hand column to activate the field. Depending on the item selected, you can either set the item manually, select from a dropdown menu, or both. The following programming properties are supported at the popup page level: Popup Page Programming Properties Parameter Description • Address Port: Enter a unique Address Port assignment for this popup page. • Address Code: Enter a unique Address Code assignment for this popup page. • Channel Port: Enter a unique Channel Port assignment for this popup page. • Channel Code: Enter a unique Channel Code assignment for this popup page. 76 TPDesign4 Touch Panel Design Program Working With Pages and Popup Pages Setting Popup Page State Properties Use the State tab of the Properties Control window to set/edit popup page state properties. The State tab contains a table that lists the state properties for the active popup page. To edit any of the listed button properties, click on an item in the right-hand column to activate the field. Depending on the item selected, you can either set the item manually, select from a dropdown menu, or both. The following state properties are supported at the popup page level:: Popup Page State Properties Parameter Description • Border Name: This field displays the border style that was set in the General tab for the popup page in the drop-down list. • Border Color: To change the border color for the selected popup page, click the browse button to open the Colors dialog. • Fill Color: To change the border color for the selected popup page, click the browse button to open the Colors dialog. • Text Color: To change the border color for the selected popup page, click the browse button to open the Colors dialog. • Video Fill: To apply a video fill to the selected popup page, click the down-arrow to open the list of available video sources (1-4). This option is only available for video-capable panels (NXP-TPI/4). • Bitmap: To apply an image file as the background image to the active popup page, click the browse button to open the Select Resource dialog, where you can select an image file from among those imported into the project. • Bitmap Justification: To set or reset the justification setting for the bitmap, click the down-arrow and select an option from the list. • Bitmap X and Y Offsets: (available only if the bitmap justification has been set to Absolute). To apply an X and/or Y offset to the bitmap, 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 Popup. • Icon Slot: To apply an icon to the active popup page, click the browse button to open the Select Resource dialog, where you can select a slot assignment (icon) to apply. Icons appear on top of the bitmap image (if one is applied). See Z-Order for details. • Icon Justification: To set or reset the justification setting for the icon, click the down-arrow and select an option from the list. • Icon X and Y Offsets: (available only if the icon justification has been set to Absolute). To apply an X and/ or Y offset to the icon, 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 Popup. • Font: To change the font used for text on the active popup page, click the browse button to open the Font dialog, where you can select a Font, Style and Size for the page text. • Text: To change or enter the text to be displayed on the active popup page, click the browse button to open the Enter Text dialog, where you can type the new popup page 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). Note: The maximum Command, String and Text length is 4096 characters. • Text Justification: To set or reset the justification setting for the popup page text, click the down-arrow and select an option from the list. • TPDesign4 Touch Panel Design Program 77 Working With Pages and Popup Pages Popup Page State Properties (Cont.) Parameter Description • Text X and Y Offsets: (available only if the text justification has been set to Absolute). To apply an X and/ or Y offset to the text, 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 Popup. • Word Wrap: Use this option to specify whether to wrap text strings that are too long to be displayed across the popup page on one line. Click the down-arrow and select Yes or No from the drop-down list. • Sound: To change or apply a new sound file to the popup page, 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. The sound will be played when the popup page is opened. Border Styles Anytime you create a new popup page or button, you'll have to assign a border name. If you don't want a border on the object, you can select "none" as the border name. There are several types of border names to choose from, and they all can all be assigned to both popup pages and buttons. Adding a Fill Color To a Popup Page To add a fill color to a Popup Page: 1. Create a new Page (Panel > Add Popup Page), or open an existing one (via the Workspace Navigator - Pages tab). 2. With the Popup Page selected, click on Fill Color, in the States tab of the Properties Control window to activate the browse button (...). 3. Click the browse button to open the Colors dialog, and select the color that you want to apply to the popup. Adding a Bitmap to a Popup Page With TPDesign4, you can apply a bitmap directly to a Popup Page in your project, to serve as the background image. To add a bitmap to a Popup Page: 1. Create a new Popup Page (Panel > Add Popup Page), or open an existing one (via the Workspace Navigator - Pages tab). 2. With the Popup Page selected, click on Bitmap, in the States tab of the Properties Control window to activate the browse button. 3. Click the browse button to open the Select Resource dialog, and select the bitmap that you want to apply to the Popup Page. If you don't see the desired image file listed in the Select Resource dialog, you need to import the image file into the project first. 4. Click Bitmap Justification (in the Properties Control window) to set the justification of the image on the Popup. Select Absolute to manually position the image. 78 TPDesign4 Touch Panel Design Program Working With Pages and Popup Pages TPDesign4 does not automatically scale or stretch images to fit the Popup. To scale an image to fit a target Popup Page, simply open the image in any graphics editor program, and scale the image to the exact size (in pixels) of the Popup Page. To check the size of the Popup Pages in your project, check the Width and Height values in the Properties Control window (General tab). Match the image size (in pixels) to the size indicated here. Adding an Icon to a Popup Page With TPDesign4, you can apply an Icon directly to a Popup Page in your project, to serve as the foreground image (See “State Draw Order (Z-Order)” on page 59.) This can be a powerful design tool, new to TPDesign4 and G4 panels. To add an icon to a Popup Page: 1. Create a new Popup page (Panel > Add Popup Page), or open an existing one (via the Workspace Navigator - Pages tab). 2. With the Popup Page selected, click on Icon Slot in the States tab of the Properties Control window to activate the Browse button. 3. Click the browse button (...) to open the Select Resource dialog, and select the icon that you want to apply to the popup. If you don't see the desired image file listed in the Select Resource dialog, you need to import the image file into the project first and apply it to a slot position. 4. Click Icon Justification (in the Properties Control window) to set the justification of the image on the popup. Select Absolute to manually position the image. Adding Text to a Popup Page Since G4 panels utilize address and channel port/address codes (and possess a single state), you can display text directly on a Popup Page in your project. If you are also displaying a bitmap on the Popup Page, the text will automatically be displayed on top of the bitmap. To add text to a Popup Page: 1. Create a new Popup Page (Panel > Add Popup Page), or open an existing one (via the Workspace Navigator - Pages tab). 2. With the Popup Page selected, click Text Color in the States tab of the Properties Control window to enable the browse button. Click the browse button to open the Colors dialog where you can select a color for the Popup Page text. 3. Click on Font in the States tab of the Properties Control window to enable the browse button, and select the desired font (in the Font dialog). 4. Click on Text, in the Properties Control window to open the Enter Text dialog. 5. Type the text to be displayed on the Popup Page (up to 4096 characters), and click OK. 6. Click Text Justification (in the Properties Control window) to set the justification of the text on the Popup Page. Select Absolute to manually position the text. TPDesign4 Touch Panel Design Program 79 Working With Pages and Popup Pages 7. Click Word Wrap, and select whether to wrap text that doesn't fit on a single line on the selected Popup Page (Yes or No). If you select No, any text that won't fit on the selected Popup may not be visible, depending on the text justification setting and the size of the Popup. Displaying a Video Source on a Popup Page TPDesign4 allows you to assign a video source as the background image on a Page, Popup Page or Button. To apply a video fill to a Popup Page: 1. Select (or a create) a Popup Page in your project. 2. In the Properties Control window - States Tab, click Video Fill to activate the drop-down list of available video sources (Source 1-4). If you are working with an existing popup page with buttons, be sure to click on the popup page (not on a button) to bring up the State Properties for the popup page, and not a button on the popup page. 3. Select a video source from the list to apply the video fill to the popup page. Replacing States On a Page, Popup Page or Button Replacing is a powerful way to populate the states of a button, page, or popup page, and can be accomplished either through the clipboard or by drag-and-drop: Replacing States From the Clipboard: 1. First select the button, page, or popup page whose states will be copied. From the State Manager window, select the source states. 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. When the source states have been selected, copy them to the clipboard by selecting either Edit > Copy, State Manager Context Menu > Copy , or the Ctrl-C keyboard accelerator. 3. With the source states copied to the clipboard, select the Multi-General or Multi-Bargraph button whose states will be replaced. 4. Select the destination states. The power of Replace is in its ability to handle sets of destination states unequal in number to the set of source states. If the number of destination states is equal to the number of source states, the destination states are replaced one-for-one from the clipboard. If the number of destination states is less than the number of source states, the destination states are replaced one-for-one until all have been replaced, with remaining source states being unused. If the number of destination states is greater than the number of source states, the destination states are replace one-for-one until all source states have been used, at which point replacing will start again at the beginning of the source states until all destination states have been replaced. 80 TPDesign4 Touch Panel Design Program Working With Pages and Popup Pages Replacing States Through Drag-and-Drop A simplified alternative to using the clipboard to replace states within the same button is to use drag-and-drop. 1. First select the source states. 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. With the source states selected, press and hold the left mouse button while over one of the selected states. 3. While continuing to press the left mouse button, move the mouse over the first state to be replaced. 4. Release the left mouse button. Beginning at the state the drop occurred over, states will be replaced one-for-one until either the number of source states have been used or the end of the states collection is reached. The same operation can also be performed with a right mouse button drag-and-drop, selecting Copy over… from the drag-and-drop menu. If you copy/paste or drag/drop a bitmap, icon or sound state property to a button or page in a different opened panel, only the property value is copied, not the image or sound file itself. If the destination panel does not have an image or sound file by the same name the operation will ultimately fail. For copy/paste or drag-and-drop operations of individual state properties between panel files to work, an image or sound file of the same name must exist in the target panel. Popup Page Groups Popup Page Groups provide a mechanism to group popup pages into mutually exclusive groups for display purposes. To create a Popup Page group: 1. Select a popup page in the Workspace Navigator (Pages tab). 2. In the Properties Control window (General tab), click Group to activate the down-arrow. 3. Click the down-arrow to open the editable field, and enter a name for the popup group folder. 4. The named Popup Group folder is created under the Popup Pages folder in the Workspace Navigator (Pages tab). 5. To place a popup page in a particular popup group, simply 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. 25 Popup Page Groups To remove a popup page from a group, select the popup page in the Workspace Navigator, and drag it out of the group, or set the Group field to None in the Properties Control window. TPDesign4 Touch Panel Design Program 81 Working With Pages and 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, 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). 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 or (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. Show/Hide Popup Pages The Show Popup Page and Hide Popup Page options can be selected via the Page menu, the Workspace Navigator context menu or the toolbar buttons (contained in the Main toolbar). The Hide All Popup Pages option is available via the toolbar button on the Main toolbar only. To show a Popup Page: Select a Popup Page in the Pages tab of the Workspace Window, and select Show Popup Page (or click the toolbar button). To hide a selected Popup Page: Select a Popup Page in the Pages tab of the Workspace Window, and select Hide Popup Page (or click the toolbar button). To hide all Popup Pages: Select Hide All Popup Pages in the Page menu, Design View context menu, or click the Hide All Popup Pages toolbar button). Alternatively, you can drag and drop a Popup Page from the Workspace Window onto a Design View window to show the selected Popup Page. Select Popup Pages to Show dialog With a Page open, select Page > Show Popup Pages (or click the toolbar button) to open the Select Popup Pages to Show dialog. Use this dialog to specify which of the popup pages in your project to display in the Design View window, and specify the order in which they are displayed. The items in this dialog include: Popup Page list: This is a list of the popup pages present in the active project. Click to select one or more popup pages to display. Order: Click the Order button to expand the dialog to show a second list box (empty). Use this list box to specify the order in which the popup pages are displayed (in terms of top to bottom). 82 TPDesign4 Touch Panel Design Program Working With Pages and Popup Pages To change the display order of the selected popup pages: 1. Select one or more popup pages in the list box and click the >> button to move them to the right-hand list box. 2. Once you have moved the popup pages that you want to display into the right-hand list box, use the up and down arrows to arrange the display order as desired. 3. The popup pages are drawn in the order specified in this dialog, so the last popup page drawn (the one at the bottom of the list) will appear on top of the stack of popup pages in the Design View window. Deleting Popup Pages From a Project To delete a popup page from the active project, select the popup page to delete in the Workspace Navigator (Pages tab), and select Edit > Delete. The program will prompt you to verify the popup page deletion first. Printing Pages and Popup 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. Each page and popup page in the project is printed one per page. 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. • 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 File > Print and File > Print Preview options invoke a message alerting you to install a printer. TPDesign4 Touch Panel Design Program 83 Working With Pages and Popup Pages 84 TPDesign4 Touch Panel Design Program Working With Buttons Working With Buttons TPDesign4 supports the following button types: General: "General" buttons are basic dual-state buttons that can be used for most touch panel functions, and are not associated with a specific functionality (as opposed to Bargraph and Joystick buttons, which have specific functionalities). Multi-State General: "Multi-State General" buttons are basic multi-state buttons that can be used for most touch panel functions, and that support up to 256 states. Use multistate buttons when you want to utilize animation effects. Bargraph: "Bargraph" buttons are level monitors and adjustable level controls that can be configured to monitor or adjust audio outputs and lighting levels. Multi-State Bargraph: "Multi-State Bargraph" buttons are level monitors and adjustable level controls that can be configured to monitor or adjust audio outputs and lighting levels, and that (like Multi-State General buttons) support up to 256 states. Use multistate buttons when you want to utilize animation effects. Multi-state bargraph buttons also allow you to create a custom bargraph slider (using an image icon). Joystick: "Joystick" buttons are vertical and horizontal direction controllers that can be used for pan and tilt control (typically for camera operation). Because Joystick buttons don't work in the same way as the other button types (in that they don't generate pushes/ releases), there is no On state associated with them. Joystick buttons only use the Off state, as is reflected in the State tab of the Properties Control window. Text Area: "Text Area" buttons are intended only to display text on the panel (noninteractive). Computer Control: "Computer Control" buttons provide a remote desktop to an attached PC running a VNC server, allowing you to control the PC via the Touch Panel interface (for remote control purposes). Computer Control buttons are constrained to one of three predefined and hard-coded sizes (640x480, 800x600 or 1024x768). These 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. External Controls: TPDesign v2.2 (or higher) supports editing the properties for programmable external controls (external pushbuttons and LEDs) for NXD-CV7, MVP7500, and MVP-8400 panels. You can edit external control properties on both a panelwide basis and on a page specific button-by-button basis. Global, 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. Double-click this entry to access a Design View Window representing the size and placement of the external buttons and LEDs, which may be selected like any other button for editing. Page specific external controls settings are accessed via each page's Design View (with the Page > Show External Controls option enabled). TPDesign4 Touch Panel Design Program 85 Working With Buttons Setting New Button Parameters Use the Drawing toolbar (FIG. 26) to set new button parameters. The settings that are specified in this toolbar become the default settings for all new buttons, until the settings are changed. This way, you can quickly create sets of buttons that are visually consistent. FIG. 26 Drawing toolbar 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 toolbar can either be free floating or docked, but cannot be docked in a vertical fashion, as the drop down lists contained on the toolbar do not support this type of docking. On the extreme left side of the toolbar, 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. You can control the button type, border family, font, font size, button fill color, border color and text color. To set new button parameters: 1. Select the Button Draw tool from the Button Selection/Draw toolbar. When the Button Draw tool is selected, the Drawing toolbar becomes activated. 2. Buttons are always drawn in the Off State. The Drawing toolbar (shown above) allows you to control certain new button creation properties for both the Off and the On state of a button. 3. 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). This selection becomes the default for all subsequent buttons, until the Button Type selection is changed. 4. Click the down-arrow on the second drop-down menu (to the right of the Button Type dropdown) to select a Border Style for the button. This selection becomes the default for all subsequent buttons, until the Border Style selection is changed. 5. Use the next two drop-down menus to specify a Font and Font Size as the default text attributes for new buttons. These selections become the default text settings for all subsequent buttons, until the Font and Font Size specifications are changed. 6. Click the down-arrow on the first palette button to set the Border Color for the button. Again, this selection becomes the default for all subsequent buttons, until the Border Color setting is changed. 7. Click the down-arrow on the second palette button to set the Fill Color for the button. This selection becomes the default for all subsequent buttons, until the Fill Color setting is changed. 8. Click the down-arrow on the third palette button to set the Text Color for the button. Of course, this selection becomes the default for all subsequent buttons, until the Text Color setting is changed. 86 TPDesign4 Touch Panel Design Program Working With Buttons Editing Button Properties Editing various properties for buttons is allowed and is exposed via the Properties Control window. In the Properties Control window you can select the button property that you wish to modify, and then immediately begin typing a new value in the corresponding text field. Once a property has been modified, you may either press the Enter key, the Prev or Next button, or left click the mouse in any box other than the current box. If the value is inappropriate for the selected object, you will be notified via a message, and the previous value will be replaced in the box. Buttons may be acted upon individually by clicking the Selection Tool from the toolbar or selecting Edit > Selection Tool from the main menu, then performing a left click on the desired button. You can also select multiple buttons, using any of the following techniques: 1. Left click the mouse on the remaining desired buttons while simultaneously depressing the Shift key on your keyboard. 2. 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. 3. In the Properties Control window, you may turn the Apply To All toggle button (located at the bottom of the Properties Control window) On, then individually select each desired button. 4. To select all available buttons on a page or popup page you may either use the Ctrl+A hotkey, or select Edit > Select All from the main menu. 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. If the Apply To All button is not depressed, and you select more than one button to act on, the Prev or Next buttons will activate on the Properties Control window. Also note that while you have multiple buttons selected, only one of them has the edit focus at any given time. Use the Prev and Next buttons to cycle through the selected buttons to view each button's properties in the Properties Control window. The button represented in the Properties Control window is the one with edit focus. All modifications are always on the button with the edit focus. If the Apply To All button is depressed and you select more than one button to act on, the Prev or Next buttons are unavailable and that every selected button has the edit focus. You may also notice that one or more (if not all) of the property values in the grid are blank. 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. Typing in or changing a value in any property box will immediately affect all selected buttons, provided that the change can be applied to them all. In the event that a value is appropriate for one (or more) buttons but inappropriate for others, you will see a message that states that the value was only applied to those buttons for which it was valid. You can de-select a button by either selecting another button, or by left-clicking on the background of the page or popup page. There are two tabs on the Properties Control window which separate the General properties from the State properties. The General properties apply across all the states of the button, while the States tab shows the properties that are applicable to each individual state. TPDesign4 Touch Panel Design Program 87 Working With Buttons Creating New Buttons There are several methods by which you can create a button in TPDesign4, but the most direct is by either clicking the Button Draw Tool from the Button Selection/Draw toolbar or clicking Edit > Button Draw Tool from the main menu, then placing you cursor within the boundaries of an open Design View and holding down the left mouse button while dragging the mouse. You will see a sizing rectangle as you drag the mouse, and this will allow you to create a button of any size that will fit on the screen. To complete the button draw action, release the left mouse button. The maximum number of buttons per page / popup page = 500. To create a new button: 1. Open the Page or Popup page that the button will be added to (double-click on the page in the Workspace Navigator (Pages tab) to open the page and bring it into edit focus). Buttons are always drawn in the Off State. 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. To toggle between Off and On states, single-click the State button. 2. Select the Button Draw tool from the Button Selection/Draw toolbar. When the Button Draw tool is selected, the Drawing toolbar becomes activated. 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 toolbar can either be free floating or docked, but cannot be docked in a vertical fashion, as the drop down lists contained on the toolbar do not support this type of docking. On the extreme left side of the toolbar, 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. You can control the button type, border family, font, font size, button fill color, border color and text color. 3. Set the new button parameters. These settings will become the new default settings for all new buttons, until they are changed. 4. With the Button Draw tool still selected, left-click inside the desired page (in the active Design View window), and while holding the left mouse button down, drag to draw the button to the desired size and shape (the minimum button size is 4 x 4 pixels). When using the Button Draw tool, hold down the SHIFT key while drawing to constrain the item to a square. When using the Selection Tool, 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). When using the Selection Tool, 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). Lasso selection forces you to draw a square around the outside of the item to select it, as opposed to clicking on the item. 88 TPDesign4 Touch Panel Design Program Working With Buttons With an item selected in a Design View window, 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. When using the circle, oval or diamond border types, you may notice the slider bar appearing partially outside of the button border. This is a result of scaling the button smaller than what the selected border requires to accommodate the slider bar. If you see this, try using a "smaller" border (i.e. try using "Circle 50" rather than "Circle 100"). Experiment with different border types to get the results you're after. 5. 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. This is a visual indication that the newly created button has the edit focus. Provided you have the Properties Control window visible, you will also see a table representing the various properties for the button type created. 6. Use the General, Programming and States tabs of the Properties Control window to specify general properties and state-specific properties for the selected button. 7. Select File > Save to save your changes. 8. Select View > Button Preview to preview the button (click Push to simulate a button press). Generated Button Names When new buttons are created, 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, separated by a colon (i.e. "Button 1 : general", "Button 2 : multi-state general", etc). However, TPDesign4 goes further in automatically generating a descriptive name for the button, based on the text and/or bitmap applied to the button: If you apply text to the button, the button text is substituted for the button number. For example if you create a new button (which is automatically named "Button 9"), then add the text "Welcome", note that the button is automatically renamed to "Welcome : general". Note that this name change occurs on the fly, and does not require a Save operation. Text on a button always overrides the presence of a bitmap. If there is text associated with a button, and you add a bitmap, the button name will not change. However, if the button has no text, when you apply a bitmap to the button, the button is automatically renamed to reflect the bitmap file name (i.e. "Background : general"). Note that if you change the text, the button is again renamed to reflect the updated text. Furthermore, any time you change the bitmap or the text on the button, the button name is automatically updated with either the latest text or bitmap assignment. This is where the Lock Button Name option (in the General tab of the Properties Control Window) comes into play. By default, the Lock Button Name option is set to Off. At any point in the design process, 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). However, Lock Button Name does not prevent you from manually renaming the button, via the Name field. TPDesign4 Touch Panel Design Program 89 Working With Buttons Using the Drawing Assist Features The Order Assist, Position Assist and Size Assist toolbars contains shortcuts to many layout and design control options for controlling various elements of existing button(s) size and position: Drawing Assist Tools Button(s) Button Name Description Send to Front/Send To Back When you have one or more buttons that overlap on the page, use these commands to place the selected button(s) to either the top or bottom layer on the page. Shift Up/Shift Down When you have one or more buttons that overlap 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). Align: Left, Horizontal Center, Right, Use the Align commands to quickly align selected Top, Vertical Center, Bottom buttons on the page, relative to each other (not relative to the area of the page). Choose which Align tool to use based on the shape and size of the selected buttons, and the desired design effect. You must select at least two buttons to enable the Align options, and note that the first button you select becomes the controlling button (all other buttons are moved to align with the controlling button). 90 Center Horizontal/Vertical Use these commands to quickly center one or more selected buttons either Horizontally or Vertically on the page. Make Same Width/Height/Size Select a button that has the width or height that you want to match, then select the button(s) that you want to resize, and click one of these commands. All selected buttons are resized to match the width or height of the controlling button (the first button selected). Size To Image Select a button that has either a bitmap or icon image assigned to it, and click Size To Image to automatically resize the button to the same size as it's associated bitmap or icon. Note that the border uses some of the interior area of the button. Depending on the size of the button, and the selected border type, 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, or cropped by the border style). As a design concept, try to choose button border styles that accommodate and compliment the button image (if there is one). For example, 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). Enforce 4/3 aspect ratio This options retains the 4/3 aspect ratio common to video fills. TPDesign4 Touch Panel Design Program Working With Buttons Drawing Assist Tool Toolbar (Cont.) Horizontal Spacing (Equal, Increase, Decrease, Remove) Use these commands to control the horizontal spacing between selected buttons. To distribute buttons evenly on the page, select equal spacing, then increase or decrease spacing as necessary. You must have at least three buttons selected to enable these options, and note that the first button you select becomes the controlling button (all other buttons are moved to align with the controlling button). Vertical Spacing (Equal, Increase, Decrease, Remove) Use these commands to control the vertical spacing between selected buttons. To distribute buttons evenly on the page, select equal spacing, then increase or decrease spacing as necessary. You must have at least three buttons selected to enable these options, and note that the first button you select becomes the controlling button (all other buttons are moved to align with the controlling button). Make Ideal For Border This command automatically resizes the selected button(s) to the smallest size possible that still accommodates the selected border. This option is typically for use with the Circle, Oval and Diamond border types. For example, if you create a button with the border "Circle 150", and draw a circle that is smaller than 150 pixels in diameter (or not perfectly round), the resulting button will not appear as a perfect circle. Click this command to resize the button to become a perfect circle. Increase/Decrease Width/Height For Border These commands are like nudge controls for button width and height. Click these buttons to adjust the button width/height in increments specific to the selected border. Note that since all measurements in TPDesign4 are zero-based, the Increase/Decrease Width commands will always adjust the width on the right side of the selected button(s), and the Increase/ Decrease Height command will always adjust the height on the bottom side of the selected button(s). Alignment & Sizing Tool The Alignment & Sizing dialog offers additional design tools. To access this dialog, you must have more than one button selected (in a Design View window). Use the options in this dialog to align and/or resize the selected buttons. The options in this dialog include: Alignment These options allow you to align the selected buttons horizontally, vertically (or both) along either the centers of the buttons, or along any edge (top, bottom, left or right). Note that the order in which the buttons are selected in the Design View window controls how several of these options work. Horizontal - select the type of horizontal alignment to apply to the selected buttons: none: No alignment (default setting). left edges: Aligns the left edges of all selected buttons. centers: Aligns the centers of all selected buttons. right edges: Aligns the right edges of all selected buttons. left edges to right: Aligns the left edges of selected buttons to the right edge of the button that was selected first. TPDesign4 Touch Panel Design Program 91 Working With Buttons right edges to left: Aligns the right edges of selected buttons to the left edge of the button that was selected first. left to right spacing: Aligns the left edge of the first selected button to the right edge of the next selected button. All selected buttons are aligned this way in the order in which they were selected. right to left spacing: Aligns the right edge of the first selected button to the left edge of the next selected button. All selected buttons are aligned this way in the order in which they were selected. Offset - The horizontal alignment values may be offset either absolutely or incrementally. Indicate the number of pixels to offset the alignment options (range = 0 - the horizontal measurement of the selected panel in pixels). Default = 0. Positive values offset the selections to the right, negative values offset them to the left. Vertical- select the type of vertical alignment to apply to the selected buttons: none: No alignment (default setting). top edges: Aligns the top edges of all selected buttons. centers: Aligns the centers of all selected buttons. bottom edges: Aligns the bottom edges of all selected buttons. top edges to bottom: Aligns the top edges of selected buttons to the bottom edge of the button that was selected first. bottom edges to top: Aligns the bottom edges of selected buttons to the top edge of the button that was selected first. top to bottom spacing: Aligns the top edge of the first selected button to the bottom edge of the next selected button. All selected buttons are aligned this way in the order in which they were selected. bottom to top spacing: Aligns the bottom edge of the first selected button to the top edge of the next selected button. All selected buttons are aligned this way in the order in which they were selected. Offset - The vertical alignment values may be offset either absolutely or incrementally. Indicate the number of pixels to offset the alignment options (range = 0 - the vertical measurement of the selected panel in pixels). Default = 0. Sizing These options allow you to resize the selected buttons to make them match in width, height or both. Note that the order in which the buttons are selected in the Design View window controls how several of these options work. Make Same Width: Resizes all selected buttons to match the width of the button that was selected first. Change: specify a number of pixels to add or subtract from the selections width (positive values add pixels, negative values subtract). Specify wether to adjust the sizing values absolutely or incrementally. Make Same Height: Resizes all selected buttons to match the height of the button that was selected first. 92 TPDesign4 Touch Panel Design Program Working With Buttons Change: specify a number of pixels to add or subtract from the selections height (positive values add pixels, negative values subtract). Specify wether to adjust the sizing values absolutely or incrementally. Setting General Button Properties Once you have created a new button, you can use the General tab of the Properties Control window to set/edit general (non-state oriented) button properties. The General tab contains a table that lists the button properties for the selected button type. Text area buttons are generally used to invoke a keyboard, keypad or cursor prompt on the panel. To edit any of the listed button properties, click on an item in the right-hand column to activate the field. Depending on the item selected, you can either set the item manually, select from a dropdown menu, or both. The following General button properties are supported (some properties only apply to certain button types, as indicated in the table): General Button Properties Parameter Description • Type: The Type (button type) defaults to the button type (General, Bargraph, Joystick, Multi-State General, Multi-State Bargraph or Text Area) that was set when the button was created. To change the button a different type, click Type to activate the button type drop-down menu, containing a list of all available button types. You can use this option to change the selected button's type. • Name: This is the button name. To give the button a specific name (other than the default Button 1, Button 2, Button 3 etc.), click Name to activate the editable field, where you can type the new name (max. 50 characters). • Lock Button Name: This option controls how the name of the selected button is managed by the program. When new buttons are created, 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, separated by a colon (i.e. "Button 1 : general", "Button 2 : multi-state general", etc.). However, TPDesign4 goes further in automatically generating a descriptive name for the button, based on the text and/or bitmap applied to the button: If you apply text to the button, the button text is substituted for the button number. For example if you create a new button (which is automatically named "Button 9"), then add the text "Welcome", note that the button is automatically renamed to "Welcome : general". Note that this name change occurs on the fly, and does not require a Save operation. Button Text always overrides the presence of a bitmap. If a button contains text, then assigning a bitmap to the button will not affect the button name. However, if no button text exists, and you apply a bitmap to the button, the button is automatically renamed to reflect the bitmap file name (i.e. "Background : general"). Note that if you change the text (or apply new text where there was none), the button is again renamed to reflect the updated text. Furthermore, any time you change the text on the button, the button name is automatically updated with either the latest text or bitmap assignment (if there is no text). This is where the Lock Button Name option comes into play. By default, Lock Button Name is set to Off. At any point in the design process, 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). However, Lock Button Name does not prevent you from manually renaming the button, via the Name field. • TPDesign4 Touch Panel Design Program 93 Working With Buttons General Button Properties (Cont.) Parameter Description • Left/Top: Position values. The Left and Top rows indicate the position of the selected button, in pixels, relative to the upper-left corner of the Design View window. You can edit these fields to apply specific positioning info for the button. Note that if you select the button and manually move it around on the page, these constantly update to indicate the current position. • Width/Height: Size values. The Width and Height rows indicate the dimensions of the selected button, in pixels. You can edit these fields to apply specific dimension info for the button. Note that if you select the button and manually resize it on the page, these constantly update to indicate the current dimensions. • Above Popups: This option allows you the selected button(s) on a Main page to always remain on top of any popup pages (default = No). This option is not available for buttons on a popup page. Note: If you set this property on a button (on a main page), then copy that button to a popup page, the program automatically resets this property to No. • Touch Style: This selection drop-down allows you to set a "touch style" for the selected button(s). Touch style describes the way buttons behave when pressed, in terms of the shape and border style used. For example, by using transparencies you could create a button that appears to be round (although the actual shape of the button is rectangular), in which case you may not the button to respond if the user presses outside of the circular border. See the Working With Touch Styles and Active Touch section on page 102 for details. • Remote Host (Computer Control buttons only): The IP or DNS resolvable address of the PC whose desktop is to be displayed. • Password (Computer Control buttons only): The password supplied by the designer. This password must match the password entered into the PC remote desktop server component. • Color Depth (Computer Control buttons only): Select the color depth to be applied to the button (high-color (16-bit) or true color (24-bit)). This setting should match that of the host PC. • Compression (Computer Control buttons only): Select wether to compress the image on the button (yes/no). By default, compression is disabled. • Scale To Fit (Computer Control buttons only): Select wether to automatically scale the image to fit the button (yes/no). By default, scaling is disabled. • Border Style: To change the Border Style for the selected button, click Border Style, and select the desired border style from the drop-down list. If a Border Style is selected here, then the Border Names (set at the state level, via the States tab) are limited to those contained in the selected Border Style. If no Border Style is specified, then all border names are available to choose from, at the state level. • State Count This read-only field indicates the number of states associated with the selected (Multi-State buttons only): button. • Animate Time Up The time intervals between states as the button animates from the Off to the On (Multi-State buttons only): state. This value is in 1/10th second increments (default = 2). • Animate Time Down The timer intervals between states as the button animates from the On to the Off (Multi-State buttons only): state. This value is in 1/10th second increments (default = 2). 94 • Disabled: Indicates how the selected button is rendered. If the button is set as Disabled (select Yes from the drop-down), the button will be rendered by the panel in a subdued state (default = No). • Hidden: Indicates whether or not the selected button is displayed on the panel. If the button is set as Hidden (select Yes from the drop-down), the button will disappear when downloaded to the panel (default = No). • Direction (Bargraph buttons only): Set the orientation of the bargraph to Vertical or Horizontal. TPDesign4 Touch Panel Design Program Working With Buttons General Button Properties (Cont.) Parameter Description • Slider Name (Bargraph buttons only): Select from a list of Slider Types. • Slider Color (Bargraph buttons only): Click the browse button to open the Colors dialog. Select a color to apply to the slider and click OK (or Cancel to exit without saving). • Password Protection: Choose the level of password protection to associate with this button (none, one, two, three, or four). • Auto-Repeat Select whether to apply auto-repeat to the button. Auto-repeat causes the button (Multi-State buttons only): to constantly cycle through its states (default = No). • Cursor Name (Joystick buttons only): Select a cursor type (arrow, ball, circle, crosshairs, etc.) from the drop-down list. The cursor types are previewed on the joystick button (in the design view window). • Cursor Color (Joystick buttons only): Click the browse button to open the Colors dialog, where you can select a color to apply to the cursor. • String Output Port: Select or enter the port to which the output string will be applied. • String Output: Specify the output string sent to the master on button push. Click the browse button to open the Enter Text dialog. Enter the output string and click OK (or Cancel to exit without saving). Maximum Command, String and Text length = 4096 characters. • Command Port: Select or enter the port to which the command string output will be applied. • Command Output: Specify the command string sent to the master on button push. Click the browse button to open the Enter Text dialog. Enter the command output and click OK (or Cancel to exit without saving). Maximum Command, String and Text length = 4096 characters. • Password Character (Text Area button only): Type a single character to be used as the password to access this text area button. • Display Type (Text Area button only): Click to select the display type to be invoked by this text area button (single or multiple lines). • Max Text Length (Text Area button only): Use this field to specify the maximum number of characters allowed to be entered via this button. The range is 0-2000, the default setting is 0. • Input Mask (Text Area button only): This field allows you apply a mask to user input on the panel. An input mask allows you to force the user to enter the correct type of characters (numbers vs. characters), suggest a proper format with fixed characters, to change or force character case, to create multiple logical fields that act as a single field, to specify a range of characters / numbers for each field, to set the input as required or optional, and/or fill the field from the right or the left. The following types of input masks that can be used: • Input Mask Characters • Input Mask Ranges • Input Mask Next Field Characters • Input Marks Operators To define a literal, the user may enter any character other than those shown in the topics above, including spaces and symbols. A back-slash (‘\’) causes the character that follows to be displayed as the literal character. For example, \A is displayed as just A. • Page Flip: TPDesign4 Touch Panel Design Program Click to view/create a list of page flips. Click the browse button to open the Button Page Flip Actions dialog. 95 Working With Buttons Level Control Parameters The Level Control Type options (set in the General tab of the Properties Control Window) allow Genera and Multi-State General buttons to directly control a level without the need for NetLinx code. Select a level control type for the selected button (Absolute, Relative or None): Absolute: The button acts like a preset and sets the level to the desired value. Relative: The button increments or decrements the current level value by a fixed amount. These options require the following additional parameters to be defined: • Level Port: Select or enter the port to which the Level code will be applied. Select 0 (Setup port) or 1 as the level port for this button. • Level Code: Select or enter the level code sent to the master on the selected port. Select Auto-Assign to automatically assign the level code to this button. • Level Control Value: For Absolute level control, this value determines the level value that will be recalled by this button. For Relative level control, this value determines the amount of adjustment relative to the current level resulting from this button. 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). • Range Low: Set the bottom of the level range (0-255). • Range High: Set the top of the level range (0-255). • Level Control Repeat This value determines the repeat time (in 1/10th-second incre(Relative Level Control only): ments) for relative level control. For example, if this value is set to 10, 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: 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). • Range Time Down: 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). Input Mask Characters (Text Area button only) 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 state property for Text Area buttons): 0 Digit (0 to 9, entry required, plus [+] and minus [–] signs not allowed). 9 Digit or space (entry not required, plus and minus signs not allowed). # Digit or space (entry not required; plus and minus signs allowed). L Letter (A to Z, entry required). ? Letter (A to Z, entry required). A Letter or digit (entry required). a Letter or digit (entry required). & Any character or a space (entry required). C Any character or a space (entry required). 96 TPDesign4 Touch Panel Design Program Working With Buttons Input Mask Ranges (Text Area button only) Input Mask Ranges allow a user to specify the minimum and maximum numeric values for a given field. Only one range is allowed per field and the use of a range implies numeric entry only. The following table lists the available input mask ranges (for use with the Input Mask state property for Text Area buttons): [ Start Range ] End Range | Range Separator Input Mask Operators (Text Area button only) Input Mask Operators change the behavior of the field in various ways. The following table lists the available Input Marks Operators (for use with the Input Mask state property for Text Area buttons): < Causes all characters to be converted to lowercase. > Causes all characters to be converted to uppercase. ^ Sets the overflow flag for this field. Input Mask Next Field Characters (Text Area button only) 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 area. The following table lists the available Input Mask Next Field characters (for use with the Input Mask state property for Text Area buttons): { Start Next Field List } End Next Field List Setting Button Programming Properties Once you have created a new button, you can use the Programming tab of the Properties Control window to set/edit general (non-state oriented) button properties. The Programming tab contains a table that lists the programming-related button properties for the selected button type. To edit any of the listed button properties, click on an item in the right-hand column to activate the field. Depending on the item selected, you can either set the item manually, select from a dropdown menu, or both. The following programming-related button properties are supported (some properties only apply to certain button types, as indicated in the following table): TPDesign4 Touch Panel Design Program 97 Working With Buttons Button Programming Properties Parameter Description • Feedback: Select the type of feedback (if any) to associate with this button (none, channel, inverted channel, always on, momentary or blink). • Address Port: Select or enter the port to which the address code will be applied. • Address Code: Select or enter the address code sent to the master on the selected port. • Channel Port: Select or enter the port to which the channel code will be applied. • Channel Code: Select or enter the channel code sent to the master on the selected port. • Level Control Type: These options allow General buttons to directly control a level without the need for NetLinx code. Select a level control type for the selected button (Absolute, Relative or None). These options require additional parameters to be defined. Absolute: The button acts like a preset and sets the level to the desired value. Relative: The button increments or decrements the current level value by a fixed amount. • String Output Port: Select or enter the port to which the output string will be applied. • String Output: Specify the output string sent to the master on button push. Click the browse button (...) to open the Enter Text dialog. Enter the output string and click OK (or Cancel to exit without saving). • Command Port : Select or enter the port to which the command string output will be applied. • Command Output: Specify the command string sent to the master on button push. Click the browse button (...) to open the Enter Text dialog. Enter the command output and click OK (or Cancel to exit without saving). • Level Port (Bargraph and Joystick buttons only): Select or enter the port to which the Level code will be applied. • Level Code (Bargraph and Joystick buttons only): Select or enter the level code sent to the master on the selected port. • Level Aux: This (read-only) field indicates the auxiliary level sent to the Master on the selected port. • Level Function (Bargraph and Joystick buttons only): Select Display Only, Active, Active Centering, Drag or Drag Centering. See Level Functions below for details. • Range Drag Increment (Bargraph and Joystick buttons only): Specify the amount of change that will be registered by one full drag across the control, to allow for fine/coarse adjustments. This option is available only if Drag is selected as the Level Function. • Range Low (Bargraph and Joystick buttons only): Set the bottom of the bargraph/joystick range (0-255). • Range High (Bargraph and Joystick buttons only): Set the top of the bargraph/joystick range (0-255). • Range Inverted (Bargraph and Joystick buttons only): Travel top to bottom or right to left (depending on the Direction setting, default = Off). • Range Aux Inverted: If set to Yes, only the Level Aux range is inverted (default = No). Note: Maximum command, string and text length = 4096 characters. 98 TPDesign4 Touch Panel Design Program Working With Buttons Button Programming Properties (Cont.) Parameter Description • 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. This option is only available if Active or Active Centering was selected as the Level Function (see above). • 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. This option is only available if Active or Active Centering was selected as the Level Function (see above). Level Functions Bargraphs, Multi-State Bargraphs, and Joysticks have 'drag' and 'drag centering' level functions that allow for "glide-point" style controls, and fine/coarse adjustment controls. Level Functions are programming properties and are specified in the Programming tab of the Properties Control window. Select the desired level function for the selected bargraph or joystick button: Display Only: This option creates a bargraph or joystick button that only displays level information (but cannot be used to control levels). Active: This option creates a bargraph or joystick button for controlling levels according the other button parameters set here. Active Centering: This option creates a an active bargraph or joystick button that returns to it's center position when released. Drag: This option creates an active bargraph or joystick button that responds to a relative touch distance on the button after the initial touch, to allow for glide-point style controls. When set to Drag, the user can touch anywhere inside the joystick button and move the level (according to the Range Drag Increment setting). Drag Centering: This option creates an active drag bargraph or joystick button that returns to it's center position when released. The Range Drag Increment field becomes available only if Drag is selected as the Level Function (this property is available for Bargraph and Joystick buttons only), and 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. Setting Button State Properties Once you have created a new button, you can use the States tab of the Properties Control window to set/edit state-oriented button properties. The State tab contains a table that lists the button properties for the selected button type. The State tab of the Properties Control window works in conjunction with the State Manager window. Note that if the State Manager is not displayed, or if no state(s) are selected in the State Manager, the States tab shows a list of all states associated with the selected button. Each state represented in the States tab is a collapsed folder containing the state properties for that particular state. Click the + symbol to expand each folder. If you select a state (or multiple states) in the State Manager, then the States tab only represents the selected state(s). TPDesign4 Touch Panel Design Program 99 Working With Buttons The following button state properties are supported (some properties only apply to certain button types, as indicated in the table): Button State Properties Parameter Description • 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, then all border names are available to choose from. • Border Color: To change the border color for the selected state(s), click the browse button to open the Colors dialog. • Fill Color: To change the border color for the selected state(s), click the browse button to open the Colors dialog. Note that 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. Also note that 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. • Text Color: To change the border color for the selected state(s), click the browse button to open the Colors dialog. • 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. • 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. • Video Fill: To apply a video fill to the selected state(s), click the down-arrow to open the list of available video sources (1-4). This option is only available for video-capable panels (NXP-TPI/4, NXD/T-CV12, NXD/T-CV15). If your project specifies a panel that supports wireless video the Wireless Input option is available as a video source. If a video source is selected, the Video Cropping and Video Pass-Thru options become available: • 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 (used for display of non-4:3 video without letterbox areas). For best results, set the video button's aspect ratio to match the video input aspect ratio. • Video Pass-Thru: Select Yes from the drop-down menu to enable video pass-thru (disabled by default). 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 pass-thru) send commands. • 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. Note: 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. 100 TPDesign4 Touch Panel Design Program Working With Buttons Button State Properties (Cont.) Parameter Description • 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. • Bitmap X and Y Offsets: (available only if the bitmap justification has been set to Absolute). 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. • 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. Icons appear on top of the bitmap image (if one is applied). See Z-Order for details. • 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. • Icon X and Y Offsets: (available only if the icon justification has been set to Absolute). 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. • 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. • Text: To change or enter the text to be displayed on the selected state(s), type the text in this field. If you intend to enter multiple lines of button text, then click the browse button to open the Enter Text dialog, and type the new button text (or edit existing text). Use the Preview Using Font option (in the Enter Text dialog) to view the text as it will appear in the selected font, style and size (on by default). Note: 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. Due to limitations at the operating system level, Windows 98 does not support Unicode fonts. • 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. • Text X and Y Offsets: (available only if the text justification has been set to Absolute). 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. • Text Effect: Text effects are graphic effects that can applied to button text (for example, the Glow effect applies a neon glow or halo effect to the text on the selected button/ states(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 submenu 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. • Word Wrap: Use this option to specify whether to wrap text strings that are too long to be displayed across the button on one line. Click the down-arrow and select Yes or No from the drop-down list. TPDesign4 Touch Panel Design Program 101 Working With Buttons Button State Properties (Cont.) Parameter Description • 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. The sound will occur only when the button is in the particular state that has the sound association, and only when that state is encountered after a release. For example, if you associate a sound with state one on a general type button, the sound will not occur until the button is released, and returns to state one (as opposed to occurring when state one is initially encountered). All States option Use the All States option 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). To edit any of the listed button properties, click on an item in the right-hand column to activate the field. Depending on the item selected, you can either set the item manually, select from a dropdown menu, or both. Working With Touch Styles and Active Touch TPDesign4 supports Active Touch technology, which allows you to control the way buttons behave when pressed, in terms of the shape and border style used. For example, by using transparencies you could create a button that appears to be round (although the actual shape of the button is rectangular), in which case you may not the button to respond if the user presses outside of the circular border. The use of Active Touch is set via the Touch Style button property (in the General tab of the Properties Control Window). There are three touch styles to choose from: Active touch: This touch style limits the active touch area to the visible area of the button. Areas of the button that are totally transparent will not respond to a press. For example, if you created a totally transparent button with no border and an icon, only the icon would respond to a press. Similarly, if a transparent button has a visible border but no icon, only the border will respond to a press. Touching the transparent areas of the button does not active the button. Active Touch requires total transparency on the button in order to work. To make a button totally transparent, set the Overall Opacity (state) setting to 0. If Overall Opacity is set to any other value (for partial transparency), Active Touch will not work. 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). Pass through: This style allows the user to press "through" one button to press another button underneath. If there is no other button underneath the pass through button, the user simply presses the page (with no resulting action). 102 TPDesign4 Touch Panel Design Program Working With Buttons Adding Text to a Button Since button text is a state-specific property, you can add or change the button text via the State tab of the Properties Control window: 1. Select the button that you want to add or change the text on (with the selection tool). 2. In the States tab of the Properties Control window, click on the Text field in the state that you want add the text to. This enables the button. Button text is state-specific, so keep in mind whether you want the text to occur on all states, or only on specific states. 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, or use the Text field under All States to add the text to every state in the button. 3. Type the button text in the editable field. You don't have to click the browse button to open the Enter Text dialog unless you intend to enter multiple lines of text. Also use the Enter Text dialog to edit existing button text, if any exists. 4. Click anywhere outside of the Text field to set the button text (or click OK to close the Enter Text dialog, if it was opened). Changing Button Text Color Since button text color is a state-specific property, you can add or change the button text color via the State tab of the Properties Control window: 1. Select the button that you want to add or change the text color on (with the selection tool). 2. In the States tab of the Properties Control window, click on the Text Color field in the state that you want add the text to. This enables the button. Button text color is state-specific, so keep in mind whether you want the text color to occur on all states, or only on specific states. Each state of the selected button is represented individually in the States tab of the Properties Control window, so use the Text Color field in the state that you want to change, or use the Text Color field under All States to add the text to every state in the button. 3. Click the browse button to open the Colors dialog, where you can change the text color. 4. Click OK to close the Colors dialog. Formatting Codes (Bargraph and Multi-Bargraph buttons only) Formatting codes can be used in the state text for bargraph and multi-bargraph buttons. The following formatting codes will be replaced with the identified values: • $P level percentage • $V raw level value • $L range low • $H range high • $A adjusted level value (raw level value - range low) • $R range (range high - range low) • $$ $ character TPDesign4 Touch Panel Design Program 103 Working With Buttons Adding a Bitmap to a Button Since bitmap assignment is a state-specific property, you can add or change the button bitmap assignment via the State tab of the Properties Control window: 1. Select the button that you want to add or change the text on (with the selection tool). 2. In the States tab of the Properties Control window, click on the Bitmap field in the state that you want add the bitmap to. This enables the browse button. Button bitmaps are state-specific, so keep in mind whether you want the bitmap to occur on all states, or only on specific states. Each state of the selected button is represented individually in the States tab of the Properties Control window, so use the Bitmap field in the state that you want to change, or use the Bitmap field under All States to add the bitmap to every state in the button. 3. Click the browse button to open the Select Resource dialog, where you can select the desired bitmap. Note that only bitmaps that have already been imported into the project are listed in the Select Resource dialog. Use the Import button (at the lower-left of this dialog) to import new bitmaps into the project. 4. Click OK to close the Select Resource dialog. Adding an Icon to a Button With TPDesign4, you can apply Icons to buttons in your project, to serve as the foreground image (See “State Draw Order (Z-Order)” on page 59.) This can be a powerful design tool, new to TPDesign4 and G4 panels. Since Icon assignment is a state-specific property, you can add or change the button Icon assignment via the States tab of the Properties Control window. To add an icon to a button: 1. Select the button that you want to add an Icon to (with the Selection tool). 2. In the States tab of the Properties Control window, click on the Icon Slot field in the state that you want add the bitmap to. This enables the browse button. Button icons are state-specific, so keep in mind wether you want the icon to occur on all states, or only on specific states. Each state of the selected button is represented individually in the States tab of the Properties Control window, so use the Icon Slot field in the state that you want to change, or use the Icon Slot field under All States to add the icon to every state in the button. 3. Click the browse button (...) to open the Select Resource dialog, where you can select the desired icon. If you don't see the desired image file listed in the Select Resource dialog, you need to import the image file into the project first and apply it to a slot position. 4. Click Icon Justification (in the Properties Control window) to set the justification of the image on the popup. Select Absolute to manually position the image. 104 TPDesign4 Touch Panel Design Program Working With Buttons Changing the Button Fill Color Since button fill color is a state-specific property, you can add or change the button fill color via the State tab of the Properties Control window: 1. Select the button that you want to add or change the fill color on (with the selection tool ). 2. In the States tab of the Properties Control window, click on the Fill Color field in the state that you want to change the fill color on. This enables the browse button. Button fill color is state-specific, so keep in mind whether you want the fill color to occur on all states, or only on specific states. Each state of the selected button is represented individually in the States tab of the Properties Control window, so use the Fill Color field in the state that you want to change, or use the Fill Color field under All States to change the fill color on every state in the button. 3. Click the browse button to open the Colors dialog, where you can change the fill color. 4. Click OK to close the Colors dialog. Border Styles Anytime you create a new popup page or button, you'll have to assign a border name. If you don't want a border on the object, you can select "none" as the border name. There are several types of border names to choose from, and they all can all be assigned to both popup pages and buttons. Chameleon Buttons If a button or popup page state has its Border Name state property set to none, a Chameleon Image may be set for that state. Chameleon buttons are buttons that utilize a new state property (TPD4 v2.4 or higher) called Chameleon Image. Chameleon Images utilize the 4 color channels that are utilized by 32-bit images (Red, Blue, Green and Alpha) to define colorizable regions and add various effects such as animated glows and dropshadows: The Alpha channel of the Chameleon image defines the overall shape mask for the state. The Red channel defines the area that will be filled with the state’s Fill Color. The Green channel defines the area that will be filled with the state’s Border Color. The Blue channel is not used. The Chameleon Image state property is available for all button types except Text Input, Computer Control and TakeNote buttons. Click the browse button (...) next to the Chameleon Image option (in the States tab of the Properties Control window) to open the Select Resource dialog, where you can select an image to apply as the Chameleon Image. TPDesign4 Touch Panel Design Program 105 Working With Buttons Displaying a Video Source on a Button TPDesign4 allows you to assign a video source as the background image on a Page, Popup Page or Button. To apply a video fill to a Button: 1. Select (or a create) a Button in your project. 2. In the Properties Control window - States Tab, click Video Fill to activate the drop-down list of available video sources (Source 1-4). Since this is a state-oriented setting, be sure to consider all of the button states when applying the video fill. To apply the video fill across all states, use the All States option in the Properties Control window (States tab). Alternatively, you can use Ctrl+A to select all states in the State Manager window. 3. Select a video source from the list to apply the video fill to the button. Creating a Time Button A Time Button is a button that displays the current time on the panel. It is a read-only noninteractive button. To create a time button: 1. Create a new button. The button can be of any type, but normally you would use the General button type. 2. In the Programming tab of the Properties window, click the Address Port field to enable the drop-down menu. 3. Select 0-setup port from the drop-down menu. 4. Click the Address Code field to enable the drop-down menu (none, Date Display, Time Display). 5. Click the plus (+) symbol next to Time Display to expose a drop-down menu of time display formats to choose from. 6. Select the desired display format (24-hour, Standard or Standard AM/PM). Creating a Date Button A Date Button is a button that displays the current date on the panel. It is a read-only noninteractive button. To create a date button: 1. Create a new button. The button can be of any type, but normally you would use the General button type. 2. In the Programming tab of the Properties window, click the Address Port field to enable the drop-down menu. 3. Select 0-setup port from the drop-down menu. 4. Click the Address Code field to enable the drop-down menu (none, Date Display, Time Display). 5. Click the plus (+) symbol next to Date Display to expose a drop-down menu of time display formats to choose from. 6. Select the desired display format (Weekday, dd/mm/yyyy, yyyy-mm-dd, etc). 106 TPDesign4 Touch Panel Design Program Working With Buttons Time and Date buttons do not display any text when viewed in TPDesign4. The time or date is only visible once the project is loaded on a touch panel. Creating a Custom Slider (Multi-Bargraph Buttons) Multi-State Bargraph buttons work differently than regular Bargraph buttons. Note that when you draw a Multi-State Bargraph button, that there is no slider indicated on the button (in the Design View window). Also note that unlike regular bargraph buttons, there are no slider-oriented settings to make in the Properties Control window. This is because multi-state bargraph buttons, like multi-state General buttons, use up to 255 states to animate the button action. In the case of Bargraph buttons, you'll be animating a change in levels as opposed to a push/release, as on Multi-State General buttons. Rather than assign a prepared slider, like you would for a normal Bargraph button, you can animate an icon across the states to serve as a custom slider. Custom sliders on Multi-state Bargraph Buttons work on the panel basically the same as regular sliders. You adjust a level, you touch the bargraph button and move the slider up and down (or side to side on a horizontal Bargraph button). To create a custom slider: 1. Create a Multi-State Bargraph button. 2. Select State 1 in the Properties Control Window (States tab), or in the State Manager window. 3. Apply a Icon Slot assignment to State 1. 4. Set the Icon Justification to Absolute. 5. In the Image and Text Positioning dialog (right-click on the button and select Image and Text Positioning), move the icon into the position that you want to be the "start position" for the bargraph slider. The start position for Multi-State Bargraph buttons is always the bottom of the bargraph (representing the minimum level setting). One key difference between regular and Multi-State Bargraph buttons is the way they work on the panel. The button action is the same (press the bargraph slider and drag to adjust the level), but while regular bargraph buttons can be set as either horizontal or vertical, Multi-State Bargraph buttons are always oriented vertically. The user will always press and drag the slider up and down to adjust the level. Keep this in mind when setting up a custom slider. Always begin the icon animation starting (at State 1) at the bottom position, and ending at the top. 6. Add States to the button (up to 255 total), duplicating State 1 (containing the icon). Generally, you'll want to delete the "extra" state at the end of the sequence, which does not contain the icon (the original State 2 setting). Keep in mind that the more states used to animate the movement of the icon, the smoother and more accurate the slider will be. The range of motion (i.e. the size of the button that the icon will travel across) needed for the slider should be taken in to consideration as well. 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). 7. In the State Manager window, Ctrl+click to select just the first and last states. TPDesign4 Touch Panel Design Program 107 Working With Buttons 8. Right-click on either of the selected states and select Slot Position from the Tweeners submenu. The results of the tweening are displayed in the State Manager window. To preview the custom slider in action, open the Button Preview window, and click and drag with the mouse cursor to move the slider up and down. Remember, you can also utilize the other tweeners in conjunction with the custom slider to create complex color transition effects. Using Touch Maps for Multi-State Bargraphs Buttons TPDesign4 supports Touch Maps for Multi-State Bargraph buttons (only). Touch Map images allow you to use irregular shapes for active bargraph buttons. If you select Touch Map as the Value Direction in the States tab of the Properties Control window, an additional state property is displayed called Touch Map. Click the browse button (...) next to Touch Map to select an image to use as a Touch Map via the Resource Manager. The alpha values in the selected image represent the areas where touch will be registered, and the red-channel values represent the overall value to change the control to. Working With Joystick Buttons "Joystick" buttons are vertical and horizontal direction controllers that can be used for pan and tilt control (typically for camera operation). Because Joystick buttons don't work in the same way as the other button types (in that they don't generate pushes/releases), there is no On state associated with them. Joystick buttons only use the Off state, as is reflected in the State tab of the Properties Control window. Working With Text Input Buttons Text Input Buttons are intended only to display (non-interactive) text on the panel. Working With Computer Control Buttons Computer Control buttons provide a remote desktop to an attached PC running a VNC server, allowing you to control the PC via the Touch Panel interface (for remote control purposes). Computer Control buttons are constrained to one of three predefined and hard-coded sizes (640x480, 800x600 or 1024x768). These 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. Unlike most other button types, Computer Control buttons only use one state: Off. 108 TPDesign4 Touch Panel Design Program Working With Buttons Working With State Properties All G4 panel entities have at least one state: Pages and popup pages have only one state. General, Bargraph and Text Area buttons have only two states. Multi-State General and Multi-State Bargraph buttons have from 2 to 256 states. Joystick and Computer Control buttons have only one state (Off). The ability to set state-oriented properties (including text/font settings, fill and border colors, bitmap, slot and video fills) is provided via the States tab of the Properties Control window. The State Manager window allows you to view/edit individual states on a selected button. This interface supports full Cut, Copy, Delete, Insert, Replace and Paste as well as drag and drop capabilities. Right mouse click support allows the user to Add single or multiple states, Replace states, Insert single or multiple states and Remove states. For Multi-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-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. Setting State Properties The State Manager interacts with the States tab of the Properties Control window to allow the visual aspects of a button, page, or popup page to be set. If the State Manager is not visible, or if no states have been selected, the State Properties will show a list of all of the states for the selected button, page, or popup page. The individual properties for a state can be shown or hidden by clicking either on the "State n" category item or by clicking the +/- tree control for that state. If states have been selected in the State Manager, the State Properties will represent the intersection of the selected states, reflected by the text of the title item. Setting a property value will propagate that value across all selected states. TPDesign4 Touch Panel Design Program 109 Working With Buttons 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): By duplicating an existing state on the button By pasting states that have been copied to the clipboard By a drag-and-drop copy operation For Multi-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-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. 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. 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 leftclicking 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 by selecting either Edit > Copy, State Manager Context Menu > Copy, or the Ctrl-C keyboard accelerator. 110 TPDesign4 Touch Panel Design Program Working With Buttons 4. With the source states copied to the clipboard, select the Multi-General or Multi-Bargraph button to add the copied states to. If the states are to be added to the end of the collection, ensure that no states are currently selected in the State Manager. A quick way to de-select all states is by left-clicking anywhere outside of a state thumbnail. 5. Paste the states from the clipboard using either the Edit > Paste, State Manager Context Menu > Paste, or the Ctrl-V keyboard accelerator. 6. If the states are to be added elsewhere in the collection, first left-click to select the state prior to which the new states will be inserted. Then insert the states from the clipboard by selecting either Edit > Insert, State Manager Context Menu > Insert, or the Ctrl-V keyboard accelerator. 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. Adding States Through Drag-and-Drop A simplified alternative to using the clipboard to add copies of states within the same button is to use drag-and-drop: 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. 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. 3. Release the right mouse button and select Insert copy... from the drag-and-drop menu. 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 either Edit > Delete, State Manager Context Menu > Delete, or the Del key. TPDesign4 Touch Panel Design Program 111 Working With Buttons 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. Changing the Order Of States On A Button Changing the order of states in a Multi-General or Multi-Bargraph button can be accomplished either through the clipboard or by drag-and-drop: Reordering States Through the Clipboard 1. Select the states to be moved. 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. 3. If the states are to be moved to the end of the collection, ensure that no states are currently selected in the State Manager. A quick way to de-select all states is by clicking with the left mouse button anywhere outside of a state thumbnail. Then paste the states from the clipboard. 4. If the states are to be moved elsewhere in the collection, first left-click to select the state prior to which the new states will be inserted. Then insert the states from the clipboard (Edit > Insert). 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. 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. 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 drag-and-drop, selecting "Move…" from the drag-and-drop menu). 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. Even empty slots use some system memory, so it is a good idea to minimize the number of unused slots in your project. 112 TPDesign4 Touch Panel Design Program Working With Buttons Choose Display State dialog This dialog is accessed when you select Choose Display State from the Display sub-menu (in the Design View context menu). Use this dialog to select which state of the selected button to display in the Design View. This dialog displays a list of all available states for the selected button. Select there state you want to display, and click OK. Button Preview window Select View > Button Preview to open the Button Preview window. Like the other windows in TPDesign4, the Button Preview window is fully dockable, but initially it opens undocked. Doubleclick inside the title bar to dock the window. The Button Preview window displays a preview of the selected button. Initially the button is shown in its Off state. Button Preview is not available for Joystick Buttons. This window includes three command buttons: Click the Disable button to disable the button preview, but not close the Button Preview window. Click again to enable the preview. Click the Mute button to mute any sounds associated with this button. Click the Push button to simulate a push on the selected button. This allows you to visually preview the On/Off states (and all states in between, for multi-state buttons). Right-click inside the preview area of the Button Preview window to access the Button Preview context menu. Working With External Controls (Pushbuttons/LEDs) TPDesign v2.2 (or higher) supports editing the properties for programmable external controls (external pushbuttons and LEDs) for NXD-CV7, MVP-7500, and MVP-8400 panels. You can edit external control properties on both a panel-wide basis and on a page specific button-by-button basis. The global, 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. Double-click this entry to access a Design View Window representing the size and placement of the external buttons and LEDs, which may be selected like any other button for editing. Page specific external controls settings are accessed via each page's Design View (with the Page > Show External Controls option enabled). TPDesign4 Touch Panel Design Program 113 Working With Buttons Setting Global General Properties for External Pushbuttons and/or LEDs 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). Double-click on the External Controls entry to display a Design View Window representing the layout of the external controls on the target panel, which may be selected like any other button to edit their properties. Use the Selection Tool to pick the external control that you want to configure (in the Design View Window). Once you have selected an external button , you can use the General tab of the Properties Control window to set/edit general external control properties. To edit any of the properties in the table, click on an item in the right-hand column to activate the field. Depending on the item selected, you can either set the item manually, select from a drop-down menu, or both. The following global, general button properties are supported for external controls: Name – This is the name of the selected external control. To give the external control a specific name (other than Left Menu Button 1, etc.), click Name to activate the editable field, where you can type the new name (max. 50 characters). Disabled – This option allows you to disable the external control (default = No). Password Protection – Choose the level of password protection to associate with this external control (none, one, two, three, or four). Page Flip – Click to view/create a list of page flips. Click the browse button (...) to open the Button Page Flip Actions dialog. Setting Global Programming Properties for External Pushbuttons and/or LEDs Once you have selected an external control, you can use the Programming tab of the Properties Control window to set/edit programming-oriented button properties. To edit any of the properties in the table, click on an item in the right-hand column to activate the field. Depending on the item selected, you can either set the item manually, select from a drop-down menu, or both. The following global programming properties are supported for external controls: Address Port – Select or enter the port to which the address code will be applied. Address Code – Select or enter the address code sent to the master on the selected port. Channel Port – Select or enter the port to which the channel code will be applied. Channel Code – Select or enter the channel code sent to the master on the selected port. Level Control Type – These options allow external buttons to directly control a level without the need for NetLinx code. Select a level control type for the selected button (Absolute, Relative or None). These options require additional parameters to be defined. Absolute: The button acts like a preset and sets the level to the desired value. Relative: The button increments or decrements the current level value by a fixed amount. String Output Port – Select or enter the port to which the output string will be applied. 114 TPDesign4 Touch Panel Design Program Working With Buttons String Output – Specify the output string sent to the master on button push. Click the browse button (...) to open the Enter Text dialog. Enter the output string and click OK (or Cancel to exit without saving). Command Port – Select or enter the port to which the command string output will be applied. Command Output – Specify the command string sent to the master on button push. Click the browse button (...) to open the Enter Text dialog. Enter the command output and click OK (or Cancel to exit without saving). Maximum command, string and text length = 4096 characters. Setting Page-Specific General Properties for External Pushbuttons and/or 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. 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. Select Pages > Show External Controls to change the Design View to represent the layout of the external buttons on the target panel. Use the Selection Tool to pick the external control that you want to configure (in the Design View Window). Once you have selected an external control, you can use the General tab of the Properties Control window to set/edit general button properties. To edit any of the properties in the table, click on an item in the right-hand column to activate the field. Depending on the item selected, you can either set the item manually, select from a drop-down menu, or both. Setting Page-Specific Programming Properties for External Pushbuttons and/or LEDs Once you have selected an external control, you can use the General tab of the Properties Control window to set/edit general button properties. To edit any of the properties in the table, click on an item in the right-hand column to activate the field. Depending on the item selected, you can either set the item manually, select from a drop-down menu, or both. Copy/Convert External Controls Between Panels TPDesign4 supports copying and converting the properties for programmable external controls (external pushbuttons and LEDs) for NXD-CV7, MVP-7500, and MVP-8400 panels. The global, 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. Double-click this entry to access a Design View Window representing the size and placement of the external buttons and LEDs, which may be selected like any other button for editing. TPDesign4 Touch Panel Design Program 115 Working With Buttons Page specific external controls settings are accessed via each page's Design View (with the Page > Show External Controls option enabled). When copying a page between panels, or when converting between panel types that both support external buttons, the configuration of the source controls are copied to the destination controls according to the type of control: general, LED, cursor up, cursor down, cursor left, cursor right, or cursor select. Copying/Pasting 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. 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 (no open Design View window required) or 2. the active Design View window. While copying buttons from a page to a popup page and the location or dimensions of the copied buttons exceeds the boundaries of the target popup page, the pasted items will attempt to maintain their size, only adjusting the properties required for them to properly fit on the target popup page. Pasting a button or buttons 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) or on the folder named Popup Pages (which is for popup pages only) is not allowed. The Copy and Paste functions in TPDesign4 always work on the element (including buttons, bitmaps, even individual button properties displayed in the Properties Control window) which has the current Edit Focus . This means the last thing selected, which is not always necessarily a button displayed in the Design View windows. For example, if you have selected an item in the Properties Control window (let's say you've selected "Channel Port", and you perform a "Copy", then you will have copied only the Channel Port entry in the Properties Control window, and not the associated button (even though it is selected in the Design View 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). If for example you had copied the value "410" from the Left (position) field in the Properties Control window, you are not allowed to paste it to the Address Port field, since it is not a valid Address Port number (these errors are indicated by an error dialog). Paste Controls dialog Select Button > Paste Control to open the Paste Control Options dialog. Use the options in this dialog to specify exactly which elements of copied buttons you want to retain when they are pasted back to the project. The options in this dialog include: Function Codes: Click these options to select which aspects of function codes (Address Codes, Channel Codes, and Level Codes) will be retained when the button is pasted from clipboard memory. By default, all three options are checked, and all function codes are retained when pasting the button. 116 TPDesign4 Touch Panel Design Program Working With Buttons Page flip options: Click this option to retain page flip references (if any) when pasting the button (default = enabled). Images, slots and sounds: Click these options to select which collateral information (Image references, Slot references, and Sound references) will be retained when the button is pasted from clipboard memory. By default, all collateral information is pasted with the button. You can also select whether to overwrite image names, occupied slots and utilized sounds, in case you are pasting over existing buttons that have their own image/slot/sound associations. By default, all "overwrite" options are disabled. Searching and Replacing Button Properties Select Edit > Find (or click the toolbar button) to access the Find dialog, which allows you to search for any button property value either within the currently open Page, or across the entire Project. You can specify to search for any General or State button property. For example, you can perform a search based on button type, name, border style, and state count (among many others), or any combination of search criteria. To search for button properties: 1. Open the Find 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. 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 Find Next to search the current page only, based on the specified criteria and scope. 4. When the first instance of the criteria is found, the Find In Page dialog is compressed to only show 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. Click Select All to close the Find dialog and select every button that meets the criteria. TPDesign4 Touch Panel Design Program 117 Working With Buttons 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. Using Quick Input Select Quick Input from the Edit menu or Design View context menu to access the Quick Input sub-menu. The Quick Input setting determines how typing directly into a Design View or into the State Manager will be handled: Current Property: This setting redirects keyboard input to the currently selected property on the currently visible tab of the Properties Control (assuming one is selected). For example, if you select the Name property (in the General tab of the Properties control window), any time you select a button in the Design View, you can just type and press the Enter key to enter a new button name for the selected button. The result of the keystroke will depend on the property selected. Text: This setting redirects keyboard input to the button Text property for all selected button states (in the States tab of the Properties Control window). For example, if you select several states on a Multi-State button (in the State Manager window), you can type and press the Enter key to enter new button text for the selected states. If no states are selected, text is will be applied to all states of the button selected in the Design View. The Text setting is the replacement for the Quick Text Tool found in TPDesign3 Disabled: Disables the Quick Input option. 118 TPDesign4 Touch Panel Design Program Working With Buttons Working With Function Codes In terms of designing buttons that interact with and control the various devices on the control system, TPDesign4 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 TPDesign4, 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 code represents communication out of the panel to the master controller and are responsible for button Presses, Releases and Feedback. Address Codes: Displayed in the lower-right corner of the button, address codes in TPDesign4 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. change border, display a text string, etc.). Level Codes: Displayed in the lower-right corner of the button, level codes represent bidirectional 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). As in TPDesign3, you can select whether to display the function codes associated with any button in the design view window (select View > Display Function Codes). 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. 27 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 TPDesign4, rather than having to re-write your code. TPDesign4 Touch Panel Design Program 119 Working With Buttons There are several key differences in the way Function Codes work in TPDesign4 relative to the way they worked in TPDesign3: "Devices" in TPDesign3 are known as "Ports" in TPDesign4 (the maximum number of available ports in TPDesign4 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 TPDesign4. Unlike TPDesign3, TPDesign4 lets you to assign Address and Channel Codes directly to a page. Limitations: The maximum number of channel codes per port is 4000. The maximum number of address codes per port is 4000. The maximum number of level codes per port is 600. The maximum number of ports is 100. Show/Hide Function Codes You can choose to display function codes, as well as the current state of buttons in the Design View window via the View > Display Function Codes option (or the toolbar button). Alternatively, press the F11 key to toggle the function codes. If function code visibility is enabled they will also be included in printed output. Power Assign One of the big time-eating factors of creating a touch panel is correctly setting up the channel, address and level codes for any given button, and other properties that depend on button type. Use Power Assign to streamline this process. The Power Assign feature can operate on a single button, or on a group of selected buttons. Power Assign works only at the button level, and does not affect pages or popup pages. Suppose you have a touch panel file from a pre-existing job, and you like part of one of the pages. You can open the old file, select all the buttons you want to use, copy and paste them into the new job. However, lets assume that they came through with the wrong channel codes (actually you can use the Paste Control Options dialog to fix that). A good trick to use for this kind of operation is to Shift-select the buttons in the order you want the channel codes to occur before copying and pasting. Start with the button that will get the first channel code and click on it. Then hold down the Shift key, and Shift-click on the rest of the buttons you want to copy, in the order that the final channel codes will need to occur, adding them to the selection. 120 TPDesign4 Touch Panel Design Program Working With Buttons The Power Assign dialog Select Button > Power Assign (or press F8) to open the Power Assign dialog, where you can set button-level actions, channel/variable text, and code parameters one or more selected buttons. The options in this dialog include: Function Code Action • Clear: Clears the button group's channel or variable text setting based on the option you select in the What to change area. Choose Channel to clear the channel numbers or Variable Text to clear the variable text in the button group. • Assign: Sets the button group's channel or variable text assignments based on the option you select in the What to change area. Choose Channel to set the channel numbers or Variable Text to set the variable text in the button group. Function Code Type • Channel: Sets the button group's channel numbers (if you select the Function Code Action/ Assign option). • Address: Sets the button group's address numbers (if you select the Function Code Action/ Assign option). • Level: Sets the button group's level numbers (if you select the Function Code Action/Assign option). Function Code Assignment Options • Begin Assignment At: Sets the button group's starting device and channel numbers (if you select the Function Code Action/Assign option). • Port: Sets the button group's port numbers (if you select the Function Code Action/Assign option). • Function Code: Sets the button group's function codes (if you select the Function Code Action/Assign option). • Ensure Contiguous Code Assignment: Sets the button group's device and channel number assignments to be contiguous (i.e. 1, 2, 3, etc). • Reuse Previously Assigned Codes: Sets the codes, starting at either port 1/channel 1 or what you specify in the Start At field without regard to previously utilized codes. Code Assignments • Split Across Port IDs: Sets the program to create a different device number for each channel. For example, port 1/channel 255, and port 2/channel 1 are considered to be split across device IDs. • Wrap Within Port ID: Sets the program to avoid creating two or more channels with different device numbers. Using Power Assign: 1) Clear Channels One powerful feature of Power Assign is the ability to clear the various function codes from the buttons. Since the buttons remain selected after the paste operation, all you need to do is bring up the Power Assign dialog, then: 1. Under Function Code Action, select Clear. 2. Under Function Code Type, select Channel, Address or Level. 3. Click Assign. TPDesign4 Touch Panel Design Program 121 Working With Buttons Using Power Assign: 2) Assign Codes Next assign new function codes: 1. Under Function Code Action, select Assign. 2. Under Function Code Type, select Channel, Address or Level. 3. Click Assign. To use take full advantage of Power Assign, you need to understand the nuances of some of the options involved: Begin Assignment At Ensure Contiguous Code Assignment Wrap Within Port ID Begin Assignment At If you don't check the Begin Assignment At option, the assign operation begins at the first available channel, just like the standard Auto Assign. When Begin Assignment At is selected you can specify the starting value of the channels. This is particularly useful for setting up things like numeric keypads, where you need the channels to begin at a specific value, since you might be using offset math in your code to process the button pushes. Ensure Contiguous Code Assignment This is used when the channels have to be in order, with no breaks between them, as in a numeric keypad. In these cases, since the order is important, use the Shift-select technique to select the buttons in the order you want to assign the channels. If you don't care what channels are assigned, uncheck this option, and TPDesign4 will find the next available free channels, skipping used channels and continuing on until all available channels have been assigned. In this case the values will be subject to whether or not you've set the Begin Assignment At checkbox. Wrap Within Port ID Since the touch panels support more than one port, you're no longer limited to 256 channels and variable text addresses. However, things like SYSTEM_CALLs are based upon all the channels coming from a single device. And if the channels are split across device IDs the feedback part of the System Call won't work. Another thing that comes into play with being able to use multiple device IDs on the bus is that you may need to confine certain ranges of channels to a single device to take advantage of the DEFINE_MUTUALLY_EXCLUSIVE channel grouping in the code. Since MUTUALLY EXCLUSIVE works on a particular device ID, ensure that the group of buttons is entirely within a single device. In either of these cases, check the Don't Split option, which ensures that all channels assigned fall within a single device ID code. When power assign is run with this option enabled, one of two things can happen, depending upon the setting of the Keep Checking option. If Keep Checking is not set, you get an error notice. If it is selected, Power Assign keeps looking until it either finds a valid range to assign the channels to, or 122 TPDesign4 Touch Panel Design Program Working With Buttons there simply aren't enough free channels to perform the operation, in which case you get another error message. The easiest way to understand Keep Checking is to look at it from the standpoint of what you want to do. If it's absolutely essential that Power Assign use exactly the range of channels you have in mind (i.e. the Axcess code is already written and it would be a fair amount of work to change it), turn off Keep Checking, and turn on Start At. If the requested channels are not available (i.e. they've been used elsewhere), you get an error message, telling you that Power Assign couldn't assign the channels. This means that the channels in question have been used elsewhere. You can then use the channel map to verify which of the channels in the range you wanted were in use. If it isn't important that the channels end up exactly where you had specified, just that they are assigned as a group, you can select Keep Checking and Power Assign will do just that, subject to the Begin Assignment At, Ensure Contiguous Code Assignment, and Split Across Port IDs settings. One nice thing about the Power Assign palette is that it retains its settings after use, which is handy when you need both the push channels and variable text channels to have the same numeric values. First, use the Functions tab of the Workspace Navigator and click back and forth between the push channel and address options. Look for a clear range of channels large enough and make a note of the start channel. Next, open the Power Assign dialog. Here's the setup you would use: 1. Check Begin Assignment At and Ensure Contiguous Code Assignment. Split Across Port IDs is optional based on whether these channels will be used for System Calls or need to have mutually exclusive feedback. 2. Then supply the device and channel values, click Channel under Function Code Type, and click Assign. 3. Next, click Address under Function Code Type, and click Assign again. If you didn't require both the push channel and address to match, you're done. If they need to match, watch for an error in either of the assignment operations. If this is the case, clear both the push channels and variable text channels using the Clear Codes action settings. While initially somewhat confusing, an immense amount of power is available in the options under Function Code Action. Since the selection is retained after any operation, if you make a mistake, it's easy to click Clear Codes and hit the assign button again. Remember that Power Assign processes the channel assignments based on the order in the selection so, if the order is important to you, make sure to create the selection using the Shift-Select technique. TPDesign4 Touch Panel Design Program 123 Working With Buttons 124 TPDesign4 Touch Panel Design Program File Transfer Operations File Transfer Operations In TPDesign4, all file transfer operations are routed through the NetLinx Master to which the target/source touch panels are connected. You will never actually connect directly to the panels. There are two types of file transfer operations in TPDesign4 (both accessible via the Transfer menu): Send To Panel: Sends your TPDesign4 project file to a specified NetLinx Master. Receive From Panel: Receives your TPDesign4 project file from a NetLinx Master. Connections are maintained separate from the transfer itself, so they do not need to be established/ dropped each time a transfer is performed. Use the Connect dialog to define and save one or more connection settings. Working With Communications Configurations Saving and Recalling Communication Configurations Connection information is maintained separate from the transfer itself, so it does not need to be established/dropped each time a transfer is performed. Use the Connect dialog to define and save one or more connection settings. Anytime you establish a new communication connection configuration (via the New button in the Connect dialog), the program requires you to enter a name for the configuration (in the Name field of the Connection Settings dialog). See the Connecting to a NetLinx Master topic for details on establishing a new connection. The configuration you specify under that name can then be accessed via the Connection drop-down list in the Connect dialog. To recall a saved communication configuration, select Transfer > Connect to open the Connect dialog, and select the desired configuration from the Connection drop-down list. To delete a saved configuration, select a configuration (in the Connect dialog) and click the Delete command button. Editing the Settings on an Existing Communication Configuration 1. Select Transfer > Connect to open the Connect dialog. 2. Select the configuration that you want to edit from the Connection drop-down list. 3. Click the Edit button to invoke the Connection Settings dialog. 4. Edit the communication settings for the selected configuration as needed, and click OK to save your changes and return to the Connect dialog. TPDesign4 Touch Panel Design Program 125 File Transfer Operations Connecting to a NetLinx Master Typically, file transfer operations are routed through the NetLinx Master to which the panels are connected, as opposed to connecting directly to the panels. Therefore, in order to transfer touch panel files for use on G4-compatible panels, you will first establish communication between the PC running TPDesign4 and the NetLinx Master to which the target panels are connected. The Connect dialog allows you to set up communications, and save multiple connection configurations for easy access. Select Transfer > Connect to access this dialog. There are three possible ways to connect to a NetLinx Master: TCP/IP, Serial or Modem: Connecting to a NetLinx Master via TCP/IP 1. Select Transfer > Connect to open the Connect dialog. 2. In the Connect dialog, click New to establish a new connection. The invokes the Connection Settings dialog. 3. In the Connection Settings dialog, enter a unique name for the connection configuration that are you setting up (in the Name field). This allows you to recall the configuration you specify later, without having to re-configure. 4. Select TCP/IP from the Transport drop-down list. 5. Enter the IP address of the target NetLinx Master in the IP Address/DNS Name field. 6. The IP Port should always be set to 1319 (default). Do not change this number. 7. Click OK to save these settings and return to the Connect dialog. 8. Press the Connect button to establish the connection. Connecting to a NetLinx Master via Serial Port 1. Select Transfer > Connect to open the Connect dialog. 2. In the Connect dialog, click New to establish a new connection. The invokes the Connection Settings dialog. 3. In the Connection Settings dialog, enter a unique name for the connection configuration that are you setting up (in the Name field). This allows you to recall the configuration you specify later, without having to re-configure. 4. Select Serial from the Transport drop-down list. 5. Configure the Settings parameters (COM Port, Data Bits, Parity, Baud Rate, Stop Bits and Flow control) as needed. 6. Click OK to save these settings and return to the Connect dialog. 7. Press the Connect button to establish the connection. Connecting to a NetLinx Master via Modem 1. In the Connect dialog, click New to establish a new connection. The invokes the Connection Settings dialog. 2. In the Connection Settings dialog, enter a unique name for the connection configuration that are you setting up (in the Name field). This allows you to recall the configuration you specify later, without having to re-configure. 126 TPDesign4 Touch Panel Design Program File Transfer Operations 3. Select Modem from the Transport drop-down list. 4. Configure the Settings parameters (COM Port, Data Bits, Parity, Baud Rate, Stop Bits, Flow control and Phone #) as needed. 5. Click OK to save these settings and return to the Connect dialog. 6. Press the Connect button to establish the connection. Secure NetLinx Connections If the target NetLinx Master has authentication enabled, you will prompted to enter a User Name and Password in order to establish a connection. You can save the User Name/Password combination as part of a communication configuration for secured NetLinx Masters, via options in the Connection Settings dialog. Refer to the NetLinx Studio (v2.3 or higher) online help for details on enabling authentication on NetLinx Masters. To access the Connection Settings dialog, select Transfer > Connect (or click the toolbar button) to open the Connect dialog, and select New to create a new communication configuration, or select an existing configuration from the drop-down list and click Properties to edit those saved settings. Click the Connection requires authentication checkbox to enable the User and Password text fields. Enter the User Name/Password combination to save them as part of this configuration. Once they are entered here, 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. The status bar will reflect the status of the connection as follows: not connected connected to an unsecured master connected to a secured but unencrypted master connected to a secured and encrypted master FIG. 28 Status bar icons reflect the status of the connection to the NetLinx Master Transferring Touch Panel Files to/from a NetLinx Master Use the File > Send To Panel option to connect to a Master and download a panel file to a compatible G4 touch panel on that Master's bus. Use the File > Receive From Panel option to connect to a Master and upload a panel file from a compatible G4 touch panel on that Master's bus. There are three ways to connect and transfer Panel files: TCP/IP, Serial and Modem. To transfer to a G4 panel, verify that the NetLinx Master Firmware is build 85 or later. Verify the TPDesign4 program being used is Version 1.01 or higher. Earlier versions of the firmware and TPD4 software are incompatible with G4 panels. TPDesign4 Touch Panel Design Program 127 File Transfer Operations Panel File Transfers via TCP/IP In TPDesign4, file transfer operations are typically routed through the Master to which the target/ source touch panels are connected. To use a TCP/IP as the transport type: 1. Select Transfer > Send to Panel or Receive From Panel. If you are not already connected to the Master, the Connect dialog is invoked. If you have already established a TCP/IP communication configuration, select it from the dropdown list. Otherwise, create and save a serial communication configuration via the Connection Settings dialog: a. In the Name field, enter a name for this communication configuration. This is the name that will appear in the drop-down list of the Connect dialog. b. Select TCP/IP from the Transport drop-down list. c. Configure the TCP/IP connection (IP Address/DNS Name of the target/source device). d. The IP Port should always be set to 1319 (default). Do not change this number. e. Click OK to save the configuration and close the Connection Settings dialog 2. Click Connect in the Connect dialog to establish the TCP/IP connection. 3. Once communication is established, 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), displaying an online device tree, indicating all devices connected to the Master that are currently online (according to the Filter setting). The online device tree lists the online devices by System #, Device #, Description, (firmware) Version, and Manufacturer. To refresh the Online Devices Tree, disconnect and reconnect via the commands in the Transfer menu. 4. Use the Options checkboxes in the Send to Panel or Receive From Panel dialog to enable/ disable the following transfer options: Smart transfer (updated panel files only): Select to utilize the Smart Transfer feature, which reduces the transfer time by only replacing those panel files that have been updated (relative to the files already loaded in the panel). Any bitmaps, sound files and fonts that all already resident on the target panel, or in your panel file on your PC (for uploads) are not included in the transfer. Normal transfer (all panel files): This option sends all panel files. 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. If you are simply sending a panel file to a panel, you don't need to use the Full Clean option, since any existing panel files on the target panel will be wiped out anyway. The Full Clean option adds considerable time to the transfer, since it involves sending many more files, and is not necessary in most cases. 128 TPDesign4 Touch Panel Design Program File Transfer Operations Open received panel (uploads only): Select this option to automatically open the panel file once it is received. Clear from status queue when complete: This option (enabled by default) clears each transfer from the Transfer Status Window when complete. 5. Click Send or Receive to begin the transfer. If you encounter a transfer error, verify the IP Address, Panel ID, and connection status of both NetLinx Master and Modero panel. Panel File Transfers via Serial Port In TPDesign4, file transfer operations are typically routed through the Master to which the target/ source touch panels are connected. To use a Modem as the transport type: 1. Select Transfer > Send to Panel or Receive From Panel. If you are not already connected to the Master, the Connect dialog is invoked. If you have already established a serial communication configuration, select it from the dropdown list. Otherwise, create and save a serial communication configuration via the Connection Settings dialog: a. In the Name field, enter a name for this communication configuration. This is the name that will appear in the drop-down list of the Connect dialog. b. Select Serial from the Transport drop-down list. c. Configure the selected serial (COM port) connection (Baud Rate, Data Bits, Parity, Stop Bits and Flow Control). The suggested settings are: • Baud Rate 38400 • Data Bits 8 • Parity none • Stop Bits 1 • Flow Control none These settings must match those of the selected COM port. d. Click OK to save the configuration and close the Connection Settings dialog 2. Click Connect in the Connect dialog to establish the serial connection. 3. Once communication is established, 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), displaying an online device tree, indicating all devices connected to the TPDesign4 Touch Panel Design Program 129 File Transfer Operations Master that are currently online (according to the Filter setting). The online device tree lists the online devices by System #, Device #, Description, (firmware) Version, and Manufacturer. To refresh the Online Devices Tree, disconnect and reconnect via the commands in the Transfer menu. 4. Use the Options checkboxes in the Send to Panel or Receive From Panel dialog to enable/ disable the following transfer options: Smart transfer (updated panel files only): Select to utilize the Smart Transfer feature, which reduces the transfer time by only replacing those panel files that have been updated (relative to the files already loaded in the panel). Any bitmaps, sound files and fonts that all already resident on the target panel, or in your panel file on your PC (for uploads) are not included in the transfer. Normal transfer (all panel files): This option sends all panel files. 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. If you are simply sending a panel file to a panel, you don't need to use the Full Clean option, since any existing panel files on the target panel will be wiped out anyway. The Full Clean option adds considerable time to the transfer, since it involves sending many more files, and is not necessary in most cases. Open received panel (uploads only): Select this option to automatically open the panel file once it is received. Clear from status queue when complete: This option (enabled by default) clears each transfer from the Transfer Status Window when complete. 5. Click Send or Receive to begin the transfer. Panel File Transfers via Modem In TPDesign4, file transfer operations are typically routed through the Master to which the target/ source touch panels are connected. To use a Modem as the transport type: 1. Select Transfer > Send to Panel or Receive From Panel. If you are not already connected to the Master, the Connect dialog is invoked. If you have already established a modem communication configuration, select it from the dropdown list. Otherwise, create and save a modem communication configuration via the Connection Settings dialog: a. In the Name field, enter a name for this communication configuration. This is the name that will appear in the drop-down list of the Connect dialog. b. Select Modem from the Transport drop-down list. c. Configure the selected modem connection (Baud Rate, Data Bits, Parity, Stop Bits, Flow Control and Phone Number). 130 TPDesign4 Touch Panel Design Program File Transfer Operations The suggested settings are: • Baud Rate 38400 • Data Bits 8 • Parity none • Stop Bits 1 • Flow Control none • Phone Number Enter the telephone number of the target Master. These settings must match those of the Modem. d. Click OK to save the configuration and close the Connection Settings dialog 2. Click Connect in the Connect dialog to establish the modem connection. 3. Once communication is established, 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), displaying an online device tree, indicating all devices connected to the Master that are currently online (according to the Filter setting). The online device tree lists the online devices by System #, Device #, Description, (firmware) Version, and Manufacturer. To refresh the Online Devices Tree, disconnect and reconnect via the commands in the Transfer menu. 4. Use the Options checkboxes in the Send to Panel or Receive From Panel dialog to enable/ disable the following transfer options: Smart transfer (updated panel files only): Select to utilize the Smart Transfer feature, which reduces the transfer time by only replacing those panel files that have been updated (relative to the files already loaded in the panel). Any bitmaps, sound files and fonts that all already resident on the target panel, or in your panel file on your PC (for uploads) are not included in the transfer. Normal transfer (all panel files): This option sends all panel files. 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. If you are simply sending a panel file to a panel, you don't need to use the Full Clean option, since any existing panel files on the target panel will be wiped out anyway. The Full Clean option adds considerable time to the transfer, since it involves sending many more files, and is not necessary in most cases. Open received panel (uploads only): Select this option to automatically open the panel file once it is received. Clear from status queue when complete: This option (enabled by default) clears each transfer from the Transfer Status Window when complete. TPDesign4 Touch Panel Design Program 131 File Transfer Operations 5. Click Send or Receive to begin the transfer Modem transfer is the slowest method of transferring TPD4 panel files to the target device. This method can range in speed but on average communicates at 3 Kbps. Virtual NetLinx Master TCP/IP Transfers TPDesign4 v2.1 supports direct connection to G4 panels (via TCP/IP), for situations where the target panel is not connected to a NetLinx Master. In this situation, you can use your PC's Ethernet connection to connect directly to the panel, using your PC as a Virtual NetLinx Master. This feature is primarily intended for use by graphic designers, to allow them to create panel files and then test them on a panel without necessarily having access to a Master. There are three basic steps to Masterless TCP/IP file transfers: 1. Configure the touch panel for Masterless TCP/IP transfers 2. Configure TPDesign4 for Masterless TCP/IP transfers 3. Transfer the Files Using a Virtual NetLinx Master TCP/IP connection Configuring TPDesign4 for Virtual NetLinx Master TCP/IP Transfers 1. Select Transfer > Connect to open the Connect dialog (or click the toolbar button). 2. Select [Virtual NetLinx Master] from the Connection drop-down list. 3. Click the Properties button to access the Virtual NetLinx Master Properties dialog, which displays the Host Name and IP address for your PC. 4. Write down the IP address. a. Enter this IP address as the Master's URL/IP on the System Connection Setup page on the touch panel. b. Once you have entered the IP address of the PC (acting as a Virtual NetLinx Master), press the Reboot button on the System Connection Setup page to reboot the panel. 5. Select Transfer > Send to Panel to open the Send To Panel dialog. The panel should appear in the list of Online Devices. Once you can see the panel online, you may transfer panel files without the need for an intermediate NetLinx master. 6. To receive files from the panel, select Transfer > Receive From Panel. 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. Powering Up and Connecting the Panel 1. 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. 2. Connect the terminal end of the PSN6.5 power cable to the 12 VDC power connector on the rear/side of the touch panel. 3. Verify the green Ethernet LED (from the rear Ethernet port) is illuminated (to indicate a proper connection). 132 TPDesign4 Touch Panel Design Program File Transfer Operations Configuring the Touch Panel for Virtual NetLinx Master TCP/IP Transfers If it is not already powered up and connected, 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). To configure the panel for Virtual NetLinx Master transfers: 1. Press and hold the grey Front Setup Access button (below the touch screen) for 3 seconds to access the Setup page. 2. Press the Protected Setup button to access the Protected Setup page. 3. Use the on-screen keyboard to enter the password (the default password is 1988). 4. Press the System Connection button to access the System Connection Setup page. 5. Select Ethernet as the Master Connection. 6. Select URL as the Connection Mode. 7. Set the System Number to 0 (zero). 8. Select the Master URL / IP input box and enter the IP address of your PC (displayed in the Virtual NetLinx Master Properties dialog). 9. Press the Back button to return to the Protected Setup page and press the Reboot button to reboot the panel. 10. After several seconds, the panel should appear in the online device tree, listed as Virtual NetLinx Master. Once you can see the device online, you may transfer panel files to and from the G4 device without the need for an intermediate NetLinx master. Transferring Files Using a Virtual NetLinx Master TCP/IP Connection Once you have configured both the touch panel and TPDesign4 for Masterless TCP/IP Transfers, you are ready to transfer files to/from the panel without the need for an intermediate master: Sending Files To the Panel 1. Select Transfer > Send to Panel to open the Send to Panel dialog. 2. Select any Options (Smart Transfer, Normal Transfer or Full Clean) as desired. 3. Click the Send button to initiate the transfer. The progress of the transfer is indicated in the Status column of the Transfer Status Window. Receiving Files From The Panel 1. Select Transfer > Receive from Panel to open the Receive from Panel dialog. 2. Select any Options (Smart Transfer, Normal Transfer or Full Clean) as desired. 3. Click the Receive button to initiate the transfer. The progress of the transfer is indicated in the Status column of the Transfer Status Window. TPDesign4 Touch Panel Design Program 133 File Transfer Operations Virtual NetLinx Master USB Transfers TPDesign4 v2.2 (or higher) supports direct connection to G4 panels via USB (in addition to TCP/ IP): Configuring the Touch Panel for Virtual NetLinx Master USB Transfers If it is not already powered up and connected, apply power to the touch panel and verify that it is connected to the PC via the USB connector on the rear (or side) of the panel (G4 panels only). To configure the panel for Virtual NetLinx Master transfers via USB: 1. Press and hold the grey Front Setup Access button (below the touch screen) for 3 seconds to access the Setup page. 2. Press the Protected Setup button to access the Protected Setup page. 3. Use the on-screen keyboard to enter the password (the default password is 1988). 4. Press the System Connection button to access the System Connection Setup page. 5. Select USB as the Master Connection. 6. Press the Back button to return to the Protected Setup page and press the Reboot button to reboot the panel. 7. After several seconds, the panel should appear in the online device tree, listed as Virtual NetLinx Master. Once you can see the device online, you may transfer panel files to and from the G4 device without the need for an intermediate NetLinx master. Configuring TPDesign4 for Virtual NetLinx Master USB Transfers 1. Select Transfer > Connect to open the Connect dialog (or click the toolbar button). 2. Select [Virtual NetLinx Master] from the Connection drop-down list. 3. Select Transfer > Send to Panel to open the Send To Panel dialog. The panel should appear in the list of Online Devices. Once you can see the panel online, you may transfer panel files without the need for an intermediate NetLinx master. 4. To receive files from the panel, select Transfer > Receive From Panel. 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. 134 TPDesign4 Touch Panel Design Program File Transfer Operations Transferring Files Using a Virtual NetLinx Master USB Connection Once you have configured both the touch panel and TPDesign4 for Masterless USB Transfers, you are ready to transfer files to/from the panel without the need for an intermediate master: Sending Files To the Panel 1. Select Transfer > Send to Panel to open the Send to Panel dialog. 2. Select any Options (Smart Transfer, Normal Transfer or Full Clean) as desired. 3. Click the Send button to initiate the transfer. The progress of the transfer is indicated in the Status column of the Transfer Status Window. Receiving Files From The Panel 1. Select Transfer > Receive from Panel to open the Receive from Panel dialog. 2. Select any Options (Smart Transfer, Normal Transfer or Full Clean) as desired. 3. Click the Receive button to initiate the transfer. The progress of the transfer is indicated in the Status column of the Transfer Status Window. Sending a Project Without Opening the File 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. There are three transport types available to transfer touch panel files: TCP/IP, Serial and Modem. Use the Send File To Panel option to send a project file without having to open it in TPDesign4. TP4 touch panel files are transferred to the NetLinx Master that the target panels are connected, rather than directly to the panels. In order to transfer touch panel files, you must first establish communication between the PC and the NetLinx Master, via the Connect dialog. Connections are maintained separate from the transfer itself, so they do not need to be established/dropped each time a transfer is performed. Use the Connect dialog to define and save connection settings. Transfer Status Window The Send To Panel and Receive From Panel dialogs place the requested transfer into a queue, the status of which is displayed in the Transfer Status window, which may be docked/undocked from the main application window. This window displays the following data for each transfer: Status: The status bars indicate the progress of each file in the transfer, and the overall status of the transfer. Device: This column gives the Device # and a description of the target/source device. Project: This column indicates the name of the Project the files belong to. TPDesign4 Touch Panel Design Program 135 File Transfer Operations 136 TPDesign4 Touch Panel Design Program Working With Palettes and Colors Working With Palettes and Colors Working With Colors A key feature of TPDesign4 is it's ability to utilize the full 32-bit RGB color palette, which allows you to specify RGB (Red, Blue and Green) values, plus Hue, Saturation, Brightness and Opacity. The RGB palette offers millions of possible colors, plus transparencies which can be applied to fills (pages, popup pages and buttons) and text (pages, popup pages and buttons). TPDesign4 also allows you to save or load custom palettes. Every color element that is not assigned either directly via an RGB selection or the named color table will reference this palette and be affected by any changes made to it. Palettes are saved as part of the panel file. Additionally, TPDesign4 supports the importing of either a JASC® formatted palette file, a Microsoft® formatted palette file, or a custom palette file previously saved from within the application. Any color element that is not assigned either directly via an RGB selection or the named color table will reference the custom palette, and will be affected by any changes made to it. Palettes are saved as part of the panel file. Color assignments are made through the Colors dialog. There are several ways to open the Colors dialog: When setting new button parameters, click on the Border Color, Fill Color or Text Color toolbar icons to open the base palette, then click More Colors. Click to select an existing page, popup page or button, and click on Fill Color in the States tab of the Properties Control Window. The Colors dialog supports three ways to select colors from the RGB color palette: 1. RGB Color: a full-feature RGB palette that allows you specify RGB (plus Hue, Saturation, Brightness and Opacity) values numerically, or by dragging the cursor around the palette. The RGB palette offers millions of possible colors. 2. Palette Index: a default palette that provides the Base 88 colors (which the can be modified if desired). The Palette Index offers a maximum of 255 colors. Because the RGB Color palette supports more colors than the Palette Index, you might see some slight variation in some colors if you switch from the RGB Color palette to Palette Index. In most cases, any variation that occurs in the translation is extremely subtle, since TPDesign4 tries to match the color exactly. 3. Color Name: a named color selection dialog based on the Base 88 color scheme. These Base 88 colors are identical to those provided in previous versions of TPDesign3, and include the transparent color in position 255. Neither JASC nor Microsoft palette files support transparency in the same manner that TPDesign4 utilizes transparency, so once imported, custom palettes cannot be reopened in another graphics package. TPDesign4 Touch Panel Design Program 137 Working With Palettes and Colors Working with Transparent Backgrounds When you are applying an icon to a button, chances are that you will want to take advantage of TPDesign4's ability to handle transparencies in bitmaps. Typically, transparency in bitmaps is used for the background color, to accommodate layering of bitmap images without trying to match colors across layers. Bitmap images are always created in the shape of a rectangle, because they are raster images. However, by assigning "transparent" as the background color, you can effectively change the shape of the image. For example, if you have a button with a bitmap image (FIG. 29), FIG. 29 A button with a bitmap image and you apply an icon that doesn't use transparent as the background color, you'll wind up with something like this (FIG. 30): FIG. 30 An icon that doesn't use transparent as the background color 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. With a transparent background color, the icon actually retains its original rectangular shape, but will display without the background (FIG. 31): FIG. 31 Icon with a transparent background color Check the documentation for your image-editing program to learn about applying transparency to your bitmaps. Generally speaking, you will apply a fill to the areas that you want to appear transparent (in most cases the background), and select transparent as the fill color, just like you would for any other color in the palette. When using bitmaps with transparencies in TPDesign4, there are a few key concepts to understand: Of all the image file formats supported by TPDesign4, only one accommodates transparency as a color: PNGs. 138 TPDesign4 Touch Panel Design Program Working With Palettes and Colors For the transparent color to be interpreted correctly by TPDesign4, the PNG file must be saved with RGB colors. Unless you are actually using transparency, JPGs are recommended over PNGs, since they are usually slightly smaller in size. Working With Multiple Color Palettes TPDesign v2.4 (or higher) supports multiple color palettes to allow easy switching between color schemes, and named palette entries. Use the options in the Edit Palettes dialog to create custom palettes and save them as *.PAL files that can then be imported/exported for use in other projects. When you copy a button from one project into another project that is using a different palette, 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). Depending on the differences between the palette in the button's source project and the palette in the target project, this can cause color shifting on the button. Creating New Palette Entries 1. Select Panel > Edit Palettes (or click the toolbar button) to open the Edit Palettes dialog. By default, the palette that is currently being used for the active Project is selected. Note that it is tagged as (active) in the palette selection drop-down list (in the upper-left corner of this dialog). Each color that is listed in the palette is considered to be a palette entry, and each palette entry is represented by an index number (1-256). The index numbers correlate to the slot in the palette that this color occupies. 2. Select the palette that you want to add a new palette entry (color) to, in the palette selection drop-down list. 3. Select a palette entry: To add a new palette entry to the palette, select a slot with no color assignment. To edit an existing palette entry, select an existing color. 4. Use the cursor in the Color Value chart, in conjunction with the Hue/Sat/Bright, Red/Blue/ Green, opacity (and/or Hex value) to specify the color that you want to add to the palette. 5. Enter a description of the new palette entry in the Name text field. This is optional, 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. Click on the Commit button to add the selected color and color name (if applicable) to the selected slot in the palette. TPDesign4 Touch Panel Design Program 139 Working With Palettes and Colors Creating Custom Palettes 1. Select Panel > Edit Palettes (or click the toolbar button) to open the Edit Palettes dialog. By default, the palette that is currently being used for the active Project is selected. Note that it is tagged as (active) in the drop-down list. 2. Click the New button to clear the palette index of all entries. By default, the new palette is titled Unnamed, as indicated in the palette selection drop-down list in the upper-left corner of this dialog. 3. To add palette entries (colors) to this palette, use the cursor in the Color Value chart, in conjunction with the Hue/Sat/Bright, Red/Blue/Green, opacity (and/or Hex value) to specify the color that you want to add to the palette. 4. Enter a description of the new palette entry in the Name text field. This is optional, 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. 5. Click on the Commit button to add the selected color (and color name if applicable) to the selected slot in the palette. 6. Repeat steps 3 - 5 to add as many additional colors to this palette as needed. Renaming Palettes 1. Select Panel > Edit Palettes (or click the toolbar button) to open the Edit Palettes dialog. By default, the palette that is currently being used for the active Project is selected. Note that it is tagged as (active) in the drop-down list. 2. Select the palette that you want to rename from the palette selection drop-down list, in the upper-left corner of this dialog. 3. Click the Rename button to open the Rename dialog. 4. Enter the new name for this palette in the text field and select OK. 5. The new name of the palette is indicated in the palette selection drop-down list. Note that the new name overwrites the previous name (removing the previous name from the list). Changing the Active Palette To select a different palette to use, select Panel > Edit Palettes (or click the toolbar button) to access the Edit Palettes dialog, and select from the listing of available palettes in the palette selection dropdown list, in the upper-left corner of the dialog. Importing Palette Files You can import palette (*.PAL) files for use in your project via the Import option in the Edit Palettes dialog: 1. Select Panel > Edit Palettes to open the Edit Palettes dialog. 2. Click the Import button to access the Open dialog. Use this dialog to locate and select the desired *.PAL file. 3. Click Open to import the selected palette file and close the Open dialog. Note that the imported palette file is automatically designated as the active palette. 140 TPDesign4 Touch Panel Design Program Working With Palettes and Colors Exporting Palette Files You can export palette (*.PAL) files for use in other projects via the Export option in the Edit Palettes dialog. Use this feature to save and distribute custom palettes that can be imported back into TPD4 via the Import option: 1. Select Panel > Edit Palettes to open the Edit Palettes dialog. 2. Click the Export button to access the Save As dialog. Use this dialog to save the palette to a specified directory, as a *.PAL file. Copying Palettes Use the Copy and Paste buttons at the top of the Edit Palettes dialog to copy and paste entire palettes: 1. Select Panel > Edit Palettes (or click the toolbar button) to open the Edit Palettes dialog. 2. Select the palette that you want to copy from the palette selection drop-down list (in the upperleft corner of the dialog). 3. Click the Copy button. 4. Click the New button to open a new (empty palette). 5. Click the Paste button to paste the contents of the source palette into the new (target) palette. Alternatively, you could open an existing palette and paste over the existing palette entries. Copying Palette Entries Use the Copy Entry and Paste Entry buttons at the top of the Edit Palettes dialog to copy and paste individual palette entries (colors): 1. Select Panel > Edit Palettes (or click the toolbar button) to open the Edit Palettes dialog. 2. 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). 3. Click to select the palette entry that you want to copy. 4. Click the Copy Entry button. 5. Click the New button to open a new (empty palette) or select an existing one from the dropdown list. 6. Select the slot that you want to paste the copied palette entry into and click Paste Entry. Note that this action pastes the color definition information, but not the Name. If you select a slot that already has a palette entry, the copied color will overwrite the original, but the Name will not change. TPDesign4 Touch Panel Design Program 141 Working With Palettes and Colors Using Custom Palettes to Enable Color Schemes in G4 PanelBuilder TPDesign4 v2.4 (or higher) supports creating and saving multiple custom color palettes within a project. Custom palettes can be used to enable the Color Schemes feature in the G4 PanelBuilder application. Color Schemes allow you to apply different color schemes to an entire template (in G4 PanelBuilder), without having to edit the buttons directly. For example, 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 - one color scheme for each season. Using custom palettes to create Color Schemes requires the use of both TPDesign4 and G4 PanelBuilder: Custom palettes are created in TPDesign4, and saved as part of the TPD4 project. TPDesign4 is also required to export the project as a G4 PanelBuilder Template (*.TPT). However, the Color Schemes feature is applied via the Project menu in G4 PanelBuilder. Not all TPD4 projects support the Color Schemes feature in G4 PanelBuilder. In order to utilize Color Schemes 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). The project must include one preview image for each of the custom palettes that are included. These preview images are used to display the color schemes that are available for this template in G4 PanelBuilder. Note that if the exported project does not meet these requirements, the Color Schemes feature in G4 PanelBuilder will be disabled for this template. While it is not an enforced requirement, in order for the project to actually make use of multiple palettes in G4 PanelBuilder, 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). When a valid TPD4 project file is exported as a G4 PanelBuilder template, and then opened in the G4 PanelBuilder application, the Project > Color Schemes option (in the G4 PanelBuilder application) allows you to apply different color schemes to the template with a single click. You can also use Chameleon Images in conjunction with custom palettes to further enhance the use of Color schemes in G4 PanelBuilder. 142 TPDesign4 Touch Panel Design Program Working With Palettes and Colors Chameleon Images TPD4 (v2.4 or higher) supports a new button state property called Chameleon Image. A chameleon image is a PNG image file that, when applied to a button/state, uses the Fill and Border colors assigned to the button/state to determine the colors in the image. PNG images consist of four separate color channels (Red, Green, Blue and Alpha), 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. The Red channel defines the area that will be filled with the state’s Fill Color. The Green channel defines the area that will be filled with the state’s Border Color. The Blue channel is not used. As a result, if the Fill and/or Border colors are changed, then the colors used in the chameleon image will change accordingly. Refer to the Working With Chameleon Images help topic for more details. One possible benefit of using chameleon images is that, when used in conjunction with custom palettes, they enable the ability to create multiple color schemes that can be applied to a single template in the G4 PanelBuilder application. When creating an image to be used as a Chameleon image in TPD4, set the image properties to RGB Color and 8 Bits/Channel. Requirements for Chameleon Images Chameleon images can be applied to buttons to create animated highlighting, glow and dropshadow effects. When used with multi-state buttons, chameleon images can also take advantage of TPD4's tweening tools to easily create color transition effects. Furthermore, chameleon images may also use a companion bitmap which, when placed on top (via the Draw Order state property), can add highlighting and shadow effects to convincingly create an illusion of depth. The basic requirements that allow an image file to be recognized as a chameleon image in TPDesign4 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 the border name is set to none, then the Chameleon Image property becomes available. The Chameleon Image state property is available for all button types except Text Input, Computer Control and TakeNote buttons. Note that chameleon images are not necessarily different from any other PNG image file. Ideally, the image to be used is one that either was created or was selected specifically with the concept of TPDesign4 Touch Panel Design Program 143 Working With Palettes and Colors colorizable regions that could be changed to suit different design needs. That is, while virtually any PNG file could be applied as a chameleon image, some images make more sense and would give better results than others. The characteristics that define any image as a chameleon image are: 1. It meets the technical requirements for a chameleon image. 2. It has been applied to a button as the Chameleon Image (via the Chameleon Image state property). Working With Chameleon Images Chameleon Images utilize the 4 color channels (Red, Blue, Green and Alpha) that comprise 32-bit images to define separate colorizable regions. Only PNG image files can be used as chameleon images, since in TPDesign4, only PNGs accommodate transparency as a color. For the transparent color to be interpreted correctly by TPDesign4, the PNG file must be saved with RGB colors (32-bit). FIG. 32 Working With Chameleon Images Here's an example of creating a simple chameleon image, for the purpose of illustrating the basic concepts used: 1. Using an image editing program to create an image to use as the chameleon image: Use the alpha channel to define the overall desired shape of the button (see Working with Transparent Backgrounds for more information). 144 TPDesign4 Touch Panel Design Program Working With Palettes and Colors When creating an image to be used as a chameleon image, 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. The Blue color channel is not used for chameleon buttons. 2. Export the image as a PNG file. The exported file must be 32-bit RGB Color (8 Bits/Channel) in order to be interpreted correctly by TPD4 as a chameleon image. 3. Import the image file into TPD4 (via the Import button on the Images tab of the Resource Manager dialog). 4. In a Design View window, create or select a button to apply the chameleon image to. Keep in mind that the Chameleon Image state property is not available for Text Input, Computer Control or TakeNote button types. 5. In the States tab of the Properties Control window, set the button's Border Name to None. Note that at this point, the Chameleon Image property becomes available (directly beneath Border Name). 6. In the Chameleon Image property, click the browse button (...) to access the Resource Manager dialog. Select the chameleon image (in the Image tab) and click OK to apply it to the selected button. Now that the image has been applied as a chameleon image, 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. Similarly, any portion of the image that exists on the Green color channel now matches the color specified in the Border Color state property. FIG. 33 shows a few examples of color changes resulting from changing the Fill and Border colors for the button/state with the chameleon image: FIG. 33 Changing the Fill and Border colors for the button/state with the chameleon image Since chameleon buttons rely on the Border and Fill color settings, you can use the Fill Color and Border Color Tweening tools to quickly create color transition effects for each of the color channels (FIG. 34): FIG. 34 Chameleon image tweening In fact, the Chameleon images can by used in conjunction with any of the other Tweening tools, depending on what elements (Bitmaps, Icons, Text) make up your button. TPDesign4 Touch Panel Design Program 145 Working With Palettes and Colors Chameleon Images, Custom Palettes and G4 PanelBuilder Chameleon images can be used in conjunction with custom palettes to create G4 PanelBuilder template files, that, when opened in the G4 PanelBuilder application, are capable of switching from one color scheme to another, without having to edit the buttons directly. For example, 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 - one color scheme for each season. You might say that the Color Schemes feature in G4 PanelBuilder allow you to apply different "color skins" to a single template. Since the Fill and Border colors are in turn associated with a particular color palette (which is 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. In basic terms, chameleon images utilize the 4 color channels that comprise 32-bit PNG images to define separate colorizable regions. Using chameleon images coupled with custom palettes to create Color Schemes requires the use of both TPDesign4 and G4 PanelBuilder: Chameleon images are imported and applied to buttons (or popup pages) in TPDesign4. Custom palettes are created in TPDesign4, and saved as part of the TPD4 project. TPDesign4 is also required to export the project as a G4 PanelBuilder Template (*.TPT). However, the primary benefits of these features are realized in the G4 PanelBuilder application (via the Project > Color Schemes feature). Not all TPD4 projects support the Color Schemes feature in G4 PanelBuilder. In order to utilize Chameleon Images and Color Schemes 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 utilize at least one chameleon image (meaning that a chameleon image has been applied to at least one button in the project). There are also several requirements for images to allow them to be recognized as chameleon images by TPDesign4. The project must include at least one custom palette (in addition to the default palette). The project must include one preview image for each of the custom palettes that are included. These preview images are used to display the color options that are available for this template in G4 PanelBuilder. Note that if the exported project does not meet these requirements, the Color Schemes feature in G4 PanelBuilder will be disabled for this template. When a valid TPD4 project file is exported as a G4 PanelBuilder template, and then opened in the G4 PanelBuilder application, the Project > Color Schemes option (in the G4 PanelBuilder application) allows you to apply different color schemes to the template with a single click. 146 TPDesign4 Touch Panel Design Program Animations and Tweening Animations and Tweening Using the Animation Wizard The Animation Wizard is a powerful tool included with TPDesign4. It guides you through the steps of generating an animation sequence that can be applied to a multi-state button. Use animation to create impressive visual effects to your buttons. Multi-state buttons can have up to 256 states, all of which are available to be used as "frames" in an animation. You can create an animation sequence for a multi-state button manually, by creating a series of states and applying a different bitmap or icon to each state and treating each state as an individual frame. This however, would be a very tedious and time-intensive process. The Animation Wizard automates most of the process and makes the task easy. If you select a General (two-state) button to use with the animation wizard, 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). To create a simple button animation using the Animation Wizard: 1. Select Button > Animation Wizard to start the wizard. This opens the first of five dialogs (Animation Wizard - Select Type (Step 1 of 6)). Use the radio buttons in this dialog to specify the type of animation to create (Bitmap or Icon). 2. Click Next to proceed to the Animation Wizard - Create Sequence (Step 2 of 6) dialog. Use this dialog to specify the images to be included in the animation, and set the sequence of the images. 3. Click Next to proceed to the Animation Wizard - Size & Position (Step 3 of 6) dialog. Use this dialog to specify the size and position of the animation relative to the button that will contain it. All position (X-Y) values in TPDesign4 are zero-based (measured in pixels), meaning that the upper-left corner of each page is represented by the X-Y value of 0, 0. 4. Click Next to proceed to the Animation Wizard - Assign Frames (Step 4 of 6) dialog. Use this dialog to create enough states to accommodate the number of frames in the animation sequence. 5. Click Next to proceed to the Animation Wizard - Appearance (Step 5 of 6) dialog. Use this dialog to create enough states to accommodate the number of frames in the animation sequence. 6. Click Next to proceed to the Animation Wizard - Finish (Step 5 of 6) dialog. This dialog lists the actions to be taken to generate the button animation. 7. Click Finish to generate the animation. Note that the animation is indicated in the State Manager window. Use the Button Preview window to view the animation (select View > Button Preview, and click Push). TPDesign4 Touch Panel Design Program 147 Animations and Tweening Once you have created an animation, you can re-use it by opening the Animation Wizard, and selecting a pre-defined sequence from the Sequence drop-down list (Step 2 of 5). Remember, many other animation effects can be achieved via the Tweening tools of TPDesign4. The following sections offer more detailed descriptions of each of the Animation Wizard dialogs: Animation Wizard - Select Type (Step 1 of 6) Select Button > Animation Wizard to start the wizard. This opens the first of five dialogs (Animation Wizard - Select Type (Step 1 of 6)). Use the radio buttons in this dialog to specify the type of animation to create (Bitmap or Icon). Select Bitmap to use bitmaps in the animation. Select Icon to use icons in the animation. Animation Wizard - Create Sequence (Step 2 of 6) Use this dialog to specify the images to be included in the animation, and set the sequence of the images. The Sequence selection is set to "[custom]" by default, and there are no other options in this drop-down list until at least one sequence has been created. Once you create a animation sequence, it will be available via this drop-down list. To add the images that will comprise the animation sequence, click the Add button. This opens the Select Resource dialog, where you can select which images to include in the animation. Ctrl+click to select multiple files, or Shift+click to select the range of files between two selections. Note that the only images that are available to choose from are those that have been imported into the project, through the File > Import Resources option, or via the Import button on the Resource Manager dialog (see Importing Images and Sounds to Your Project for details). The images that you use to create the animation must be named in sequence (i.e. cool_button_spin01.jpg, cool_button_spin02.jpg, cool_button_spin03.jpg, cool_button_spin04.jpg, etc.). Also, make sure the numbering convention used for the files is consistent (i.e. don't mix "1" and "01" or "001"). Although you can edit the sequence of the images in the animation manually, it makes things easier if you take naming into consideration before importing the files. 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 version 7 or higher; there are also many freeware applications available). The general concept is that you start with an existing animated GIF image, and save each frame in the animation out as an individual image file (resulting in a series of image files). Once extracted, these files can be imported into your TPD4 project, and the original GIF animation can be recreated. Note that since TPDesign4 does not support the (proprietary) .GIF file type, you will have to save the frames out to a supported file type. Click OK in the Select Resource dialog to return to the Animation Wizard - Create Sequence (Step 2 of 6) dialog. The image files you selected now appear in alpha-numeric order in the 148 TPDesign4 Touch Panel Design Program Animations and Tweening preview window of this dialog. If the images were named consecutively, you shouldn't have to modify the sequence at all. Use the Move Left and Move Right buttons to re-arrange the image sequence (if necessary). Use the Add and Remove buttons to add/remove selected images from the sequence (if necessary). Animation Wizard - Size & Position (Step 3 of 6) Click Next to proceed to the Animation Wizard - Size & Position (Step 3 of 6) dialog. Use this dialog to specify the size and position of the animation relative to the button that will contain it. This dialog tells you two important pieces of information: the size of the animated image, and the size of the button that will contain it. Use the radio buttons in the top-half of the dialog to specify whether to scale the button to fit the animated image, or to simply apply the animation to the button at its current size. If you are applying an animation that is bigger than the containing button, a warning message is displayed along the bottom of the dialog, and the animated image will be clipped (cropped) to fit in the button. Use the options in the lower-half of this dialog to specify the positioning of the animated image relative to the button containing it. Select the desired position option from the drop-down list. If you select Absolute, use the X and Y fields to indicate the desired position. All position (X-Y) values in TPDesign4 are zero-based (measured in pixels), meaning that the upper-left corner of each button is represented by the X-Y value of 0, 0. Animation Wizard - Assign Frames (Step 4 of 6) Click Next to proceed to the Animation Wizard - Assign Frames (Step 4 of 6) dialog. Use this dialog to create enough states to accommodate the number of frames in the animation sequence. For example, if you create a multi-state button, and open the Animation Wizard before adding any states, you have only two states on the button. Obviously, the animation sequence will have more than two frames. Lets say that your sequence has ten frames. The options in this dialog allow you to automatically detect the number of frames in the animation sequence, and the number of states available on the button that the animation can be applied to. So, for a ten-frame animation, you'll have to add at least eight states to the button (one frame per button state). Use the first field to indicate which state to start the animation on (default = 1, the first state). Use the next field to indicate which of the existing states to duplicate, if more states are required for the animation. If button states exist beyond the end of the animation, use the radio buttons to indicate how to handle them (Leave Alone or Remove). TPDesign4 Touch Panel Design Program 149 Animations and Tweening Animation Wizard - Appearance (Step 5 of 6) Click Next to proceed to the Animation Wizard - Appearance (Step 5 of 6) dialog. Use this dialog to specify how treat the Button Border Style, and Button Fill Color on the resulting button. If creating a bitmap animation, these options default to no border (Set to "none") and transparent fill (Set to "transparent"). If creating a icon animation, these options default to leave both border an fill color alone (Leave alone). Animation Wizard - Finish (Step 6 of 6) Click Next to proceed to the Animation Wizard - Finish (Step 6 of 6) dialog. This dialog lists the actions to be taken to generate the button animation, including: The number of states to be added to the button, and which state to duplicate. The position of the animation on the button. The starting state for the animation, the number of frames in the animation, and the animation type (Bitmap or Icon). A listing of each state and the image file associated with it. Click Finish to generate the animation. Note that the animation is indicated in the State Manager window. Use the Button Preview window to view the animation (select View > Button Preview, and click Push). Once you have created an animation, you can re-use it by opening the Animation Wizard, and selecting a pre-defined sequence from the Sequence drop-down list (Step 2 of 5). Remember, many other animation effects can be achieved via the Tweening tools of TPDesign4. Tweening Short for in-betweening, "tweening" is the process of generating intermediate frames between two images to give the appearance that the first image evolves smoothly into the second image. Tweening is a common concept in all sorts of animation software. TPDesign4 supports multi-state buttons, which can have up to 256 states which are used to animate a button push from Off to On and back again to Off. In TPDesign4, each state of a multi-state button can be thought of as an individual frame. So, if you create a multi-state button with 256 states, you might say that you have 256 frames available for the animation. When the multi-state 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. This is called "Range Time Up", and is definable in 1/10th second increments. When the button is turned back Off, the states will be displayed in reverse order. This is called "Range Time Down", also definable in 1/10th second increments. The Range Time Up and Range Time Down values are set in the States tab of the Properties Control window. 150 TPDesign4 Touch Panel Design Program Animations and Tweening Provided you are not creating an image-based animation, 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. Beyond simplifying the process of creating motion animations, tweening also generates very smooth color transition effects that would be difficult or impossible to do any other way. 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. Since transparent borders are not supported in this version of TPDesign4, to make a button fade completely in/out on a page, you would have create the button without borders. To illustrate, here's an example of how to create a simple button animation using just some of the tweening options available in TPDesign4: 1. Create a new multi-state button. Note that even multi-state buttons initially have only two states, as indicated by the State Manager window (FIG. 35). FIG. 35 Tweening example 1 2. Select Button > Add States, and add 10 states, for a total of 12 (FIG. 36). FIG. 36 Tweening example 2 3. Change the Fill and Border colors on the last state in the series (in this case State 12), via the Properties Control window (States tab). In this example, text was also added to the first and last states in the series ("ON" was applied to the first state in white, "OFF" was applied in black to the last state). Ctrl + click to select only the first and last states in the series and do not select the intermediate states (FIG. 37). FIG. 37 Tweening example 3 4. Right-click on either of the highlighted states to open the State Manager context menu. TPDesign4 Touch Panel Design Program 151 Animations and Tweening 5. Select Tweeners to open the Tweeners sub-menu, and apply each of the top three tween options (Border Color, Fill Color and Text Color) The Bitmap Position, Icon Position and Text Position tween options only work when the Bitmap, Icon and Text Justification settings are set to Absolute positioning (via the States tab of the Properties Control window). 6. The thumbnails in the State Manager change to show the results of the tween options applied. Notice the gradual transition in border and fill colors.. FIG. 38 Tweening example 4 7. To preview the animation as it appear when the button is pushed, select View > Button Preview to open the Button Preview window, and click Push. Creating Color Transition Effects Use the Border Color, Fill Color and Text Color Tweeners to easily apply color transition effects to your multi-state buttons. The color tweeners can be used individually, or in combinations to create smooth fades from one color to another when the button is touched. With 256 states available to use as "frames" in a tweened animation, these effects can be made to be very subtle and smooth. However, most color transition effects don't require that many frames to produce a very smooth fade. 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. Note that to make buttons fade in/out completely, you would have to create the button without a border assignment, since transparent borders are not supported n this version of TPDesign4. 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. This is called "Range Time Up", and is definable in 1/ 10th second increments. When the button is turned back Off, the states will be displayed in reverse order. This is called "Range Time Down", also definable in 1/10th second increments. The Range Time Up and Range Time Down values are set via the States tab of the Properties Control window. To create a color transition effect (the following steps apply to all three button color attributes (Border, Fill and Color): 1. Select (or create a new) multi-state button with at least three states. Note that the more states you use, the smoother the transitions will appear. 2. Apply a color to the last state that is different from that of the first state. To create a fade effect, leave the colors the same for the first and last states, but change the opacity on one of them to zero (via the Colors dialog, set to RGB colors). An opacity setting of zero makes the button totally transparent. An opacity setting of 255 (max) makes the button totally opaque. 3. Ctrl+click to select two stages in the State Manager window that are separated by at least one stage (do not select the intermediate stages). The color tweener(s) will generate a transition 152 TPDesign4 Touch Panel Design Program Animations and Tweening effect that fades the first color into the second. The most basic type of color transition effect starts at the first stage (or frame) and ends at the last. However, the TPDesign4 tweening tools are not limited to one tween effect per multi-stage button press. Experiment with applying multiple color tweens to the same button, and with different combinations of tweeners. 4. Right-click on either of the highlighted states in the State Manager window, and select Tweeners from the context menu to open the Tweeners sub-menu. 5. Select one of the color tweeners to apply the effect. You should see the results immediately in the State Manager window. 6. Apply other color tweeners, one at a time as desired. Creating Animated Bitmap Effects Use the Icon Position and Bitmap Position tweeners to apply animated bitmap effects to multi-state buttons. The Icon Position tweener allows you to cause an icon to move around the button area when it is pressed. The Bitmap Position tweener allows you to cause a bitmap to move around the button area when it is pressed. Animated bitmap effects can be used alone or in conjunction with the other tweeners to create all sorts of eye-catching visual effects. To create animated bitmap effects with an icon: 1. Select (or create a new) multi-state button. 2. Add an icon to the button (via the Text field in the Properties Control window - States tab). 3. Set the Icon Justification field to Absolute. 4. 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). 5. Insert at least one state (tweeners require at least three states to work). 6. Duplicate the state that the tweening should begin across all states to be included in the tween. 7. In the last state included in the tween, 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). 8. Ctrl+click to select just the two stages containing the icon start and end positions in the State Manager window. They must be separated by at least one stage, and you should not select the intermediate stages). To create animated bitmap effects with a bitmap image, follow the steps outlined above. The only difference is that you will select and apply a bitmap rather than an icon to the button. In order to apply motion tweening to an icon, bitmap or text, the justification for the icon, bitmap or text must be set to Absolute. TPDesign4 Touch Panel Design Program 153 Animations and Tweening Creating Animated Text Effects Use the Text Position tweener to apply animated text effects to multi-state buttons. The text position tweener allows you to have the button text move around the button area when it is pressed. Animated text effects can be used alone or in conjunction with the other tweeners to create all sorts of eye-catching visual effects. To create animated text effects: 1. Select (or create a new) multi-state button. 2. Add text to the button (via the Text field in the Properties Control window - States tab). 3. Set the Text Justification field to Absolute. 4. 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). 5. Insert at least one state (tweeners require at least three states to work). 6. Copy the text from the first state to the last state to be tweened, 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). 7. Ctrl+click to select just the two stages containing the text start and end positions in the State Manager window. They must be separated by at least one stage, and you should not select the intermediate stages). The Text Position tweener will generate a motion effect that moves the text across the button. In order to apply tweening to an icon, bitmap or text, the justification for the icon, bitmap or text must be set to Absolute. Tweeners sub-menu Select Tweeners from the States Menu or the State Manager context menu to open the Tweeners sub-menu. This menu allows you to select a type of tweener to use in creating animations on multistate buttons. Note that depending on the elements of the selected buttons, some of these options may not be available. For example, the Bitmap Position option is only available if the selected buttons use a bitmap. The options in this menu include: • Border Color This option tweens the Border color (only) between two selected button states. • Fill Color This option tweens the Fill color (only) between two selected button states. • Text Color This option tweens the Text color (only) between two selected button states. • Text Effect Color This option tweens the Text Effect Color (only) between two selected button states. 154 • All Colors This options tweens the Border, Fill, Text, and Text Effect colors at once. • Overall Opacity This option tweens the Overall Opacity (only) between two selected button states. • Bitmap Position This option tweens the position of a bitmap applied to two selected button states. • Icon Position This option tweens the position of an icon applied to two selected button states. • Text Position This option tweens the position of text applied to two selected button states. TPDesign4 Touch Panel Design Program Animations and Tweening • All Positions This option will tween the Bitmap, Icon, and Text positions at once. • Text Size This option tweens the size of text applied to two selected button states. The position-oriented tweener options only work when the selected elements are set to use absolute positioning. TPDesign4 Touch Panel Design Program 155 Animations and Tweening 156 TPDesign4 Touch Panel Design Program Program Preferences Program Preferences Preferences Dialog Select Edit > Preferences to open the Preferences dialog, where you can set general program preferences for TPDesign4. This dialog contains three tabs: Application: The items in this tab relate to Startup, Undo/Redo Support and Miscellaneous program settings. Appearance: The items in this tab relate to the Design View window. Directories: The items in this tab allow you to specify default directories for Panel files, Backup copies and the image library directory. Use the Customize dialog (to customize the TPDesign4 GUI. Preferences Dialog - Application tab Select Edit > Preferences to open the Preferences dialog where you can set general program preferences for TPDesign4. Click on the Application tab to customize Startup, Undo/Redo Support and Miscellaneous program settings. The items in the Preferences dialog - 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. With this option unchecked, system generated filenames are not generated, although the data that makes them up is still saved. • 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). Note: If the System Page Template was opened as part of the Workspace, the Reload last workspace option will cause the application to attempt to open the (password-protected) System Page Template as part of the last opened workspace. In this case you will be presented with the Enter Access Password dialog. Since there is not a password to unlock the file, by design the only option is to open the System Page Template as a Read-Only file. • Expand Workspace Navigator: This option will expand the tree structure (in the Workspace Navigator - Pages tab) on application startup. Note that this option does not take effect immediately on pressing Apply, but will take effect the next time you open a project file. Window: Auto Stack: TPDesign4 Touch Panel Design Program This setting causes all page windows to stack directly on top of the last active (selected) page window. Use this option if you are working on a resolution or zoom setting that takes up most or all of your screen area, 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). 157 Program Preferences Initial Zoom: This setting sets the zoom factor on any pages and popup pages you open in the workspace. It does not affect the zoom setting for pages that are already open. You can also manually set the zoom factor on any page or popup page by selecting the page and using the Zoom Toolbar, where you can either use the zoom in and out icons ( ) to zoom in/out (in 25% increments), or select the zoom setting (including Fit Page, Fit Width, Fit Height) from the drop-down list. Note: The Auto Stack and Initial Zoom settings are retained the next time you launch the program. Miscellaneous: • Flush Pages On Save: When enabled, this option flushes system memory of any pages that were previously opened but now closed, when the project is saved successfully (default = enabled). • Create backup copy: This option saves a backup copy of the panel file to the backup folder every time you perform a save operation. • Use "Copy of" prefixes: This option automatically adds the prefix "Copy of" to any pasted pages and popup pages, if a name conflict occurs. With this option unchecked, the user will be asked to resolve the name conflict. • Retain selected tool: This option locks the selected tool (Selection Tool or Button Draw Tool). With this option unchecked, the tool is reverted to the Selection Tool at the completion of every button draw operation. • Image Cache Size (MB): Use the up and down arrows to adjust the size of the image cache (default = 8 MB). The image cache size value specifies the amount of memory allocated for images used in displaying buttons (in the Design View, State Manager, and Button Preview). If an image is not found in the in-memory cache, it must be loaded again from disc, which is a much slower operation. Increase the cache size to keep more images in memory (potentially, depending on their size), to speed up loading and displaying those images. Undo / Redo Support: • Enable the undo system: This option enables/disables the ability to undo actions. By default, this option is selected. Note: Pressing OK or Accept after enabling/disabling the undo system will result in a clearing of the undo/redo history. 158 • Number of undo levels: Use the up/down arrows to change the number of undo actions allowed (default = 10000). • Change selection on undo: This option will alter to current selection and select the items that are effected by the latest Undo / Redo action. • Enable the redo system: This option enables/disables the ability to redo actions. By default, this option is selected. Reset: Click to reset all options in the Application tab to their default settings. Reset All: Click to reset all options in both tabs to their default settings. OK: Click to save your changes and close the Preferences dialog. Cancel: Click to close the Preferences dialog, without saving any changes. Apply: Click to apply any changes. TPDesign4 Touch Panel Design Program Program Preferences Preferences Dialog - Appearance tab Select Edit > Preferences to open the Preferences dialog where you can set general program preferences for TPDesign4. Click on the Appearance tab to customize display and grid settings for the Design View window. The items in the Preferences dialog - Design View 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. • Gutter Color: The Gutter is the area around the outer edge of the Design View windows. Click the down arrow to open a palette used to set the default color for the gutter on all new Design View windows. • Auto Stack New Windows: Use this option to automatically stack new Design View windows directly on top of each other, so that only the most recently created or opened page is visible (default = enabled). Grid: Grid Style: Select from the drop-down list of styles that the grid can be displayed in (Line, Dashed Line or Dots). Grid Size: Use the up/down arrows to set the default grid size (measured in pixels). The range is 4 - 255, the default setting is 8. Snap Tolerance: Use the up/down arrows to specify the snap tolerance for the grid. 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 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. Transparency: Transparent colors in TPDesing4 are represented by a checkerboard pattern. This set of options allow you to modify the way that the transparency checkerboard appears. In certain situations, changing the checkerboard style to different sizes, shades and/or colors can facilitate viewing and working with graphics. Note: The Transparency checkerboard is visible on pages and popup pages that are transparent, in the State Manager when a state is transparent, and in the Button Preview when a state is transparent. • Style: Click the down arrow to open a drop-down list of available checkerboard styles that can be used to represent transparency. The options are Light, Medium, Dark and Custom. If Custom is selected, the Custom Colors option is enabled (see below). • Size: Click the down arrow to open a drop-down list of available checkerboard sizes. The options are Tiny, Small, Medium and Large. • Custom Colors: If Custom was selected as the Style (see above), then you can specify a custom color combination for the checkerboard by selecting from these two drop-down lists. Reset: Click to reset all options in the Application tab to their default settings. Reset All: Click to reset all options in both tabs to their default settings. OK: Click to save your changes and close the Preferences dialog. Cancel: Click to close the Preferences dialog, without saving any changes. Apply: Click to apply any changes. TPDesign4 Touch Panel Design Program 159 Program Preferences Preferences Dialog - Directories tab Select Edit > Preferences to open the Preferences dialog where you can set general program preferences for TPDesign4. Click on the Directories tab to set custom Panel (project) and Backup copies directories. The items in the Preferences dialog - 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 (*.TP4). Click the browse button (...) to open the Browse For Folder dialog, where you can navigate to an alternative folder. • Backup copies: This text box displays the directory that is currently set as the default directory for all *.TP4 Backup files. Click the browse button (...) to open the Browse For Folder dialog, where you can navigate to an alternative folder. Advanced: Click the Advanced button to open the Advanced Directories Options dialog, where you can view/edit the default directory for Panel Definition (*.PPF) files. Click Reset to reset this directory to its original default location. Reset: Click to reset all options in the Application tab to their default settings. Reset All: Click to reset all options in both tabs to their default settings. OK: Click to save your changes and close the Preferences dialog. Cancel: Click to close the Preferences dialog, without saving any changes. Apply: Click to apply any changes. Preferences Dialog - Editor Selection tab Select Edit > Preferences to open the Preferences dialog where you can set general program preferences for TPDesign4. The options in the Editor Selection tab allow you to associate external programs of your choice with image and sound files, to accommodate in-place editing of the images and sounds used in your Project. Once you have associated an external program to image and/or sound editor, 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. The items in the Editor Selection tab include: Editors • Editor Type menu: Click the down arrow to select either Image Editors or Sound Editors from the dropdown list. • Add Editor button: Click to add either an image or a sound editing program to the Editors list (depending on the Editor Type selected). • Remove Editor button: With an editor selected (in the Editors list), click this button to remove it from the list, and disassociate it from image or sound files in TPD4. • Editors table: 160 Lists all external image or sound editing programs (depending on the Editor Type selected) that have been added, by filename (*.EXE and file path. The Default column indicates which of the programs is currently set as the default editor. TPDesign4 Touch Panel Design Program Program Preferences Customizing the Menus and Toolbars Adding or Removing Command Shortcuts from the Toolbars/Menus Use the options in the Command tab of the Customize dialog to customize the contents of the TPDesign4 toolbars and menus. Customize dialog Select View > Customize to open the Customize dialog. This dialog includes options that allow you to customize the TPDesign4 GUI to best suit your preferences. The options in this dialog are organized into the following tabs: Commands: Contains options for customizing the TPDesign4 menu bar and menus. Toolbars: Contains options for customizing the TPDesign4 toolbars. Tools: Contains options that allow you to add/remove external program shortcuts to the Tools menu. Keyboard: Contains options for customizing the TPDesign4 keyboard accelerators (hotkeys). Menu: Contains options for customizing the TPDesign4 menus and context menus. Options: Contains additional options for customizing the TPDesign4 toolbars. Customize dialog - Commands tab Use the options in the Command tab of the Customize dialog to customize the contents of the TPDesign4 toolbars. The options in this tab include: • Categories: This is a list of all command categories (scroll down to view the entire list). Note that these categories match the main menu items (File, Edit, Panel, Page, Button, States, Layout, View, Window, and Help), with a few exceptions: The New Menu option allows you to create a new toolbar, and All Commands lists all commands in all categories. • Commands: This is a list of the commands included in the selected Category. You can create a custom toolbar button for any listed command. Customize dialog - Toolbars tab Use the options in the Toolbars tab of the Customize dialog to control the TPDesign4 toolbars, including custom toolbars. The options in this tab include: • Toolbars: This list box contains a list of all toolbars currently associated with TPDesign4 (including custom toolbars). Each listed toolbar has a checkbox. Select/de-select these checkboxes to show/hide the named toolbar. • Reset: Select one or more toolbars in the list (via the checkboxes), and click Reset to reset the selected toolbar(s) to their default configuration (commands, names and icons). • Reset All: Click to reset all listed toolbars to their default configuration (commands, names and icons). TPDesign4 Touch Panel Design Program 161 Program Preferences • New: Click to create a new toolbar. This opens the Toolbar Name dialog. Type a name for the new toolbar in the text field and click OK to add the new toolbar to the toolbar list, and create a new "empty" toolbar. Click and drag to move the new toolbar into a blank area near the other toolbars. • Rename: Select a custom toolbar from the list and click Rename to open the Toolbar Name dialog. Type a new name for the selected toolbar and click OK to rename it. The standard TPDesign4 toolbars cannot be renamed. • Delete: Select a custom toolbar from the list and click Delete to delete the selected toolbar. The standard TPDesign4 toolbars cannot be deleted. Customize dialog - Tools tab Use the options in the Tools tab of the Customize dialog to add/remove external program shortcuts to the Tools menu. The options in this tab include: • Menu Contents: This list represents all shortcuts to external applications currently loaded in the Tools menu. This list is empty until you add a shortcut. The text entered here is what will be displayed in the Tools menu. • Command: Click the browse button (...) to the right of the Command text box to locate and select the .EXE for the application that you want to add to the Tools menu. • Arguments: This option allows you to apply Arguments (also known as "switches") to the command line of the selected program. Arguments allow you to customize the application in various ways. For example, if you specify Notepad.EXE in the Command field, you could enter the argument "C:\somefile.txt" in the Arguments field to cause the program to try to open a file on the root C: drive called "somefile.txt". Click the right-arrow button (to the right of the Arguments text box) to access a list of arguments supported by the specified application. Note: To use arguments, you need to be familiar with the capabilities of the application you are adding. Consult the program's manufacturer for details on argument support. • Initial Directory: This option allows you to specify the initial directory for the specified application to open by default when the program is launched. Customize dialog - Keyboard tab Use the options in the Keyboard tab of the Customize dialog to control the TPDesign4 shortcut keys (or "Accelerators"), including custom Accelerators. An example of a common accelerator in Windows is CTRL+C as a shortcut to "Copy". The options in this tab include: • Category: Click the down-arrow to open a list of all command categories. These categories mirror the main Menu options (File, Edit, Panel, Page, Button, States, Layout, View, Window, and Help), with two additional options: Go To: This category includes commands that serve as shortcuts to various aspects of the TPDesign4 workspace (Button Preview, Properties, State Manager and Workspace). All Commands: This category includes all available commands from all command categories. 162 • Commands: Once a Category has been selected, this list box is populated with all commands included in that category. Note that the commands listed mirror those found in their respective Menu options. • Set Accelerator For: (default) TPDesign4 Touch Panel Design Program Program Preferences • Current Keys: This read-only field displays the accelerator keys currently assigned to the selected command. • Press New Shortcut Key: With a command selected, press the new accelerator key (or key combination) to assign a new accelerator to the command. Customize dialog - Menu tab Use the options in the Menu tab of the Customize dialog to customize the contents of the TPDesign4 menus. The options in this tab include: • Show Menus For (default menu): Since TPDesign4 only has one standard menu, the only selection here is "default menu". • Select Context Menu: Click the down-arrow to open a drop-down list of the TPDesign4 context menus (context menus are accessed via a right-mouse (for example, a right mouse click on any thumbnail in the State Manager window opens the State Manager context menu). To add a command to a context menu: 1. Select a context menu that you want to add commands to. The context menu opens as a "floating" window. 2. Flip to the Commands tab of the Customize dialog and select a command to add to the menu. 3. Click and drag the command into place on the selected context menu. To remove a command from a context menu: 1. Select a context menu that you want to remove commands from (in the Select Context Menu drop-down list). 2. Click to select a command in the context menu, and drag the command outside the area of the menu. Customize dialog - Options tab Use the options in the Options tab of the Customize dialog to customize the general appearance of the TPDesign4 toolbars. The options in this tab include: • Show ScreenTips on Toolbars: When this option is enabled (checked), a brief description of each toolbar button is displayed whenever the cursor is placed over it (default = enabled). • Show Shortcut Keys in Screen Tips: When this option is enabled (checked), the shortcut keys (or "accelerators") associated with the selected command are displayed in the ScreenTips description. If Show ScreenTips on Toolbars is disabled, this option is not available (default = enabled). • Large Icons: TPDesign4 Touch Panel Design Program When this option is enabled (checked), the toolbar icons are displayed at approximately double their original size (default = disabled). 163 Program Preferences Command Context Menu With the Customize dialog open, right-click on any toolbar, toolbar button, menu or menu item to open the Command context menu. This menu contains shortcuts to commands relating to customizing the menus and toolbars. Items in this context menu include: • Reset to Default: Click to reset the selected button or menu item to its default text and image settings. • Copy Button Image: Click to copy an image of the selected button to clipboard memory. • Delete: Click to delete the selected button or menu item from the toolbar or menu. • Button Appearance: Click to open the Button Appearance dialog, where you can customize the text and icon associated with the selected button. • Image: Click to display the selected button or menu item as an icon only (no text). • Text: Click to display the selected button or menu item as an text only (no icon). • Image and Text: Click to display the selected button or menu item with text and an icon. • Start Group: Click to select the Start Group option. This option inserts a toolbar break (double vertical lines) directly before the selected button, allowing you start a new group of toolbar buttons. Note that the first (left-most) toolbar button in each toolbar button group already shows this option as being enabled. Adding Buttons To Existing Toolbars 1. Open the Customize dialog (select View > Customize). 2. Select a command category (under Categories). The commands included in the selected category are displayed (under Commands), along with their associated toolbar icon, if one exists. Alternatively, select All Commands to view a full list of all commands, regardless of category. 3. Click to highlight a command/icon (under Commands). 4. While holding the mouse-button down, drag the command/icon to a toolbar. Note that the cursor symbol indicates that it is not allowed to be placed anywhere except inside the area of a toolbar (any toolbar). 5. Position the command/icon right where you want to drop it in the toolbar, and release the mouse button. 6. The command/icon is placed as a toolbar button in the toolbar. Removing Buttons From Existing Toolbars 1. Open the Customize dialog (select View > Customize). 2. Click to select a toolbar button from an existing toolbar. 3. While holding the mouse button down, drag the button to any area outside of a toolbar. Note that the cursor symbol changes to an "x" when the button is dragged outside of the toolbars. 4. Release the mouse button to delete the button from the toolbar. Alternatively, as long as the Customize dialog is open, you can simply right-click on any button to open the New Command context menu. Select Delete to delete the button. 164 TPDesign4 Touch Panel Design Program Program Preferences Creating a New Custom Toolbar 1. Open the Customize dialog (select View > Customize), open to the Toolbars tab. 2. Click the New button. This opens the Toolbar Name dialog. 3. Enter a name for the new toolbar in the text field and click OK. 4. The new toolbar name appears in the Toolbars list, along with an empty new toolbar icon. 5. Click and drag to move the new toolbar icon into position, in an empty area near the other toolbars. 6. With the empty toolbar in place, go the Commands tab of the Customize dialog. 7. Select a command category (under Categories) to display a list of commands (under Commands). 8. Click and drag commands from the Commands list and drop them inside the area of the new toolbar. Repeat this process to add as many commands as you like to your custom toolbar(s). Renaming Custom Toolbars 1. To rename a custom toolbar, select View > Customize to open the Customize dialog, and open the Toolbars tab. 2. Select the toolbar you want to rename from the list, and click Rename to open the Toolbar Name dialog. 3. Enter the new name in the Toolbar Name text field and click OK to save the change. Deleting Custom Toolbars To delete custom (user-added) toolbars from the TPDesign4 workspace: 1. Click View > Customize to open the Customize dialog. 2. Open the Toolbars tab. 3. Click to select a custom toolbar. 4. Click Delete to permanently delete the selected toolbar. The standard TPDesign4 toolbars cannot be deleted. Adding a Shortcut To an Application In the Tools Menu Use the options on the Tools tab of the Customize dialog to add/remove shortcuts to external applications in the Tools menu: 1. Select View > Customize to open the Customize dialog. 2. In the Tools tab, click the New button to create an empty text field in the Menu Contents list. 3. Enter a name for the application, as you want it to appear in the Tools menu. 4. Click the Browse button to locate and select the application's .EXE file. The directory path is displayed in the Command text box. 5. Specify any Arguments, if necessary. TPDesign4 Touch Panel Design Program 165 Program Preferences 6. Specify an Initial Directory, if necessary. 7. Click Close to close the Customize dialog. 8. The new shortcut should appear at the bottom of the Tools menu. Creating a New Custom Menu 1. Open the Customize dialog (select View > Customize). 2. In the Commands tab, select New Menu from the Categories list. This places the "New Menu" entry in the Commands list. This item represents a new "empty" menu. 3. Click to select New Menu (under Commands). 4. While holding the mouse button down, drag the New Menu icon to a location within the Menu Bar. 5. Release the mouse button to create the new (empty) menu at the cursor location. 6. To name the new menu, right-click on the menu to open the New Command context menu, and select Button Appearance. This opens the Button Appearance dialog. Type the name for the new menu in the Button Text field and press OK. 7. Select a command category (under Categories) to display a set of commands (under Commands). 8. Add commands to the new menu by clicking and dragging commands from the Commands list to the new menu. 9. Release the mouse button to place the selected command in the new menu. Adding Commands To Existing Menus 1. Open the Customize dialog (select View > Customize). 2. Open the menu that you want to add command(s) to. 3. Select a command category (under Categories). The commands included in the selected category are displayed (under Commands), along with their associated toolbar icon, if one exists. Alternatively, select All Commands to view a full list of all commands, regardless of category. 4. Click to highlight a command/icon (under Commands). 5. While holding the mouse-button down, drag the command/icon to the open menu. 6. Position the command/icon right where you want to drop it in the menu, and release the mouse button. 7. The command/icon is placed as a new option in the menu. Associating an Icon With a New Command Once you have added a new command to a toolbar or menu, you can associate an icon with the command: 1. Open the Customize dialog (select View > Customize). 2. For toolbar buttons, right-click on the select the button that you want to associate an icon with. For menu items, right-click on a menu item. This opens the Button Appearance dialog. 166 TPDesign4 Touch Panel Design Program Program Preferences 3. In the Button Appearance dialog, select Image Only or Image and Text (the Text Only option does not allow you to associate an icon). 4. Select an icon from the User-Defined Image field. 5. Click OK. Removing Commands From Existing Menus 1. Open the Customize dialog (select View > Customize). 2. Click to select a menu item from an existing menu. 3. While holding the mouse button down, 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. 4. Release the mouse button to delete the item from the menu. Alternatively, as long as the Customize dialog is open, you can simply right-click on any menu item to open the Command context menu. Select Delete to delete the button. Hotkey Shortcuts Hotkeys, sometimes referred to as "Keyboard Accelerators" (such as CTRL+C for the "Copy" command) can be customized in TPDesign4. Help Keyboard dialog Select Help > Keyboard Map to open the Help Keyboard dialog, which displays a listing of all current hotkey assignments. This information is read-only. Additional features of this dialog include: Click to print the selected category of commands/hotkey assignments. Click to copy the selected category of commands/hotkey assignments to clipboard memory. Category - Click the down arrow to select a category of commands to display (select All Commands to view the entire list). Show Accelerators For - Click the down arrow to select which hotkey template to display. Setting Custom Hotkeys Use the Keyboard tab of the Customize dialog to create new keyboard accelerators (or "hotkeys"), or to modify existing ones: 1. Choose View > Customize to open the Customize dialog, and open the Keyboard tab. 2. Choose a command category in the Category drop-down menu. 3. Choose a command in the Commands list. 4. Enter the new hotkey(s) in the Select New Shortcut Key field. If you assign the minus key (-), always use the number pad on your keyboard, as opposed to the minus key in the main key set. TPDesign4 Touch Panel Design Program 167 Program Preferences 5. Click Assign to assign the key(s) to the selected menu item. To remove a hotkey assignment, select the command in the Commands list, then highlight the command's hotkey assignment in the Current Keys list, and click Remove. To reset all hotkey assignments to their default settings, click Reset All. Multiple hotkeys can be assigned to the same command, but only the first one will be displayed next to the item in the menu after this type of change. Visual Style Options Select Visual Style from the View menu to access the Visual Style sub-menu. The options in this sub-menu allow you to select a visual style for the TPDesign4 GUI. The available options are: Default: The “classic” look of TPDesign4, as it looked in version 1.0. Office XP®: This is the default setting, which uses an Office XP style for its toolbars and menus. Office 2003® - This selection changes TPDesign4's look and feel to match that of Microsoft's Office 2003. Windows XP® Home - This setting is only available if the application is running on a PC equipped with Windows XP Home, with style themes enabled. 168 TPDesign4 Touch Panel Design Program Appendix A: G4 Computer Control Appendix A: G4 Computer Control The newest AMX Touch Panels (Modero), TPI/4 Touch Panel Interfaces, and TPDesign4 software now come Computer Control ready. In combination with the NXA-USBTN (FG070-603), this innovative application allows the user to connect any computer to the control network. Simply plug in the USBCC stick into any computer to experience complete access to control your computer directly through the Touch Panel. The USB Control Stick contains everything that you need to implement Computer Control functionality including: The amxCC server application The configCC configuration utility NetLinx cc-GuestPC Code Module Sample Code and Touch Panel Pages System Requirements for G4CC Supported Operating Systems: Windows 2000 (Service Pack 4 or greater) Windows XP (Service Pack 1 or greater) System Requirements: Latest G4 Touch Panel firmware USB port Pentium® 1 GHZ processor 256 MB of RAM Other configurations may experience some performance impact while remote clients are connected. Setting Up G4CC 1: TPD4 Touch Panel File 1. Create a new button, and select Computer Control as the button type (in the General tab of the Properties Control window). Nothing should be entered in the Remote Host and Password fields. 2. In the Programming tab of the Properties Control window, set the Channel Code to 0 - setup port. 3. Click the down arrow next to Channel Code to access the options window (for Basic Codes), and click on Advanced Codes. All functions listed in the Advanced Codes menu are for computer control functionality. 4. Select the function that you want to assign to the new button. TPDesign4 Touch Panel Design Program 169 Appendix A: G4 Computer Control 2: Source Code 1. A Telnet device connection must be added to your device definitions. Example: vdvGuestPC = 0:5:0 Module Definition: DEFINE_MODULE 'cc-GuestPCMod' < mdlGuestPC > (<vdvGuestPC >) where: < mdlGuestPC > - local name for this instance of the cc-GuestPC module < vdvGuestPC > - device for cc-GuestPC to use for internal data events; this should be a DEFINE_DEVICE for the events to work properly 2. cc-GuestPC.tko is located in the module folder on the USB stick. The cc-GuestPC.tko file needs to be added to your workspace in Studio to compile with source code. 3. Compile and load source code to NetLinx master. 3: G4CC (Computer Control) Configuration: Launch configCC.exe (on the USB stick). Use this application to configure G4CC. Using configCC.exe to Configure G4CC configCC.exe is the Configuration Utility for G4CC (included on the same USB stick). Use this application to designate up to four Modero / TPI/4 panels that will be allowed to control this computer. 1. Connect the computer to an Ethernet Network that can communicate with the NetLinx Control System. 2. Insert the USB Computer Control Stick into the USB port on the computer that is being controlled. A series of USB driver installation popup windows appear. 3. Confirm that a new USB detection icon appears in the lower-right taskbar of the display window. 4. Use the computer’s file browser to navigate to the USB stick’s drive location and open the Config folder on the USB Control Stick drive directory. 5. Double-click the configCC executable to run the G4 Computer Control Configuration Utility from the NXA-USBTN drive (FIG. 39). FIG. 39 G4 Computer Control Configuration Utility (configCC.exe) 170 TPDesign4 Touch Panel Design Program Appendix A: G4 Computer Control This application allows you to designate up to four Modero or TPI/4 panels with rights to control this computer. The following information is needed for each Modero or TPI/4 panel: NetLinx Master IP Address/DNS (Fixed IP/URL)____.____.____.____ (Acquire the IP address of the NetLinx master by using NetLinx Studio 2.1 Diagnostics Tab / Network Addresses / Get IP Information). G4 Touch Panel Device ID: _______ (Acquire the panel device number in the online tree of NetLinx Studio). G4 Touch Panel System: _______ (Acquire the system number in the online tree of NetLinx Studio). Computer Control Button Address Port: _______ (Acquire this number from the TPD4 touch panel file under the Button Properties / Programming Tab). Computer Control Button Address Code (Channel): _______ (Acquire this number from the TPD4 touch panel file under the Button Properties / Programming Tab). 6. Press the OK button when finished adding a panel. This action creates the configuration file in the main USB stick directory. Once the USB Control Stick has been configured, it can be used on any computer residing on the Ethernet Network that can communicate with the NetLinx Control System. 7. Add multiple panels using the next button on the PC (maximum of four). Setting Programming Properties: Computer Control Buttons Once you have created a Computer Control button, you can use the Programming tab of the Properties Control window to set/edit programming-oriented button properties. To edit any of the properties, click in the right-hand table cell to activate the field. Depending on the item selected, you can either set the item manually, select from a drop-down menu, or both. The following programming properties are supported for Computer Control buttons: • Address Port: Select or enter the port to which the address code will be applied. • Address Code: Select or enter the address code sent to the master on the selected port. • Channel Port: Select 0 - setup port. • Channel Code: Click to open the Basic Codes options, then click on Advanced Codes to access the advanced codes menu. TPDesign4 Touch Panel Design Program 171 Appendix A: G4 Computer Control Click the '+' sign out beside Computer Control, to expand the Advanced Codes menu to show the available functions. • String Output Port Select or enter the port to which the output string will be applied. • String Output Specify the output string sent to the master on button push. Click the browse button (...) to open the Enter Text dialog. Enter the output string and click OK (or Cancel to exit without saving). • Command Port Select or enter the port to which the command string output will be applied. • Command Output Specify the command string sent to the master on button push. Click the browse button (...) to open the Enter Text dialog. Enter the command output and click OK (or Cancel to exit without saving). Maximum command, string and text length = 4096 characters. Running the G4CC Application Once the configuration file has been created: Double-click to launch the amxCC.exe application located in the root directory of the USB Control Stick to begin your G4CC session. The G4CC icon will appear in the tool tray. The icon will turn green when a Modero / TPI/4 panel is connected to the computer. Upon opening this file, your PC should now be displayed on the touch panel. To terminate your Computer Control session, right click on the tool try icon and select Close Computer Control from the menu. 172 TPDesign4 Touch Panel Design Program Appendix B: G4 Panel Builder Appendix B: G4 Panel Builder Creating a New Project Using G4 PanelBuilder The G4 PanelBuilder application (installed separately) provides a quick alternative to creating touch panel projects from scratch. Use this option to launch the G4 PanelBuilder application and create the basic layout and navigation of your panel file. 1. Select File > New From G4 PanelBuilder to launch the G4 PanelBuilder application. In G4 PanelBuilder, there are several possible approaches to creating a new PanelBuilder (*.PB4) file in the G4 PanelBuilder application: (In G4 PanelBuilder, select File > New (or select Choose Template in the Tasks Pane) to create a new PanelBuilder project file based on existing templates (that were either downloaded from www.amx.com, or were created in TPDesign4). (In G4 PanelBuilder, select File > New From File (or select Start From Existing Project in the Tasks Pane) to open a copy of an existing PanelBuilder project file to use as a starting point. (In G4 PanelBuilder, select a template from the list of recently opened templates (or select Start a New Project in the Tasks Pane). 2. In G4 PanelBuilder, develop the PanelBuilder project as desired. Refer to the G4 PanelBuilder help file for details on creating a G4 PanelBuilder (*.PB4) file. 3. In G4 PanelBuilder, select File > Save to save the PB4 file. Use File > Save As to save the file under a new name and/or specify a different target directory. 4. In G4 PanelBuilder, select File > Generate TPDesign4 Project. In the Generate TPDesign4 Project dialog, specify a name and target directory for the (*.TP4) file. By default, once the TP4 file has been generated, the project is automatically opened in TPDesign4 (de-select the Open Project in TPDesign4 option to disable this feature). If the project does not automatically open in TPDesign4, launch TPDesign4 and open the project file (File > Open). TPDesign4 treats projects generated in G4 PanelBuilder the same as any other TP4 project file; use TPDesign4 to assign channel mapping information and make any other refinements to the project as needed. 5. Save the project (File > Save). The file is now ready for transfer. Use the Panel > Send to G4 PanelPreview option to preview the resulting panel file in the G4 PanelPreview application. TPDesign4 Touch Panel Design Program 173 Appendix B: G4 Panel Builder Importing G4 PanelBuilder Templates You can import existing G4 PanelBuilder template (*.TPT) files to take advantage of the prefabricated elements they contain: 1. Select File > Import G4 PanelBuilder Template to access the Import G4 PanelBuilder dialog. Locate and open the desired template file (*.TPT). If you have downloaded G4 PanelBuilder templates from www.amx.com, they reside in the following directory: C:\Program Files\Common Files\AMXShare\G4Templates 2. The selected template file is opened in TPDesign4 as a TP4 project file. 3. Modify and save the file as needed. Creating G4 PanelBuilder Templates You can use TPDesign4 to create custom G4 PanelBuilder template (*.TPT) files. A template is essentially just a TPDesign4 project (*.TP4) file with pages, popup pages and buttons named in a specific way that allows G4 PanelBuilder to recognize the elements in the project, and understand the relationships between these elements. Once a TP4 project file is exported as a G4 PanelBuilder Template (*.TPT) file, it can be used as a starting point for panel design in the G4 PanelBuilder application. The basics of this operation are simple: once you have created or opened a TP4 file, select File > Export As G4 PanelBuilder Template. Assuming that the project adheres to the various rules required by G4 PanelBuilder for a valid template file, the file is exported with the TPT file extension. There are certain basic requirements that must be met by the TP4 file before it can be exported as a G4 PanelBuilder Template (TPT) file: The project must contain at least one Navigation Element. A Navigation element consists of at least one popup (may contain multiple popups), and represents the place where you make most navigation selections (i.e. a main menu page). The project must contain at least one Placeholder Element. A Placeholder element is a blank or empty device/feature element that allows you to include items in the project that are not specifically included in the template. The project must contain at least one main Preview image. A Preview image is the image that is used for thumbnail representation of the template within the G4 PanelBuilder application. If TPD4 detects that there are problems with the file that would prevent it from being used by G4 PanelBuilder, these errors and warnings are listed in the Export As G4 PanelBuilder dialog. 174 TPDesign4 Touch Panel Design Program Appendix B: G4 Panel Builder Template Requirements There are a few key items required of all templates. TPD4 will not allow you to create a template without: A minimum of 1 Navigation Element. A minimum of 1 Placeholder Element. A main Preview Image. When designing a template it is important to remember the rules that govern elements and their relation with the templates, as indicated in FIG. 40. FIG. 40 G4 PanelBuilder - Template element rules 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, i.e., "Video Conference Mode" or "Presentation Mode." Additionally, Mode elements can be associated with rooms. Consists of a single page and can contain multiple popups. Only one Mode element can be displayed at a time. Element Specific Conventions (click to access) Sub-Navigation Elements - This element is a submenu and can occur on screen with Navigation elements. Consists of at least one popup and can contain multiple popups. Cannot contain pages. TPDesign4 Touch Panel Design Program 175 Appendix B: G4 Panel Builder Element Specific Conventions (click to access) Splash Elements - This element is a popup that can contain an image, i.e., corporate logo. Consists of at least one popup and can contain multiple popups. Cannot contain pages. Element Specific Conventions (click to access) Device Elements - This element is the actual device used. For reference, consult AMX templates where we list the most commonly used devices. Consists of one page and can contain multiple popups. Only one Device element can be displayed at a time. Element Specific Conventions (click to access) Feature Elements - This element resembles the Device element. However, there can only be one Feature element in a panel design, i.e., the "Clean Panel" feature. Consists of one page and can contain multiple popups. Only one Feature element can be displayed at a time. Element Specific Conventions (click to access) Sub-Feature Elements - This element represents the "universal" features that appear on many pages, i.e., "volume." Consists of at least one popup and can contain multiple popups. Cannot contain pages. Element Specific Conventions (click to access) Rules for Navigating A Template In addition to the template requirements and required elements there are rules for navigating the templates and template wide conventions you need to heed. When navigating to a Device, Feature or Placeholder element from a Navigation element: Hide all popups on the page for that element. Perform the standard page flip to the page for that element. Show any popups for the element. Show any popups for the linked Sub-Feature, when applicable. Show the Navigation element that linked to the element. Any Sub-Navigation elements that may have been currently displayed will be hidden. When navigating to a Device, Feature or Placeholder element from a Sub-Navigation element: 176 TPDesign4 Touch Panel Design Program Appendix B: G4 Panel Builder Hide all popups on the page for that element. Perform the standard page flip to the page for that element. Show any popups for the element. Show any popups for the linked Sub-Feature, when applicable. Show the Navigation element that linked to the Sub-Navigation element or chain. For Sub-Navigations the user must set "Hide On Action" to No, then show the SubNavigation element that linked to the element. Otherwise, the Sub-Navigation is not shown. Info buttons are optional and only have to be included within an element if either the order the popup pages is shown is important, if not all popup pages should be initially shown, or if an icon is used on the corresponding Navigation or Sub-Navigation button. If the Info button is omitted, popup pages are shown in alphabetical order. Template Wide Conventions Text Replacement - The string "[text]" is required on the button wherever text is to be replaced in the output file. The string "[text]" allows you to prepend/postpend text with characters. If the text on a button to be replaced does not contain '[text]" then it is unchanged. Panel Title - A template can contain as many buttons named "[panelTitle]" as necessary, they are replaced with the "Job Name" of the panel. Preview Images - A template must contain a main preview image and can also contain a preview image for each element. The main preview image should be named '[preview].jpg" (or .png). The element previews should follow the same naming conventions as their page prefixes, i.e., "[device#DVD].jpg." There can only be one preview image per element. Creating Navigation Elements In order for a TP4 file to be successfully exported as a G4 PanelBuilder Template file (*.TPT), the TP4 project file must contain at least one Navigation Element. A Navigation element consists of at least one popup (may contain multiple popups), and represents the place where you make most navigation selections (i.e. a main menu page). To create a basic Navigation element, create a new popup page (Panel > Add Popup Page), and name it according to the naming convention required by G4 PanelBuilder for Navigation elements: [nav#navName]pageName navName - The name of the Navigation as it will appear in G4 PanelBuilder. pageName - The base page name that will be used in the generated TP4 project. Example implementation of Navigation popup, as seen in the "graphiclySound-Orange" template (available from AMX). Note that the template includes several variations on the same Navigation theme, offering different numbers of buttons. The example shown below (FIG. 41) is for the TPDesign4 Touch Panel Design Program 177 Appendix B: G4 Panel Builder Navigation popup named "[nav#3 Selections]Navigation 3", which as the name implies, contains three buttons.: FIG. 41 Example (General) properties for a Navigation popup The example Navigation popups in the Workspace Window represent the variations on the Navigation theme for different numbers of buttons (FIG. 42). FIG. 42 Navigation popups in the Workspace Window The "[nav#3 Selections]Navigation 3" popup as it appears in the Workspace: FIG. 43 Example Navigation popup 178 TPDesign4 Touch Panel Design Program Appendix B: G4 Panel Builder Creating Placeholder Elements In order for a TP4 file to be successfully exported as a G4 PanelBuilder Template file (*.TPT), the TP4 project file must contain at least one Placeholder Element. A Placeholder element is basically a blank device/feature element that allows you add items to the project in G4PanelBuilder that are not included in the template. Placeholder elements consist of one page, and may contain multiple popups. Only one Placeholder element can be displayed at a time To create a basic Placeholder element, create a new Page (Panel > Add Page), and name it according to the naming convention required by G4 PanelBuilder for Placeholder elements: [placeholder#placeholderName]pageName placeholderName - The name of the Placeholder element as it will appear in G4 PanelBuilder. pageName - The base page name that will be used in the generated TP4 project. FIG. 44 shows an example implementation of a Placeholder element, as seen in the "graphiclySound-Orange" template, available from AMX. FIG. 44 Example (General) properties for a Placeholder page FIG. 45 shows an example Placeholder page in the Workspace Window: FIG. 45 Example Placeholder page in the Workspace Window TPDesign4 Touch Panel Design Program 179 Appendix B: G4 Panel Builder FIG. 46 shows the "[placeholder#Placeholder]Placeholder" page as it appears in the Workspace: FIG. 46 The "[placeholder#Placeholder]Placeholder" page in the Workspace Placeholder Element Conventions Placeholder Pages: A template may contain one or more Placeholder elements, which must be composed of a page and optional popup pages. [placeholder#placeholderName]pageName • placeholderName - The name of the Placeholder element as it will appear in G4 PanelBuilder. • pageName - The base page name that will be used in the generated TP4 project. Info Button: One and only one of the pages/popups in an Placeholder element may contain an Info button which contains the page flip information for displaying the Placeholder element and may also contain an optional icon image. [info]buttonName • buttonName - Unused; The button is deleted in the generated TP4 project. Title Button: The pages/popups in a Placeholder element may contain one or more Title buttons, whose text will be replaced with the name given to the Placeholder element in the generated TP4 project. [title]buttonName • buttonName - The button name that will be used in the generated TP4 project. 180 TPDesign4 Touch Panel Design Program Appendix B: G4 Panel Builder Creating Preview Images To aid in the creation of preview images that are embedded in G4 PanelBuilder template files, the Create Template Preview Image tool has been added to the Page menu. In order for a TP4 file to be successfully exported as a G4 PanelBuilder Template file (*.TPT), the TP4 project file must contain at least one Main Preview Image. However, you can create multiple preview images to represent various elements in the project. Preview Images are used in G4 PanelBuilder for both the thumbnail images displayed in the Template Manager, as well as the icons in the toolbox. Preview Images cannot be used within the panel design itself. They must be either JPG or PNG files. To create preview images for your G4 PanelBuilder template: 1. Open a page in a Design View window. 2. Select Page > Create Template Preview Image to open the Create Template Preview Image dialog. The preview Image will be created using the page that currently has edit focus. 3. Select the type of preview image you want to create from the Element Type drop-down menu. This menu lists all of the types of project elements that are recognized by G4 PanelBuilder. Pick the one that best describes the type of element you are creating a preview image for. The first item in the list is Main Preview, which represents the main preview image that is required by G4 PanelBuilder for the template to be valid. 4. If you have selected any element other than Main Preview, then you can enter an alternative name for it in the Element Name text field. The alternate name that is entered here will be used as the default on-screen text when the template is added to a project in G4 PanelBuilder. 5. Use the up and down arrows next to the Scale% field to scale the image, if desired. For example, in order to minimize the file size of the template, you may decide to reduce the zoom on your preview image(s) to 25%. 6. In the File Format drop-down, select either JPG or PNG as the file format for the image file. If you select JPG, you can specify the compression setting using the Compression slider bar. The Size side of the bar optimizes the file size of the image file (typically at the expense of image quality). Conversely, the Quality side of the bar optimizes the file for image quality, which usually results in a larger file size. 7. Click OK to create the preview image. Once the preview image has been generated, it appears in the Resource Manager (Images tab). If you created a Main Preview image, it will be named [preview].jpg or [preview].png. Otherwise, it will be named according to the name specified above. Select the image and click the Export button to export the image to another directory, if desired. Alternate Screen Names for Template Elements Template elements can now be given an alternate name that will be used as the default on-screen text when added to a project in G4 PanelBuilder. The text will be taken from the name that follows the '[info]' tag on an Info button's name. For instance, to use a shorter name for the Audio Conference element, name your Info button '[info]Audio Conf'. TPDesign4 Touch Panel Design Program 181 Appendix B: G4 Panel Builder Element Specific Conventions Mode Pages: A template may contain one or more Mode elements, which must be composed of a page and may contain multiple popup pages. mode#modeName]pageName • modeName - The name of the Mode as it will appear in G4 PanelBuilder. • pageName - The base page name that will be used in the generated TP4 project. Info Button: One and only one of the pages in a Mode element may contain an Info button which contains the page flip information for displaying the Mode element and may also contain an optional icon image. [info]buttonName • buttonName - Unused; The button is deleted in the generated TP4 project. Item Button: In total, the page in the Mode element must contain at least one Item button that will be filled in with navigation information. Item buttons will be ordered in the Mode element by their left-to-right, then top-to-bottom screen order. [item]buttonName • buttonName - The button name that will be used in the generated TP4 project. Title Button: The popups in a Mode element may contain one or more Title buttons, whose text will be replaced with the name given to the Mode in the generated TP4 project. [title]buttonName • buttonName - The button name that will be used in the generated TP4 project. Navigation Element Conventions Navigation Popups: A template requires one or more Navigation elements, which are composed one or more popup pages (Navigation elements may not contain pages). [nav#navName]pageName • navName - The name of the Navigation as it will appear in G4 PanelBuilder. • pageName - The base page name that will be used in the generated TP4 project. • Info Button: One and only one of the pages/popups in a Navigation element may contain a Info button which contains the page flip information for displaying the Navigation element and may also contain an optional icon image. [info]buttonName • buttonName - Unused; The button is deleted in the generated TP4 project. Item Button: In total, the page/popups in the Navigation element must contain at least one Item button that will be filled in with navigation information. Item buttons will be ordered in the Navigation element by their left-toright, then top-to-bottom screen order. [item]buttonName • buttonName - The button name that will be used in the generated TP4 project. 182 TPDesign4 Touch Panel Design Program Appendix B: G4 Panel Builder Title Button: The popups in a Navigation element may contain one or more Title buttons, whose text will be replaced with the name given to the Navigation in the generated TP4 project. [title]buttonName • buttonName - The button name that will be used in the generated TP4 project. Sub-Navigation Element Conventions Sub-Navigation Popups: A template may contain one or more Sub-Navigation elements, which are composed of one or more popup pages (Sub-Navigation elements may not contain pages). [subnav#navName]pageName • navName - The name of the Sub-Navigation as it will appear in G4 PanelBuilder. • pageName - The base page name that will be used in the generated TP4 project. Info Button: One and only one of the popups in a Sub-Navigation element may contain an Info button which contains the page flip information for displaying the Sub-Navigation element and may also contain an optional icon image. [info]buttonName • buttonName - Unused; The button is deleted in the generated TP4 project. Item Button: In total, the popups in the Sub-Navigation element must contain at least one Item button that will be filled in with navigation information. Item buttons will be ordered in the Navigation element by their left-toright, then top-to-bottom screen order. [item]buttonName • buttonName - The button name that will be used in the generated TP4 project. Title Buttons: The popups in a Sub-Navigation element may contain one or more Title buttons, whose text will be replaced with the name given to the Sub-Navigation in the generated TP4 project. [title]buttonName • buttonName - The button name that will be used in the generated TP4 project. Splash Element Conventions Splash Popups: A template may contain one or more Splash elements, which are composed of one or more popup pages (Splash elements may not contain pages). [splash#splashName]pageName • startName - The name of the Splash element as it will appear in G4 PanelBuilder. • pageName - The base page name that will be used in the generated TP4 project. Info Button: One and only one of the pages/popups in a Splash element may contain a Info button which contains the page flip information for displaying the Splash element and may also contain an optional icon image. [info]buttonName • buttonName - Unused; The button is deleted in the generated TP4 project. TPDesign4 Touch Panel Design Program 183 Appendix B: G4 Panel Builder Title Buttons: The popups in a Splash element may contain one or more Title buttons, whose text will be replaced with the name given to the Splash element in the generated TP4 project. [title]buttonName • buttonName - The button name that will be used in the generated TP4 project. Device Element Conventions Device Pages: A template requires one or more Device elements, which must be composed of a page and optional popup pages. [device#deviceName]pageName • deviceName - The name of the Device as it will appear in G4 PanelBuilder. • pageName - The base page name that will be used in the generated TP4 project. Info Button: One and only one of the pages/popups in a Device element may contain an Info button which contains the page flip information for displaying the Device element and may also contain an optional icon image. [info]buttonName • buttonName - Unused; The button is deleted in the generated TP4 project. Title Button: The pages/popups in a Device element may contain one or more Title buttons, whose text will be replaced with the name given to the Device in the generated TP4 project. [title]buttonName • buttonName - The button name that will be used in the generated TP4 project. Feature Element Conventions Feature Pages: A template may contain one or more Feature elements, which must be composed of a page and optional popup pages. [feature#featureName]pageName • featureName - The name of the Feature as it will appear in G4 PanelBuilder. • pageName - The base page name that will be used in the generated TP4 project. Info Button: One and only one of the pages/popups in a Feature element may contain a Info button which contains the page flip information for displaying the Feature element and may also contain an optional icon image. [info]buttonName • buttonName - Unused; The button is deleted in the generated TP4 project. Title Button The pages/popups in a Feature element may contain one or more Title buttons, whose text will be replaced with the name given to the Feature in the generated TP4 project. [title]buttonName • buttonName - The button name that will be used in the generated TP4 project. 184 TPDesign4 Touch Panel Design Program Appendix B: G4 Panel Builder Sub-Feature Element Conventions Sub-Feature Popups: A template may contain one or more Sub-Feature elements, which are composed of one or more popup pages (Sub-Feature elements may not contain pages). [subFeature#subFeatureName]pageName • subFeatureName - The name of the Sub-Feature element as it will appear in G4 PanelBuilder. • pageName - The base page name that will be used in the generated TP4 project. Info Button: One and only one of the pages/popups in a Sub-Feature element may contain a Info button which contains the page flip information for displaying the Start element and may also contain an optional icon image. [info]buttonName • buttonName - Unused; The button is deleted in the generated TP4 project. Title Button: The popups in a Sub-Feature element may contain one or more Title buttons, whose text will be replaced with the name given to the SubFeature element in the generated TP4 project. [title]buttonName • buttonName - The button name that will be used in the generated TP4 project. TPDesign4 Touch Panel Design Program 185 Appendix B: G4 Panel Builder 186 TPDesign4 Touch Panel Design Program Appendix C: TakeNote Appendix C: TakeNote Introduction AMX Modero Touch Panels, TPI/4 Touch Panel Interfaces, and TPDesign4 software now come Computer Control ready. In combination with the NXA-USBTN (FG070-603) USB stick, this innovative application allows you to connect any computer to the NetLinx control network. For more information, refer to the on-line literature at www.amx.com. FIG. 47 NXA-USBTN - TakeNote USB Computer Control Stick This 32MB USB Control Stick contains everything you need to implement both Computer Control and TakeNote functionality including: The amxCC server application The configCC configuration utility NetLinx cc-GuestPC code module The TakeNote on-screen annotation application USB Stick Specifications NXA-USBTN Specifications Dimensions (HWD): • 0.32" x 0.87" x 2.87" (8.0 mm x 22.0 mm x 73.0 mm) Supported OS and • Windows XP and Windows 2000 operating systems System Requirements: • 1 GHz (or higher) Pentium® processor • USB port • 256 MB of RAM • Note: Other configurations may experience some performance impact while remote clients are connected. Included Applications • TakeNote • Computer Control (G4CC) Features: Port compatibility • USB 1.1 and USB 2.0 LED • Blue LED indicates the drive connection status Operating /Storage Environments: • Operating Temperature: 0° C (32° F) to 40° C (104° F) • Operating Humidity: 20% - 85% RH • Storage Temperature: -20° C (-4° F) to 60° C (140° F) • Storage Humidity: 5% - 85% RH Included Accessories • Lanyard (neck strap) • USB extension cable • Quick Start Guide (93-070-603) TPDesign4 Touch Panel Design Program 187 Appendix C: TakeNote Pre-Configuration Procedures The TakeNote application represents an additional interactive layer placed above an active G4 Computer Control (G4CC) button on your panel. If you are not using a direct RGB connection (such as on a TPI/4), G4CC must be running in order for TakeNote to function. TakeNote should be considered to be a counterpart application to G4CC. Before attempting to use these applications, it is necessary to follow a series of pre-configuration procedures: Transfer the most current product firmware to your Touch Panels and NetLinx Masters. Visit www.amx.com for the latest firmware files. Develop and upload a TPD4 panel project with at least some basic TakeNote function buttons. Modify the Master Source Code using NetLinx Studio v 2.2 or higher. Launch the configCC.exe file to configure the G4CC application. Launch the amxCC.exe file and begin communication to the target PC. Launch the TakeNote.exe file to allow annotations on the panel (utilizing a layer above the G4CC button). The information in this section regarding Computer Control is also covered in the Appendix A: G4 Computer Control section on page 169. Since it is required in order to use TakeNote, it is intentionally repeated in this section to avoid having to flip back and forth through the document. Updating AMX Hardware and Software 1. Connect the PC to an Ethernet Network that can communicate with the NetLinx Control System. 2. Update all AMX hardware (G4 compatible devices and NetLinx Masters) with the latest firmware files. 3. Use the WebUpdate feature integrated in the TPDesign4 and NetLinx Studio software to update the applications if necessary. Alternatively, you could navigate to www.amx.com and download the latest versions of the programs. Developing a TPD4 project with G4CC and TakeNote Support 1. Launch TPDesign4 and open an existing project, or create a new one. Refer to the online help for instructions on using TPDesign4. If you already have a TPD4 project that utilizes G4CC, then open the Computer Control page in that project and skip to step 5. 2. Draw a button that covers most or all of the panel page. 3. In the General tab of the Button Properties window, set the button’s Type to Computer Control. 4. Enter the IP Address of the target PC in the Remote Host field. To determine the IP Address of your PC: a. Click Start > Run to open the Run dialog. 188 TPDesign4 Touch Panel Design Program Appendix C: TakeNote b. Enter cmd into the Open field and click OK to open the command DOS prompt. c. From the C:\> command line, enter ipconfig to display the IP Address of the PC. This information is then entered into the Remote Host field. 5. Toggle the Scale To Fit and TakeNote Enabled fields to yes. 6. In the Programming tab of the Button Properties window, verify that the Address Port field = 1. 7. Double-click within the Address Code field and enter a value specific to the G4CC functionality within this TPD4 project (example: 123). 8. Create TakeNote functionality buttons (such as Toggle/Annotation, Clear Screen, Undo, and Color) as needed: a. Draw a General-type button on top of the new Computer Control button. b. In the States tab of the Button Properties window, change the fill in color and label the button Annotation. When complete, navigate to the Programming tab. c. In the Channel Port field, select 0-setup port. d. In the Channel Code field, select Advanced Codes > TakeNote > Toggle/Activate Annotation. Repeat these steps to add more TakeNote function buttons to the project as needed. 9. Select Transfer > Connect > New to connect the PC to the Master that is communicating to the target panel. a. Enter a Name for the connection and specify the IP Address of the Master in the Connection Settings dialog. Click OK to create the new connection type and return to the Connect dialog. b. Click Connect to establish the connection to the Master. 10. Select Transfer > Send to Panel to locate your specific panel. 11. Determine your transfer options and click Send to begin the upload process to the target panel. If the configCC application has not yet been used to configure G4CC, the panel displays a message stating it cannot connect to the target PC. Once configCC has been run and G4CC is configured, this message will disappear and the target PC image will be reflected on the panel. Modifying the Source Code on your Master Before you can use either the Computer Control or TakeNote applications, you must first modify the NetLinx Master Source Code to support the new (G4CC) functionality: 1. Insert the NXA-USBTN stick into a USB port on the PC that is being controlled. Confirm that a new USB detection icon appears in the windows taskbar. 2. Launch NetLinx Studio, select File > Open, navigate to the assigned USB stick drive and open the cc-GuestPC Test.axs file. This file acts as a source for the various communication parameters needed by the Master to allow the initial communication between the panel and the PC. 3. Scroll through the code in the cc-GuestPC TEST.axs file, and add the following information into your Master Source Code: TPDesign4 Touch Panel Design Program 189 Appendix C: TakeNote Add a Telnet device connection to your device definitions by copying the following information from the DEFINE_DEVICE section (of the cc-GuestPC TEST.axs file) and pasting it into your source code: vdvGuestPC = 0:5:0 Add the entire Module Definition: DEFINE_MODULE 'cc-GuestPCMod' < mdlGuestPC > (< vdvGuestPC >) where: < mdlGuestPC > = local name for this instance of the cc-GuestPC module. < vdvGuestPC > = device for cc-GuestPC to use for internal data events; this should be a DEFINE_DEVICE for the events to work properly. 4. Save and close the cc-GuestPC Test.axs file. 5. Right-click the Module folder (in the Workspace containing your current Project), and select Add Existing Module File. 6. Navigate to the Module folder on the USB stick, and select *.tko from the Files of type field. 7. Select the cc-GuestPC.tko file and click Open > OK. This file needs to be added to your Workspace and compiled with the source code. 8. Save your Workspace, and press F7 to begin compiling your Master Source Code and Module file. This process creates the.tkn file that will be transferred to the Master. 9. Note: Verify that your Master is online and communicating. Also verify that your source code is designated as the Master source code file. 10. Select Tools > File Transfer to open the File Transfer dialog. Click the Add button to open the Select Files for File Transfer dialog, open to the Current Workspace tab. 11. Locate the compiled *.tkn file and select it for transfer. Click OK to return to the File Transfer dialog. 12. Click Send to transfer the selected tkn file to the target Master. Configuring Computer Control configCC.exe (included on the USB stick) is the Configuration Utility for G4CC. Use this application to designate up to four Modero or TPI/4 panels that will be allowed to control this computer. 1. Use the computer’s file browser to navigate to the assigned USB stick drive location and open the Computer Control > Config folder. 2. Use the configCC.exe application (on the USB stick) to configure the G4CC application. 3. Double-click the configCC.exe to run the configuration utility. The following information is needed by the Computer Control Configuration Utility for each G4 panel or TPI/4 interface: 190 TPDesign4 Touch Panel Design Program Appendix C: TakeNote NetLinx Master IP Address/DNS (Fixed IP/URL):____.____.____.____ (Acquire the IP Address of the Master via NetLinx Studio: select Diagnostics > Network Addresses > Get IP Information). G4 Touch Panel Device ID: _______ (Acquire the panel device number in the online tree of NetLinx Studio). G4 Touch Panel System: _______ (Acquire the system number in the online tree of NetLinx Studio). Computer Control Button Address Port: _______ (Acquire this number via TPD4, in the Programming Tab of the Button Properties window). Computer Control Button Address Code (Channel): _______ (Acquire this number via TPD4, in the Programming Tab of the Button Properties window). This information was previously entered into the Address Code field for the Computer Control button. 4. Press the OK button when finished adding a single panel. This action modifies the amxCC.cfg file and stores your settings until the values within the configCC.exe file are altered. Once the USB Control Stick has been configured, it can be used on any computer residing on the Ethernet Network that can communicate with the NetLinx Control System. 5. Add multiple panels using the next button on the configuration utility screen (maximum of four panels). Running the Computer Control Application 1. Once the configuration file has been created, double-click the amxCC.exe file, located in the Computer Control folder, to begin your G4CC session and display the G4CC icon in the taskbar. The icon turns green when a Modero or TPI/4 panel is connected to the computer. 2. Upon opening this file, your PC will be displayed on the touch panel. 3. To terminate your Computer Control session, right-click on the G4CC icon and select Close Computer Control from the menu. Running the TakeNote Application If you are not using a direct RGB connection (such as on a TPI/4), G4CC must be running in order for TakeNote to function. Use the following steps to setup and implement TakeNote: 1. Use the computer’s file browser to navigate to the USB stick drive and double-click the TakeNote executable to run the application. 2. The TakeNote icon appears in the taskbar. Double-click this icon to open the TakeNote Configuration page. Right-mouse click opens the TakeNote Context menu. Refer to the TakeNote Help file (F1) for more detailed information. TPDesign4 Touch Panel Design Program 191 Appendix C: TakeNote 192 TPDesign4 Touch Panel Design Program Index Index A Adding a Shortcut To an Application In the Tools Menu 165 Adding Buttons To Existing Toolbars 164 Adding Commands To Existing Menus 166 Adding or Removing Command Shortcuts from the Toolbars/ Menus 161 amxCC server application 169, 187 amxCC.exe 191 animated bitmap effects 153 animated text effects 154 Animation Wizard 147 Animation Wizard - Appearance 150 Animation Wizard - Assign Frames 149 Animation Wizard - Create Sequence 148 Animation Wizard - Finish 150 Animation Wizard - Select Type 148 Animation Wizard - Size & Position 149 Animations and Tweening 147 Apply To All 13 Associating an Icon With a New Command 166 Auto Stack 157 Auto Stack New Windows 159 B Backup copies 160 Battery Levels 25 Button Preview Context Menu 17 Button Preview Window 16 C Categories 161 cc-GuestPC Code Module 169 cc-GuestPC Test.axs 189 Change selection on undo 158 color transition effects 152 Commands 161 communication configuration 125 Computer Control (G4CC) 187 Computer Control Button Address Code (Channel) 191 Computer Control Button Address Port 191 configCC configuration utility 169, 187 configCC.exe 170, 190 Configuring the Touch Panel for Masterless TCP/IP Transfers 133 Configuring TPDesign4 for Masterless TCP/IP Transfers 132 Confirm 24 Connect dialog 125 Connecting to a NetLinx Master 126 Connecting to a NetLinx Master via Modem 126 Connecting to a NetLinx Master via Serial Port 126 Connecting to a NetLinx Master via TCP/IP 126 Converting TPD3 files to TPD4 27 Copy Button Image 164 Create backup copy 158 Created With Build Number 24 Creating a New Custom Menu 166 Creating a New Custom Toolbar 165 Creating a New Project 21 TPDesign4 Touch Panel Design Program Creating a Screen Saver 27 Creating Animated Bitmap Effects 153 Creating Animated Text Effects 154 Creating Color Transition Effects 152 Creation Date 24 Current Keys 163 Custom Colors 159 Customize dialog 161 Customize dialog - Commands tab 161 Customize dialog - Keyboard tab 162 Customize dialog - Menu tab 163 Customize dialog - Options tab 163 Customize dialog - Toolbars tab 161 Customize dialog - Tools tab 162 Customizing the Menus and Toolbars 161 D Dealer ID 22, 23 Deleting Custom Toolbars 165 Design View Windows 6, 7 Designer 22 Designer ID 23 direct connection 132 Dockable windows 17 Drag and Drop Support 10 E Edit Focus 10 Editing the Settings on an Existing Communication Configuration 125 Enable the redo system 158 Enable the undo system 158 Error and Warnings Report 28 Errors 28 Errors and Warnings Report dialog 28 Expand Workspace Navigator 157 F File Name 24 File Revision 23 Font 22 Font Size 22 Function Maps 10 G G4 Computer Control 169 G4 Level touch panels 1 G4 Touch Panel Device ID 191 G4 Touch Panel System 191 G4CC 188 Grid Color 159 Grid Size 159 Grid Style 159 Gutter Color 159 H Help Keyboard dialog 167 Hotkey Shortcuts 167 193 Index I Image Cache Size (MB) 158 Inactive Page Flip 26 in-betweening 150 Initial Zoom 158, 159 J Job Comments 22, 24 Job Name 21, 23 K Keyboard Map 167 L Large Icons 163 Last Save Date 24 Light Sensor 25 Locked 26 R M Magnifier Window 17 Masterless TCP/IP Transfers 132 Menu Bar 6 Modem 127, 130 Modero 1 Motion Sensor 25 Moving, Docking and Resizing Dockable Windows 18 N NetLinx cc-GuestPC code module 187 NetLinx Master 126 NetLinx Master IP Address/DNS 191 New Project Wizard 21 Next 14 Number of undo levels 158 NXA-USBTN 189 NXA-USBTN Specifications 187 NXP-TPI/4 1 O Opening pages/popup pages 9 P Panel File Transfers via Modem 130 Panel File Transfers via Serial Port 129 Panel File Transfers via TCP/IP 128 Panel files 21 Panel Setup Information 23 Panel Type 21 Panels 160 Password 24 Password Protection 26 Powering Up and Connecting the Panel 132 Power-up page 26 Preferences Dialog 157 Preferences Dialog - Application tab 157 Preferences Dialog - Directories tab 160 Press New Shortcut Key 163 194 Prev 14 Prev and Next buttons 14 Print Preview Window 19 Program Preferences 157 Project Files 21 Project Information 23 Project Migration 29 Project Properties dialog 23 Prompt for system generated name 157 Properties Control Window 6, 11 Properties Control Window - General Tab 13 Properties Control Window - Programming Tab 13 Properties Control Window - States Tab 13 Protection 24 Purchase Order 22, 23 Read-only 26 Receive From Panel 125, 127 Reload last workspace 157 Removing Buttons From Existing Toolbars 164 Removing Commands From Existing Menus 167 Renaming Custom Toolbars 165 Renaming Pages 10 Resolution 21 Retain selected tool 158 Revision 22 Revision Date 24 S Sales Order 22, 23 Saving and Recalling Communication Configurations 125 screen-saver 27 Select Context Menu 163 Send To Panel 125, 127 Sensors tab 23 Serial 126, 129 Set Accelerator For 162 Setting a Power Up Page 26 Setting an Inactive Page Flip 26 Setting Custom Hotkeys 167 Setting Project Properties 23 Setting Up G4CC 169 Show Menus For (default menu) 163 Show ScreenTips on Toolbars 163 Show Shortcut Keys in Screen Tips 163 Size 159 Snap Tolerance 159 Start Group 164 State Manager Context Menu 15 State Manager Drag-and-Drop Menu 15 State Manager Window 6, 14 Status Bar 6, 18 Status Bar - default position 18 Status Bar - secondary position 19 Style 159 Supported Operating Systems 1 Supported Panel Types 2 Supported Screen Resolutions 3 System Generated File Names 29 System Requirements for G4CC 169 TPDesign4 Touch Panel Design Program T TakeNote 187 TakeNote on-screen annotation application 187 TCP/IP 126, 128 Title Bar 6 Toggling the Windows 18 Toolbars 7 Touch Panel Pages 2 TPD Conversion Wizard 27 TPDesign3 1, 27 TPDesign4 Work Area 5 Transfer Status Context Menu 16 Transfer Status Window 16, 135 Transferring Files Using a Virtual NetLinx Master TCP/IP Connection 133 Transferring Touch Panel Files to/from a NetLinx Master 127 Transparency 159 Transparency checkerboard 159 True Type Font Support 4 TTF 4 Tweeners 154 Tweeners sub-menu 154 Tweening 150 U Use "Copy of" prefixes 158 Use System Generated File Name 22 Use System Generated File Names for This Project 24 Using the Animation Wizard 147 Using the Apply To All option 13 Using the Selection Tool 8 Using the TPD Conversion Wizard 27 V Virtual NetLinx Master 132 Visual Style 168 Visual Style Options 168 W Warnings 28 WebUpdate 188 Working With Communications Configurations 125 Working With Dockable Windows 17 Workspace Context Menu 20 Workspace Navigator 6 Workspace Navigator - Function Maps Tab 10 Workspace Navigator - Pages Tab 9 Workspace Navigator Context Menu 11 Workspace Navigator Window 8 Program Preferences TPDesign4 Touch Panel Design Program 197 033-004-2651 8/05 ©2005 AMX Corporation. All rights reserved. AMX, the AMX logo, the building icon, the home icon, and the light bulb icon are all trademarks of AMX Corporation. *In Canada doing business as Panja Inc. AMX reserves the right to alter specifications without notice at any time. ARGENTINA • AUSTRALIA • BELGIUM • BRAZIL • CANADA • CHINA • ENGLAND • FRANCE • GERMANY • GREECE • HONG KONG • INDIA • INDONESIA • ITALY • JAPAN LEBANON • MALAYSIA • MEXICO • NETHERLANDS • NEW ZEALAND • PHILIPPINES • PORTUGAL • RUSSIA • SINGAPORE • SPAIN • SWITZERLAND • THAILAND • TURKEY • USA ATLANTA • BOSTON • CHICAGO • CLEVELAND • DALLAS • DENVER • INDIANAPOLIS • LOS ANGELES • MINNEAPOLIS • PHILADELPHIA • PHOENIX • PORTLAND • SPOKANE • TAMPA 3000 RESEARCH DRIVE, RICHARDSON, TX 75082 USA • 800.222.0193 • 469.624.8000 • 469-624-7153 fax • 800.932.6993 technical support • www.amx.com
advertisement
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Related manuals
advertisement