Status bar and resiliency

This commit is contained in:
2025-02-19 17:49:03 +00:00
parent 841effe8e1
commit ec57f75ef6

View File

@@ -9,13 +9,15 @@ font-size:3;
font-weight:bold; font-weight:bold;
line-height:140%; line-height:140%;
} }
#status #status {
{ background-color: #FFFFFF;
background-color:red; border-radius: 15px;
font-size:4; font-family: 'andale mono', monospace;
font-weight:bold; font-size: 16pt;
color:white; width: 610px;
line-height:140%; margin: 5px;
text-align: center;
line-height: 35px;
} }
.myDiv .myDiv
{ {
@@ -106,20 +108,22 @@ line-height:140%;
<title>EGFH Tower</title> <title>EGFH Tower</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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 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"> <script type = "text/javascript">
function onConnectionLost(){ function onConnectionLost(){
//invalidateDisplay(); invalidateDisplay();
console.log("connection lost"); console.log("connection lost");
document.getElementById("status").innerHTML = "Connection Lost"; document.getElementById("status").style.backgroundColor = '#AA0000';
document.getElementById("status").innerHTML = "Connection Lost, reloading";
connected_flag=0; connected_flag=0;
setTimeout(location.reload(), reloadDelay);
} }
function onFailure(message) { function onFailure(message) {
invalidateDisplay(); invalidateDisplay();
console.log("Failed"); console.log("Failed");
document.getElementById("status").style.backgroundColor = '#AA0000';
document.getElementById("status").innerHTML = "Connection Failed- Retrying"; document.getElementById("status").innerHTML = "Connection Failed- Retrying";
setTimeout(MQTTconnect, reconnectTimeout); setTimeout(MQTTconnect, reconnectTimeout);
} }
@@ -177,6 +181,12 @@ line-height:140%;
function invalidateDisplay() { function invalidateDisplay() {
invalidateWind(); invalidateWind();
invalidateAvgWind(); invalidateAvgWind();
invalidateOAT();
}
function invalidateOAT() {
document.getElementById("OAT").innerHTML = "XXX";
windValid = 0;
} }
function invalidateWind() { function invalidateWind() {
@@ -193,6 +203,7 @@ line-height:140%;
function onConnect() { function onConnect() {
connected_flag=1; connected_flag=1;
document.getElementById("status").style.backgroundColor = '#00AA00';
document.getElementById("status").innerHTML = "Connected"; document.getElementById("status").innerHTML = "Connected";
console.log("Connected to MQTT broker"); console.log("Connected to MQTT broker");
sub_topics() sub_topics()
@@ -231,8 +242,7 @@ line-height:140%;
function sub_topics() { function sub_topics() {
if (connected_flag==0) { if (connected_flag==0) {
msg="Not Connected so can't subscribe" console.log("Not Connected so can't subscribe");
console.log(out_msg);
return false; return false;
} }
@@ -294,11 +304,15 @@ line-height:140%;
if (secs > 10 && windValid == 1) { if (secs > 10 && windValid == 1) {
invalidateWind(); invalidateWind();
console.log("Invalidating instant wind due to late message") console.log("Invalidating instant wind due to late message")
document.getElementById("status").innerHTML = "Missing Wind message";
document.getElementById("status").style.backgroundColor = '#AA0000';
} }
secs = (dt.getTime() - lastAvgWind)/1000; secs = (dt.getTime() - lastAvgWind)/1000;
if (secs > 150 && windAvgValid == 1) { if (secs > 150 && windAvgValid == 1) {
invalidateAvgWind(); invalidateAvgWind();
console.log("Invalidating average wind due to late message") console.log("Invalidating average wind due to late message")
document.getElementById("status").innerHTML = "Missing avg Wind message";
document.getElementById("status").style.backgroundColor = '#AA0000';
} }
secs = (dt.getTime() - lastPressure)/1000; secs = (dt.getTime() - lastPressure)/1000;
if (secs > 300 && pressureValid == 1) { if (secs > 300 && pressureValid == 1) {
@@ -353,20 +367,22 @@ line-height:140%;
<div class="flex-container"> <div class="flex-container">
<div id="zuluTime">QNH: XXX</div> <div id="zuluTime">QNH: XXX</div>
</div> </div>
<br>
<div class="flex-container">
<div id="status"></div>
</div>
<p></p> <p></p>
<p>
<div id="status">Connection Status: Not Connected</div>
<script> <script>
var connected_flag=0 var connected_flag=0
var mqtt; var mqtt;
var reconnectTimeout = 2000; var reconnectTimeout = 2000;
var reloadDelay = 5000;
var host="wss://wx.swansea-airport.wales/mqtt"; var host="wss://wx.swansea-airport.wales/mqtt";
var qCorrection = 0; // Offset for QFE / QNH var qCorrection = 0; // Offset for QFE / QNH
var row=0; var row=0;
var out_msg="";
var mcount=0; var mcount=0;
var topic = "weather/#"; var topic = "weather/#";
var windValid = 0; var windValid = 0;