Virtual Keyboard for PiTFT Moderators: adafruit_support_bill, adafruit

[wbp]

I needed a touch keyboard for some projects using the most excellent Adafruit PiTFT. I found Tony Maro's Virtual Keyboard project, originally for a Nokia tablet, and modified it to work on the Adafruit PiTFT display. This is specifically for the PiTFT - the sizes and display support are all set for the PiTFT in landscape mode.

At present there is no support for Alt, Tab or Ctrl but they could be easily added. It does support tapping in the text input area to move the input cursor (I just got that working today). The Shift key is locking; tap it again to turn off.

One change I am working on is to have a pop-up display of the currently selected key to make it easier to get the right key. Right now it highlights them but if you are using a finger it's hard to see. With this change you can slide your finger around until you get the key you want and then let go to select it.

It's fully open source under GNU V3. It's up on my Github repo: https://github.com/wbphelps/VKeyboard

William Phelps

[adafruit_support_mike]

Nice! Thank you for posting it! ;-)

[adafruit]

neat, can you post a photo so people will know what a virtual keyboard is? :)

[wbp]

How about two?

virtual keyboard, lowercase, entering date & time

20140224_160708.jpg (61.78 KiB) Viewed 1414 times

with shift key pressed

20140224_160913.jpg (60.07 KiB) Viewed 1414 times

[adafruit]

oooh fancy!

[McCloud84]

This is awesome thanks!!
I've just tried adding it to my internet radio project (http://forums.adafruit.com/viewtopic.php?f=50&t=50491) as a way of adding extra stations. It worked really well straight away, but there were a couple of odd things that I noticed.

When the text string is longer than the display you can't see what the last letters are. Is there a way of making the display scroll or something?

Also I found that if I entered the keyboard screen and then tried to exit it using the 'X' button, it caused the buttons on my original script to stop working. It may have something to do with how I am using the keyboard, but being a bit of a noob I'm not really sure.

Will carry on playing around with it and will let you know how I get on!

Thanks again :D

[wbp]

I'm glad you like it and find it useful!

The input area is limited by the space available and the font. There are a couple of things you could do - I used a fixed width font but you could switch to a variable width font (like Arial) and get more characters. It could also be modified to be multi-line - pygame does not support multi-line text, so this would have to be done by calculating the space needed and splitting the line - pretty easy if the font is fixed width. For a variable pitch font probably best done by looping until the text fits in the space available.

I could probably use a multi-line version at some point so I'll see if I can get that working.

Scrolling the text would require adding 2 more keys, left and right cursor. I like being able to see all of the text and touch where you want to put the cursor.

When you touch "X" to exit, it returns an empty string. Is your program checking for this?

This is the beauty of open source - I needed a virtual keyboard for my PiTFT projects, and Tony Maro was kind enough to post one he had done on the web. It would have taken so much longer to do this from scratch!

William

[McCloud84]

Thanks for the reply.

My script isn't checking for an empty string, no. I'll play about with that, cheers.

If you do get a multi-line version working I would be really interested in trying it out!
I found some code online which allowed text wrapping and used it in my radio project for when the track names were really long. Don't know if that would help you at all?

Really enjoying all this open souce code! And it's great how helpful people are, especially with me asking silly questions :)

Thanks, Andrew

[McCloud84]

Hi..
I changed my code so that it looked for an empty string which has solved the issue with the original script stopping.

I've also changed the typeface and font size so that I can fit more characters in the input area, and I've changed some of the colours so that it is more consistent with my project. Is it possible to add a background image? If so, where abouts in the code would it go? I can see a few places where it refers to a background, but I don't really understand the code well enough to know what to change.

Thanks, Andrew

[wbp]

Andrew,

The background surface is created with this line in class VirtualKeyboard:
self.background = pygame.Surface((320,240))

To load an image instead, use this:
self.background = pygame.image.load("someimage.png")

You can also set the background to be transparent, as it was in the original version, see this line:
self.keylayer.set_alpha(100)

Which brings up a point - the original version had a background and a transparent overlayer for the keys. I found that very distracting on this small screen, so I left alpha at default, which is opaque. If you look at the code you'll see there are actually two surfaces, both the same size, one on top of the other, the "background" and the "keylayer". Since both are the same size, we don't really need both now. I'll fix that...

I've got a 2 line input text box now, and I"m working on splitting the text. I'll post the update when I've got it working.

William

[McCloud84]

Brilliant, thank you.

I've managed to get the background loaded in and that all works fine. I think I see what mean about background and keylayer, I ended up add the background image to both to make sure it displayed properly.

I played around with the alpha setting on the keylayer but that only changed the area around the keys. How do you change the alpha of the keys themselves?

I found the colours for the keys and changed that, but couldn't change the alpha?

Cheers, Andrew

[wbp]

Andrew,
There is a line of code that sets the alpha for the key background. Use your editor's search function to search for "alpha" and you'll find it.
William

[wbp]

Andrew,

Just posted an update to Github. It now has a 2 line input area, and a (slightly) transparent backgound. Let me know how you get on with it.

Note that the args have changed - screen is passed when you create the class now, not on run().

William

[McCloud84]

Thanks, I will have a go with it this evening and let you know how I get on.