TouchGFX resize Keyboard

[JK.6]

I am trying to use the CustomKeyboard provided in TouchGfx for a STM32F769 discovery board (https://www.st.com/en/evaluation-tools/32f769idiscovery.html).

How can i resize the keyboard? Is this possible without resizing each key individually?

The keyboard seems to have a predefined size of 320x240 which is to small for my board.

I tried using the provided methods (setPosition(), setWidth(), setHeight() with invalidate()) for setting the width and height, but it seems not to work as expected.

Do i need to resize any single key? How would i do that?

[Alexandre RENOUX]

Hello,

Yes unfortunately you need to change the layout itself entirely.

Basically, you need to change the values in the keyArray in KeyboardLayout.hpp. This also means you need new images for the keys since the size will be different.

/Alexandre

[JK.6]

Thanks for the fast reply.

I will try to adjust the layout for my needs.

[emptymind]

Hi. I've same problem with keyboard. Have you made keyboard resize and how muck time do you spent? Regards, Anatoly.

[BParh.1]

Hi I have same problem, have you resolved this? Please share :)

[CBurk.2]

Ill post here for anyone who is trying to do this in the future - it is not that bad, Ill go over how to make the changes in the example keyoard project. First go into KeyboardLayout.hpp and make the appropriate changes. I just doubled the size, so double the corresponding widths/heights/spacings. The rect() command goes: x, y, width, height. The file I modified is below:

#ifndef KEYBOARD_LAYOUT
#define KEYBOARD_LAYOUT
 
#include <touchgfx/widgets/Keyboard.hpp>
#include <touchgfx/hal/Types.hpp>
#include <fonts/ApplicationFontProvider.hpp>
#include "BitmapDatabase.hpp"
 
using namespace touchgfx;
 
/**
 * Array specifying the keys used in the CustomKeyboard.
 */
static const Keyboard::Key keyArray[30] =
{
 { 1, Rect(14, 122, 52, 80), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},
 { 2, Rect(14 + 56*2, 122, 52, 80), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},
 { 3, Rect(14 + 28 * 2, 122, 52, 80), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},
 { 4, Rect(14 + 56 * 3, 122, 52, 80), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},
 { 5, Rect(14 + 56 * 4, 122, 52, 80), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},
 { 6, Rect(14 + 56 * 5, 122, 52, 80), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},
 { 7, Rect(14 + 56 * 6, 122, 52, 80), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},
 { 8, Rect(14 + 56 * 7, 122, 52, 80), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},
 { 9, Rect(14 + 56 * 8, 122, 52, 80), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},
 {10, Rect(14 + 56 * 9, 122, 52, 80), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},
 {11, Rect(14 + 56 * 10, 122, 52, 80), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},
 
 {12, Rect(14, 210, 52, 80), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},
 {13, Rect(14 + 56, 210, 52, 80), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},
 {14, Rect(14 + 56 * 2, 210, 52, 80), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},
 {15, Rect(14 + 56 * 3, 210, 52, 80), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},
 {16, Rect(14 + 56 * 4, 210, 52, 80), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},
 {17, Rect(14 + 56 * 5, 210, 52, 80), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},
 {18, Rect(14 + 56 * 6, 210, 52, 80), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},
 {19, Rect(14 + 56 * 7, 210, 52, 80), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},
 {20, Rect(14 + 56 * 8, 210, 52, 80), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},
 {21, Rect(14 + 56 * 9, 210, 52, 80), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},
 {22, Rect(14 + 56 * 10, 210, 52, 80), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},
 
 {23, Rect(126, 298, 52, 80), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},
 {24, Rect(126 + 56, 298, 52, 80), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},
 {25, Rect(126 + 56 * 2, 298, 52, 80), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},
 {26, Rect(126 + 56 * 3, 298, 52, 80), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},
 {27, Rect(126 + 56 * 4, 298, 52, 80), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},
 {28, Rect(126 + 56 * 5, 298, 52, 80), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},
 {29, Rect(126 + 56 * 6, 298, 52, 80), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},
 {30, Rect(124, 386, 504, 80), BITMAP_KEYBOARD_SPACE_HIGHLIGHTED_ID}
};
 
/**
 * Callback areas for the special buttons on the CustomKeyboard.
 */
static Keyboard::CallbackArea callbackAreas[3] =
{
 {Rect(10, 298, 112, 80), 0, BITMAP_KEYBOARD_KEY_SHIFT_HIGHLIGHTED_ID}, // caps-lock
 {Rect(516, 298, 112, 80), 0, BITMAP_KEYBOARD_KEY_DELETE_HIGHLIGHTED_ID}, // backspace
 {Rect(10, 386, 112, 80), 0, BITMAP_KEYBOARD_KEY_NUM_HIGHLIGHTED_ID}, // mode
};
 
