This site uses cookies. Continue to use the site as normal if you are happy with this, or read more about cookies and how to manage them.

×

This site uses cookies. Continue to use the site as normal if you are happy with this, or read more about cookies and how to manage them.

×

Creating a Dashing Advent calendar widget

We here at Black Pepper make use of information radiators - TV screens put up on the walls of our offices to tell us information about our projects (and other useful things).

  • Are our projects building ok?
  • Are any tests failing?
  • How are the local trains running?
  • What are the local road conditions?

We built them using a project called Dashing, provided by Shopify, and they look like this:

Standard Radiator

Of course, all our builds are currently passing (if any are in a failed state the panels are displayed in red). They don’t usually stay red for very long though :)

As it’s Christmas time, we thought it might be nice to see if we could add a bit of festive cheer in the form of an advent panel, which would:

  • If the date is not Dec 1st - Dec 24th
    • Display our company logo
  • If the date is Dec 1st to Dec 24th
    • Display the date
    • Display an advent image (a different one each day)
    • Have some snow in the background

And it was delightfully simple to achieve this. With a little css, coffeescript, html, and an excellent tutorial on designshack on making a page snow, we did it.

Here’s what it looks like in Advent mode...

Advent Mode Cropped

And non-advent mode...

Non Advent Mode

The Dashing Widget Recipe

In the dashing project, a simple widget is contained in a single folder in the ‘widgets’ directory. Each widget is made up of three main files:

  • A coffeescript file
  • An HTML template
  • An SCSS file

Step 1: Create the widget folder

The first step is in creating the advent widget is to create the containing folder:

app
 |
 |-widgets
      |-advent

Step 2: advent.coffee

Copy the following coffeescript into:

app
 |
 |-widgets
      |-advent
          |-advent.coffee
class Dashing.Advent extends Dashing.Widget

  @accessor 'isAdventTime', ->
    date = new Date();
    date.getMonth() == 11 & date.getDate() < 25   ready: ->
      if @get('isAdventTime')
        dayOfMonth = new Date().getDate();
        $(@node).find('img').attr("src", '/assets/' + dayOfMonth + '.gif');
        $(@node).find('.date').text('December ' + dayOfMonth);
        $(@node).find('.date').addClass('december');
        $(@node).addClass('december');
      else
        $(@node).find('img').attr('src', '/assets/logo.png');

When the dashing page loads, the advent panel will:

  • Determine if it’s an advent day.
    • If it is, it will:
      • Set the image to be displayed as /assets/n.gif where n is the number of the day current of the month, e.g. /assets/13.gif
      • Add css class december which sets the background to black, and adds snow
      • Sets the text to be displayed as ‘December n’, where n is the current month day
    • If it is not, it will

Set the image to be /assets/logo.png (where logo.png is your company logo)

Step 3: advent.html

app
 |
 |-widgets
      |-advent
            |-advent.coffee
            |-advent.html
<h1 class="date"></h1>
<img src="" />

This simply contains placeholder elements for the current date, and the image to be displayed.

Step 4: advent.scss

Copy the following scss into:

app
 |
 |-widgets
      |-advent
            |-advent.coffee
            |-advent.html
            |-advent.scss
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #FFFFFF;

// ----------------------------------------------------------------------------
// Widget-advent styles
// ----------------------------------------------------------------------------
.widget-advent {

  background-color: $background-color;
  vertical-align: top;

  .date {
    color:#222222;
  }
}

.december {
  background-color: #222222 !important;
  color: #FFFFFF !important;
  background-image: url('/assets/snow1.png'), url('/assets/snow2.png'), url('/assets/snow3.png');
  -webkit-animation: snow 20s linear infinite;
  -moz-animation: snow 20s linear infinite;
  -ms-animation: snow 20s linear infinite;
  animation: snow 20s linear infinite;
}

@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-color:#b4cfe0;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px; background-color:#6b92b9;}
}

@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

This contains basic styling for the date text, and the snow!

Step 5: Add the assets

app
 |
assets
    |-snow1.png
    |-snow2.png
    |-snow3.png
    |-snow4.png
    |-logo.png
    |-1.gif
    |-2.gif
    |...
    |-24.gif

Ensuring you add an n.gif image for each advent day in December, 1.gif to 24.gif.

It depends on your screen size and set-up, but we found gif images 250px in height worked perfectly.

Creating using the designshack tutorial, you can download the snow images from:

Step 6: Add the panel to your dashboard!

E.g.

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
    <div data-view="Advent"></div>
</li>

The source is now available on github: https://github.com/BlackPepperSoftware/dashing-advent