Weather Underground Forecast (wuforecast)

  • This is my first attempt at a full-fledged module for Magic Mirror, so please let me know your feedback or ideas for additional functionality. Also, if I did the GitHub wrong, let me know!

    This is modified from the weatherforecast module. It uses Weather Underground as the data source and also has the additional feature of providing the chance of precipitation if it is above 0%.
    alt text

    The color is not default, but can be modified through your custom.css, for example the above screenshot is set with:

    .wuforecast .max-temp {
      font-size: 27px;
      line-height: 27px;
      color: #f66;
    .wuforecast .min-temp {
      font-size: 27px;
      line-height: 27px;
      color: #0ff;
    .wuforecast .weather-icon {
      font-size: 27px;
      line-height: 27px;
      color: #f93;
    .wuforecast .day {
      font-size: 27px;
      line-height: 27px;
      color: #6f6;

  • BTW, some modifications I’m planning on:

    • Remove the hardcoded icon sizes (I forgot I had that in there).
    • Add option to show POP for all %'s (including 0)
    • Add option to select specific icon sets Underground Icon Sets
    • Add option to display predicted rain/snow amounts for the day

    There’s other data available from the API (written forecasts, wind speed predictions, humidity predictions, etc), so if there’s interest in finding ways to display that, let me know.

  • UPDATED MODULE - “Git” module here

    @desq OK, added an option for the degree symbol (I have a small screen and not a mirror, so I don’t like it on mine). I also am now using the “weathericons” from the standard module. 🙂

    • Option (degreeSym) to display/not display degree symbol
    • Icon set has been changed to “weathericons”
    • Removed the hard-coded resize on icons (forgot to remove during testing)
    • Fixed default cell padding for readability (you can customize through custom.css)

    Note: module is standard grey colors, custom colorization such as the screenshot can be done through custom.css
    alt text

  • Moderator

    For troubleshooting or HOWTO questions, please post in the Troubleshooting thread:

  • @mattlugar Can you share your custom css as well? Thanks!