Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?


Simple Dashing widget that tracks time since a certain event. Time Since Last waits for request to be made to your instance of Dashing and will then reset the time since the last occurrence of whatever event you would like to track. An example could be the time since the last exception for one of your applications, or the time since the last accident on the workfloor (better keep that widget green)!

The widget was made by @hannesfostie for use @openminds. If you end up using this widget, please send me a tweet! I'd love to hear about it.


This widget requires HTML5's localStorage in order to keep track of the last time the event occurred in order for it to work across restarts and refreshes.

I also use Moment.js for easier date objects, and to display the time like a few seconds ago rather than something ugly. If you are not a fan of this, I'm sure you can figure out how to remove this. If not, get in touch!


To use this widget, copy time_since_last.html,, and time_since_last.scss into the /widgets/time_since_last directory.

To include the widget in a dashboard, add the following snippet to the dashboard layout file:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="time_since_last" data-view="TimeSinceLast" data-title="Time since last event" data-green-after="60"></div>


The data-green-after-attribute of the widget takes a number in seconds that have to pass in order for the widget to turn green. You can remove this, and the widget will default to turning the widget green after 100 seconds.

Making things look nice

I made one extra modification to the widget, but I decided to describe it here because it requires additional javascript libraries which you may or may not want to include. In any case this step is not really required, but I prefer to add it.

The second uses RainbowVis-JS to set the background color to a color between two (or more!) colors of your choosing. I changed the backgroundColor function to achieve this. In my case:

 backgroundColor: =>
    if ($(@node).data('green-after'))
      greenAfter = parseInt($(@node).data('green-after'))
      greenAfter = 100

    diff = moment().unix() - moment(@last_event).unix()
    if (diff > greenAfter)
      rainbow = new Rainbow().setSpectrum('#e84916', '#4d9e45');
      '#'+rainbow.colourAt(diff / greenAfter * 100)


Have tips on making this better? Please leave a comment and/or fork the gist. Sending me a tweet on Twitter is probably a good idea as well!

class Dashing.TimeSinceLast extends Dashing.Widget
ready: ->
@last_event = moment(localStorage.getItem(@get('id')+'_last_event'))
@last_event = moment() unless @last_event
setInterval(@startTime, 500)
onData: (data) ->
localStorage.setItem(@get('id')+'_last_event', moment())
@last_event = moment()
@set('time_past', moment(@last_event).fromNow())
$(@node).fadeOut().css('background-color', @backgroundColor).fadeIn()
startTime: =>
@set('time_past', moment(@last_event).fromNow())
$(@node).css('background-color', @backgroundColor())
backgroundColor: =>
if (@get('green-after'))
greenAfter = parseInt(@get('green-after'))
greenAfter = 100
diff = moment().unix() - moment(@last_event).unix()
if (diff > greenAfter)
<h1 data-bind="title"></h1>
<p data-bind="time_past"></p>
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #4d9e45;
// ----------------------------------------------------------------------------
// time_since_last styles
// ----------------------------------------------------------------------------
.widget-time-since_last {
background-color: $background-color;

I am confused how you get this to update?
I run this from the terminal:
curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "time_past": 440 }' http://localhost:3030/widgets/time_since_last

And get this:
Time since last

The color stays green...


hannesfostie commented May 6, 2013

@klsh you don't have to add the time_past parameter, all this widget requires is for data to be sent to it and it will reset the counter.

So if you do

curl -d '{ "auth_token": "YOUR_AUTH_TOKEN" }' http://localhost:3030/widgets/time_since_last

It will expect a widget with id 'time_since_last' like so:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="time_since_last" data-view="TimeSinceLast" data-title="Last error" data-green-after="5400"></div>

I hope that makes sense? Sorry for not getting back sooner, I must've missed the github notification

My widget isnt showing anything other than the title - should it show seconds/minutes or something?

I restarted the dashboard .. and i have run

curl -d '{ "auth_token": "SECRET_TOKEN" }' http://servername:3030/widgets/time_since_last

I have lots of other widgets working so its not likely anything with the install..

You mentioned moment.js - do I need to grab and install that? Any tips on that?

Answer: that was it .. i had to download (the full) moment.js and place it in the javascripts directory
Thanks for the help


hannesfostie commented Aug 8, 2013

@derwin12 very sorry I didn't spot your comment earlier, must've missed the notification. Glad you figured it out

Hi @hannesfostie,
When I refresh the page in my browser, the widget displays "last_past" as a few seconds ago. When I send data to the widget, the widget displays "last_past" as a few seconds ago. So how does the widget remember the "last_event" across restarts of dashing? It seems the widget is being reset everytime I refresh the page. It shouldn't be doing that. Please help. Thanks.

Hi @hannesfostie,
I figured it out. Thanks for the widget.

Hi @hannesfostie,
I forked your gist so that I could change the semantics of your widget.
The widget can now take a string as a date input and update "time_past" to reflect the time since that event. E.g.

curl -d '{"auth_token: "some_token", since-date: "2014-may-21", green-after: 10}' http://localhost:3030/widgets/time_since_last

Also, moment("some random string") is now deprecated. Therefore to get the equivalent functionality of moment interpreting a string as a date you need to moment(new Date("some random string")).format(). See moment/moment#1407

Thanks again for the gist.

@denhua, Could you share your modifications to allow the widget to take a string as a date?

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