Please enable JavaScript to view this site.

CWT User Interface Design Handbook

Navigation: TFT Controls

PopupPanel (TFT)

Scroll Prev Top Next More

<TFT:PopupPanel Name='CardSeatedPopup'

Description

The PopupPanel control is used to display information in a popup panel displayed on top of a basic panel. Popup panels are, generally, used to display important information when certain things happen in the terminal. A typical example is a popup panel named CardSeatedPopup that is displayed when the terminal detects that a credit card is fully inserted in the card reader.

The content and style of a popup 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 PopupPanel control. They adapt 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 popup panel layouts for different groups of articles. You can create articles in the cwtconfig.xml file and group them by setting the group property to the same string for all articles that shall be grouped together.

You can also create several different groups. The popup 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 property is set for the popup panel that popup 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 a defined popup 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 hidesBackColor
Type:A string with a valid colour name

Description:Defines the background colour of the popup panel. See Colour names for a complete list of available colours.

BackgroundImageFile

Type:A string of any length

Description:The BackgroundImageFile property sets a path to an image file that will be rendered as background of the popup panel. The image file must be in PNG format 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 day types. It is possible to create calendar rules to specify daytypes in the cwtconfig.xml file (see CALENDAR in configuration handbook). The DayType property can then be used to design different panel layouts for 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.

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 the wave format the sound file will be played when the popup panel is displayed. Usually, the path is 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 popup panel is displayed.

Height

Type:Unsigned integer with value range: 0–480

Description:Defines the height of the popup panel in number of pixels.

Language

Type:A valid language code string.

Description:You can create multiple popup panels with the same name for different languages by defining the Language property for at least one of the popup panels.

If a terminal shall be configured to use English and Chinese as alternative languages for example, it is convenient to be able to create two separate layouts for the same popup panel name. To do this you have to define the Language property for the Chinese popup panel by setting Language=”zh-CN” (zh-CN is the language code for Chinese).

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

It is possible to define any number of popup panels with the same name as long as the Language property is different for each popup panel.

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. Value range for X is 0–640 and value range for Y is 0–480.

Description:Defines the location of the popup panel on the display when it is rendered 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 so in most cases the Location property is not necessary to define. If a different position must be defined enter the number of pixels from the upper left corner of the display. If, for example, Location is set to “30,20” the upper left corner of the popup panel will be rendered 30 pixels from the left border of the display and 20 pixels from the top.

Name

Type:A string of any length

Description:The identifier of the PopupPanel. Always set the Name property when a panel is defined. The name must match  one of the defined names (see Popup panel names) if the application shall be able to find the panel when it shall be displayed.

PaymentServiceGroup

Type:A string of any length

Description:The PaymentServiceGroup property is used to create different layouts of popup panels 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 popup panels can then be designed for each group of payment services by setting the PaymentServiceGroup property equal to the group property set in the cwtconfig.xml file.

If no PaymentServiceGroup property is set for a popup panel that popup panel will be used for all payment services that do not have the group property set or have a group property that do not correspond to any of the popup panels defined in the user interface.

See CWT Software Configuration Handbook for details on payment services and groups of payment services.

TariffGroup

Type:A string of any length

Description:The TariffGroup property is used to create different popup panel layouts 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 popup 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 popup panel that popup panel will be used for all tariff packages that do not have the group property set or have a group property that do not correspond to any of the popup panels defined 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.

Timeout

Type:A unsigned integer. Undefined = No timeout is set.
Description:Sets a timeout, in seconds, that the PopupPanel should remain visible on the screen. Certain PopupPanels may be closed by the software when things happen in the terminal.

A typical example is that the “CardSeatedPopup”, displayed when a card is seated in the card reader, will be closed as soon as the card is removed from the card reader. In that case a timeout is not needed and should not be defined for the popup panel.

TimeoutEvent

Type:OnConfirmTicketPopupTimeout,
OnConfirmOverpaymentPopupTimeout,
OnExternalPayUnitPopupTimeout
Description:Defines what software function that shall be executed when a timeout occurs and the popup panel is closed.

If TimeoutEvent is not defined, the PopupPanel will just be closed and no other action will be taken.

Defining any of the above TimeoutEvent properties for other pop-ups may cause unexpected results.

OnConfirmTicketPopupTimeout may be used as TimeoutEvent for the ConfirmTicketPopup to avoid getting a printout when a timeout occurs for the popup.

OnConfirmOverpaymentPopupTimeout may be used as TimeoutEvent for the ConfirmOverpaymentPopup to make it reject a purchase if the ConfirmOverpaymentPopup time out expires.

OnExternalPayUnitPopupTimeout may be used for ExternalPayUnitPopup to reject a purchase if the timeout expires for the popup panel.

WaitForPopupToHide

Boolean:true, false. Default = true
Description:Controls whether the system should wait for the popup to hide if it has a timeout defined.
Example:If a popup has a button with some action and a timeout then the button will not work unless WaitForPopupToHide is set to false or the when the timeout has expired.Width
Type:Unsigned integer with value range: 0–640

Description:Defines the width of the popup panel in number of pixels.

 

Sub-elements

Below is a list of the sub-elements that can be defined for a popup panel control. The only valid sub-element in the popup panel control is used to add other controls to the form.

Controls

Description:The Controls sub-element contains all sub controls of the popup panel. If a button or label shall be added to the popup panel they must be defined inside the Controls sub-element.

 

Control information

The software has a number of fixed popup panel names that are used to display the correct popup panel at different operational states. See Popup panel names B for a complete list of popup panel names.

 

Examples

Example popup panel with the name “CardSeatedPopup”. This popup is 250 pixels wide and 160 pixels high and it is positioned at 195,160 which means 195 pixels from the left border of the display and 160 pixels from the top of the display.

DisplaySound property points to a wave file with the name popup.wav that is stored in the directory “\Storage Card\Media\sound\”. The Controls sub-element is defined inside the popup panel. Controls like Label and Button are not defined.

<TFT:PopupPanel Name='CardSeatedPopup'
  Location='195,160'
  Size='250,160'
  DisplaySound='\Storage Card\Media\sound\popup.wav' >
  <Controls>
     - - -
  </Controls>
</TFT:PopupPanel>

Example popup panel named “PurchaseCancelledPopup” that is 250 pixels wide and 160 pixels high. Location is set to 0,0 which is the upper left corner in the display. The timeout is set to 4 seconds which means that the popup will be visible for 4 seconds before it is hidden by the terminal software. The Controls sub-element is defined inside the popup panel but no controls like Label and Button.

<TFT:PopupPanel Name='PurchaseCancelledPopup'
  Timeout ='4'
  Width='250'
  Height='160'
  Location='0,0'>
  <Controls>
     - - -
  </Controls>
</TFT:PopupPanel>