Building a Touchscreen Interface for Raspberry Pi

A step-by-step guide to your first Smart Home hardware project

Image for post
Image for post

The idea of home automation (or the “smart home”) has seemed “not too far off” for years now. In the past five years there has been an explosion of new tools, such as Nest’s self-learning thermostat (unveiled in 2011), or Amazon’s Echo (2014) which sought to be both a personal assistant as well as a hub for the dizzying new array of home-automation gadgets.

However, tech in the home has been around for quite a long time. In 1898, Nikola Tesla demonstrated the ability to control a toy boat using a disconnected joystick that transmitted radio waves to a primitive receiver. You may be familiar with this technology today in your TV’s remote control.

And in 1620, English inventor Cornelius Drebbel invented the precursor to an automated technology that we rely on every day — the thermostat (Tiere, page 42). He used his for controlling the temperature in his chicken coops, and probably could never have imagined the potential revenue that devices of that kind would eventually generate. In 2014, Google purchased Nest, for $3.2 Billion.

The truth is, we often overvalue the price to pay for home automation. Rather than fork over $250 for a new self-learning thermostat or $180 for a robot assistant, you can build your own customized smart home for quite a bit less money.

Image for post
Image for post
Image for post
Image for post

I originally had the idea in January of 2016 to use my brand-new Raspberry Pi 2 Model B to control music in my bedroom, and to eventually expand the system to control lights, temperature, etc. In addition, I wanted this system to be easily accessible, but not distracting/cluttering of my living space. After some initial early research, I decided that a touch panel interface to control the RPi would best fit what I wanted (and have the added bonus of looking pretty cool).

Image for post
Image for post
Adafruit’s ‘Pi Foundation Display — 7” Touchscreen’. Currently $80 without shipping.

There are already a number of possible touchscreen displays available for RPi’s, many of them targeting the surprisingly robust car-dashboard-mounted-touchscreen-enthusiast community. For $70 — $80, these are still a much cheaper alternative to many smart home hubs out there. However, I’m a poor college student, and I prefer to be like Cornelius. If you’re like me, read on.

I purchased Tontec’s 7” LCD touch screen display kit for $50 back in January (it has since dropped in price to $40). After finding myself woefully unprepared for the task, and with the spring semester starting, I abandoned the project when winter break ended.

For this project, I will take another (more informed and careful) stab at setting up this wall-mounted controller. This first article will focus mainly on describing the electronic components of the touchscreen, wiring, configuring the Raspberry Pi, and manipulating Linux Graphical User Interface (GUI). Keep in mind that while this guide is intended to help others get started in setting up touch-responsive systems with a Raspberry Pi, it is far from complete or comprehensive, and I am still learning myself.

Image for post
Image for post

Here is a list of the components that I used. You might be able to get by with switching these out with different models, but I won’t guarantee that your experience will be the same.

  1. Raspberry Pi 2 Model B. I bought this before the RPi 3 was released. Right now the RPi3b is going on Amazon for $35. I bought mine as part of a starter kit, which included an AC to micro-USB converter/power cable and a protective case for $50. Buy the Pi that suits your project, but for this tutorial you will need at least a Model B (for the internet capabilities and number of USB ports).
  2. 7" 800*480 LCD Panel (by Tontec). The model that I’ve linked here seems to be the most commonly purchased item for this type of DIY project. You can buy the LCD panel and touchscreen pane separately, but they are cheapest as a package. It also comes with an HDMI/VGA controller board, ribbon cable, five button switch, and RF remote. Note: this kit does not come with an AC/DC 12V adapter cord. You probably have one of these laying around your house, but if not, here’s an option. These things come in handy.
  3. 7" Resistive Touchscreen Panel (by Tontec). This comes with the package linked in #2, but if you are looking to make something touch-sensitive other than a screen, you can buy this panel by itself. Note that if this is the case, you will need some external monitor to display the RPi’s graphical interface while installing the appropriate drivers. This also comes with a USB output cable.
  4. MicroSD card (and SD adapter). If you have one sitting around that you don’t use, feel free to commandeer it. Keep in mind that you won’t be able to use it again while the RPi is in service, since it will hold the RPi system image. It also needs to be at least 8 GB (the one I linked above is $11 and 32GB — flash memory is cheap nowadays). Alternatively, you can buy a card with the right software pre-installed.
  5. Computer with SD card input, for flashing the Raspberry Pi system image if you go that route, and for research while you’re installing.
  6. HDMI to HDMI cable, for connecting the Raspberry Pi to the LCD.
  7. USB keyboard, to control the Raspberry Pi before touchscreen is set up.
  8. USB Mouse, to control the Raspberry Pi before touchscreen is set up.
  9. Ethernet cord/connection OR USB WiFi Dongle. You will need one of these to download and install the touchscreen drivers onto the RPi.

