398 lines
9.2 KiB
HTML
398 lines
9.2 KiB
HTML
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<style>
|
|
|
|
#messages
|
|
{
|
|
background-color:yellow;
|
|
font-size:3;
|
|
font-weight:bold;
|
|
line-height:140%;
|
|
}
|
|
#myiframe {
|
|
width: 80%;
|
|
height: 500px;
|
|
border: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
#status
|
|
{
|
|
background-color:red;
|
|
font-size:4;
|
|
font-weight:bold;
|
|
color:white;
|
|
line-height:140%;
|
|
}
|
|
.myDiv
|
|
{
|
|
border: 5px outset red;
|
|
/*background-color: lightblue; */
|
|
text-align: center;
|
|
width: 500px;
|
|
|
|
font: andale mono, sans-serif;
|
|
margin: auto;
|
|
}
|
|
|
|
.flex-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
/*background-color: DodgerBlue;*/
|
|
}
|
|
|
|
.flex-container > div {
|
|
background-color: #f1f1f1;
|
|
border-radius: 15px;
|
|
font-family: 'andale mono', monospace;
|
|
font-size: xx-large;
|
|
width: 300px;
|
|
margin: 5px;
|
|
text-align: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
line-height: 50px;
|
|
}
|
|
|
|
#QNH {
|
|
background-color: #f1f1f1;
|
|
border-radius: 15px;
|
|
font-family: 'andale mono', monospace;
|
|
font-size: 64pt;
|
|
width: 300px;
|
|
margin: 5px;
|
|
text-align: center;
|
|
line-height: 75px;
|
|
}
|
|
|
|
#QFE {
|
|
background-color: #f1f1f1;
|
|
border-radius: 15px;
|
|
font-family: 'andale mono', monospace;
|
|
font-size: 64pt;
|
|
width: 300px;
|
|
margin: 5px;
|
|
text-align: center;
|
|
line-height: 75px;
|
|
}
|
|
|
|
#windSpeed {
|
|
background-color: #f1f1f1;
|
|
border-radius: 15px;
|
|
font-family: 'andale mono', monospace;
|
|
font-size: 48pt;
|
|
width: 300px;
|
|
margin: 5px;
|
|
text-align: center;
|
|
line-height: 75px;
|
|
}
|
|
|
|
#avgWindSpeed {
|
|
background-color: #f1f1f1;
|
|
border-radius: 15px;
|
|
font-family: 'andale mono', monospace;
|
|
font-size: 48pt;
|
|
width: 300px;
|
|
margin: 5px;
|
|
text-align: center;
|
|
line-height: 75px;
|
|
}
|
|
|
|
#zuluTime {
|
|
background-color: #f1f1f1;
|
|
border-radius: 15px;
|
|
font-family: 'andale mono', monospace;
|
|
font-size: 64pt;
|
|
width: 610px;
|
|
margin: 5px;
|
|
text-align: center;
|
|
line-height: 75px;
|
|
}
|
|
|
|
</style>
|
|
<head>
|
|
<title>EGFH Tower</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
|
|
<script type = "text/javascript"
|
|
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
|
<script type = "text/javascript">
|
|
|
|
function onConnectionLost(){
|
|
//invalidateDisplay();
|
|
console.log("connection lost");
|
|
document.getElementById("status").innerHTML = "Connection Lost";
|
|
connected_flag=0;
|
|
}
|
|
|
|
function onFailure(message) {
|
|
invalidateDisplay();
|
|
console.log("Failed");
|
|
document.getElementById("status").innerHTML = "Connection Failed- Retrying";
|
|
setTimeout(MQTTconnect, reconnectTimeout);
|
|
}
|
|
|
|
function onMessageArrived(r_message){
|
|
if (r_message.destinationName == "weather/loop"){
|
|
console.log("Got LOOP " + r_message.payloadString);
|
|
loopObj = JSON.parse(r_message.payloadString);
|
|
if (loopObj.interval_minute) {
|
|
console.log("AVG Speed " + loopObj.windSpeed_knot);
|
|
console.log("AVG Dir " + loopObj.windDir);
|
|
console.log(loopObj);
|
|
//var audio = new Audio('BPCBeep.mp3');
|
|
//audio.play();
|
|
lastAvgWind = Date.now();
|
|
windAvgValid = 1;
|
|
avgWindSpeed = Number(loopObj.windSpeed_knot).toFixed(0);
|
|
roundedWind = (Math.round(loopObj.windDir / 10) * 10).toFixed(0);
|
|
avgWindDir = ('000' + roundedWind).substr(-3);
|
|
|
|
avgWindGustSpeed = Number(loopObj.windGust_knot).toFixed(0);
|
|
roundedWind = (Math.round(loopObj.windGustDir / 10) * 10).toFixed(0);
|
|
avgWindGustDir = ('000' + roundedWind).substr(-3);
|
|
updateAvgWind();
|
|
|
|
} else {
|
|
if (loopObj.windSpeed_knot) {
|
|
lastWind = Date.now();
|
|
windValid = 1;
|
|
console.log("LOOP Speed " + loopObj.windSpeed_knot);
|
|
console.log("LOOP Dir " + loopObj.windDir);
|
|
instantWindSpeed = Number(loopObj.windSpeed_knot).toFixed(0);
|
|
roundedWind = (Math.round(loopObj.windDir / 10) * 10).toFixed(0);
|
|
zeroFilledDir = ('000' + roundedWind).substr(-3);
|
|
updateWind();
|
|
}
|
|
if (loopObj.outTemp_C) {
|
|
console.log("LOOP OAT " + loopObj.outTemp_C);
|
|
document.getElementById("OAT").innerHTML = Number(loopObj.outTemp_C).toFixed(0) + " °C";
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
function updateWind() {
|
|
document.getElementById("windSpeed").innerHTML = zeroFilledDir + "/" + instantWindSpeed;
|
|
}
|
|
|
|
function updateAvgWind() {
|
|
document.getElementById("avgWindSpeed").innerHTML = avgWindDir + "/" + avgWindSpeed;
|
|
document.getElementById("avgWindGust").innerHTML = avgWindGustDir + "/" + avgWindGustSpeed;
|
|
}
|
|
|
|
function invalidateDisplay() {
|
|
invalidateWind();
|
|
invalidateAvgWind();
|
|
}
|
|
|
|
function invalidateWind() {
|
|
document.getElementById("windSpeed").innerHTML = "XXX/X";
|
|
windValid = 0;
|
|
}
|
|
|
|
function invalidateAvgWind() {
|
|
document.getElementById("avgWindSpeed").innerHTML = "XXX/X";
|
|
document.getElementById("avgWindGust").innerHTML = "XXX/X";
|
|
windAvgValid = 0;
|
|
}
|
|
|
|
function onConnect() {
|
|
|
|
connected_flag=1;
|
|
document.getElementById("status").innerHTML = "Connected";
|
|
console.log("Connected to MQTT broker");
|
|
sub_topics()
|
|
|
|
}
|
|
|
|
function disconnect() {
|
|
|
|
if (connected_flag==1)
|
|
mqtt.disconnect();
|
|
|
|
}
|
|
|
|
function MQTTconnect() {
|
|
|
|
clean_sessions=true
|
|
var x=Math.floor(Math.random() * 10000);
|
|
var cname="wx-"+x;
|
|
mqtt = new Paho.MQTT.Client(host,cname);
|
|
|
|
var options = {
|
|
timeout: 3,
|
|
cleanSession: clean_sessions,
|
|
onSuccess: onConnect,
|
|
onFailure: onFailure,
|
|
};
|
|
|
|
mqtt.onConnectionLost = onConnectionLost;
|
|
mqtt.onMessageArrived = onMessageArrived;
|
|
|
|
mqtt.connect(options);
|
|
return false;
|
|
|
|
}
|
|
|
|
function sub_topics() {
|
|
|
|
if (connected_flag==0) {
|
|
msg="Not Connected so can't subscribe"
|
|
console.log(out_msg);
|
|
return false;
|
|
}
|
|
|
|
var sqos=0;
|
|
var soptions= {
|
|
qos:sqos,
|
|
};
|
|
mqtt.subscribe(topic,soptions);
|
|
return false;
|
|
}
|
|
|
|
// TODO: This is all a bit rough and ready. The station ID is hardcoded and so are the sensor IDs
|
|
// It should really look these up each time
|
|
//
|
|
// Also what I thought was QNH is actually QFE
|
|
|
|
async function getPressure() {
|
|
|
|
const response = await fetch('/wlproxy.php?api=current/195562');
|
|
const names = await response.json();
|
|
lastPressure = Date.now();
|
|
pressureValid = 1;
|
|
QFERaw = names.contents.sensors[2].data[0].bar_absolute;
|
|
QFE = Number((QFERaw / 0.029529983071445).toFixed(0)) + qCorrection;
|
|
QNH = QFE + 11;
|
|
|
|
if (Number(QFE) < 1000) {
|
|
document.getElementById("QFE").textContent = + QFE + " hPa";
|
|
|
|
} else {
|
|
document.getElementById("QFE").textContent = QFE;
|
|
}
|
|
|
|
if (Number(QNH) < 1000) {
|
|
document.getElementById("QNH").textContent = + QNH + " hPa";
|
|
|
|
} else {
|
|
document.getElementById("QNH").textContent = QNH;
|
|
}
|
|
|
|
var ts = new Date(names.contents.sensors[0].data[0].ts * 1000);
|
|
console.log(names.contents.sensors); // Dump the whole JSON to console
|
|
}
|
|
|
|
function updateClock() {
|
|
|
|
var dt = new Date();
|
|
var h = dt.getUTCHours().toString();
|
|
h = h.length == 1 ? '0' + h : h;
|
|
var m = dt.getUTCMinutes().toString();
|
|
m = m.length == 1 ? '0' + m : m;
|
|
var s = dt.getUTCSeconds().toString();
|
|
s = s.length == 1 ? '0' + s : s;
|
|
var result = ' ' + h + ':' + m + ':' + s + " Z";
|
|
|
|
document.getElementById("zuluTime").textContent = result;
|
|
window.addEventListener( 'DOMContentLoaded', function(e) { updateClock('date_time'); } )
|
|
secs = (dt.getTime() - lastWind)/1000;
|
|
if (secs > 10 && windValid == 1) {
|
|
invalidateWind();
|
|
console.log("Invalidating instant wind due to late message")
|
|
}
|
|
secs = (dt.getTime() - lastAvgWind)/1000;
|
|
if (secs > 150 && windAvgValid == 1) {
|
|
invalidateAvgWind();
|
|
console.log("Invalidating average wind due to late message")
|
|
}
|
|
secs = (dt.getTime() - lastPressure)/1000;
|
|
if (secs > 300 && pressureValid == 1) {
|
|
pressureValid = 0;
|
|
console.log("Calling update pressure")
|
|
getPressure();
|
|
}
|
|
|
|
setTimeout( updateClock.bind( this, "zuluTime" ), 500 );
|
|
}
|
|
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<script type = "text/javascript">
|
|
|
|
</script>
|
|
|
|
<br>
|
|
<div class="flex-container">
|
|
<div>QNH</div>
|
|
<div>QFE</div>
|
|
</div>
|
|
<div class="flex-container">
|
|
<div id="QNH" class="data">XXXX</div>
|
|
<div id="QFE" class="data">XXXX</div>
|
|
</div>
|
|
<br>
|
|
<div class="flex-container">
|
|
<div>Surface Wind</div>
|
|
<div>Instant Wind</div>
|
|
</div>
|
|
|
|
<div class="flex-container">
|
|
<div id="avgWindSpeed">2</div>
|
|
<div id="windSpeed">1</div>
|
|
</div>
|
|
<br>
|
|
<div class="flex-container">
|
|
<div>2min Gust</div>
|
|
<div>OAT</div>
|
|
</div>
|
|
|
|
<div class="flex-container">
|
|
<div id="avgWindGust">XXX</div>
|
|
<div id="OAT">XXX</div>
|
|
</div>
|
|
<br>
|
|
|
|
<div class="flex-container">
|
|
<div id="zuluTime">QNH: XXX</div>
|
|
</div>
|
|
|
|
<p></p>
|
|
|
|
<p>
|
|
<div id="status">Connection Status: Not Connected</div>
|
|
|
|
<script>
|
|
var connected_flag=0
|
|
var mqtt;
|
|
var reconnectTimeout = 2000;
|
|
var host="wss://wx.swansea-airport.wales/mqtt";
|
|
var qCorrection = 0; // Offset for QFE / QNH
|
|
var row=0;
|
|
var out_msg="";
|
|
var mcount=0;
|
|
var topic = "weather/#";
|
|
var windValid = 0;
|
|
var avgWindValid = 0;
|
|
var pressureValid = 0;
|
|
let lastWind = Date.now();
|
|
let lastAvgWind = Date.now();
|
|
let lastPressure = Date.now();
|
|
|
|
invalidateDisplay();
|
|
MQTTconnect();
|
|
getPressure();
|
|
updateClock();
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|