Make an Image Gallery with an ST7789 Display and Meadow

Project updated to beta 6.0.1 (released on December 20th, 2021)

Everything you need to build this project is included in the Wilderness Labs Meadow F7 w/Hack Kit Pro. We'll see how easy is to program these peripherals using Meadow.Foundation.

Meadow.Foundation is 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 2019 for Windows or macOS and name it GalleryViewer.

Step 3 - Add the required NuGet packages

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

• Meadow.Foundation.Displays.TftSpi
• SimpleJpegDecoder

Step 4 - Add JPEG image assets to your project

Now feel free to add whatever JPEG files you want, but make sure they are no bigger than 240x240 pixels. You cam download the following Meadow photos that are used in this project from our repo.

Make sure you add them in the root of your project, and go to the properties window on each image, and make sure the Build Action is set to Embedded Resource.

Step 5 - Write the code for GalleryViewer

Copy the following code below:

// public class MeadowApp : App<F7Micro, MeadowApp> <- If you have a Meadow F7v1.*
public class MeadowApp : App<F7MicroV2, MeadowApp>
{
    RgbPwmLed led;
    MicroGraphics graphics;
    PushButton buttonUp;
    PushButton buttonDown;
    int selectedIndex;
    string[] images = new string[3] { "image1.jpg", "image2.jpg", "image3.jpg" };

    public MeadowApp()
    {
        led = new RgbPwmLed(
            device: Device,
            redPwmPin: Device.Pins.OnboardLedRed,
            greenPwmPin: Device.Pins.OnboardLedGreen,
            bluePwmPin: Device.Pins.OnboardLedBlue);
        led.SetColor(Color.Red);

        buttonUp = new PushButton(Device, Device.Pins.A00);
        buttonUp.Clicked += ButtonUpClicked;

        buttonDown = new PushButton(Device, Device.Pins.D02);
        buttonDown.Clicked += ButtonDownClicked;

        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);
        graphics.Rotation = RotationType._90Degrees;

        DisplayJPG();

        led.SetColor(Color.Green);
    }

    void ButtonUpClicked(object sender, EventArgs e)
    {
        led.SetColor(Color.Red);

        if (selectedIndex + 1 > 2)
            selectedIndex = 0;
        else
            selectedIndex++;

        DisplayJPG();

        led.SetColor(Color.Green);
    }

    void ButtonDownClicked(object sender, EventArgs e)
    {
        led.SetColor(Color.Red);

        if (selectedIndex - 1 < 0)
            selectedIndex = 2;
        else
            selectedIndex--;

        DisplayJPG();

        led.SetColor(Color.Green);
    }

    void DisplayJPG()
    {
        var jpgData = LoadResource(images[selectedIndex]);
        var decoder = new JpegDecoder();
        var jpg = decoder.DecodeJpeg(jpgData);

        int x = 0;
        int y = 0;
        byte r, g, b;

        for (int i = 0; i < jpg.Length; i += 3)
        {
            r = jpg[i];
            g = jpg[i + 1];
            b = jpg[i + 2];

            graphics.DrawPixel(x, y, Color.FromRgb(r, g, b));

            x++;
            if (x % decoder.Width == 0)
            {
                y++;
                x = 0;
            }
        }

        graphics.Show();
    }

    byte[] LoadResource(string filename)
    {
        var assembly = Assembly.GetExecutingAssembly();
        var resourceName = $"GalleryViewer.{filename}";

        using (Stream stream = assembly.GetManifestResourceStream(resourceName))
        {
            using (var ms = new MemoryStream())
            {
                stream.CopyTo(ms);
                return ms.ToArray();
            }
        }
    }
}

In the MeadowApp's app constructor, it initializes two push buttons, the onboard green and red LED, the ST7789 display and the graphics library which we'll use to draw the image onto the display.

The push buttons have the Clicked event handlers registered, and we see that they're used to display the next or previous image in an array of strings with the filenames. When a button is pressed, the red onboard LED turns on to indicate that the image is being loaded and will show up in the display (when they call the ShowJpeg() method) in a few seconds, and once it does, the onboard LED turns back to green.

ShowJpeg() method first calls the LoadResource() function that opens the image file to get the stream and returns an array of bytes of raw data. Then we use the SimpleJpegDecoder to decode the array of bytes, which are assigned to the jpg byte array that has all the red, green and blue values on each pixel on after another. With a For loop we extract those color channel values, and call DrawPixel to draw each pixel of the image into the display's buffer, and finally we call display.Show(); to load whatever is in the buffer to the display to show the image.

Step 6 - Run the project

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

Note: It might take several seconds to load and display images due that the current version of Meadow OS is running in interpreted mode. It will get much faster when AOT compilation is enabled.

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.Leds.Led API
• Meadow.Foundation.Sensors.Buttons.PushButton API
• Meadow.Foundation.Displays.Tft.St7789 API
• Meadow.Foundation.Graphics.GraphicsLibrary API