core
/
rtwx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

some improvement on the UI

This commit is contained in:
core 2023-11-04 01:23:23 -04:00
parent 55936f0af4
commit 33ca20410e
Signed by: core
GPG Key ID: FDBF740DADDCEECF
2 changed files with 112 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
nexrad-browser/www/index.html
View File

@ -2,12 +2,11 @@
<head>
<title>NEXRAD Browser</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
#canvas {
width: 100%;
height: 100%;
image-rendering: pixelated;
z-index: 10000;
}
body {
@ -21,8 +20,6 @@
Something went wrong while loading the canvas. Sorry :/
</canvas>
<p style="font-family: 'vt323', monospace;">FONT TEST!</p>
<script src="bootstrap.js"></script>
</body>
</html>

121
nexrad-browser/www/index.js
View File

@ -6,19 +6,47 @@ console.log("[JS] setup event listeners");
console.log("[JS] initializing the renderer");
const DEFAULT_PREFERENCES = {
RR: 5,
RREN: true,
FCS: 16
FCS: 20
};
let preferences = DEFAULT_PREFERENCES;
function get_font_size() { return `${preferences.FCS}px `; }
function get_font_size() { return `${preferences.FCS}px monospace`; }
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
function setupCanvas(canvas) {
// Get the device pixel ratio, falling back to 1.
var dpr = window.devicePixelRatio || 1;
// Get the size of the canvas in CSS pixels.
var rect = canvas.getBoundingClientRect();
// Give the canvas pixel dimensions of their CSS
// size * the device pixel ratio.
canvas.width = rect.width * dpr;
canvas.height = rect.height * dpr;
var ctx = canvas.getContext('2d');
// Scale all drawing operations by the dpr, so you
// don't have to worry about the difference.
ctx.scale(dpr, dpr);
return ctx;
}
function rescaleCanvas(canvas, ctx) {
var dpr = window.devicePixelRatio || 1;
// Get the size of the canvas in CSS pixels.
var rect = canvas.getBoundingClientRect();
// Give the canvas pixel dimensions of their CSS
// size * the device pixel ratio.
canvas.width = rect.width * dpr;
canvas.height = rect.height * dpr;
// Scale all drawing operations by the dpr, so you
// don't have to worry about the difference.
ctx.scale(dpr, dpr);
}
const ctx = setupCanvas(canvas);
const FIFTY_MILES = 0.0916;
let current_lat = 38.8977;
@ -51,13 +79,59 @@ function recalcBorderCoordinates() {
x0 = xy.x - canvas.width;
y0 = xy.y - canvas.height;
xfull = xy.x + (canvas.width / 2);
yfull = xy.y + (canvas.height / 2);
xfull = x0 + canvas.width;
yfull = y0 + canvas.width;
}
const red = "#ef0000";
const green = "#4af626";
const white = "#dedede";
let blinkyColor = "#dedede";
setInterval(() => {
if (blinkyColor === red) {
blinkyColor = white;
} else {
blinkyColor = red;
}
}, 350);
function zulu() {
let date = new Date();
return `${date.getUTCHours().toString().padStart(2, '0')}:${date.getUTCMinutes().toString().padStart(2, '0')}:${date.getUTCSeconds().toString().padStart(2, '0')}Z`;
}
let command_buf = "";
let buf_response_mode = false;
function exec() {
console.log("exec1!");
}
document.onkeyup = (e) => {
if (e.key.toUpperCase() === "ESCAPE") {
command_buf = "";
} else if (e.key.toUpperCase() === "ENTER") {
command_buf = "";
exec();
} else if (e.key.toUpperCase() === "BACKSPACE") {
command_buf = command_buf.slice(0, command_buf.length-1);
exec();
} else {
if (e.key.length !== 1) { return; }
if (buf_response_mode) {
buf_response_mode = false;
command_buf = "";
}
command_buf += e.key.toUpperCase();
}
}
setInterval(() => {
//document.getElementById("input-detection").focus();
rescaleCanvas(canvas, ctx);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = get_font_size();
ctx.resetTransform();
recalcBorderCoordinates();
@ -68,5 +142,32 @@ setInterval(() => {
// background (black, always)
ctx.fillStyle = "black";
ctx.fillRect(x0, y0, xfull, yfull);
})
ctx.fillRect(x0, y0, xfull * 2, yfull * 2);
ctx.font = get_font_size();
ctx.fillStyle = green;
ctx.fillText(`NEXRAD KLSX ${zulu()}`, x0 + 50, y0 + 50);
ctx.fillStyle = blinkyColor;
ctx.fillText("RADR INOP NO DATA LOADED", x0 + 50, y0 + 50 + preferences.FCS);
ctx.fillStyle = green;
ctx.textAlign = "right";
ctx.fillText("RADAR SITE", xfull - 75, y0 + 50);
ctx.fillText("KLSX VCP35 Clear Air Mode", xfull - 75, y0 + 50 + preferences.FCS);
ctx.fillText("MODE", xfull - 75, y0 + canvas.height / 3);
ctx.fillText(" REF VEL SW ", xfull - 75, y0 + canvas.height / 3 + preferences.FCS);
ctx.fillText(" ZDR PHI RHO ", xfull - 75, y0 + canvas.height / 3 + preferences.FCS * 2);
ctx.fillText(" CFP ", xfull - 75, y0 + canvas.height / 3 + preferences.FCS * 3);
ctx.fillStyle = white;
ctx.fillText(" >RADR INOP<", xfull - 75, y0 + canvas.height / 3 + preferences.FCS * 3);
ctx.fillStyle = green;
ctx.textAlign = "left";
ctx.fillText(command_buf, x0 + 50, y0 + canvas.height / 2);
}, 10);