Click here to Skip to main content
Click here to Skip to main content

Touchscreen Keyboard UserControl

, 6 Apr 2006 CPOL
Rate this:
Please Sign up or sign in to vote.
A basic keyboard usercontrol suitable for touchscreen displays.

Sample Image - touchscreenkeyboard.jpg

Introduction

Long story short....

For a touch-screen enabled application for a local museum, I needed an onscreen keyboard for visitors to enter comments, search criteria, and whatever else may crop up during the design. After searching online, I found plenty of keyboards, but none that fit the bill. Most were just too small for use with fingers, or were otherwise unsuitable. I do not want users to be able to hit the Windows key, or use function keys, CTRL keys, etc. I did find one that almost fit the bill - I could design my own layout with keys of my choice, it was sizeable, it remained on top, it was almost perfect. The problem was they wanted money for it! Well, that and a few other minor but workable details.

The solution: make my own. Utilizing my vast experience with C# (or any other version of C) totaling nearly 3 weeks now, I set out to make my own user control. The first step was to learn what it was and how to make one. The second step was to do it.

To get the demo to compile correctly, first open and build the source files, then open the demo file and delete TouchscreenKeyboard from the References file in the Solution Explorer, then re-add it with Add Reference / Browse / {add TouchscreenKeyboard.dll from the directory you saved the SRC file to}.

Creating the Keyboard

The first step was to make a keyboard which, for this example, is just a JPG image I made using Paint - I tried to photograph my own keyboard, but because of the flash-glare, I couldn't get a workable picture to restructure. I decided to make three different types of keyboards, one with a standard QWERTY layout, one where I reordered the letter keys alphabetically, and the third for younger kids. The keyboard can be set both at design time and changed programmatically without affecting any existing user-typed text. The user control consists of just four PictureBoxes, one holding the selected keyboard, and three "empty" ones used to simulate the Shift and Caps Lock keys depressed.

Note that for the kids keyboard, the entire keyboard is replaced (one has lowercase and the other has uppercase letters), and the three PictureBoxes are hidden.

Sample Image - standardkeyboard.jpg

Sample Image - alphabeticalkeyboard.jpg

Sample Image - kidsupperkeyboard.jpg

Sample Image - kidslowerkeyboard.jpg

The next step was to layout the grid for determining which key was pressed. I simply divided the keyboard into two sections, the main key section, and the cursor movement section, then split each into rows, and columns for each row, resulting in a (x,y) range for each key. The standard and alphabetical keyboards share the same grid, and I use Swith Case code to swap letters if required. The kids keyboard required its own grid. About halfway through, I realized that I need to account for resizing the control, so hard-coding (x,y) coordinates and using the mouse-click coordinates would not work. The simple solution: all locations are merely a ratio of the total length and width of the keyboard. Obviously, it is easier to adjust the mouse-click position than to adjust the position of each key, so using the original size of the keyboard, a resized (x,y) mouse-click coordinate would be determined as shown in the control's MouseClick event:

private void pictureBox1_MouseClick(object sender, MouseEventArgs e)
{
     Single xpos = e.X;   // mouse X coordinate
     Single ypos = e.Y;   // mouse Y coordinate

     xpos = 993 * (xpos / pictureBox1.Width);  // 993 = fullsize width
     ypos = 282 * (ypos / pictureBox1.Height); // 282 = fullsize height

     mstrKeyPressed = HandleTheMouseClick(xpos, ypos);
     KeyboardEventArgs dea = new KeyboardEventArgs(mstrKeyPressed);
     OnKeyThrown(dea);
}

The same methodology is used to determine the (x,y) coordinates for locating the Shift and Caps Lock PictureBoxes, and their new sizes. This is done within the controls' SizeChanged event.

private void pictureBoxKeyboard_SizeChanged(object sender, EventArgs e)
{
     // position the capslock and shift down overlays

     pictureBoxCapsLockDown.Left = 
       Convert.ToInt16(pictureBoxKeyboard.Width * 5 / 993);
     pictureBoxCapsLockDown.Top = 
       Convert.ToInt16(pictureBoxKeyboard.Height * 115 / 282);
     pictureBoxLeftShiftDown.Left = 
       Convert.ToInt16(pictureBoxKeyboard.Width * 5 / 993);
     pictureBoxLeftShiftDown.Top = 
       Convert.ToInt16(pictureBoxKeyboard.Height * 169 / 282);
     pictureBoxRightShiftDown.Left = 
       Convert.ToInt16(pictureBoxKeyboard.Width * 681 / 993);
     pictureBoxRightShiftDown.Top = pictureBoxLeftShiftDown.Top;


     // size the capslock and shift down overlays

     pictureBoxCapsLockDown.Width = 
       Convert.ToInt16(pictureBoxKeyboard.Width * 110 / 993);
     pictureBoxCapsLockDown.Height = 
       Convert.ToInt16(pictureBoxKeyboard.Height * 55 / 282);
     pictureBoxLeftShiftDown.Width = 
       Convert.ToInt16(pictureBoxKeyboard.Width * 136 / 993);
     pictureBoxLeftShiftDown.Height = 
       Convert.ToInt16(pictureBoxKeyboard.Height * 55 / 282);
     pictureBoxRightShiftDown.Width = 
       Convert.ToInt16(pictureBoxKeyboard.Width * 135 / 993);
     pictureBoxRightShiftDown.Height = pictureBoxLeftShiftDown.Height;
}

For the standard and alphabetical keyboards, I wanted them to behave like regular keyboards, that is Caps Lock on will only return capitalized letters, and not ! instead of 1. This is handled by the functions HandleShiftableKey(string theKey) and HandleShiftableCaplockableKey(string theKey). For this control, Shift remains active for one key-press, and Caps Lock remains on until clicked again.

As shown in the demo project, the value of the key pressed is returned via the control's UserKeyPressed method.

private void keyboardcontrol1_UserKeyPressed(object sender, 
             KeyboardClassLibrary.KeyboardEventArgs e)

// this is demo project code showing
// how the control can be used
{
     // ensures focus is on the textbox control
     richTextBox1.Focus();
     // Sendkeys.Send(key) acts as though
     // a standard keyboard key was pressed.
     SendKeys.Send(e.KeyboardKeyPressed);
}

That's pretty much it. The source file contains everything for creating the control, and the demo project contains everything for the sample application pictured above. There isn't a whole lot of code, so tracing it to see how it works (or controls in general) should be easy. This is my first control and the first article I've ever written, so I'd appreciate any comments.

Update History

April 06, 2006

  • Replaced the single keyboard with the three different types of keyboards.
  • Added property KeyboardType to the control to select the type of keyboard to display.
  • Replaced simulated Shift and Caps Lock LEDs with depressed-key images.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

FoxholeWilly
Web Developer
United States United States
For the past 11 years or so I worked exclusively on developing client/server and web applications with Oracle Forms. I needed to learn something new and recently found all those nice freebie Visual Studio Express applications so I spent an afternoon downloading all of them, along with the .NET 2 framework and the SQL Server 2005 Express edition and a few other goodies.
 
My first project was a match scheduling application I made for my online Call of Duty 2 clan using Visual Web Developer tied to a SQL Server database. I found an inexpensive hosting provider, and that's where it now lives.
 
I started playing with C# in early March 2006 and realized it would be of use for a project I will be working on - a touchscreen display application for a local museum, so that is currently what I am concentrating on.

Comments and Discussions

 
Bughow i can find the touchscreenKeyboard.dll Pinmemberluigi luccarelli27-Sep-12 23:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.141220.1 | Last Updated 6 Apr 2006
Article Copyright 2006 by FoxholeWilly
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid