Added play/pause button

5c362e1e · Kjetil Thuen · fc7d1f62 · 5c362e1e · 5c362e1e
Commit 5c362e1e authored Feb 12, 2014 by Kjetil Thuen
Hide whitespace changes
Inline Side-by-side

Showing with 26 additions and 12 deletions

src/app/timebars.coffee src/app/timebars.coffee +21 -10

www/index.html www/index.html +5 -2

No files found.
--- a/src/app/timebars.coffee
+++ b/src/app/timebars.coffee
@@ -5,6 +5,7 @@ chartWidth = -> 900
 chartHeight = -> 500
 numBars = -> 100
 speed = -> 100
+margin = -> 10

 next = (prev) ->
  prv = (if prev?rvalue then prev.rvalue else 25)
@@ -26,7 +27,6 @@ y = d3.scale.linear()
  .rangeRound [ 0, chartHeight() ]

 addBar = (newBar) ->
-  console.log "Adding a bar"
  barGroup = newBar.append "g"
    .attr "class", "valuepoint"
    .attr "transform", (d, i) ->
@@ -34,13 +34,13 @@ addBar = (newBar) ->

  barGroup.append "rect"
    .attr "class", "right"
-    .attr "x", chartWidth() / 2
+    .attr "x", chartWidth() / 2 - margin()
    .attr "width", (d) -> x d.rvalue
    .attr "height", barThickness()

  barGroup.append "rect"
    .attr "class", "left"
-    .attr "x", (d) -> (chartWidth() / 2) - x d.lvalue
+    .attr "x", (d) -> (chartWidth() / 2) - x d.lvalue + margin()
    .attr "width", (d) -> x d.lvalue
    .attr "height", barThickness()

@@ -74,16 +74,27 @@ setupChart = (containerId, data) ->
 updateData = (data) ->
  lodash.rest(lodash.clone(data).concat(next(lodash.last(data))))

+# State (data and intervals) stored in the window object
 window.initTimeBars = (containerId) ->
-  window._ = lodash
  window.data = d3.range numBars()
    .map ->
      next lodash.last(window.data)

  setupChart(containerId, window.data)
-
-  setInterval ->
-    data = updateData window.data
-    updateChart(containerId, data)
-    window.data = data
-  , speed()
+  updateChart(containerId, data)
+
+window.animateBarChart = (containerId) ->
+  if window.timeBarAnim?
+    console.log("stopp")
+    clearInterval(window.timeBarAnim)
+    window.timeBarAnim = undefined
+    document.getElementById("playBtn").innerHTML = "<i class='fa fa-play'></i>"
+  else
+    console.log("start")
+    window.timeBarAnim = setInterval ->
+      data = updateData window.data
+      updateChart(containerId, data)
+      window.data = data
+    , speed()
+    document.getElementById("playBtn").innerHTML = "<i class='fa fa-pause'></i>"
+  undefined
--- a/www/index.html
+++ b/www/index.html
@@ -3,8 +3,8 @@
  <head>
    <title>Nesstar backed animated barcharts</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
-    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
-    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
    <link href="css/timebars.css" rel="stylesheet">
    <script src="js/timebars.js"></script>
  </head>
@@ -17,6 +17,9 @@
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <section id="content"> </section>
+    <button id="playBtn" class="btn btn-primary" onclick="window.animateBarChart('#content')">
+      <i class="fa fa-play"></i>
+    </button>
    <script>
      window.initTimeBars("#content");
    </script>