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で見ることができます。


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