クリスマスの定番(?) Raspberry Pi と LED マトリクスでツリーをお絵描きするアプリを Amplify で作る

こちらは、 “ゆるWeb勉強会@札幌 Advent Calendar 2022” の 25日目の記事です。

諸事情により投稿が年明けになってしまいましたが、2022年12月25日クリスマスの気持ちでご覧ください。

メリークリスマス!
アドベントカレンダーも最終日のクリスマス、そしてクリスマスと言えばラズパイですよね!

ということで、 ゆるWeb勉強会@札幌 Advent Calendar 2022 の最後は、 AWS Amplify を使って Raspberry Pi でにつなげた LED マトリクスにツリーをお絵描きするアプリを作ってみます。

揃えるもの

Raspberry Pi ZERO WH

LED マトリクスを挿した時にほぼ隠れるので、見栄え良く仕上げられます。

LED マトリクス

今回は、 Raspberry Pi で動作実績・ライブラリも公開されているものを、 スイッチサイエンスさんから選びました。

購入したのはこちらです。

16 x 16 の RGB LED が搭載されたマトリクスになります。

Raspberry Pi にザクっと挿せば、ライブラリを使ってすぐに光らせることができます。

お手軽でおすすめです。

手順

今回は、UI (ブラウザ) とデバイス (Raspberry Pi) の間を AWS IoT Core を使って接続します。

こちらは、 Amplify Library の PubSub を使って簡単に利用することが可能です。

簡単なアーキテクチャ

AWS Amplify プロジェクト作成

ここは情報多いので、詳細は割愛させてください。

React を使ったプロジェクトにしています。

AWS IoT Core の利用準備

AWS Amplify 側

オフィシャルにある手順に沿って、ポリシーの作成と認証へのアタッチをしておきます。

Set up Amplify PubSub - JavaScript - AWS Amplify Gen 1 DocumentationLearn more about how you can use PubSub to pass messages between your app instances and your app’s backend creating real-time interactive experiences. AWS Amplify Documentation
Set up Amplify PubSub - JavaScript - AWS Amplify Gen 1 Documentation docs.amplify.aws
Set up Amplify PubSub - JavaScript - AWS Amplify Gen 1 Documentation

認証のRoleは、 Amplify Auth を追加後に更新でゲスト利用できるようにし、そのゲストユーザーの Role へアタッチしておくと良いです。

Raspberry Pi 側

オフィシャルにある手順に沿って、 Raspberry Pi で AWS IoT Core が利用できる状態にします。

Raspberry Pi または他のデバイスを接続する - AWS IoT Coreこのセクションでは、 で使用する Raspberry Pi を設定します AWS IoT。接続したい別のデバイスがある場合、Raspberry Pi の手順には、これらの指示をデバイスに合わせて適用するのに役立つ参照先が含まれています。
Raspberry Pi または他のデバイスを接続する - AWS IoT Core docs.aws.amazon.com
Raspberry Pi または他のデバイスを接続する - AWS IoT Core

実装

AWS Amplify 側

画面の作り方は、詳細割愛します。

カラーピッカーには、 React Color を利用しています。簡単に使えました。

カラーピッカーで色を選択し、上のブロックをクリックすると、その色でブロックを塗ります。

それと同時に、 PubSub ライブラリの Publish 機能を使って、該当箇所の位置と色情報を送り出します。

下記のような画面を作成しました。

16×16 のドット絵を作成できるエディタとなりました

Raspberry Pi 側

Unicorn HAT HD のライブラリにあるサンプルを元に、 AWS IoT Core のサンプルを合体させます。

AWS IoT Core SDK で Subscribe しておき、そこで受け取った位置と色情報を元に、 Unicorn HAT HD の該当箇所の色を設定するようにします。

どちらもサンプルが充実しているので、普段 Python を使わない私でも難しくありませんでした。

動作

実際にクリスマスツリーを描く様子を見てみましょう。

まとめ

AWS IoT Core を利用する PubSub ライブラリを使うことで、手軽に Raspberry Pi と連携を取るアプリケーションを作ることができました。

もう少し整理して、お手軽な AWS Amplify + Raspberry Pi のデモ環境に成長させたいと思います。

ぜひみなさんも、試してみてください!

tacck
  • tacck
  • 北の大地の普通のソフトウェアエンジニア。
    インフラ・バックエンド・フロントエンドと、色々やります。

    初心者・若手向けのメンターも希望あればお受けします。

    勉強会運営中
    * ゆるWeb勉強会@札幌
    * スマートスピーカーで遊ぼう会@札幌

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください