Git Product home page Git Product logo

mmm-noaa3's Introduction

This repository is maintained by Cowboysdude [This is the third version of this module for MagicMirror2]

MMM-NOAA V3.0

Weather for your mirror

  • Also UV index and Air Quality Index. [Warning AQI may not work in all areas].

Examples

See below!!

  • Automatically adjusts language and all other settings based on your config.js!

Your terminal installation instructions

  • git clone https://github.com/cowboysdude/MMM-NOAA3 into the ~/MagicMirror/modules directory.
  • cd MMM-NOAA3
  • npm install

Get your free API key here [WEATHER, You must also get an AirAPI Key--- see below]

There are multiple providers to choose from: You only need one api from one of these providers below: Remember not all providers are created equal... Some are a bit better than others :)

YOU WILL NEED YOUR LATITUDE AND LONGITUDE

You can find them right here: https://www.latlong.net/

Get your AirKEY from here

https://airvisual.com/api

Config.js entry and options

Will automatically select translation file and either F or C by reading your defaults from the config.js file [at the top] Will default to EN if NO translation file is found.

Provider name MUST be in the config.js. Here they are:

  • weatherbit

  • darksky

  • apixu

  • weatherunlocked

  • accuweather

  • openweather

  • yahoo [ONLY works for English language at the moment]

  • For all of them EXCEPT YAHOO and WEATHERUNLOCKED

       module: 'MMM-NOAA3',
    position: 'top_left',
       config: {
           provider: "must be in quotes", // From list above
           apiKey: "YOUR API KEY",        // From one of the providers listed above
           airKey: "YOUR API KEY",    
           css: "NOAA3",                   // THIS MUST CONTAIN A CSS STYLE NAME 
       userlat: "xxxx", //MUST HAVE BOTH
           userlon: "xxxx"  //MUST HAVE BOTH
    }
        },
    
  • WeatherUnlocked API Example:

       {
         module: 'MMM-NOAA3',
     position: 'top_left',
         config: {
     	    provider: "weatherunlocked",       
     	    apiKey: "YOUR API KEY",  
     	    appID: "YOUR APP ID",  
     	    airKey: "YOUR API KEY", 
             css: "NOAA3",                  // THIS MUST CONTAIN A CSS STYLE NAME
     	userlat: "xxxx", //MUST HAVE BOTH
             userlon: "xxxx"  //MUST HAVE BOTH
      }
          },
    
  • Yahoo Example:

      {
         module: 'MMM-NOAA3',
     position: 'top_left',
         config: {
     	    provider: "Yahoo",   
     	    airKey: "YOUR API KEY", 
             css: "NOAA3",                 // THIS MUST CONTAIN A CSS STYLE NAME 
     	userlat: "xxxx", //MUST HAVE BOTH
             userlon: "xxxx"  //MUST HAVE BOTH
     }
     },
    
  • Accuweather Example:

      {
         module: 'MMM-NOAA3',
     position: 'top_left',
         config: {
     	provider: "accuweather",   
     	airKey: "YOUR API KEY", 
             css: "NOAA3",                 // THIS MUST CONTAIN A CSS STYLE NAME 
     	userlat: "xxxx", //MUST HAVE BOTH
             userlon: "xxxx"  //MUST HAVE BOTH
     	zip: "11111" //MUST have valid zip Code
     }
     },	
    
  • Apixu Example:

      {
         module: 'MMM-NOAA3',
     position: 'top_left',
         config: {
     	provider: "accuweather",   
     	airKey: "YOUR API KEY", 
             css: "NOAA3",                 // THIS MUST CONTAIN A CSS STYLE NAME 
     	userlat: "xxxx", //MUST HAVE BOTH
             userlon: "xxxx"  //MUST HAVE BOTH
     	city: "elmira" //MUST have valid zip Code
     }
     },	
    

ISSUES

While we tried to make NOAA everything a weather module can be, not everyone will give out weather warnings with the free api key. Thanks to Wunderground going belly up on the users........ soooooo we suggest that you use this module for warnings->

https://github.com/LukeSkywalker92/MMM-DWD-WarnWeather

This is a weather warning module that will fit the bill nicely :)

UpdateInterval

Via the config you can change this..... currently it's set to 30 minutes like this -> updateInterval: 30 * 60 * 1000

You can add this to your config.js to change it if you'd like ... like this ->

{
    module: 'MMM-NOAA3',
    config: {
	    provider: "Yahoo",   
	    airKey: "YOUR API KEY", 
        css: "NOAA3",   // THIS MUST CONTAIN A CSS STYLE NAME
	    updateInterval: 15 * 60 * 1000, // every 15 minutes or whatever you choose but make sure you have an api that will allow that many calls per day!!! 
	   userlat: "xxxx", //MUST HAVE BOTH
           userlon: "xxxx"  //MUST HAVE BOTH 
}
},

CSS STYLES

  • You can choose one of 4 styles [colors] for NOAA3

NOAA1 (Color style #1)

NOAA2 (Color style #2)

NOAA3 (Color style #3)

NOAA4 (Changes colors automatically)

What's the mouseover?

Now when you mouse over current temp at the top you'll get your forecast..... When you mouseover on the 4 day forecast you'll get your forecast for that day ....(see NOAA4 example above)..

Custom CSS

What if I want just plain ole white?
Well just go to your css directory in MagicMirror2 and open up the css directory and edit your custom.css file like this!

 .MMM-NOAA3 .rheading {
    background-color:  #000;
    border: none;
    }
 .MMM-NOAA3  .divTableHead {
     color: #fff;
    }  

That will give you plain old white headings OR pick any color style you want!! :) Like this->

Start your mirror . . . enjoy!

The first time you run it .....you may get an error. It needs to find your lat/lon. The 1st time you run it is when it finds it.....after that it will work without issue :)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.