Angular Skycons

Recently I spent some time and added a weather page to my home server project by integrating with the Forecast.io API. I really liked their animated Skycons too and I wanted to make them part of the interface. Since the front end of my server app runs AngularJS, it made perfect sense to create my own custom directive.

Angular-Skycons removes the need to touch any of the jQuery elements that power the animated Skycons. All the user needs to do is focus on the data they want to display. Here's a simple example of the controller/template usage:

Example Controller

var cMod = angular.module( 'myApp.controllers', [] );

cMod.controller( 'WeatherCtrl', function ( $scope ) {

/*
    This example is over simplified to demonstrate the relationship
    between the 'controller' and the 'template' with regard to loading
    the 'icon' value. Hopefully, you will be loading your controller with
    data from an actual API response. :)
*/
$scope.CurrentWeather = {
    forecast: {
        icon: "partly-cloudy-night",
        ...
    }
};

} );

Example Template

<skycon data-preserve-html-node="true" icon="CurrentWeather.forecast.icon" color="blue" size="100"></skycon>

Weatherman.io

Recently one of the Android developers I work with launched a weather app called RainCheck, powered by Forecast.io data. It got me thinking. What could I do with that weather API? Given all the time I've spent building Holly, my home server project, adding some local weather data component seemed like the perfect fit.

Holly's web app runs on Node.js, and I found a couple of existing API wrapper modules listed in the Forecast.io developer documentation. I spent a little time with each. They were both nice, with slightly different implementations and interfaces. After seeing how two other developers let a part of their personality come through while solving a problem, I decided I'd try my hand at it too: weatherman.io

Install it

npm install weatherman.io

Create your weatherman

var weatherman = require( 'weatherman.io' );

var alRoker = weatherman( 'your-forecast-io-api-key' );

Send the weatherman on location

var latitude = 41.8854710;
var longitude = -87.6430260;

alRoker.goOnLocation( latitude, longitude );

Have the weatherman do the forecast

alRoker.doForecast( function ( err, weatherReport ) {
    if ( err ) {
        // handle any errors
    }
    // do something with the weatherReport
    // it contains all the data you were 
    // expecting from Forecast.io
} );