Forecast widget and job for Kitto

README.md

Forecast Widget and Job Powered By Forecast.io

This package includes a job to pull forecasts from the Forecast.io API and a widget to display the forecast information.

Install

1. Install into your dashboard with mix kitto.install --gist 229b76b15eae45ee9f5cc1e5d62a40eb
2. Register for a DarkSky API key and set it into your applications environment in config/config.exs:

config :my_dashboard,
  forecastio_api_key: "..."

3. Update the api_key/0 method in forecast_io.ex#L31 with the correct accessor to the applications environment
4. Update the location variable in forecast.exs#L11 with the correct GPS coordinated to access the forecast for

Usage

The forecast widget works in a 1x1 widget:

<div data-widget="Forecast"
     data-source="forecast"
     data-title="Forecast"
     data-moreinfo="Powered by Forecast.io"></div>

forecast.exs

# Broadcasts the forecast every 10 minutes for the Forecast widget.
#
# Setup:
#
# Update the location variable in the job with the GPS coordinates to get the
# forecast for.

use Kitto.Job.DSL

job :forecast, every: {10, :minutes} do
  location = Application.get_env(:my_dashboard, :forecast_location, "41.454810, -72.818426")

  forecast = ForecastIO.get(location)
  |> ForecastIO.to_dashboard

  broadcast! forecast
end

forecast.js

import React from 'react';
import {Widget, Helpers} from 'kitto';

import './forecast.scss';

export class Forecast extends Widget {
  render() {
    return (
      <div className={this.props.className}>
        <h1 className="title">{this.props.title}</h1>
        <h2 className="temp">{this.state.temperature}</h2>
        <p className="summary">{this.state.summary}</p>
        <p className="more-info">{this.props.moreinfo}</p>
        <p className="updated-at">{this.updatedAt(this.state.updated_at)}</p>
      </div>
    );
  }
}

Widget.mount(Forecast);
export default Forecast;

forecast.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #ec3c6b;
$value-color:       #fff;

$title-color:       rgba(255, 255, 255, 0.7);
$label-color:       rgba(255, 255, 255, 0.7);
$moreinfo-color:    rgba(255, 255, 255, 0.7);

// ----------------------------------------------------------------------------
// Widget-list styles
// ----------------------------------------------------------------------------
.widget-forecast {
  background-color: $background-color;

  .title {
    color: $title-color;
  }

  .more-info {
    color: $moreinfo-color;
  }

  .updated-at {
    color: rgba(0, 0, 0, 0.3);
  }
}

forecast_io.ex

defmodule ForecastIO do
  @moduledoc """
  API client for getting forecast from Forecast.io API.

  ## Setup

  Before you can interact with the API, you'll need a
  [DarkSky API key](https://darksky.net/dev/). Set the API key in the app
  environment and modify the api_key/0 method to pull from the correct
  environment.
  """

  @units "us"

  def get(location) do
    "https://api.forecast.io/forecast/#{api_key()}/#{URI.encode(location)}?units=#{@units}"
    |> URI.parse
    |> HTTPoison.get!
    |> Map.get(:body)
    |> Poison.decode!
  end

  def to_dashboard(forecast) do
    %{
      temperature: "#{forecast["currently"]["temperature"] |> Float.round |> trunc}º",
      summary: forecast["minutely"]["summary"]
    }
  end

  defp api_key, do: Application.get_env(:my_dashboard, :forecastio_api_key)
end