CWT User Interface Design Handbook

<Stn:PopupPanel        Name='CardSeatedPopup'>

Description

The PopupPanel control is used to display information in the display in a pop-up window displayed on top of a panel. The pop-ups are generally used to display important information in the user interface when certain things happen in the terminal. A typical example is a pop-up panel named CardSeatedPopup that is displayed when the terminal detects that a credit card is seated (fully inserted) in a card insertion reader. The content and style of a pop-up panel can be adapted in the same was as a regular panel control.

 

Properties

Below is a list of the properties that can be defined for a pop-up panel control. They will adapt the functionality as well as the look and feel of the control.

Description:

ArticleGroup

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

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

It is also possible to create several groups. The pop-up 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 article group is set for a pop-up panel, this pop-up panel will be used for all articles that do not have the group property set, or that have a group property that is not related to a pop-up panel in the user interface.

BorderWidth

Description:Defines the width (in pixels) of a border line around the pop-up panel. The line colour is black if TextModeName is set to "BlackText" and white if set to “WhiteText”.

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 (reference to 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 (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 TimerInterval 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 pop-up panel is displayed. The path is usually in the form DisplaySound=“\Storage Card\Media\Sound\ soundfile.wav”.

No sound will be played if DisplaySound is set to an invalid path or is not defined at all.

Height

Description:Defines the height of the pop-up panel. Default value is 128 pixels. The value must be adjusted if the popup shall be smaller. For CWT 104 and CWT Compact Classic the maximum value is 64 pixels to fit the popup inside the display.

Language

Description:It is possible to create multiple pop-up panels with the same name for different languages by defining the Language property for at least one of the pop-up panels.

If the alternative user interface languages should be English and Chinese, it is convenient to be able to create two separate layouts for the same pop-up panel name. The key to doing this is to define the Language property for the Chinese pop-up panel, for example by setting Language=”zh-CN” (zh-CN is the language code for Chinese. See CWT Software Configuration Handbook for details on language codes).

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

It is possible to define any number of pop-up panels with the same name as long as each pop-up panel has a different Language property. See examples inSection 0.

Location

Description:Defines the position (in No. of pixels) of the pop-up panel on the display when presented. This is, by default, set to position 0,0 which is the upper left corner. Usually, there is no need to change this so the Location property does not have to be defined.

If a different position needs to 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 pop-up panel will be rendered 30 pixels from the left border and 20 pixels from the top border of the display.

Name

Description:The identifier of the pop-up panel. This must match the 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.

PaymentServiceGroup

Description:The PaymentServiceGroup property is used to create different pop-up panel layouts for different groups of payment services.

You can create payment services in the cwtconfig.xml file and group them by using the same group property string for all payment services that shall belong to the same group.

It is also possible to create several groups. The pop-up 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 payment service group is set for the pop-up panel, this pop-up panel will be used for all payment services that do not have the group property set, or have a group property that is not related to a pop-up panel in the user interface.

TariffGroup

Type: String of any length

Description:The TariffGroup property is used to create different layouts of pop-up panels for different groups of tariff packages.

You can create tariff packages in the cwtconfig.xml file and group them by using the same group property string for all tariff packages that shall belong to the same group.

It is also possible to create several groups. The pop-up 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 tariff group is set for a pop-up panel, that pop-up panel will be used for all tariff packages that do not have the group property set, or that have a group property that is not related to a pop-up panel in the user interface.

TextModeName

Description:The TextModeName property controls the background mode of a pop-up panel.

When "WhiteText" is used, the text in the pop-up panel will be white on a black background.
The "BlackText" value causes the pop-up panel to show black text on a clear transparent background.

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

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.

Timeout

Description:Sets a timeout, in seconds, that the pop-up panel shall remain visible on the screen.

Certain pop-up panels may be closed by the software when things happen with the terminal. A typical example is that the “CardSeatedPopup”, displayed when a card is seated in the insertion card reader, will be closed as soon as the card is removed. No timeout is needed in that case and should not be set for the pop-up panel (undefined timeout = no timeout set).

TimeoutEvent

Description:Defines the software function that shall be executed when a timeout occurs and the pop-up panel is closed. If TimeoutEvent not is defined, the pop-up panel will just be closed and no other action is taken.

Alternative TimeoutEvent values:
“OnConfirmTicketPopupTimeout” can be used for the "ConfirmTicketPopup" to avoid getting a printout when a timeout occurs for the pop-up.
“OnConfirmOverpaymentPopupTimeout” can be used for the "ConfirmOverpaymentPopup" to make it reject a purchase if the timeout expires.
“OnExternalPayUnitPopupTimeout” can be used for the "ExternalPayUnitPopup" to reject a purchase if the timeout expires.

Defining a timeout event for other pop-ups may cause unexpected results.

Width

Description:Defines the width of the pop-up panel. The value must be adjusted if the popup shall be smaller. For CWT 104 and CWT Compact Classic the maximum value is 240 pixels to fit the popup inside the display.

 

Sub-elements

Controls is the only valid sub-element in the pop-up panel control. It is used to add other controls to the display form.

Controls

The Controls sub-element contains all sub controls of the pop-up panel. If a button or label shall be added to the pop-up panel, they shall be defined inside the Controls sub-element.

 

Control information

The application software has a number of fixed pop-up panel names used to find and display the correct pop-up panel at different operational states of the terminal. For a complete list of key pop-up panel names, see Popup panel names.

Examples

This example pop-up panel defines the name “CardSeatedPopup”. The pop-up is 145 pixels wide and 80 pixels high and it is positioned at 58, 25 which means 58 pixels from the left border of the display and 25 pixels from the top border.

DisplaySound points to a wave file with the name popup.wav positioned in the directory “\Storage Card\Media\sound\”. The Controls sub-element is defined, but no other controls like labels and buttons are defined inside the pop-up panel.

<Stn:PopupPanel Name='CardSeatedPopup'
  Location='58,25' Width='145' Height='80'
  DisplaySound='\Storage Card\Media\sound\popup.wav' >
  <Controls>
     - - -
  </Controls>
</Stn:PopupPanel>

The next example defines a pop-up panel with the name “PurchaseCancelledPopup”. The width is 260 pixels and the height is 128 pixels. The location is set to 0, 0 which is the upper left corner in the display. The timeout is set to 4 s which means that the pop-up will be visible for 4 seconds before it is hidden by the terminal software. The Controls sub-element is defined, but not other controls like labels or buttons are defined inside the pop-up panel.

<Stn:PopupPanel Name='PurchaseCancelledPopup' Timeout ='4'
  Width='260' Height='128' Location='0,0'>
  <Controls>
     - - -
  </Controls>
</Stn:PopupPanel>