Description
The Panel control is used to group controls into a container that is rendered to the display. The terminal software is designed to display different panels depending on the state of the terminal. One panel is displayed when the terminal is out of order, another one is displayed when articles shall be selected, etc. The key to identify the different panels is the Name property. The software has a fixed list of panel names that it will look for when a certain panel shall be displayed. These panels must be defined in the ui.xaml file to create a complete user interface.
Properties
Below is a list of the properties that can be defined for a Panel control. These properties adjust the functionality as well as the look and feel of the control:
ArticleGroup
| Type: | A string of any length |
Description:The ArticleGroup property is used to create different layouts of panels for different groups of articles. It is possible to create articles in the cwtconfig.xml file and group them by setting the group property to the same string for all articles that shall belong to a specific group.
It is also possible to create several different groups. The panels can then be designed for each group of articles by setting the ArticleGroup property equal to the group property in the cwtconfig.xml file. If no ArticleGroup is set for a panel, that panel will be used for all articles that do not have the group property set, or have a group property that does not correspond to any panel in the user interface. See CWT Software Configuration Handbook for details on articles and groups of articles.
AutoClickButtonsWhenPopupInFrontHides
| Type: | True/False |
| default: | False |
| Description: | The AutoClick buttons will automatically pressed when a popup in front hides |
BackColor
| Type: | A string with a valid colour name |
Description:Defines the background colour of the panel. See Colour names for a complete list of available colour names.
BackgroundImageFile
| Type: | A string of any length |
Description:The BackgroundImageFile property sets a path to an image file that will be rendered as panel background. The image file must be in the format PNG and must match the size of the panel in pixels.
DayType
| Type: | Unsigned Integer |
Description:The DayType property is used to create different panel layouts for different daytypes. It is possible to create calendar rules to specify daytypes in the cwtconfig.xml file (see CALENDAR in the configuration handbook). The DayType property can then be used to design different panel layouts of the same panel name.
If no DayType property is set for a panel, that panel will be used for all day types that do not have a separate panel. A typical example is to display a different panel on Sundays.
If Sundays are defined to be daytype 2, two definitions of the e.g. Prepay_Easy_StartPanel can be created in the ui.xaml where one does not have the DayType property set at all and the other one has it set to 2.
This would imply that the Prepay_Easy_StartPanel without a DayType property will be displayed Monday to Saturday while the Prepay_Easy_StartPanel with the DayType=”2” will be displayed on Sundays only.
This property can be combined with PaymentServiceGroup, ArticleGroup, TariffGroup, Language and TimerInterval to create a very specific set of panel layouts for the same panel name.
See CWT Software Configuration Handbook for details on how calendar rules are defined and how daytypes are used.
DisplaySound
| Type: | A string of any length |
Description:If the DisplaySound property is defined as a valid path to a sound file in wave format the sound file will be played when the panel is displayed. The path is normally in the form DisplaySound=“\Storage Card\Media\ Sound\soundfile.wav”.
If DisplaySound is set to an invalid path, or is not defined at all, no sound will be played when the panel is displayed.
Height
| Type: | Unsigned integer with value in the range of the height resolution of the display |
Description:Defines the height of the panel (number of pixels).
Language
| Type: | A valid language code string. |
Description:It is possible to create multiple panels with the same name for different languages by defining the Language property for at least one of the panels.
If a terminal shall be configured to have English and Chinese as alternative languages in the user interface, it is convenient to be able to create two separate layouts for the same panel name. The key to doing this is to define the Language property on the Chinese panel by setting Language=”zh-CN” (zh-CN is the language code for Chinese).
The English panel can be created without a Language property since the software handles an undefined Language property as the default panel.
The software then displays the Chinese version of the “ArticlePanel” if Chinese (zh-CN) is selected as the active language while the panel without Language property is displayed when English is selected.
It is possible to define any number of panels with the same name as long as the Language property is different for each panel. See examples below.
See CWT Software Configuration Handbook for a complete list of valid language codes.
Location
| Type: | String in format “X,Y” where X and Y are both unsigned integers. Values are in a range for the resolution of the display |
Description:Defines the position of the panel on the display expressed in pixels. This is by default set to position 0,0 which is the upper left corner. Usually, there is no need to change this setting.
If a different position must be defined is it set as the number of pixels from the upper left corner of the display. If, for instance, Location is set to “30,20” the upper left corner of the panel will be rendered 30 pixels to the right of the left border of the display and 20 pixels down from the top of the display.
Name
| Type: | A string of any length |
Description:Must be set and must correspond to one of the defined panel names if the application shall be able to find the panel when it shall be displayed.
See Panel names for a list of predefined names that the software uses to find panels in the user interface.
PaymentServiceGroup
| Type: | A string of any length |
Description:The PaymentServiceGroup property is used to create different panel layouts for different groups of payment services.
You can create payment services in the cwtconfig.xml file and group them by setting the group property to the same string for all payment services that shall be grouped together. You can also create several different groups. The panels can then be designed for each group of payment services by setting the PaymentServiceGroup property equal to the group property in the cwtconfig.xml file.
If no PaymentServiceGroup is set for a panel that panel will be used for all payment services that do not have the group property set or have a group property that is not defined for a panel in the user interface.
See CWT Software Configuration Handbook for details on payment services and groups of payment services.
Size
| Type: | String in format “N,M” where N and M are both unsigned integers. |
Description:Panel size defined in one property only. Width (N) and height (B) is expressed as the number of pixels. For example, “640,480” sets the width to 640 pixels and the height to 480 pixels.
TariffGroup
| Type: | A string of any length |
Description:The TariffGroup property is used to create different layouts of panels for different groups of tariff packages.
You can create tariff packages in the cwtconfig.xml file and group them by setting the group property to the same string for all tariff packages that shall be grouped together. You can also create several different groups. The panels can then be designed for each group of tariff packages by setting the TariffGroup property equal to the group property in the cwtconfig.xml file. If no TariffGroup is set for a panel that panel will be used for all tariff packages that do not have the group property set, or have a group property that is defined for a panel in the user interface.
See CWT Software Configuration Handbook for details on tariff packages and groups of tariff packages.
TimeInterval
| Type: | String |
| Description: | The TimeInterval property is used to create different panel layouts for different intervals of time. This makes it possible to create a specific panel layout that shall be used only in the specified time interval. |
If no TimeInterval property is set for a panel, that panel will be used as default. The CWT software searches for a panel with a defined and valid time interval first but if no valid interval is found will the default panel be selected (the panel without the TimeInterval property). Always define the default panel without TimeInterval first and then create the variants with defined time intervals. A typical example is to display a different panel (for instance Prepay_Easy_StartPanel) between 10:00 to 14:00. This can be accomplished by defining two Prepay_Easy_StartPanel instances in the ui.xaml where one don’t have any time interval defined (the default) and one with TimeInterval=”10:00 - 14:00”. This would imply that the Prepay_Easy_StartPanel with the TimeInterval property set to “10:00 - 14:00” will be displayed between 10:00 to 14:00 every day while the Prepay_Easy_StartPanel without TimeInterval will be displayed all other times.
The time interval can contain year, month, day and hour and minute. The syntax to use the different parts in the interval is
YYYY = four digit year,
MM = 2 digit month,
DD = 2 digit day,
HH=2 digit hour (24h clock),
mm = 2 digit minute.
The “-“ characters is used as separator between start and end date in the time interval (start time is specified to the left of the separator character):
Format to display |
Start date - end date |
|---|---|
Year, Month, Day, Hour, Minute |
YYYY MM DD HH:mm - YYYY MM DD HH:mm |
Month, Day, Hour, Minute |
MM DD HH:mm - MM DD HH:mm |
Day, Hour, Minute |
DD HH:mm - DD HH:mm |
Hour, Minute |
HH:mm – HH:mm |
Please note that the same syntax must be used for start and end time. It is not possible to use year in start time while only using month in end time for instance.
This property can be combined with PaymentServiceGroup, ArticleGroup, TariffGroup, Language and DayType to create a very specific set of panel layouts for the same panel name.
Width
| Type: | Unsigned integer with value range: 0–640 |
Description:Defines the width of the panel (number of pixels).
Sub-elements
Below is a list of the sub-elements that can be defined for a panel control. The only valid sub-element in the panel control is used to add other controls to the form.
Controls
| Description: | The Controls sub-element contains all sub-controls of the panel. If a button or label shall be added to the panel they must be defined inside the Controls sub-element. |
Control information
The software has a number of fixed panel names that are used to find and display the correct panel at different operational states. For a complete list of key panel names, see Panel names.
Examples
Example setup with two different definitions of the same panel (with the same name). The first one is the default panel and the second one is created for the Chinese language (language code zh-CN) that may require a different layout than the other languages.
<!--Displayed when Chinese (zh-CN) is selected as language-->
<TFT:Panel Name='ArticlePanel' Language='zh-CN'>
<Controls>
- - -
</Controls>
</TFT:Panel>
<!-- Displayed for all other languages than Chinese (zh-CN) -->
<TFT:Panel Name='ArticlePanel'>
<Controls>
- - -
</Controls>
</TFT:Panel>
Example setup with two definitions of the same panel (with the same name). The first one is the default panel and the second is created specifically for a group of articles that has the group property set to “masstransit”. In this way it is possible to display different instances of a panel with the same name depending on the selected article. A typical setup where this is practical is a terminal that sells articles of different kind like parking in combination with mass transit tickets.
<!-- Displayed when an article with group="masstransit" is selected -->
<TFT:Panel Name='CodeInputPanel' ArticleGroup='masstransit'>
<Controls>
- - -
</Controls>
</TFT:Panel>
<!-- Displayed for articles with no group set or a group other than "masstransit" -->
<TFT:Panel Name='CodeInputPanel'>
<Controls>
- - -
</Controls>
</TFT:Panel>
Example setup with two definitions of the same panel (with the same name). The first one is the default panel and the second is created specifically for a group of payment services that has the group property set to “masstransit”. In this way it is possible to display different instances of a panel with the same name depending on the payment service selected:
<!-- Displayed when a paymentservice with group="masstransit" is selected -->
<TFT:Panel Name='CodeInputPanel' PaymentServiceGroup='masstransit'>
<Controls>
- - -
</Controls>
</TFT:Panel>
<!--Displayed for paymentservices with no group set or a group other than
"masstransit"-->
<TFT:Panel Name='CodeInputPanel'>
<Controls>
- - -
</Controls>
</TFT:Panel>
Below is an example with two different definitions of the same panel (with the same name) where the first one is the default panel and the second one is created to be displayed when day type in the terminal is 2. The calendar rules of the terminal defines the day types for a normal week and for exceptions like holidays.
<!-- Displayed for all days except when it is daytype 2 -->
<TFT:Panel Name='ArticlePanel'>
<Controls>
- - -
</Controls>
</TFT:Panel>
<!--Displayed when DayType is 2-->
<TFT:Panel Name='ArticlePanel' DayType='2'>
<Controls>
- - -
</Controls>
</TFT:Panel>
Below is an example with two different definitions of the same panel (with the same name) where the first one is the default panel and the second one is created to be displayed between 10:00 and 14:00 every day.
<!-- Displayed for all days except when it is daytype 2 -->
<TFT:Panel Name='ArticlePanel'>
<Controls>
- - -
</Controls>
</TFT:Panel>
<!--Displayed between 10:00 and 14:00 every day-->
<TFT:Panel Name='ArticlePanel' TimeInterval='10:00 - 14:00'>
<Controls>
- - -
</Controls>
</TFT:Panel>
