IoT開発、設備・DIYのブログ！
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を指定してください。
[0回]
