Fridaybeer for Dashing

fridaybeer.coffee

class Dashing.Fridaybeer extends Dashing.Widget

  ready: ->
    $('.beer').hide()
    # This is fired when the widget is done being rendered

  onData: (data) ->
    if data.beer is "no"
      $('.beer').hide()
      $('.pour').height('0px')
      $('#liquid').height('0px')
      $('.beer-foam').css("bottom", '10px')
    else
      $('.beer').show()
      $('.pour') #Pour Me Another Drink, Bartender!
        .delay(2000)
        .animate({
          height: '360px'
          }, 1500)
        .delay(1600)
        .slideUp(500);

      $('#liquid') # I Said Fill 'Er Up!
        .delay(3400)
        .animate({
          height: '170px'
        }, 2500);

      $('.beer-foam') # Keep that Foam Rollin' Toward the Top! Yahooo!
        .delay(3400)
        .animate({
          bottom: '200px'
        }, 2500);

fridaybeer.html

<div id="container">
  <div class="pour"></div>
  <div id="beaker">
    <div class="beer-foam">
      <div class="foam-1"></div>
      <div class="foam-2"></div>
      <div class="foam-3"></div>
      <div class="foam-4"></div>
      <div class="foam-5"></div>
      <div class="foam-6"></div>
      <div class="foam-7"></div>
    </div>

    <div id="liquid">

      <div class="bubble bubble1"></div>
      <div class="bubble bubble2"></div>
      <div class="bubble bubble3"></div>
      <div class="bubble bubble4"></div>
      <div class="bubble bubble5"></div>
    </div>
  </div>
</div>

Fridaybeer.md

#FridayBeer for Dashing ##Description Show your need for a friday-afternoon beer to your office-mates. ##Usage

1. Download Gist
2. Add Widget to your Dashboard:

<li data-row="1" data-col="1" data-sizex="8" data-sizey="6" style="z-index: 99999999">
  <div data-id="beer" data-view="Fridaybeer"></div>
</li>

3. Add this to your Dashing.gridsterLayout:

{"col":1,"row":1,"size_x":8,"size_y":6}

(Make sure you change your sizex/sizey and size_x/size_y to the maximum of your board) 4. Toggle Beer with

On: curl -i -d '{ "auth_token": "YOUR_AUTH_TOKEN", "beer": "yes"}' http://localhost:3030/widgets/beer
Off: curl -i -d '{ "auth_token": "YOUR_AUTH_TOKEN", "beer": "no"}' http://localhost:3030/widgets/beer

##Credits: HTML/CSS by TimRuby

fridaybeer.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------

$background-color: rgba(14, 131, 205, 0.8);

// ----------------------------------------------------------------------------
// Widget-text styles
// ----------------------------------------------------------------------------

.widget-fridaybeer {
  background-color: $background-color;
  @import url(http://fonts.googleapis.com/css?family=Lato:700,900);

  #container {
    height: 370px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    top: -20px;
    width: 248px;
  }

  #container div { position: absolute; }

  .pour {
    position: absolute;
    left: 45%;
    width: 20px;
    height: 0px;
    background-color: #edaf32;
    border-radius: 10px
  }

  #beaker {
    border: 10px solid #FFF;
    border-top: 0;
    border-radius: 0 0 30px 30px;
    height: 200px;
    left: 14px;
    bottom: 0;
    width: 200px;
  }

  #beaker:before,
  #beaker:after {
    border: 10px solid #FFF;
    border-bottom: 0;
    border-radius: 30px 30px 0 0;
    content: '';
    height: 30px;
    position: absolute;
    top: -40px;
    width: 30px;
  }

  #beaker:before { left: -49px; }
  #beaker:after { right: -49px; }

  #liquid {
    background-color: #edaf32;
    border: 10px solid #edaf32;
    border-radius: 0 0 20px 20px;
    bottom: 0;
    height: 0px;
    overflow: hidden;
    width: 180px;
  }

  #liquid:after {
    background-color: rgba(255, 255, 255, 0.25);
    bottom: -10px;
    content: '';
    height: 200px;
    left: -40px;
    position: absolute;
    transform: rotate(30deg);
    -webkit-transform: rotate(15deg);
    width: 110px;
  }

  /* Foam */

  .beer-foam {
    position: absolute;
    bottom: 10px;
  }

  .foam-1, .foam-2, .foam-3, .foam-4,
  .foam-5, .foam-6, .foam-7 {
    float: left;
    position: absolute;
    z-index: 999;
    width: 50px;
    height: 50px;
    border-radius: 30px;
    background-color: #fefefe;
  }
  .foam-1 {
    top: -30px;
    left: -10px;
  }
  .foam-2 {
    top: -35px;
    left: 20px;
  }
  .foam-3 {
    top: -25px;
    left: 50px;
  }
  .foam-4 {
    top: -35px;
    left: 80px;
  }
  .foam-5 {
    top: -30px;
    left: 110px;
  }
  .foam-6 {
    top: -20px;
    left: 140px;
  }
  .foam-7 {
    top: -30px;
    left: 160px;
  }
}
#liquid .bubble {
  -webkit-animation-name: bubble;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  background-color: rgba(255, 255, 255, 0.2);
  bottom: 0;
  border-radius: 10px;
  height: 20px;
  width: 20px;
}

@-webkit-keyframes bubble {
  0% { bottom: 0; }

   50% {
     background-color: rgba(255, 255, 255, 0.2);
      bottom: 80px;
   }

   100% {
     background-color: rgba(255, 255, 255, 0);
      bottom: 160px;
   }
}

.bubble1 {
  left: 10px;
  -webkit-animation-delay: 1000ms;
  -webkit-animation-duration: 1000ms;
}

.bubble2 {
  left: 50px;
  -webkit-animation-delay: 700ms;
  -webkit-animation-duration: 1100ms;
}

.bubble3 {
  left: 100px;
  -webkit-animation-delay: 1200ms;
  -webkit-animation-duration: 1300ms;
}

.bubble4 {
  left: 130px;
  -webkit-animation-delay: 1100ms;
  -webkit-animation-duration: 700ms;
}

.bubble5 {
  left: 170px;
  -webkit-animation-delay: 1300ms;
  -webkit-animation-duration: 800ms;
}

Hi, really great widget, everybody at the office loves it :D..

I am not very good at writing my own widgets, so i thought the you maybe cold help me?

• I need a widget like this one, but instead of the animated beer, i just need a static text on a colored background that covers the full screen, just like the "Fridaybeer" widget. The text is only 1 or 2 words. So the text has to be large. I would like to turn it on and off with a curl-command..

I hope you have the time, and a willing to help :)

Regards Mark