How-To Create a Numeric Keypad

Introduction

A numeric keypad, also known as a number pad, numpad, or ten key, is a keypad layout used for entering numbers. 

This how-to will show you how to use the Microchip Graphics Suite (MGS) Keypad, TextField, and Button widget to create a 0-9 keypad that can be used for user input of code, passkey, and other numeric information. 

MGS Example Project

Refer to the project in GitHub for the example.

MGS Simulator Output

This is how the application runs:

• To start code input, the Text Field widget must first be selected. This sets it in focus and becomes the edit target for input from the Keypad widget. The hint text is cleared when the Text Field widget is pressed.
• The Keypad widget can now be used to input or edit the numbers in the Text Field widget.
• Pressing the OK button will accept the input code and show it on the screen.
• Pressing the Default button will set the Text Field text to the default value.
• The input number is limited to eight digits through the application code.

Back to Top

MGS Harmony Composer Design

Here is what the design looks like in MGS Harmony Composer.

Selecting the widgets in the Screen Tree window will show the widget in the Screen Designer.

Back to Top

Image Assets

The following images are imported to the composer design. These images are configured and used as follows:

For the best balance of decode speed and image size, compression is enabled and the color mode is set to RGB 565 to match the project Default Color Mode setting.

Back to Top

String Assets

The string assets are shown in the String Manager.

Keypad Button Strings are used to display the text on top of the keypad buttons.

Keypad Button Edit Strings are used to append or input the numbers in the Text Field widget.

Back to Top

Configuring the Keypad Widget

The Keypad widget properties are shown in the following image:

Note that the Key Clicked event is enabled. This will enable the MGS library to call the application event handler when a keypad button is pressed. The event handler is described in the "Application Code" section.

Clicking the Configure Cells property Configure button shows how the buttons in the keypad are configured:

1. For the number buttons, the associated string assets are used to specify the text on the button and the edit text. The Edit Action is also set to Append so that the edit text string is appended to the Text Field widget.
2. For all buttons, the appropriate Pressed Icon and Released Icon are set to show the button toggling on the screen.
3. The Image Position is set to Behind so that the string is rendered over the button images.
4. For the Clear (Cell 0,3) and Del (Cell 2,3) buttons, the corresponding Clear or Backspace Edit Actions are set.

Back to Top

Configuring the Text Field Widget

The Text Field widget properties are shown in the following image.

A Hint String is set to show the Touch to Enter Code text in the Text Field widget when the screen is first shown. 

Back to Top

Application Code

The callback functions for handling the screen events are defined in the app.c file.

This function is called when the screen is first shown. In this function, the string object for showing the input code is initialized.

This is the callback function when any of the keypad buttons are pressed. This function is used to determine if the input text is past the CHAR_LIMIT (8) and limits the length by removing the last character.

This is the callback function when the OK button is pressed. In this function, the value of the string in the Text Field widget is copied and shown in the New Code label widget.

This is the callback function when the Default button is pressed. This function calls the setTextFieldDefault() helper function to set the Text Field widget text to the DEFAULT_CODE value.

This helper function is defined and used to set the specified Text Field widget's text.

Back to Top