/**
 * The layout for the CustomKeyboard.
 */
static const Keyboard::Layout layout =
{
 BITMAP_KEYBOARD_BACKGROUND_ID,
 keyArray,
 30,
 callbackAreas,
 3,
	/* Do not know what this does... VV*/
 Rect(30, 20, 22 * 28, 80),
 TypedText(T_ENTEREDTEXT),
#if !defined(USE_BPP) || USE_BPP==16
 0xFFFF,
#elif USE_BPP==24
 0xFFFFFF,
#elif USE_BPP==8
 0xFF,
#elif USE_BPP==4
 0xF,
#elif USE_BPP==2
 0x3,
#else
#error Unknown USE_BPP
#endif
 Typography::KEYBOARD,
 0
};
 
#endif

Next modify MainView.cpp and make the following changes so the height/width are set appropriately:

#include <gui/main_screen/MainView.hpp>
 
MainView::MainView()
{
 keyboard.setPosition(80, 0, 640, 480);
 add(keyboard);
}
 
void MainView::setupScreen()
{
}
 
void MainView::tearDownScreen()
{
}

Now go into CustomKeyboard.cpp and make the following changes:

#include <gui/common/CustomKeyboard.hpp>
#include <string.h>
#include <touchgfx/Color.hpp>
 
CustomKeyboard::CustomKeyboard() : keyboard(),
 modeBtnTextArea(),
 capslockPressed(this, &CustomKeyboard::capslockPressedHandler),
 backspacePressed(this, &CustomKeyboard::backspacePressedHandler),
 modePressed(this, &CustomKeyboard::modePressedHandler),
 keyPressed(this, &CustomKeyboard::keyPressedhandler),
 alphaKeys(true),
 uppercaseKeys(false),
 firstCharacterEntry(false)
{
 //Set the callbacks for the callback areas of the keyboard and set its layout.
 layout.callbackAreaArray[0].callback = &capslockPressed;
 layout.callbackAreaArray[1].callback = &backspacePressed;
 layout.callbackAreaArray[2].callback = &modePressed;
 keyboard.setLayout(&layout);
 keyboard.setKeyListener(keyPressed);
 keyboard.setPosition(0, 0, 640, 480);
 keyboard.setTextIndentation();
 //Allocate the buffer associated with keyboard.
 memset(buffer, 0, sizeof(buffer));
 keyboard.setBuffer(buffer, BUFFER_SIZE);
 
 uppercaseKeys = true;
 firstCharacterEntry = true;
 
 modeBtnTextArea.setPosition(40, 400, 112, 80);
 modeBtnTextArea.setColor(Color::getColorFrom24BitRGB(0xFF, 0xFF, 0xFF));
 
 setKeyMappingList();
 
 add(keyboard);
 add(modeBtnTextArea);
}
 
void CustomKeyboard::setKeyMappingList()
{
 if (alphaKeys)
 {
 modeBtnTextArea.setTypedText(TypedText(T_ALPHAMODE));
 if (uppercaseKeys)
 {
 keyboard.setKeymappingList(&keyMappingListAlphaUpper);
 }
 else
 {
 keyboard.setKeymappingList(&keyMappingListAlphaLower);
 }
 }
 else
 {
 modeBtnTextArea.setTypedText(TypedText(T_NUMMODE));
 if (uppercaseKeys)
 {
 keyboard.setKeymappingList(&keyMappingListNumUpper);
 }
 else
 {
 keyboard.setKeymappingList(&keyMappingListNumLower);
 }
 }
}
 
void CustomKeyboard::backspacePressedHandler()
{
 uint16_t pos = keyboard.getBufferPosition();
 if (pos > 0)
 {
 //Delete the previous entry in the buffer and decrement the position.
 buffer[pos - 1] = 0;
 keyboard.setBufferPosition(pos - 1);
 
 //Change keymappings if we have reached the first position.
 if (1 == pos)
 {
 firstCharacterEntry = true;
 uppercaseKeys = true;
 setKeyMappingList();
 }
 }
}
 
void CustomKeyboard::capslockPressedHandler()
{
 uppercaseKeys = !uppercaseKeys;
 setKeyMappingList();
}
 
void CustomKeyboard::modePressedHandler()
{
 alphaKeys = !alphaKeys;
 
 // if we have changed back to alpha and still has no chars in the buffer,
 // we show upper case letters.
 if (firstCharacterEntry && alphaKeys)
 {
 uppercaseKeys = true;
 }
 else
 {
 uppercaseKeys = false;
 }
 setKeyMappingList();
}
 
