web analytics
July 12, 2015

Widgets – Keyboard

widget_Keyboard

The keyboard widget allows the user to press down on character-labeled keys. To allow the user to enter text input into, for example, a text box, the keyboard is an essential widget to make it happen.

The keyboard makes use of a character mapping: an array of characters to be displayed and used on the keys. Before use, specify the layout of the keyboard (bounds, spacing, dimension, keys). To have a single key spanning multiple columns, simply put multiple of the same character in a row.

Usage example

The below code shows a simple numeric 3×4 keyboard:

widget_keyboard_num

#include "Phoenard.h"

PHN_Keyboard keyboard; // Define the keyboard

void setup() {
  // Initialize Serial
  Serial.begin(9600);
  
  // Initialize and add the keyboard widget
  keyboard.setBounds(10, 10, 300, 220);
  keyboard.setDimension(3, 4);
  keyboard.setSpacing(5);
  keyboard.setKeys("123456789.0-");
  display.addWidget(keyboard);
}

void loop() {
  display.update();
  
  char clicked = keyboard.clickedKey();
  if (clicked) {
    // Handle the clicked character here
    Serial.print(clicked);
  }
}

 

Multiple layouts

To make use of multiple layouts in a single keyboard, you can add multiple layout formats and specify a format name for each. Using the format key (\f) you can then change between layouts fluently. Below is a simple example of using a keyboard to enter text into a text field.

widget_keyboard_text

#include "Phoenard.h"

PHN_TextBox textbox;   // Define the textbox
PHN_Keyboard keyboard; // Define the keyboard

void setup() {
  // Setup the textbox
  textbox.setBounds(7, 7, 306, 100);
  textbox.setTextSize(2);
  textbox.showScrollbar(true);
  display.addWidget(textbox);

  // Setup the keyboard widget
  keyboard.setBounds(7, 110, 310, 124);
  keyboard.setDimension(11, 5);
  keyboard.setSpacing(2);
  keyboard.addKeys("abc", "1234567890."
                          "qwertyuiop,"
                          "asdfghjkl\b\b"
                          "\f\fzxcvbnm\n\n"
                          "\r\r       \r\r");
  keyboard.addKeys("ABC", "1234567890."
                          "QWERTYUIOP,"
                          "ASDFGHJKL\b\b"
                          "\f\fZXCVBNM\n\n"
                          "\r\r       \r\r");
  keyboard.addKeys("?!.", "!@#$%^&*()."
                          "-+_=\\/?~<>,"
                          ":;\'\"[]{}|\b\b"
                          "\f\f!?.,/\\\"\n\n"
                          "\r\r       \r\r");
  display.addWidget(keyboard);
}

void loop() {
  display.update();

  // Handle clicked key
  char clicked = keyboard.clickedKey();
  if (clicked) {
    textbox.setSelection(clicked);
  }
}

 

Special keys

There are several ‘special’ keys that behave differently from standard characters. Define them as follows in the character mapping:

  • Newline enter character: \n
  • Empty transparent space: \r
  • Tab character: \t
  • Backspace character: \b
  • Format selection character: \f

 

[fbcomments]