Finally, here are some components that you may want, but are not necessary:

  1. External display, for testing the Raspberry Pi before the screen is set up.
  2. 3.5 mm auxiliary cord, for running music from the Raspberry Pi to speakers.
Image for post
Image for post
The Raspberry Pi 2 Model B in a protective case. 4 times as many USB ports as the new Macbook!
Image for post
Image for post

Alright, we have all of our components, let’s get started on hooking them up. This first phase should be fairly self-explanatory, but I’ll try to walk you through it with pictures. Start off by hooking up the Raspberry Pi and LCD display via HDMI. You’ll need these two at least to set up all the other components, including the touchscreen, wifi, etc.

Image for post
Image for post
HDMI in…
Image for post
Image for post
HDMI out!

Connect the keyboard, mouse, and Ethernet/WiFi to the RPi’s USB/Ethernet ports.

Connect the five button switch with the ribbon cable to the LCD panel controller board.

Image for post
Image for post
5-button switch connected with ribbon cable.

Lastly, we will take the time now to wire up the touchscreen, and then set it aside while we get the RPi running. Despite what the pictures may look like, these are physical connections, no soldering or use of other tools are necessary. If you would like to attach the touchscreen to the LCD panel (I just taped it on) you may, but this isn’t necessary.

Image for post
Image for post
The film ribbon coming from the touch panel is the trickiest — be gentle with this connection.
Image for post
Image for post
Image for post
Image for post
These other two should just slide into place.

You’re all set! Plug in the power for the LCD and you should see a blue screen that says “no signal”. Try using the 5-button panel or the remote control to adjust the brightness/contrast settings.

Linux — Installation and Display

We are ready to turn on the Raspberry Pi, but it won’t do much without the operating system installed. We will leave this step out of the scope of our instructions, but there is a good tutorial on the Raspberry Pi website — https://www.raspberrypi.org/documentation/installation/noobs.md. Note that we used NOOBS to install Raspbian Wheezy.

After you have the operating system installed on an SD card, plug it into your Pi (the card reader is located on the bottom of the board). Next, turn on your Raspberry Pi with the AC to micro-USB converter/cable. Your Pi should boot and you should be able to follow the onscreen instructions. Use the keyboard and mouse to input. Your default username will be “pi” and your password will be “raspberry”.

If you plugged in your Ethernet cord or WiFi USB dongle they should automatically configure.

Image for post
Image for post
The Micro-SD card slot is on the bottom of the RPi.
Image for post
Image for post
Voilà!

Take some time to familiarize yourself with the Linux interface if you haven’t used it before.

Touchscreen — Just Another Input Device

Finally, we have gotten down to the real beef of this tutorial — setting up the touchscreen. First, a little bit of an intro on touchscreens.

There are two main categories of touchscreens. The first is capacitive — this category includes most smartphones and laptop touchpads, which work by sensing changes in capacitance along their planes. Human bodies act as capacitors (that is, they hold a small amount of electrical charge). So, when you touch your smartphone screen with a finger, it senses that charge and maps your touch to an x,y coordinate on the screen.

