CWT User Interface Design Handbook

<Stn:Panel Name='ArticlePanel'>

Description

The terminal software is designed to display different panels depending on the current state of the terminal. One panel is displayed when the terminal is out of order; 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 different panels must be defined in the ui.xaml file to create a complete user interface.

 

Properties

The table below lists the properties that can be defined with a Panel control. These properties adjust the function as well as the look and feel of the control.

ArticleGroup

Description:The ArticleGroup property is used to create unique panel layouts for different groups of articles.

It is possible to create articles in the cwtconfig.xml file and group them by using the same string in the group property for all articles that shall belong to the same group.

It is also possible to create several different article groups. The panels can then be designed for each group of articles by setting the ArticleGroup property equal to the group property value defined in the cwtconfig.xml file. If ArticleGroup is not 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 value that is not related to any display panel.

DayType

Description:The DayType property is used to create different panel layouts for different day types. It is possible to create calendar rules to specify day types in the cwtconfig.xml file (see CALENDAR in the CWT Software 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 daytypes that do not have a separate panel. A typical example is to display a different panel (for instance PrePay_Easy_StartPanel) on Sundays. If Sundays are defined to be daytype 2 two definitions of PrePay_Easy_StartPanel can be created in the ui.xaml where one does not have the DayType property set at all and one have it set to “2” (since 2 was defined as every Sunday). 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 TimeInterval to create a very specific set of panel layouts for the same panel name.

DisplaySound

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

Description:Defines the height of the panel. This is by default set to 128 pixels which is the height of the Stn display. Usually there is no need to change this so in most cases the Height property is not necessary to define.

Language

Description:By defining the Language property for at least one of the panels, it is possible to use the same panel name when creating alternative panels for different languages.

If, for example, a terminal shall have English and Chinese as alternative languages in the user interface it is convenient to create two separate layouts with the same panel name. The key to make this is to define the Language property for the Chinese panel for example, by setting Language=”zh-CN” (zh-CN is the language code for Chinese.

The English panel can be created without any Language property because the software handles a panel with an undefined language property as the default panel. The software then displays the Chinese version of the panel if Chinese (zh-CN) is selected as the active language while the panel without Language property is displayed for all other languages.

It is possible to define any number of panels and giving them the same name as long as the Language property is different for each panel. See examples below.

Location

Description:Defines the position (in number of pixels) of the panel on the display. This is by default set to position 0,0 which is the upper left corner. Usually, there is no need to change this so in most cases the Location property need not be defined.

If a different position must be defined, it is set as the number of pixels from the upper left corner of the display. If Location is set to “30,20” the upper left corner of the panel will be rendered 30 pixels to the right of the left display border and 20 pixels down from the top of the display.

Name

Description:The identifier of the panel. This must match the different defined names if the application shall be able to find the panel when it shall be displayed. Always set the Name  property when a panel is defined. See Panel names for a list of predefined names that the software uses to find panels in the user interface.

PaymentServiceGroup

Description:The PaymentServiceGroup property is used to create different panel layouts for different groups of payment services. It is possible to create payment services in the cwtconfig.xml file and group them by setting the group property to the same value for all payment services that shall be grouped together.

It is also possible to 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 property 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 found in a display panel.

TariffGroup

Description:The TariffGroup property is used to create different layouts of panels for different tariff groups of tariff packages. It is possible to create tariff packages in the cwtconfig.xml file and group them by setting the group property to the same string value for all tariff packages that shall be grouped together.

It is also possible to 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 TariffGroup is not 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 not found in a display panel. See CWT Software Configuration Handbook for details on tariff packages and groups of tariff packages.

TimeInterval

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 does not 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):

•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

Description:Defines the width of the Panel. This is by default set to 260 pixels which is the width of the STN display used. Usually, there is no need to change this so in most cases the Width property is not necessary to define.

 

Sub-elements

The Control sub-element is the only valid sub-element in a panel control. It is used for adding other controls to the display 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 need to be defined inside the Controls sub-element.

 

Control information

The application software has a number of fixed panel names that are used to find and display the correct display panel at different states of the terminal operation. See Panel names for a complete list of key panel names.

 

Examples

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 for the Chinese language (with language code zh-CN). The latter panel may require a different layout in comparison with panels created for the other languages.
 

<!--Displayed when Chinese (zh-CN) is selected as language-->
<Stn:Panel Name='ArticlePanel' Language='zh-CN'>
  <Controls>
     - - -
  </Controls>
</Stn:Panel>
 
  <!-- Displayed when another language than Chinese (zh-CN) is selected -->
<Stn:Panel Name='ArticlePanel'>
  <Controls>
     - - -
  </Controls>
</Stn:Panel>

The next example has two definitions of the same panel (with the same name) where the first one is the default panel and the second one 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 article selected. A typical setup where this is practical is a terminal that sells articles of different kind, parking for instance, in combination with mass transit tickets.
 

<!-- Displayed when an article with group="masstransit" is selected -->
<Stn:Panel Name='CodeInputPanel' ArticleGroup='masstransit'>
  <Controls>
     - - -
  </Controls>
</Stn:Panel>
 
<!-- Displayed for articles with no group set or a group other than "masstransit" -->
<Stn:Panel Name='CodeInputPanel'>
  <Controls>
      - - -
  </Controls>
</Stn:Panel>

Then follows an example with two definitions of the same panel (with the same name) where the first one is the default panel and the second one 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 for payment services with no group set or a group other than "masstransit"-->
<Stn:Panel Name='CodeInputPanel'>
  <Controls>
     - - -
  </Controls>
</Stn:Panel>
 
<!-- Displayed when a payment service with group="masstransit" is selected -->
<Stn:Panel Name='CodeInputPanel' PaymentServiceGroup='masstransit'>
  <Controls>
     - - -
  </Controls>
</Stn: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 define the day types for a normal week and for exceptions like holidays.

<!-- Displayed for all days except when it is daytype 2 -->
<Stn:Panel Name='ArticlePanel'>
<Controls>
  - - -
</Controls>
</Stn:Panel>
 
<!--Displayed when DayType is 2-->
<Stn:Panel Name='ArticlePanel' DayType='2'>
<Controls>
  - - -
</Controls>
</Stn: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 -->
<Stn:Panel Name='ArticlePanel'>
<Controls>
  - - -
</Controls>
</Stn:Panel>
 
<!--Displayed between 10:00 and 14:00 every day-->
<Stn:Panel Name='ArticlePanel' TimeInterval='10:00 - 14:00'>
<Controls>
  - - -
</Controls>
</Stn:Panel>