void CustomKeyboard::keyPressedhandler(Unicode::UnicodeChar keyChar)
{
 // After the first keypress, the keyboard will shift to lowercase.
 if (firstCharacterEntry && keyChar != 0)
 {
 firstCharacterEntry = false;
 uppercaseKeys = false;
 setKeyMappingList();
 }
}
 
void CustomKeyboard::setTouchable(bool touch)
{
 Container::setTouchable(touch);
 keyboard.setTouchable(touch);
}
 
Unicode::UnicodeChar* CustomKeyboard::getBuffer() // add
{
 return keyboard.getBuffer();
}

You need to change not only the setPosition call on the keyboard/fix the height and width, but also change the position/height/width for the mode button as well, I missed this my first time around and my mode button was halfway up the screen. The last thing you need to do is create new keyboard recourses, which I did/just doubled the size of the original files, Ill attach those to this post. Just download and name the files the appropriate name and put them into the /assets/images directory.

[emptymind]

Wow, big thanks from me. I'd also edited size, but scaled to 640 x 360

---

#ifndef KEYBOARD_LAYOUT

#define KEYBOARD_LAYOUT

#include <touchgfx/widgets/Keyboard.hpp>

#include <touchgfx/hal/Types.hpp>

#include <fonts/ApplicationFontProvider.hpp>

#include "BitmapDatabase.hpp"

using namespace touchgfx;

#define KB_X_SHIFT     14

#define KB_X_SHIFT2    126

#define KB_SYM_X_SP    4

#define KB_SYM_WIDTH   52

#define KB_Y_SHIFT     91

#define KB_SYM_Y_SP    66

#define KB_SYM_HEIGHT  60

#define KB_SP_WIDTH    504

/**

 * Array specifying the keys used in the CustomKeyboard.

 */

static const Keyboard::Key keyArray[30] =

