Table of Contents


Extends: Group 

Description

The PinPad node is a simple widget that allows you to enter a fixed length numeric string. The string that is entered is displayed in a set of boxes above the PinPad node keyboard, with each box displaying a single numeral of the entered string.

The PinPad node must have the key focus in order to work properly.

The default appearance of the PinPad node is very transparent, allowing the node to pick up most of its color from what is rendered underneath it. The appearance can be customized by changing the keyboardBitmapUri and other fields.

Fields

FieldTypeDefaultUse
pinstring""Contains the string of numbers that have been entered.
pinLengthinteger4Contains the maximum number of digits that can be entered
secureModebooleantrueWhen set to true, each digit entered is displayed briefly, then replaced with an asterisk. When false, the entered digits always remain visible.
keyColorcolor

0xffffffff

Specifies the color of the key labels and icons when the keyboard does not have the focus
focusedKeyColorcolor

0xffffffff

Specifies the color of the key labels and icons when the keyboard has the focus
pinDisplayTextColorcolor0xffffffffSpecifies the color of the numbers displayed in the pin display boxes
keyboardBitmapUristring

""

Specifies the URI of an image file to be loaded to replace the default keyboard image drawn underneath the numeric keys and icons.

Note that this image must be carefully designed so that the key positions match the default image. Template images for SD, HD and FHD resolutions are provided below.

pinDisplayBitmapUristring""Specifed the URI of an image file to be loaded to replace the default box drawn underneath each entered digit in the pin display. This should be a 9-patch image so that it can be stretched to appropriate size depending on the pinLength field.
focusBitmapUristring

""

Specifies the URI of an image file to be loaded to replace the keyboard focus indicator. This should be a 9-patch image so that it can be stretched to the appropriate size for the double width keys.
showPinDisplayboolean

true

Specifies whether or not the pin display that shows the entered digits is visible. In most cases, it is desirable to display the entered digits so that the user can see the string as it is entered.

In some cases though, you might want to only show the keyboard part of the PinPad node. In those cases, the pin field of the node will still contain the string entered by the user, so that it can displayed in some different manner.

itemFocusedinteger0Specifies index of the key label that will be in focus when PinPad is created.
focusVisiblebooleantrueSpecifies whether or not focused key is visible when PinPad is created.

PinPad Bitmap Templates

  • Use the links below to download the template files.
  • The files have opaque white lines that show the key outlines with the rest of the images fully transparent. Looking at the files in some image viewers that do not support transparency will result in the images looking all white.
  • When creating your own keyboard background artwork, you must maintain the size of the image and the position of the keys in order for it to align properly with the rendered key labels and icons.

SD PinPad Template

HD PinPad Template

FHD PinPad Template

 

Attachments:

SDPinPadTemplate.png (application/octet-stream)
HDPinPadTemplate.png (application/octet-stream)
FHDPinPadTemplate.png (application/octet-stream)