Please enable JavaScript to view this site.

CWT User Interface Design Handbook

Navigation: STN controls

Image (STN)

Scroll Prev Top Next More

<STN:Image        Name='SampleImage'>

Description

The Image control is used to present a bitmap image on the display.

The image must be a bitmap and the black colour (RGB colour 0x000000) is rendered as black while every other colour in the bitmap will be rendered as non-black on the display. The rule is applied to meet the limitation of the monochrome STN display.

 

Location

Type:String in format “X, Y” where X and Y are both unsigned integers.
Value:Value range for X is 0–260
Value range for Y is 0–128.

Description:The Location property specifies where the image shall be placed in relation to the parent control.

If an image is defined in a panel, the Location property will specify where inside the panel the image will be positioned. The physical location on the display depends on where the panel is placed (panels also have a location property) and where the image is placed within the panel.

Name

Type:String of any length

Description:The name of the Image control. Remember that the name must be unique within the same panel.

File

Type:String of any length

Description:A valid path to the bitmap file. If the path points to an invalid folder or image file, nothing will be rendered to the image area on the display.

Height

Type:Unsigned integer. Value range 0–128.

Description:Defines the height of the image on the display. This must match the height of the bitmap file (in pixels) to get a proper presentation of the bitmap content.

Width

Type:Unsigned integer. Value range 0–260.

Description:Defines the width of the image on the display. This must match the width of the bitmap file (in pixels) to get a proper presentation of the bitmap content.

 

Sub-elements

The Image control has a Files sub-element that can be used to specify different images for different combinations of active pay units in the terminal. This allows the image content to change if a pay unit is set to partial error mode. The user interface can then be adapted to better describe the purchase process or available means of payment depending on which pay units that are active.

Different FileItem sub-elements can be defined in the Files sub-element to specify different image files for different pay unit combinations. This functionality is only active for an image with Name=“ActivePayUnitImage”. If no match is found for an active pay unit combination, the bitmap set as File in the image definition will be used as a default file.

FileItem

Description:Element to display an image depending on the Pay Unit(s) it is linked to.

Files

Description:Container element to allow for one or more FileItem sub-elements

 

Control information

ActivePayUnitImage is a key name that can be used with the Image control to activate the possibility to display different bitmaps depending on which pay units that are active in the system. See Section 0 for information on how to use the Files sub-element to achieve this.

See example 2 below.

AcceptPossibleImage is a key Name that can be used on an image to make it visible only when it is possible to accept the purchase. This can be used as instruction to the end user to display an image of what button to press for accept for instance. If the purchase cannot be accepted the AcceptNotPossibleImage will be displayed. If no AcceptNotPossibleImage is available or defined no image will be displayed.

<Stn:Image Name="AcceptPossibleImage" MxStyle="{AcceptPossibleImageStyle}"/>
<Stn:Image Name="AcceptNotPossibleImage" MxStyle="{AcceptNotPossibleImageStyle}"/>

Example 1

The image definition below fills the whole screen (because the width is 260 pixels and the height is 128 pixels) and renders a bitmap with the file name sampleimage.bmp located in the folder “\Storage Card\Media\pictures\”. The Image control is given the name “SampleImage”, but in this case the name is not important.

<STN:Image   Name='SampleImage'
  Location='0, 0’
  Width='260'
  Height='128'
  File='\Storage Card\Media\pictures\sampleimage.bmp'/>