Our touchscreen falls into the second category — resistive. This includes Nintendo handheld game consoles (such as the DS or Gameboy). These are actually composed of two layers of conductive material on top of one another. When the top layer is touched, it bends and presses on the panel beneath it, completing a circuit. The voltage along this circuit can then be measured to figure out the x and y coordinates.

Resistive touchscreens have the benefit of being able to take input from any material — fingers, styluses, gloved hands, cards, etc. They are also generally cheaper. Capacitive screens tend to be more accurate, and are usually thinner, which make them great for smart phones.

However, all touchscreens are nothing more than input devices. Just like a mouse, they measure x and y coordinates along a plane, and send “click” or “hold” signals to the operating system.

Our operating system (known as Raspbian) uses the Linux kernel, and is very similar to the popular Debian OS (we are using Debian 8 — “Jessie”, the most recent version as of this writing. You can find out your version by opening a terminal and typing “cat /etc/debian_version”). Debian uses an X Window System called Xorg to display the graphical user interface and to handle input signals.

So, our job is to tell Xorg how to handle the input it receives from the touchscreen. We will do this using the Xinput utility.

First, make sure that your system is up to date. In a new terminal, type:

sudo apt-get update

sudo apt-get upgrade

You may have to reboot if changes are made.

Next, we will need to use some developer’s tools for Xorg. Install 4 pacakges: libx11-dev, libxext-dev, libxi-dev, and x11proto-input-dev

sudo apt-get install libx11-dev libxext-dev libxi-dev x11proto-input-dev

If any one of these fails to install, try installing them one-by-one. For instance, libxi-dev wouldn’t install for me until I typed:

sudo apt-get install libxi-dev

Finally, we will install the open-source project “xinput-calibrator”. The code and documentation are available on Github, if you’re interested. In your terminal, type:

wget http://github.com/downloads/tias/xinput_calibrator/xinput_calibrator-0.7.5.tar.gz

tar -zxvf xinput_calibrator-0.7.5.tar.gz

cd xinput_calibrator-0.7.5.tar.gz

./configure

make 

sudo make install

You may have to restart after the installation is complete.

Great! Now all we need to do is calibrate our touchscreen to the LCD display. At this point, if you haven’t already mounted your touch panel to your display, do that. I used black electrical tape to do this, which isn’t the prettiest but gets the job done. Just make sure that your tape isn’t touching within the border of the input window (you should be able to see the wires) or it may trigger a touch.

After your touchscreen is attached, open a terminal and type:

xinput_calibrator

This will open a window with four targets for you to touch successively. (Pro tip: if you aren’t getting any response from the touchscreen, make sure it’s facing the right way!)

After you’re done calibrating, the program will spit out a bunch of stats into the terminal. You care about the part starting with (and including) ‘Section “InputClass”’ and ending with (and including) ‘EndSection’. Copy that!

Image for post
Image for post
We’re nearly there!

Now, we will log these coordinates in the appropriate configuration file. Use the following commands:

cd /usr/share/X11/xorg.conf.d/

nano 01-input.conf

This opens the file 01-input.conf in the nano editor. Paste your text here, then hit “Ctrl-X” to close and “Y” to save.

Image for post
Image for post

You did it! Your touchscreen should be working and should respond to any sort of touch input. Of course, this won’t be as fancy as a multi-touch resistive would be, but you will be able to operate simple apps just as you would with a mouse. Try opening a web browser and playing a YouTube video.

Moving forward, I would like to write my own program to run on the RPi to control my stereo, lights, etc. If you are looking for a new DIY project, there are plenty of examples available on the Raspberry Pi blog, and even more a short Google search away.

Lastly, thank you! I hope this article was helpful and wish you all the best with your projects. Happy hacking!

Alexander Long

Image for post
Image for post

I included most of my references as hyperlinks within the document. Those that I couldn’t find a place for are here.

Driver Board Installation

Xorg development guide

Xinput-calibrator documentation

Touchscreen technical information

Humanizing Tech

Helping you build what's next

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store