diff --git a/agcs-dev.html b/agcs-dev.html
deleted file mode 100644
index c612a9c..0000000
--- a/agcs-dev.html
+++ /dev/null
@@ -1,397 +0,0 @@
-
-
-
-
-
- EGFH Tower
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Surface Wind
-
Instant Wind
-
-
-
-
-
-
-
-
-
-
-
-
Connection Status: Not Connected
-
-
-
-
diff --git a/agcs.html b/agcs.html
index 63bdcc4..28b126d 100644
--- a/agcs.html
+++ b/agcs.html
@@ -71,8 +71,8 @@ line-height:140%;
}
#windSpeed {
- background-color: #f1f1f1;
- border-radius: 15px;
+ # background-color: #f1f1f1;
+ # border-radius: 15px;
font-family: 'andale mono', monospace;
font-size: 48pt;
width: 300px;
@@ -82,8 +82,8 @@ line-height:140%;
}
#avgWindSpeed {
- background-color: #f1f1f1;
- border-radius: 15px;
+ # background-color: #f1f1f1;
+ # border-radius: 15px;
font-family: 'andale mono', monospace;
font-size: 48pt;
width: 300px;
@@ -139,7 +139,7 @@ line-height:140%;
//var audio = new Audio('BPCBeep.mp3');
//audio.play();
lastAvgWind = Date.now();
- windAvgValid = 1;
+ avgWindValid = 1;
avgWindSpeed = Number(loopObj.windSpeed_knot).toFixed(0);
roundedWind = (Math.round(loopObj.windDir / 10) * 10).toFixed(0);
avgWindDir = ('000' + roundedWind).substr(-3);
@@ -169,11 +169,19 @@ line-height:140%;
}
+ function updateStatus() {
+ if (avgWindValid == 1 && windValid == 1) {
+ document.getElementById("status").style.backgroundColor = '#00AA00';
+ document.getElementById("status").innerHTML = "OK";
+ }
+ }
+
function updateWind() {
document.getElementById("windSpeed").innerHTML = zeroFilledDir + "/" + instantWindSpeed;
}
function updateAvgWind() {
+ updateWindDirection(avgWindDir);
document.getElementById("avgWindSpeed").innerHTML = avgWindDir + "/" + avgWindSpeed;
document.getElementById("avgWindGust").innerHTML = avgWindGustDir + "/" + avgWindGustSpeed;
}
@@ -322,8 +330,97 @@ line-height:140%;
}
setTimeout( updateClock.bind( this, "zuluTime" ), 500 );
+ updateStatus();
}
+ function drawCompass() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ // Draw runways
+ drawRunway(220, 120, 12, -20); // 22/04 runway moved to the left
+ drawRunway(280, 90, 8, 0, 40); // 10/28 runway moved down
+
+ // Draw wind direction arrow
+ if (avgWindValid == 1) {
+ drawArrow(windDirection);
+ }
+ }
+
+ function drawRunway(angle, length, width, xShift, yShift = 0) {
+ const radian = (angle - 90) * (Math.PI / 180); // Convert to radians
+
+ // Calculate runway endpoints with xShift (left/right) and yShift (up/down)
+ const xStart = centerX - length * Math.cos(radian) + xShift;
+ const yStart = centerY - length * Math.sin(radian) + yShift;
+ const xEnd = centerX + length * Math.cos(radian) + xShift;
+ const yEnd = centerY + length * Math.sin(radian) + yShift;
+
+ // Draw runway as a thick line
+ ctx.strokeStyle = "#333";
+ ctx.lineWidth = width;
+ ctx.beginPath();
+ ctx.moveTo(xStart, yStart);
+ ctx.lineTo(xEnd, yEnd);
+ ctx.stroke();
+
+ // Correctly assign runway numbers at each end
+ drawRunwayNumber(angle, xStart, yStart, radian, -20);
+ drawRunwayNumber(angle + 180, xEnd, yEnd, radian, 20);
+ }
+
+ function drawRunwayNumber(angle, x, y, radian, extension) {
+ const runwayNumber = Math.round(angle / 10) % 36; // Convert heading to runway number
+
+ // Move the number along the extended centerline
+ const xOffset = x + extension * Math.cos(radian);
+ const yOffset = y + extension * Math.sin(radian);
+
+ ctx.font = "18px Arial";
+ ctx.fillStyle = "black";
+ ctx.textAlign = "center";
+ ctx.textBaseline = "middle";
+ ctx.fillText(runwayNumber.toString().padStart(2, "0"), xOffset, yOffset);
+ }
+
+ function drawArrow(angle) {
+ const arrowLength = 80; // Extended to pass through center
+ const radian = (angle + 90) * (Math.PI / 180); // Adjusted for correct direction
+
+ // Compute start and end points for the arrow
+ const xStart = centerX - arrowLength * Math.cos(radian);
+ const yStart = centerY - arrowLength * Math.sin(radian);
+ const xEnd = centerX + arrowLength * Math.cos(radian);
+ const yEnd = centerY + arrowLength * Math.sin(radian);
+
+ // Draw main arrow line
+ ctx.strokeStyle = "red";
+ ctx.lineWidth = 3;
+ ctx.beginPath();
+ ctx.moveTo(xStart, yStart);
+ ctx.lineTo(xEnd, yEnd);
+ ctx.stroke();
+
+ // Draw arrowhead at the end
+ ctx.fillStyle = "red";
+ ctx.beginPath();
+ ctx.moveTo(xEnd, yEnd);
+ ctx.lineTo(
+ xEnd - 12 * Math.cos(radian - Math.PI / 6),
+ yEnd - 12 * Math.sin(radian - Math.PI / 6)
+ );
+ ctx.lineTo(
+ xEnd - 12 * Math.cos(radian + Math.PI / 6),
+ yEnd - 12 * Math.sin(radian + Math.PI / 6)
+ );
+ ctx.closePath();
+ ctx.fill();
+ }
+
+ function updateWindDirection(degrees) {
+ windDirection = degrees % 360;
+ drawCompass();
+ }
+
@@ -344,14 +441,10 @@ line-height:140%;
-
Surface Wind
-
Instant Wind
+
Surface Wind
1
Instant Wind
1
+
2min Gust
@@ -375,6 +468,8 @@ line-height:140%;
+
+