first commit
This commit is contained in:
241
wind.html
Normal file
241
wind.html
Normal file
@@ -0,0 +1,241 @@
|
||||
<?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%;
|
||||
}
|
||||
#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: small-caps bold 24px/1 sans-serif;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
<head>
|
||||
<title>EGFH Tower</title>
|
||||
<meta http-equiv="refresh" content="900">
|
||||
<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_mph);
|
||||
console.log("AVG Dir " + loopObj.windDir);
|
||||
avgWindSpeed = (loopObj.windSpeed_mph/1.151).toFixed(0);
|
||||
roundedWind = (Math.round(loopObj.windDir / 10) * 10).toFixed(0);
|
||||
avgWindDir = ('000' + roundedWind).substr(-3);
|
||||
updateAvgWind();
|
||||
} else {
|
||||
if (loopObj.windSpeed_mph) {
|
||||
console.log("LOOP Speed " + loopObj.windSpeed_mph);
|
||||
console.log("LOOP Dir " + loopObj.windDir);
|
||||
windSpeed = (loopObj.windSpeed_mph/1.151).toFixed(0);
|
||||
roundedWind = (Math.round(loopObj.windDir / 10) * 10).toFixed(0);
|
||||
zeroFilledDir = ('000' + roundedWind).substr(-3);
|
||||
updateWind();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function updateWind() {
|
||||
document.getElementById("windSpeed").innerHTML = "<h2>Instant Wind<p><h1>" + zeroFilledDir + " / " + windSpeed + " kts";
|
||||
}
|
||||
|
||||
function updateAvgWind() {
|
||||
document.getElementById("avgWindSpeed").innerHTML = "<h2>2min Wind<p><h1>" + avgWindDir + " / " + avgWindSpeed + " kts";
|
||||
}
|
||||
|
||||
function invalidateDisplay() {
|
||||
document.getElementById("windSpeed").innerHTML = "<h2>Instant Wind<p><h1>XXX / X kts";
|
||||
document.getElementById("avgWindSpeed").innerHTML = "<h2>2min Wind<p><h1>XXX / X kts";
|
||||
}
|
||||
|
||||
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="orderform-"+x;
|
||||
mqtt = new Paho.MQTT.Client(host,port,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();
|
||||
QFERaw = names.contents.sensors[2].data[0].bar_absolute;
|
||||
QFE = (QFERaw / 0.029529983071445).toFixed(0);
|
||||
QNH = Number(QFE) + 11;
|
||||
|
||||
if (Number(QFE) < 1001) {
|
||||
document.getElementById("QFE").innerHTML = "<h2>QFE: " + QFE + "</h2><p><h3>hectopascals</h3>";
|
||||
|
||||
} else {
|
||||
document.getElementById("QFE").innerHTML = "<h2>QFE: " + QFE + "</h2>";
|
||||
}
|
||||
|
||||
if (Number(QNH) < 1001) {
|
||||
document.getElementById("QNH").innerHTML = "<h2>QNH: " + QNH + "</h2><p><h3>hectopascals</h3>";
|
||||
|
||||
} else {
|
||||
document.getElementById("QNH").innerHTML = "<h2>QNH: " + QNH + "</h2>";
|
||||
}
|
||||
|
||||
var ts = new Date(names.contents.sensors[0].data[0].ts * 1000);
|
||||
console.log(names.contents.sensors); // Dump the whole JSON to console
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<center><h1>UNDER TEST Swansea Tower Live</h1>
|
||||
Instant wind data is received from the sensor by the Raspberry Pi via radio reciever and updates in real time.
|
||||
|
||||
<p>
|
||||
The Barometric data actually comes from the Davis console device indirectly via the Internet and has a 15 minute delay. There will soon be a barometric sensor connected locally to fix this.
|
||||
</center>
|
||||
|
||||
<script type = "text/javascript">
|
||||
//ll
|
||||
|
||||
</script>
|
||||
|
||||
<p></p>
|
||||
<div class="myDiv" id="windSpeed">
|
||||
</div>
|
||||
<br>
|
||||
<div class="myDiv" id="avgWindSpeed"></div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="myDiv" id="QNH">
|
||||
<h2>QNH: XXX</h2>
|
||||
</div>
|
||||
<br>
|
||||
<div class="myDiv" id="QFE">
|
||||
<h2>QFE: XXX</h2>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td id="connect" width="300" >
|
||||
<form name="connform" action="" onsubmit="return MQTTconnect()">
|
||||
|
||||
<input name="conn" type="submit" value="Connect">
|
||||
<input TYPE="button" name="discon " value="DisConnect" onclick="disconnect()">
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
<div id="status">Connection Status: Not Connected</div>
|
||||
|
||||
|
||||
<script>
|
||||
var connected_flag=0
|
||||
var mqtt;
|
||||
var reconnectTimeout = 2000;
|
||||
var host="192.168.24.188";
|
||||
var port=9001;
|
||||
var row=0;
|
||||
var out_msg="";
|
||||
var mcount=0;
|
||||
var topic = "weather/#"
|
||||
|
||||
invalidateDisplay();
|
||||
MQTTconnect();
|
||||
getPressure();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user