Converting 5v LCDs to 3.3v and tweaking a MakeCode extension

When I RoadTested the Kitronik Klimate board recently and made a wireless weather station with it, I needed to display four values (temperature, humidity, atmospheric pressure and windspeed) plus some text, on a display.

As you can see in the photo above, it's hard to fit all the information onto a 16 x 2 display. I knew that a 20 x 4 display would be perfect for this, but there were two problems:

1. The micro:bit uses 3.3v logic levels but 3.3v 20 x 4 LCD displays are hard to find - and expensive.
2. I needed to program the micro:bit with Microsoft MakeCode because the Micropython driver for the Klimate board's BME280 completely uses up the limited micro:bit memory space once Micropython is loaded but nobody appears to have written a MakeCode extension for a 20 x 4 LCD display (2004A). However, there is a nice extension for the 16 x 2 LCD (1602A).

I decided to see if I could solve both problems.

1. Converting 5v LCD to 3.3v

I have previously converted 5v 16 x 2 LCDs to 3.3v, so why not do the same with a 20 x 4 display? I bought a 5v "2004A" display wih I2C backpack from a "favourite online auction site" for about £5. You can buy one without a backpack; I just bought this one because I wanted to use I2C to talk to the micro:bit.

These LCDs (and their 1602A equivalents) have unused pads on them including space for an 8-pin voltage convertor chip. This is designed to allow a 3.3v version of the display to be made by adding a charge pump negative voltage generator to the LCD module.

Converting the module to 3.3v is simply a matter of soldering the correct voltage converter chip (ICL7660ICL7660) onto the space provided (U6), plus two 10µF capacitors across pads marked C3 and C4 and a 2.2k Ohm resistor across pad R6.

The ICL7660 voltage convertor can be obtained for around £1. From the datasheet, you can see the minimum circuit to provide the necessary voltage reduction.

Finding the correct capacitors in small quantities was a bit more tricky. Unless you have access to some already, you'll probably have to buy 100. HereHere are some suitable ones. Actually, they were slightly too large for this display, but they were perfect for the 1602A LCDs and I had already bought 100, but they just about fitted onto the pads, so I used them anyway. The resistorresistor was a better size for this display and I only had to buy 10.

It can be seen that the voltage converter and additional capacitors are surface-mounted. Although they are more fiddly to solder than "through the hole" components, a normal soldering iron is fine (preferably with a fine tip). The technique I used is to melt some solder onto one of the pads for the 7660 chip then, holding the chip down against the pads, apply the soldering iron briefly to the relevant leg of the chip to remelt it and "fix" the chip in position. At this stage it is important to ensure that the chip is correctly aligned with all of the pads. If not, repeat this procedure until it is. Now, the other 7 legs of the chip can be soldered in place by heating each leg in turn and then dabbing the solder onto the leg. Miraculously, the solder will flow onto the pad and over the leg! Once you have soldered all 8 legs, check that there are no "bridges" between adjacent legs. If there are, a quick dab with the soldering iron should sort it out - if not, hold some solder wick between the affected bridge and the soldering iron and that should suck up the excess.

Now use a similar process for each of the capacitors and the resistor; melt some solder onto one of the pads, hold the capacitor in place on top of it, then reapply the soldering iron to melt it into position. Check the alignment, and repeat.

Job done!

2. Tweaking the 1602A MakeCode extension to support 20 columns and 4 lines

Microsoft MakeCode extensions for the micro:bit are written in TypeScript (an enhancement to JavaScript). These extensions add MakeCode blocks to support different devices and functions. The "official" extensions can be browsed within the MakeCode online compiler but you can upload your own extensions from a web address (such as GitHub). I had already used the excellent 1602A MakeCode extension for a 16 column, 2 row I2C LCD display and I asked the author if he had written one for the 20 column, 2 row equivalent. He said that he hadn't because he didn't have a device to test it on, so I decided to have a go at tweaking his code myself. It turned out to be remarkably easy. All the TypeScript code is in the file LCD1602_I2C.ts.

In the snippet below, I just added a couple of "else if"s to include the correct LCD commands to put the data onto the two extra rows.

1602A code

export function ShowString(s: string, x: number, y: number): void {
        let a: number

        if (y > 0)
            a = 0xC0
        else
            a = 0x80
        a += x
        cmd(a)

        for (let i = 0; i < s.length; i++) {
            dat(s.charCodeAt(i))
        }
    }

2004A code

export function ShowString(s: string, x: number, y: number): void {
        let a: number

        if (y > 2)
            a = 0xD4
        else if (y > 1)
            a = 0x94
        else if (y > 0)
            a = 0xC0
        else
            a = 0x80
        a += x
        cmd(a)

        for (let i = 0; i < s.length; i++) {
            dat(s.charCodeAt(i))
        }
    }

There were only a handful of other minor changes to the code needed (e.g. to allow data to be put on the display up to column 19 and row 3 (starting from column 0 and row 0)). If you would like to look at the whole code (or indeed use it), you're more than welcome. It's on my GitHub and it works well, but I need to tidy it up, to give it a different name and also to add the image that appears in the simulator (you'll see that it still shows the 16 x 2 version).

Here is the result!