Technical information

ManualsBrandsAMX ManualsComputer equipmentNXD-CV12

Operation/Reference Guide

Development Tools

TPDesign4

Touch Panel Design/Programming Software

(v3.2 or higher)

Last Revised: 1/09/2012

Summary of content (430 pages)

PAGE 1
Operation/Reference Guide TPDesign4 Touch Panel Design/Programming Software (v3.
PAGE 2
AMX Software License and Warranty Agreement • LICENSE GRANT. AMX grants to Licensee the non-exclusive right to use the AMX Software in the manner described in this License. The AMX Software is licensed, not sold. This license does not grant Licensee the right to create derivative works of the AMX Software. The AMX Software consists of generally available programming and development software, product documentation, sample applications, tools and utilities, and miscellaneous technical information.
PAGE 3
Table of Contents Table of Contents TPDesign4 - G4 Touch Panel Design ..................................................................1 Overview .................................................................................................................. 1 What's New in Version 3.2........................................................................................ 1 New Panel Devices: Modero X Series Touch Panels........................................................ 1 Other New Panels ........
PAGE 4
Table of Contents Transfer Menu ................................................................................................................. 7 View Menu ...................................................................................................................... 8 Tools Menu...................................................................................................................... 9 Window Menu .........................................................................................
PAGE 5
Table of Contents Transfer Status Window.......................................................................................... 32 Transfer Status Context Menu ...................................................................................... 32 Button Preview Window ......................................................................................... 32 Print Preview Window ............................................................................................ 33 Working With Project (*.
PAGE 6
Table of Contents Resource Manager ............................................................................................61 Overview ................................................................................................................ 61 Resource Manager dialog ....................................................................................... 61 Resource Manager Toolbar ...........................................................................................
PAGE 7
Table of Contents Icons ....................................................................................................................... 83 Assigning Images to Slot Positions................................................................................ 83 Assigning Dynamic Images to Slot Positions ................................................................. 83 Moving Slot Assignments..............................................................................................
PAGE 8
Table of Contents Pasting Pages .............................................................................................................. 103 Renaming a Page .................................................................................................. 104 Deleting a Page From the Project......................................................................... 104 Exporting Pages as Image Files ............................................................................ 105 Printing Pages........
PAGE 9
Table of Contents Sub-Pages .......................................................................................................119 Overview .............................................................................................................. 119 More Information.................................................................................................. 120 Working With Buttons ....................................................................................121 Overview ..............
PAGE 10
Table of Contents Date and Time Buttons ......................................................................................... 139 Creating a Date Button ............................................................................................... 139 Creating a Time Button ............................................................................................... 140 General Buttons ....................................................................................................
PAGE 11
Table of Contents Setting Global Properties for External Controls ................................................... 162 Setting Global General Properties: External Pushbuttons .......................................... 162 Setting Global Programming Properties: External Pushbuttons ................................. 163 Setting Global Properties for External LEDs ............................................................... 163 Setting Global General Properties: External LEDs ...........................
PAGE 12
Table of Contents Sub-Page View Buttons......................................................................................... 183 Sub-Page View Buttons - Design View ........................................................................ 184 Creating Sub-Page View Buttons ................................................................................ 184 Assigning a Sub-Page Set to the Sub-Page View Button............................................. 186 Setting Sub-Page View Button Properties........
PAGE 13
Table of Contents Setting List Box Button Column Properties .......................................................... 209 Setting General Properties: List Box Button Columns................................................. 209 Setting Programming Properties: List Box Button Columns........................................ 209 Setting State Properties: List Box Button Columns ..................................................... 210 Subordinate Button Placement ..............................................
PAGE 14
Table of Contents Attaching a Dynamic List Data Table to a List Box Button .......................................... 227 Example: Creating a Static List Box for a MIO-R4................................................. 227 Step 1 - Select the List Box Draw Tool ........................................................................ 227 Step 2 - Draw a List Box ..............................................................................................
PAGE 15
Table of Contents List Table Port .........................................................................................................................244 List Table Address ...................................................................................................................244 List Table Wrap .......................................................................................................................244 List Filter Column ........................................................
PAGE 16
Table of Contents Feedback ................................................................................................................................ 255 Level Aux ................................................................................................................................ 255 Level Code .............................................................................................................................. 255 Level Control Repeat Time ........................................
PAGE 17
Table of Contents Channel Codes...................................................................................................... 271 Navigation Buttons - Channel Code values ................................................................. 271 NXP-PLV Reserved Channel Codes (1-7) ..................................................................... 272 MIO R-4 Channel Codes .............................................................................................. 272 Basic Channel Codes ..........
PAGE 18
Table of Contents State Properties.................................................................................................... 285 Bitmap .................................................................................................................................... 285 Bitmap Justification ................................................................................................................ 285 Bitmap X Offset ..........................................................................
PAGE 19
Table of Contents Removing States From A Button .......................................................................... 297 Deleting States............................................................................................................ 297 Cutting States To the Clipboard ................................................................................. 297 Reordering States On A Button ............................................................................
PAGE 20
Table of Contents Animation Effects ...........................................................................................315 Overview .............................................................................................................. 315 Animation Wizard ................................................................................................. 315 Tweening ..............................................................................................................
PAGE 21
Table of Contents keypadTele: .............................................................................................................................340 Warning Message: ...................................................................................................................340 System Page Template Reference............................................................................... 340 Battery: ............................................................................................
PAGE 22
Table of Contents Preferences Dialog - Application tab ................................................................... 356 Startup ........................................................................................................................ 356 Miscellaneous .............................................................................................................. 357 Warning Messages ......................................................................................................
PAGE 23
Table of Contents 2: Source Code:........................................................................................................... 372 3: G4CC (Computer Control) Configuration: ............................................................... 373 Configuring G4 ComputerControl via configCC.exe............................................. 373 Running G4 ComputerControl .............................................................................. 374 Creating Computer Control Buttons...............
PAGE 24
Table of Contents Border Styles - Menu Rounded-Bottom....................................................................... 389 Border Styles - Menu Rounded-Left ............................................................................ 389 Border Styles - Menu Rounded-Right .......................................................................... 390 Border Styles - Menu Rounded-Top ............................................................................ 390 Border Styles - Menu Rounded Spacers ..
PAGE 25
TPDesign4 - G4 Touch Panel Design TPDesign4 - G4 Touch Panel Design Overview The TPDesign4 (or "TPD4") Touch Panel Design program is designed to assist you in creating a state-of-theart touch panel interface for AMX's G4 Level touch panels (including the Modero line, MIO-R4 remote controllers, and the NXP-TPI/4 Touch Panel Interface). Use TPD4 to create Project Files (*.TP4) containing all of the information required to define a user-interface to be utilized on a G4 touch panel.
PAGE 26
TPDesign4 - G4 Touch Panel Design Scrolling Regions Scrolling Regions represent a powerful new method of presenting functions on AMX Modero X Series Touch Panels. A Scrolling Region is a specific area on a touch panel page that contains a set of elements that scroll as a group. The illustration in FIG. 2 below shows a basic example of a touch panel page with two Scrolling Regions - one vertical and one horizontal.
PAGE 27
TPDesign4 - G4 Touch Panel Design Supported Windows Platforms and PC Requirements Supported Operating Systems Windows 7 Business (32/64-bit) You must have Power User (or Administrator) rights to install and run all required System files.
PAGE 28
TPDesign4 - G4 Touch Panel Design Supported Touch Panels (Cont.
PAGE 29
TPDesign4 - G4 Touch Panel Design Supported Screen Resolutions (Cont.
PAGE 30
TPDesign4 - G4 Touch Panel Design Screen Resolutions By Panel Type While many touch panels support a single screen resolution, several support multiple resolutions, selectable in the New Project Wizard - Step 1 dialog. The screen resolution setting for these panel devices can be changed later via the Screen Size option in the Save As Different Panel Type dialog. PD4 provides scrolling if a Design View is larger than the available visible work area.
PAGE 31
TPDesign4 - G4 Touch Panel Design Supported Screen Resolutions Per Panel Type (Cont.
PAGE 32
TPDesign4 - G4 Touch Panel Design Intercom Capabilities for Modero Panels Intercom-equipped Modero Panels support 2-way full-duplex intercom capabilities. These panels include: MVP-5200i MVP-8400i MVP-9000i NXD-1000vi NXD-700vi AMX Touch Panels that Support Dynamo Resource Images The following list indicates the AMX Touch Panels that support Dynamo Resource Images (at the time of this TPDesign4 release).
PAGE 33
TPDesign4 - G4 Touch Panel Design Use the set of options in the File menu to access the key functions of the G4 PanelBuilder application: Click File > New From G4 Panel Builder to create a new TP4 panel project using G4 PanelBuilder. Click File > Import Touch Panel Template to import an existing PanelBuilder (*.TPT) or Visual Architect template file (*.VAT) into TPD4 as a starting point for your panel design.
PAGE 34
TPDesign4 - G4 Touch Panel Design 10 TPDesign4 (v3.
PAGE 35
The TPDesign4 Work Area The TPDesign4 Work Area Overview The TPDesign4 work area consists of several main components (FIG. 1): Workspace Window Properties Window Design View Windows State Manager Window FIG. 1 TPDesign4 Work Area In its default configuration, from top to bottom, left to right, the main components are: TPDesign4 Work Area Components Title Bar Lists the name of the active Project file.
PAGE 36
The TPDesign4 Work Area TPDesign4 Work Area Components (Cont.) Design View Windows Each tabbed Design View window represents a Touch Panel page or popup page. Note that a MDI tab is displayed for each opened page. 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 37
The TPDesign4 Work Area File Menu (Cont.) Save Saves the active project. The first time you save the project, the Save As dialog is invoked, to allow you to specify the file name/target directory. By default, all project files are saved to AMX Control Disc\TPD4\Panels folder. The target directory that you set here becomes the default target directory for all subsequent project files. Save As Opens the Save As dialog to allow you to specify a new file name and target directory.
PAGE 38
The TPDesign4 Work Area Contains typical Edit menu options plus tool options, and access to the Preferences dialog: Edit Menu Selection Tool Activates the Selection tool. Use this tool to select objects in the Design View windows. Button Draw Tool Activates the Button Draw tool. Use this tool to create buttons within the Design View Windows. Popup Draw Tool Activates the Popup Draw tool. Use this tool draw Popup Pages directly onto a Page. See the Button Draw Tools section on page 122 for details.
PAGE 39
The TPDesign4 Work Area Apply To All This option allows you to set button properties to edit multiple buttons simultaneously. Click once to toggle it on, click it again to turn it off (default = off). The icon shown in the Edit menu indicates whether this option is active (depressed = active). This setting affects the Edit Previous and Edit Next buttons (see below). See the Using the Apply To All Option section on page 235 for details.
PAGE 40
The TPDesign4 Work Area Verify Function Maps Click to automatically verify that the Function Map for the active project is synchronized with the Project. Any problems that are identified in the Function Map are automatically fixed. Verify Page Flips Click to automatically check the active project for invalid page flips (i.e. a page flip that targets a page that doesn't exist).
PAGE 41
The TPDesign4 Work Area Make Unmanaged (Listbox) This option switches a Managed Listbox to an Unmanaged Listbox (available only if a Listbox button has been selected). See the List Box Buttons section on page 195 for details. Power Assign Opens the Power Assign dialog. Use the options in this dialog to automatically assign function codes. See the Using Power Assign section on page 304 for details.
PAGE 42
The TPDesign4 Work Area Contains options for establishing a connection to the NetLinx Master and panels, and for transferring TP4 files to the panels: Transfer Menu Connect Click to open the Connect dialog, where you can select an established connection to a NetLinx Master, or configure and save a new one. Disconnect From Master Click to terminate the current connection to the Master. Send To Panel Click to send a panel file to a target panel.
PAGE 43
The TPDesign4 Work Area Errors & Warnings Report Click to view the Errors and Warnings reports that result from the process of converting a TPDesign3 project to a TPD4 project via the TPD Conversion Wizard. These reports are displayed in the Error and Warnings Report dialog. MDI Page Tabs Click to show/hide the page tabs that indicate each page in the Project (displayed along the bottom edge of the design window).
PAGE 44
The TPDesign4 Work Area Contains options to access the on-line help program, the Readme.TXT file and the About TPD4 splash-screen as well as access to the Keyboard Map and the WebUpdate application: Help Menu Contents Launches the on-line help system. Keyboard Map Opens the Help Keyboard dialog, which displays the current hotkey assignments (keyboard accelerators) in the application (read-only). Web Update Launches the WebUpdate application.
PAGE 45
The TPDesign4 Work Area Select Layout > Vertical Spacing to open the Vertical Spacing Options sub-menu: Vertical Spacing Options sub-menu Equal Click to apply an equal amount of vertical space between all selected objects. Increase Click to increase the amount of vertical space between all selected objects. Decrease Click to decrease the amount of vertical space between all selected objects. Remove Click to remove all vertical space between selected objects.
PAGE 46
The TPDesign4 Work Area The Main toolbar contains shortcuts to many of the basic features of the program. FIG. 2 Main Toolbar Main Toolbar New File: Click to launch the New Project Wizard. See the Using the New Project Wizard section on page 35 for details. Open File: Click to open an existing TPD4 Project file. Save File: Click to save the active project file.
PAGE 47
The TPDesign4 Work Area Main Toolbar (Cont.) Show External Controls: Click to show external controls (pushbuttons/LEDs) in the Design View. This feature allows to select pushbuttons for editing purposes. See the External Controls (Buttons/LEDs) section on page 161 for details. Edit List Tables: Click to open the Edit List Tables dialog. Use the options in this dialog to define List Data Tables, to support List Box Buttons. See the List Data Tables section on page 215 for details.
PAGE 48
The TPDesign4 Work Area View Toolbar The View toolbar contains shortcuts to the view controls (also available via the View menu). FIG. 4 View Toolbar View Toolbar Toggle Workspace: Click to show/hide the Workspace window (page 25). Toggle Properties: Click to show/hide the Properties window (page 27). Toggle State Manager: Click to show/hide the State Manager window (page 30). Toggle Button Preview: Click to show/hide the Button Preview window (page 32).
PAGE 49
The TPDesign4 Work Area Selection/Drawing Tools Toolbar (Cont.) Snap To Grid: This feature automatically snaps objects in the Design View windows to the nearest grid lines (based on the Grid Size and Snap Tolerance settings in the Appearance tab of the Preferences dialog - see the Preferences Dialog Appearance tab section on page 357). • Pressing Ctrl + an arrow key combination will move the selected button onegrid section at a time, regardless of grid visibility or grid snap status.
PAGE 50
The TPDesign4 Work Area Zoom Toolbar (Cont.) Zoom In: With a page or popup page selected, click the Zoom In toolbar button to increase the display size of the selected object, in the increments listed in the Zoom Control drop-down. Zoom Control Drop-down: Click the down-arrow to open the Zoom control options list. Use this list to manually set the zoom to by incremental percentages (25%, 50%, 75%, 100%, 150%, 200% or 400%), or by Fit Page, Fit Width or Fit Height.
PAGE 51
The TPDesign4 Work Area Order Assist Toolbar The Order Assist Tool toolbar contains shortcuts to control options for controlling the layering order of existing buttons. FIG. 8 Order Assist Toolbar Order Assist Toolbar Send to Front: Click to bring the selected object(s) to the front (or top) layer, so that they appear to be in "front" of the other objects on the page.
PAGE 52
The TPDesign4 Work Area Position Assist Toolbar (Cont.) Decrease Horizontal Spacing: With three or more objects selected, use this option to decrease the amount of horizontal space between them. Use this option in conjunction with the Equal Horizontal Spacing option to quickly align and distribute objects horizontally on the page. Remove Horizontal Spacing: With three or more objects selected, use this option to remove all horizontal space between them.
PAGE 53
The TPDesign4 Work Area Size Assist Toolbar (Cont.) Increase Height For Border: This option incrementally increases the height of the selected object. Decrease Height This option incrementally decreases the height of the selected object. For Border: List Box Tools Toolbar The List Box Tools toolbar contains shortcuts to the Add Row/Column and Delete Row/Column tools, to assist with List Box Buttons. See the List Box Buttons section on page 195 for details. FIG.
PAGE 54
The TPDesign4 Work Area Since Design View windows represent the pages on the panel themselves, Design Views that represent pages are not resizable. Use the Zoom and Magnifier Window features to control the size of the view. Popup pages are resizable through the Properties Window by adjusting their Left, Top, Width or Height properties. Alternatively, you can set their size and dimensions manually by first enabling the Show Popup Page option in the Page menu.
PAGE 55
The TPDesign4 Work Area Design View Window context menu (Cont.) Delete Click to delete the selected object(s). Find Click to open the Find dialog. Use the options in this dialog to search for a set of properties and values in the current Page or across the entire Panel. See the Searching For Properties section on page 236 for details. Find and Replace Click to open the Find & Replace dialog.
PAGE 56
The TPDesign4 Work Area Design View Window context menu (Cont.) Zoom Click to access the Zoom sub-menu (which contains the same functionality as the Zoom toolbar): • Zoom Out/In: With a page or popup page selected, select Zoom Out or Zoom In to reduce or increase the display size of the selected object, in the increments listed in the Zoom sub-menu. • Fit Page/Width/Height: With a page or popup page selected, select Fit Page, Fit Width or Fit Height to adjust zoom setting.
PAGE 57
The TPDesign4 Work Area Zoom controls do not affect the actual size of the selected object, only the way it is represented in the workspace area. See the Zoom Toolbar section on page 15 for descriptions of all Zoom Control options. Additional Zoom options are available via the Window > Zoom submenu: Zoom SubMenu Controls Fit Width Automatically adjusts the zoom to accommodate the width of the selected object inside the Design View window.
PAGE 58
The TPDesign4 Work Area Gesture Control buttons allow you to specify button properties to Gestures, in a way that is similar to that of setting properties for other button types. See the Gesture Controls section on page 167 for more information. FIG. 17 shows that the MVP-9000i and the MXT-1900L-PAN indicate a row of Gesture Control buttons above the image of the panel: Gesture Control buttons MVP-9000i Gesture Control buttons MXT-1900L-PAN FIG.
PAGE 59
The TPDesign4 Work Area Workspace Window The Workspace Window is used to open the pages / popup pages in the file (establishing edit focus), and to view/edit the function codes associated with each page. The Workspace Window contains two tabs: Pages and Function Maps. Workspace Window- Pages Tab Click the Pages tab (at the bottom of the Workspace window) to view the pages/popup pages contained within each open Project, in the Workspace window.
PAGE 60
The TPDesign4 Work Area Edit focus is indicated by a small arrow at the lower-left corner of the icon for the selected panel, page or popup page ("Sub-Page A" in FIG. 18). Right-click anywhere within the Pages tab to access the Workspace Navigator context menu. There are several actions that you can do simply by selecting an item in the tree and choosing the appropriate command or toolbar button: Opening Pages/Popup Pages Via the Workspace Window (see Opening a Page on page 95).
PAGE 61
The TPDesign4 Work Area Properties Window The Properties Window 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 window (FIG. 20). FIG. 20 Properties Window - General, Programming and States tabs The Properties Window contains three tabs: General, Programming and States.
PAGE 62
The TPDesign4 Work Area Properties Window - General Tab Click the General tab (at the top of the Properties 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 (FIG. 21). FIG. 21 Properties Window - General Tab The General properties presented will depend on the type of element selected (i.e.
PAGE 63
The TPDesign4 Work Area To edit Programming properties, select an element either in the Workspace window or in a Design View window to populate the Programming tab with properties specific to the selection. Edit the property by selecting from a drop-down menu, or by entering a value in to the property field, depending on the property type. See the Programming Properties section on page 254 for descriptions of all Programming properties.
PAGE 64
The TPDesign4 Work Area State Manager Window The State Manager is typically located along the bottom edge of the screen (although it is a dockable window and you may move it anywhere you like) and is used to view/edit the various states of a selected button. 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. 24). FIG.
PAGE 65
The TPDesign4 Work Area State Manager Context Menu Size This option sets the size of the button thumbnail views as they appear in the State Manager window. Add States This option opens the Add States dialog, which allows you to add multiple states to the selected button (up to a total of 255 states). See the Add States section on page 294 for details. Insert States This option opens the Insert States dialog, which allows you to insert multiple states to the selected button.
PAGE 66
The TPDesign4 Work Area 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 (FIG. 25). FIG. 25 Transfer Status 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.
PAGE 67
The TPDesign4 Work Area 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). Alternatively, click on the button in the Button Preview window to "push" the button. The Button Preview menu is also available in the Button menu (as the Preview submenu).
PAGE 68
The TPDesign4 Work Area If you don't have a printer installed on your PC, the File > Print and File > Print Preview options will invoke a message alerting you to install a printer. 34 TPDesign4 (v3.
PAGE 69
The TPDesign4 Work Area TPDesign4 (v3.
PAGE 70
The TPDesign4 Work Area 36 TPDesign4 (v3.
PAGE 71
Working With Project (*.TP4) Files Working With Project (*.TP4) Files Overview TP4 Project (or Panel) files are created in the folder specified in the application preferences, unless you explicitly choose to save them in another location.
PAGE 72
Working With Project (*.TP4) Files Using the New Project Wizard 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 TPD4 projects. To launch the New Project Wizard, select File > New. To cancel the wizard at any point in the process, click Cancel.
PAGE 73
Working With Project (*.TP4) Files New Project Wizard - Step 1 dialog Options (Cont.) External Button Options MIO-R4 remotes support multiple external button options, to support transport and Teletext keypads.
PAGE 74
Working With Project (*.TP4) Files 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. Fill out this information and click Next to proceed.
PAGE 75
Working With Project (*.TP4) Files Setting Project Properties Select File > Project Properties to open the Project Properties dialog. This is a multi-tab dialog allowing you to view and edit the target touch panel’s properties.
PAGE 76
Working With Project (*.TP4) Files Project Properties dialog - Project Information tab Job Name This editable field displays the current Job Name associated with this project (included in the system-generated file name, if enabled). Designer ID This editable field displays the current Designer associated with this project (included in the system-generated file name, if enabled).
PAGE 77
Working With Project (*.TP4) Files Applying Password Protection to Your Project File TPD4 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.
PAGE 78
Working With Project (*.TP4) Files Project Properties dialog - Panel Setup Information tab Use the options in the Panel Setup Information tab of the Project Properties dialog (FIG. 33) to view/edit setup information associated with the active project/panel file. This dialog identifies the panel for which this project is designed, and indicates it's screen resolution. In the case of MIO R-4 remotes, the External Button Option selected is indicated as well. FIG.
PAGE 79
Working With Project (*.TP4) Files Project Properties dialog - Panel Setup Information tab (Cont.) Power Up/Inactivity Settings • 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 field indicates the Power-Up popup pages that will appear over the Power up page.
PAGE 80
Working With Project (*.TP4) Files FIG. 35 Add Power Up Popup dialog 3. Select a popup page that you want to be displayed over the Power-up page from this list and click OK. 4. The selected popup page is indicated in the Power up Popups field. To display multiple Popups over the Power up page, repeat steps 2 and 3 to select another popup. If you select more than one popup page, you can specify the display order via the up/down arrow buttons below the Power up Popups field.
PAGE 81
Working With Project (*.TP4) Files Project Properties dialog - Sensors tab Use the options in the Sensors tab of the Project Properties dialog (FIG. 37) to view/edit Channel/Level and Port settings for sensors associated with the active panel file: FIG. 37 Project Properties dialog - Sensors tab Project Properties dialog - Sensors tab Light Sensor Use these fields to specify the Level and Channel port/code assignments for the on-board light sensor.
PAGE 82
Working With Project (*.TP4) Files Project Properties dialog - IR Emitters and Receivers tab Use the options in the IR Emitters and Receivers tab of the Project Properties dialog (FIG. 38) to view/edit port information associated with the active panel file for AMX 38KHz & 455KHz IR emitting and receiving, and user-defined ports for IR emitting using custom IR files: FIG.
PAGE 83
Working With Project (*.TP4) Files Using the Selection Tool To activate the Selection tool, select Edit > Selection Tool, or click the toolbar button in the Selection/Button Draw Toolbar (FIG. 39). Selection Tool Edit Menu Selection / Drawing Tools toolbar FIG. 39 Selection Tool Use the Selection tool to pick/select objects in the Design View window(s). You can also select multiple buttons, using any of the following techniques: 1.
PAGE 84
Working With Project (*.TP4) Files 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. FIG. 40 shows that "Page 1" in the "TPD4" project has the edit focus: FIG.
PAGE 85
Working With Project (*.TP4) Files Cutting, Copying and Pasting There are several items that can be cut, copied or pasted in TPD4. The ability to utilize these features effectively can greatly increase your productivity. The Copy and Paste functions in TPD4 always work on the element (including buttons, bitmaps, even individual button properties displayed in the Properties window) which has the current Edit Focus.
PAGE 86
Working With Project (*.TP4) Files 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.
PAGE 87
Working With Project (*.TP4) Files Once a panel file is closed, it’s undo/redo stack is flushed and is no longer available.
PAGE 88
Working With Project (*.TP4) Files Generating the Programmer's Report Select Panel> Generate Programmers Report to generate a Programmers report on the selected Page that summarizes various aspects of the active Project. This selection invokes the Generate Programmer's Report sub-menu, where you can select a file format for the generated file: Comma Separated Format - This option produces a .CSV file (compatible with most spreadsheet applications, including Microsoft Excel).
PAGE 89
Working With Project (*.TP4) Files Working With Multiple Projects TPD4 supports working on multiple projects simultaneously, with a few limitations: Opening Multiple Projects Simultaneously: Each project page has its own tab along the bottom of the Design View window (known as MDI Page Tabs). TPD4 will display up to a maximum of 15 page tabs. If you open more than 15 pages, only the most recently opened 15 pages will remain open (the others will be automatically closed).
PAGE 90
Working With Project (*.TP4) Files It is not necessary to open a page to copy it: simply select the desired page with a single click in the Workspace Navigator window and copy the page. 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 (use Ctrl+V, Edit > Paste, the Paste toolbar button, or select Paste from the Workspace Navigator context window).
PAGE 91
Working With Project (*.TP4) Files By default, the program scales all elements of the panel file, which should produce the best overall effect. Note that scaling an image to a greater size produces more artifacts in the final image than reducing the image. 6. Use the New Filename field to rename the project file, if desired. Use the Browse button to navigate to a different target directory if necessary.
PAGE 92
Working With Project (*.TP4) Files 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. Via File > Open 1. Simply open a TPD3 file via the File > Open command. 2. In the Open dialog, set the File Types selector to TPDesign3 Files (TPD): FIG.
PAGE 93
Working With Project (*.TP4) Files 3. Step 2 of 3 (View Warnings and Substitute Fonts): The TPD Conversion Wizard - Warnings & Font Substitution (Step 2 of 3) dialog (FIG. 53) contains two read-only text fields: FIG. 53 TPD Conversion Wizard - Warnings & Font Substitution (Step 2 of 3) dialog 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.
PAGE 94
Working With Project (*.TP4) Files Errors and warnings are displayed in the Errors and Warnings Report dialog. Neither errors nor 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. See Errors and Warnings Report dialog on page 57. Click Filter Warnings to select which warning messages to display or suppress via the Filter Conversion Warnings dialog (FIG. 55). FIG.
PAGE 95
Resource Manager Resource Manager Overview TPDesign4 manages all image and sound on a project level via the Resource Manager. The Resource Manager provides the ability to import image and sound files so that they can be applied to various panel elements (Pages, Popup Pages and Buttons) in the active Project. Once a image or sound file has been added to the Resource Manager, it is available to be applied to any panel element, and is available to share among any number of elements.
PAGE 96
Resource Manager Slots: This tab allows you to manage slot assignments for images and icons. See Resource Manager dialog - Slots tab on page 65. Sounds: This tab provides a convenient way to import and preview all sound files (.WAV or .MP3) to be used in your project. See Resource Manager dialog - Sounds tab on page 66. Resource Manager Toolbar The Resource Manager contains its own toolbar above the tabs (FIG. 58): FIG.
PAGE 97
Resource Manager Resource Manager dialog - Images tab The Images tab of the Resource Manager dialog (FIG. 59) 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). FIG.
PAGE 98
Resource Manager Resource Manager dialog - Dynamic Images tab The Dynamic Images tab of the Resource Manager dialog (FIG. 60) provides a convenient way to import and preview all dynamic image files to be used in your project. FIG. 60 Resource Manager dialog - Dynamic Images tab 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.
PAGE 99
Resource Manager Resource Manager dialog - Slots tab The Slots tab of the Resource Manager dialog (FIG. 61) provides a convenient way to preview and manage all image and sound files that are being used in your project. FIG. 61 Resource Manager dialog - Slots tab Where the Images and Sounds tabs contain "libraries" of all Image and Sound files (even if they have not been assigned to a slot), the Slot tab lists only those image and sound files that are currently assigned to a slot.
PAGE 100
Resource Manager Resource Manager dialog - Slots tab (Cont.) 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: Click to cancel the assignment process. Resource Manager dialog - Sounds tab The Sounds tab of the Resource Manager dialog (FIG.
PAGE 101
Resource Manager Working With Images Bitmap Images can be any supported image type. Images are applied to Pages, Popup Pages and Buttons via the Bitmap (State) Property. By default, bitmaps are drawn beneath Icons and Text. See the State Draw Order section on page 298 for details. Static Bitmap Images that have been imported into the Project are listed in the Images tab of the Resource Manager (see FIG. 59 on page 63).
PAGE 102
Resource Manager Importing Image Files Into The 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 (FIG. 63). FIG. 63 Open dialog - Overwrite resources with duplicate names checkbox Click the Overwrite resources with duplicate names checkbox (at the bottom of the dialog) to automatically overwrite any existing files that have the same filename.
PAGE 103
Resource Manager Assigning Images To Slot Positions Once an image file is imported into the Project (via the Resource Manager), it can be assigned to a Slot position. Once an image is assigned to a Slot, it can be used as an Icon in your Project. Icons are applied to Pages, Popup Pages or Buttons via the Icon Slot (States) property. By default, Icons are displayed on top of bitmap images. The Draw Order can be changed in the State Draw Order dialog, accessed via the Draw Order (State Property).
PAGE 104
Resource Manager Renaming Image Files 1. Select Panel > Resource Manager (or click the toolbar button) to open the Resource Manager dialog. 2. Open the Images tab. 3. Click the Rename button to invoke the Rename dialog (FIG. 67). FIG. 67 Rename dialog 4. Enter the new file name in the New Name text field. 5. Click OK to close the Rename dialog. Deleting Image Files From the Project Select Panel > Resource Manager (or click the toolbar button) to open the Resource Manager dialog. Open the Images tab.
PAGE 105
Resource Manager Working With Dynamic Images Use the Dynamic Images tab of the Resource Manager (see FIG. 60 on page 64) to manage dynamic image files.Dynamic Images are images that exist on an HTTP server or FTP server, external to the panel. To use dynamic images in your project, specify a URL rather than a directory path to a static image file. Dynamic images can be applied to all button types except Computer Control and Text Area buttons.
PAGE 106
Resource Manager Create Dynamic Image dialog options (Cont.) Confirm: Retype the password to confirm. Note: 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. Refresh Rate: Use the up/down arrows to adjust the number of seconds between refreshes in which the resource is downloaded again.
PAGE 107
Resource Manager FIG. 72 Resource Manager - Slots tab 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, only the first five files will be assigned.
PAGE 108
Resource Manager Google Chrome - Copy Image URL IE - Properties (opens the Properties dialog) FIG. 74 Dynamic Image - Copy Image URL to clipboard 3. In the Dynamic Images tab of the Resource Manager, click New to open the Create Dynamic Image dialog (FIG. 75). FIG. 75 Create Dynamic Image dialog 4. In the Name field, enter a descriptive name for this Dynamic Image (in this example - "Union Station"). 5. Paste the copied URL into the Host field.
PAGE 109
Resource Manager a. b. c. d. Cut the file portion off the end of the URL and paste it into the File field (excluding the backslash). Cut the path portion off the end of the URL and paste it into the Path field (excluding the backslash). Cut the host portion off the end of the URL and paste it into the Host field. Since HTTP is already selected (by default) as the protocol (via the Protocol drop-down), it is not required as part of the host information.
PAGE 110
Resource Manager FIG. 79 Resource Manager - Dynamic Images tab (Get Live File) Now that the dynamic resource has been added to the Resource Manager, it is available to be applied to Pages, Popup Pages or Buttons (as a bitmap image). Applying a Dynamic Image to a Page, Popup Page or Button - Example 1. Select a Page, Popup Page or Button. 2. In the Properties window (States tab) - Bitmap property, click the Browse (...) button to open the Select Resource dialog (FIG. 80). FIG.
PAGE 111
Resource Manager Editing Dynamic Images 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 Edit button to invoke the Edit Dynamic Image dialog (FIG. 83): FIG. 83 Edit Dynamic Image dialog 4. Edit the image information as desired. 5. Click OK to close the Edit Dynamic Image dialog. Deleting Dynamic Image Files From the Project 1.
PAGE 112
Resource Manager 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.
PAGE 113
Resource Manager Dynamic Image Settings - Example 1: Axis FIG. 84 Dynamic Image Settings - Example 1: Axis Manufacturer: Axis Model: 2100 (camera) Path: axis-cgi/mjpg/video.cgi?camera=&resolution=320x240 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.
PAGE 114
Resource Manager Dynamic Image Settings - Example 3: Vivotek FIG. 86 Dynamic Image Settings - Example 3: Vivotek Manufacturer: Vivotek Model: 2111 (camera) Path: cgi-bin/ video.jpg?cam=1&quality=3&size=2 Working With Trendnet IP Cameras To get a streaming image from the TV-IP301 Trendnet IP camera on to a dynamic image window of a touch panel: 1. Configure the camera for JPEG and 15fps. The default settings of "640x480" and "Highest Quality" should be OK. 2.
PAGE 115
Resource Manager DynaMo™ Resource Images TPDesign4, and a select number of AMX Touch Panels support "enhanced" or "accelerated" Dynamo images. In TPDesign4, these are referred to as Dynamo Resource images, as opposed to Dynamic (static) or Dynamo (non-accelerated) images. Dynamo Resource images are essentially the same as standard Dynamic or Dynamo images with one key difference: the playback of Dynamo Resource images is accelerated to up to 30 frames-per-second.
PAGE 116
Resource Manager Scaling and Cropping of Dynamo Resource Images Dynamo Resource Images have specific scaling/cropping options available via the Scale Bitmap to Fit (State) property for any state that has a Dynamo Resource image assigned to the "Bitmap" property. The Scale Bitmap To Fit options presented here depend on the panel type selected: No - The Dynamo Resource image will not be scaled at all, and the image will be arbitrarily centered on the container button, popup or page.
PAGE 117
Resource Manager Working With Slots Once an image file is imported into the Project (via the Resource Manager), it can be assigned to a Slot position in the Slots tab of the Resource Manager dialog (see FIG. 61 on page 65). Once an image is assigned to a Slot, it can be used as an Icon in your Project (see below). Icons are applied to Pages, Popup Pages or Buttons via the Icon Slot (States) property. By default, Icons are displayed on top of bitmap images.
PAGE 118
Resource Manager Duplicating Slot Assignments To duplicate a slot assignment: 1. Select Panel > Resource Manager (or click the toolbar button) to open the Resource Manager. 2. Open the Slots tab. 3. Select the Slot assignment that you want to duplicate. 4. Ctrl + click on the slot in which the duplicate will be added. 5. Click the Duplicate button (FIG. 90): FIG. 90 Resource Manager (Slots tab) - Duplicating Slot Assignments The selected icon is duplicated in the selected target slot.
PAGE 119
Resource Manager Deleting Slot Assignments From The Project 1. Select Panel > Resource Manager (or click the toolbar button) to open the Resource Manager. 2. Open the Slots tab. 3. Select one or more slot assignments to delete (Ctrl + click to select multiple files individually, or Shift + click to select a range of slots). 4. Click the Delete button (FIG. 92): FIG.
PAGE 120
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 file you have imported is of a different file type with a different extension. Sorting Sound Files 1. Select Panel > Resource Manager (or click the toolbar button) to open the Resource Manager. 2. Open the Sounds tab. 3. Click the Sort A-Z button to sort the sound files in descending alphabetical order. 4.
PAGE 121
Resource Manager Editing Image and Sound Files Using External Programs TPD4 supports the use of external programs for editing image and/or sound files used in your project. 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 (FIG. 96): FIG.
PAGE 122
Resource Manager 2. Click the Add Editor (+) button to access the Choose Editor dialog (FIG. 98). Browse button FIG. 98 Choose Editor dialog 3. Click the Browse button (...) to locate and select the desired program's executable (.EXE) file, in the Open dialog. 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. 4.
PAGE 123
Resource Manager FIG. 100 Choose Editor dialog 5. Click OK to close the Choose Editor dialog. The new default editor is indicated in the Default column of the Editors table (FIG. 101). FIG. 101 Editors list Editing 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. 4.
PAGE 124
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. The NXP-TPI/4, TPI-PRO and TPI-PRO-DVI accommodate up to 4 video source inputs, and you can select any available video source (1-4) as the source for a video fill.
PAGE 125
Working With Pages Working With Pages Overview 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 (FIG. 103). Page FIG. 103 Example Page (with text applied) in Design View window Pages cannot have borders and possess only one state. You may place text directly on a page outside the context of a button.
PAGE 126
Working With Pages Adding a Page Use the options in the Add Page dialog to define a new Page to add to the active Project (FIG. 105): FIG. 105 Add Page dialog There are several ways to open the Add Page dialog: Select Panel > Add Page Click the Add Page toolbar button Right-click on the Pages folder (or on any individual Page) in the Workspace Window and select Add Page. To add a new Page to your Project: 1. Open the Add Page dialog. 2.
PAGE 127
Working With Pages Setting Page Properties Panel Pages have a set of Page Properties that can be configured via the fields in the Properties Window. To set Page-level properties, click on the Page area in the Design View (as opposed to a button on the page). With the Page selected, the Properties window displays the properties available for the Page, separated into three tabs (General, Programming and States).
PAGE 128
Working With Pages Setting States Properties: Pages Use the State tab of the Properties window to set/edit page state properties. The State tab contains a table that lists the page state properties for the active page (FIG. 108). FIG. 108 Properties Window - States tab (with a Page selected) To edit any of the listed 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 drop-down menu, or both.
PAGE 129
Working With Pages Opening a Page Double-click on any page or popup page in the Workspace window (Pages tab) to open the selected page in a Design View window. Adding a Fill Color to a Page The method for adding a fill color to a Page is identical for adding a fill color to a Popup Page or Button. 1. Select the page to which you want to add or change the Fill Color (via the Workspace - Pages tab). 2. In the States tab of the Properties window, click on the Fill Color field to enable the browse (...
PAGE 130
Working With Pages Adding a Bitmap to a Page A bitmap image can be applied directly to a Page in your project, to serve as the background image (see the State Draw Order section on page 298). The method for adding a bitmap to a Page is identical for adding a bitmap to a Popup Page or Button. 1. Select the page to which you want to add or change a bitmap image (via the Workspace - Pages tab). 2. In the States tab of the Properties window, click on the Bitmap field to enable the browse (...) button (FIG.
PAGE 131
Working With Pages FIG. 114 Properties window (States tab) - Bitmap Justification property Select Absolute to manually position the image. When Absolute is selected, the Bitmap X Offset and Bitmap Y Offset properties are enabled (FIG. 115): FIG. 115 Properties window (States tab) - Bitmap X Offset and Bitmap Y Offset properties Use these to specify in pixels the position of the bitmap on the Page.
PAGE 132
Working With Pages TPD4 does not automatically scale or stretch images to fit the Page. To scale an image to fit a target Page, Popup or Button, open the image in any graphics editor program, and scale the image to the exact size (in pixels) of the Page. To check the size of Pages, Popups or Buttons in your project, check the Width and Height values in the Properties window (General tab). Match the image size (in pixels) to the size indicated there.
PAGE 133
Working With Pages Adding an Icon to a Page You can apply an image Icon directly to a Page in your project, to serve as the foreground image (see the State Draw Order section on page 298). In order to apply Bitmaps and/or Icons to Pages, Popup Pages or Buttons, the image files must be pre-loaded in the Resource Manager. See the Resource Manager section on page 61for details. 1. Select the page to which you want to add or change an image icon (via the Workspace - Pages tab). 2.
PAGE 134
Working With 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. The method for adding Text to a Page is identical for adding Text to a Popup Page or Button. According to the default State Draw Order, Text is drawn in top of all other fill properties. See the State Draw Order section on page 298 for details. 1.
PAGE 135
Working With Pages FIG. 125 Colors dialog 4. Click on Font in the States tab of the Properties window to enable the browse button (FIG. 126). Browse button FIG. 126 Properties window (States tab) - Font property Select the desired font in the Choose Font dialog (FIG. 127): FIG. 127 Choose Font dialog 5. Click Text Justification in the States tab of the Properties window to set the justification of the text on the page (FIG. 128). FIG. 128 State Property - Text Justification TPDesign4 (v3.
PAGE 136
Working With Pages Select Absolute to manually position the text. When Absolute is selected, the Bitmap X Offset and Bitmap Y Offset Properties are enabled. Use these to specify in pixels the position of the text on the Page. Click the Browse (...) button on either of these properties to invoke a dialog that allows you to position the text visually, or manually (FIG. 129). FIG.
PAGE 137
Working With Pages 7. Click Word Wrap, and select wether to wrap text that doesn't fit on a single line on the selected Page (FIG. 132). FIG. 132 State Property - Word Wrap 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. True Type Font Support Since G4 panels have the ability to decode and display Windows True Type Font files (TTF), TPD4 directly utilizes TTF files.
PAGE 138
Working With Pages Renaming a Page To rename any Page in the active Project, simply click on a Page entry in the Workspace and type directly into the text field (FIG. 133): FIG. 133 Renaming a Page Deleting a Page From the Project To delete a page from the active project, select the page to delete in the Workspace window - Pages tab, and select Edit > Delete. The program will prompt you to verify the page deletion first (FIG. 134): FIG.
PAGE 139
Working With Pages Exporting Pages as Image Files Use the options in the Export Page Images dialog to export one or more Pages (and/or Popup Pages) in the current Project as image files: 1. Select Panel > Export Page Images to open the Export Page Images dialog (FIG. 135). FIG. 135 Export Page Images dialog 2. Use the checkboxes in the Pages and Popups lists to select which Pages and Popup Pages to export. 3. Specify a target directory for the exported image files in the Export Directory field.
PAGE 140
Working With Pages Printing Pages Select File > Print Preview to display a preview of the pages and popup pages in the active project, as they will appear when printed in the Print Preview window (FIG. 136). FIG. 136 Print Preview window Each page and popup page in the project is printed one per page. See the Print Preview Window section on page 33 for details.
PAGE 141
Popup Pages Popup Pages Overview Generally, Popup Pages provide a mode of sub-navigation for the panel's UI by presenting a set of options that sit on top of a main Page. Popup Pages are similar to Pages in some respects as they are a container for Buttons, they may have up to one address and channel port code assignments, and contain only one state. Otherwise, Popup Pages have many typically Button specific properties, as well as some special properties that apply only to Popup Pages.
PAGE 142
Popup Pages See: Creating a Standard Popup Page on page 108 Setting Standard Popup Page Properties on page 110 Popup Page Groups on page 113 Sub-Page Popups (Sub-Pages) Sub-Page Popups (usually simply referred to as Sub-Pages) are a special type of popup page used to create Scrolling Regions (TPD4 v3.2 or higher, supported only by Modero X Series Touch Panels). Sub-Pages represent the scrolling elements that are displayed within the Scrolling Region (FIG. 139): FIG.
PAGE 143
Popup Pages There are some specifics to understand regarding naming Popup Pages (see the Naming Popup Pages section on page 115 for details). The minimum size for popup pages is 15 pixels in height or width. 3. Click OK to add the new Popup Page to the active project. The new popup page will be appear in the Workspace window (Pages folder), under the project to which the page was added (as the active page see "Popup Page 4" below): FIG. 141 Workspace window (Pages tab) - Popup Pages folder 4.
PAGE 144
Popup Pages 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. In the Properties window (General tab), verify that the PopupType property is set to Standard (FIG. 144): FIG. 144 PopupType property - Standard 4. Set the other properties as desired - see the Setting Standard Popup Page Properties section on page 110 for details.
PAGE 145
Popup Pages Setting General Properties: Popup Pages Use the General tab to set/edit Popup Page properties (FIG. 146): FIG. 146 Properties Window - General Tab (Standard Popup Page) The following General properties are supported for Standard Popup Pages: Standard Popup Pages - General Properties Property Name Page Reference Popup Type page 247 Name page 246. Also see the Naming Popup Pages section on page 115.
PAGE 146
Popup Pages Setting Programming Properties: Popup Pages Use the Programming tab to set/edit Popup Page properties. The Programming tab contains a table that lists program-related properties (Address assignments) for the active Popup (FIG. 147). FIG.
PAGE 147
Popup Pages Standard Popup Pages - State Properties (Cont.) Property Name Page Reference Fill Color page 286 Text Color page 289 Text Effect Color page 290 Overall Opacity page 287 Video Fill page 291. Also see the XXXXX. Streaming Source page 288 Bitmap page 285 Bitmap Justification page 285 Bitmap X Offset page 285 Bitmap Y Offset page 285 Icon Slot page 286. Also see the Icons section on page 83.
PAGE 148
Popup Pages Via the Add Popup Page dialog To create a new Popup Page Group via the Add Popup Page dialog, as part of creating a new Popup Page: 1. Select Panel > Add Popup Page to open the Add Popup Page dialog (see FIG. 140 on page 108). 2. Enter a name for the new Popup Page Group in the Group text field (FIG. 150). FIG. 150 Add Popup Page dialog - Group field Note that if any Popup Page Groups have been defined previously, they are available for selection via the Group drop-down menu. 3.
PAGE 149
Popup Pages FIG. 154 Properties Window (General tab) - Group Property Removing Popup Pages From a Popup Page Group There are two ways to remove Standard Popup Pages from a Popup Page Group: 1. Drag-and-drop popup page(s) from the Popup Page Group folder into the Popup Pages folder (FIG. 155): FIG. 155 Drag-and-Drop Popup Pages Out of Popup Page Group folder 2. Set the Group property to None in the Properties window - General tab (FIG. 156): FIG.
PAGE 150
Popup Pages Opening a Popup Page via the Workspace Window Double-click on any Standard Popup Page or Sub-Page in the Workspace Navigator (Pages tab) to open the selected popup page in a Design View window (FIG. 158). FIG. 158 Popup Page - Design View window Use the Show/Hide Popup Pages functions to display the selected Popup on the active Design View window (for a Page).
PAGE 151
Popup Pages Additionally, you can drag and drop a Popup Page from the Workspace Window onto a Design View window to show the selected Popup Page. Adding a Fill Color To a Popup Page The method for adding a fill color to a Popup Page is identical for adding a fill color to a Page or Button. See the Adding a Fill Color to a Page section on page 95 for instructions. The only difference is that you will select a Popup Page rather than a Page before following the steps provided.
PAGE 152
Popup Pages 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 (FIG. 161): FIG. 161 Confirm deleting a Popup Page from the Project Exporting Popup Pages as Image Files Use the options in the Export Page Images dialog to export one or more Popup Pages (and/or Pages) in the current Project as image files.
PAGE 153
Sub-Pages Sub-Pages Overview A Sub-Page is a specific type of Popup Page that is used to represent an individual item within a Scrolling Region. Each item displayed with a Scrolling Region is a separate Sub-Page (FIG. 162): FIG. 162 Sub-Pages Sub-Pages must be grouped into a Sub-Page Set in order to be displayed in a Scrolling Region. See the Sub-Page Sets section on page 179 for details. Sub-Pages are represented in the Workspace Window (Pages tab) within the Sub-Pages folder (FIG. 163): FIG.
PAGE 154
Sub-Pages TPD4 will convert any Sub-Pages to Standard Popups on a Save As Different Panel Type operation from a panel that supports the sub-page view feature to a legacy panel-type that doesn’t. More Information Refer to the Scrolling Regions section on page 173 for information on using Sub-Pages to create a Scrolling Region: For details on creating Sub-Pages, see the Creating a Sub-Page section on page 176.
PAGE 155
Working With Buttons Working With Buttons Overview Buttons represent the primary functionality of the panel. They can be assigned various program-related properties such as Address and Channel Port/Code assignments, Level Control as well as String and Command Outputs that provide specific functionality based on NetLinx code (FIG. 164): Buttons FIG. 164 Example Buttons Like Pages and Popup Pages, Button properties (General, Programming and States) are managed via the Properties window.
PAGE 156
Working With Buttons Supported Button Types (Cont.) Computer Control: Allow you to connect to a PC running a VNC server for remote control applications (see the Computer Control Buttons section on page 153). TakeNote: Allow you to use a G4 panel to annotate to either a windows desktop or on other G4 panels (see the TakeNote Buttons section on page 156). List Box: Utilizes a collection of subordinate buttons to display either dynamic or static data as a scrollable list.
PAGE 157
Working With Buttons Drawing a Button 1. Select the Button Draw Tool. 2. Open the Page (or Popup page) that the button will be added to, and place your cursor within the boundaries of an open Design View. 3. Hold down the left mouse button and drag the cursor diagonally. You will see a sizing rectangle as you drag the mouse, indicating the size of the button you are drawing (FIG. 167): FIG. 167 Drawing a Button - Click and Drag Hold down the SHIFT key while drawing to constrain the button to a square.
PAGE 158
Working With Buttons Using the Drawing Assist Features The Order Assist, Position Assist and Size Assist toolbars contain shortcuts to many layout and design control options for controlling various elements of existing button(s) size and position. See the Order Assist Toolbar section on page 17. See the Position Assist Toolbar section on page 17. See the Size Assist Tools Toolbar section on page 18. Alignment & Sizing Dialog To access the Alignment & Sizing dialog (FIG.
PAGE 159
Working With Buttons Alignment & Sizing Dialog options (Cont.) • 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.
PAGE 160
Working With Buttons See the Button Types section on page 121 for details. Setting Default New Button Parameters The Drawing Tools toolbar (FIG. 171) contains shortcuts to several of the main drawing tools that control the button type, border style, font, font size, button fill color, border color and text color. The selections made in the Drawing Tools Toolbar will apply to all newly created buttons. Press to toggle the On / Off State FIG.
PAGE 161
Working With Buttons 4. 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. a. 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. b.
PAGE 162
Working With Buttons FIG. 173 Apply To All button This Apply To All button 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 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).
PAGE 163
Working With Buttons 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 (FIG. 175): Selected Selected and has Edit Focus FIG. 175 Selected Button and Selected Button with Edit Focus Button States - State Manager FIG. 176 shows an example of a General button (which has two states) displayed in the State Manager window: FIG.
PAGE 164
Working With Buttons This is where the Lock Button Name option (General tab of the Properties 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.
PAGE 165
Working With Buttons FIG. 180 Button Page Flip Actions dialog - Page Flip Actions drop-down 5. Depending on the type of page flip action selected, you may need to also specify the target page, popup 6. page or popup group to open. Click the down arrow in the Target column to select the target of the selected Page Flip Action. See Page Flip Actions below for details. Repeat this process as desired to create multiple page flips on the button (FIG. 181): FIG.
PAGE 166
Working With Buttons Page Flip Actions With a button selected in a Design View window, click Page Flip in the Properties 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 for the page flip (see FIG. 179 on page 130).
PAGE 167
Working With Buttons Drag-and-drop a Page or Popup Page frm the Workspace Window (Pages tab) oto a button in the Design View window Drag-and-drop a Page or Popup Page from the Workspace Window (Pages tab) onto the Page Flip (General) button property FIG. 182 Setting Page Flips via Drag and Drop Creating Page Flip Animations The MVP-9000i 9" Modero ViewPoint Touch Panel with Intercom supports several Page Flip Animations.
PAGE 168
Working With Buttons FIG. 186 Properties window (General tab) - Page Flip Animation property 7. Click the Browse button to open the Page Flip Animation dialog (FIG. 187). Note that this option is only available for panels that support Page Flip Animations (i.e. MVP-9000i): FIG. 187 Page Flip Animation dialog 8. Select a animation effect from the Page Flip Animations list on the left side of the dialog.
PAGE 169
Working With Buttons Pasting Buttons: You can paste (by either clicking Edit > Paste from the main menu or the Paste button in the main toolbar) a previously copied button or buttons onto: 1. A page or popup page name in the Workspace Navigator window - Pages tab (no open Design View window required) or 2. The active Design View window.
PAGE 170
Working With Buttons 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. Select Select All to close the Find dialog and select every button that meets the criteria. The program will inform you if no buttons are found that match the search criteria.
PAGE 171
Working With Buttons 5. For example, to change the Border Style on one or more buttons, select Border Style in the Search Criteria table, then select the particular border style to search for from the drop-down list. Then, select Border Style in the Replace Values table, and select the desired replacement border style from the dropdown list. Repeat this process for as many other button properties as needed.
PAGE 172
Working With Buttons Previewing a Button The Button Preview window allows you to preview a button so you can check size, border, text and color settings on a Push and Release of the button (FIG. 191). FIG. 191 Button Preview Window Button Preview window Select View > Button Preview to open the Button Preview window. The Button Preview window displays a preview of the selected button. Initially the button is shown in its Off state.
PAGE 173
Working With Buttons To preview a button: 1. Select the button that you want to preview. 2. Select View > Button Preview to open the Button Preview window. Like the other windows in TPD4, the Button Preview window is fully dockable, but initially it opens undocked. Double-click 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. 3. Click on the Push button.
PAGE 174
Working With Buttons 6. Select the desired display format. Creating a Time Button A Time Button is a button that displays the current time on the panel. It is a read-only (non-interactive) 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 3. 4. 5. menu. Select 0-setup port from the drop-down menu (see FIG.
PAGE 175
Working With Buttons FIG. 197 Properties window (General tab) - Type Property (General) 4. Edit the button's General, Programming and States properties as necessary (in the Properties window). 5. See the Setting Button Properties: General Buttons section on page 141 for details. Select File > Save to save your changes.
PAGE 176
Working With Buttons Multi-State General Buttons Multi-State General buttons are basic multi-state buttons that can be used for most touch panel functions, and that support up to 256 states. Use multi-state buttons when you want to utilize animation effects (FIG. 198). On State Off State FIG. 198 Example - Multi-State General button Creating Multi-State General Buttons 1.
PAGE 177
Working With Buttons Button Properties - Multi-State General Buttons (Cont.) General Properties Programming Properties State Properties • Border Style - page 240 Note: Maximum command, string and text length = 4096 characters. • Streaming Source - page 288 • State Count - page 250 • Animate Time Up - page 240 • Animate Time Down - page 239 • Video Touch Pass-Thru - page 291 • Bitmap - page 285 Note: See the Level Control Parameters section on page 284.
PAGE 178
Working With Buttons 5. Select File > Save to save your changes. Setting Button Properties: Bargraph Buttons Once you have created a Bargraph button, you can use the General, Programming and States tabs of the Properties window to set/edit button properties for the selected button.
PAGE 179
Working With Buttons Slider Types There are several slider types available for use with Bargraph buttons, selectable via the Slider Name (General) property (FIG. 202): FIG. 202 Properties window (General tab) - Type Property (Bargraph) Ball Smart Button Bubbled Large Circle-L Circle-M Smart Button Bubbled Small Circle-S Windows Precision Rectangle-L Rectangle-M Rectangle-S Windows Active FIG.
PAGE 180
Working With Buttons Multi-State Bargraph Buttons Multi-State Bargraph buttons are level monitors and adjustable level controls that can be configured to monitor or adjust audio outputs and lighting levels, and that (like Multi-State General buttons) support up to 256 states. Use multi-state 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). Creating Multi-State Bargraph Buttons 1.
PAGE 181
Working With Buttons Button Properties - Multi-State Bargraph Buttons (Cont.) General Properties Programming Properties State Properties • Page Flip Animation - page 247 • String Output - page 257 • Bitmap X Offset - page 285 • Animation Time - page 239 • Command Port - page 255 • Bitmap Y Offset - page 285 • Page Flip - page 247 • Command Output - page 255 • Scale Bitmap To Fit - page 288 Note: The maximum number of states for Multi-State type buttons = 256.
PAGE 182
Working With Buttons 4. Set the Icon Justification to Absolute (FIG. 208): Icon (Icon Justification = absolute) FIG. 208 Multi-State Bargraph button - Icon with Absolute Justification set 5. In the Icon X Offset state property, click the Browse button (...) to open the Image and Text Positioning dialog. 6. In the Image and Text Positioning dialog, move the icon into the position that you want to be the "start position" for the bargraph slider (FIG. 209): FIG.
PAGE 183
Working With Buttons 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). 9.
PAGE 184
Working With Buttons FIG. 213 Tweeners sub-menu - Icon Position selected 13. 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 the cursor up and down within the button to move the slider up and down (FIG. 214) FIG. 214 Button Preview window Remember, you can also utilize the other tweeners in conjunction with the custom slider to create complex color transition effects.
PAGE 185
Working With Buttons Joystick Buttons Joystick buttons are vertical and horizontal direction controllers that can be used for pan and tilt control (typically for camera operation). Joystick buttons only use one state: Off. 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 reflected in the State tab of the Properties window.
PAGE 186
Working With Buttons Button Properties - Joystick Buttons (Cont.
PAGE 187
Working With Buttons Setting Button Properties: Text Input Buttons Once you have created a Text Input button, you can use the General, Programming and States tabs of the Properties window to set/edit button properties for the selected button. To edit any of the 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 drop-down menu, or both.
PAGE 188
Working With Buttons Creating Computer Control Buttons 1. Open the Page or Popup page that the button will be added to (double-click on the page in the Workspace window (Pages tab) to open the page and bring it into edit focus). 2. Use the Button Draw tool to create a new button in the active Design View window. See the Drawing a Button on page 123 for details. 3. In the General tab of the Properties window, select Computer Control as the Type property (FIG. 204). FIG.
PAGE 189
Working With Buttons FIG. 222 Channel Code Property - Advanced Codes (Computer Control) 6. Edit the button's Programming properties as necessary (Programming tab of the Properties window). 7. Edit the button's States properties as necessary (States tab of the Properties window). 8. Select File > Save to save your changes.
PAGE 190
Working With Buttons TakeNote Buttons TakeNote buttons work in conjunction with G4 Computer Control to provide a remote desktop to an attached PC running a VNC server, allowing you to use a G4 panel to annotate to either a windows desktop or on other G4 panels. See Appendix B: TakeNote on page 375 for details. TakeNote buttons are not supported on R-4 remote controllers. Creating TakeNote Buttons 1.
PAGE 191
Working With Buttons Button Properties - TakeNote Buttons (Cont.) General Properties Programming Properties State Properties (OFF only) • Top - page 250 • String Output - page 257 • Text Effect Color - page 290 • Width - page 251 • Command Port - page 255 • Overall Opacity - page 287 • Height - page 242 • Command Output - page 255 • Bitmap - page 285 • Above Popups - page 238 Note: Maximum command, string and text length = 4096 characters.
PAGE 192
Working With Buttons Creating Sub-Page View Buttons To create a new Sub-Page View button: 1. Open the Page or Popup page that the button will be added to (double-click on the page in the Workspace window (Pages tab) to open the page and bring it into edit focus). 2. Use the Button Draw tool to create a new button in the active Design View window. See the Drawing a Button on page 123 for details. 3. In the General tab of the Properties window, select Sub-Page View as the Type property (FIG. 224). FIG.
PAGE 193
Working With Buttons List Box Buttons TPD4 supports adding "List Box" buttons to projects created from panel types that support List Box buttons. The List Box button is a special-purpose button type for G4 devices/panels which utilizes a collection of subordinate buttons to display either dynamic or static data as a scrollable list (referred to as a “list box view”). List box buttons can be used to allow the end-user to view data in list form, and make selections from the list.
PAGE 194
Working With Buttons 160 TPDesign4 (v3.
PAGE 195
External Controls (Buttons/LEDs) External Controls (Buttons/LEDs) Overview TPD4 supports editing the properties for programmable external controls for panels that feature external pushbuttons and LEDs (including R-4 remote controllers).
PAGE 196
External Controls (Buttons/LEDs) Keypad with Transport Functions - for use with a MIO R-4 with transport keys. Teletext keypad - for use with a Teletext MIO R-4. Teletext Keypad with Transport Functions - for use with a Teletext MIO R-4 with transport keys.   As with the panel resolution, this selection cannot be modified once the panel project has been created.
PAGE 197
External Controls (Buttons/LEDs) Animation Time (tenths/sec) Page Flip Setting Global Programming Properties: External Pushbuttons Global (panel-wide) settings for external controls (pushbuttons and LEDs) are accessed through the External Controls entry in the panel’s tree (displayed in the Pages tab of the Workspace Navigator Window). 1.
PAGE 198
External Controls (Buttons/LEDs) Name Disabled Setting Global Programming Properties: External LEDs Global (panel-wide) settings for external LEDs are accessed through the External Controls entry in the panel’s tree (displayed in the Pages tab of the Workspace Navigator Window). 1. Double-click on the External Buttons entry to display a Design View Window representing the layout of the external buttons and LEDs on the target panel, which may be selected like any other button to edit their properties.
PAGE 199
External Controls (Buttons/LEDs) Override Global Settings Name Disabled Password Protection Page Flip Animation Animation Time (tenths/sec) Page Flip Setting Page-Specific Programming Properties: External Pushbuttons Page-specific settings for external controls (pushbuttons and associated LEDs) which may override any Global settings are set via the Design View of the page that you want to associate the external controls with. 1.
PAGE 200
External Controls (Buttons/LEDs) Disabled Setting Page-Specific Programming Properties: External LEDs Page-specific settings for external LEDs are accessed through the new External Controls entry in the panel’s tree (displayed in the Pages tab of the Workspace Navigator Window). 1. Double-click on the External Buttons entry to display a Design View Window representing the layout of the external buttons and LEDs on the target panel, which may be selected like any other button to edit their properties.
PAGE 201
Gesture Controls Gesture Controls Overview The MX Series panels as well as the MVP-9000i panel support Gestures for on-screen navigation. Gestures can be used (in addition to buttons) to define Page Flips for navigating the panel UI. Gestures represent a way to define functionality (in addition to Buttons and External Controls) in a way that adds navigation options of the panel UI that go beyond pressing buttons on the screen.
PAGE 202
Gesture Controls In the Design View window, Gesture Control buttons may be selected like any other button for editing (FIG. 231): FIG. 231 Gesture Control button selected for editing Single-Finger Gestures Supported Single-Finger Gestures include: Single-Finger Gestures Left Swipe A swipe across the touch panel in the left direction causes a Page Flip (as defined in the Properties window - General tab).
PAGE 203
Gesture Controls Two-Finger Gestures Supported Two-Finger Gestures include: Two-Finger Gestures Two-Finger Left Swipe A two-finger swipe across the touch panel in the left direction causes a Page Flip (as defined in the Properties window - General tab). Two-Finger Right Swipe A two-finger swipe across the touch panel in the right direction causes a Page Flip (as defined in the Properties window - General tab).
PAGE 204
Gesture Controls Accessing Global Properties for Gesture Controls Global (panel-wide) settings for Gesture Controls are accessed and edited through the External Controls entry in the Pages tab of the Workspace Window (FIG. 232): FIG.
PAGE 205
Gesture Controls Gestures - General Properties Override Global Settings - This option is only available when editing Page-Specific Gesture properties. Click in this row to enable the drop-down menu (Yes / No). Select Yes to override the default global settings for the selected Gesture. By default, this option is set to No, in which case none of the properties for the selected Gesture are editable. See the Setting Global Properties for External Controls section on page 162 for details.
PAGE 206
Gesture Controls 172 TPDesign4 (v3.
PAGE 207
Scrolling Regions Scrolling Regions Overview Scrolling Regions represent a powerful new method of presenting functions on AMX Modero X Series Touch Panels. A Scrolling Region is a specific area on a touch panel page that contains a set of elements that scroll as a group. The illustration in FIG. 234 below shows a basic example of a touch panel page with two Scrolling Regions one vertical and one horizontal.
PAGE 208
Scrolling Regions Since the touch panels that support Scrolling Regions also support Gestures at the page level, it is important to understand that finger gestures used on the page are separate from the swipes used within Scrolling Regions. For example, if a page uses a swipe gesture to trigger a Page Flip, the page flip will only occur if the swipe gesture is used on the Page, and not within a Scrolling Region (FIG.
PAGE 209
Scrolling Regions Sub-Pages A Sub-Page is a specific type of Popup Page that is used to represent an individual item within a Scrolling Region. Each item displayed with a Scrolling Region is a separate Sub-Page (FIG. 238): FIG. 238 Sub-Pages Sub-Pages must be grouped into a Sub-Page Set in order to be displayed in a Scrolling Region. See the Sub-Page Sets section on page 179 for details. Sub-Pages are represented in the Workspace Window (Pages tab) within the Sub-Pages folder (FIG. 239): FIG.
PAGE 210
Scrolling Regions Creating a Sub-Page There are two ways to add a new Sub-Page to your Project: Via the Add Popup Page Dialog 1. Select Panel > Add Popup Page (or click the toolbar icon) to open the Add Popup Page dialog (alternatively, select Add Popup Page from the Workspace Context Menu). 2. Set the Type option to Sub-Page (FIG. 240). FIG. 240 Add Popup Page dialog - Sub-Page Selected for Type 3. Fill in the information in this dialog to specify the basic properties for the new Sub-Page. 4.
PAGE 211
Scrolling Regions Via the Popup Draw Tool TPD4 also features the Popup Draw tool, which allows you to quickly create new popup pages in a way that is similar to drawing new buttons. 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 (FIG. 243). FIG.
PAGE 212
Scrolling Regions Setting Sub-Page Properties Sub-Pages have a set of Page Properties that can be configured via the fields in the Properties Window. To set Sub-Page properties, click on the Sub-Page area in the Design View (as opposed to a button on the page). With the Sub-Page selected, the Properties window displays the properties available for the Sub-Page, separated into three tabs: General, Programming and States.
PAGE 213
Scrolling Regions Sub-Page Sets A Sub-Page Set represents an ordered list of Sub-Pages that are to be displayed within a Sub-Page View button, to create a Scrolling Region (FIG. 246). FIG. 246 Sub-Page Set Sub-Pages must be assigned to a Sub-Page Set to be used in a Scrolling Region.
PAGE 214
Scrolling Regions FIG. 248 Create Sub-Page Set dialog 3. Enter a unique name for the new Sub-Page Set in the Set Name field. 4. Click OK to save your changes and close the Create Sub-Page Set dialog, and return to the Edit Sub-Page Sets dialog. The new Sub-Page Set is indicated in the Sub-Page Sets list on the left-side of the dialog (FIG. 249): FIG. 249 Edit Sub-Page Sets dialog - "Sub-Page Set 1" added to the Sub-Page Sets list 5. Add Sub-Pages to the new Sub-Page Set: a.
PAGE 215
Scrolling Regions FIG. 251 "Sub-Page A" added to the Sub-Page Set list for "Sub-Page Set 1" c. Repeat this process to add other Sub-Pages to the selected Sub-Page Set (FIG. 252): FIG. 252 Sub-Pages "A-D" added to "Sub-Page Set 1" Sub-Pages can be added to multiple Sub-Page Sets. However, only one instance of a Sub-Page can be added to any Sub-Page Set. Also, only one instance of any Sub-Page can only be displayed on a touch panel page at a time (as is the case with Standard Popup Pages). 6.
PAGE 216
Scrolling Regions Sub-Page Sets - Slot Sizes The Slot Size fields (Width and Height) in the Edit Sub-Page Sets dialog are automatically populated with the Slot Size for the selected Sub-Page Set (in pixels). These values are based on the dimensions of the first SubPage in the list. This is to ensure that all Sub-Pages with a scrolling region are of a consistent size. For example, consider a list of four Sub-Pages, each with different dimensions (FIG.
PAGE 217
Scrolling Regions Again, try to keep these factors in mind as you design scrolling regions. Editing Sub-Page Sets The options in the Edit Sub-Page Sets dialog allow you to edit existing Sub-Page Sets. 1. Select Panel > Edit Sub-Page Sets to open the Edit Sub-Page Sets dialog (FIG. 247 on page 179). 2. Select a Sub-Page Set in the Sub-Page Sets list box (left list box). 3. Edit the Set Name as desired. 4. Use the Add and Remove buttons to add or remove Sub-Pages from the list. 5.
PAGE 218
Scrolling Regions Sub-Page View Buttons - Design View Sub-Page View buttons are displayed in the Design View with placeholders that indicate the relative positions of the Sub-Page Set that it contains, to represent the Size, Placement, Spacing and Anchor Position options currently assigned to the Sub-Page Set. FIG.
PAGE 219
Scrolling Regions FIG. 260 Selection/Drawing Tools toolbar - Button Draw Tool When the Button Draw tool is selected, the Drawing toolbar becomes activated. By default, the options in the Drawing toolbar retain their most recent settings. Once you set these options (button type, border, font type/size, border/fill/text colors), the same settings will automatically apply to all consequent new buttons, until they are explicitly changed. 3.
PAGE 220
Scrolling Regions Assigning a Sub-Page Set to the Sub-Page View Button Once you created a series of Sub-Pages and added them to a Sub-Page Set, the final step is to assign the SubPage Set to the Sub-Page View button. This is accomplished via the Sub-Page Set (General) button property for the Sub-Page View button. 1. Select a Sub-Page View button. 2. In the General tab of the Properties window, select a Sub-Page set from the Sub-Page Set drop-down menu.
PAGE 221
Scrolling Regions Setting Programming Properties: Sub-Page View Buttons The following programming properties are supported for Sub-Page View buttons: Programming Properties: Sub-Page View Buttons Address Port See page 254 Address Code See page 254 String Output Port See page 257 String Output See page 257 Command Port See page 255 Command Output See page 255 Note: Maximum command, string and text length = 4096 characters.
PAGE 222
Scrolling Regions Creating a Scrolling Region - Example Step 1 - Create Sub-Pages The first step in creating a scrolling region is to create the Sub-Pages that will display within the scrolling region: 1. Select Panel > Add Popup Page to open the Add Popup Page dialog (FIG. 264). FIG. 264 Add Popup Page dialog 2. Select Sub-Page as the Type. 3. Enter a Name for the new Sub-Page and set the Size, Colors, Border and Font settings, just as you would for a Standard Popup Page.
PAGE 223
Scrolling Regions FIG. 266 Workspace WIndow - Pages tab - "Sub-Page A" - "Sub-Page E" added As with Standard Popup Pages, you can always copy a Sub-Page and paste it into the Project. The copy will initially be named "Copy Of ". Double-click on the pasted entry in the Workspace Window to edit the name as desired. In this example, you could copy "Sub-Page A", and rename the pasted copies to "Sub-Page B", then "Sub-Page C", etc.
PAGE 224
Scrolling Regions FIG. 268 Create Sub-Page Set dialog 3. Enter a Set Name (in this example, "Sub-Page Set 1"). 4. Click OK to save the new Sub-Page Set and close the Create Sub-Page Set dialog. 5. The new Sub-Page Set is indicated in the Sub-Page Sets list in the Edit Sub-Page Sets dialog (FIG. 269): FIG. 269 Edit Sub-Page Sets dialog 6. Select a Sub-Page in the Sub-Pages list (on the right side of the dialog), and click Add to add each SubPage to Sub-Page Set 1 (FIG. 270). FIG.
PAGE 225
Scrolling Regions FIG. 271 Edit Sub-Page Sets dialog - "Sub-Page A" - "Sub-Page E" added to "Sub-Page Set 1" The Sub-Pages will be displayed in the order that they are listed. Use the Move Up and Move Down buttons to set the order as necessary. 7. Click Close to save your changes and close the Edit Sub-Page Sets dialog.
PAGE 226
Scrolling Regions Step 4 - Assign the Sub-Page Set to the Sub-Page View Button The Sub-Page Set that was defined in Step 2 must now be assigned to the Sub-Page View button: 1. In the Design View, select the Sub-Page View button. 2. In the General tab of the Properties window, select "Sub-Page Set 1" from the Sub-Page Set drop-down menu (FIG. 274). FIG. 274 Assign "Sub-Page Set 1" to the Sub-Page View button 3.
PAGE 227
Scrolling Regions For Vertical orientation: Top: First Sub-Page is displayed aligned to the top of the button. Center: The middle Sub-Page is displayed positioned in the center of the button (default setting). Bottom: Last Sub-Page is displayed aligned to the bottom of the button. Wrap Sub-Pages - This setting specifies wether or not the Sub-Pages displayed within a scrolling region will wrap on a full scroll (Yes/No, default = No).
PAGE 228
Scrolling Regions 194 TPDesign4 (v3.
PAGE 229
List Box Buttons List Box Buttons Overview TPD4 supports adding "List Box" buttons to projects created from panel types that support List Box buttons. The List Box button is a special-purpose button type for G4 devices/panels which utilizes a collection of subordinate buttons to display either dynamic or static data as a scrollable list (referred to as a “list box view”). List box buttons can be used to allow the end-user to view data in list form, and make selections from the list.
PAGE 230
List Box Buttons The use of Unmanaged mode is typically limited to special circumstances where moving or modifying individual subordinate buttons is absolutely necessary, and should be considered an advanced mode for seasoned programmers only. Using the Drawing Tools Toolbar With List Box Buttons When the List Box Draw Tool is selected, the Drawing Tools toolbar can be used to set the border, fill and text color for the List Box button's subordinate buttons, at the time that the button is created.
PAGE 231
List Box Buttons Use the corner resize handles to do a combination what the center handles do by resizing one of the corners.  If the List Preferred Row is set to a non-zero value (i.e. 1), up to the number of rows present in the list box, resizing maintains the size ratio of the preferred row vs. the other rows. When a List Box Column is selected, only the right center handle is enabled for resizing (FIG. 279): FIG.
PAGE 232
List Box Buttons Creating List Box Buttons (Managed Mode) By default, List Box buttons are in managed mode when first created. To create a list box button: 1. Select the List Box Draw Tool from the Selection/Drawing Tools toolbar (FIG. 280): FIG. 280 List Box Draw Tool (Selection/Drawing Tools toolbar) Use the List Box Button draw tool to draw list box buttons on the design view as you would any other button type. 2.
PAGE 233
List Box Buttons FIG. 283 Added Columns and Rows When the List Box Draw Tool is selected, the Drawing Tools toolbar can be used to set the border type, font, border color, fill color and text color for the on and off states of the subordinate buttons, when the List Box Button is created. Adding Rows and Columns to a List Box (Managed Mode) Adding Rows: 1. Select a List Box button in the Diagram Area (FIG. 284). FIG. 284 List Box button selected 2. Click the Add Row toolbar button.
PAGE 234
List Box Buttons Adding Columns: 1. Select a List Box button in the Diagram Area (FIG. 286). FIG. 286 List Box button selected 2. Click the Add Column toolbar button. This function adds a column to the right-hand side of the list box container (FIG. 287). FIG. 287 Column Added The width of the last column is used for the new column. If a column is selected, the new column will have the same width as the selected column.
PAGE 235
List Box Buttons When one or more of the subordinate buttons are also selected, these features are no longer available. TPD4 takes care of copying, pasting and deleting all the subordinate buttons for you. All you have to do is select the container. TPD4 does not support copying and/or pasting individual columns of a managed list box. Unmanaged Mode List Box Buttons: Unmanaged Mode When a List Box button is created, it always defaults to Managed mode.
PAGE 236
List Box Buttons Creating List Box Buttons (Unmanaged Mode) By default, List Box buttons are in managed mode when first created. To create a list box button: 1. Select the List Box Draw Tool from the Selection/Drawing Tools toolbar: Use the List Box Button draw tool to draw list box buttons on the design view as you would any other button type. 2. Create a list box button by right clicking on the view and dragging the mouse. This will create a list box button with one subordinate button (FIG.
PAGE 237
List Box Buttons Rows can not be removed nor added. Columns can not be removed nor added. If the user tries to delete one or more list box child buttons, a message box is given stating the reason it can not be deleted. Changing Z-Order of an unmanaged list box Parent/Child is not available. When changing the Z-Order of a non-list box button, the Z-Order can only be placed in front of or behind the entire list box collection.
PAGE 238
List Box Buttons FIG. 291 List Box Button - Container Selected Setting List Box Container Button Properties Once you have created a List Box button, you can use the General, Programming, States tabs of the Properties window to set/edit button properties for the container button. 1. Select the Container to set button properties for the entire button (affecting all subordinate buttons within the container). Click on the outside edge of the List Box button to select the Container.
PAGE 239
List Box Buttons List Box Container Properties vs. Column Properties (Managed Mode) In Managed mode, properties are split into two perspectives: 1. The List Box button that contains all the subordinate buttons (called the List Box Container button) presents properties that deal with the list box as a whole. These properties are viewed by selecting the list box container (FIG. 293): FIG. 293 List Box Button - Container Selected 2. The other perspective is based on columns of the list box.
PAGE 240
List Box Buttons List Table Port List Table Address Column Display Order Column Sort Order List Table Wrap List Row List Column List Row Height List Preferred Row List Preferred Row Height List Column Padding List Row Padding List Offset Enabled List Managed Setting Programming Properties: List Box Container Buttons Once you have created a List Box button, you can use the Programming tab of the Properties window to set/edit programming-oriented button properties.
PAGE 241
List Box Buttons The cells inside the Container are Subordinate buttons. Select a column to set properties for the selected column of Subordinate buttons. FIG. 295 List Box Button Column If you select a List Box Button column, additional state properties are supported.
PAGE 242
List Box Buttons FIG. 296 List Box Button Columns (example) List Box Buttons - Columns In Managed mode, TPD4 treats a List Box button as a Container for the subordinate buttons that constitute the columns and/or rows of the List Box button. You can select individual columns within the Container button to set button properties at the column level. Alternatively, select the Container to set button properties for the Container List Box button, affecting all subordinate buttons within the container (FIG.
PAGE 243
List Box Buttons Setting List Box Button Column Properties Once you have created a List Box button, you can use the General, Programming, States tabs of the Properties window to set/edit button properties for a selected column (within the List Box button container). Properties applied to a column will affect all buttons in that column. List Box buttons consist of a container and subordinate buttons that are created with Columns and Rows.
PAGE 244
List Box Buttons Setting State Properties: List Box Button Columns By selecting a column within a List Box button, you can use the State tab of the Properties window to set/edit state-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.
PAGE 245
List Box Buttons List Box Buttons - Navigation Buttons General buttons can be used to provide a means for the user to control a List Box button. These buttons are referred to as List Box Navigation buttons. Here are the actions that a list box navigation button can perform (selectable via the Channel Code property). Up - Move list up one entry. Down - Move list down one entry. Page Up - Move list up one page. Page Down - Move list down one page. Home - Move list to top of page.
PAGE 246
List Box Buttons Creating List Box Navigation Buttons To create a list box navigation button: 1. Add a general button to the page and set the Channel Port to the List Box and set the Channel Code to the desired function. For example, the three large cyan button in the figure above could be used to sort columns of the list box. 2.
PAGE 247
List Box Buttons FIG. 301 List Box Navigation Scroll Bar (slider property indicates slider position) Both state fill colors for On and Off are set to white. Again, the user can drag the bargraph at runtime to scroll the list. These bargraphs depict position only. The size of the list is not represented. Creating a List Box Feedback Scroll Bar The yellow button in the figure below serves as visual feedback to indicate the list size and position. It does not have any navigation capability (FIG.
PAGE 248
List Box Buttons Scroll bar components The figure below (FIG. 303) shows that the yellow bargraph is actually made up of 3 bargraph buttons labeled bg1, bg2 and bg3: FIG. 303 List Box Buttons - Scroll bar components Buttons bg1 and bg2 are called Mask buttons. They mask portions of button bg3 to visually indicate slider position and size.
PAGE 249
List Box Buttons TPD4 displays these list values regardless of the panel type. However, TPD4 will save the "List" or "Selection" version of "Up, Down,..." automatically, based on whether the PPF says the panel type supports "Selection" (i.e. a panel without a touch overlay, such as the MAX AVP). List Data Tables TPD4 supports the ability to create, edit and delete List Data Tables in support of List Box buttons. List Data Tables provide the information that is displayed on List Box Buttons.
PAGE 250
List Box Buttons Changing Port and Address Assignments for a List Data Table 1. Open the Edit List Tables dialog (Panel > Edit List Tables, or click the toolbar button). FIG. 304 Edit List Tables dialog 2. Select a List Data Table (in the Tables list). 3. Click the Port/Addr command button (FIG. 305). FIG. 305 Edit List Tables dialog - Port/Addr command button This opens the Change/Port Addr dialog, showing the current Port/Address assignments for the selected table (FIG. 306). 216 TPDesign4 (v3.
PAGE 251
List Box Buttons FIG. 306 Change Port Address dialog 4. Enter the new Port and Address assignments for this List Data Table in the Table Port and Table Address fields at the bottom of this dialog. 5. Click OK to save the changes and close this dialog. You can use the Power Assign feature in the Edit List Tables dialog to quickly assign Port and Channel information for multiple columns in the List Data Table, via the List Table Power Assign dialog.
PAGE 252
List Box Buttons Working With Static List Box Data Creating a Static List Data Table To create a Static List Data Table and associate it to a List Box Button, so that the data in the List Data Table is displayed in the List Box button: 1. If you haven't already done so, create a new List Box button, with enough rows and columns to accommodate the data that you will enter into the List Data Table. 2. Select Panel > Edit List Tables (or click the toolbar button) to open the Edit List Tables dialog. 3.
PAGE 253
List Box Buttons If the column is of the type "Bitmap", you will be able to select a bitmap that has already been defined in the project. If the column is of the type "Icon", you will be able to select an icon that has already been defined in the project. 8. Now you will attach the List Data Table to a List Box Button - see Attaching a Static List Data Table to a List Box Button for details.
PAGE 254
List Box Buttons Working With Dynamic List Box Data List Box Commands There are two types of List Box Commands that can be used to define List Box Data in your NetLinx Code: Data List Commands Command Structure List View Commands Data List Commands Data List Commands ^LDN Creates a new data list. Unique list addresses and names are handled programmatically.
PAGE 255
List Box Buttons Data List Commands (Cont.) ^LDR Removes a row from an existing data list Syntax: "'^LDR-,,'" Variables: • list address = address where data resides • uniflag = indicates UniCode; 0 - No UniCode, 1 - Uses UniCode • primary data = the "key" data column. The information in this column provides each row with its uniqueness. Example: SEND_COMMAND Keypad, "'^LDR-1,0,Entry5'" Removes the text row Entry5 from an existing data list at address 1.
PAGE 256
List Box Buttons Data List Commands (Cont.) ^LDL Modifies the data in a single column field. This can be used to load a data list that has long text fields. Syntax: "'^LDL-,,,,'" • Variables: • list address = address where data resides • column = the starting column number; numbering starts at 1 • uniflag = indicates UniCode; 0 - No UniCode, 1 - Uses UniCode • primary data = the "key" data column.
PAGE 257
List Box Buttons Command Structure List View Commands Command Structure List Commands ^LVO Syntax: "'^LVO-,'" Variables: • view address = the address of the view definition • sort: Bit 0x0001 - Sort Bit 0x0002 - Reverse Bit 0x0040 - Filter Reverse bit (0x0002) reverses the list from whatever order it is currently in. When used on a sorted list, it results in a reverse sort. When used on a reverse sorted list, it results in a forward sorted list.
PAGE 258
List Box Buttons Command Structure List Commands (Cont.) ^LVM Move; display a new position. Syntax: "'^LVM-,'" Variables: • view address = the address of the view definition • offset = + / - numeric display shift Example: SEND_COMMAND Keypad, "'^LVM-2,-4'" Shifts the display -4 and displays the list according to the view definitions located at address 2. ^LVS Sort; sets column order for sorting. Update must be called for changes to take effect.
PAGE 259
List Box Buttons Command Structure List Commands (Cont.) ^LVU Update; this will update the view to any sort, filter, or list data changes. Syntax: "'^LVU-'" Variables: • view address = the address of the view definition Example: SEND_COMMAND Keypad, "'LVU-3'" Updates the data list and displays it according to the view definitions located at address 3. Note: This must be called after changes to list data.
PAGE 260
List Box Buttons //Updates the view at address 2 SEND_COMMAND Keypad, "' ^LVU-2'" } } //Sort the list by title instead of Track number BUTTON_EVENT[Keypad,6] { PUSH: { //Set the sort order for view address 2. The 1 indicates forward sort.
PAGE 261
List Box Buttons Attaching a Dynamic List Data Table to a List Box Button Once you have created a List Box Button, and defined List Data in your NetLinx Code (with Data List Commands), you are ready to associate the List Data Table to the List Box Button. It is this association that allows the data in the List Data to be displayed on the List Box Button. 1. In the Design View window, select the List Box Button that you want to associate with a List Data Table. 2.
PAGE 262
List Box Buttons Step 3 - Set the Properties of the Elements In Your List Box The important thing to pay attention to is the “List Row Height”, and the width of the first element if you plan on displaying multiple rows and columns. The R4 display is 320 x 240. When designing the list box you must decide how many rows to display, and calculate what height is appropriate, for that number of rows. Example: If you want to display 5 rows at a time, you can have the height of each row at a maximum of 64.
PAGE 263
List Box Buttons Step 5 - Create a List Table Now it's time to create a List Table. A List Table contains the static data that will populate the list box (FIG. 311). FIG. 311 Panel > Edit List Tables & Edit List Tables dialog Step 6 - Provide a name for the Table 1. Set the number of columns (2 is the default, as column 1 is required and list the row #). 2. Set the number of rows. 3. Give the List Table a port # and address #.
PAGE 264
List Box Buttons FIG. 312 Create New Table dialog Step 7 - Set the Properties Of Each Column In the List Table. There can be multiple columns set to type “Text”, but there can only be one of each of the other 4 types: Bitmap, Icon Slot, Channel Code, Page Flip (FIG. 313). FIG. 313 Column Types dialog 230 TPDesign4 (v3.
PAGE 265
List Box Buttons Step 8 - Link the List Table to the List Box Once the List Table is finished, the final step is to link the List Table to the list box. 1. Set the “List Table Port” and “List Table Address” to the port/address of the List Table that was created in Step 6. 2. Set the “Column Display Order”. This tells the list box what columns need to be displayed and in what order.
PAGE 266
List Box Buttons 232 TPDesign4 (v3.
PAGE 267
Working With Properties Working With Properties Overview The Properties Window is typically located on the right side of the screen (although you may move it anywhere you like) and is used to view/edit page, 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 window. The Properties Window contains three tabs: General, Programming and States (FIG. 315). FIG.
PAGE 268
Working With Properties Grabbing Properties (via the Grab Properties Tool) Use the Grab Properties function to copy a specific set of properties from a selected design element (Button, Page or Popup Page). Once a property set has been Grabbed, it can be applied (Painted) to another design element in the project. This technique can save time as well as promote consistency in the TPDesign4 project. 1.
PAGE 269
Working With Properties Painting Properties (via the Paint Properties Tool) 1. With a Property Set selected in the Property Painter dialog (see the Grabbing Properties (via the Grab Properties Tool) section on page 234), select Paint Properties Tool from the Edit menu, the Design View context menu, or click the toolbar button (see FIG. 316 on page 233) to activate the Paint Properties tool. Note that the cursor icon changes to reflect this tool selection (FIG. 321). FIG. 319 Paint Properties Tool 2.
PAGE 270
Working With Properties Using the Prev and Next Buttons The Prev and Next buttons, located at the bottom of the Properties window (next to the Apply to All button) are activated only when more than one button is selected on a page, and the Apply To All button 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 (FIG. 322). FIG.
PAGE 271
Working With Properties 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.
PAGE 272
Working With Properties 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.
PAGE 273
Working With Properties General Properties (Cont.) Anchor Position Select an Anchor Position option to determine how the Sub-Pages are initially displayed and justified within the Sub-Page View button. Note: This property applies only to Sub-Page View buttons. See the Sub-Page View Buttons section on page 157 for details.
PAGE 274
Working With Properties General Properties (Cont.) Animate Time Up The time intervals between states as the button animates from the Off to the On state. This value is in 1/100th second increments (default = 2). Note: This property is available for Multi-State General buttons only. See the Animation Effects section on page 315 for details. Auto-Repeat Select wether to apply auto-repeat to the button. Auto-repeat causes the button to constantly cycle through its states (Yes/No, default = No).
PAGE 275
Working With Properties General Properties (Cont.) Column Sort Order Specifies the column sort order for the list table data before populating the list box control. The value is a space delimited string of integers representing columns in the List Data Table. One or more columns can be specified. For example, if the user wishes to sort the table based on column 1, the value would be "1".
PAGE 276
Working With Properties General Properties (Cont.) Group Use this field to add the selected Popup Page to a specific Popup Page Group. Note: This property is available for Standard Popup Pages only. • To add a group, 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. • Click the browse (...
PAGE 277
Working With Properties General Properties (Cont.) Input Mask This field allows you apply a mask to user input on the panel. Note: This button property is available for Text Input buttons only. An input mask allows you to force the user to enter the correct type of characters (numbers vs.
PAGE 278
Working With Properties General Properties (Cont.) List Table Port An integer value representing the port of the List Data Table that the List Box button is attached to. Note: This button property is available for List Box buttons only. There are two ways to define this property: • One is to edit the property directly by typing the Table Port number of a data table (static or dynamic).
PAGE 279
Working With Properties General Properties (Cont.) List Offset Enabled A flag (yes/no) indicating whether an offset of five pixels is applied to the List Box Container all the way around the subordinate buttons of the list box (default = on). It is used so that the List Box Container can be selected via the Design View. When set to no, the subordinate buttons will completely cover the list box container (unless List Row Padding and/or List Column Padding is set to a value greater than 0).
PAGE 280
Working With Properties General Properties (Cont.) List Row Height An integer value indicating the height (in pixels) of all the rows in the list box (i.e. the height of all the buttons) excluding the preferred row. Note: This button property is available for List Box buttons in Managed Mode only. See the List Box Buttons section on page 195 for details. List Row Padding An integer value indicating the number of pixels between rows of buttons. This button property is available for List Box buttons only.
PAGE 281
Working With Properties General Properties (Cont.) Override Global Settings This option (Yes/No) determines if the button (or Gesture) performs the global action defined for the button, or if its behavior is specific to this page. If set to Yes, the remainder of the external buttons (or Gesture) properties will indicate their global values as read-only (default = No). Note: This option is only available when editing Page-Specific properties for an External Control or Gesture.
PAGE 282
Working With Properties General Properties (Cont.) Reset Pos. On Show If this option is turned on, the popup page will always appear at the position established during popup page design each time it is displayed. This might be desirable if the popup page contains a button which provides the end user with the ability to move the popup page at will. Note: This property is available for Popup Pages only.
PAGE 283
Working With Properties General Properties (Cont.) Show Effect This property allows you to apply a transition effect to the popup page, to be invoked when the popup is opened (shown). Note: This property is available for Popup Pages only. Show Effect Time This property allows you to specify the total amount of time it will take to execute the Fade Hide effect, measured in 1/10th-second increments. Use this option to synchronize your popup page transition effects.
PAGE 284
Working With Properties General Properties (Cont.) State Count This field indicates the number of states currently associated with the selected button. Note: This property is available for Multi-State (General and Bargraph) buttons only. To change the state count for the selected button, click inside the text field and enter the desired number. • If the state count is increased, new states are added to the end of the set as a duplicate of the last existing state.
PAGE 285
Working With Properties General Properties (Cont.) 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.
PAGE 286
Working With Properties General Properties (Cont.) Wrap Sub-Pages This setting specifies wether or not the Sub-Pages displayed within a Scrolling Region will wrap on a full scroll (Yes/No, default = No). Note: This property applies only to Sub-Page View buttons. See the Sub-Page View Buttons section on page 157 for details.
PAGE 287
Working With Properties Input Mask Ranges 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.
PAGE 288
Working With Properties Programming Properties The following table describes all Programming Properties, accessible in the Programming tab of the Properties window: Programming Properties Address Code Select or enter the address code sent to the master on the selected port. Note: The combination of Address Port and Address Code must be unique. • The Address Port and Code assignments for Sub-Pages are provided only for use in SEND-COMMANDS (not to trigger actions).
PAGE 289
Working With Properties Programming Properties (Cont.) 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). Command Port Select or enter the port to which the command string output will be applied. Feedback Select the type of feedback to associate with this button (channel, inverted channel, always on, momentary, blink, or none).
PAGE 290
Working With Properties Programming Properties (Cont.) 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 Level Control 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.
PAGE 291
Working With Properties Programming Properties (Cont.) Range Time Up Specify the amount of time (in 1/10th seconds) it will take for the bargraph to go from the bottom to the top of the specified range (default = 2). This button property is available for General buttons, if a Level Control Type (other than "none") has been selected. This button property is available for Bargraph and Multi-State Bargraph buttons, and only if one of a specific set of Level Functions was selected.
PAGE 292
Working With Properties These address code options are separated into two main categories: Basic and Advanced, and the options available depend on what type of element is selected (page, popup page or button). Furthermore, different button types support different address codes. By default, the Address Codes item in the Programming tab displays the Basic Address Codes. To switch the view to Advanced Address Codes, click on Advanced Codes at the bottom of the code list window.
PAGE 293
Working With Properties Basic Address Codes (Cont.
PAGE 294
Working With Properties Creating a Date Button A Date Button is a button that displays the current date on the panel. It is a read-only (non-interactive) 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 (FIG. 327). FIG.
PAGE 295
Working With Properties FIG. 329 Address Code = Date Display drop-down menu 6. Select the desired display format (Weekday, dd/mm/ yyyy, yyyy-mm-dd, etc). Time and Date buttons do not display any text when viewed in TPD4. The time or date is only visible once the project is loaded on a touch panel. Creating an Intercom Button An Intercom Button is a button that displays intercom functionality on the panel. It is a read-only (noninteractive) button. To create an intercom button: 1. Create a new button.
PAGE 296
Working With Properties FIG. 331 Programming tab - Address Code drop-down menu 5. Click the plus (+) symbol next to Intercom to expose a drop-down menu of intercom functions to choose from (FIG. 332). FIG. 332 Address Code = Intercom drop-down menu 6. Select the desired function (Background, Header, Mic Background, etc). Creating a Time Button A Time Button is a button that displays the current time on the panel. It is a read-only (non-interactive) button. To create a time button: 1.
PAGE 297
Working With Properties FIG. 333 Programming tab - Address Port = "0 - Setup Port" 4. Click the Address Code field to enable the drop-down menu (none, Date Display, Intercom, Time Display): FIG. 334 Programming tab - Address Code drop-down menu 5. Click the plus (+) symbol next to Time Display to expose a drop-down menu of time display formats to choose from (FIG. 335). FIG. 335 Address Code = Date Display drop-down menu 6. Select the desired display format (24-hour, Standard or Standard AM/PM).
PAGE 298
Working With Properties Time and Date buttons do not display any text when viewed in TPD4. The time or date is only visible once the project is loaded on a touch panel. Advanced Address Codes With the Address Port property set to 0 - setup port (in the Programming tab of the Properties window), several Advanced Address Codes options are available via the Advanced Codes option (click the + sign to expand each category): FIG.
PAGE 299
Working With Properties Advanced Address Codes (Cont.) G4 WebControl With Address Port set to 0 - setup port (Programming tab of the Properties window), the following G4 WebControl options are available (under Advanced address codes). Use these options to create buttons that allow you to view/edit the following G4 WebControl configuration settings, directly from the panel: • Display Number Current Connections: Displays the current number of users connected to the target panel via the web.
PAGE 300
Working With Properties Advanced Address Codes (Cont.) Panel ID With Address Port set to 0 - setup port (Programming tab of the Properties window), several Panel ID options are available (under Advanced address codes). Use these options to create buttons that allow you to view/edit the following identification criteria for the panel, directly from the panel: • • • • • • • • • • • Panel Info DHCP / Static: Displays the mode of addressing used by this panel (DHCP or Static).
PAGE 301
Working With Properties Advanced Address Codes (Cont.) Panel Info (Cont.) • Panel Type: Displays the model of the panel being used. • Purchase Order: Displays the purchase order information associated with the project. • RAM: Displays the available RAM (or Extended Memory module) on the panel. • Revision Date: Displays the last revision date for the project. • Sales Order: Displays the sales order information associated with the project. • Serial Number: Displays the serial number assigned to the panel.
PAGE 302
Working With Properties Advanced Address Codes (Cont.) Primary Network Interface With Address Port set to 0 - setup port (in the Programming tab of the Properties window), several Primary Network Interface options are available (as Advanced address codes). Use these options to create buttons that allow you to view the following Primary Network Interface information, directly from the panel: • • • • • • DHCP/Static: Displays the panels’ current communication mode (DHCP or Static).
PAGE 303
Working With Properties Advanced Address Codes (Cont.) Secondary Network Interface With Address Port set to 0 - setup port (in the Programming tab of the Properties window), several Secondary Network Interface options are available (as Advanced address codes).
PAGE 304
Working With Properties Advanced Address Codes (Cont.) TakeNote With Address Port set to 0 - setup port (in the Programming tab of the Properties window), several TakeNote options are available (as Advanced address codes). Use these options to create buttons that allow you to adjust the following options for TakeNote annotations, directly from the panel. • Font Size: Sets the size of the font used by the text tool in TakeNote.
PAGE 305
Working With Properties Channel Codes When a button, page or popup page's Channel Port is set to 0 - setup port, then various channel code options are made available. Click the down arrow next to Channel Codes in the Programming tab of the Properties window to view the channel code options (FIG. 337). Basic Channel Codes view Advanced Channel Codes view FIG.
PAGE 306
Working With Properties NXP-PLV Reserved Channel Codes (1-7) The NXP-PLV will define a set of Channel codes (1-7) and Level codes (1-11) on Port 1 that are reserved for hardware functionality. These codes are considered reserved for the device and cannot be re-assigned to other pages or buttons in the panel project.
PAGE 307
Working With Properties Basic Channel Codes With the Channel Port property set to 0 - setup port (in the Programming tab of the Properties window), several Basic Channel Codes options are available (click the + sign to expand each category): Basic Channel Codes Page Flip With Channel Port set to 0 - setup port (in the Programming tab of the Properties window), the following Page Flip options are available (as Basic channel codes): • • • • • • • Panel Setup Calibrate: Creates a page flip to the Calibrati
PAGE 308
Working With Properties Advanced Channel Codes With the Channel Port property set to 0 - setup port (in the Programming tab of the Properties window), several Advanced Channel Codes options are available via the Advanced Codes option (click the + sign to expand each category): FIG. 338 Properties window (Programming tab) - Advanced Channel Codes Advanced Channel Codes Battery Base Setup These functions are intended for internal use only, no custom settings are required.
PAGE 309
Working With Properties Advanced Channel Codes (Cont.) Computer Control (Cont.) • Password Entry: Brings up keyboard for entry of the target PC’s Computer Control password. • Port Entry: Brings up keyboard for entry of the target PC’s Computer Control port (typically 5900). • Right Mouse Button: Sets mouse mode to right mouse button such that any subsequent touches are translated to right mouse clicks. Clears any previously set mouse mode. • Scroll Down: Scrolls the Computer Control view down.
PAGE 310
Working With Properties Advanced Channel Codes (Cont.) Panel ID With Channel Port set to 0 - setup port (in the Programming tab of the Properties window), several Panel ID options are available (as Advanced channel codes). Use these options to create buttons that allow you to view/edit the following identification criteria for the panel, directly from the panel: • DHCP / Static: Displays the mode of addressing used by this panel (DHCP or Static).
PAGE 311
Working With Properties Advanced Channel Codes (Cont.) Primary Network Interface With Channel Port set to 0 - setup port (in the Programming tab of the Properties window), several Primary Network Interface options are available (as Advanced channel codes). Use these options to create buttons that allow you to view the following Primary Network Interface information, directly from the panel: • • • • • • • DHCP/Static: Displays the panels’ current communication mode (DHCP or Static).
PAGE 312
Working With Properties Advanced Channel Codes (Cont.) Secondary Network Interface With Channel Port set to 0 - setup port (in the Programming tab of the Properties window), several Secondary Network Interface options are available (as Advanced channel codes).
PAGE 313
Working With Properties Advanced Channel Codes (Cont.
PAGE 314
Working With Properties Level Codes If the Level Control Type is set to either Relative or Absolute (in the Programming tab of the Properties window), then the Level Port and Level Code fields are enabled (FIG. 339). FIG. 339 Properties window (Programming tab) - Level Control Type When a button, page or popup page's Level Port is set to 0 - setup port, then various level code options are made available.
PAGE 315
Working With Properties NXP-PLV Reserved Level Codes (1-11) The NXP-PLV will define a set of Channel codes (1-7) and Level codes (1-11) on Port 1 that are reserved for hardware functionality. These codes are considered reserved for the device and cannot be re-assigned to other pages or buttons in the panel project.
PAGE 316
Working With Properties Basic Level Codes Panel Setup With Level Port set to 0 - setup port (in the Programming tab of the Properties window), the following Panel Setup options are available (as Basic level codes): • • • • • Time Level With Level Port set to 0 - setup port (in the Programming tab of the Properties window), the following Time Level options are available (as Basic level codes): • • • • • 282 Brightness Internal Volume Line In Volume Master Volume Mic Output Volume Day Hour Minute Mont
PAGE 317
Working With Properties Advanced Level Codes With the Level Port property set to 0 - setup port (in the Programming tab of the Properties window), several Advanced Level Codes options are available via the Advanced Codes option (click the + sign to expand each category): FIG.
PAGE 318
Working With Properties Level Control Parameters The Level Control Type options (set in the Programming tab of the Properties Control Window) allow General and Multi-State General buttons to directly control a level without the need for NetLinx code. 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.
PAGE 319
Working With Properties State Properties The following table describes all State Properties, accessible in the States tab of the Properties window: State Properties 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.
PAGE 320
Working With Properties State Properties (Cont.) Draw Order This field allows you to specify the order in which the elements of a button, page or popup page are drawn. • By default, the draw order is: 1) fill, 2) bitmap,3) icon, 4) text, 5) border. • Click the browse button (...) to access the State Draw Order dialog to change the draw order. Note: For List Box buttons, this property applies to all the buttons in the selected column (see the List Box Buttons section on page 195 for details).
PAGE 321
Working With Properties State Properties (Cont.) Icon Y Offset To apply an X and/or Y offset to the icon (on the selected state(s)), enter the value for the desired offset (in pixels) in these text fields. Alternatively, you can click the browse button (...) to open the Image/Text Positioning dialog where you can make several alignment adjustments to the bitmap, icon and text elements of the button.
PAGE 322
Working With Properties State Properties (Cont.) Scale Bitmap To Fit Available only if the Bitmap selected for this button/state is a dynamic image. The options available for Scale Bitmap To Fit depend on the panel type associated with your project: • No - The Dynamo Resource image will not be scaled at all, and the image will be arbitrarily centered on the container button, popup or page. If the Dynamo Resource image is larger than it’s container, the image will be cropped on all sides by equal amounts.
PAGE 323
Working With Properties State Properties (Cont.) Sub-Page Layout Color This property is available only for Sub-Page View buttons. It provides the ability to change the color of the Sub-Page placeholders for Sub-Page View buttons in the Design View. Use this feature in situations where the Sub-Page View button uses a fill color or bitmap that provides too little contrast to make the Sub-Page placeholders readily visible on-screen.
PAGE 324
Working With Properties State Properties (Cont.) Text Effect Text effects are graphic effects that can applied to button/page/popup text (for example, the Glow effect applies a neon glow or halo effect to the text on the selected button/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.
PAGE 325
Working With Properties State Properties (Cont.) Video Fill This option is only available for video-capable panels). Click the down arrow to select from a drop-down list of video formats that are supported by the touch panel specified in your project. Note: Video-capable Modero panels support Composite video, and Enhanced Modero panels support Composite, Component/RGB and Streaming video formats.
PAGE 326
Working With Properties True Type Font Support Since G4 panels have the ability to decode and display Windows True Type Font files (TTF), TPD4 directly utilizes TTF files. Fonts are presented in the Properties 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.
PAGE 327
Working With States Working With States Overview All G4 panel entities (Pages, popup pages and buttons) have at least one state. Pages, Standard Popup Pages and Sub-Pages have only one state. General, Bargraph and Text Input buttons have only two states (on/off). Joystick, Computer Control, TakeNote and Sub-Page View buttons only use one state (Off). Multi-State General and Multi-State Bargraph buttons can have up to 256 states. States start at 1.
PAGE 328
Working With States Adding States To a Multi-State Button There are several ways in which new states can be added to a multi-state button: Add States The Add States option provides a method of adding states to a multi-state button by duplicating an existing state a specified number of times: To add States to a Multi-State button, via the Add States dialog: 1. Select a Multi-State Button in the Design View. 2. Select a State in the State Manager window. 3.
PAGE 329
Working With States Copying/Pasting States States may be copied and pasted via clipboard memory: 1. Select the button from which the states will be copied. 2. In the State Manager window, select one or more states. Hold down the Ctrl key while left-clicking to add states to the selection. Left-click + Shift to select a range of states. 3.
PAGE 330
Working With States FIG. 347 State Manager Window - Replacing a State (dragging between two State Previews) Replacing States There are two ways to replace states in a multi-state button: Replacing States From the Clipboard 1. Select a multi-state button in the Design View. 2. In the State Manager window, select the source state(s). 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. 3.
PAGE 331
Working With States Setting State Properties The ability to set the State Properties (including border name, border color, fill color, text color, video fill, bitmap, bitmap justification, icon assignment, icon justification, font, text, text justification, word wrap preference and sound) is provided at the state level, via the Properties Window - States Tab.
PAGE 332
Working With States Reordering States On A Button Changing the order of states in a Multi-State General or Multi-State Bargraph button can be accomplished either through the clipboard or by drag-and-drop: Reordering States Through the Clipboard 1. In the State Manager window, select the states to be moved. Ctrl + click to select multiple states individually. Shift + click to select a range of states. 2. Cut the selected states to the clipboard (Ctrl-X). 3.
PAGE 333
Working With States FIG. 348 Example button with default state draw order FIG. 349 Example button with altered state draw order Changing the State Draw Order for Selected States Use the State Draw Order dialog to specify the draw order for selected states: 1. Select a button, page or popup page. 2. Click the Browse button (...) in the Draw Order State property to access the State Draw Order dialog (FIG. 350). FIG. 350 Draw Order State Property & State Draw Order dialog 3.
PAGE 334
Working With States 300 TPDesign4 (v3.
PAGE 335
Working With Function Codes Working With Function Codes Overview In terms of designing buttons that interact with and control the various devices on the control system, TPD4 uses Function Codes. In TPD4, the term Function Codes refers to all three of the code types that can be assigned to buttons: Channel Codes: Displayed in the upper-left corner of the button, the channel codes indicate the port number and the channel code associated with the button.
PAGE 336
Working With Function Codes Function Code Map Click the Function Maps tab (at the bottom of the Workspace window) to view the Function Code Map (FIG. 352). FIG. 352 Workspace Window - Function Maps tab 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. This list is sorted by Port, and within Port by Code.
PAGE 337
Working With Function Codes 0- setup port Setting the Address, Channel or Level Port to the setup port ("0") provides a list of predefined actions in the corresponding Code field (FIG. 353): Address Port set to "0 - setup port" Actions available for Address Port "0 - setup port) Click to access the Advanced Codes for this port FIG. 353 Address Port set to "0 - setup port" Some of the actions may be hardware dependent. Therefore, ensure that the codes selected apply to your particular panel type.
PAGE 338
Working With Function Codes Using Power Assign One of the big time-eating factors of creating a touch panel file is correctly setting up the channel, address and level function 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.
PAGE 339
Working With Function Codes Power Assign Dialog Options (Cont.) Function Code Assignment Options Begin Assignment At: Sets the button group's starting device and channel codes (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).
PAGE 340
Working With Function Codes FIG. 357 Power Assign dialog - Function Code Action set to Clear (Channels) 4. Under Function Code Type, select Channel. 5. Click Assign. FIG. 358 shows the same group of buttons, with their Channel Codes cleared: FIG. 358 Group of buttons in the Design View window - Channel Codes cleared 6. Repeat this process for Address and Level codes.
PAGE 341
Working With Function Codes Step Two - Assign Codes Next assign new function codes: 1. Select one or buttons in the Design View window 2. Under Function Code Action, select Assign. 3. Under Function Code Type, select Channel. 4. Select one or more Function Code Assignment options. These options are described in the Function Code Assignment Options section below. 5. Click Assign. 6. Repeat this process for Address and Level codes.
PAGE 342
Working With Function Codes FIG. 361 Power Assign dialog - Ensure Contiguous Code Assignment option selected Code Assignments - Wrap Within Port ID Select Wrap Within Port ID (under Code Assignments) to assign all codes within a single port (FIG. 362): FIG. 362 Power Assign dialog - Wrap Within Port ID option selected Since touch panels support more than one port, you're not limited to 256 channel and address codes.
PAGE 343
Working With Colors and Palettes Working With Colors and Palettes Overview A key feature of TPD4 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 that can be applied to fills (pages, popup pages, and buttons), transparencies (popup pages and buttons), and text (pages, popup pages and buttons).
PAGE 344
Working With Colors and Palettes 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 (FIG. 365): FIG. 365 Colors dialog - Palette Index 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.
PAGE 345
Working With Colors and Palettes Working With Palettes TPD4 supports creating and saving multiple custom color palettes within a project. Use the options in the Edit Palettes dialog to create and save custom palettes. Custom Palettes can be saved as *.PAL files, which can then be imported/exported for use in other TPD4 projects.
PAGE 346
Working With Colors and Palettes 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.
PAGE 347
Working With Colors and Palettes Exporting Palette (*.PAL) Files 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.
PAGE 348
Working With Colors and Palettes Check the documentation for your image-editing program to learn about applying transparency to your images. 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.
PAGE 349
Animation Effects Animation Effects Overview TPD4 utilizes three main concepts for supporting animation effects in your projects: Animation Wizard Tweening Chameleon Images Animation Wizard The Animation Wizard is a powerful tool included with TPD4. It guides you through the steps of generating an animation sequence that can be applied to a multi-state button to apply impressive visual effects to your buttons.
PAGE 350
Animation Effects 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. The Sequence selection is set to "[custom]" by default, and there are no other options in this dropdown list until at least one sequence has been created.
PAGE 351
Animation Effects 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). 5. 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.
PAGE 352
Animation Effects FIG. 370 State Manager (2 States indicated) 2. Select Button > Add States, and add 10 states, for a total of 12 (FIG. 371). FIG. 371 State Manager (12 States indicated) 3. Change the Fill and Border colors on the last state in the series (in this case State 12), via the Properties 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 (FIG. 372).
PAGE 353
Animation Effects Creating Color Transition Effects Use the Border Color, Fill Color and Text Color tweeners to easily apply color transition effects to 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 pressed. With 256 states available to use as "frames" in a tweened animation, these effects can be made to be very subtle and smooth.
PAGE 354
Animation Effects FIG. 376 State Manager (All States selected) The most basic type of color transition effect starts at the first state (or frame) and ends at the last. However, the TPD4 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.
PAGE 355
Animation Effects 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. 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 356
Animation Effects The position-oriented tweener options only work when the selected elements are set to use absolute positioning. Chameleon Images TPD4 supports a 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. In other words, it is an image that can have its colors changed on the panel itself (at run-time).
PAGE 357
Animation Effects For an example of a chameleon image, refer to the "Chameleon Demo" TPD4 file attached to Tech Note TN733. This file can be viewed in G4 PanelPreview or on an actual G4 panel. To access AMX Tech Notes, you must be logged into www.amx.com as a dealer. Requirements for Chameleon Images Chameleon images can be applied to buttons to create animated highlighting, glow and drop-shadow effects.
PAGE 358
Animation Effects FIG. 379 Chameleon Images - Fill and Border colors 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. 380): FIG. 380 Chameleon Images - Fill and Border colors tweened 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.
PAGE 359
Working With Templates Working With Templates Overview TPDesign4 allows you to import VisualArchitect (VA) template files (*.VAT) as well as TPD4 template files (*.TPT). *.VAT template files are created and exported using the VisualArchitect application. *.TPT template files are created and saved as templates in TPD4. Importing Template (*.VAT or *.TPT) Files TPD4 allows you to import VisualArchitect (VA) template files (*.VAT) as well as TPD4 template files (*.TPT). *.
PAGE 360
Working With Templates A VisualArchitect template is a TPD4 file complete with pages, popups and buttons, named in a manner that VisualArchitect will understand the relationship between all of the elements. Then, based on the established elements, VisualArchitect customizes the TPD4 file based on the navigation flow you designed.
PAGE 361
Working With Templates VA Templates - Navigations as Pages TPD4 modifies the export of panel projects as VisualArchitect templates to allow navigation elements to be implemented as pages instead of popup pages for panel projects of device class "remote". Also, TPD4 limits navigation elements of device class "panel" to pop-up pages only. VA Templates - Logical Page Scroll Bar Elements Logical pages contain two button elements that are used to implement a scrollbar.
PAGE 362
Working With Templates Creating Preview Images section on page 335 for details. Projects that utilize custom palettes must also contain one preview image for each color palette that will be available for selection in VisualArchitect (via the Color Schemes option). See the Chameleon Images and Custom Palettes section on page 336 for details. Required Template Elements When designing a template it is important to remember the rules that govern elements and their relation with the templates.
PAGE 363
Working With Templates [item]buttonName • buttonName This is the button name used in the generated TP4 project. Popups in a Navigation element can contain one or more Title buttons. The text will be replaced with the name given to the Navigation in the generated TP4 project. [title]buttonName • buttonName This is the button name used in the generated TP4 project. Placeholder Elements This is a blank device element that allows you to represent unique items in the diagram area.
PAGE 364
Working With Templates • buttonName The button name used in the generated TP4 project. Popups in a Mode element can contain one or more Title buttons, whose text is replaced with the name given to the Mode in the generated TP4 project. [title]buttonName • buttonName The button name used in the generated TP4 project. 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.
PAGE 365
Working With Templates 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. [device#deviceName]pageName • deviceName The name of the Device as it appears in VisualArchitect. • pageName The base page name used in the generated TP4 project.
PAGE 366
Working With Templates [info]buttonName This text is used to populate the mouseover element description in the toolbox. • buttonName Unused; the button is deleted in the generated TP4 project. Popups in a Sub-Feature element can contain one or more Title buttons, whose text is replaced with the name given to the Sub-Feature element in the generated TP4 project. [title]buttonName • buttonName The button name that is used in the generated TP4 project.
PAGE 367
Working With Templates In order for a TP4 file to be successfully exported as a VisualArchitect Template file, 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).
PAGE 368
Working With Templates FIG. 386 [nav#3 Selections]Navigation 3" popup In order for a TP4 file to be successfully exported as a VisualArchitect Template file, 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 VisualArchitect that are not included in the template. Placeholder elements consist of one page, and may contain multiple Popups.
PAGE 369
Working With Templates FIG. 388 Example Placeholder page in the Workspace Window FIG. 389 shows the "[ placeholder#Placeholder]Placeholder" page as it appears in the Design View: FIG. 389 [ placeholder#Placeholder]Placeholder" page Creating Preview Images In order for a TP4 file to be successfully exported as a VisualArchitect Template file, 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.
PAGE 370
Working With Templates FIG. 390 Create Template Preview Image dialog FIG. 391 Create Template Preview Image dialog - Element Type drop-down menu This menu lists all of the types of project elements that are recognized by VisualArchitect. Pick the one that best describes the type of element you are creating a preview image for. 4. Select Main Preview. If you have selected any element other than the Main Preview element, then you can enter an alternative name for it in the Element Name text field.
PAGE 371
Working With Templates Chameleon images can be used in conjunction with custom palettes to create VisualArchitect template files that, when opened in the VisualArchitect application, are capable of switching from one color scheme to another without having to edit the buttons directly.
PAGE 372
Working With Templates 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, TPD4 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.
PAGE 373
Working With Templates 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.
PAGE 374
Working With Templates 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. Simply copy/paste these popup pages into your Project, and they will be fully functional, allowing text/numeric entries on the panel.
PAGE 375
Working With Templates System Page Template Reference (Cont.) 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).
PAGE 376
Working With Templates 342 TPDesign4 (v3.
PAGE 377
File Transfer Operations File Transfer Operations Overview In TPDesign4, all file transfer operations are routed through the NetLinx Master to which the target/source touch panels are connected (either via TCP/IP or Serial connection). While all file transfer operations to touch panels are managed by the Master, the files themselves are routed to the panels, where they will reside (touch panel files never reside on the Master).
PAGE 378
File Transfer Operations Configuring a New TCP/IP Connection 1. Select Transfer > Connect (or click the toolbar button) to open the Connect dialog. 2. Click New to open the Connection Settings dialog. 3. In the Name field, enter a unique name for this connection configuration. 4. Select TCP/IP from the Transport drop-down list (FIG. 394). FIG. 394 Connection Settings dialog - TCP/IP Connection example 5. Enter the IP Address of the target NetLinx Master in the IP Address/DNS Name field.
PAGE 379
File Transfer Operations 5. If the target NetLinx Master has authentication enabled, 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. Refer to the NetLinx Studio online help for details on enabling authentication on NetLinx Masters. 6. Click OK to save these settings and return to the Connect dialog.
PAGE 380
File Transfer Operations 1. Select Transfer > Send To Panel. Use the Send File To Panel option to send a project file without having to open it in TPD4. If you are not already connected to the Master, the Connect dialog is invoked: a. Select the appropriate connection configuration from the Connection drop-down list and b. Click Connect to establish the connection. 2. Once communication is established, the Send To Panel dialog is invoked (FIG. 398): FIG. 398 Send To Panel dialog 3.
PAGE 381
File Transfer Operations FIG. 399 Transfer Status window Use the Transfer > Receive From Panel option (or click the toolbar button) to connect to a Master and upload a panel file from a compatible G4 touch panel on that Master's bus. 1. Select Transfer > Receive From Panel. If you are not already connected to the Master, the Connect dialog is invoked: a. Select the appropriate connection configuration from the Connection drop-down list and b. Click Connect to establish the connection. 2.
PAGE 382
File Transfer Operations FIG. 401 Receive From Panel dialog The status of the Transfer is indicated in the Transfer Status window (FIG. 402): FIG. 402 Transfer Status window Virtual NetLinx Master Transfers (TCP/IP or USB) 348 TPDesign4 (v3.
PAGE 383
File Transfer Operations TPD4 supports direct connection to G4 panels 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 designers, to allow them to create panel files and then test them on a panel without necessarily having access to a Master.
PAGE 384
File Transfer Operations 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 the files. 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.
PAGE 385
File Transfer Operations 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 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.
PAGE 386
File Transfer Operations 1. Connect the terminal end of the PSN6.5 power cable to the 12 VDC power connector on the rear or side (depending on the model) of the touch panel. 2. Use a (type-A) USB cable to connect the panel to an available USB port on your PC. First plug the USB cable into the PC, then connect to the panel. MVP-5200i USB Driver The MVP-5200i utilizes a native RNDIS USB driver. This driver utilizes Ethernet-over-USB.
PAGE 387
File Transfer Operations FIG. 405 Local Area Connection Properties dialog FIG. 406 Internet Protocol (TCP/IP) Properties dialog The static IP assigned to this connection should be on the same subnet as the IP address entered on the device Setup Pages (Protected Setup | System Settings | IP Settings | IP Address). TPDesign4 (v3.
PAGE 388
File Transfer Operations 354 TPDesign4 (v3.
PAGE 389
Program Preferences Program Preferences Setting Program Preferences Select Edit > Preferences to open the Preferences dialog, where you can set general program preferences for TPD4. This dialog contains four 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.
PAGE 390
Program Preferences 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 Preferences Dialog - Application tab FIG.
PAGE 391
Program Preferences Miscellaneous Flush Closed 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.
PAGE 392
Program Preferences 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. This setting does not affect the zoom setting for pages that are already open.
PAGE 393
Program Preferences 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.
PAGE 394
Program Preferences Temp folder location: Use this field to set the location of the folder TPD4 uses for any temp files. This feature accommodates the potential for large projects which need an especially large amount of temporary disk space. If you either have a panel open or a transfer in progress the Temp Folder Location field is disabled. In these situations the Temp folder cannot be changed since it is being actively used.
PAGE 395
Program Preferences Preferences Dialog - Undo/Redo tab FIG. 411 Preferences Dialog - Undo/Redo tab Undo / Redo Support Enable the Undo system: This option enables/disables the ability to undo actions. By default, this option is selected. Pressing OK or Accept after enabling/disabling the undo system will result in a clearing of the undo/redo history. Number of Undo Levels: Use the up/down arrows to change the number of undo actions allowed (default = 500).
PAGE 396
Program Preferences Adding an External Editing Program for Image Files Use the options in the Editor Selection tab of the Preferences dialog to associate one or more image editing programs with image files in TPD4 projects. 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.
PAGE 397
Program Preferences 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 (see FIG. 410 on page 360) to access the Choose Editor dialog (FIG. 412). FIG. 414 Choose Editor dialog 4. Click the Browse button (...) to locate and select the desired program's executable (.EXE) file, in the Open dialog.
PAGE 398
Program Preferences FIG. 416 Choose Editor dialog -Default Editor checked 5. Click OK to close the Choose Editor dialog. 6. The new default editor is indicated in the Default column of the Editors table (FIG. 417). "TRUE" indicates the default editor program FIG. 417 Preferences dialog (Editor Selection tab) - Default Editor Working with Dockable Windows All windows in TPD4 are fully dockable. Dockable windows can be re-arranged within the application window.
PAGE 399
Program Preferences Customizing the Toolbars Adding Buttons To Existing Toolbars 1. Open the Customize dialog (select View > Customize), to the Commands tab (FIG. 418). FIG. 418 Customize dialog (Commands tab) 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.
PAGE 400
Program Preferences 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. 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.
PAGE 401
Program Preferences Deleting Custom Toolbars To delete custom (user-added) toolbars from the TPD4 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 TPD4 toolbars cannot be deleted. Customizing the Menus Adding Commands To Existing Menus 1. Open the Customize dialog (select View > Customize), to the Commands tab. 2.
PAGE 402
Program Preferences 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. 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 (FIG. 422). FIG. 422 Customize dialog - New Menu selected This item represents a new "empty" menu. 3.
PAGE 403
Program Preferences 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 (Insert) button to create an empty text field in the Menu Contents list (FIG. 426). New (Insert) button New entry (enter application name) FIG. 426 Customize dialog (Tools tab) - New Entry 3.
PAGE 404
Program Preferences 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. 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 405
Appendix A: G4 ComputerControl (G4CC) Appendix A: G4 ComputerControl (G4CC) Overview AMX Modero Touch Panels, the NXP-TPI/4 (Touch Panel Interface), the TPI-PRO (Total Presentation Interface - Pro Edition), and TPD4 software support Computer Control.In combination with the NXA-USBTN (FG070-603), this innovative application allows the user to connect any computer to the control network (FIG. 427). FIG.
PAGE 406
Appendix A: G4 ComputerControl (G4CC) Setting Up G4 ComputerControl 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 (FIG. 428): FIG. 428 Computer Control Button - Properties window 2. In the Programming tab of the Properties window, set the Channel Code to 0 - setup port. 3.
PAGE 407
Appendix A: G4 ComputerControl (G4CC) 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.
PAGE 408
Appendix A: G4 ComputerControl (G4CC) 6. Press the OK button when finished adding a panel. This action creates the configuration file. 7. Add multiple panels using the next button on the PC (maximum of four). 8. 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.
PAGE 409
Appendix B: TakeNote Appendix B: TakeNote Overview TakeNote is an AMX application that works in conjunction with Modero panels/NXP-TPI/4/TPI-PRO, TPD4 and G4 Computer Control (G4CC) to allow you to use a G4 panel to annotate to either a windows desktop or on other G4 panels. Using TakeNote, presenters can use a stylus to directly draw onto a G4 panel's LCD screen and then have those annotations immediately displayed on both the target PC and up to up to 4 separate Modero touch panels simultaneously.
PAGE 410
Appendix B: TakeNote Disk space usage is dependant on the number and size of the annotations stored on the hard drive (by default, they are stored on the USB unless the directory location is changed. 256 MB of RAM VGA screen resolution of 800 x 600 pixels (minimum, 1024 x 768 recommended) Using TakeNote The TakeNote application represents an additional interactive layer placed above an active G4 Computer Control (G4CC) button on your panel.
PAGE 411
Appendix B: TakeNote 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.
PAGE 412
Appendix B: TakeNote Step 4: Configuring G4 Computer Control configCC.exe (included on the USB stick) is the Configuration Utility for G4CC. Use this application to designate up to four Modero panels, NXP-TPI/4s or TPI-PROs 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.
PAGE 413
Appendix B: TakeNote TakeNote Commands TakeNote Commands StartAnnowidth, height This command activates a session (if the connection is accepted) and enters the annotation mode for the clients IP. The first client to connect brings the annotation window to the forefront. Width and height are the dimensions of the client panel and TakeNote uses these dimensions to handle point translation while annotating. Return: 0 if OK to continue and 1 if not.
PAGE 414
Appendix B: TakeNote TakeNote Commands (Cont.) 380 SetWidthWidth This command sets the width of the annotating pen for the client. Redo This command redoes the last undo of a given client. Undo This command undoes the previous annotation of the given client. UndoAll This command sends an undo on all client sessions. Up This command ends a segment and enables the session to save the current annotation as one anatomical unit for future reference. TPDesign4 (v3.
PAGE 415
Appendix C: Text Effects and Border Styles Appendix C: Text Effects and Border Styles Text Effects The following topics provide previews of each Text Effect, selectable via the Text Effect drop-down menu in the States tab of the Properties window (FIG. 434): FIG. 434 Properties window (States tab) - Text Effect drop-down menu For List Box buttons, this property applies to all the buttons in the selected column. Text Effects - Glow The following Text Effects are contained in the "Glow" group (FIG.
PAGE 416
Appendix C: Text Effects and Border Styles Text Effects - Hard Drop Shadow The following Text Effects are contained in the "Hard Drop Shadow" group (FIG. 436): Hard Drop Shadow 1 Hard Drop Shadow 2 Hard Drop Shadow 3 Hard Drop Shadow 4 Hard Drop Shadow 5 Hard Drop Shadow 6 Hard Drop Shadow 7 Hard Drop Shadow 8 FIG. 436 Text Effects - Hard Drop Shadow Text Effects - Hard Drop Shadow with Outline The following Text Effects are contained in the "Hard Drop Shadow with Outline" group (FIG.
PAGE 417
Appendix C: Text Effects and Border Styles Text Effects - Medium Drop Shadow The following Text Effects are contained in the "Medium Drop Shadow" group (FIG. 438): Medium Drop Shadow 1 Medium Drop Shadow 2 Medium Drop Shadow 3 Medium Drop Shadow 4 Medium Drop Shadow 5 Medium Drop Shadow 6 Medium Drop Shadow 7 Medium Drop Shadow 8 FIG.
PAGE 418
Appendix C: Text Effects and Border Styles Text Effects - Outline The following Text Effects are contained in the "Outline" group (FIG. 440): Outline -S Outline -M Outline -L Outline -X FIG. 440 Text Effects - Outline Text Effects - Soft Drop Shadow The following Text Effects are contained in the "Soft Drop Shadow" group (FIG. 441): Soft Drop Shadow 1 Soft Drop Shadow 2 Soft Drop Shadow 3 Soft Drop Shadow 4 Soft Drop Shadow 5 Soft Drop Shadow 6 Soft Drop Shadow 7 Soft Drop Shadow 8 FIG.
PAGE 419
Appendix C: Text Effects and Border Styles Text Effects - Soft Drop Shadow with Outline The following Text Effects are contained in the "Soft Drop Shadow with Outline" group (FIG. 442): Soft Drop Shadow with Outline 1 Soft Drop Shadow with Outline 2 Soft Drop Shadow with Outline 3 Soft Drop Shadow with Outline 4 Soft Drop Shadow with Outline 5 Soft Drop Shadow with Outline 6 Soft Drop Shadow with Outline 7 Soft Drop Shadow with Outline 8 FIG.
PAGE 420
Appendix C: Text Effects and Border Styles Border Styles The following topics provide previews of each Border Style, selectable via the Border Name drop-down menu in the States tab of the Properties window (FIG. 443): FIG. 443 Properties window (States tab) - Border Name drop-down menu 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.
PAGE 421
Appendix C: Text Effects and Border Styles Border Styles - Bevel The following Border Styles are contained in the "Bevel" group (FIG. 446): Bevel - L Bevel - M Bevel - S FIG. 446 Border Styles - Bevel Border Styles - Circles The following Border Styles are contained in the "Circles" group. Note that the Circles borders are provided in many sizes, listed from smallest to largest. Pick a Circles border that best fits your button size.
PAGE 422
Appendix C: Text Effects and Border Styles Border Styles - Diamonds The following Border Styles are contained in the "Diamonds" group (FIG. 449). Note that the Diamonds borders are provided in many sizes, listed from smallest to largest. Pick a Diamonds border that best fits your button size. The figures below provide previews of several (not all) available Diamonds border styles: Diamond 15 Diamond 45 Diamond 95 Diamond 125 FIG.
PAGE 423
Appendix C: Text Effects and Border Styles Border Styles - Glow The following Border Styles are contained in the "Glow" group (FIG. 452): Glow - S Glow - L FIG. 452 Border Styles - Glow Border Styles - Menu Rounded-Bottom The following Border Styles are contained in the "Menu Rounded-Bottom" group (FIG. 453). Note that the Menu Bottom Rounded borders are provided in many sizes, listed from smallest to largest. Pick a Menu Bottom Rounded border that best fits your button size.
PAGE 424
Appendix C: Text Effects and Border Styles Border Styles - Menu Rounded-Right The following Border Styles are contained in the "Menu Rounded-Right" group (FIG. 455). Note that the Menu Rounded Right borders are provided in many sizes, listed from smallest to largest. Pick a Menu Rounded Right border that best fits your button size.
PAGE 425
Appendix C: Text Effects and Border Styles Border Styles - Misc The following Border Styles are contained in the "Misc" group (FIG. 458): Custom Frame Help Down Help Down Reversed FIG. 458 Border Styles - Misc Border Styles - Neon The following Border Styles are contained in the "Neon" group (FIG. 459): Neon Inactive - S Neon Inactive - L Neon Active On - S Neon Active Off - S Neon Active On - L Neon Active Off - L FIG.
PAGE 426
Appendix C: Text Effects and Border Styles Border Styles - Ovals -Horizontal The following Border Styles are contained in the "Ovals -Horizontal" group (FIG. 461): Oval H 60x30 Oval H 100x50 Oval H 150x75 Oval H 200x100 FIG. 461 Border Styles - Ovals -Horizontal Note that Oval border styles are intended to allow you to make (rectangular) buttons appear as ovals on-screen. Once you apply these border styles, you may need to resize the button to adjust the borders.
PAGE 427
Appendix C: Text Effects and Border Styles Border Styles - Smart Button Bubbled The following Border Styles are contained in the "Smart Button Bubbled" group (FIG. 464): Smart Button Bubbled Very Large Smart Button Bubbled Large Smart Button Bubbled Medium Smart Button Bubbled Small FIG. 464 Border Styles - Smart Button Bubbled The images above use Red as the border color and Orange as the fill color, to illustrate the transparent/ reflective effects of the Smart Button color scheme.
PAGE 428
Appendix C: Text Effects and Border Styles 394 TPDesign4 (v3.
PAGE 429
Program Preferences TPDesign4 (v3.
PAGE 430
In the ever-changing AV industry, continual education is key to success. AMX University is dedicated to ensuring that you have the opportunity to gather the information and experience you need to deliver strong AMX solutions. Plus, AMX courses also help you earn CEDIA, NSCA, InfoComm, and AMX continuing education units (CEUs).