Status bar and resiliency
This commit is contained in:
50
agcs.html
50
agcs.html
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user