chelsea/README.md

## README.md

      
      Raw
    
  
              README.md
            
          
    Description
Dashing widget to display a random cute picture from http://reddit.com/r/aww
The display of the widget is heavily based on the Image widget, however it does not prepend the src with 'assets' which allows for external images.
Settings
You can set a placeholder image in the event that reddit is down, or otherwise unresponse.  This is set at the top of random_aww.rb as follows:
placeholder = '/assets/nyantocat.gif'

This can be an image in /assets/images, or a full path to a remotely hosted image.
Usage
To use this widget, copy random_aww.html, random_aww.coffee, and random_aww.scss into the /widgets/random_aww directory. Put the random_aww.rb file in your /jobs folder.
To include the widget in a dashboard, add the following snippet to the dashboard layout file:
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="aww" data-view="RandomAww"></div>
</li>

Preview


## random_aww.coffee
class Dashing.RandomAww extends Dashing.Widget

  ready: ->
    # This is fired when the widget is done being rendered

  onData: (data) ->
    # Handle incoming data
    # You can access the html node of this widget with `@node`
    # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.

## random_aww.html
<div style="" class="image_container" data-bind-style="image"></div>

## random_aww.rb
require 'net/http'
require 'json'

placeholder = '/assets/nyantocat.gif'

SCHEDULER.every '60s', first_in: 0 do |job|
  http = Net::HTTP.new('www.reddit.com')
  response = http.request(Net::HTTP::Get.new("/r/aww.json"))
  json = JSON.parse(response.body)

  if json['data']['children'].count <= 0
    send_event('aww', image: placeholder)
  else
    urls = json['data']['children'].map{|child| child['data']['url'] }

    # Ensure we're linking directly to an image, not a gallery etc.
    valid_urls = urls.select{|url| url.downcase.end_with?('png', 'gif', 'jpg', 'jpeg')}
    send_event('aww', image: "background-image:url(#{valid_urls.sample(1).first})")
  end
end

## random_aww.scss
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #2d2e29;

// ----------------------------------------------------------------------------
// Widget-image styles
// ----------------------------------------------------------------------------
.widget-random-aww {

  background-color: $background-color;

  .image_container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

}
	class Dashing.RandomAww extends Dashing.Widget

	ready: ->
	# This is fired when the widget is done being rendered

	onData: (data) ->
	# Handle incoming data
	# You can access the html node of this widget with `@node`
	# Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.
	require 'net/http'
	require 'json'

	placeholder = '/assets/nyantocat.gif'

	SCHEDULER.every '60s', first_in: 0 do \|job\|
	http = Net::HTTP.new('www.reddit.com')
	response = http.request(Net::HTTP::Get.new("/r/aww.json"))
	json = JSON.parse(response.body)

	if json['data']['children'].count <= 0
	send_event('aww', image: placeholder)
	else
	urls = json['data']['children'].map{\|child\| child['data']['url'] }

	# Ensure we're linking directly to an image, not a gallery etc.
	valid_urls = urls.select{\|url\| url.downcase.end_with?('png', 'gif', 'jpg', 'jpeg')}
	send_event('aww', image: "background-image:url(#{valid_urls.sample(1).first})")
	end
	end
	// ----------------------------------------------------------------------------
	// Sass declarations
	// ----------------------------------------------------------------------------
	$background-color: #2d2e29;

	// ----------------------------------------------------------------------------
	// Widget-image styles
	// ----------------------------------------------------------------------------
	.widget-random-aww {

	background-color: $background-color;

	.image_container {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	}

	}