M5paper

M5paperで自作ナビを作った話　

M5paperでカーナビみたいなもの作りたいな～　とずっと思っていたんですが、今回うまくできたので紹介させていただきたいと思います。

1年くらいかかったけどM5paperで自作ナビできた。　#M5Stack #駆け出しエンジニアと繋がりたい pic.twitter.com/gpnaRrhH5x

— アルティメット雅史 (@castor_1983) August 30, 2022
↑こんな具合で今の自分位置と周辺の地図を表示します。

目的地設定や地図をスワイプしたりの機能はありません、あくまで現在位置を移動に合わせて更新するのみです。

ちょっとそれではさみしいので拡大と縮小は実装しました。本体のスイッチの上下で操作します。

まずはざくっとシステムの全貌から説明していきます。

M5paperはAWSで立ち上げたwebサーバーにGPS信号と地図の大きさの情報を送っています。
サーバー側でその緯度経度から地図画像を作りだし、それをM5paperにフィードバックしています。今回の開発はほとんどサーバーサイドの力技で実現させています。

材料は主に下記の３つです
・M5paper

・GPSユニット

・AWS　EC2　ubuntuサーバー

まずはubuntuでLAMP環境を作ります。

ちょっとはしょりますが下記リンクを参考にＰＨＰとＤＢの準備をします
https://qiita.com/shimotaroo/items/76b705852e3fb496abfc
https://zenn.dev/tomoshimizu/articles/eedb6856df9c90

ＡＷＳのポートを解放しＩＰアドレスを叩いて上記の様なapache初期画面が出せたらＯＫです。

ＤＢは下記の様な仕様にしています。idは０～２０の値で地図の拡大、縮小に使っていますsensor_idは使っていないですね…
テーブル名は　gps　にしています。

+-----------+---------------+------+-----+---------+-------+

| Field | Type | Null | Key | Default | Extra |

+-----------+---------------+------+-----+---------+-------+

| id | int | YES | | NULL | |

| sensor_id | varchar(16) | YES | | NULL | |

| lat | double(16,10) | YES | | NULL | |

| lng | double(16,10) | YES | | NULL | |

| datetime | datetime | YES | | NULL | |

+-----------+---------------+------+-----+---------+-------+

続いてindex.htmlと同じフォルダに下記PHPファイルを格納します。これはm5paperからのjsonデータをDBへ格納するプログラムになります。１２行目のDB名やパスワード、ユーザー名はSQLを設定したときの値を使って下さい。

続いてpythonのコードです。一緒にもできるかもしれませんが３つに分けてシェルスクリプトで動かしています。DBからデータを取得し地図のhtmlデータにする。　→map.py
htmlデータを画像データ(png)に変換　→map2.py
pngデータ→jpgに変換　　→map3.py

という具合です。
map.py
先ほどPHPファイルで使用したDBへアクセスする情報を入力してください。map2.py
こちらはseleniumを使っていますのでubuntuへchromeをインストールするのとそのバージョンに合わせたchromedriverをダウンロードし、pythonコード内にpathを指定してください。

map3.py
このプログラムで保存した画像ファイルをjpgにします。これでサーバ側の設定は完了です。このシェルスクリプトを動かしている状態でm5paperからpostすればナビの画像が取得できます。

m5paperのスケッチは以下です。wifiのSSID,PASSとサーバーサイドのphpファイルの場所を指定します。I2C通信はPORT.Cの18,19で通信しています。これでWi-Fi経由でGPS情報をアップロードしながら地図の画像をダウンロードしてM5paperで見ることができます。

…ちょっと設定関係は省略しているのでコメントいただければ対応したいと思います。
かなりいろいろな勉強してようやくたどりつきました。参考になれば幸いです。

[0回]
PR
M5paperでTwitterの表示をした話

M5stackシリーズの中では異彩を放っているM5paperですが、最近V1.1が発売されてまだまだ人気があるみたいですね。　久々にいじってみることにしました。

なんとなくスマホっぽいのでTwitterの表示をさせてみました。
といっても直接APIをたたくのではなくラズパイ上でtwythonっていうpythonのライブラリを動かして、それをUDPでM5paperへ送っています。

前提として…

①ラズパイ、M5paperどちらも同じwi-fiに接続します。
②ラズパイにはtwythonをインストールしておきます。
③twitterのデベロッパー申請が済んでおり、APIが叩ける状態（各種キーを取得している）にしておく　こういうところで確認おねがいします
④M5paperのマイクロSDのなかにhttps://moji.or.jp/wp-content/ipafont/IPAexfont/IPAexfont00401.zip
　のipaexgというファイルを保存しておく。（本記事ではfont.ttfという名前に変えています）

ラズパイで取得したツイートをM5paperに定期的に送ることにより表示します。

