Magic Mirror Module: mmm-weatherchart

This MagicMirror2 module allows you to show a weather diagram provided by http://www.yr.no

About

This builds on the module made by paphko, big thanks to him for creating it :) The main difference is this fork uses the svg image from yr.no, which allows us to customise the look. Additionally, the image is much sharper because the browser can render everything nicely.

You can override the default styling, have a look at the defaults in mmm-weatherchart.js for the available values, and set your custom values in your magic mirror config. We can also override the scaling, so you can have a giant forecast if you wish.

Because i am a newbie when it comes to node.js and manipulating svg, i just maintain these changes in a fork for now. Hopefully someone with better knowledge would be willing to review or rewrite this properly and merge to his repo.

Installation

In your terminal, go to your MagicMirror's Module folder:

cd ~/MagicMirror/modules

Clone this repository:

git clone https://github.com/paphko/mmm-weatherchart.git

Configure the module in your config.js file.

Using the module

To use this module, you must first determine the location id:

1. go to http://www.yr.no
2. at the top-right, switch language to English
3. enter your location into the search field at the top and select your city
4. write down the location id from the url. e.g. for: https://www.yr.no/en/forecast/daily-table/2-6619832/United%20Kingdom/England/Greater%20London/Trafalgar%20Square this will be 2-6619832

Now add the module to the modules array in the config/config.js file:

modules: [
    {
        module: 'mmm-weatherchart',
        position: 'bottom_left', // this can be any of the regions
        config: {
            locationId: '2-6619832', // as determined above
            updateInterval: 60 * 60 * 1000, // update every hour
            hideBorder: true, // whether or not a border with city name should be shown
            negativeImage: true, // whether or not the default white image should be inverted
            // mmDirectory: "/home/pi/MagicMirror/" // required for caching; adjust if it differs
        }
    },
]

Configuration options

The following properties can be configured:

Option	Description
locationId	See above
updateInterval	Update interval of the diagram. Default value: 60 * 60 * 1000 (once every hour)
hideBorder	Wheather or not a border with city name should be shown. Default value: true
negativeImage	Wheather or not the white image should be inverted. Default value: true
mmDirectory	To avoid the image to be cached by the browser (issue #5), it is downloaded into the magic mirror / modules / mmm-weatherchart / cache folder. I couldn't find a way to ask MM for this path, so I just hard-coded it here with the possibility to adjust it in case your installation looks different. Default value: /home/pi/MagicMirror/

Here are the extra values which can be configured.

        locationId: "2-6619832",   // from the url of the related page of yr.no. e.g.: https://www.yr.no/en/forecast/daily-table/2-6619832/United%20Kingdom/England/Greater%20London/Trafalgar%20Square
        updateInterval: 60 * 60 * 1000, // every hour
        hideBorder: true,
        negativeImage: true,
        retryDelay: 2500,
        domain: "www.yr.no",
        path: "/en/content/",
        mmDirectory: "/home/pi/MagicMirror/", // not sure whether it is possible to ask MM for this path?

        
        customiseSVG: true,    // change colours in hex values 
        background_colour:    "#000000",
        default_text_colour : "#d9d9d9",    // "Meteogram for...."
        label_text_colour : "#f2f2f2",     // "Tuesday"
        default_fill_colour : "#999999",    // wind direction arrows, etc.
        below_zero_line_colour: "#74c4fe", 
        above_zero_line_colour: "#ffdb48",    
        minor_gridline_colour: "#43443c",
        major_gridline_colour: "#9d9f93",
        rain_colour: "#83d2fe",
        snow_colour: "#ffffff",   
        moon_colour_a: "#afb3b6", 
        moon_colour_b: "#acafb3",
        yr_logo_circle: "#004a61", 
        hide_branding: false,               // hide the yr, nrk & mi logos

        // properties to override the image size. 
        // to use them, set customize_size: true
        // this is a bit experimental and not guaranteed to work well. getting the correct values for your set up is fiddly and 
        // will probably need a lot of trial & error, and inspecting the svg in the browser to test the values.
        customize_size: false,          // whether to override the size of the forecast image. 
        override_scale_factor: 1.1,      // forecast will be 10% bigger. requires customize_size: true 
        override_width: 1200,            // image canvas needs to be expanded to draw a bigger forecast.
        override_height: 500,            // as above
        override_x_location: 160,        // shift image horizontally
        override_y_location: -10          // shift image vertically
        override_precipitation_key_location_x: 176,        // shift rain key horizontally
        override_wind_key_location_x: 348                 // shift wind key horizontally