72 lines
1.8 KiB
JavaScript
72 lines
1.8 KiB
JavaScript
import * as wasm from "./wasm/nexrad_browser.js";
|
|
await wasm.default();
|
|
wasm.__nxrd_browser_init();
|
|
|
|
console.log("[JS] setup event listeners");
|
|
|
|
console.log("[JS] initializing the renderer");
|
|
|
|
|
|
|
|
const DEFAULT_PREFERENCES = {
|
|
RR: 5,
|
|
RREN: true,
|
|
FCS: 16
|
|
};
|
|
let preferences = DEFAULT_PREFERENCES;
|
|
|
|
function get_font_size() { return `${preferences.FCS}px `; }
|
|
|
|
const canvas = document.getElementById("canvas");
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
const FIFTY_MILES = 0.0916;
|
|
let current_lat = 38.8977;
|
|
let current_long = -77.036560;
|
|
|
|
function calcRenderbox() {
|
|
return [current_long - FIFTY_MILES, current_lat - FIFTY_MILES, current_long + FIFTY_MILES, current_lat + FIFTY_MILES];
|
|
}
|
|
|
|
function latlongXY(lat, long) {
|
|
let bbox = calcRenderbox();
|
|
let pixelWidth = canvas.width;
|
|
let pixelHeight = canvas.height;
|
|
let bboxWidth = bbox[2] - bbox[0];
|
|
let bboxHeight = bbox[3] - bbox[1];
|
|
let widthPct = ( long - bbox[0] ) / bboxWidth;
|
|
let heightPct = ( lat - bbox[1] ) / bboxHeight;
|
|
let x = Math.floor( pixelWidth * widthPct );
|
|
let y = Math.floor( pixelHeight * ( 1 - heightPct ) );
|
|
return { x, y };
|
|
}
|
|
|
|
let x0 = 0;
|
|
let y0 = 0;
|
|
let xfull = canvas.width;
|
|
let yfull = canvas.height;
|
|
|
|
function recalcBorderCoordinates() {
|
|
let xy = latlongXY(current_lat, current_long);
|
|
|
|
x0 = xy.x - canvas.width;
|
|
y0 = xy.y - canvas.height;
|
|
xfull = xy.x + (canvas.width / 2);
|
|
yfull = xy.y + (canvas.height / 2);
|
|
}
|
|
|
|
setInterval(() => {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
ctx.font = get_font_size();
|
|
ctx.resetTransform();
|
|
|
|
recalcBorderCoordinates();
|
|
|
|
let xy = latlongXY(current_lat, current_long);
|
|
|
|
ctx.translate(xy.x, xy.y);
|
|
|
|
// background (black, always)
|
|
ctx.fillStyle = "black";
|
|
ctx.fillRect(x0, y0, xfull, yfull);
|
|
}) |