obnizは、Arduinoやラズパイなど、一般的な「マイコンボード」と異なり、ボード側にプログラムを書き込むということはしません。
obnizはWifiからインターネットを経由して、クラウドサーバーに接続されています。ユーザーはHTML＋javascriptで作成したプログラムを作成し、ブラウザ上で実行することで、クラウド経由で、IDで紐付けされたobnizと通信するというものです。
obnizに接続したセンサーなどは、javascriptからは「オブジェクト」として扱われている感じで、ピン配置もプログラム内で指定できます。
試しにいろいろやっていますが、一例が「GPSモジュール」とobnizの組み合わせで、測位データをもとに、Googleマップに現在位置を表示するというものです。
使用GPS ＧＰＳ受信機キット「みちびき」３機受信対応（秋月電子）
サイズ・表示切替・更新間隔の指定もできるようにしています。
スクリプト内に、センサーの定義や通信を行うコードが記載されています。
情報の表示や操作といったインターフェース部の制作が使い勝手を左右しますが、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>
