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:
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...
And 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
|-adventStep 2: advent.coffee
Copy the following coffeescript into:
app
|
|-widgets
|-advent
|-advent.coffeeclass 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
- If it is, 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.gifEnsuring 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
