From 376c6205edf24260f40e49e4bfd90be05f7dbef7 Mon Sep 17 00:00:00 2001
From: Janek <development@superyu.xyz>
Date: Fri, 12 Apr 2024 14:10:53 +0200
Subject: [PATCH] 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 ++++++++--
webradar/script.js | 7 +++++--
webradar/styles.css | 10 +++++++---
3 files changed, 20 insertions(+), 7 deletions(-)
diff --git a/webradar/index.html b/webradar/index.html
index 4bd6f5e..a9ece3c 100644
--- a/webradar/index.html
+++ b/webradar/index.html
@@ -10,8 +10,14 @@
<div id="canvasContainer">
<div id="settingsHolder">
<div class="settings">
- <button onclick="toggleZoom()">Toggle Zoom</button>
- <button onclick="toggleStats()">Toggle Stats</button>
+ <div>
+ <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>
diff --git a/webradar/script.js b/webradar/script.js
index efd2512..c8c386f 100644
--- a/webradar/script.js
+++ b/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;
diff --git a/webradar/styles.css b/webradar/styles.css
index 4dd06c5..d4842d2 100644
--- a/webradar/styles.css
+++ b/webradar/styles.css
@@ -9,11 +9,10 @@ body {
}
#canvasContainer {
- aspect-ratio: 1 / 1;
- height: 100vh;
+ width: 100vmin;
+ 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;