Skip to content

Instantly share code, notes, and snippets.

@mr-deamon
Last active Sep 1, 2016
Embed
What would you like to do?
Fridaybeer for Dashing
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);
<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 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>
  1. 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

// ----------------------------------------------------------------------------
// 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;
}
@MarkDH

This comment has been minimized.

Copy link

@MarkDH MarkDH commented Sep 1, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment