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

Add monthly outlook display

Browse source
This commit is contained in:
Matt Walsh 2020-09-24 19:24:02 -05:00
parent 26606757ce
commit 998a869ca0
5 changed files with 80 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dist/index.html vendored
View file

File diff suppressed because one or more lines are too long

2
dist/resources/ws.min.js vendored
View file

File diff suppressed because one or more lines are too long

125
server/scripts/modules/almanac.js
View file

@ -7,8 +7,9 @@ class Almanac extends WeatherDisplay {
constructor(navId,elemId) { constructor(navId,elemId) {
super(navId,elemId,'Almanac'); super(navId,elemId,'Almanac');
// pre-load background image (returns promise) // pre-load background images (returns promises)
this.backgroundImage = utils.image.load('images/BackGround1_1.png'); this.backgroundImage0 = utils.image.load('images/BackGround3_1.png');
this.backgroundImage1 = utils.image.load('images/BackGround1_1.png');
// load all images in parallel (returns promises) // load all images in parallel (returns promises)
this.moonImages = [ this.moonImages = [
@ -20,7 +21,6 @@ class Almanac extends WeatherDisplay {
this.timing.totalScreens = 2; this.timing.totalScreens = 2;
this.backgroundImage = utils.image.load('images/BackGround3_1.png');
} }
async getData(weatherParameters) { async getData(weatherParameters) {
@ -129,7 +129,9 @@ class Almanac extends WeatherDisplay {
// use the color of the pixel to determine the outlook // use the color of the pixel to determine the outlook
parseOutlooks(lat, lon, temp, precip) { parseOutlooks(lat, lon, temp, precip) {
const {DateTime} = luxon; const {DateTime} = luxon;
const month = DateTime.local().toLocaleString({month: 'long'}); const month = DateTime.local();
const thisMonth = month.toLocaleString({month: 'short'});
const nextMonth = month.plus({months: 1}).toLocaleString({month: 'short'});
// draw the images on the canvases // draw the images on the canvases
const tempContext = utils.image.drawLocalCanvas(temp); const tempContext = utils.image.drawLocalCanvas(temp);
@ -140,7 +142,8 @@ class Almanac extends WeatherDisplay {
const precipColor = this.getOutlookColor(lat, lon, precipContext); const precipColor = this.getOutlookColor(lat, lon, precipContext);
return { return {
month, thisMonth,
nextMonth,
temperature: this.getOutlookTemperatureIndicator(tempColor), temperature: this.getOutlookTemperatureIndicator(tempColor),
precipitation: this.getOutlookPrecipitationIndicator(precipColor), precipitation: this.getOutlookPrecipitationIndicator(precipColor),
}; };
@ -215,22 +218,22 @@ class Almanac extends WeatherDisplay {
// get temperature outlook from color // get temperature outlook from color
getOutlookTemperatureIndicator(pixelColor) { getOutlookTemperatureIndicator(pixelColor) {
if (pixelColor.b > pixelColor.r) { if (pixelColor.b > pixelColor.r) {
return 'B'; return 'Below Normal';
} else if (pixelColor.r > pixelColor.b) { } else if (pixelColor.r > pixelColor.b) {
return 'A'; return 'Above Normal';
} else { } else {
return 'N'; return 'Normal';
} }
} }
// get precipitation outlook from color // get precipitation outlook from color
getOutlookPrecipitationIndicator (pixelColor) { getOutlookPrecipitationIndicator (pixelColor) {
if (pixelColor.g > pixelColor.r) { if (pixelColor.g > pixelColor.r) {
return 'A'; return 'Above Normal';
} else if (pixelColor.r > pixelColor.g) { } else if (pixelColor.r > pixelColor.g) {
return 'B'; return 'Below Normal';
} else { } else {
return 'N'; return 'Normal';
} }
} }
@ -238,56 +241,82 @@ class Almanac extends WeatherDisplay {
super.drawCanvas(); super.drawCanvas();
const info = this.data; const info = this.data;
const {DateTime} = luxon; const {DateTime} = luxon;
const Today = DateTime.local();
const Tomorrow = Today.plus({days: 1});
// extract moon images // extract moon images
const [FullMoonImage, LastMoonImage, NewMoonImage, FirstMoonImage] = await Promise.all(this.moonImages); const [FullMoonImage, LastMoonImage, NewMoonImage, FirstMoonImage] = await Promise.all(this.moonImages);
this.context.drawImage(await this.backgroundImage, 0, 0); switch (this.screenIndex) {
draw.horizontalGradientSingle(this.context, 0, 30, 500, 90, draw.topColor1, draw.topColor2); case 0:
draw.triangle(this.context, 'rgb(28, 10, 87)', 500, 30, 450, 90, 500, 90); default:
draw.horizontalGradientSingle(this.context, 0, 90, 640, 190, draw.sideColor1, draw.sideColor2); // sun and moon data
this.context.drawImage(await this.backgroundImage0, 0, 0);
draw.horizontalGradientSingle(this.context, 0, 30, 500, 90, draw.topColor1, draw.topColor2);
draw.triangle(this.context, 'rgb(28, 10, 87)', 500, 30, 450, 90, 500, 90);
draw.horizontalGradientSingle(this.context, 0, 90, 640, 190, draw.sideColor1, draw.sideColor2);
draw.titleText(this.context, 'Almanac', 'Astronomical'); draw.titleText(this.context, 'Almanac', 'Astronomical');
const Today = DateTime.local(); draw.text(this.context, 'Star4000', '24pt', '#FFFF00', 320, 120, Today.toLocaleString({weekday: 'long'}), 2, 'center');
const Tomorrow = Today.plus({days: 1}); draw.text(this.context, 'Star4000', '24pt', '#FFFF00', 500, 120, Tomorrow.toLocaleString({weekday: 'long'}), 2, 'center');
draw.text(this.context, 'Star4000', '24pt', '#FFFF00', 320, 120, Today.toLocaleString({weekday: 'long'}), 2, 'center');
draw.text(this.context, 'Star4000', '24pt', '#FFFF00', 500, 120, Tomorrow.toLocaleString({weekday: 'long'}), 2, 'center');
draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 70, 150, 'Sunrise:', 2); draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 70, 150, 'Sunrise:', 2);
draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 270, 150, DateTime.fromJSDate(info.sun[0].sunrise).toLocaleString(DateTime.TIME_SIMPLE).toLowerCase(), 2); draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 270, 150, DateTime.fromJSDate(info.sun[0].sunrise).toLocaleString(DateTime.TIME_SIMPLE).toLowerCase(), 2);
draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 450, 150, DateTime.fromJSDate(info.sun[1].sunrise).toLocaleString(DateTime.TIME_SIMPLE).toLowerCase(), 2); draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 450, 150, DateTime.fromJSDate(info.sun[1].sunrise).toLocaleString(DateTime.TIME_SIMPLE).toLowerCase(), 2);
draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 70, 180, ' Sunset:', 2); draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 70, 180, ' Sunset:', 2);
draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 270, 180, DateTime.fromJSDate(info.sun[0].sunset).toLocaleString(DateTime.TIME_SIMPLE).toLowerCase(), 2); draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 270, 180, DateTime.fromJSDate(info.sun[0].sunset).toLocaleString(DateTime.TIME_SIMPLE).toLowerCase(), 2);
draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 450, 180, DateTime.fromJSDate(info.sun[1].sunset).toLocaleString(DateTime.TIME_SIMPLE).toLowerCase(), 2); draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 450, 180, DateTime.fromJSDate(info.sun[1].sunset).toLocaleString(DateTime.TIME_SIMPLE).toLowerCase(), 2);
draw.text(this.context, 'Star4000', '24pt', '#FFFF00', 70, 220, 'Moon Data:', 2); draw.text(this.context, 'Star4000', '24pt', '#FFFF00', 70, 220, 'Moon Data:', 2);
info.moon.forEach((MoonPhase, Index) => { info.moon.forEach((MoonPhase, Index) => {
const date = MoonPhase.date.toLocaleString({month: 'short', day: 'numeric'}); const date = MoonPhase.date.toLocaleString({month: 'short', day: 'numeric'});
draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 120+Index*130, 260, MoonPhase.phase, 2, 'center'); draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 120+Index*130, 260, MoonPhase.phase, 2, 'center');
draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 120+Index*130, 390, date, 2, 'center'); draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 120+Index*130, 390, date, 2, 'center');
const image = (() => { const image = (() => {
switch (MoonPhase.phase) { switch (MoonPhase.phase) {
case 'Full': case 'Full':
return FullMoonImage; return FullMoonImage;
case 'Last': case 'Last':
return LastMoonImage; return LastMoonImage;
case 'New': case 'New':
return NewMoonImage; return NewMoonImage;
case 'First': case 'First':
default: default:
return FirstMoonImage; return FirstMoonImage;
} }
})(); })();
this.context.drawImage(image, 75+Index*130, 270); this.context.drawImage(image, 75+Index*130, 270);
}); });
this.finishDraw(); this.finishDraw();
this.setStatus(STATUS.loaded); this.setStatus(STATUS.loaded);
break;
case 1:
this.context.drawImage(await this.backgroundImage1, 0, 0);
draw.horizontalGradientSingle(this.context, 0, 30, 500, 90, draw.topColor1, draw.topColor2);
draw.triangle(this.context, 'rgb(28, 10, 87)', 500, 30, 450, 90, 500, 90);
draw.horizontalGradientSingle(this.context, 0, 90, 52, 399, draw.sideColor1, draw.sideColor2);
draw.horizontalGradientSingle(this.context, 584, 90, 640, 399, draw.sideColor1, draw.sideColor2);
draw.titleText(this.context, 'Almanac', 'Outlook');
draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 320, 180, '30 Day Outlook', 2, 'center');
var DateRange = 'MID-' + info.outlook.thisMonth.toUpperCase() + ' TO MID-' + info.outlook.nextMonth.toUpperCase();
draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 320, 220, DateRange, 2, 'center');
var Temperature = info.outlook.temperature;
draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 70, 300, 'Temperatures: ' + Temperature, 2);
var Precipitation = info.outlook.precipitation;
draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 70, 380, 'Precipitation: ' + Precipitation, 2);
}
} }
} }

52
server/scripts/twc3.js
View file

@ -152,58 +152,6 @@ const GetMonthPrecipitation = async (WeatherParameters) => {
}; };
var PopulateOutlook = function (WeatherParameters) {
if (WeatherParameters === null || (_DontLoadGifs && WeatherParameters.Progress.Almanac !== LoadStatuses.Loaded)) {
return;
}
var Outlook = WeatherParameters.Outlook;
// Draw canvas
var canvas = canvasOutlook[0];
var context = canvas.getContext('2d');
var BackGroundImage = new Image();
BackGroundImage.onload = function () {
context.drawImage(BackGroundImage, 0, 0);
DrawHorizontalGradientSingle(context, 0, 30, 500, 90, _TopColor1, _TopColor2);
DrawTriangle(context, 'rgb(28, 10, 87)', 500, 30, 450, 90, 500, 90);
DrawHorizontalGradientSingle(context, 0, 90, 52, 399, _SideColor1, _SideColor2);
DrawHorizontalGradientSingle(context, 584, 90, 640, 399, _SideColor1, _SideColor2);
DrawTitleText(context, 'Almanac', 'Outlook');
DrawText(context, 'Star4000', '24pt', '#FFFFFF', 320, 180, '30 Day Outlook', 2, 'center');
var DateRange = 'MID-' + Outlook.From.toUpperCase() + ' TO MID-' + Outlook.To.toUpperCase();
DrawText(context, 'Star4000', '24pt', '#FFFFFF', 320, 220, DateRange, 2, 'center');
var Temperature = GetOutlookDescription(Outlook.Temperature);
DrawText(context, 'Star4000', '24pt', '#FFFFFF', 70, 300, 'Temperatures: ' + Temperature, 2);
var Precipitation = GetOutlookDescription(Outlook.Precipitation);
DrawText(context, 'Star4000', '24pt', '#FFFFFF', 70, 380, 'Precipitation: ' + Precipitation, 2);
UpdateWeatherCanvas(WeatherParameters, canvasOutlook);
};
//BackGroundImage.src = "images/BackGround1_" + _Themes.toString() + ".png";
BackGroundImage.src = 'images/BackGround1_1.png';
};
var GetOutlookDescription = function (OutlookIndicator) {
switch (OutlookIndicator) {
case 'N':
return 'Normal';
case 'A':
return 'Above Normal';
case 'B':
return 'Below Normal';
default:
}
};
String.prototype.capitalize = function () { String.prototype.capitalize = function () {
return this.toLowerCase().replace(/\b[a-z]/g, function (letter) { return this.toLowerCase().replace(/\b[a-z]/g, function (letter) {
return letter.toUpperCase(); return letter.toUpperCase();

2
version.js
View file

@ -1 +1 @@
module.exports = '3.1.3'; module.exports = '3.2.0';