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/app.css
+2 -2
View File
@@ -281,8 +281,8 @@ header {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: calc(220px * var(--cam-scale)); width: calc(270px * var(--cam-scale));
height: calc(220px * var(--cam-scale)); height: calc(270px * var(--cam-scale));
z-index: 10; z-index: 10;
pointer-events: none; pointer-events: none;
} }
gui/index.html
+29 -24
View File
@@ -143,23 +143,23 @@
</g> </g>
<!-- horizon + pitch ladder (rotates AND translates with pitch) --> <!-- horizon + pitch ladder (rotates AND translates with pitch) -->
<g id="imu-horizon-frame"> <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,.40)" stroke-width=".9"/>
<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,.40)" 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,.58)" 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,.58)" 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,.42)" stroke-width=".85"/>
<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,.42)" 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 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,.92)" stroke-width="1.5"/> <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,.92)" stroke-width="1.5"/> <line x1="40" y1="0" x2="32" y2="-5" stroke="rgba(0,255,145,.95)" stroke-width="2.8"/>
</g> </g>
<!-- HDG readout with background box --> <!-- HDG readout with background box (wider for compass direction) -->
<rect x="-27" y="-70" width="54" height="13" fill="rgba(0,15,8,.58)" rx="1"/> <rect x="-42" y="-72" width="84" height="15" fill="rgba(0,15,8,.65)" rx="1"/>
<line x1="-27" y1="-70" x2="27" y2="-70" stroke="rgba(0,255,145,.28)" stroke-width=".5"/> <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="-61.5" fill="rgba(0,255,145,.9)" font-size="9" text-anchor="middle" letter-spacing="1">HDG 000°</text> <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 --> <!-- 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-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,.72)" font-size="7.5" text-anchor="middle">P +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> </g>
<!-- center dot --> <!-- center dot -->
<circle cx="0" cy="0" r="3" fill="rgba(0,255,145,.92)"/> <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; 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) { function normalizeHeadingDeg(value) {
var heading = Number(value || 0) % 360; var heading = Number(value || 0) % 360;
if (heading < 0) heading += 360; if (heading < 0) heading += 360;
@@ -384,7 +389,7 @@ function updateImuOverlaySvg() {
if (rollPointer) { if (rollPointer) {
rollPointer.setAttribute("transform", "rotate(" + (-rollDeg).toFixed(2) + ")"); 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) + "°"; rollText.textContent = "R " + formatSignedNumber(rollDeg, 1) + "°";
pitchText.textContent = "P " + formatSignedNumber(pitchDeg, 1) + "°"; pitchText.textContent = "P " + formatSignedNumber(pitchDeg, 1) + "°";
} }
@@ -1145,8 +1150,8 @@ function drawImuHorizonOverlay(context, canvasWidth, canvasHeight, size) {
context.stroke(); context.stroke();
}); });
context.strokeStyle = "rgba(0,255,145,.92)"; context.strokeStyle = "rgba(0,255,145,.95)";
context.lineWidth = 1.5 * unit; 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(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();
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 */ /* HDG box + text labels */
context.save(); context.save();
var bw = 54 * unit, bh = 13 * unit; var bw = 84 * unit, bh = 15 * unit;
context.fillStyle = "rgba(0,15,8,.58)"; context.fillStyle = "rgba(0,15,8,.65)";
context.fillRect(cx - bw / 2, cy - 70 * unit, bw, bh); context.fillRect(cx - bw / 2, cy - 72 * unit, bw, bh);
context.font = (9 * unit) + 'px "Consolas","Cascadia Mono",monospace'; 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.textAlign = "center";
context.textBaseline = "middle"; 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.font = (7.5 * unit) + 'px "Consolas","Cascadia Mono",monospace';
context.fillStyle = "rgba(0,255,145,.72)"; context.fillStyle = "rgba(0,255,145,.72)";
context.fillText("R " + formatSignedNumber(rollDeg, 1) + "°", cx - 73 * unit, cy + 76 * unit); 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.fillText(document.getElementById("cam-live-text").textContent, canvasWidth / 2 + (6 * camScale * scaleToCanvas), padding);
context.restore(); context.restore();
drawCrosshairOverlayToCanvas(context, canvasWidth, canvasHeight, 220 * camScale * scaleToCanvas); drawCrosshairOverlayToCanvas(context, canvasWidth, canvasHeight, 270 * camScale * scaleToCanvas);
drawVignetteAndScanlines(context, canvasWidth, canvasHeight); drawVignetteAndScanlines(context, canvasWidth, canvasHeight);
} }