Working with a Touch Keypad and SPI Display Using Meadow

Project updated to beta 6.4 (released on May 30th, 2022)

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.Foundation a 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 LED project to properly set up your development environment.

Step 1 - Assemble the circuit

Wire your project like this:

Step 2 - Create a Meadow Application project

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

Step 3 - Add the required NuGet packages

For this project, search and install the following NuGet packages:

• Meadow.Foundation.Sensors.Hid.Mpr121
• Meadow.Foundation.Displays.TftSpi

Step 4 - Write the code for TouchKeypad

Copy the following code below:

// public class MeadowApp : App<F7FeatherV1, MeadowApp> <- If you have a Meadow F7v1.*
public class MeadowApp : App<F7FeatherV2, MeadowApp>
{
    Mpr121 sensor;
    MicroGraphics graphics;

    public MeadowApp()
    {
        Initialize();
    }

    void Initialize() 
    {
        var onboardLed = new RgbPwmLed(
            device: Device,
            redPwmPin: Device.Pins.OnboardLedRed,
            greenPwmPin: Device.Pins.OnboardLedGreen,
            bluePwmPin: Device.Pins.OnboardLedBlue);
        onboardLed.SetColor(Color.Red);

        var config = new SpiClockConfiguration(
            speed: new Frequency(48000, Frequency.UnitType.Kilohertz),
            mode: SpiClockConfiguration.Mode.Mode3);
        var spiBus = Device.CreateSpiBus(
            clock: Device.Pins.SCK,
            copi: Device.Pins.MOSI,
            cipo: Device.Pins.MISO,
            config: config);
        var 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 MicroGraphics(display) 
        {
            Stroke = 1,
            Rotation = RotationType._180Degrees,
            CurrentFont = new Font12x16(),
        };
        DrawGrid();

        sensor = new Mpr121(Device.CreateI2cBus(I2cBusSpeed.Standard), 90, 100);
        sensor.ChannelStatusesChanged += SensorChannelStatusesChanged;

        onboardLed.SetColor(Color.Green);
    }

    void DrawGrid() 
    {
        graphics.Clear();
        for (int columns = 0; columns < 3; columns++)
        {
            for (int rows = 3; rows >= 0; rows--)
            {
                graphics.DrawRectangle(columns * 57 + 38, rows * 57 + 10, 51, 51, Color.Cyan);
            }
        }
        graphics.Show();
    }

    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, Color.Cyan, true);
                        else
                            graphics.DrawRectangle(columns * 57 + 38, rows * 57 + 10, 51, 51, Color.Cyan);
                    }
                    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:

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.

References

• Meadow Guides
• Meadow.Foundation
• Meadow.Foundation.Displays.TftSpi.St7789 API
• Meadow.Foundation.Graphics.MicroGraphics API
• Meadow.Foundation.Sensors.Hid.Mpr121 API