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

[point_maker type=“heading_icon” base_color=“apple_green” title_icon=“info-circle-solid” title_color_background=“true” title_color_border=“false” content_type=“text” content_color_background=“true” content_color_border=“false” block_editor=“true”]

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

[/point_maker]

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

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

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

揃えるもの

Raspberry Pi ZERO WH

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

LED マトリクス

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

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

https://www.switch-science.com/products/3336?variant=42381968638150

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

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

お手軽でおすすめです。

手順

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

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

AWS Amplify プロジェクト作成

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

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

AWS IoT Core の利用準備

AWS Amplify 側

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

https://docs.amplify.aws/lib/pubsub/getting-started/q/platform/js/

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

Raspberry Pi 側

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

https://docs.aws.amazon.com/ja_jp/iot/latest/developerguide/connecting-to-existing-device.html

実装

AWS Amplify 側

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

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

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

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

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

Raspberry Pi 側

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

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

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

動作

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

https://youtu.be/ODvIi-zg-fg

まとめ

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

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

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