thestigh / mmm-windyv2 Goto Github PK
View Code? Open in Web Editor NEWA module for MagicMirror2 based on www.windy.com
A module for MagicMirror2 based on www.windy.com
Hey. Great idea for a module, love the windy map. Unfortunately I just get a grey background when I set up this module, all other modules are fine. Any idea what the problem could be?
Hi all,
For anyone like myself looking at this module, I was able to get it working as I wanted by making the following adjustments:
In MMM-WindyV2.js, I updated the following line:
From:
56: 'https://unpkg.com/[email protected]/dist/leaflet.js',
To:
56: 'https://unpkg.com/[email protected]/dist/leaflet.js',
This got the module working alone, but I wanted to use windy with "radar" so I added the "overlay" line on 130:
/////////////////////////////////////////////////////////////////////////////////////
scheduleInit: function(delay) {
setTimeout(() => {
const options = {
graticule: false,
key: this.config.apiKey,
lat: this.config.latitude,
lon: this.config.longitude,
animate: false,
zoom: this.config.zoomLevel,
minZoom: 3,
maxZoom: 18,
overlay: 'radar', //ADDED THIS LINE TO FORCE RADAR
Finally, I wanted the radar to automatically 'play', as well as remove all the other unnecessary buttons/logos/ etc. Therefore, i made the below adjustments to the MAIN.JS of MM at the very end:
// Add polyfill for Object.assign.
if (typeof Object.assign !== "function") {
(function () {
Object.assign = function (target) {
"use strict";
if (target === undefined || target === null) {
throw new TypeError("Cannot convert undefined or null to object");
}
const output = Object(target);
for (let index = 1; index < arguments.length; index++) {
const source = arguments[index];
if (source !== undefined && source !== null) {
for (const nextKey in source) {
if (source.hasOwnProperty(nextKey)) {
output[nextKey] = source[nextKey];
}
}
}
}
return output;
};
})();
}
///////BELOW WILL AUTOMATICALLY CLICK THE PLAY BUTTON///////
setTimeout(function() {
document.evaluate(
'//[@[starts-with(name(), "data-ref")]="play"]',
document,
null,
XPathResult.ANY_TYPE,
null
).iterateNext().click()
}, 2000);
///////BELOW WILL HIDE LOADING BARS AND LOGOS///////
setTimeout(function() {
document.getElementById("radar-wrapper").style.display = "none";
document.getElementById("progress-bar").style.display = "none";
document.getElementById("mobile-ovr-select").style.display = "none";
document.getElementById("logo").style.display = "none";
}, 3000);
//////////////////////////////////////////////////////////////////
MM.init();
With these changes above, I now have a radar loop that will display as the background of my magic mirror. Currently, I have a cronjob to restart MM every 6 hours as the radar play will eventually expire. I'm sure there is a better way to achieve this but I haven't explored any other options yet. Lastly, here is an example of my config.js for reference.
{
disabled: false,
module: "MMM-WindyV2",
position: 'fullscreen_above', // this must be set to 'fullscreen_above'
config: {
apiKey: 'PLACE YOUR API KEY HERE!!!!', // insert your free or paid API key here
initLoadDelay: 50, // optional, default is 50 milliseconds
latitude: 69.123, // example: 69.123
longitude: 17.123, // example: 17.123
zoomLevel: 9, // set your preferred zoom level
showLayer: 'radar', // wind, rain, clouds, temp, pressure, currents, waves
rotateLayers: false, // set to true to rotate layers
layersToRotate: ['radar','radar'], // layers to rotate
delayRotate: 5000, // delay between rotated layers, in milliseconds
wMinZoom: 3, // set minimum zoom level for WindyV2
wMaxZoom: 17, // set maximum zoom level for WindyV2
windyMetric: 'm/s', // 'kt', 'bft', 'm/s', 'km/h' and 'mph'
updateTimer: 60 * 60 * 1000 * 6, // update per 6 hours
retainZoom: true // retain zoomlevel between changing overlays
}
},
I hope this helps someone looking to achieve the same goal as I was!
Hi,
Please add a noob installation guide to the front page for people like me, saves some time:
Step 1
Navigate into your MagicMirror's modules folder and execute: git clone https://github.com/TheStigh/MMM-WindyV2.
Step 2
Add the module in config.js placing it where you prefer.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.