remove loop delay from gifs
This commit is contained in:
parent
24855fd959
commit
26606757ce
|
@ -1,6 +1,6 @@
|
||||||
// display sun and moon data
|
// display sun and moon data
|
||||||
|
|
||||||
/* globals WeatherDisplay, utils, STATUS, UNITS, draw, navigation, SunCalc, luxon */
|
/* globals WeatherDisplay, utils, STATUS, draw, SunCalc, luxon */
|
||||||
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
class Almanac extends WeatherDisplay {
|
class Almanac extends WeatherDisplay {
|
||||||
|
@ -18,6 +18,8 @@ class Almanac extends WeatherDisplay {
|
||||||
utils.image.load('images/2/First-Quarter.gif'),
|
utils.image.load('images/2/First-Quarter.gif'),
|
||||||
];
|
];
|
||||||
|
|
||||||
|
this.timing.totalScreens = 2;
|
||||||
|
|
||||||
this.backgroundImage = utils.image.load('images/BackGround3_1.png');
|
this.backgroundImage = utils.image.load('images/BackGround3_1.png');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -169,7 +169,6 @@ class CurrentWeather extends WeatherDisplay {
|
||||||
// get main icon
|
// get main icon
|
||||||
this.gifs.push(await utils.image.superGifAsync({
|
this.gifs.push(await utils.image.superGifAsync({
|
||||||
src: Icon,
|
src: Icon,
|
||||||
loop_delay: 100,
|
|
||||||
auto_play: true,
|
auto_play: true,
|
||||||
canvas: this.canvas,
|
canvas: this.canvas,
|
||||||
x: 140,
|
x: 140,
|
||||||
|
|
|
@ -158,7 +158,6 @@ class ExtendedForecast extends WeatherDisplay {
|
||||||
// draw the icon
|
// draw the icon
|
||||||
this.gifs.push(await utils.image.superGifAsync({
|
this.gifs.push(await utils.image.superGifAsync({
|
||||||
src: Day.icon,
|
src: Day.icon,
|
||||||
loop_delay: 100,
|
|
||||||
auto_play: true,
|
auto_play: true,
|
||||||
canvas: this.canvas,
|
canvas: this.canvas,
|
||||||
x: 70 + Index*195,
|
x: 70 + Index*195,
|
||||||
|
|
|
@ -369,7 +369,6 @@ class RegionalForecast extends WeatherDisplay {
|
||||||
this.gifs.push(await utils.image.superGifAsync({
|
this.gifs.push(await utils.image.superGifAsync({
|
||||||
src: icon,
|
src: icon,
|
||||||
max_width: 42,
|
max_width: 42,
|
||||||
loop_delay: 100,
|
|
||||||
auto_play: true,
|
auto_play: true,
|
||||||
canvas: this.canvas,
|
canvas: this.canvas,
|
||||||
x: period.x,
|
x: period.x,
|
||||||
|
|
|
@ -128,7 +128,6 @@ class TravelForecast extends WeatherDisplay {
|
||||||
|
|
||||||
this.longCanvasGifs.push(await utils.image.superGifAsync({
|
this.longCanvasGifs.push(await utils.image.superGifAsync({
|
||||||
src: city.icon,
|
src: city.icon,
|
||||||
loop_delay: 100,
|
|
||||||
auto_play: true,
|
auto_play: true,
|
||||||
canvas: this.longCanvas,
|
canvas: this.longCanvas,
|
||||||
x: 330,
|
x: 330,
|
||||||
|
|
|
@ -152,218 +152,6 @@ const GetMonthPrecipitation = async (WeatherParameters) => {
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
var GetOutlook = function (WeatherParameters) {
|
|
||||||
WeatherParameters.Outlook = null;
|
|
||||||
|
|
||||||
// No current support for HI and AK.
|
|
||||||
if (WeatherParameters.State === 'HI' || WeatherParameters.State === 'AK') {
|
|
||||||
GetTideInfo2(WeatherParameters);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var ImagesLoadedCounter = 0;
|
|
||||||
var ImagesLoadedMax = 2;
|
|
||||||
|
|
||||||
var ImageOnError = function () {
|
|
||||||
GetTideInfo2(WeatherParameters);
|
|
||||||
};
|
|
||||||
|
|
||||||
var ImageOnLoad = function () {
|
|
||||||
ImagesLoadedCounter++;
|
|
||||||
if (ImagesLoadedCounter < ImagesLoadedMax) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var Outlook = {};
|
|
||||||
|
|
||||||
var now = new Date();
|
|
||||||
var CurrentMonth = new Date(now.getYear(), now.getMonth(), 1);
|
|
||||||
if (now.getDate() <= 14) {
|
|
||||||
CurrentMonth = CurrentMonth.addMonths(-1);
|
|
||||||
}
|
|
||||||
Outlook.From = CurrentMonth.getMonthShortName();
|
|
||||||
CurrentMonth = CurrentMonth.addMonths(1);
|
|
||||||
Outlook.To = CurrentMonth.getMonthShortName();
|
|
||||||
|
|
||||||
var cnvOutlookTempId = 'cnvOutlookTemp';
|
|
||||||
var contextTemp;
|
|
||||||
|
|
||||||
if (_DontLoadGifs === false) {
|
|
||||||
// Clear the current image.
|
|
||||||
divOutlookTemp.empty();
|
|
||||||
|
|
||||||
divOutlookTemp.html('<canvas id=\'' + cnvOutlookTempId + '\' />');
|
|
||||||
cnvOutlookTemp = $('#' + cnvOutlookTempId);
|
|
||||||
cnvOutlookTemp.attr('width', '719'); // For Chrome.
|
|
||||||
cnvOutlookTemp.attr('height', '707'); // For Chrome.
|
|
||||||
}
|
|
||||||
cnvOutlookTemp = $('#' + cnvOutlookTempId);
|
|
||||||
contextTemp = cnvOutlookTemp[0].getContext('2d');
|
|
||||||
contextTemp.drawImage(TempImage, 0, 0);
|
|
||||||
|
|
||||||
var TempColor = GetOutlookColor(WeatherParameters, contextTemp);
|
|
||||||
var Temperature = GetOutlookTemperatureIndicator(TempColor);
|
|
||||||
Outlook.Temperature = Temperature;
|
|
||||||
|
|
||||||
var cnvOutlookPrcpId = 'cnvOutlookPrcp';
|
|
||||||
var contextPrcp;
|
|
||||||
|
|
||||||
if (_DontLoadGifs === false) {
|
|
||||||
// Clear the current image.
|
|
||||||
divOutlookPrcp.empty();
|
|
||||||
|
|
||||||
divOutlookPrcp.html('<canvas id=\'' + cnvOutlookPrcpId + '\' />');
|
|
||||||
cnvOutlookPrcp = $('#' + cnvOutlookPrcpId);
|
|
||||||
cnvOutlookPrcp.attr('width', '719'); // For Chrome.
|
|
||||||
cnvOutlookPrcp.attr('height', '707'); // For Chrome.
|
|
||||||
}
|
|
||||||
cnvOutlookPrcp = $('#' + cnvOutlookPrcpId);
|
|
||||||
contextPrcp = cnvOutlookPrcp[0].getContext('2d');
|
|
||||||
contextPrcp.drawImage(PrcpImage, 0, 0);
|
|
||||||
|
|
||||||
var PrcpColor = GetOutlookColor(WeatherParameters, contextPrcp);
|
|
||||||
var Precipitation = GetOutlookPrecipitationIndicator(PrcpColor);
|
|
||||||
Outlook.Precipitation = Precipitation;
|
|
||||||
|
|
||||||
WeatherParameters.Outlook = Outlook;
|
|
||||||
|
|
||||||
PopulateOutlook(WeatherParameters);
|
|
||||||
|
|
||||||
GetTideInfo2(WeatherParameters);
|
|
||||||
};
|
|
||||||
|
|
||||||
var TempUrl = 'https://www.cpc.ncep.noaa.gov/products/predictions/30day/off14_temp.gif';
|
|
||||||
TempUrl = 'cors/?u=' + encodeURIComponent(TempUrl);
|
|
||||||
var TempImage = new Image();
|
|
||||||
TempImage.onload = ImageOnLoad;
|
|
||||||
TempImage.onerror = ImageOnError;
|
|
||||||
TempImage.src = TempUrl;
|
|
||||||
|
|
||||||
var PrcpUrl = 'https://www.cpc.ncep.noaa.gov/products/predictions/30day/off14_prcp.gif';
|
|
||||||
PrcpUrl = 'cors/?u=' + encodeURIComponent(PrcpUrl);
|
|
||||||
var PrcpImage = new Image();
|
|
||||||
PrcpImage.onload = ImageOnLoad;
|
|
||||||
TempImage.onerror = ImageOnError;
|
|
||||||
PrcpImage.src = PrcpUrl;
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
var GetOutlookColor = function (WeatherParameters, context) {
|
|
||||||
var X = 0;
|
|
||||||
var Y = 0;
|
|
||||||
var PixelColor = '';
|
|
||||||
var Latitude = WeatherParameters.Latitude;
|
|
||||||
var Longitude = WeatherParameters.Longitude;
|
|
||||||
|
|
||||||
// The height is in the range of latitude 75'N (top) - 15'N (bottom)
|
|
||||||
Y = ((75 - Latitude) / 53) * 707;
|
|
||||||
|
|
||||||
if (Latitude < 48.83) {
|
|
||||||
Y -= Math.abs(48.83 - Latitude) * 2.9;
|
|
||||||
}
|
|
||||||
if (Longitude < -100.46) {
|
|
||||||
Y -= Math.abs(-100.46 - Longitude) * 1.7;
|
|
||||||
} else {
|
|
||||||
Y -= Math.abs(-100.46 - Longitude) * 1.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
// The width is in the range of the longitude ???
|
|
||||||
X = ((-155 - Longitude) / -110) * 719; // -155 - -40
|
|
||||||
|
|
||||||
if (Longitude < -100.46) {
|
|
||||||
X -= Math.abs(-100.46 - Longitude) * 1;
|
|
||||||
|
|
||||||
if (Latitude > 40) {
|
|
||||||
X += Math.abs(40 - Latitude) * 4;
|
|
||||||
} else {
|
|
||||||
X -= Math.abs(40 - Latitude) * 4;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
X += Math.abs(-100.46 - Longitude) * 2;
|
|
||||||
|
|
||||||
if (Latitude < 36 && Longitude > -90) {
|
|
||||||
X += Math.abs(36 - Latitude) * 8;
|
|
||||||
} else {
|
|
||||||
X -= Math.abs(36 - Latitude) * 6;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// The further left and right from lat 45 and lon -97 the y increases
|
|
||||||
X = Math.round(X);
|
|
||||||
Y = Math.round(Y);
|
|
||||||
|
|
||||||
// Determine if there is any "non-white" colors around the area.
|
|
||||||
// Search a 16x16 region.
|
|
||||||
var FoundColor = false;
|
|
||||||
for (var ColorX = X - 8; ColorX <= X + 8; ColorX++) {
|
|
||||||
for (var ColorY = Y - 8; ColorY <= Y + 8; ColorY++) {
|
|
||||||
PixelColor = GetPixelColor(context, ColorX, ColorY);
|
|
||||||
|
|
||||||
if (PixelColor !== '#FFFFFF' && PixelColor !== '#000000') {
|
|
||||||
FoundColor = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (FoundColor) {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (FoundColor) {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return PixelColor;
|
|
||||||
};
|
|
||||||
|
|
||||||
var GetOutlookTemperatureIndicator = function (PixelColor) {
|
|
||||||
var RGB = HexToRgb(PixelColor);
|
|
||||||
|
|
||||||
if (RGB.b > RGB.r) {
|
|
||||||
return 'B';
|
|
||||||
} else if (RGB.r > RGB.b) {
|
|
||||||
return 'A';
|
|
||||||
} else {
|
|
||||||
return 'N';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var GetOutlookPrecipitationIndicator = function (PixelColor) {
|
|
||||||
var RGB = HexToRgb(PixelColor);
|
|
||||||
|
|
||||||
if (RGB.g > RGB.r) {
|
|
||||||
return 'A';
|
|
||||||
} else if (RGB.r > RGB.g) {
|
|
||||||
return 'B';
|
|
||||||
} else {
|
|
||||||
return 'N';
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
const GetPixelColor = (context, x, y) => {
|
|
||||||
var PixelData = context.getImageData(x, y, 1, 1).data;
|
|
||||||
var R = PixelData[0];
|
|
||||||
var G = PixelData[1];
|
|
||||||
var B = PixelData[2];
|
|
||||||
return '#' + ('000000' + RgbToHex(R, G, B)).slice(-6);
|
|
||||||
};
|
|
||||||
|
|
||||||
const RgbToHex = (r, g, b) => {
|
|
||||||
if (r > 255 || g > 255 || b > 255) throw 'Invalid color component';
|
|
||||||
return ((r << 16) | (g << 8) | b).toString(16).toUpperCase();
|
|
||||||
};
|
|
||||||
|
|
||||||
const HexToRgb = (h) => {
|
|
||||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(h);
|
|
||||||
return result ? {
|
|
||||||
r: parseInt(result[1], 16),
|
|
||||||
g: parseInt(result[2], 16),
|
|
||||||
b: parseInt(result[3], 16),
|
|
||||||
} : null;
|
|
||||||
};
|
|
||||||
|
|
||||||
var PopulateOutlook = function (WeatherParameters) {
|
var PopulateOutlook = function (WeatherParameters) {
|
||||||
if (WeatherParameters === null || (_DontLoadGifs && WeatherParameters.Progress.Almanac !== LoadStatuses.Loaded)) {
|
if (WeatherParameters === null || (_DontLoadGifs && WeatherParameters.Progress.Almanac !== LoadStatuses.Loaded)) {
|
||||||
return;
|
return;
|
||||||
|
|
Loading…
Reference in a new issue