diff --git a/gui/app.css b/gui/app.css
index f62cad4..1a8b608 100644
--- a/gui/app.css
+++ b/gui/app.css
@@ -281,8 +281,8 @@ header {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
- width: calc(220px * var(--cam-scale));
- height: calc(220px * var(--cam-scale));
+ width: calc(270px * var(--cam-scale));
+ height: calc(270px * var(--cam-scale));
z-index: 10;
pointer-events: none;
}
diff --git a/gui/index.html b/gui/index.html
index 7552c7c..39343e1 100644
--- a/gui/index.html
+++ b/gui/index.html
@@ -143,23 +143,23 @@
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
-
-
- HDG 000°
+
+
+
+ HDG 000° N
- R +0.0°
- P +0.0°
+ R +0.0°
+ P +0.0°
@@ -353,6 +353,11 @@ function formatSignedNumber(value, digits) {
return (number >= 0 ? "+" : "") + text;
}
+function headingToCompass(deg) {
+ var dirs = ["N","NNE","NE","ENE","E","ESE","SE","SSE","S","SSW","SW","WSW","W","WNW","NW","NNW"];
+ return dirs[Math.round(((deg % 360) + 360) % 360 / 22.5) % 16];
+}
+
function normalizeHeadingDeg(value) {
var heading = Number(value || 0) % 360;
if (heading < 0) heading += 360;
@@ -384,7 +389,7 @@ function updateImuOverlaySvg() {
if (rollPointer) {
rollPointer.setAttribute("transform", "rotate(" + (-rollDeg).toFixed(2) + ")");
}
- headingText.textContent = "HDG " + String(Math.round(headingDeg)).padStart(3, "0") + "°";
+ headingText.textContent = "HDG " + String(Math.round(headingDeg)).padStart(3, "0") + "° " + headingToCompass(headingDeg);
rollText.textContent = "R " + formatSignedNumber(rollDeg, 1) + "°";
pitchText.textContent = "P " + formatSignedNumber(pitchDeg, 1) + "°";
}
@@ -1145,8 +1150,8 @@ function drawImuHorizonOverlay(context, canvasWidth, canvasHeight, size) {
context.stroke();
});
- context.strokeStyle = "rgba(0,255,145,.92)";
- context.lineWidth = 1.5 * unit;
+ context.strokeStyle = "rgba(0,255,145,.95)";
+ context.lineWidth = 2.8 * unit;
context.beginPath(); context.moveTo(-40 * unit, 0); context.lineTo(40 * unit, 0); context.stroke();
context.beginPath(); context.moveTo(-40 * unit, 0); context.lineTo(-32 * unit, -5 * unit); context.stroke();
context.beginPath(); context.moveTo(40 * unit, 0); context.lineTo(32 * unit, -5 * unit); context.stroke();
@@ -1154,14 +1159,14 @@ function drawImuHorizonOverlay(context, canvasWidth, canvasHeight, size) {
/* HDG box + text labels */
context.save();
- var bw = 54 * unit, bh = 13 * unit;
- context.fillStyle = "rgba(0,15,8,.58)";
- context.fillRect(cx - bw / 2, cy - 70 * unit, bw, bh);
+ var bw = 84 * unit, bh = 15 * unit;
+ context.fillStyle = "rgba(0,15,8,.65)";
+ context.fillRect(cx - bw / 2, cy - 72 * unit, bw, bh);
context.font = (9 * unit) + 'px "Consolas","Cascadia Mono",monospace';
- context.fillStyle = "rgba(0,255,145,.9)";
+ context.fillStyle = "rgba(0,255,145,.92)";
context.textAlign = "center";
context.textBaseline = "middle";
- context.fillText("HDG " + String(Math.round(headingDeg)).padStart(3, "0") + "°", cx, cy - 63.5 * unit);
+ context.fillText("HDG " + String(Math.round(headingDeg)).padStart(3, "0") + "° " + headingToCompass(headingDeg), cx, cy - 62.5 * unit);
context.font = (7.5 * unit) + 'px "Consolas","Cascadia Mono",monospace';
context.fillStyle = "rgba(0,255,145,.72)";
context.fillText("R " + formatSignedNumber(rollDeg, 1) + "°", cx - 73 * unit, cy + 76 * unit);
@@ -1315,7 +1320,7 @@ function drawHudOverlayToCanvas(context, canvasWidth, canvasHeight) {
context.fillText(document.getElementById("cam-live-text").textContent, canvasWidth / 2 + (6 * camScale * scaleToCanvas), padding);
context.restore();
- drawCrosshairOverlayToCanvas(context, canvasWidth, canvasHeight, 220 * camScale * scaleToCanvas);
+ drawCrosshairOverlayToCanvas(context, canvasWidth, canvasHeight, 270 * camScale * scaleToCanvas);
drawVignetteAndScanlines(context, canvasWidth, canvasHeight);
}