lifning/ws4kp
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

start of radar images

Browse source
This commit is contained in:
Matt Walsh 2020-09-04 17:03:03 -05:00
parent 382d4f9781
commit bcbc7246be
8 changed files with 373 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
cors/index.js
View file

@ -10,8 +10,6 @@ const queryString = require('querystring');
// return an express router
module.exports = (req, res) => {
if (!req.query.u) res.status(404);
// add out-going headers
const headers = {};
headers['user-agent'] = '(WeatherStar 4000+, ws4000@netbymatt.com)';

44
cors/radar.js Normal file
View file

@ -0,0 +1,44 @@
// pass through api requests
// http(s) modules
const https = require('https');
// url parsing
const queryString = require('querystring');
// return an express router
module.exports = (req, res) => {
// add out-going headers
const headers = {};
headers['user-agent'] = '(WeatherStar 4000+, ws4000@netbymatt.com)';
headers['accept'] = req.headers.accept;
// get query paramaters if the exist
const queryParams = Object.keys(req.query).reduce((acc, key) => {
// skip the paramater 'u'
if (key === 'u') return acc;
// add the paramter to the resulting object
acc[key] = req.query[key];
return acc;
},{});
let query = queryString.encode(queryParams);
if (query.length > 0) query = '?' + query;
// get the page
https.get('https://radar.weather.gov' + req.path + query, {
headers,
}, getRes => {
// pull some info
const {statusCode} = getRes;
// pass the status code through
res.status(statusCode);
// set headers
res.header('content-type', getRes.headers['content-type']);
// pipe to response
getRes.pipe(res);
}).on('error', e=>{
console.error(e);
});
};

1
gulp/publish-frontend.js
View file

@ -34,6 +34,7 @@ const js_sources = [
'server/scripts/modules/localforecast.js',
'server/scripts/modules/extendedforecast.js',
'server/scripts/modules/almanac.js',
'server/scripts/modules/radar.js',
'server/scripts/modules/navigation.js',
];
gulp.task('compress_js', () =>

2
index.js
View file

@ -9,9 +9,11 @@ app.set('view engine', 'ejs');
// cors pass through
const corsPassThru = require('./cors');
const radarPassThru = require('./cors/radar');
// cors pass-thru to api.weather.gov
app.get('/stations/*', corsPassThru);
app.get('/Conus/*', radarPassThru);
const index = (req, res) => {

3
server/scripts/modules/navigation.js
View file

@ -1,7 +1,7 @@
'use strict';
// navigation handles progress, next/previous and initial load messages from the parent frame
/* globals utils, _StationInfo, STATUS */
/* globals CurrentWeather, LatestObservations, TravelForecast, RegionalForecast, LocalForecast, ExtendedForecast, Almanac */
/* globals CurrentWeather, LatestObservations, TravelForecast, RegionalForecast, LocalForecast, ExtendedForecast, Almanac, Radar */
document.addEventListener('DOMContentLoaded', () => {
navigation.init();
@ -107,6 +107,7 @@ const navigation = (() => {
new LocalForecast(6, 'localForecast', weatherParameters),
new ExtendedForecast(7, 'extendedForecast', weatherParameters),
new Almanac(8, 'alamanac', weatherParameters),
new Radar(8, 'radar', weatherParameters),
];
} else {
// or just call for new data if the canvases already exist

322
server/scripts/modules/radar.js Normal file
View file

@ -0,0 +1,322 @@
// current weather conditions display
/* globals WeatherDisplay, utils, STATUS, icons, UNITS, draw, navigation */
// eslint-disable-next-line no-unused-vars
class Radar extends WeatherDisplay {
constructor(navId,elemId,weatherParameters) {
super(navId,elemId);
// set max images
this.dopplerRadarImageMax = 6;
// pre-load background image (returns promise)
this.backgroundImage = utils.image.load('images/BackGround4_1.png');
// get the data
this.getData(weatherParameters);
}
async getData(weatherParameters) {
super.getData();
// ALASKA ISN'T SUPPORTED!
if (weatherParameters.state === 'AK') {
this.setStatus(STATUS.noData);
return;
}
// get the base map
let src = 'images/4000RadarMap2.jpg';
if (weatherParameters.State === 'HI') src = 'images/HawaiiRadarMap2.png';
this.baseMap = await utils.image.load(src);
const baseUrl = 'Conus/RadarImg/';
let radarHtml;
try {
// get a list of available radars
radarHtml = await $.ajax({
type: 'GET',
url: baseUrl,
dataType: 'text',
crossDomain: true,
});
} catch (e) {
console.error('Unable to get list of radars');
console.error(e);
this.setStatus(STATUS.error);
return;
}
// convert to an array of gif urls
const $list = $(radarHtml);
const gifs = $list.find('a[href]').map((i,elem) => elem.innerHTML).get();
// filter for selected urls
let filter = /^Conus_\d/;
if (weatherParameters.State === 'HI') filter = /hawaii_\d/;
// get the last few images
const urlsFull = gifs.filter(gif => gif.match(filter));
const urls = urlsFull.slice(-this.dopplerRadarImageMax);
// calculate offsets and sizes
let offsetX = 120;
let offsetY = 69;
let sourceXY;
let width;
let height;
if (weatherParameters.State === 'HI') {
width = 600;
height = 571;
sourceXY = this.getXYFromLatitudeLongitudeHI(weatherParameters.latitude, weatherParameters.longitude, offsetX, offsetY);
} else {
width = 2550;
height = 1600;
offsetX *= 2;
offsetY *= 2;
sourceXY = this.getXYFromLatitudeLongitudeDoppler(weatherParameters.latitude, weatherParameters.longitude, offsetX, offsetY);
}
// create working context for manipulation
const workingCanvas = document.createElement('canvas');
workingCanvas.width = width;
workingCanvas.height = height;
const workingContext = workingCanvas.getContext('2d');
workingContext.imageSmoothingEnabled = false;
// calculate radar offsets
let radarOffsetX = 117;
let radarOffsetY = 60;
let radarSourceXY = this.getXYFromLatitudeLongitudeDoppler(weatherParameters.latitude, weatherParameters.longitude, offsetX, offsetY);
let radarSourceX = radarSourceXY.x / 2;
let radarSourceY = radarSourceXY.y / 2;
if (weatherParameters.State === 'HI') {
radarOffsetX = 120;
radarOffsetY = 69;
radarSourceXY = this.getXYFromLatitudeLongitudeHI(weatherParameters.latitude, weatherParameters.longitude, offsetX, offsetY);
radarSourceX = radarSourceXY.x;
radarSourceY = radarSourceXY.y;
}
// Load the most recent doppler radar images.
const radarCanvases = await Promise.all(urls.map(async (url) => {
// create destination context
const canvas = document.createElement('canvas');
canvas.width = 640;
canvas.height = 367;
const context = canvas.getContext('2d');
context.imageSmoothingEnabled = false;
// get the image
const blob = await $.ajaxCORS({
type: 'GET',
url: baseUrl + url,
xhrFields: {
responseType: 'blob',
},
crossDomain: true,
});
// assign to an html image element
const imgBlob = await utils.image.load(blob);
// draw the entire image
if (weatherParameters.State === 'HI') {
workingContext.drawImage(imgBlob, 0, 0, 571, 600);
} else {
workingContext.drawImage(imgBlob, 0, 0, 2550, 1600);
}
// clean the image
this.removeDopplerRadarImageNoise(workingContext);
// get the base map
context.drawImage(await this.baseMap, sourceXY.x, sourceXY.y, offsetX*2, offsetY*2, 0, 0, 640, 367);
// put the radar on top
context.drawImage(workingCanvas, radarSourceX, radarSourceY, (radarOffsetX * 2), (radarOffsetY * 2.33), 0, 0, 640, 367);
return canvas;
}));
// set max length
this.timing.totalScreens = radarCanvases.length;
console.log(radarCanvases);
}
drawCanvas() {
super.drawCanvas();
this.finishDraw();
this.setStatus(STATUS.loaded);
}
// utility latitude/pixel conversions
getXYFromLatitudeLongitude (Latitude, Longitude, OffsetX, OffsetY, state) {
if (state === 'HI') return this.getXYFromLatitudeLongitudeHI(...arguments);
let y = 0;
let x = 0;
const ImgHeight = 1600;
const ImgWidth = 2550;
y = (50.5 - Latitude) * 55.2;
y -= OffsetY; // Centers map.
// Do not allow the map to exceed the max/min coordinates.
if (y > (ImgHeight - (OffsetY * 2))) {
y = ImgHeight - (OffsetY * 2);
} else if (y < 0) {
y = 0;
}
x = ((-127.5 - Longitude) * 41.775) * -1;
x -= OffsetX; // Centers map.
// Do not allow the map to exceed the max/min coordinates.
if (x > (ImgWidth - (OffsetX * 2))) {
x = ImgWidth - (OffsetX * 2);
} else if (x < 0) {
x = 0;
}
return { x, y };
}
getXYFromLatitudeLongitudeHI(Latitude, Longitude, OffsetX, OffsetY) {
let y = 0;
let x = 0;
const ImgHeight = 571;
const ImgWidth = 600;
y = (25 - Latitude) * 55.2;
y -= OffsetY; // Centers map.
// Do not allow the map to exceed the max/min coordinates.
if (y > (ImgHeight - (OffsetY * 2))) {
y = ImgHeight - (OffsetY * 2);
} else if (y < 0) {
y = 0;
}
x = ((-164.5 - Longitude) * 41.775) * -1;
x -= OffsetX; // Centers map.
// Do not allow the map to exceed the max/min coordinates.
if (x > (ImgWidth - (OffsetX * 2))) {
x = ImgWidth - (OffsetX * 2);
} else if (x < 0) {
x = 0;
}
return { x, y };
}
getXYFromLatitudeLongitudeDoppler (Latitude, Longitude, OffsetX, OffsetY) {
let y = 0;
let x = 0;
const ImgHeight = 3200;
const ImgWidth = 5100;
y = (51.75 - Latitude) * 55.2;
y -= OffsetY; // Centers map.
// Do not allow the map to exceed the max/min coordinates.
if (y > (ImgHeight - (OffsetY * 2))) {
y = ImgHeight - (OffsetY * 2);
} else if (y < 0) {
y = 0;
}
x = ((-130.37 - Longitude) * 41.775) * -1;
x -= OffsetX; // Centers map.
// Do not allow the map to exceed the max/min coordinates.
if (x > (ImgWidth - (OffsetX * 2))) {
x = ImgWidth - (OffsetX * 2);
} else if (x < 0) {
x = 0;
}
return { x: x * 2, y: y * 2 };
}
removeDopplerRadarImageNoise (RadarContext) {
const RadarImageData = RadarContext.getImageData(0, 0, RadarContext.canvas.width, RadarContext.canvas.height);
// examine every pixel,
// change any old rgb to the new-rgb
for (let i = 0; i < RadarImageData.data.length; i += 4) {
// i + 0 = red
// i + 1 = green
// i + 2 = blue
// i + 3 = alpha (0 = transparent, 255 = opaque)
let [R, G, B, A] = RadarImageData.data.slice(i,i+4);
// is this pixel the old rgb?
if ((R === 1 && G === 159 && B === 244)
|| (R >= 200 && G >= 200 && B >= 200)
|| (R === 4 && G === 233 && B === 231)
|| (R === 3 && G === 0 && B === 244)) {
// Transparent
R = 0;
G = 0;
B = 0;
A = 0;
} else if (R === 2 && G === 253 && B === 2) {
// Light Green 1
R = 49;
G = 210;
B = 22;
A = 255;
} else if (R === 1 && G === 197 && B === 1) {
// Light Green 2
R = 0;
G = 142;
B = 0;
A = 255;
} else if (R === 0 && G === 142 && B === 0) {
// Dark Green 1
R = 20;
G = 90;
B = 15;
A = 255;
} else if (R === 253 && G === 248 && B === 2) {
// Dark Green 2
R = 10;
G = 40;
B = 10;
A = 255;
} else if (R === 229 && G === 188 && B === 0) {
// Yellow
R = 196;
G = 179;
B = 70;
A = 255;
} else if (R === 253 && G === 139 && B === 0) {
// Orange
R = 190;
G = 72;
B = 19;
A = 255;
} else if (R === 212 && G === 0 && B === 0) {
// Red
R = 171;
G = 14;
B = 14;
A = 255;
} else if (R === 188 && G === 0 && B === 0) {
// Brown
R = 115;
G = 31;
B = 4;
A = 255;
}
// store new values
RadarImageData.data[i] = R;
RadarImageData.data[i + 1] = G;
RadarImageData.data[i + 2] = B;
RadarImageData.data[i + 3] = A;
}
// rewrite the image
RadarContext.putImageData(RadarImageData, 0, 0);
}
}

49
server/scripts/twc3.js
View file

@ -2882,51 +2882,9 @@ const PopulateAlmanacInfo = async (WeatherParameters) => {
const ShowRegionalMap = async (WeatherParameters, TomorrowForecast1, TomorrowForecast2) => {
};
const GetXYFromLatitudeLongitudeDoppler = (Latitude, Longitude, OffsetX, OffsetY) => {
let y = 0;
let x = 0;
const ImgHeight = 3200;
const ImgWidth = 5100;
y = (51.75 - Latitude) * 55.2;
y -= OffsetY; // Centers map.
// Do not allow the map to exceed the max/min coordinates.
if (y > (ImgHeight - (OffsetY * 2))) {
y = ImgHeight - (OffsetY * 2);
} else if (y < 0) {
y = 0;
}
x = ((-130.37 - Longitude) * 41.775) * -1;
x -= OffsetX; // Centers map.
// Do not allow the map to exceed the max/min coordinates.
if (x > (ImgWidth - (OffsetX * 2))) {
x = ImgWidth - (OffsetX * 2);
} else if (x < 0) {
x = 0;
}
return { x: x * 2, y: y * 2 };
};
const ShowDopplerMap = async (WeatherParameters) => {
// ALASKA ISN'T SUPPORTED!
if (WeatherParameters.State === 'AK') {
WeatherParameters.Progress.DopplerRadar = LoadStatuses.NoData;
return;
}
let OffsetY;
let OffsetX;
@ -2939,11 +2897,6 @@ const ShowDopplerMap = async (WeatherParameters) => {
// Clear the current image.
divDopplerRadarMap.empty();
if (_DopplerRadarInterval !== null) {
window.clearTimeout(_DopplerRadarInterval);
_DopplerRadarInterval = null;
}
let src = 'images/4000RadarMap2.jpg';
if (WeatherParameters.State === 'HI') src = 'images/HawaiiRadarMap2.png';
const img = await utils.loadImg(src);

1
views/twc3.ejs
View file

@ -27,6 +27,7 @@
<script type="text/javascript" src="scripts/modules/localforecast.js"></script>
<script type="text/javascript" src="scripts/modules/extendedforecast.js"></script>
<script type="text/javascript" src="scripts/modules/almanac.js"></script>
<script type="text/javascript" src="scripts/modules/radar.js"></script>
<script type="text/javascript" src="scripts/modules/navigation.js"></script>
<% } %>
</head>