Working With A Touch Keypad And Spi Display Using Meadow

Photo of jorgedevs

Made by jorgedevs

About the project

Learn how to use a capacitive touch keypad and display the detected buttons pressed on a ST7789 SPI display all using Meadow. Foundation!

Project info

Difficulty: Easy

Platforms: MicrosoftMeadowWilderness Labs

Estimated time: 1 hour

License: MIT license (MIT)

Items used in this project

Hardware components

Raspberry Pi 4 Model B 1GB, 2GB, 4GB or 8GB RAM Raspberry Pi 4 Model B 1GB, 2GB, 4GB or 8GB RAM x 1
Pyboard LCD Skin w/ Resistive Touch Pyboard LCD Skin w/ Resistive Touch x 1
Jumper Wire Kit - 140pcs Jumper Wire Kit - 140pcs x 1
Raspberry Pi 4 Model B 1GB, 2GB, 4GB or 8GB RAM Raspberry Pi 4 Model B 1GB, 2GB, 4GB or 8GB RAM x 1

Software apps and online services

Microsoft Visual Studio 2019 Microsoft Visual Studio 2019


In this Meadow project we're going to learn how to use a capacitive touch keypad and show which button(s) are pressed in an SPI ST7789 240x240 display, all using Meadow.Foundation.

Meadow.Foundationa platform for quickly and easily building connected things using.NET on Meadow. Created by Wilderness Labs, it's completely open source and maintained by the Wilderness Labs community.

If you're new working with Meadow, I suggest you go to the Getting Started w/ Meadow by Controlling the Onboard RGB LEDproject to properly set up your development environment.

Step 1 - Assemble the circuit

Wire your project like this:

TouchKeypad Circuit Diagram

TouchKeypad Circuit Diagram

TouchKeypad Circuit Diagram

Step 2 - Create a Meadow Application project

Create a new Meadow Application project in Visual Studio 2019 for Windows or macOS and name it TouchKeypad.

Step 3 - Add the required NuGet packages


Right-click on your TouchKeypad project and click Manage NuGet Packages. In the Browse tab, search for Meadow.Foundation.Sensors.Hid.Mpr121 and click Install to add it to your project.


Alt-click on your TouchKeypad project in the Solution Explorer, and click Add => Add Nuget Package to open the NuGet Package window. Search for Meadow.Foundation.Sensors.Hid.Mpr121 and click Install to add it to your project.

Step 4 - Write the code for TouchKeypad

Copy the following code below:

public class MeadowApp : App<F7Micro, MeadowApp>{    Mpr121 sensor;    St7789 display;    RgbPwmLed onboardLed;    GraphicsLibrary graphics;    public MeadowApp()    {        onboardLed = new RgbPwmLed(Device,            Device.Pins.OnboardLedRed,            Device.Pins.OnboardLedGreen,            Device.Pins.OnboardLedBlue,            3.3f, 3.3f, 3.3f,            Meadow.Peripherals.Leds.IRgbLed.CommonType.CommonAnode);        onboardLed.SetColor(Color.Red);        var config = new SpiClockConfiguration(            6000, SpiClockConfiguration.Mode.Mode3);        var spiBus = Device.CreateSpiBus(            Device.Pins.SCK, Device.Pins.MOSI, Device.Pins.MISO, config);        display = new St7789(device: Device, spiBus: spiBus,            chipSelectPin: Device.Pins.D02,            dcPin: Device.Pins.D01,            resetPin: Device.Pins.D00,            width: 240, height: 240);        graphics = new GraphicsLibrary(display);        graphics.Rotation = GraphicsLibrary.RotationType._180Degrees;        graphics.CurrentFont = new Font12x16();        sensor = new Mpr121(Device.CreateI2cBus(I2cBusSpeed.Standard), 90, 100);        sensor.ChannelStatusesChanged += SensorChannelStatusesChanged;        onboardLed.SetColor(Color.Green);    }    void SensorChannelStatusesChanged(object sender, ChannelStatusChangedEventArgs e)    {        graphics.Clear();        graphics.Stroke = 1;        for (int i = 0; i < e.ChannelStatus.Count; i++)        {            int numpadIndex = 0;            for (int columns = 0; columns < 3; columns++)            {                for (int rows = 3; rows >= 0; rows--)                {                    if (numpadIndex == i)                    {                        if (e.ChannelStatus[(Mpr121.Channels)i])                        {                            graphics.DrawRectangle(                                columns * 57 + 38,                                 rows * 57 + 10, 51, 51,                                 Meadow.Foundation.Color.Cyan,                                 true);                        }                        else                        {                            graphics.DrawRectangle(                                columns * 57 + 38,                                 rows * 57 + 10, 51, 51,                                 true);                        }                    }                    numpadIndex++;                }            }        }        graphics.Show();    }}

MeadowApp Constructor

In the MeadowApp's class constructor, we first instantiate the onboard RGB LED (as an RgbPwmLed object) and turn it Red to indicate the app has started initializing peripherals. Next we initialize the ST7789 SPI display along with the Graphics Library which we'll use to draw our 3x4 square grid later.

We also create a Mpr121 object by passing an I2C bus along with the device's address and frequency. We also register the ChannelStatusesChanged event handler with the SensorChannelStatusesChanged method.

Finally, we turn the onboard RGB LED to Green to indicate that the project has finished initializing peripherals and is ready to receive user interaction.

SensorChannelStatusesChanged method

When the ChannelStatusesChanged event is triggered, the event handler will first clear the entire display, and will then iterate in all the twelve channels to check their status, and those who have status true will draw a cyan square and false an empty square, all in their corresponding position in a 3x4 square grid. We call graphics.Show() to make draw whatever is in the buffer memory.

Step 5 - Run the project

Click the Run button in Visual Studio. It should look like to the following GIF:

TouchKeypad project running...

TouchKeypad project running...

TouchKeypad project running...

Check out Meadow.Foundation!

This project is only the tip of the iceberg in terms of the extensive exciting things you can do with Meadow.Foundation.

  • It comes with a huge peripheral driver library with drivers for the most common sensors and peripherals.
  • The peripheral drivers encapsulate the core logic and expose a simple, clean, modern API.
  • This project is backed by a growing community that is constantly working on building cool connected things and are always excited to help new-comers and discuss new projects.


Schematics, diagrams and documents

TouchKeypad fritzing diagram


TouchKeypad Complete Project

Check out the project in Meadow_Project_Samples/source/Hackster/TouchKeypad


Leave your feedback...