dashbot

... is yet another live dashboard solution to monitor your software- or product development process. Use it for dashboards served by a i.e. Rasperry PI or as an intranet website.

A live demo can be found on heroku (The project files can be found here: github.com/hennr/arewegreen)

Build it

$ npm install
$ grunt

Run it locally

Follow Build it and then run any of these commands:

# via nginxere; available at https://github.com/sbstnmsch/nginxere
$ nginxere 
# via python
$ cd dist && python -m SimpleHTTPServer 8000
# or by serving ./dist with your favorite web server

Now point your browser to http://localhost:8000

Serve it

To serve the dashboard with nginx or another web server edit the layout.json to serve your needs and point your web server's root to dist/.

Notes on CORS

For polling other than local URLs (like in the example) start up your browser with disabled security, i.e. Chrome with:

$ open -a Google\ Chrome --args --disable-web-security

Lay it out

Dashbot's tiles are called visuals. These visuals are designed to fill your screen. Just edit your layout.json:

[
  [
    { /* Visual A: Row 1, Col 1 - Full width */ }
  ],
  [
    { /* Visual B: Row 2, Col 1 - 50% width */ },
    { /* Visual C: Row 2, Col 2 - 50% width */ }
  ],
  [
    { /* Visual D: Row 3, Col 1 - ~33% width */ },
    { /* Visual E: Row 3, Col 2 - ~33% width */ },
    { /* Visual F: Row 3, Col 3 - ~33% width */ }
  ]
]

Visuals

Choose from a growing set of visuals to serve your needs.

Number Visual Examples

The simplest way to display a number visual with a static value and title:

{
  "visual": "number",
  "title": "Ali Baba and the...",
  "value": 40
}

Make it poll external sources every 60secs:

{
  "visual": "number",
  "title": "Ali Baba and the...",
  "xhr": "/some/url/ali/baba.json",
  "xhrValue": "thieves.count",
  "xhrInterval": 60
}

... whereas the baba.json file has following dynamic content:

{
    "name": "Ali Baba",
    "thieves": {
      "count": 40,
      ...
    }
}

As you can see the value is evaluated against whatever you tell xhrValue to be. So there is no need to change your existing JSON-files.

If you want you can define a red/ green state:

{
  ...
  "red": "!=40",
  "green": "==40"
}

Display units

To display your values in a special unit just define unit:

{
  ...
  "unit": "percent"
}

or ...

{
  ...
  "unit": "bytes"
}

The bytes unit automatically calculates bytes, kilobytes and megabytes.

Graph Visual

The graph visual displays more than one value in a graph:

{
  "visual": "graph",
  "title": "Application Downloads",
  "value": [2302, 2658, 1987, 2001, 2160, 2852]
}

Enjoy polling external resources by adding xhr and xhrInterval parameters.

Weather Visual

Just for fun - getting the temperature in your city. Kindly provided by http://openweathermap.org

{
  "visual": "weather",
  "city": "berlin,de", /* name of your city or lat, lng */
  "unit": "c" /* `c` for celsius, or `f` for fahrenheit */
}

Getting data to it

There are two way to get your data displayed by dashbot.

Write json files to your disk

When serving the ./dist folder (as described in Serve it) you can find dummy json files in the ./dist/data folder which you can update/rewrite periodically e.g. by a cronjob.

Use an external server

Alternatively you can use an external server which serves json and let that server do the updates for you. This could look like this:

{ "visual": "number", "xhr": "https://api.github.com/users/hennr", "xhrValue": "id"}

Background images

All background images are downloaded from Wikimedia Commons and can be used in every single visual by defining "class": "<imageid>".

• imageid: comets
• imageid: milkyway
• imageid: night-sky
• imageid: skyline
• imageid: waterfall
• imageid: flower
• imageid: desert
• imageid: storm