描述

項(xiàng)目更新到 V1.0 Release Candidate 2（2022 年 12 月 31 日）

在這個(gè) Meadow 項(xiàng)目中，我們將學(xué)習(xí)如何使用幾個(gè)旋轉(zhuǎn)編碼器和一個(gè) TFT SPI 顯示器來構(gòu)建非常流行的復(fù)古繪畫玩具 Etch-A-Sketch。我們將看到使用強(qiáng)大的驅(qū)動(dòng)程序平臺(tái)Meadow.Foundation及其 GraphicsLibrary編寫邏輯來完成所有繪圖是多么容易。

構(gòu)建此項(xiàng)目所需的一切都包含在Wilderness Labs Meadow F7 w/Hack Kit Pro 中。我們將看到使用 Meadow.Foundation 對(duì)這些外圍設(shè)備進(jìn)行編程是多么容易。

Meadow.Foundation是一個(gè)平臺(tái)，用于在 Meadow 上使用 .NET 快速輕松地構(gòu)建連接的事物。它由Wilderness Labs 創(chuàng)建，完全開源，由 Wilderness Labs 社區(qū)維護(hù)。

如果您是 Meadow 的新手，我建議您通過控制板載 RGB LED 項(xiàng)目轉(zhuǎn)到 Meadow 入門，以正確設(shè)置您的開發(fā)環(huán)境。

第 1 步 - 組裝電路

像下面的 Fritzing 圖一樣連接你的 EdgeASketch 電路：

?

EtchASketch with Meadow 的 Fritzing 圖

?

關(guān)于 Meadow F7中斷的注意事項(xiàng)

如果仔細(xì)查看圖表，您會(huì)發(fā)現(xiàn)我們將頂部旋轉(zhuǎn)編碼器連接到模擬引腳 A1、A2 和 A3。這是可能的，因?yàn)槟鷮?shí)際上可以將這些引腳配置為數(shù)字輸入端口來處理中斷。檢查這個(gè) Meadow 引出線圖：

Meadow F7v2 微型引出線

?

請(qǐng)注意標(biāo)有中斷組的引腳范圍從組 00 到組 15。在配置數(shù)字輸入端口時(shí)要記住這一點(diǎn)很重要，您必須確保每個(gè)中斷組只使用一個(gè)引腳，否則您將嘗試獲取事件時(shí)遇到問題。例如，在配置引腳D08和D09時(shí)不會(huì)收到中斷事件，因?yàn)樗鼈兌紝儆谥袛嘟M06 。

第 2 步 - 創(chuàng)建 Meadow 應(yīng)用程序項(xiàng)目

在 Visual Studio 2019 for Windows或macOS中創(chuàng)建一個(gè)新的Meadow Application項(xiàng)目并將其命名為EdgeASketch 。

第 3 步 - 添加所需的 NuGet 包

對(duì)于這個(gè)項(xiàng)目，搜索并安裝以下 NuGet 包：

• Meadow.Foundation.Displays.TftSpi

第 4 步 - 為 EdgeASketch 編寫代碼

復(fù)制下面的代碼：

// public class MeadowApp : App <- If you have a Meadow F7v1.*
public class MeadowApp : App
{
    int x, y;
    MicroGraphics graphics;
    RotaryEncoderWithButton rotaryX;
    RotaryEncoderWithButton rotaryY;

    public override Task 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 st7789 = new St7789(
            device: Device,
            spiBus: spiBus,
            chipSelectPin: null,
            dcPin: Device.Pins.D01,
            resetPin: Device.Pins.D00,
            width: 240, height: 240);

        graphics = new MicroGraphics(st7789);
        graphics.Clear(true);
        graphics.DrawRectangle(0, 0, 240, 240, Color.White, true);
        graphics.DrawPixel(x, y, Color.Red);
        graphics.Show();

        x = graphics.Width / 2;
        y = graphics.Height / 2;

        rotaryX = new RotaryEncoderWithButton(
            device: Device,
            aPhasePin: Device.Pins.A01, 
            bPhasePin: Device.Pins.A02, 
            buttonPin: Device.Pins.A03);
        rotaryX.Rotated += RotaryXRotated;

        rotaryY = new RotaryEncoderWithButton(
            Device,
            Device.Pins.D03, 
            Device.Pins.D04, 
            Device.Pins.D05);
        rotaryY.Rotated += RotaryYRotated;
        rotaryY.Clicked += RotaryYClicked;

