fix: radar can get out of 1/1 aspect ratio

- Fixed radar going out of its 1/1 AR.
- Settings are now in a vertical layout

webradar/index.html

@@ -10,8 +10,14 @@
     <div id="canvasContainer">
         <div id="settingsHolder">
             <div class="settings">
-                <button onclick="toggleZoom()">Toggle Zoom</button>
+                <div>
-                <button onclick="toggleStats()">Toggle Stats</button>
+                    <input type="checkbox" onclick="toggleZoom()" id="zoomCheck" name="zoom"/>
+                    <label for="zoomCheck">Zoom</label>
+                </div>
+                <div>
+                    <input type="checkbox" onclick="toggleStats()" id="statsCheck" name="stats"/>
+                    <label for="statsCheck">Stats</label>
+                </div>
             </div>
         </div>
         <canvas id="canvas"></canvas>

webradar/script.js

@@ -7,7 +7,7 @@ const textColor = "#d1d1d1"
 
 // Settings
 shouldZoom = true
-drawStats = true
+drawStats = false
 
 // Common
 canvas = null
@@ -35,7 +35,7 @@ if (location.protocol == 'https:') {
 } else {
     websocketAddr = `ws://${window.location.host}/ws`
 }
-//websocketAddr = "ws://192.168.0.235:8000/ws"
+websocketAddr = "ws://192.168.0.235:8000/ws"
 
 // Util functions
 const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
@@ -520,6 +520,9 @@ function connect() {
 }
 
 addEventListener("DOMContentLoaded", (e) => {
+    document.getElementById("zoomCheck").checked = true;
+
+
     canvas = document.getElementById('canvas');
     canvas.width = 1024;
     canvas.height = 1024;

webradar/styles.css

@@ -9,11 +9,10 @@ body {
 }
 
 #canvasContainer {
-    aspect-ratio: 1 / 1;
+    width: 100vmin;
-    height: 100vh;
+    height: 100vmin;
     position: relative;
     overflow: hidden;
-    transition: width 0.5s ease; /* Smooth transition */
     float: left;
     object-fit: contain;
 }
@@ -37,6 +36,11 @@ canvas {
 }
 
 .settings {
+    display: flex;
+    flex-direction: column;
+
+    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    color: white;
     visibility: visible;
     opacity: 0;
     padding: 10px;