Eskimue/ExoMy_Cuno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

GUI verbessert

Browse Source
This commit is contained in:
Eskimue
2026-05-28 16:45:34 +02:00
parent 877dbf7a7c
commit 948ced194b
2 changed files with 31 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gui/index.html
+29 -24
View File
@@ -143,23 +143,23 @@
</g>
<!-- horizon + pitch ladder (rotates AND translates with pitch) -->
<g id="imu-horizon-frame">
<line x1="-11" y1="-33" x2="11" y2="-33" stroke="rgba(0,255,145,.28)" stroke-width=".9"/>
<line x1="-11" y1="33" x2="11" y2="33" stroke="rgba(0,255,145,.28)" stroke-width=".9"/>
<line x1="-17" y1="-22" x2="17" y2="-22" stroke="rgba(0,255,145,.44)" stroke-width=".9"/>
<line x1="-17" y1="22" x2="17" y2="22" stroke="rgba(0,255,145,.44)" stroke-width=".9"/>
<line x1="-10" y1="-11" x2="10" y2="-11" stroke="rgba(0,255,145,.3)" stroke-width=".85"/>
<line x1="-10" y1="11" x2="10" y2="11" stroke="rgba(0,255,145,.3)" stroke-width=".85"/>
<line id="imu-horizon-main" x1="-40" y1="0" x2="40" y2="0" stroke="rgba(0,255,145,.92)" stroke-width="1.5"/>
<line x1="-40" y1="0" x2="-32" y2="-5" stroke="rgba(0,255,145,.92)" stroke-width="1.5"/>
<line x1="40" y1="0" x2="32" y2="-5" stroke="rgba(0,255,145,.92)" stroke-width="1.5"/>
<line x1="-11" y1="-33" x2="11" y2="-33" stroke="rgba(0,255,145,.40)" stroke-width=".9"/>
<line x1="-11" y1="33" x2="11" y2="33" stroke="rgba(0,255,145,.40)" stroke-width=".9"/>
<line x1="-17" y1="-22" x2="17" y2="-22" stroke="rgba(0,255,145,.58)" stroke-width=".9"/>
<line x1="-17" y1="22" x2="17" y2="22" stroke="rgba(0,255,145,.58)" stroke-width=".9"/>
<line x1="-10" y1="-11" x2="10" y2="-11" stroke="rgba(0,255,145,.42)" stroke-width=".85"/>
<line x1="-10" y1="11" x2="10" y2="11" stroke="rgba(0,255,145,.42)" stroke-width=".85"/>
<line id="imu-horizon-main" x1="-40" y1="0" x2="40" y2="0" stroke="rgba(0,255,145,.95)" stroke-width="2.8"/>
<line x1="-40" y1="0" x2="-32" y2="-5" stroke="rgba(0,255,145,.95)" stroke-width="2.8"/>
<line x1="40" y1="0" x2="32" y2="-5" stroke="rgba(0,255,145,.95)" stroke-width="2.8"/>
</g>
<!-- HDG readout with background box -->
<rect x="-27" y="-70" width="54" height="13" fill="rgba(0,15,8,.58)" rx="1"/>
<line x1="-27" y1="-70" x2="27" y2="-70" stroke="rgba(0,255,145,.28)" stroke-width=".5"/>
<text id="imu-heading-text" x="0" y="-61.5" fill="rgba(0,255,145,.9)" font-size="9" text-anchor="middle" letter-spacing="1">HDG 000°</text>
<!-- HDG readout with background box (wider for compass direction) -->
<rect x="-42" y="-72" width="84" height="15" fill="rgba(0,15,8,.65)" rx="1"/>
<line x1="-42" y1="-72" x2="42" y2="-72" stroke="rgba(0,255,145,.35)" stroke-width=".5"/>
<text id="imu-heading-text" x="0" y="-62.5" fill="rgba(0,255,145,.92)" font-size="9" text-anchor="middle" letter-spacing="1">HDG 000° N</text>
<!-- roll / pitch readouts -->
<text id="imu-roll-text" x="-73" y="76" fill="rgba(0,255,145,.72)" font-size="7.5" text-anchor="middle">R +0.0°</text>
<text id="imu-pitch-text" x="73" y="76" fill="rgba(0,255,145,.72)" font-size="7.5" text-anchor="middle">P +0.0°</text>
<text id="imu-roll-text" x="-73" y="76" fill="rgba(0,255,145,.82)" font-size="7.5" text-anchor="middle">R +0.0°</text>
<text id="imu-pitch-text" x="73" y="76" fill="rgba(0,255,145,.82)" font-size="7.5" text-anchor="middle">P +0.0°</text>
</g>
<!-- center dot -->
<circle cx="0" cy="0" r="3" fill="rgba(0,255,145,.92)"/>
@@ -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);
}