クリスマスの定番(?) Raspberry Pi と LED マトリクスでツリーをお絵描きするアプリを Amplify で作る
![](https://blog.tacck.net/wp-content/uploads/2020/12/AdobeStock_235324116.jpeg)
こちらは、 “ゆるWeb勉強会@札幌 Advent Calendar 2022” の 25日目の記事です。
諸事情により投稿が年明けになってしまいましたが、2022年12月25日クリスマスの気持ちでご覧ください。
メリークリスマス!
アドベントカレンダーも最終日のクリスマス、そしてクリスマスと言えばラズパイですよね!
ということで、 ゆるWeb勉強会@札幌 Advent Calendar 2022 の最後は、 AWS Amplify を使って Raspberry Pi でにつなげた LED マトリクスにツリーをお絵描きするアプリを作ってみます。
- 2021年 / クリスマスの定番(?) Raspberry Pi と AWS Amplify でクリスマスツリーを作る
- 2020年 / クリスマスの定番(?) Raspberry Pi と超音波センサーでクリスマスツリーを光らせて SORACOM Harvest Data でデータ収集
- 2020年 / クリスマスの定番(?) Raspberry Pi と SORACOM LTE-M Button で光るクリスマスツリーを作成 [アナザースタイル]
- 2019年 / クリスマスの定番(?) Raspberry Pi と Philips Hue でクリスマスツリーをライティング (Nintendo Switch Joy-Con version)
- 2019年 / クリスマスの定番(?) Raspberry Pi と Philips Hue でクリスマスツリーをライティング [アナザースタイル]
- 2018年 / クリスマスの定番(?) Raspberry PiとAlexaで光るクリスマスツリーを作る【動画あり】
- 2017年 / クリスマスの定番(?) Raspberry Piで光るクリスマスリースを作る【動画あり】
目次
揃えるもの
Raspberry Pi ZERO WH
LED マトリクスを挿した時にほぼ隠れるので、見栄え良く仕上げられます。
LED マトリクス
今回は、 Raspberry Pi で動作実績・ライブラリも公開されているものを、 スイッチサイエンスさんから選びました。
購入したのはこちらです。
![](https://blog.tacck.net/wp-content/uploads/2023/01/2022122503.jpeg)
16 x 16 の RGB LED が搭載されたマトリクスになります。
Raspberry Pi にザクっと挿せば、ライブラリを使ってすぐに光らせることができます。
お手軽でおすすめです。
手順
今回は、UI (ブラウザ) とデバイス (Raspberry Pi) の間を AWS IoT Core を使って接続します。
こちらは、 Amplify Library の PubSub を使って簡単に利用することが可能です。
![](https://blog.tacck.net/wp-content/uploads/2023/01/2022122501.png)
AWS Amplify プロジェクト作成
ここは情報多いので、詳細は割愛させてください。
React を使ったプロジェクトにしています。
AWS IoT Core の利用準備
AWS Amplify 側
オフィシャルにある手順に沿って、ポリシーの作成と認証へのアタッチをしておきます。
![Set up Amplify PubSub - JavaScript - AWS Amplify Gen 1 Documentation](https://blog.tacck.net/wp-content/uploads/yahman_addons_cache/docs.amplify.aws.png)
![Set up Amplify PubSub - JavaScript - AWS Amplify Gen 1 Documentation](https://blog.tacck.net/wp-content/uploads/yahman_addons_cache/docs.amplify.aws_assets_classic_og.png)
認証のRoleは、 Amplify Auth を追加後に更新でゲスト利用できるようにし、そのゲストユーザーの Role へアタッチしておくと良いです。
Raspberry Pi 側
オフィシャルにある手順に沿って、 Raspberry Pi で AWS IoT Core が利用できる状態にします。
![Raspberry Pi または他のデバイスを接続する - AWS IoT Core](https://blog.tacck.net/wp-content/uploads/yahman_addons_cache/docs.aws.amazon.com.png)
![Raspberry Pi または他のデバイスを接続する - AWS IoT Core](https://blog.tacck.net/wp-content/plugins/yahman-add-ons/assets/images/no_image.png)
実装
AWS Amplify 側
画面の作り方は、詳細割愛します。
カラーピッカーには、 React Color を利用しています。簡単に使えました。
カラーピッカーで色を選択し、上のブロックをクリックすると、その色でブロックを塗ります。
それと同時に、 PubSub ライブラリの Publish 機能を使って、該当箇所の位置と色情報を送り出します。
下記のような画面を作成しました。
![](https://blog.tacck.net/wp-content/uploads/2023/01/2022122502.png)
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 のデモ環境に成長させたいと思います。
ぜひみなさんも、試してみてください!