{

   { 1, Rect(KB_X_SHIFT, KB_Y_SHIFT, KB_SYM_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},

   { 2, Rect(KB_X_SHIFT + (KB_SYM_WIDTH + KB_SYM_X_SP), KB_Y_SHIFT, KB_SYM_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},

   { 3, Rect(KB_X_SHIFT + (KB_SYM_WIDTH + KB_SYM_X_SP) * 2, KB_Y_SHIFT, KB_SYM_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},

   { 4, Rect(KB_X_SHIFT + (KB_SYM_WIDTH + KB_SYM_X_SP) * 3, KB_Y_SHIFT, KB_SYM_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},

   { 5, Rect(KB_X_SHIFT + (KB_SYM_WIDTH + KB_SYM_X_SP) * 4, KB_Y_SHIFT, KB_SYM_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},

   { 6, Rect(KB_X_SHIFT + (KB_SYM_WIDTH + KB_SYM_X_SP) * 5, KB_Y_SHIFT, KB_SYM_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},

   { 7, Rect(KB_X_SHIFT + (KB_SYM_WIDTH + KB_SYM_X_SP) * 6, KB_Y_SHIFT, KB_SYM_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},

   { 8, Rect(KB_X_SHIFT + (KB_SYM_WIDTH + KB_SYM_X_SP) * 7, KB_Y_SHIFT, KB_SYM_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},

   { 9, Rect(KB_X_SHIFT + (KB_SYM_WIDTH + KB_SYM_X_SP) * 8, KB_Y_SHIFT, KB_SYM_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},

   {10, Rect(KB_X_SHIFT + (KB_SYM_WIDTH + KB_SYM_X_SP) * 9, KB_Y_SHIFT, KB_SYM_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},

   {11, Rect(KB_X_SHIFT + (KB_SYM_WIDTH + KB_SYM_X_SP) * 10, KB_Y_SHIFT, KB_SYM_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},

   {12, Rect(KB_X_SHIFT, KB_Y_SHIFT + KB_SYM_Y_SP, KB_SYM_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},

   {13, Rect(KB_X_SHIFT + (KB_SYM_WIDTH + KB_SYM_X_SP), KB_Y_SHIFT + KB_SYM_Y_SP, KB_SYM_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},

   {14, Rect(KB_X_SHIFT + (KB_SYM_WIDTH + KB_SYM_X_SP) * 2, KB_Y_SHIFT + KB_SYM_Y_SP, KB_SYM_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},

   {15, Rect(KB_X_SHIFT + (KB_SYM_WIDTH + KB_SYM_X_SP) * 3, KB_Y_SHIFT + KB_SYM_Y_SP, KB_SYM_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},

   {16, Rect(KB_X_SHIFT + (KB_SYM_WIDTH + KB_SYM_X_SP) * 4, KB_Y_SHIFT + KB_SYM_Y_SP, KB_SYM_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},

   {17, Rect(KB_X_SHIFT + (KB_SYM_WIDTH + KB_SYM_X_SP) * 5, KB_Y_SHIFT + KB_SYM_Y_SP, KB_SYM_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},

   {18, Rect(KB_X_SHIFT + (KB_SYM_WIDTH + KB_SYM_X_SP) * 6, KB_Y_SHIFT + KB_SYM_Y_SP, KB_SYM_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},

   {19, Rect(KB_X_SHIFT + (KB_SYM_WIDTH + KB_SYM_X_SP) * 7, KB_Y_SHIFT + KB_SYM_Y_SP, KB_SYM_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},

   {20, Rect(KB_X_SHIFT + (KB_SYM_WIDTH + KB_SYM_X_SP) * 8, KB_Y_SHIFT + KB_SYM_Y_SP, KB_SYM_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},

   {21, Rect(KB_X_SHIFT + (KB_SYM_WIDTH + KB_SYM_X_SP) * 9, KB_Y_SHIFT + KB_SYM_Y_SP, KB_SYM_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},

   {22, Rect(KB_X_SHIFT + (KB_SYM_WIDTH + KB_SYM_X_SP) * 10, KB_Y_SHIFT + KB_SYM_Y_SP, KB_SYM_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},

   {23, Rect(KB_X_SHIFT2, KB_Y_SHIFT + KB_SYM_Y_SP * 2, KB_SYM_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},

   {24, Rect(KB_X_SHIFT2 + (KB_SYM_WIDTH + KB_SYM_X_SP), KB_Y_SHIFT + KB_SYM_Y_SP * 2, KB_SYM_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},

   {25, Rect(KB_X_SHIFT2 + (KB_SYM_WIDTH + KB_SYM_X_SP) * 2, KB_Y_SHIFT + KB_SYM_Y_SP * 2, KB_SYM_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},

   {26, Rect(KB_X_SHIFT2 + (KB_SYM_WIDTH + KB_SYM_X_SP) * 3, KB_Y_SHIFT + KB_SYM_Y_SP * 2, KB_SYM_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},

   {27, Rect(KB_X_SHIFT2 + (KB_SYM_WIDTH + KB_SYM_X_SP) * 4, KB_Y_SHIFT + KB_SYM_Y_SP * 2, KB_SYM_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},

   {28, Rect(KB_X_SHIFT2 + (KB_SYM_WIDTH + KB_SYM_X_SP) * 5, KB_Y_SHIFT + KB_SYM_Y_SP * 2, KB_SYM_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},

   {29, Rect(KB_X_SHIFT2 + (KB_SYM_WIDTH + KB_SYM_X_SP) * 6, KB_Y_SHIFT + KB_SYM_Y_SP * 2, KB_SYM_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_KEY_HIGHLIGHTED_ID},

   {30, Rect(KB_X_SHIFT2 - 2, KB_Y_SHIFT + KB_SYM_Y_SP * 3, KB_SP_WIDTH, KB_SYM_HEIGHT), BITMAP_KEYBOARD_SPACE_HIGHLIGHTED_ID}

};

/**

 * Callback areas for the special buttons on the CustomKeyboard.

 */

static Keyboard::CallbackArea callbackAreas[3] =

{

   {Rect(KB_X_SHIFT, 223, 112, KB_SYM_HEIGHT), 0, BITMAP_KEYBOARD_KEY_SHIFT_HIGHLIGHTED_ID},    // caps-lock

   {Rect(516, 223, 112, KB_SYM_HEIGHT), 0, BITMAP_KEYBOARD_KEY_DELETE_HIGHLIGHTED_ID}, // backspace

   {Rect(KB_X_SHIFT, KB_Y_SHIFT + KB_SYM_Y_SP * 3, 112, KB_SYM_HEIGHT), 0, BITMAP_KEYBOARD_KEY_NUM_HIGHLIGHTED_ID},      // mode

};

/**

 * The layout for the CustomKeyboard.

 */

static const Keyboard::Layout layout =

{

   BITMAP_KEYBOARD_BACKGROUND_ID,

   keyArray,

   30,

   callbackAreas,

   3,

   Rect(30, 15, 11 * (KB_SYM_WIDTH + KB_SYM_X_SP), KB_SYM_HEIGHT),

   TypedText(T_ENTEREDTEXT),

#if !defined(USE_BPP) || USE_BPP==16

   0xFFFF,

#elif USE_BPP==24

   0xFFFFFF,

#elif USE_BPP==8

   0xFF,

#elif USE_BPP==4

   0xF,

#elif USE_BPP==2

   0x3,

#else

#error Unknown USE_BPP

#endif

   Typography::KEYBOARD,

   0

};

#endif