<TFT:PreviewButton Name="AcceptButton"
Description
The PreviewButton is a button which behaves as a Button with the property ‘ClickOnKeyDown’ = False. The PreviewButton will place a preview of the button that is currently pressed. For this to work the PreviewButton needs to be in a PreviewPanel.
Properties
All properties that can be defined for a PreviewButton are listed below with description and examples.
Alignment
| Type/Value: | “Near”, “Center” or “Far” |
| Description: | The Alignment property defines where the rendering of text inside the button shall start: “Near” = Left justified. “Far” = Right justified “Center” = Centred. |
BackColor
| Type/Value: | A string with a valid colour name |
| Description: | Defines the background colour of the button. The button will be filled with the colour specified as BackColor. See Colour names for a list of available colours. |
BackgroundImageFile
| Type/Value: | A string of any length |
| Description: | The BackgroundImageFile property sets a path to an image file that will be rendered as background of the button. The image file must be in the PNG file format and must match the size of the button in pixels. |
Click
| Description: | The Click property assigns a click action to a button. This defines what will happen when a customer presses the button on the display. The software has a number of predefined click actions that can be assigned to different buttons. See details in Button Click functions. |
ClickImage
| Type/Value: | A string of any length |
| Description: | The ClickImage property makes it possible render a totally different image when the button is clicked. ClickImage is often defined as a path to an image file, usually the path is = “\Storage Card\Media\pictures\imagefile.png”. |
ClickSound
| Type/Value: | A string of any length |
| Description: | If the ClickSound property is defined as a valid path to a sound file in wave format the sound file will be played when the button is released. Usually, the path is in the form ClickSound=“\Storage Card\Media\Sound\soundfile.wav”. |
If ClickSound is set to an invalid path or is not defined at all no sound will be played when the button is released.
Font
| Type/Value: | A Font formatting string. See Description column for detailed information. |
| Description: | The Font property defines the font used to render the text on the display as well as the size of the text and the text style (like normal, bold and italic). |
This can be set for each button. The font name, font size and style are all set in the Font property using the format “FontName, FontSize, style=[font style]”.
See Fonts for alternative font names.
The available styles are:
•Regular
•Bold
•Italic
•Strikeout
•Underline
| Example: | “Arial, 24pt, style=Regular”. |
Note: You can use any custom True Type font by placing the corresponding font file in the folder “\Storage Card\Media\Fonts\” and using the font name for that particular font file.
ExternalButtonTrigger
| Type: | integer |
| Description: | ExternalButtonTrigger is a key press sent from cdscore by id. These numbers are the same as in chapter Soft Buttons. |
When an external button is pressed with the corresponding id this button will perform its click action.
ForeColor
| Type/Value: | A string with a valid colour name |
| Description: | Defines the foreground colour to be used as colour to render text on the button. See Colour names for a list of available colours. |
Height
| Type/Value: | Unsigned integer with value in the range of the height resolution of the display |
| Description: | Defines the height of the rectangle rendered as a background of the button. |
KeyIndex
| Type/Value: | A Integer value |
| Description: | Used in combination with the Click property to specify the button's behaviour when pressed. |
KeyValue
| Type/Value: | A string of any length |
| Description: | Used in combination with the Click property to specify the button's behaviour when pressed. KeyValue is a generic string that has different uses depending on the click action specified. For information on how KeyValue is used, see the click action details in Button click-function. |
Location
| Type/Value: | String in format “X,Y” where X and Y are both unsigned integers. |
| Description: | Defines the position of the button on the PreviewPanel expressed in pixels. Location must be defined as pixels from the upper left corner of the PreviewPanel. If Location is set to “30,20” the upper left corner of the PreviewButton will be positioned 30 pixels from the left border of the PreviewPanel and 20 pixels from the top. |
Name
| Type/Value: | A string of any length |
| Description: | The identifier of the button. Name must be unique within a panel. |
PreviewBackColor
| Type/Value: | A string with a valid color name |
| Description: | Defines the background colour of the button. The button will be filled with the colour specified as BackColor. See Colour names for a list of available colours. |
PreviewFont
| Type/Value: | A Font formatting string. See Description column for detailed information. |
| Description: | The PreviewFont property defines the font used to render the text on the display as well as the size of the text and the text style (like normal, bold and italic). |
The font name, font size and style are all set in the Font property using the format “FontName, FontSize, style=[font style]”.
See Fonts for alternative font names.
The available styles are:
•Regular
•Bold
•Italic
•Strikeout
•Underline
| Example: | “Arial, 24pt, style=Regular”. |
Note: You can use any custom True Type font by placing the corresponding font file in the folder “\Storage Card\Media\Fonts\” and using the font name for that particular font file. |
PreviewImage
| Type/Value: | A string of any length |
| Description: | The PreviewImage property sets a path to an image file that will be rendered as background of the preview. The image file must be in the PNG file format and must match the property PreviewSize in pixels. |
PreviewLocation
| Type/Value: | String in format “A,B” where A and B are both unsigned integers. |
| Description: | Defines the position of the preview on the PreviewPanel expressed in pixels. Location must be defined as pixels from the upper left corner of the PreviewPanel. If Location is set to “30,20” the upper left corner of the preview will be positioned 30 pixels from the left border of the PreviewPanel and 20 pixels from the top. |
Do not use in combination with PreviewOffset
Note: The preview will not be displayed outside the Preview panel |
PreviewOffset
| Type/Value: | String in format “A,B” where A and B are both signed integers. |
| Description: | Defines the previews offset from the PreviewButton. The values are signed, so negative values can be used. |
Do not use in combination with PreviewLocation
Note: The preview will not be displayed outside the Preview panel |
PreviewSize
| Type/Value: | String in format “A,B” where A and B are both unsigned integers. |
| Description: | The Size property defines both the height and the width of the button with one property. The string shall be width (A) and height (B) with unsigned integers separated with a comma like “640,480”. |
PreviewText
| Type/Value: | A string of any length |
| Description: | The PreviewText property is used to define a static text rendered on top of the background rectangle of the button. |
Size
| Type/Value: | String in format “A,B” where A and B are both unsigned integers. Values are in a range for the resolution of the display |
| Description: | The Size property defines both the height and the width of the button with one property. The string shall be width (A) and height (B) with unsigned integers separated with a comma like “640,480”. |
Text
| Type/Value: | A string of any length |
| Description: | The Text property is used to define a static text rendered on top of the background rectangle of the button. |
Transparent
| Type/Value: | Boolean, use true or false |
| Description: | Set this to “true” to render a specific colour of the BackgroundImageFile image as transparent. Use this to create buttons on the display that has rounded corners with transparency. This must be used in combination with the TransparentColor property below. If the value is “false” no transparency will be handled for the button. |
TransparentColor
| Type/Value: | RGB colour hexadecimal string with # as prefix. |
| Description: | Set the colour RGB code that shall be treated as transparent when the image is rendered to the display. Example “#ffffff” sets all black colour pixels as transparent in the image when it is rendered to the display. To allow the transparency to be rendered correctly Transparent=”true” must be defined for the button. See information on Transparent property above. |
See Colour names for a list of available colours with RGB codes.
Width
| Type/Value: | Unsigned integer with value in the range of the width resolution of the display |
| Description: | Defines the width of the rectangle rendered as a background of the button on the display. |
Control information
Each PreviewButton must be assigned a click action to be able to execute anything when the PreviewButton is released. The terminal software has a number of different pre-defined click actions for buttons. All existing click actions for TFT-based terminals (CWT2120) are listed in Button click-function. Some of the click actions use the properties KeyValue and KeyIndex.
Examples
Example 1 is a keyboard with pop-up buttons. It contains all definitions of PreviewButtons and PreviewPanel.
Example 2 is a style for a preview at the same place for all buttons (position 0,0)
Example 1:
<Style def:Name="PreviewButtonStyle">
<StyleProperties>
<PropertyStyle Image="\Storage Card\Media\pictures\char.png"/>
<PropertyStyle PreviewImage="\Storage Card\Media\pictures\char_big.png"/>
<PropertyStyle ClickImage=""/>
<PropertyStyle Click="OnKeyboardHit"/>
<PropertyStyle Size="41,53"/>
<PropertyStyle PreviewSize="65,85"/>
<PropertyStyle Font="Arial, 20pt, style=Regular"/>
<PropertyStyle PreviewFont="Arial, 30pt, style=Regular"/>
<PropertyStyle PreviewOffset="-12,-40"/>
<PropertyStyle ClickSound="\Storage Card\Media\Sound\typing.wav"/>
</StyleProperties>
</Style>
<TFT:PreviewPanel def:Name="SoftCodeKeyboardPanel">
<Controls>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="108,44" Name="Key_1"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="155,44" Name="Key_2"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="202,44" Name="Key_3"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="249,44" Name="Key_4"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="296,44" Name="Key_5"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="343,44" Name="Key_6"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="390,44" Name="Key_7"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="437,44" Name="Key_8"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="484,44" Name="Key_9"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="531,44" Name="Key_0"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="108,104" Name="Key_Q"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="155,104" Name="Key_W"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="202,104" Name="Key_E"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="249,104" Name="Key_R"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="296,104" Name="Key_T"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="343,104" Name="Key_Y"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="390,104" Name="Key_U"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="437,104" Name="Key_I"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="484,104" Name="Key_O"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="531,104" Name="Key_P"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="132,164" Name="Key_A"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="179,164" Name="Key_S"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="226,164" Name="Key_D"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="273,164" Name="Key_F"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="319,164" Name="Key_G"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="367,164" Name="Key_H"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="414,164" Name="Key_J"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="461,164" Name="Key_K"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="508,164" Name="Key_L"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="484,224" Name="Key_-"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="155,224" Name="Key_Z"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="202,224" Name="Key_X"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="249,224" Name="Key_C"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="296,224" Name="Key_V"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="343,224" Name="Key_B"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="390,224" Name="Key_N"/>
<TFT:PreviewButton MxStyle="{PreviewButtonStyle}" Location="437,224" Name="Key_M"/>
</Controls>
</TFT:PreviewPanel>
<TFT:Panel MxStyle="{PanelStyle}" Name="CodeInputPanel">
<Controls>
…
<TFT:PreviewPanel Size="778,430" Location="62,50" Name="CodeInputKeyboard" SubForm="SoftCodeKeyboardPanel"/>
</Controls>
</TFT:Panel>
Example 2:
<Style BasedOn="{ButtonStyle}" def:Name="PreviewButtonStylePreviewStaticPlace">
<StyleProperties>
<PropertyStyle Image="\Storage Card\Media\pictures\char.png"/>
<PropertyStyle PreviewImage="\Storage Card\Media\pictures\char_big.png"/>
<PropertyStyle ClickImage="\Storage Card\Media\pictures\char_d.png"/>
<PropertyStyle Click="OnKeyboardHit"/>
<PropertyStyle Size="41,53"/>
<PropertyStyle PreviewSize="65,85"/>
<PropertyStyle Font="Arial, 20pt, style=Regular"/>
<PropertyStyle PreviewFont="Arial, 30pt, style=Regular"/>
<PropertyStyle PreviewLocation="0,0"/>
<PropertyStyle ClickSound="\Storage Card\Media\Sound\typing.wav"/>
</StyleProperties>
</Style>
