You are here

LCD + buttons I/O board


My current project is an Internet radio, i.e. a radio that streams its sound over WiFi from radio stations on the internet. This project has several different aspects to it: the software for streaming the data, and decoding it (using the Helix MP3 decoder); the hardware for turning the decoded sound samples into actual sound, and an enclosure to house the electronics.

The radio software runs on a WiFi-enabled ARM Cortex-M4 microcontroller; in my case this is a Texas Instruments CC3200 launchpad. The sound path consists of an MCP4921 DAC, driven over SPI by the CC3200. The output of the DAC is piped into an amplifier: initially, a very basic LM386; later a more powerful TBA820; and I'm working on Class-D amplifier based on a MAX4295 chip.

The enclosure is intended to be living-room quality, but the first version reuses the enclosure from my previous (failed) FM radio project, with an adapted front panel. As you can see from the picture, the output uses an Adafruit Nokia 5110 LCD screen, and input is done using a row of 4 buttons. The LCD is mounted on a breakout board, and the buttons are mounted on a separate breakout board, which is in fact a part of the "full" radio PCB that I sawed off for this purpose. (The "full" PCBs were manufactured in China: a pack of prototype PCBs contains around 10 boards, out of which I would use only 3 or 4, so I could easily sacrifice one to use for mounting the buttons.)

It looks and works OK, but the way everything is mounted in the case is a bit of a mess:

internetradio using recycled enclosure original I/O setup

More elegant solution

A more elegant solution would be to have an integrated front panel, with the LCD screen and the buttons mounted on the same board. That way they can be better aligned, and mounted closer to the surface. It also saves a bunch of wires going to the various components, since e.g. power supply can be grouped for several functions.


The Nokia LCD screens can be bought for cheap on Aliexpress; they are used screens though, so the quality varies: some are pristine, but others will have scratches, or other defects. The ones I bought turned out to be of the LPH 7366 type. This page has a bunch of info on these and other Nokia LCD types:

The LCD is held in place using metal lips that go through the PCB, and that can click in place, or that can be twisted. I didn't know how to design the slots in Eagle, so they were approximated using several drill holes next to each other. This is not so clean, but it worked fairly well. It should be noted that the LCDs do not come with backlight LEDs, so you have to provide these yourself. The LCD enclosure does have cutouts for them.

Here is an Eagle footprint for the LPH-7366 LCD: Eagle footprint for LPH-7366. The footprint shows where the cutouts for mounting the LCD need to be, and also where the LEDs for the backlight have to be placed.

The board

In fact, the I/O board would have to perform 3 functions:

  1. buttons  the buttons are pull-up buttons: the GPIO pins are configured with pull-down resistors, and pressing a button pulls the corresponding GPIO pin high. So, for this function, the board will have the 4 buttons, each with a 1kΩ protection resistor, connecting the corresponding pin header connections to Vcc.
  2. LCD control lines  these go from the pin header connections to the LCD connector. In addition to the control lines, we also connect Vcc and GND. We don't expose the Chip Select line, since the presence of the Data/Command line in the LCD bus makes it "not quite SPI", and we'll have to bit-bang the protocol using GPIO pins anyway.
  3. LCD backlight  the backlight consists of 4 LEDs protected by 100Ω resistors. In order to have a dimmable backlight, we can use a PWM power supply, but we can't connect the 4 LEDs directly to a PWM pin on the microcontroller. So the board will have a NPN transistor to switch the LEDs on and off from a tiny signal.

The board will have a 12-pin header to connect a cable to, with the following pin assignments:

1 unconnected
2 LED backlight control
3 Reset (RST)
4 Data / Command (D/C)
5 Clock (CLK)
6 Data (SDI)
7 S1 (leftmost button)
8 S2
9 S3
10 S4 (rightmost button)
11 3.3V
12 GND

The boards were ordered from a Chinese PCB house as "prototype", which means you get 10 boards, give or take a few. Given that I also got 10 LCDs, I ordered enough parts to make 6 or 7 complete boards. Most of them worked OK, but it was not easy to make the LCDs have (and keep) good contact with the PCB. Good alignment of the LCD is also critical to get a good picture. If it is not well aligned, you may get no image, or an all-black image, or poor/uneven contrast.

This is the result:
new IO board, connected to CC3200 launchpad

This is my first SMD board, using mostly 1206 size components (the largest SMD variant), and some 0805 size components, notably the backlight LEDs. With a magnifying glass, a pair of metal tweezers, and by pre-tinning one pad per component for fixing it before soldering all pads, assembling the boards was much easier than I had expected. Of course, the board only has resistors, one capacitor, and one NPN transistor, so there were no complex components.

(The wire across the pinheader connects the LED input pin to Vcc, so the backlight will be on even with a 10-strand flatcable instead of a 12-strand one.)


In addition to having both the screen and the buttons on the same panel, the mounting plate becomes much simpler as well:

mounting panel, front mounting panel, back
mounting panel, with components mounting panel, with front cover


This archive contains the Eagle schematic and board file for the I/O board: