Add monthly outlook display
This commit is contained in:
parent
26606757ce
commit
998a869ca0
2
dist/index.html
vendored
2
dist/index.html
vendored
File diff suppressed because one or more lines are too long
2
dist/resources/ws.min.js
vendored
2
dist/resources/ws.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -7,8 +7,9 @@ class Almanac extends WeatherDisplay {
|
|||
constructor(navId,elemId) {
|
||||
super(navId,elemId,'Almanac');
|
||||
|
||||
// pre-load background image (returns promise)
|
||||
this.backgroundImage = utils.image.load('images/BackGround1_1.png');
|
||||
// pre-load background images (returns promises)
|
||||
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)
|
||||
this.moonImages = [
|
||||
|
@ -20,7 +21,6 @@ class Almanac extends WeatherDisplay {
|
|||
|
||||
this.timing.totalScreens = 2;
|
||||
|
||||
this.backgroundImage = utils.image.load('images/BackGround3_1.png');
|
||||
}
|
||||
|
||||
async getData(weatherParameters) {
|
||||
|
@ -129,7 +129,9 @@ class Almanac extends WeatherDisplay {
|
|||
// use the color of the pixel to determine the outlook
|
||||
parseOutlooks(lat, lon, temp, precip) {
|
||||
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
|
||||
const tempContext = utils.image.drawLocalCanvas(temp);
|
||||
|
@ -140,7 +142,8 @@ class Almanac extends WeatherDisplay {
|
|||
const precipColor = this.getOutlookColor(lat, lon, precipContext);
|
||||
|
||||
return {
|
||||
month,
|
||||
thisMonth,
|
||||
nextMonth,
|
||||
temperature: this.getOutlookTemperatureIndicator(tempColor),
|
||||
precipitation: this.getOutlookPrecipitationIndicator(precipColor),
|
||||
};
|
||||
|
@ -215,22 +218,22 @@ class Almanac extends WeatherDisplay {
|
|||
// get temperature outlook from color
|
||||
getOutlookTemperatureIndicator(pixelColor) {
|
||||
if (pixelColor.b > pixelColor.r) {
|
||||
return 'B';
|
||||
return 'Below Normal';
|
||||
} else if (pixelColor.r > pixelColor.b) {
|
||||
return 'A';
|
||||
return 'Above Normal';
|
||||
} else {
|
||||
return 'N';
|
||||
return 'Normal';
|
||||
}
|
||||
}
|
||||
|
||||
// get precipitation outlook from color
|
||||
getOutlookPrecipitationIndicator (pixelColor) {
|
||||
if (pixelColor.g > pixelColor.r) {
|
||||
return 'A';
|
||||
return 'Above Normal';
|
||||
} else if (pixelColor.r > pixelColor.g) {
|
||||
return 'B';
|
||||
return 'Below Normal';
|
||||
} else {
|
||||
return 'N';
|
||||
return 'Normal';
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -238,19 +241,23 @@ class Almanac extends WeatherDisplay {
|
|||
super.drawCanvas();
|
||||
const info = this.data;
|
||||
const {DateTime} = luxon;
|
||||
const Today = DateTime.local();
|
||||
const Tomorrow = Today.plus({days: 1});
|
||||
|
||||
// extract moon images
|
||||
const [FullMoonImage, LastMoonImage, NewMoonImage, FirstMoonImage] = await Promise.all(this.moonImages);
|
||||
|
||||
this.context.drawImage(await this.backgroundImage, 0, 0);
|
||||
switch (this.screenIndex) {
|
||||
case 0:
|
||||
default:
|
||||
// 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');
|
||||
|
||||
const Today = DateTime.local();
|
||||
const Tomorrow = Today.plus({days: 1});
|
||||
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');
|
||||
|
||||
|
@ -289,5 +296,27 @@ class Almanac extends WeatherDisplay {
|
|||
|
||||
this.finishDraw();
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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 () {
|
||||
return this.toLowerCase().replace(/\b[a-z]/g, function (letter) {
|
||||
return letter.toUpperCase();
|
||||
|
|
|
@ -1 +1 @@
|
|||
module.exports = '3.1.3';
|
||||
module.exports = '3.2.0';
|
Loading…
Reference in a new issue