AMX TPDESIGN4 V2.5 Instruction Manual
  1. Manuals
  2. Brands
  3. AMX Manuals
  4. Software
  5. TPDESIGN4 V2.5
  6. Instruction manual
AMX TPDESIGN4 V2.5 Instruction Manual

AMX TPDESIGN4 V2.5 Instruction Manual

Touch panel design program
Hide thumbs
Table of Contents

Advertisement

Quick Links

instruction manual
TPDesign4
Touch Panel Design Program
(v2.5 or higher)
So f twa re

Advertisement

Table of Contents
loading

Related Manuals for AMX TPDESIGN4 V2.5

Summary of Contents for AMX TPDESIGN4 V2.5

  • Page 1 instruction manual TPDesign4 Touch Panel Design Program (v2.5 or higher) So f twa re...
  • Page 2 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.

  • Page 3: Table Of Contents

    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..............
  • Page 4 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....................
  • Page 5 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............
  • Page 6 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) ....................
  • Page 7 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............
  • Page 8 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 ............
  • Page 9 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 ............
  • Page 10 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 .......................
  • Page 11 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 .....................
  • Page 12 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................

  • Page 13: 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).

  • Page 14: Touch Panel Pages - 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.

  • Page 15: Video Capabilities For Modero Panels

    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 •...

  • Page 16: True Type Font Support

    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.

  • Page 17: G4 Panelpreview

    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...
  • Page 18 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).

  • Page 19: Toolbars

    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). Double- click 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.

  • Page 20: Workspace Navigator Window

    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.

  • Page 21: Workspace Navigator - Pages Tab

    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.

  • Page 22: Renaming Pages Via The Workspace Navigator

    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.

  • Page 23: Workspace Navigator Context Menu

    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.
  • Page 24 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...

  • Page 25: Properties Control Window - General Tab

    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.

  • Page 26: Using The Prev And Next Buttons

    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.

  • Page 27: State Manager Context Menu

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

  • Page 28: Transfer Status Window

    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.

  • Page 29: Button Preview Context Menu

    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 pre- view image (25%, 50%, 75%, 100%, or Auto).

  • Page 30: Moving, Docking And Resizing Dockable Windows

    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.

  • Page 31: Print Preview Window

    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. Double- click anywhere on the status bar to view this secondary position. FIG.

  • Page 32: Workspace Context Menu

    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: •...

  • Page 33: Tpdesign4 Project Files

    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.
  • Page 34 TPDesign4 Project Files • Use System Generated Click this checkbox to use a System Generated File Name for this File Name: 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.

  • Page 35: Setting Project Properties

    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.

  • Page 36: Project Properties Dialog - Panel Setup Information Tab

    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. •...

  • Page 37: Project Properties Dialog - Sensors Tab

    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.

  • Page 38: Applying Password Protection To Your Project File

    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.

  • Page 39: Creating A Screen Saver

    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.

  • Page 40: Notes On Converting Tpd3 Files To Tpd4

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

  • Page 41: Project Migration (From Previous Versions Of Tpdesign4)

    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.

  • Page 42: Inappropriate File Name Characters

    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 •...

  • Page 43: Using Quick Input

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

  • Page 44: Using The Workspace Navigator

    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 •...

  • Page 45: Opening Pages/Popup Pages Via The Workspace Navigator

    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.

  • Page 46: Cutting, Copying And Pasting

    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.

  • Page 47: Cutting Objects

    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.

  • Page 48: Saving The Active Project As A Different Panel Type

    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.

  • Page 49: Copying/Pasting Across Projects

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

  • Page 50: Property Painter Dialog

    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.

  • Page 51: Working With The System Page Template

    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.

  • Page 52: Copying/Pasting Entire System Pages Into A Project

    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.

  • Page 53: Working With System Page Keyboards And Keypads

    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.

  • Page 54: System Page Template Reference

    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.
  • Page 55 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 text- area buttons.
  • Page 56 TPDesign4 Project Files TPDesign4 Touch Panel Design Program...

  • Page 57: Working With The Resource Manager

    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.

  • Page 58: Resource Manager Dialog - Images Tab

    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.

  • Page 59: Resource Manager Dialog - Sounds Tab

    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: •...

  • Page 60: Editing Image And Sound Files Using External Programs

    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.

  • Page 61: Adding An External Editing Program For Image Files

    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.

  • Page 62: Working With Images

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

  • Page 63: Assigning Images To Slot Positions

    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"...

  • Page 64: Working With Dynamic Images

    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.

  • Page 65: 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.

  • Page 66: Motion Jpeg Cameras And Servers That Provide Motion Jpeg Streaming Output

    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.

  • Page 67: Network Path Information

    • 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.
  • Page 68 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:...

  • Page 69: Bitmaps Vs. Icons

    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.

  • Page 70: Working With Slot Assignments

    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.

  • Page 71: State Draw Order (Z-Order)

    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 Z- order is like the bottom layer in a multi-layer drawing.

  • Page 72: Assigning Sound Files To Slot Positions

    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.

  • Page 73: Working With Video Fills

    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).
  • Page 74 Working With the Resource Manager TPDesign4 Touch Panel Design Program...

  • Page 75: Working With Pages And Popup Pages

    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.

  • Page 76: Setting Page Properties

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

  • Page 77: Adding A Fill Color To A Page

    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.

  • Page 78: Adding Text To A Page

    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.

  • Page 79: Adding An Icon To A Page

    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)”...

  • Page 80: Displaying A Video Source On A Page

    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.

  • Page 81: Page Flip Actions

    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 82: Copying States From A Page

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

  • Page 83: Working With Popup Pages

    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.

  • Page 84: Adding A New Popup Page

    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.

  • Page 85: Using The Popup Draw Tool

    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.

  • Page 86: Drawing Assist Support For Popup Pages Displayed On Pages

    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.

  • Page 87: Setting Popup Page Properties

    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.
  • Page 88 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"...

  • Page 89: Setting Popup Page State Properties

    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.

  • Page 90: Border Styles

    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.

  • Page 91: Adding An Icon To A Popup Page

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

  • Page 92: Displaying A Video Source On A Popup Page

    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.

  • Page 93: Replacing States Through Drag-And-Drop

    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.

  • Page 94: Copying Popup Pages

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

  • Page 95: Deleting Popup Pages From A Project

    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.
  • Page 96 Working With Pages and Popup Pages TPDesign4 Touch Panel Design Program...

  • Page 97: Working With Buttons

    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"...

  • Page 98: Setting New Button Parameters

    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.

  • Page 99: Editing Button Properties

    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.

  • Page 100: Creating New Buttons

    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.

  • Page 101: Generated Button Names

    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.

  • Page 102: Using The Drawing Assist Features

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

  • Page 103: Alignment & Sizing Tool

    Working With Buttons Drawing Assist Tool Toolbar (Cont.) Horizontal Spacing (Equal, Use these commands to control the horizontal spac- Increase, Decrease, Remove) ing 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...

  • Page 104: Sizing

    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.

  • Page 105: Setting General Button Properties

    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.
  • Page 106 Working With Buttons General Button Properties (Cont.) Parameter Description • Left/Top: Position values. The Left and Top rows indicate the position of the selected but- ton, 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.
  • Page 107 Working With Buttons General Button Properties (Cont.) Parameter Description • Slider Name Select from a list of Slider Types. (Bargraph buttons only): • Slider Color Click the browse button to open the Colors dialog. Select a color to apply to the (Bargraph buttons only): slider and click OK (or Cancel to exit without saving).

  • Page 108: Level Control Parameters

    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.

  • Page 109: Input Mask Ranges (Text Area Button Only)

    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...
  • Page 110 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. •...

  • Page 111: Level Functions

    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 bar- graph 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).
  • Page 112 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.
  • Page 113 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).

  • Page 114: All States Option

    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.

  • Page 115: Adding Text To A Button

    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.

  • Page 116: Adding A Bitmap To A Button

    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.

  • Page 117: Changing The Button Fill Color

    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.

  • Page 118: Displaying A Video Source On A Button

    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.

  • Page 119: Creating A Custom Slider (Multi-Bargraph Buttons)

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

  • Page 120: Using Touch Maps For Multi-State Bargraphs Buttons

    Working With Buttons 8. Right-click on either of the selected states and select Slot Position from the Tweeners sub- menu. 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.

  • Page 121: Working With State Properties

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

  • Page 122: Adding States To A Button

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

  • Page 123: Adding States Through Drag-And-Drop

    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.

  • Page 124: Cutting States To The Clipboard

    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.

  • Page 125: Choose Display State Dialog

    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.

  • Page 126: Setting Global General Properties For External Pushbuttons And/Or Leds

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

  • Page 127: Setting Page-Specific General Properties For External Pushbuttons And/Or Leds

    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 –...

  • Page 128: Copying/Pasting Buttons

    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.

  • Page 129: Searching And Replacing Button Properties

    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.

  • Page 130: Using Quick Input

    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.

  • Page 131: Working With Function Codes

    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.

  • Page 132: Show/Hide Function Codes

    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.

  • Page 133: The Power Assign Dialog

    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 •...

  • Page 134: Using Power Assign: 2) Assign Codes

    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...
  • Page 135 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.
  • Page 136 Working With Buttons TPDesign4 Touch Panel Design Program...

  • Page 137: File Transfer Operations

    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.

  • Page 138: Connecting To A Netlinx Master

    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.

  • Page 139: Secure Netlinx Connections

    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.

  • Page 140: Panel File Transfers Via Tcp/Ip

    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.

  • Page 141: Panel File Transfers Via Serial Port

    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.

  • Page 142: Panel File Transfers Via Modem

    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.
  • Page 143 File Transfer Operations The suggested settings are: • Baud Rate 38400 • Data Bits • Parity none • Stop Bits • Flow Control none • Phone Number Enter the telephone number of the target Master. These settings must match those of the Modem. d.

  • Page 144: Virtual Netlinx Master Tcp/Ip Transfers

    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.

  • Page 145: Configuring The Touch Panel For Virtual Netlinx Master Tcp/Ip Transfers

    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.

  • Page 146: Virtual Netlinx Master Usb Transfers

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

  • Page 147: Transferring Files Using A Virtual Netlinx Master Usb Connection

    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.
  • Page 148 File Transfer Operations TPDesign4 Touch Panel Design Program...

  • Page 149: Working With Palettes And Colors

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

  • Page 150: Working With Transparent Backgrounds

    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.

  • Page 151: Working With Multiple Color Palettes

    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.

  • Page 152: Creating Custom Palettes

    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.

  • Page 153: Exporting Palette Files

    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.

  • Page 154: Using Custom Palettes To Enable Color Schemes In G4 Panelbuilder

    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.

  • Page 155: Chameleon Images

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

  • Page 156: Working With Chameleon Images

    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.
  • Page 157 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.

  • Page 158: Chameleon Images, Custom Palettes And G4 Panelbuilder

    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.

  • Page 159: Animations And Tweening

    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.

  • Page 160: Animation Wizard - Select Type (Step 1 Of 6)

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

  • Page 161: Animation Wizard - Size & Position (Step 3 Of 6)

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

  • Page 162: Animation Wizard - Appearance (Step 5 Of 6)

    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").
  • Page 163 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.

  • Page 164: Creating Color Transition Effects

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

  • Page 165: Creating Animated Bitmap Effects

    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.

  • Page 166: Creating Animated Text Effects

    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.
  • Page 167 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.
  • Page 168 Animations and Tweening TPDesign4 Touch Panel Design Program...

  • Page 169: Program Preferences

    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.
  • Page 170 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 select- ing 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...

  • Page 171: Preferences Dialog - Appearance Tab

    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: •...

  • Page 172: Preferences Dialog - Directories Tab

    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: •...

  • Page 173: Customizing The Menus And Toolbars

    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.

  • Page 174: Customize Dialog - Tools Tab

    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.

  • Page 175: Customize Dialog - Menu Tab

    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.

  • Page 176: Command Context Menu

    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: •...

  • Page 177: Creating A New Custom Toolbar

    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.

  • Page 178: Creating A New Custom Menu

    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.

  • Page 179: Removing Commands From Existing Menus

    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.

  • Page 180: Visual Style Options

    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.

  • Page 181: Appendix A: G4 Computer Control

    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.

  • Page 182: 2: Source Code

    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: - local name for this instance of the cc-GuestPC module <...

  • Page 183: Setting Programming Properties: Computer Control Buttons

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

  • Page 184: Running The G4Cc Application

    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. •...

  • Page 185: Appendix B: G4 Panel Builder

    (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.

  • Page 186: Importing G4 Panelbuilder Templates

    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.

  • Page 187: Template Requirements

    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.

  • Page 188: Rules For Navigating A Template

    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.

  • Page 189: Template Wide Conventions

    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...
  • Page 190 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.

  • Page 191: Creating Placeholder Elements

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

  • Page 192: Placeholder Element Conventions

    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.

  • Page 193: Creating Preview Images

    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.

  • Page 194: Element Specific Conventions

    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.

  • Page 195: Sub-Navigation Element Conventions

    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 Naviga- tion in the generated TP4 project. [title]buttonName • buttonName - The button name that will be used in the generated TP4 project.

  • Page 196: Device Element Conventions

    Appendix B: G4 Panel Builder Title Buttons: The popups in a Splash element may contain one or more Title but- tons, whose text will be replaced with the name given to the Splash element in the generated TP4 project. [title]buttonName •...

  • Page 197: Sub-Feature Element Conventions

    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.
  • Page 198 Appendix B: G4 Panel Builder TPDesign4 Touch Panel Design Program...

  • Page 199: 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.

  • Page 200: Pre-Configuration Procedures

    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.

  • Page 201: Modifying The Source Code On Your Master

    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.

  • Page 202: Configuring Computer Control

    Appendix C: TakeNote Add a Telnet device connection to your device definitions by copying the following information from the section (of the cc-GuestPC TEST.axs file) and DEFINE_DEVICE pasting it into your source code: vdvGuestPC = 0:5:0 Add the entire Module Definition: DEFINE_MODULE 'cc-GuestPCMod' <...

  • Page 203: Running The Computer Control Application

    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).
  • Page 204 Appendix C: TakeNote TPDesign4 Touch Panel Design Program...
  • Page 205 Index Index Creating a Screen Saver 27 Creating Animated Bitmap Effects 153 Adding a Shortcut To an Application In the Tools Menu 165 Creating Animated Text Effects 154 Adding Buttons To Existing Toolbars 164 Creating Color Transition Effects 152 Adding Commands To Existing Menus 166 Creation Date 24 Adding or Removing Command Shortcuts from the Toolbars/ Current Keys 163...
  • Page 206 Index Prev 14 Prev and Next buttons 14 Image Cache Size (MB) 158 Print Preview Window 19 Inactive Page Flip 26 Program Preferences 157 in-betweening 150 Project Files 21 Initial Zoom 158, 159 Project Information 23 Project Migration 29 Project Properties dialog 23 Job Comments 22, 24 Prompt for system generated name 157 Job Name 21, 23...
  • Page 207 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 Con- nection 133 Transferring Touch Panel Files to/from a NetLinx Master 127...
  • Page 209 Program Preferences TPDesign4 Touch Panel Design Program...
  • Page 210 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...

Table of Contents