<TFT:Button Name="AcceptButton"
Description
The Button control represents a software controlled button in the user interface.
For TFT user interfaces in a CWT Compact with Touch display or a CWT 2120 the buttons can be added as required because they do not have fixed positions as with the STN display used in the other CWT models. Instead, the buttons can be positioned anywhere on the display and become actuated through the touch screen.
Note: This chapter describes the buttons for the CWT S5, CWT Compact Touch and the CWT 2120 |
Buttons are usually defined in the various panels which allows any panel to include buttons with different functions. Each button is rendered on the display as a rectangle at a specific position, and it is possible to put a describing text inside the rectangle. You can also select an image as a button background.
When the customer presses a button through the touch panel, the click action registered for that button will be executed. The software contains a number of optional click actions that can be assigned to different buttons.
Button names
The buttons with names “PaymentService1”,…,”Article1”,…,”TariffPackage1”,..will automatically be invisible if the corresponding PaymentService, Article or TariffPackage is not selectable at the moment.
There is also another type of selection button. “StaticPaymentService”, “StaticArticle”, and “StaticTariffPackage”. See "Static" buttons
Properties
All properties that can be defined for a button 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-function. |
This button supports the OnDoActions click function
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”. |
ClickOnKeyDown
| Type/Value: | True/False |
| Description: | If ClickOnKeyDown is set to true then Click event is executed on Key down instead of Key up. |
| Default: | False |
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 pressed. 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 pressed. |
DisableAfterClick
| Type/Value: | True/False |
| Description: | If True, after click the button gets disabled and cannot be pressed again. The Button is restored (enabled) when the panel is displayed again as a new panel. |
| Default: | false. |
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.
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 Pre-installed fonts in CWT 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. |
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 range: 0–480 |
| Description: | Defines the height of the rectangle rendered as a background of the button. |
Image
| Type/Value: | A string of any length |
| Description: | The name and path to the image file to be used as the image of the button. The image file must be in the PNG file format and must match the size of the button in pixels. |
Image1,…,Image23
| Type/Value: | A string of any length |
| Description: | A list of images controlled by an External Pay Unit DLL to be displayed on the button. The External External Pay Unit DLL controls which image shall be used. |
The numbering of the images depends on the external Pay Unit used.
The Image property sets a path and image file name for each image file. The image file must be in PNG format and must match the size of the button in pixels.
Example 1: Displays the status of a EV charger
<Style BasedOn="{ButtonStyle}" def:Name="Style1">
<StyleProperties>
<PropertyStyle Click="OnExternalPayUnitButton" />
<PropertyStyle Image1="\Storage Card\Media\pictures\available.png" />
<PropertyStyle Image2="\Storage Card\Media\pictures\occupied.png" />
<PropertyStyle Image3="\Storage Card\Media\pictures\outoforder.png" />
<PropertyStyle ClickImage="\Storage Card\Media\pictures\article_d.png" />
</StyleProperties>
</Style>
Example 2: Displays the EV charger type available
<Style BasedOn="{ButtonStyle}" def:Name="Style2">
<StyleProperties>
<PropertyStyle Image1="\Storage Card\Media\pictures\Chademo.png" />
<PropertyStyle Image2="\Storage Card\Media\pictures\ChaoJi.png" />
<PropertyStyle Image3="\Storage Card\Media\pictures\Type_A.png" />
...
<PropertyStyle Image20="\Storage Card\Media\pictures\Combo_type_1.png" />
<PropertyStyle Image21="\Storage Card\Media\pictures\Combo_type_2.png" />
<PropertyStyle Image22="\Storage Card\Media\pictures\Tesla_Roadster.png" />
<PropertyStyle Image23="\Storage Card\Media\pictures\Tesla_USA.png" />
<PropertyStyle ShowClicked="False" />
</StyleProperties>
</Style>
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. Value range for X is 0–640 and value range for Y is 0–480. |
| Description: | Defines the position of the button on the display expressed in pixels. Location must be defined as pixels from the upper left corner of the display. If Location is set to “30,20” the upper left corner of the button will be positioned 30 pixels from the left border of the display 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. |
RememberAutoClickWhenDisabled
| Type/Value: | True/False (default = False) |
| Description: | If a button has AutoClick="true" and the button is invisible or inactive for some reason (e.g. CodeDoneButton is inactive until input requirement has been reached), the auto click function is not executed by default. If the auto click function should be executed when the button becomes active RememberAutoClickWhenDisabled should be set to True. |
ShowClicked
| Type/Value: | True/False (default = True) |
| Description: | The property controls if the image should alter when the button is clicked on |
Size
| Type/Value: | String in format “A,B” where A and B are both unsigned integers. Value range for A is 0–640 and value range for B is 0–480. |
| 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 range: 0–640 |
| Description: | Defines the width of the rectangle rendered as a background of the button on the display. |
Control information
Each button must be assigned a click action to be able to execute anything when the button is pressed. 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 normal accept button that has the name “AcceptButton” to make use of the visible/invisible feature described in Button click-function. The click action is “OnAccept” and KeyValue is not defined because accept is the normal kind without any pay unit selection for external pay units. The button is positioned 491 pixels from the left display border and 305 pixels from the top of the display. When the button is pressed a wave sound file named acceptbutton.wav will be played. The button will be rendered with wide_green.png image file as background and with the text “Accept” as foreground in white colour:
<TFT:Button Name='AcceptButton'
Text='Accept'
Location='491, 305'
Size='124,38'
Image='\Storage Card\Media\pictures\wide_green.png'
Font='Arial, 14pt, style=Bold'
ForeColor='Whiteb
ClickSound='\Storage Card\Media\sound\acceptbutton.wav'
Click='OnAccept'/>
Example 2 is a typical definition of a ZeroPurchaseButton that is only visible and active when the customer can get a free time ticket. The button is positioned at 491, 250 pixels. No sound is played when the button is pressed. To get the visible/invisible functionality of the button its name must be set to “ZeroPurchaseButton”. The click action is still OnAccept because the customer accepts the purchase but the difference compared to a normal accept is that no ticks have been paid:
<TFT:Button Name='ZeroPurchaseButton'
Text='Free'
Location='491, 305'
Size='124,38'
ForeColor='White'
BackColor='Blue'
Click='OnAccept'/>
The payment service panel, article panel and tariff package panel have a function to automatically connect different id:s to buttons. This allows the creator of the user interface to place up to 5 buttons in the article panel for instance and then let the software connect the actual article id:s to the different buttons. If you define 5 buttons and only have 2 articles, the unused buttons will be hidden because they are not used.
To use this functionality the button names must match the predefined rules in the software. The buttons in the article panel must have one of the names “Article1” to “Article5”, the buttons in the payment service panel must have one of the names “PaymentService1” to “PaymentService5” and the buttons in the tariff package panel must have one of the names “TariffPackage1” to “TariffPackage5”.
The example below is a complete article panel that uses this functionality with 3 buttons defined.
Set Text to an empty string in the button definition because the software will automatically assign the name of the article (or payment service or tariff package depending on the type of panel) to the button's Text property.
The Click action “OnArticleSelectAndConfirm” is assigned to the buttons to allow the customer to select the article and confirm it in the same step to easily proceed to the next step in the purchase.
<TFT:Panel Name='ArticlePanel'>
<Controls>
<TFT:Button
Name='Article1'
Text=''
Location='491,150'
Size='124,38'
ForeColor='Black'
BackColor='Red'
Click='OnArticleSelectAndConfirm'
ClickSound='\Storage Card\Media\sound\button.wav'/>
<TFT:Button
Name='Article2'
Text=''
Location='491,200'
Size='124,38'
ForeColor='Black'
BackColor='Red'
Click='OnArticleSelectAndConfirm'
ClickSound='\Storage Card\Media\sound\button.wav'/>
<TFT:Button
Name='Article3'
Text=''
Location='491,250'
Size='124,38'
ForeColor='Black'
BackColor='Red'
Click='OnArticleSelectAndConfirm'
ClickSound='\Storage Card\Media\sound\button.wav'/>
</Controls>
</TFT:Panel>
Example of ClickImage property. Example renders the image “not_clicked.png” when the button is in a normal state (not pressed) and the image “clicked.png” when the button is pressed:
<TFT:Button Name="AcceptButton"
Size='50,50'
Location='430,10'
ForeColor='White'
Transparent='true'
TransparentColor='#ff00ff'
Image='\Storage Card\Media\pictures\not_clicked.png'
ClickImage='\Storage Card\Media\pictures\clicked.png'
ClickSound='\Storage Card\Media\sound\button.wav'
Click='OnAccept'
Font='Arial, 14pt, style=Bold'/>
