2018年11月25日日曜日

obniz+GPSで地図上に現在地表示

 先日から、obnizというIoTデバイスを使って、いろいろとやっています。

 obnizは、Arduinoやラズパイなど、一般的な「マイコンボード」と異なり、ボード側にプログラムを書き込むということはしません。

 obnizはWifiからインターネットを経由して、クラウドサーバーに接続されています。ユーザーはHTML+javascriptで作成したプログラムを作成し、ブラウザ上で実行することで、クラウド経由で、IDで紐付けされたobnizと通信するというものです。
 
 obnizに接続したセンサーなどは、javascriptからは「オブジェクト」として扱われている感じで、ピン配置もプログラム内で指定できます。

 試しにいろいろやっていますが、一例が「GPSモジュール」とobnizの組み合わせで、測位データをもとに、Googleマップに現在位置を表示するというものです。

 使用GPS GPS受信機キット「みちびき」3機受信対応(秋月電子

 サイズ・表示切替・更新間隔の指定もできるようにしています。

 スクリプト内に、センサーの定義や通信を行うコードが記載されています。

 情報の表示や操作といったインターフェース部の制作が使い勝手を左右しますが、obnizでは、HTML+Javascriptの組み合わせなので、ブラウザ上で表示や操作を行うことが簡単にできます。




<!doctype html>
<!---
//
// GPSモジュール GYSFDMAZB(みちびき対応)+obniz
//
--->
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@1.13.1/obniz.js"></script>
<title>GYSFDMAZB-Test</title>
<meta charset="utf-8">
</head>
<body>
 <h1 style="text-align: center; color: #FF0004; border-bottom: thin solid #1A00FF; 
            border-spacing: 5px 0px;">GYSFDMAZBモジュール受信テスト</h1>

<p id="mes" align="center">iGPGGA値</p>

<table width="200" border="0" align="center">
  <tbody>
    <tr>
      <td width="85">緯度</td>
      <td width="99" align="right"><div id="lon"></div></td>
    </tr>
    <tr>
      <td>経度</td>
      <td align="right"><div id="lat"></div></td>
    </tr>
  </tbody>
</table>


<script>
var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function () {
$("#lat").text("test");
let gps = obniz.wired("GYSFDMAXB", { vcc:7, gnd:8, txd:9, rxd:10, Opps:11 });

function mainLoop() {
var d = gps.getEditedData();
if (d.enable) {
    if (d.GPGGA) { 
     $("#mes").text(d.GPGGA.join(","));
       let p = d.GPGGA;
       if (p[6] != "0") {
             $("#lon").text(gps.nmea2dd(p[2]));
             $("#lat").text(gps.nmea2dd(p[4]));
     var locstr=gps.nmea2dd(p[2]) +"," + gps.nmea2dd(p[4]);
     var selt=$("#type option:selected").val();
     var sels=$("#size option:selected").val();
     var seli=$("#interval option:selected").val();     
           var ssrc="http://maps.google.co.jp/maps?ll=" + locstr + "&q=loc:" 
                     + locstr+"&t="+selt+"&z="+sels+"&iwloc=A&output=embed";
     $("#markmap").attr("src",ssrc);
     }
 }
 }
  setTimeout(mainLoop, seli);
}
setTimeout(mainLoop, 100);
};
</script>​
<div align="center">
  <iframe src="http://maps.google.co.jp/maps?ll=0.0000,0.0000
&q=loc:0.0000,0.000&output=embed&t=m&z=18" 
     width="90%" marginwidth="0" height="540" marginheight="0"
 scrolling="no" frameborder="0" id="markmap" ></iframe>
  <br>
  <label>表示形式:</label>
  <select id="type" >
    <option value="m" selected="selected">地図</option>
    <option value="k">航空写真</option>
  </select> 
     
  <label>サイズ:</label>
  <select id="size">
    <option value="1">1(最小)</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13" selected="selected">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
  </select> 
     
  <label>更新間隔:</label>
  <select id="interval">
    <option value="5000">5秒</option>
    <option value="10000" selected="selected">10秒</option>
    <option value="30000">30秒</option>
    <option value="60000">1分</option>
    <option value="300000">5分</option>
  </select>
</div>

<br>
</body>
 
</html>


0 件のコメント:

コメントを投稿