Arduino Touch Screen Keyboard




Introduction: Arduino Touch Screen Keyboard

With this Instructable you will be able to use your Arduino and a TFT shield as a touch screen 'piano' keyboard.


- responsive and quick touch screen

- keyboard includes sharps and flats

- you can change octaves with octave 'buttons' - the range is a full 7 octaves

- watch the demo video in Step 4 to see how it sounds.

Object oriented Arduino sketch

This project is an introduction to object oriented programming for the Arduino. Arduinos like objects so here we are going to give some to our Arduino.

Step 1: TFT Screen + Arduino / Buzzer and Monobox

Top picture: the Arduino / Adafruit TFT touch screen ( ) assembly connected to a buzzer (top picture). (You could also connect your Arduino to a small 8 ohm speaker, but will need a 100 ohm resistor between the digital output pin and the speaker.)

Bottom picture: the Arduino / Adafruit TFT touch screen connected to a monobox amplified speaker (bottom picture - a Make Magazine project ).

What we are going to do:

1. The Arduino sketch KeyboardOO demonstrates the use of the Adafruit touch screen shield as a 'piano' keyboard.
2. The 'OO' in the project title refers to Object Oriented. In KeyboardOO.ino normal Arduino style functions have been converted into object oriented program components.
If you have come to the Arduino with a background in object oriented programming, the attached sketch (keyboardOO.ino) will be sufficient explanation on its own.
But many of us, including the author of this Instructable, don't have the advantage of that programming knowledge. So the exercise of converting Arduino functions to classes and methods was at times mysterious and challenging. Luckily for me help was available, and I received substantial assistance. Thanks to Andrew Wendt for instructions and patience.

What we are going to use:

1. Arduino Uno
2. Adafruit 2.8" TFT touch screen shield for Arduino
3. A middle shield, made from a proto board that gives access to the Arduino pins that would have otherwise been covered by the TFT shield. The pictures showing the buzzer and monobox speaker show the bent-pin headers that give access to these pins. Step 2 gives further details.

Step 2: Make a Middle Shield to Give Access to Arduino I/O Pins

The Adafruit TFT shield covers all of the input / output pins on the Arduino Uno. But some of these pins are not used by the TFT shield, so they are available for other Arduino functions, such as in this case to send signals to a buzzer or speaker.
These are the pins that are not used by the TFT shield: 2,3,5,6,7 digital; 0-5 analog, and 4 digital if the sketch does not use the SD card.
To gain access to the available pins, make an intermediate shield with a proto board and straight through female headers for those pins that are needed by the TFT shield. Use 90 degree female headers for the pins that are available for other purposes.

(Note: it's the TFT touch screen shield that covers the I/O pins. If you were to use the non-shield version of the TFT screen (see ) you would not need an intermediate shield - but the shield version is very convenient.)

It's a bit tricky keeping all the pins straight when the two shields are assembled on the Arduino. Take care in aligning the shields.
Next install the piezo buzzer: plug one lead of the buzzer into Arduino pin A0 and the other lead into Arduino ground.

Step 3: The Arduino Sketch

Loading the Arduino sketch.
Five files are required. keyboardOO.ino - the main sketch, two header files Key.h and Button.h, and two implementation files, Key.cpp and Button.cpp.
Load the main sketch into your Arduino IDE. Open a tab for each of the .h files (Button.h and Key.h) and .cpp files (Button.cpp and Key.cpp) and save these files in their respective tabs. The picture above shows how the main sketch, keyboardOO.ino, will look after these files have been saved.

Here are the files:

Step 4: A Video Demonstration

Run the sketch. The TFT keyboard will now perform as a touch screen mini keyboard.

Here is a demonstration video of how it looks and sounds:

Step 5: Features of the Arduino Sketch

Sketch has been converted to object oriented style

Why was this done?

My reason: because it's fun to learn things, and Arduino is all about learning.

The technical reason: because once you have converted your sketch into separate, object oriented components, it is easier to maintain - and these 'code components' are available to be put to other uses - for instance, you can use them in other sketches.
(Note: the usual term used for this object oriented component approach is 'encapsulation'.)

List of sketch features:
KeyboardOO has a number of features. (Study the sketch to see how these features were implemented.)
- It uses a TFT calibration routine for the touch screen. This routine is taken from the Adafruit example sketch 'On -- Off Switch'.
- It has touch-screen keys and buttons that allow you to play notes and change musical octaves. A full 7 octaves are available.
- It has a routine that monitors state changes - whether a key touch has changed since the previous reading. This is necessary to ensure a single touch, no matter the duration, only changes the octave once (i.e. it avoids jumping octaves).
- It sets an array of musical notes and their frequencies at the first octave. Musical frequencies increase by a factor of 2 to the power n where n is the selected octave number. (See .) To make this frequency adjustment we have used the bitshift operator ">>" ( ). You could also use the power function "pow()" ( ) to achieve the same result.
- The keyboard keys and octave buttons have been converted to object oriented program components that draw the keys and buttons on the screen, and that check if a key or button has been touched.

Be the First to Share


    • Jewelry Challenge

      Jewelry Challenge
    • Fix It Speed Challenge

      Fix It Speed Challenge
    • Anything Goes Contest 2021

      Anything Goes Contest 2021



    5 years ago

    This is a very lovely project!. I'm sorry if i'm in the wrong place, but can anyone point me in the right direction for building a system that uses a barcode scanner to scan products, tally them up, and show the total cost of all? It should ideally use a barcode scanner, 5" or greater display, and arduino computer


    Reply 5 years ago

    Search for the youngpos is a point of sale made with a raspberry pi, a 5" touchscreen, a code scanner, and a printer


    5 years ago

    guys this is the thing i was looking for.thnks.hey if u have any more tft touch screen projets like this please post


    Reply 5 years ago

    Hi, thank you for the comment. We are working on a Snakes game that uses the TFT screen, but this time with a joystick, so it's not a touch screen project. But I suppose it could be a future Instructable.


    6 years ago

    Hi sir.

    My serial monitor show Unable to start touchscreen

    my touch screen only appear white blank screen.

    Please help.


    Reply 6 years ago

    Hello again. Possibly the sketch is set for the wrong type of touch sensor for your screen. It depends on what type you have - resistive or capacitive touch screen. If you think this might be the problem, check the sketch comments for help - and the Adafruit tutorial will also help. Good luck.


    Reply 6 years ago

    Hi. This Instructable uses the Adafruit TFT shield. If you are having trouble with the shield, follow the instructions at Adafruit's learning pages:

    Adafruit has very good tutorials - try one of their example sketches to see that the TFT shield is working properly. Once you are satisfied that it is, the Instructable sketch should perform properly.