Inspirational Quotes Widget for Dashing

README.md

##Preview

##Description

A simple Dashing widget to display a random inspirational quote. The widget is set to update every 4 hours, however this is easily configurable in the job file. The data is pulled from the free api provided by Forismatic.com.

##Installation

1. Create new widget folder under Dashing installation named 'quote'
2. Copy 'quote.html', 'quote.scss' and 'quote.coffee' into the newly created 'quote' folder
3. Copy 'quote.rb' file into 'jobs' folder
4. Copy 'quote.png' into 'assets\images' folder

To include the widget in a dashboard, add the following snippet to the dashboard layout:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="quote" data-view="Quote"></div>
</li>

quote.coffee

class Dashing.Quote extends Dashing.Widget

quote.html

<h1 class="title" data-bind="title"></h1>

<h3 data-bind="text"></h3>

<p class="more-info" data-bind="moreinfo"></p>

<p class="updated-at" data-bind="updatedAtMessage"></p>

quote.png

quote.rb

require 'net/http'
require 'uri'
require 'json'

server = "http://api.forismatic.com"

SCHEDULER.every '4h', :first_in => 0 do |job|

	url = URI.parse("#{server}/api/1.0/?method=getQuote&key=&format=json&lang=en")
	req = Net::HTTP::Get.new(url.to_s)
	res = Net::HTTP.start(url.host, url.port) {|http|
		http.request(req)
	}
	
	# Convert to JSON
	j = JSON[res.body]
	
	# Update the dashboard
	send_event("quote", { text: j['quoteText'], moreinfo: j['quoteAuthor'] })
	
end

quote.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #9c4274;

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

// ----------------------------------------------------------------------------
// Widget-quote styles
// ----------------------------------------------------------------------------
.widget-quote {
  background: $background-color url('/assets/quote.png') no-repeat 50% 50%;

  .title {
    color: $title-color;
  }

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

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

  h3 {
    position: relative;
    z-index: 1;
  }

  &.large h3 {
    font-size: 65px;
  }
}