今回はNHKニュースのnhk_newsというアカウントからとってます。

ラズパイでは下記のpythonコードを書きました。　※IPはM5paperのIPアドレスを入力してください。
　※あとはTwitterAPIを叩くためのキーをそれぞれ入れてください。
　※取得したいツイートのアカウントを入れてください（今回はM5paperでは下記のようなスケッチを書きます。
ラズパイからUDPが送信されると表示が切り替わります。

Wi-FiのSSIDとPASSを入力してください。
またラズパイのIPアドレスを入力してください。
一応Wi-FiにつながるとM5paperの IPアドレスが画面に出るのですが、２進数に変換して８桁ずつもとに戻してください。

手抜きですいません…　これを送信側のpythonコードに埋め込んでいきます。　

486604810を２進数にすると…

00011101.00000001.00000000.00001010 となって…

29.1.0.10　

10.0.1.29！！

[0回]
m5paperでUART通信した話

今回はM5paperでシリアル通信しようと思います。

えーと、RX、TX…　あっUSBシリアルだ！

　
秋月で買ったGPSモジュールを接続しようと思ってたのですが、
一筋縄ではいきませんでした。結論から言うとＵＳＢシリアルは使わずにPORT．Cを使っています。（Ｇ１８にモジュールのＲＸＤ、Ｇ１９にモジュールのＴＸＤを接続しました。）

こんな感じでリアルタイムに液晶に経度、緯度、高度を出力します。

コードで気を付けなければならないのが、シリアルピンを１８、１９に指定する必要があります。
またGPSモジュールからのデータを取得するため、TinyGPSライブラリが必要です。

※TinyGPS++のサイトのダウンロードアイコンの先の最新のZIPファイルをダウンロードし、Arduino IDEで「.ZIP形式のライブラリをインストール…」でZIPファイルをインストールします。
はじめはSerial1.begin(9600, SERIAL_8N1, RX_PIN, TX_PIN);としていたら、
　multiple definition of `Serial'というエラーが出ました。Serial1.beginのSerial1のところがヘッダ等で使われてしまっているという意味みたいです。ss.beginにしたら解決しました。
M5Paperはesp32と違ってシリアルモニタ出力にSerial.begin()が必要ないみたいですね。
M5.begin()が代用なのかな？？

他と微妙に違うところのあるM5paperですが、もう少しいじっていろいろ紹介できればと思いまーす。

[0回]
AWS　S3の画像をM5paperへ表示させる方法

m5paper結構おもしろいですね。バッテリーと液晶がデフォルトでついてるとなにかと使い勝手がいい気がします。

↑けっこう写真もくっきり表示します。
arduino IDEのサンプルコードを使ってAWSのストレージに置いてある画像を表示したいと思います。
まずはAWS側の設定です。こちらの記事で説明しているのですが微妙にUIが変わってました。
AWSのアカウントを作成して右上のユーザー名が書いてあるところのタブでマイセキュリティ情報を選んでください。アクセスキー (アクセスキー ID とシークレットアクセスキー)を選んで
アクセスキー ID とシークレットアクセスキーを取得します。
pip install boto3
pip install awscli

上記をインストールして

aws configureコマンドから設定していきます。

AWS Access Key ID [None]: ***********
AWS Secret Access Key [None]: ***********
Default region name [None]: ***********
Default output format [None]: json
あとはpythonコードでアップロードします。
import json
import boto3

bucket_name = "バケット名"
s3 = boto3.resource('s3')

s3.Bucket(bucket_name).upload_file('C:/Users/***.jpg', '*.jpg') 　※任意の画像フォルダを指定してください

このままだと外部からAWSのS3にアクセスできないのでバケットの設定でアクセスコントロールリスト (ACL)を変更してバケットを公開してください。

公開ができたらバケットの画像のURLを取得してください。こんなやつです→https://（バケット名）.s3-ap-northeast-1.amazonaws.com/**.jpg

今度はm5paperのコードに埋め込んでいきます。
８秒に１回S3の画像をとりこんでいきます。リアルタイムに画像をアップロードしていくと監視カメラ的なこともできそうですが、AWSからめちゃめちゃ課金されるので注意してください。

また何かできたら紹介していきたいと思いま～す。

[0回]
m5paperでレーダーを作る

@ultimatemasashi
レーダー作った。##m5stack ##m5paper

♬ Don't Stop The Rock - Freestyle

aruduino IDEで開発しました。

センサーはHC-SR04、サーボモーターは３６０度回転のAS3103を使用。

バッテリーが結構もつのでサーボモーターを付けても問題なく使えます。
※M5stackだと別でバッテリーが必要になります。

センサーやサーボモーターを直接接続できないのでコネクタは必須です。

センサーを回転させるために３Dプリンタを使いました。

あとはコードのせときます。

[0回]