famous debug view - uses smoothie charts

debug.js

var F = require('./famous');
var extend = require('./extend');
var AppState = require('./app-state');

var Smoothie = require('smoothie');
var colors = require('random-colors')(10);

module.exports = extend(F.View, {
  constructor: function() {
    F.View.apply(this, arguments);

    var surface = new F.Surface({
      content: '<canvas id="smoothie-chart" width=300 height=100></canvas>'
    });

    var modifier = new F.Modifier({
      size: [300, 100],
      align: [0, 1.0],
      origin: [0, 1.0],
      transform: F.Transform.translate(0, 0, 10000)
    });

    this.add(modifier).add(surface);

    var chart = new Smoothie.SmoothieChart();

    var series = {};

    series.fps = new Smoothie.TimeSeries();
    if (process.env.DEBUG_FPS) {
      chart.addTimeSeries(series.fps, {
        lineWidth:2,
        strokeStyle:'#00ff00',
        fillStyle:'rgba(91,227,74,0.30)'
      });
      // Install render-handlers
      F.Engine.on('prerender', function() {
        series.fps.append(new Date().getTime(), F.Engine.getFPS()); 
      });
    }

    AppState.debug = function(name, value) {
      var opts = {lineWidth: 2, resetBounds: true};
      if (!series[name]) {
        series[name] = new Smoothie.TimeSeries();
        opts.strokeStyle = colors.pop();
        console.log(opts);
        chart.addTimeSeries(series[name], opts);
      }
      series[name].append(new Date().getTime(), value);
    };

    surface.on('deploy', function() {
      var canvas = document.getElementById('smoothie-chart');

      chart.streamTo(canvas, 1096);
    });
  }
});