Wavegirls Dashing widget

README.md

Wavegirls

Description

Dashing widget to display random girls. Check out this video to see how it works.

Installation

1. Install Wavegirls widget

The files wavegirls.coffee, wavegirls.html and wavegirls.scss go in the /widget/wavegirls directory. The wavegirls.rb goes in the /jobs directory.

Otherwise you can install this plugin typing:

dashing install GIST_ID

2. Add the following span right before gridster div in your dashingboard.erb file:

<span id="wavegirls-img" data-id="wavegirls" data-view="Wavegirls" data-title="wavegirls" style="padding: 0px"></span>

<div class="gridster">
    ...

3. Dashing API

To be able to communicate with the widget we need an API (reasons explained below). Add this block to config.ru after configure section:

get '/api/:widget/:command' do
    widget = params[:widget]
    send_event(widget, params)

    200
end

Usage

Widget has 3 modes:

• default (hide pictures)
• friday (show pictures in random widgets)
• fullscreen (show pictures in fullscreen)

By default it won't show you anything! This is because it probably would distract you from your work. Thus, we need a way control it. Luckily, we can now use the widget's api.

API

/api/wavegirls/show?mode={mode} - enable given mode

Example:

curl 'http://localhost:3030/api/wavegirls/show?mode=friday'

Note: if you are using Github's Hubot, take a look at this script. It provides hubot commands to control wavegirls widget.

Additional configuration

By default, widget will be showing pictures randomly using all the dashboard widgets. If you want to prevent some of the widgets showing the pictures, add their ids to excluded_dash_ids (see wavegirls.coffee).

Terms of use

You are free to use, modify or build something new on the top of this widget. However, I want to warn you, that it is using http://wavegirls.net service, which content suitable only for adults ages 18 and up. Make sure you've read the terms of Wavegirls service. By using this widget you agree with the terms of Wavegirls service.

wavegirls.coffee

class Dashing.Wavegirls extends Dashing.Widget

  ready: ->
    @preloadGirls()
    @currentIndex = 0
    @dashes = []
    @mode = 'default'

    @load_dashes()
    setTimeout(@load_dashes, 3000)

    @girlElem = $(@node).find('.wavegirl-container')
    @nextGirl()
    @startCarousel()

  # Returns dashes which can be used for showing images
  load_dashes: =>
    @dashes = []

    for widget_name in Object.getOwnPropertyNames(Dashing.widgets)
      continue if widget_name == "wavegirls"
      for dash in Dashing.widgets[widget_name]
        # specify widgets you do not want to show the images
        excluded_dash_ids = []
        if dash.id not in excluded_dash_ids
          @dashes.push dash.node

  fryGirl: (e) ->
    girl = {}
    girl.image = e.target
    girl.ratio = girl.image.naturalWidth / girl.image.naturalHeight
    @loadedGirlsArray.push girl
    girl.resetCss = ->
      $(this.image).css
        'maxWidth': 'none'
        'maxHeight': 'none'
        'width': 'auto'
        'height': 'auto'
        'marginLeft': 0
        'marginTop': 0
    girl.pull = (dash, mode, girlElem) ->
      if (mode == 'fullscreen')
        $('.gridster').fadeOut =>
          $('#wavegirls-img').fadeIn()
          image = this.image

          $(image).css
            'height': '100%'
            'width': 'auto'

          $("#wavegirls-img").append girlElem
      else
        $('.gridster').fadeIn =>
          this.resetCss
          dashRatio = parseInt(dash.width()) / parseInt(dash.height())
          if dashRatio > girl.ratio
            $(this.image).css
              'width': dash.outerWidth() + 'px'
          else
            $(this.image).css
              'height': dash.outerHeight() + 'px'
          if dashRatio > girl.ratio
            $(this.image).css
              'marginTop': '-' + (((dash.outerWidth() / girl.ratio) - dash.outerHeight()) / 2) + 'px'
          else
            $(this.image).css
              'marginLeft': '-' + (((dash.outerHeight() / girl.ratio) - dash.outerWidth()) / 2) + 'px'
          dash.append girlElem

  preloadGirls: ->
    @preloadGirlsArray = []
    @loadedGirlsArray = []
    for girlUrl in @get('wavegirls')
      @preloadGirlsArray.push(
        $(new Image()).attr({'src': girlUrl}).one("load", $.proxy(@fryGirl, @)).each ->
          $(this).load() if @complete
      )

  onData: (data) ->
    if data.wavegirls
      @currentIndex = 0
      @preloadGirls()
    if data.mode
      @mode = data.mode

  startCarousel: ->
    setInterval(@nextGirl, 3000)

  nextGirl: =>
    @girls = @loadedGirlsArray
    if @girls.length > 0
      @girlElem.fadeOut =>
        @girlElem.detach()
        if @mode == 'default'
          $('.gridster').fadeIn()
          return

        @currentIndex = (@currentIndex + 1) % @girls.length
        girl = @girls[@currentIndex]
        dash = $(@dashes[Math.floor(Math.random() * @dashes.length)])
        @girlElem.find('img:last').detach()
        girl.pull(dash, @mode, @girlElem)
        @girlElem.append girl.image
        @girlElem.fadeIn()

wavegirls.html

<div class="wavegirl-container">
  <img data-bind-src="current_wavegirl" />
</div>

wavegirls.rb

require 'net/http'
require 'json'

WAVEGIRLS_URI = URI.parse("http://wavegirls.net/")

def wavegirls_json(page)
  uri = WAVEGIRLS_URI.dup
  uri.path = '/api/photos'
  uri.query = "page=#{page}"
  response = Net::HTTP.get(uri)
  JSON.parse(response)
end

def wavegirls(page)
  json = wavegirls_json(page)
  json.map do |girl|
    uri = WAVEGIRLS_URI.dup
    uri.path = girl["image"]["url"]
    uri
  end
end

page = 1

SCHEDULER.every '1m', :first_in => 0 do |job|
  puts "PAGE #{page}"
  girls = wavegirls(page)

  if girls.empty?
    page = 1
    girls = wavegirls(page)
  end

  send_event("wavegirls", {page: page, wavegirls: girls})
  page = page + 1
end

wavegirls.scss

// ----------------------------------------------------------------------------
// Widget-wavegirl styles
// ----------------------------------------------------------------------------
.wavegirl-container {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  display: table-cell;
  width: 100%;
  height: 100%;
  img {
    max-width: none !important;
  }
}

#wavegirls-img {
  img {
    max-width: none !important;
  }
}

is wavegirls.net down?