An example project that uses the dashboardScaffold library.

Try it out!

When you click on a color or number in the configurator on the left, an interactive editor (color chooser or slider) pops up. When you manipulate the configuration, it is propagated through the dashboard layout to the component visualizations instantly. When you edit properties of the visualizations through their own UI interactions, the configuration JSON is instantly updated.

A static file server is included for development. To start the server:

• Make sure you have Node.js and Express installed
  • npm install express
• Run node server.js

There are two pages to check out:

• index.html shows the dashboard with an editor panel
• dashboard.html shows the dashboard full-screen with no editor

There are two example visualization modules:

• vis A simple colored rectangle with an X and some text on it.
  • Clicking the background changes its color randomly. Notice how this causes the configuration JSON to update.
  • Clicking the X causes its color to update randomly.
  • Dragging the X changes its thickness.
• map An example that renders a Leaflet map.
  • Changing the "tileProvider" option dynamically changes the tiles shown on the map (see Leaflet-Providers).

Enjoy!

I'd love to hear your feedback at curran.kelleher@gmail.com

Curran Kelleher 8/6/2013