        onboardLed.SetColor(Color.Green);

        return base.Initialize();
    }

    void RotaryXRotated(object sender, RotaryChangeResult e)
    {
        if (e.New == RotationDirection.Clockwise)
            x++;
        else
            x--;

        x = Math.Clamp(x, 1, graphics.Width - 1);

        graphics.DrawPixel(x, y + 1, Color.Red);
        graphics.DrawPixel(x, y, Color.Red);
        graphics.DrawPixel(x, y - 1, Color.Red);
    }

    void RotaryYRotated(object sender, RotaryChangeResult e)
    {
        if (e.New == RotationDirection.Clockwise)
            y++;
        else
            y--;

        y = Math.Clamp(y, 1, graphics.Height - 1);

        graphics.DrawPixel(x + 1, y, Color.Red);
        graphics.DrawPixel(x, y, Color.Red);
        graphics.DrawPixel(x - 1, y, Color.Red);
    }

    void RotaryYClicked(object sender, EventArgs e)
    {
        x = graphics.Width / 2;
        y = graphics.Height / 2;

        graphics.DrawRectangle(0, 0, 240, 240, Color.White, true);
        graphics.DrawPixel(x, y, Color.Red);
    }

    public override async Task Run()
    {
        while (true)
        {
            graphics.Show();
            await Task.Delay(500);
        }
    }
}

草地建設(shè)者

在 MeadowApp 中Constructor，我們首先初始化ST7789 SPI 顯示和 MicroGraphics 庫(kù)，我們立即繪制一個(gè)覆蓋整個(gè)屏幕的白色填充矩形，并在顯示中間使用先前初始化的 x 和 y 整數(shù)繪制一個(gè)紅色像素。我們也初始化了兩個(gè)Rotary Encoders，一個(gè)控制X軸的繪制，一個(gè)控制Y軸的繪制。兩個(gè)扶輪社都Rotated 注冊(cè)了該事件。

RotatyXRotated 和 RotatyYRotated 事件處理程序

e.Direction在事件處理程序中，您可以通過訪問屬性并與枚舉進(jìn)行比較以查看其是順時(shí)針還是逆時(shí)針來檢查旋轉(zhuǎn)編碼器轉(zhuǎn)向的方向。RotationDirection如果它是順時(shí)針方向，我們?cè)黾?X 或 Y 坐標(biāo)（取決于旋轉(zhuǎn)的是哪個(gè) Rotaty），如果它以相反的方向旋轉(zhuǎn)，我們將減少。

請(qǐng)注意，我們?cè)趦蓚€(gè)方向上一次繪制三個(gè)像素，我們這樣做是為了讓線條描邊更粗一些，因?yàn)轱@示器的分辨率太高了，繪制的線條太長(zhǎng)了，很難看清是什么你正在做的。

旋轉(zhuǎn)Y點(diǎn)擊

由于我們使用帶按鈕的旋轉(zhuǎn)編碼器，您可以像處理按鈕一樣處理 Click 事件處理程序。事件RotaryYClicked 處理程序?qū)⑶宄@示并將 x 和 y 坐標(biāo)重新初始化回顯示的中間。

第 5 步 - 運(yùn)行項(xiàng)目

單擊Visual Studio中的“運(yùn)行”按鈕。它應(yīng)該類似于以下 GIF：

查看 Meadow.Foundation！

就您可以使用 Meadow.Foundation 做的大量令人興奮的事情而言，這個(gè)項(xiàng)目只是冰山一角。

• 它帶有一個(gè)龐大的外設(shè)驅(qū)動(dòng)程序庫(kù)，其中包含適用于最常見傳感器和外設(shè)的驅(qū)動(dòng)程序。
• 外設(shè)驅(qū)動(dòng)程序封裝了核心邏輯并公開了一個(gè)簡(jiǎn)單、干凈、現(xiàn)代的 API。
• 該項(xiàng)目得到了不斷發(fā)展的社區(qū)的支持，該社區(qū)不斷致力于構(gòu)建酷炫的互聯(lián)事物，并且總是樂于幫助新來者和討論新項(xiàng)目。

參考

• 草地向?qū)?/font>
• 草地基金會(huì)
• Meadow.Foundation.Displays.Tft.St7789 API
• Meadow.Foundation.Sensors.Rotary.RotaryEncoderWithButton API