概要

前回の続き

取得したNMEAをパース

GPSモジュールから取得できるのはNMEAというデータのかたまり。

こんな感じ。

$GPTXT,01,01,02,LLC FFFFFFFF-FFFFFFED-FFFFFFFF-FFFFFFFF-FFFFFFF9*50
$GPRMC,,V,,,,,,,,,,N*53
$GPVTG,,,,,,,,,N*30
$GPGGA,,,,,,0,00,99.99,,,,,,*48
$GPGSA,A,1,,,,,,,,,,,,,99.99,99.99,99.99*30
$GPGLL,,,,,,V,N*64
$GPTXT,01,01,02,ANTSTATUS=INIT*25
$GPRMC,,V,,,,,,,,,,N*53

GPSモジュールが衛星に捕捉されると、ここに緯度経度の情報が入ってくるのだが、これを自前で解析するのは面倒。

そこで、GPS.jsというライブラリを使用させてもらう。

GPS.jsは基本的には、Node.jsで使用することを想定しているようだが、次の通りブラウザからも使用できるようになっている。

Using GPS.js with the browser
The use cases should be rare to parse NMEA directly inside the browser, but it works too.

<script src="gps.js"></script>
<script>
   var gps = new GPS;
   gps.update('...');
</script>

ただ、レアケースだと言っていることと、やはりダウンロードして使うことが前提となっている様子。

Webサーバを構築せずに手軽にやりたいので、これをCDNでアクセスできないか検討する。

jsDeliver

いろいろなJavaScriptのライブラリのCDNを提供しているjsDeliverというありがたいサイトがある。

ここによると、GithubにおいてあるJavaScriptもCDNでアクセスできるようになるらしい。

// load any GitHub release, commit, or branch
// note: we recommend using npm for projects that support it
https://cdn.jsdelivr.net/gh/user/repo@version/file

バージョン情報が必要らしい。masterだと実行するタイミングで意図通りに動作するかわからないので、リリースタイミングのタグかブランチを探してみる。

GPS.jsの人は、リリースごとにきちんとタグを打ってくれる人のようで、最新版は「v0.4.7」というタグが打たれていた。

jsDeliverのGithubルールにGPS.jsのURLを当てはめていくと次のようになる。

<script src="https://cdn.jsdelivr.net/gh/infusion/GPS.js@v0.4.7/gps.min.js"></script>

NMEAから緯度経度を取得してみる

GPS.jsは、GPSクラスを持っており、gps.on()にfunctionを登録しておくとデータが更新されたタイミングでコールバックしてくれる。データの更新はgps.update()にNMEAを渡して呼び出すタイミングで行われる。これら踏まえてサンプルを作ってみる。

NMEAの中で緯度経度の情報の取得に必要なのはGPGGAというデータらしい。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GPS parse</title>
    <script src="https://cdn.jsdelivr.net/gh/infusion/GPS.js@v0.4.7/gps.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>

<div id="obniz-debug"></div>
<textarea id="text" style="width:100%; height:200px; resize:none;"></textarea>

<script>
   var gps = new GPS;

   // Add an event listener on all protocols
   gps.on('data', function(parsed) {
       var text = 'lat :' + parsed.lat + ', lon :' + parsed.lon;
       var textarea = $('#text');
       textarea.text(textarea.text() + text);
       textarea.scrollTop(textarea[0].scrollHeight);
   });

   gps.update('$GPGGA,224900.000,4832.3762,N,00903.5393,E,1,04,7.8,498.6,M,48.0,M,,0000*5E');
</script>

</body>
</html>