Project for improving touch typing

Processing Project Guidance
1

Hello All!

I bring a project to help us, one for all, with our touch typing.

What I want is to have the image of our fingers on the keyboard in the very computer’s screen. So we can stop looking down to the keyboard while writing.

As you can see in the images I will install a small webcam atached to my keyboard.

Then this camera will record the keyboard and my fingers, I need to crop the image so I have just the area of the keys.

Secondly on top of the webcam image I will have a panel that matches my keyboard, this panel helps showing the key covered by our fingers and make a feed back of the keys pressed.

I have tested this out with my phone’s camera and the feeling is great.

The camera’s code looks easy, I just used somethig like:

import processing.video.*

Capture cam;

void setup(){

size(640,480);
cam = new Capture(this, 640, 480);
cam.start();
}

I have a camera running, now I need to create a rectangular cursor that crops the image, pehaps some rotation too, with scale().

I need as well to configure the key’s panel, transparent, that reacts to the keys pressed. I don’t know how to aproach this

I’d love to hear about your way to aproach this, and I’d love even more to help someonewith their touch typing.

Thanks

camera
camera2712×3348 1.48 MB

2 Likes
2

Hi @AlbertoGiSa ,

Welcome to the forum! :wink:

This is a nice project, I have a some ideas based on what you said :

The issue I see with this is that your interface is strongly connected to the model / layout of the keyboard you are working with. It means that if someone else wants to use your program, you’ll need to make another keyboard layout to match the new one (if it’s a different keyboard)

I would create it in a vector based drawing software like Gimp or Adobe Illustrator then import it in Processing and display it on top of the camera.

The tricky thing to do is to map each letter to the corresponding region on the keyboard in order to highlight it and I can’t really see a way to do this other than by hand…

You can take a look at existing solutions that show a keyboard layout for reference like https://www.typingclub.com or https://www.keybr.com/:

image
image1075×889 76.3 KB

The other thing to take into account is the matching between your keyboard transparent wireframe image and the webcam output. The webcam needs to be placed perpendicular to the keyboard and you must avoid camera distortion introduced by the webcam.

But if you want to test it first with your webcam and your keyword it should be possible and fun to do!

1 Like