Skip to content

Instantly share code, notes, and snippets.

@tomvdb

tomvdb/hsmodem_weather.html

Created October 24, 2022 09:23
Show Gist options
  • Save tomvdb/1663432fe30707eb4d28b5652cb2b535 to your computer and use it in GitHub Desktop.
Save tomvdb/1663432fe30707eb4d28b5652cb2b535 to your computer and use it in GitHub Desktop.
Download ZIP
Example HTML File for HS Modem - Weather Station Data Receive
Raw
hsmodem_weather.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QO-100 HS Modem Tests</title>
<style>
.sparkline--red {
stroke: red;
fill: rgba(255, 0, 0, .3);
}
.sparkline--green {
stroke: green;
fill: rgba(0, 255, 0, .3);
}
td, th {
border: 1px solid black;
}
.sparkline--blue {
stroke: blue;
fill: rgba(0, 0, 255, .3);
}
</style>
<script type="text/javascript">
var sparkline=function(t){var e={};function r(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=t,r.c=e,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)r.d(n,o,function(e){return t[e]}.bind(null,o));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=1)}([function(t,e,r){var n=r(2),o=r(3),i=r(4);t.exports=function(t){return n(t)||o(t)||i()}},function(t,e,r){"use strict";r.r(e),r.d(e,"sparkline",function(){return c});var n=r(0),o=r.n(n);function i(t,e,r,n){return parseFloat((e-n*e/t+r).toFixed(2))}function a(t){return t.value}function u(t,e){var r=document.createElementNS("http://www.w3.org/2000/svg",t);for(var n in e)r.setAttribute(n,e[n]);return r}function c(t,e,r){var n;if(n=t,o()(n.querySelectorAll("*")).forEach(function(t){return n.removeChild(t)}),!(e.length<=1)){r=r||{},"number"==typeof e[0]&&(e=e.map(function(t){return{value:t}}));var c=r.onmousemove,l=r.onmouseout,s="interactive"in r?r.interactive:!!c,f=r.spotRadius||2,p=2*f,d=r.cursorWidth||2,v=parseFloat(t.attributes["stroke-width"].value),b=r.fetch||a,h=e.map(function(t){return b(t)}),y=parseFloat(t.attributes.width.value)-2*p,x=parseFloat(t.attributes.height.value),m=x-2*v-p,g=Math.max.apply(Math,o()(h)),A=-1e3,w=h.length-1,j=y/w,k=[],O=i(g,m,v+f,h[0]),S="M".concat(p," ").concat(O);h.forEach(function(t,r){var n=r*j+p,o=i(g,m,v+f,t);k.push(Object.assign({},e[r],{index:r,x:n,y:o})),S+=" L ".concat(n," ").concat(o)});var M=u("path",{class:"sparkline--line",d:S,fill:"none"}),C=u("path",{class:"sparkline--fill",d:"".concat(S," V ").concat(x," L ").concat(p," ").concat(x," Z"),stroke:"none"});if(t.appendChild(C),t.appendChild(M),s){var E=u("line",{class:"sparkline--cursor",x1:A,x2:A,y1:0,y2:x,"stroke-width":d}),_=u("circle",{class:"sparkline--spot",cx:A,cy:A,r:f});t.appendChild(E),t.appendChild(_);var F=u("rect",{width:t.attributes.width.value,height:t.attributes.height.value,style:"fill: transparent; stroke: transparent",class:"sparkline--interaction-layer"});t.appendChild(F),F.addEventListener("mouseout",function(t){E.setAttribute("x1",A),E.setAttribute("x2",A),_.setAttribute("cx",A),l&&l(t)}),F.addEventListener("mousemove",function(t){var e=t.offsetX,r=k.find(function(t){return t.x>=e});r||(r=k[w]);var n,o=k[k.indexOf(r)-1],i=(n=o?o.x+(r.x-o.x)/2<=e?r:o:r).x,a=n.y;_.setAttribute("cx",i),_.setAttribute("cy",a),E.setAttribute("x1",i),E.setAttribute("x2",i),c&&c(t,n)})}}}e.default=c},function(t,e){t.exports=function(t){if(Array.isArray(t)){for(var e=0,r=new Array(t.length);e<t.length;e++)r[e]=t[e];return r}}},function(t,e){t.exports=function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}},function(t,e){t.exports=function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}}]);
window.onload = onstart;
var sockintv;
var sockOpen = 0;
var websocket;
var temperatures = [];
var humidity = [];
var windspeed = [];
function onstart()
{
sockintv = setInterval(checkSocket, 1000);
}
var intervalset = 0;
function checkSocket()
{
if(sockOpen == 0)
{
console.log( "open socket" )
if(websocket != null)
websocketclose();
openWebSocket();
return;
}
websocket.send("alive\0");
if(intervalset == 0)
{
intervalset = 1;
clearInterval(sockintv);
sockintv = setInterval(checkSocket, 5000);
}
}
function websocketclose()
{
if(websocket != null)
{
console.log("close websocket");
websocket.close();
websocket = null;
}
else
{
console.log("close websocket, already closed");
}
}
var msg = "";
var dxarray = [];
var sockurl;
function openWebSocket()
{
window.WebSocket = window.WebSocket || window.MozWebSocket;
sockurl = "ws://" + "127.0.0.1" + ":40134";
console.log(sockurl);
websocket = new WebSocket(sockurl);
websocket.binaryType = "arraybuffer";
websocket.onopen = function () {
sockOpen = 1;
console.log("WebSocket " + sockurl + " now OPEN");
};
websocket.onerror = function () {
console.log("Error ... reconnecting ...");
websocketclose();
sockOpen = 0;
};
websocket.onclose = function () {
console.log("Disconnected ... connecting ...");
websocketclose();
sockOpen = 0;
};
websocket.onmessage = function (message)
{
var arr = new Uint8Array(message.data);
console.log(arr);
// lets make sure its our generic message
if(arr[3] == 25)
{
temperatures.push(arr[4]); // temperature
humidity.push(arr[5]);
windspeed.push(arr[6]);
if ( temperatures.length > 20 )
{
temperatures.shift()
humidity.shift()
windspeed.shift()
}
// update text
document.getElementById("tempvalue").innerHTML = arr[4].toString() + '&deg;C';
document.getElementById("humidvalue").innerHTML = arr[5].toString() + '%';
document.getElementById("windvalue").innerHTML = arr[6].toString() + ' m/s';
// update sparklines
sparkline.sparkline(document.querySelector('[name="tempspark"]'), temperatures);
sparkline.sparkline(document.querySelector('[name="humidspark"]'), humidity);
sparkline.sparkline(document.querySelector('[name="windspark"]'), windspeed);
}
};
}
</script>
</head>
<body>
<table cellpadding=5>
<tr><td colspan='3'><b>ZR6TG QO-100 Highspeed Modem Weather Station</b></td></tr>
<tr>
<td>Temperature</td>
<td><svg name='tempspark' class="sparkline sparkline--red" width="100" height="30" stroke-width="3"></svg></td>
<td><div id='tempvalue'></div></td>
</tr>
<tr>
<td>Humidity</td>
<td><svg name='humidspark' class="sparkline sparkline--blue" width="100" height="30" stroke-width="3"></svg></td>
<td><div id='humidvalue'></div></td>
</tr>
<tr>
<td>Wind Speed</td>
<td><svg name='windspark' class="sparkline sparkline--green" width="100" height="30" stroke-width="3"></svg></td>
<td><div id='windvalue'></div></td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment