eric/WeatherStar4000
1
0
Fork 0
mirror of https://github.com/netbymatt/ws4kp.git synced 2026-04-23 12:09:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

radar portrait #167

Browse Source
This commit is contained in:
Matt Walsh
2026-04-22 22:23:10 -05:00
parent 0395e2cd08
commit 5bbc032c5e
6 changed files with 53 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
server/scripts/modules/radar-constants.mjs
View File

@@ -4,8 +4,13 @@ const radarFinalSize = () => {
const size = { const size = {
width: 640, height: 367, width: 640, height: 367,
}; };
if (settings.wide?.value && settings.enhanced?.value) { if (settings.enhanced?.value) {
size.width = 854; if (settings.wide?.value) {
size.width = 854;
}
if (settings.portrait?.value) {
size.height = 1024;
}
} }
return size; return size;
}; };
@@ -15,8 +20,13 @@ const radarSourceSize = () => {
width: 240, width: 240,
height: 163, height: 163,
}; };
if (settings.wide?.value && settings.enhanced?.value) { if (settings.enhanced?.value) {
size.width = 240 / 640 * 854; // original size of 640 scaled up to wide at 854 if (settings.wide?.value) {
size.width = 240 / 640 * 854; // original size of 640 scaled up to wide at 854
}
if (settings.portrait?.value) {
size.height = 163 / 367 * 1024;// original size of 367 scaled up to portrait at 1024
}
} }
return size; return size;
}; };
@@ -26,9 +36,15 @@ const radarOffset = () => {
x: 240, x: 240,
y: 138, y: 138,
}; };
if (settings.wide?.value && settings.enhanced?.value) { if (settings.enhanced?.value) {
// 107 is the margins shift, 640/854 is the scaling factor normal => wide, /2 is because of the fixed 2:1 scaling between source radar and map tiles if (settings.wide?.value) {
offset.x = 240 + (107 * 640 / 854 / 2); // original size of 640 scaled up to wide at 854; // 107 is the margins shift, 640/854 is the scaling factor normal => wide, /2 is because of the fixed 2:1 scaling between source radar and map tiles
offset.x = 240 + (107 * 640 / 854 / 2); // original size of 640 scaled up to wide at 854;
}
if (settings.portrait?.value) {
// 825 is the margins shift, 367/1024 is the scaling factor normal => portrait, /2 is because of the fixed 2:1 scaling between source radar and map tiles
offset.y = 138 + (815 * 367 / 1024 / 2);
}
} }
return offset; return offset;
@@ -40,8 +56,13 @@ const radarShift = () => {
x: 0, x: 0,
y: 0, y: 0,
}; };
if (settings.wide?.value && settings.enhanced?.value) { if (settings.enhanced?.value) {
shift.x = 107; if (settings.wide?.value) {
shift.x = 107;
}
if (settings.portrait?.value) {
shift.y = 328;
}
} }
return shift; return shift;
}; };

21
server/scripts/modules/radar-tiles.mjs
View File

@@ -37,6 +37,12 @@ const setTiles = (data) => {
pixelToFile(sourceXY.x + TILE_SIZE.x * 0, sourceXY.y + TILE_SIZE.y), pixelToFile(sourceXY.x + TILE_SIZE.x * 0, sourceXY.y + TILE_SIZE.y),
pixelToFile(sourceXY.x + TILE_SIZE.x * 1, sourceXY.y + TILE_SIZE.y), pixelToFile(sourceXY.x + TILE_SIZE.x * 1, sourceXY.y + TILE_SIZE.y),
pixelToFile(sourceXY.x + TILE_SIZE.x * 2, sourceXY.y + TILE_SIZE.y), pixelToFile(sourceXY.x + TILE_SIZE.x * 2, sourceXY.y + TILE_SIZE.y),
pixelToFile(sourceXY.x + TILE_SIZE.x * 0, sourceXY.y + TILE_SIZE.y * 2),
pixelToFile(sourceXY.x + TILE_SIZE.x * 1, sourceXY.y + TILE_SIZE.y * 2),
pixelToFile(sourceXY.x + TILE_SIZE.x * 2, sourceXY.y + TILE_SIZE.y * 2),
pixelToFile(sourceXY.x + TILE_SIZE.x * 0, sourceXY.y + TILE_SIZE.y * 3),
pixelToFile(sourceXY.x + TILE_SIZE.x * 1, sourceXY.y + TILE_SIZE.y * 3),
pixelToFile(sourceXY.x + TILE_SIZE.x * 2, sourceXY.y + TILE_SIZE.y * 3),
]; ];
// do some calculations // do some calculations
@@ -48,16 +54,19 @@ const setTiles = (data) => {
const tileShift = modTile(sourceXY.x, sourceXY.y); const tileShift = modTile(sourceXY.x, sourceXY.y);
// determine which tiles are used // determine which tiles are used
const secondRow = tileShift.y + TILE_SIZE.y > RADAR_FINAL_SIZE().height; const secondRow = TILE_SIZE.y - tileShift.y < RADAR_FINAL_SIZE().height;
const thirdRow = (TILE_SIZE.y * 2) - tileShift.y < RADAR_FINAL_SIZE().height;
const fourthRow = (TILE_SIZE.y * 3) - tileShift.y < RADAR_FINAL_SIZE().height;
const usedTiles = [ const usedTiles = [
true, true,
tileShift.x + TILE_SIZE.x > RADAR_FINAL_SIZE().width, TILE_SIZE.x - tileShift.x < RADAR_FINAL_SIZE().width,
tileShift.x + (TILE_SIZE.x * 2) > RADAR_FINAL_SIZE().width, (TILE_SIZE.x * 2) - tileShift.x < RADAR_FINAL_SIZE().width,
secondRow,
]; ];
// second row is a copy of the first row when in use // rows 2, 3 and 4 are a copy of the first row when in use
// calculate T[4] and T[5] // calculate T[4] and T[5]
usedTiles.push(secondRow && usedTiles[1], secondRow && usedTiles[2]); usedTiles.push(secondRow && usedTiles[0], secondRow && usedTiles[1], secondRow && usedTiles[2]);
usedTiles.push(thirdRow && usedTiles[0], thirdRow && usedTiles[1], thirdRow && usedTiles[2]);
usedTiles.push(fourthRow && usedTiles[0], fourthRow && usedTiles[1], fourthRow && usedTiles[2]);
// helper function for populating tiles // helper function for populating tiles
const populateTile = (tileName) => (elem, index) => { const populateTile = (tileName) => (elem, index) => {

4
server/styles/scss/_radar.scss
View File

@@ -111,6 +111,10 @@
height: 367px; height: 367px;
width: p.$standard-width; width: p.$standard-width;
.portrait.enhanced & {
height: 1024px;
}
.container { .container {
.tiles { .tiles {

2
server/styles/ws.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
server/styles/ws.min.css.map
View File

File diff suppressed because one or more lines are too long

4
views/partials/radar.ejs
View File

@@ -32,7 +32,7 @@
<div class="main radar can-enhance"> <div class="main radar can-enhance">
<div class="container"> <div class="container">
<div class="map-tiles tiles"><img /><img /><img /><img /><img /><img /></div> <div class="map-tiles tiles"><img /><img /><img /><img /><img /><img /><img /><img /><img /><img /><img /><img /></div>
<div class="scroll-area"> <div class="scroll-area">
<div class="frame template"> <div class="frame template">
<div class="map"> <div class="map">
@@ -40,6 +40,6 @@
</div> </div>
</div> </div>
</div> </div>
<div class="overlay-tiles tiles"><img /><img /><img /><img /><img /></div> <div class="overlay-tiles tiles"><img /><img /><img /><img /><img /><img /><img /><img /><img /><img /><img /><img /></div>
</div> </div>
</div> </div>