New file for diagram

agcsdiag.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,6 +330,95 @@ 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();
     }
 
     </script>
@@ -344,14 +441,10 @@ line-height:140%;
   </div>
   <br>
 <div class="flex-container">
-	<div>Surface Wind</div>
-	<div>Instant Wind</div>
+	<div>Surface Wind<div id="avgWindSpeed">1</div>Instant Wind<div id="windSpeed">1</div></div>
+	<div><canvas id="compass" width="300" height="300"></canvas></div>
 </div>
 
-<div class="flex-container">
-	<div id="avgWindSpeed">2</div>
-	<div id="windSpeed">1</div>
-</div>
 <br>
 <div class="flex-container">
 	<div>2min Gust</div>
@@ -375,6 +468,8 @@ line-height:140%;
 
 <p></p>
 
+
+
 <script>
 var connected_flag=0	
 var mqtt;
@@ -392,11 +487,22 @@ let lastWind = Date.now();
 let lastAvgWind = Date.now();
 let lastPressure = Date.now();
 
+const canvas = document.getElementById("compass");
+const ctx = canvas.getContext("2d");
+const centerX = canvas.width / 2;
+const centerY = canvas.height / 2;
+let windDirection = 0; // Initial wind direction in degrees
+
 invalidateDisplay();
 MQTTconnect();
 getPressure();
 updateClock();
 
+// Initial draw
+drawCompass();
+// Example: Update wind direction dynamically every 2 seconds
+
+
 </script>
 </body>
 </html>