BlocNotes

Notepad of a tinker, maker, hacker or whatever you call it :)

From Dashing.io to Dashing-js

I recently discovered Dashing.io, which is an easy to use dashboard, which seems to fit my needs :

  • Easy to install
  • Useful widgets available, easy to add new ones
  • Generation of templates for dashboards, jobs, widgets
  • Great design (subjective), some friends find it too close to Windows 8, but I don't use it, so...
  • New data can be pushed via internal jobs or external API, by calling an URL
  • Tile based interface with drag&drop re-arranging (based on Gridster)
  • Auto-adaptation to smartphone/tablets (Responsive)

From my point of view, the major drawback is that it use Ruby language. I have nothing about it, I just did not want to add another 'technology' to this project, which use already lots of things.
So i tried it, then I discovered Dashing-js: a Node.js port.

Dashing-js

The port is not as well documented as the Ruby version, so I will share my experience:

Run on a sub-directory (helpful for reverse proxy)

The easiest way to add it on /dashing is:

  • In file node_modules/dashing-js/lib/dashing.js
    Add app.use('/dashing', app.router); (L75) inside app.configure(function() { } block
  • In file assets/javascripts/application.coffee
    Add Batman.config.viewPrefix = 'dashing/views' after #= require_tree ../../widgets,

Stop a dashboard launch as daemon

If you start your dashboard in background with dashing-js start, dashing-js stop will not work, you must use kill PID command.
I hope to have some time to explore the code and correct the bug/implement it soon.

Set default dashboard

Edit the file server.js, then line dashing.default_dashboard = 'subPathIfNeeded/sample';.

Save the current tile layout

  • Drag the tiles
  • Click on the 'Save this layout' button
  • Copy the code
  • Paste it in dashboard/yourDashboard.jade respecting the following example indentation, and the . (dot) after script(type="text/javascript"). Done !
extends layout

block title  
  | Dashboard's title

block content  
  div.gridster
    ul
      li(data-row='1', data-col='1', data-sizex='4', data-sizey='2')
        div(data-id='welcome', data-view='Text', data-title='Hello', data-text='This is your shiny new dashboard.', data-moreinfo='Protip: You can drag the widgets around!')
    center
      div(style='font-size: 12px') Try this: curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "text": "Hey, Look what I can do!" }' -H "Content-Type: application/json" http://#{request.header('host')}/widgets/we$


  script(type="text/javascript").
    $(function() { Dashing.gridsterLayout('[{"col":1,"row":1,"size_x":4,"size_y":2} [...] }]') })