State Properties
The Properties presented in the States tab of the Properties window will depend on the TPD5 Element selected in the active Design View window (Page, Popup Page, Sub-Page, or Button). Some properties also only apply to specific panel types.
Using the All States Option
Use the All States option (in the States tab of the Properties window) to apply any changes you make to all states on the selected button. Note that if you have multiple buttons selected (Shift+click to select multiple buttons a page), the All States option only affects states for the button that has Edit Focus. The button with edit focus would be the last one selected, and is indicated by having red-colored square handles (as opposed to the black squares that indicate that a button is selected, but does not currently have edit focus).
| State Properties | |
|---|---|
| Bitmaps | To apply image files to the selected state(s), click the browse button (...) to open the Bitmaps dialog, where you can select an image file from among those imported into the project. In TPD5, you can assign up to five bitmap image files to Pages, Popup pages, Sub-Pages, and Buttons, as a state property. Use the options in the Bitmaps dialog to specify each with their own independent justification and placement properties. |
| Border Color | To change the border color for the selected state(s), click the browse button (...) to open the Colors dialog. |
| State Properties (Cont.) | |
|---|---|
| Border Name | To change the Border Name for the selected button, click Border Name, and select the desired border from the drop-down list. |
| Chameleon Image | This field allows you to apply a Chameleon Image to the selected state(s). |
| Fill Type | To change the fill type for the selected state, click the down arrow to select from a listing of supported fill types: |
| Fill Color | To change the fill color for the selected state, click the browse button (...) to open the Colors dialog. |
| Fill Gradient Colors | If you choose any Fill Type other than Solid, the Fill Color State property is replaced with the Fill Gradient Colors property. This property requires that you choose between two colors in order to generate a gradient across the page. To change the two fill colors for the selected state, click the browse button (...) to open the Fill Colors dialog. Click on a particular color to open the Colors dialog for further options. |
| Font | To change the font used for text on the selected state(s), click the browse button (...) to open the Font dialog, where you can select a Font for the text on the selected state(s). |
| State Properties (Cont.) | |
|---|---|
| Font Size | To change the font size used for text on the selected state(s), enter the desired font size in the field. Note that for Listview buttons, the Font Size property affects the Primary Text component. |
| Gradient Center X% | This property is available only if Radial has been selected as the Fill Type. |
| Gradient Center Y% | This property is available only if Radial has been selected as the Fill Type. |
| Gradient Radius | This property is available only if Radial has been selected as the Fill Type. |
| Overall Opacity | Use this field to specify the level of opacity for the selected button (0 - 255, where 0 is totally transparent, and 255 is totally opaque). The default is 255. |
| Secondary Font | Use this property to specify the font used for the Secondary Font component (the second text line) of a Listview item. |
| Secondary Font Size | Use this property to specify the font size used for the Secondary Font component (the second text line) of a Listview item. |
| Sound | To change or apply a new sound file to the selected state(s), click the browse button (...) to open the Select Resource dialog, where you can select a sound file (WAV or MP3) from among those imported into the project. Note: Only Buttons support the Sound property. |
| Streaming Source | Enter the URL or IP Address of the server that will provide the video stream. |
| 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. |
| State Properties (Cont.) | |
|---|---|
| Text | To change or enter the text to be displayed on the selected state(s), click the browse button (...) to open the Enter Text dialog, where you can type the new button text. Use the Preview Using Font option to view the text as it will appear in the selected font, style and size (on by default). |
| Text Color | To change the text color for the selected state, click the browse button (...) to open the Colors dialog. |
| Text Effect | Text effects are graphic effects that can applied to button/page/popup text. Each text effect is available in several variations ((i.e. Small, Medium, Large or XtraLarge). |
| Text Effect Color | If you have selected to apply a text effect, use this field to specify the color of the selected effect. Click the browse button (...) to open the Colors dialog. |
| Text Justif ication | To set or reset the justification setting for the button text (on the selected state(s)), click the down-arrow and select an option from the list. |
| Text X Offset | To apply an X and/or Y offset to the text (on the selected state(s)), enter the value for the desired offset (in pixels) in these text fields. |
| Text Y Offset | To apply an X and/or Y offset to the text (on the selected state(s)), enter the value for the desired offset (in pixels) in these text fields. Alternatively, you can click the browse button (...) to open the Image/Text Positioning dialog where you can make several alignment adjustments to the bitmap and text elements of the button. |
| Video Fill | Click the down arrow to select the source of the video to be used as a fill for the selected TPD5 element. G5 panels support streaming video or the MXA-MPL (Modero X® Series Multi Preview Live) as the source for streaming video. |
| Word Wrap | Use this option to enable the wrapping of text strings that are too long to be displayed across the page on one line. |
True Type Font Support
Since G5 panels have the ability to decode and display windows True Type Font files (TTF), TPD5 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.
Formatting Codes
Formatting codes can be used in the Text for Bargraph and Multi-State Bargraph buttons. The following formatting codes will be replaced with the identified values:
- $P - level percentage
- $V - raw level value
- $L - range low
- $H - range high
- $A - adjusted level value (raw level value - range low)
- $R - range (range high - range low)
- $$ - $ character
Complex Script Support
For page and button state text properties, TPDesign5 supports complex script languages (to the extent that the True Type font currently selected for that state supports the language in question). These languages include (but are not limited to) Arabic, Hebrew, Thai and Devanagari. Complex-script rendering is supported on Modero X Series panels.
NOTE: Most languages can be entered into the state property f ield via the windows language bar. However, some languages (notably Hindi and Tamil) are not supported by code-pages. These languages will display ??? for characters entered via the language bar, even if the selected font supports the language. However, text in these languages can still be pasted via the clipboard or via the Alt-<Scan Code> method.
Assigning Borders to TPD5 Elements
Borders can be assigned to Standard Popup Pages, Sub-Pages and Buttons, via the Border Name and Border Color State Properties. Use the Border Style (General) property to limit the Border Names available in the States tab to those that belong to the selected Border Style.
- In a Design View window, select the Popup Page (Standard or Sub-View) or Button to which you want to add or change the border (with the Selection tool).
- In the States tab of the Properties window, click on the Border Name property. Click the down arrow to open a drop-down menu of available Border Styles (FIG. 351):
FIG. 351 Border Name (State) Property - Border Styles drop-down menu
NOTE: If None is selected in the Border Style (General) property, then all border names are included in this list. However, if a Border Style was selected, then only that Border will be listed here (along with the "none" option).
- Select a Border to apply it to the selected element.
- Click on the Border Color (State) property to select a color for the border, via the Colors dialog.
- Click OK to close the Colors dialog.
NOTE: Alternatively, drag and drop the Border Name property from the States tab directly onto a Popup Page or Button to apply the indicated border. This technique can also be used to apply Border Colors.
Assigning Fills (Fill Type and Color) to TPD5 Elements
Color Fills can be assigned to Pages, Standard Popup Pages, Sub-Pages and Buttons, via the Fill Type and Fill Gradient Colors State Properties.
- In a Design View window, select the Page, Popup Page (Standard or Sub-View) or Button to which you want to add or change the fill (with the Selection tool).
- In the States tab of the Properties window, click on the Fill Type field. Click the down arrow to open a drop-down menu of available Fill Types (FIG. 352):
FIG. 352 Border Name (State) Property - Fill Type drop-down menu
- Select a Fill Type to apply it to the selected element.
- Click on the Fill Color property, then click the browse (...) button to select a color via the Colors dialog.
- Select a color (or multiple colors if a gradient Fill Type is selected). Note that if you have selected Solid as the Fill Type, use the Fill Color property to select the color to use (via the Colors dialog). However, all of the other Fill Types represent various gradient fills. In these cases, use the Fill Gradient Colors property to select at least two colors to use for the gradient fill (via the Fill Colors dialog).
- Click OK to close the Colors or Fill Colors dialog.
NOTE: Alternatively, drag and drop the Fill Type property from the States tab directly onto a Popup Page or Button to apply the indicated Fill Type. This technique can also be used to apply Fill Colors.
Assigning Video Fills to TPD5 Elements
Video Fills can be assigned to Pages, Standard Popup Pages, Sub-Pages and Buttons, via the Video Fill State Property. G5 Panels can use either Streaming Video or an MXA-MPL as the source for the video displayed (FIG. 346):
FIG. 353 Video Fill State Property
- In a Design View window, select the Page, Popup Page (Standard or Sub-View) or Button to which you want to add or change the video fill (with the Selection tool).
- In the Properties window - States Tab, click Video Fill to select a video source (None, Streaming Video or MXA-MPL). Since this is a state-oriented setting, be sure to consider all of the button states when applying the video fill. To apply the video fill across all states, use the All States option in the Properties window. Alternatively, use Ctrl+A to select all states in the State Manager window.
- Select Streaming Video to add Streaming Source to the list of State properties. Enter the URL or IP Address of the server that will provide the video stream in the Streaming Source field:
- Select MXA-MPL if you will use an MXA-MPL (Modero X® and Modero S Series Multi Preview Live) to provide the video stream.
Assigning Text to TPD5 Elements
Text can be assigned to Pages, Standard Popup Pages, Sub-Pages and Buttons, via the Text and Font-related State Properties. These include:
Text Color (see
page 25
4)
Text Effect Color (see
page 254
)
Font (see
page 252
)
Font Size (see
page 253
)
Text (see
page 25
4)
Text Justification (see
page 254
)
Text Effect (see
page 254
)
Word Wrap (see
page 254
)
Assigning Text to a Page, Popup Page Sub-Page or Button
- In a Design View window, select the Page, Popup Page, Sub-Page or Button to which you want to add or change the text (with the Selection tool).
- In the States tab of the Properties window, click on the Text property. Click the browse (...) button to open the Enter Text
dialog (FIG. 354).
FIG. 354 Enter Text dialog
NOTE: Alternatively, type directly in the Text property f ield in the Properties window.
- Type the text that should appear on the selected element and click OK to close the dialog. Note that the entered text is indicated in the Text (State) property field (FIG. 355):
FIG. 355 Text (State) Property indicating text entered via the Enter Text dialog.
- Click on the Text Color property. Click the browse (...) button to select a color via the Colors dialog, and click OK to close the dialog. Note that the selected text color is indicated in the Text Color property field (in the States tab).
- Use the Font and Font Size properties to specify a font and size for the entered text.
- Use the Text Justif ication property to select a justification setting for the entered text from the drop-down menu.
- Optionally, click on Text Effect to apply a Text Effect to the entered text. If a Text Effect is applied, then use the Text Effect Color property to specify a color for the selected effect.
- Click on the Word Wrap property, and select either Yes or No from the drop-down menu to specify whether to automatically wrap words to fit the area of the element.
NOTE: Alternatively, drag and drop the Text property from the States tab directly onto a Page, Popup Page or Button to apply the indicated text. This technique can also be used to apply Text Colors, Font/Size, Text Justif ication, Text Effect/Color and Word Wrap.