85 lines
3.0 KiB
HTML
85 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
|
|
<title>Swansea Weather</title>
|
|
|
|
<style>
|
|
html {
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
body {
|
|
width: 50%;
|
|
max-width: 800px;
|
|
min-width: 480px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.form input[type="number"] {
|
|
width: 200px;
|
|
}
|
|
|
|
.windDir {
|
|
padding: 3px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Swansea Weather Info</h1>
|
|
|
|
<p>Displaying both Raw and manipulated values. Wind speed is converted to kts and rounded to nearest kt. Direction padded with Zero and rounded to nearest 5 degrees</p>
|
|
<p>Note that this is obtaining data from the Davis servers in the cloud where the weather console uploads to. Currently this updates every 15(!) minutes - lets look at changing this</p>
|
|
<div class="resultParas">
|
|
<p class="Timestamp"></p>
|
|
<p class="windSpeedRaw"></p>
|
|
<p class="windSpeed"></p>
|
|
<p class="windDirRaw"></p>
|
|
<p class="windDir"></p>
|
|
<p class="qNHRaw"></p>
|
|
<p class="qNH"></p>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
|
|
const windSpeedRaw = document.querySelector('.windSpeedRaw');
|
|
const windSpeed = document.querySelector('.windSpeed');
|
|
const windDirRaw = document.querySelector('.windDirRaw');
|
|
const windDir = document.querySelector('.windDir');
|
|
const QRaw = document.querySelector('.qNHRaw');
|
|
const Q = document.querySelector('.qNHRaw');
|
|
|
|
const Timestamp = document.querySelector('.Timestamp');
|
|
|
|
// 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 getWindandPressure() {
|
|
const response = await fetch('/wlproxy.php?api=current/195562');
|
|
const names = await response.json();
|
|
windSpeed.textContent = "Wind Speed 1 min avg: " + (names.contents.sensors[0].data[0].wind_speed_avg_last_1_min/1.151).toFixed(0) + " kts";
|
|
windSpeedRaw.textContent = "RAW Wind Speed 1 min avg: " + names.contents.sensors[0].data[0].wind_speed_avg_last_1_min;
|
|
windDirRaw.textContent = "RAW Last Wind Direction: " + names.contents.sensors[0].data[0].wind_dir_last;
|
|
roundedWind = (Math.round(names.contents.sensors[0].data[0].wind_dir_last / 5) * 5).toFixed(0);
|
|
zeroFilledDir = ('000' + roundedWind).substr(-3)
|
|
windDir.textContent = "Last Wind Direction: " + zeroFilledDir + " (rounded to nearest 5 degrees)";
|
|
QNHRaw = names.contents.sensors[2].data[0].bar_absolute;
|
|
QNH = (QNHRaw / 0.029529983071445).toFixed(0);
|
|
QRaw.textContent = "RAW QFE: " + QNHRaw;
|
|
Q.textContent = "QFE: " + QNH;
|
|
var ts = new Date(names.contents.sensors[0].data[0].ts * 1000);
|
|
Timestamp.textContent = ts;
|
|
console.log(names.contents.sensors); // Dump the whole JSON to console
|
|
}
|
|
|
|
getWindandPressure();
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|