obniz
Version:
obniz sdk for javascript
393 lines (357 loc) • 14.3 kB
HTML
<html lang="ja">
<head>
<meta charset="utf-8">
<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@latest/obniz.js" crossorigin="anonymous"></script>
<style>
.opps {
padding: 1em 0.5em;
text-align: center;
text-decoration: none;
color: silver;
border: 2px solid silver;
font-size: 24px;
display: inline-block;
border-radius: 6em;
margin: 10px;
}
.opps1After {
background-color: red;
color: white;
border: 4px solid white;
}
.flexbox {
display: -webkit-box; /* Chrome 4-20, Firefox 2-21, Safari 3.1-6.0 */
display: -webkit-flex; /* Chrome 21-27 */
display: -moz-box; /* Firefox 2-21 */
display: -ms-flexbox; /* IE9 */
display: flex;
}
.flex-start {
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
</style>
</head>
<body style="background-color: white;">
<div id="obniz-debug"></div>
<h1>GYSFDMAXB GPS module</h1>
<div style="display:block;"><iframe id="map" src="https://www.google.com/maps?output=embed&iwloc=B&q=35.710132,139.703268&t=m&z=18"
width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
<td><button id="reMap">Mapping</button></td>
</div>
<small>
<div id="addr"></div>
</small>
<div>
<h3><span id="timestamp"></span> 測位品質: <span id="quality">no available</span></h3>
</div>
<div style="display:block;" id="canvasDiv">
<div><canvas id="canvas0" width="120" height="120" frameborder="0" style="border:0"></canvas>
<canvas id="canvas1" width="430" height="120" frameborder="0" style="border:0"></canvas></div>
<div class="flexbox flex-start"><canvas id="canvas2" width="320" height="320" frameborder="0" style="border:0"></canvas>
<a id="opps" class="opps">1pps</a></div>
</div>
<h2 id="founds"></h2>
<div id="print"></div>
<h3>GPS情報</h3>
<div style="font-size:large"><pre id="text1"></pre></div>
<table><tr>
<td><h3>NMEAセンテンス</h3></td>
<td><button id="clear">Clear</button></td>
</tr></table>
<div id="display"></div>
<div style="font-size:large"><pre id="text2"></pre></div>
<table><tr>
<td><h3>GPS<br>power</h3></td>
<td><button id="on">ON</button></td>
<td><button id="off">OFF</button></td>
<td><button id="log">Log Start/Stop</button></td>
</tr></table>
<script>;
var tapORclick = (window.ontouchstart===null) ? "touchstart" : "click";
var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function () {
var logging = false;
var showMap = true;
//Obniz.PartsRegistrate(GYSFDMAXB);
var gps = obniz.wired("GYSFDMAXB", { vcc: 7, gnd: 8, txd: 9, rxd: 10, Opps: 11 });
gps.start1pps(function() {
// console.log("1pps received.");
$('#opps').addClass('opps1After');
setTimeout(function() {
$('#opps').removeClass('opps1After');
}, 200);
});
function d2(v) {
return ('0' + v).slice(-2);
}
function localDatetime(d) {
let local = d.getFullYear() + "."
+ d2(d.getMonth() + 1) + "."
+ d2(d.getDate()) + " "
+ d2(d.getHours()) + ":"
+ d2(d.getMinutes()) + ":"
+ d2(d.getSeconds());
return local;
}
function mainLoop() {
let info = gps.getGpsInfo();
if (logging) {
console.log(gps.editedData);
console.log(info);
}
if (gps.editedData.enable) {
var nmea = "";
if (gps.editedData.GPGGA) nmea += (gps.editedData.GPGGA.join(",") + "\n");
if (gps.editedData.GPGLL) nmea += (gps.editedData.GPGLL.join(",") + "\n");
if (gps.editedData.GPGSA) nmea += (gps.editedData.GPGSA.join(",") + "\n");
if (gps.editedData.GPGSV[0]) nmea += (gps.editedData.GPGSV[0].join(",") + "\n");
if (gps.editedData.GPGSV[1]) nmea += (gps.editedData.GPGSV[1].join(",") + "\n");
if (gps.editedData.GPGSV[2]) nmea += (gps.editedData.GPGSV[2].join(",") + "\n");
if (gps.editedData.GPGSV[3]) nmea += (gps.editedData.GPGSV[3].join(",") + "\n");
if (gps.editedData.GPRMC) nmea += (gps.editedData.GPRMC.join(",") + "\n");
if (gps.editedData.GPVTG) nmea += (gps.editedData.GPVTG.join(",") + "\n");
if (gps.editedData.GPZDA) nmea += (gps.editedData.GPZDA.join(",") + "\n");
if (gps.editedData.PMTK010) nmea += (gps.editedData.PMTK010.join(",") + "\n");
if (gps.editedData.PMTK011) nmea += (gps.editedData.PMTK011.join(",") + "\n");
$("#text2").text(nmea);
}
if (info.status == "A") {
var inf = "gpsInfo\n" +
` utc: ${info.utc}\n` +
` status: ${info.status} [${gps.status2string(info.status)}]\t// Active or Void\n` +
` fixMode: ${info.fixMode} [${gps.fixMode2string(info.fixMode)}]\t// 1:Fix not available, 2:2D, 3:3D\n` +
` gpsQuality: ${info.gpsQuality} [${gps.gpsQuality2string(info.gpsQuality)}]\t// 0:Invalid, 1:GPS fix, 2:DGPS fix\n` +
` latitude: ${info.latitude}\n` +
` longitude: ${info.longitude}\n` +
` pdop: ${info.pdop}\t// PDOP: Position Dilution of Precision\n` +
` hdop: ${info.hdop}\t// HDOP: Horizontal Dilution of Precision\n` +
` vdop: ${info.vdop}\t// VDOP: Vertical Dilution of Position\n` +
` altitude: ${info.altitude}[M]\n` +
` declination: ${info.declination}\t// Magnetic declination\n` +
` direction: ${info.direction}\n` +
` speed: ${info.speed}[km/h]\n` +
" satelliteInfo:\n" +
` inUse: ${info.satelliteInfo.inUse}\n` +
` inView: ${info.satelliteInfo.inView}\n` +
` satellites: Array (${info.satelliteInfo.satellites.length})\n`;
for (let n=0; n<info.satelliteInfo.satellites.length;n++) {
let sat = info.satelliteInfo.satellites[n];
inf += ` [${n}]: {id: ${sat.id},\televation: ${sat.elevation},\tazimuth: ${sat.azimuth},\tsnr: ${sat.snr}[dB],\tinUse: ${sat.inUse}, }\n`;
}
var set = "";
info.sentences.forEach(function(value) {
if (value == info._sentenceType.GPGGA) set += "GPGGA, ";
if (value == info._sentenceType.GPGGA) set += "GPGSA, ";
if (value == info._sentenceType.GPGGA) set += "GPGSV, ";
if (value == info._sentenceType.GPGGA) set += "GPRMC, ";
if (value == info._sentenceType.GPGGA) set += "GPVTG, ";
if (value == info._sentenceType.GPGGA) set += "GPZDA, ";
});
inf += ` sentences: Set {${set}}`;
$("#text1").text(inf);
if (showMap) {
showMap = false;
const k = info.latitude;
const e = info.longitude;
let src=`https://www.google.com/maps?output=embed&iwloc=A&q=現在地@${k},${e}`;
$("#map").attr("src", src);
getAddr(k, e);
}
$("#quality").text(`[${info.gpsQuality}]${gps.gpsQuality2string(info.gpsQuality)}`);
var canvas = $('#canvas1')[0];
if (canvas.getContext) {
let width = $('#canvas1').prop("width");
let height = $('#canvas1').prop("height");
let context = canvas.getContext('2d');
context.save();
context.fillStyle = '#FFFFCC';
context.fillRect(0, 0, width, height);
context.strokeStyle = "gray";
context.beginPath();
context.textAlign = 'left';
context.textBaseline = 'top';
context.fillStyle = 'black';
context.fillText("SNR(Signal to Noise Ratio)[dB]", 2, 2, width);
context.stroke();
context.beginPath();
context.textAlign = 'center';
context.textBaseline = 'bottom';
context.fillStyle = 'black';
let newFont = "12" + context.font.substr(2);
context.font = newFont;
info.satelliteInfo.satellites.forEach(function(satellite, index) {
if (satellite.id) {
context.fillText(satellite.id, index*25+30, 118, width);
}
});
context.stroke();
context.beginPath();
context.textAlign = 'center';
context.textBaseline = 'bottom';
context.fillStyle = 'gray';
newFont = "9" + context.font.substr(2);
context.font = newFont;
info.satelliteInfo.satellites.forEach(function(satellite, index) {
if (!Number.isNaN(satellite.snr) && satellite.snr > 0) {
context.fillText(satellite.snr + "dB", index*25+30, 105-Math.round(satellite.snr*0.9)-2, width);
} else {
if (satellite.id) context.fillText("0dB", index*25+30, 105-2, width);
}
});
context.stroke();
info.satelliteInfo.satellites.forEach(function(satellite, index) {
if (!Number.isNaN(satellite.snr) && satellite.snr > 0) {
let w = 20, h = Math.round(satellite.snr*0.9);
let x = index*25+20, y = 105-h;
context.fillStyle = satellite.inUse ? 'lime' : 'silver';
context.fillRect(x, y, w, h);
} else {
context.fillStyle = 'silver';
if (satellite.id) context.fillRect(index*25+20, 105-1, 20, 1);
}
});
context.restore();
}
canvas = $('#canvas2')[0];
if (canvas.getContext) {
let width = $('#canvas2').prop("width");
let height = $('#canvas2').prop("height");
let context = canvas.getContext('2d');
context.fillStyle = '#FFFFCC';
context.fillRect(0, 0, width, height);
context.beginPath();
context.textAlign = 'left';
context.textBaseline = 'top';
context.fillStyle = 'black';
context.fillText("Satellites in View", 2, 2, width);
context.stroke();
context.beginPath();
context.strokeStyle = "gray";
context.moveTo(0, height/2);
context.lineTo(width, height/2);
context.moveTo(width/2, 0);
context.lineTo(width/2, height);
context.stroke();
context.beginPath();
context.arc(width/2, height/2, (90- 0)*3.3/2, 0, Math.PI*2); //仰角0°
context.arc(width/2, height/2, (90-30)*3.3/2, 0, Math.PI*2); //仰角30°
context.arc(width/2, height/2, (90-60)*3.3/2, 0, Math.PI*2); //仰角60°
context.stroke();
info.satelliteInfo.satellites.forEach(function(satellite) {
const r = 20;
context.fillStyle = ((satellite.snr>0) && satellite.inUse) ? 'lime' : 'silver';
if (!Number.isNaN(satellite.elevation) && !Number.isNaN(satellite.azimuth)) {
context.beginPath();
let elevation = (90 - satellite.elevation) * 3.3/2;
let azimuth = (satellite.azimuth - 90) / 180 * Math.PI;
let x = Math.round(width/2 + elevation * Math.cos(azimuth));
let y = Math.round(height/2 + elevation * Math.sin(azimuth));
context.arc(x, y, r, 0, Math.PI*2);
context.fill();
}
});
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillStyle = 'black';
info.satelliteInfo.satellites.forEach(function(satellite) {
if (!Number.isNaN(satellite.elevation) && !Number.isNaN(satellite.azimuth)) {
const r = 20;
context.beginPath();
let elevation = (90 - satellite.elevation) * 3.3/2;
let azimuth = (satellite.azimuth - 90) / 180 * Math.PI;
let x = Math.round(width/2 + elevation * Math.cos(azimuth));
let y = Math.round(height/2 + elevation * Math.sin(azimuth));
context.fillText(satellite.id, x, y, width);
context.stroke();
}
});
}
var canvas = $('#canvas0')[0];
if (canvas.getContext) {
let width = $('#canvas0').prop("width");
let height = $('#canvas0').prop("height");
let context = canvas.getContext('2d');
context.fillStyle = '#FFFFCC';
context.fillRect(0, 0, width, height);
context.strokeStyle = "gray";
context.save();
context.beginPath();
context.arc(60, 60, 40, 0, Math.PI*2);
context.moveTo(60, 60);
context.lineTo(60, 15);
context.textAlign = 'center';
context.textBaseline = 'bottom';
context.fillStyle = 'red';
let newFont = "bold 12" + context.font.substr(2);
context.font = newFont;
context.fillText("N", 60, 15, width);
context.stroke();
context.beginPath();
context.strokeStyle = "red";
context.moveTo(60, 60);
let angle = (info.direction - 90) / 180 * Math.PI;
let x = Math.round(60 + 40 * Math.cos(angle));
let y = Math.round(60 + 40 * Math.sin(angle));
context.lineTo(x, y);
context.stroke();
context.beginPath();
context.fillStyle = "red";
context.arc(x, y, 2, 0, Math.PI*2);
context.fill();
context.restore();
context.beginPath();
context.textAlign = 'center';
context.textBaseline = 'bottom';
context.fillStyle = 'black';
let speed = (info.status == "A") ? info.speed + " km/h" : "no available";
context.fillText(speed, 60, 70, width);
context.stroke();
}
if (info.utc) $("#timestamp").text(localDatetime(info.utc) + " (JST)");
} else {
var inf = "gpsInfo\n" +
` status: ${info.status} [${gps.status2string(info.status)}]\t// Active or Void\n`;
$("#text1").text(inf);
}
setTimeout(mainLoop, 1000);
}
function clearText() {
for (let n=0; n<14; n++) {
let id = "#text" + n;
$(id).text("");
}
$("#addr").text("");
}
$("#clear").on(tapORclick, function(){
clearText();
});
obniz.switch.onchange = function(state) {
$('#print').text(state);
obniz.display.clear();
obniz.display.print(state);
}
function getAddr(lat, lng) {
let url = `http://maps.google.com/maps/api/geocode/json?latlng=${lat},${lng}&sensor=false&language=ja`;
$.get(url, function(data, status) {
let adr2;
if (data.results.length > 0) {
let adr = data.results[1].formatted_address;
adr2 = adr.substr(adr.lastIndexOf(" "));
} else {
adr2 = data.error_message + " : " + data.status;
}
$("#addr").text(adr2);
});
}
setInterval(function(){ showMap = true; }, 60*1000);
setTimeout(mainLoop, 10);
}
</script>
</body>
</html>