Now with play and pause buttons and favicons

tmostak · Sep 16, 2013 · 8fd928e · 8fd928e
1 parent 660f905
commit 8fd928e
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 22 deletions.
diff --git a/css/map.css b/css/map.css
@@ -283,12 +283,15 @@ div#numTokensText {
 }
 
 .anim-input {
-    webkit-box-shadow: 0 0 2px rgba(255,255,255,.25);
-    box-shadow: 0 0 2px rgba(255,255,255,.25);
+    //webkit-box-shadow: 0 0 2px rgba(50,50,50,.25);
+    //box-shadow: 0 0 2px rgba(100,100,100,.25);
+    position:relative;
     border: none!important;
-    margin-bottom: 12px;
+    margin: 3px 8px 3px 3px;
+    //border-radius: 3px;
+    //-webkit-background-clip: padding;
     background-size: cover;
-    padding:0px;
+    //padding:5px;
 }
 
 .social-button {
@@ -297,16 +300,23 @@ div#numTokensText {
     padding:0px;
 }
 
-#play-icon {
+.play-icon {
+    //border: none!important;
+    background: url('../img/play_green.png') no-repeat center center;
+    width:60px;
+    height:30px;
+}
+
+.pause-icon {
     border: none!important;
-    background: url('../img/play.png') no-repeat center center;
+    background: url('../img/pause_blue.png') no-repeat center center;
     width:60px;
     height:30px;
 }
 
-#pause-icon {
-    border: none!important;
-    background: url('../img/pause.png') no-repeat center center;
+.stop-icon {
+    //border: none!important;
+    background: url('../img/stop_pink.png') no-repeat center center;
     width:60px;
     height:30px;
 }

diff --git a/img/favicons/d_hyper_webtab.png b/img/favicons/d_hyper_webtab.png
diff --git a/img/favicons/heat_d_webtab2.png b/img/favicons/heat_d_webtab2.png
diff --git a/img/pause.png → img/pause_blue.png b/img/pause.png → img/pause_blue.png
diff --git a/img/play.png → img/play_green.png b/img/play.png → img/play_green.png
diff --git a/img/stop_pink.png b/img/stop_pink.png
diff --git a/index.html b/index.html
@@ -1,8 +1,11 @@
 <!DOCTYPE HTML>
 <html>
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>map</title>
+  <head profile="http://www.w3.org/2005/10/profile">
+    <link rel="icon" 
+          type="image/png" 
+          href="img/favicons/d_hyper_webtab.png">
+      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>Tweetmap</title>
     <link rel="stylesheet" href="css/map.css" />
     <link rel="stylesheet" href="css/chart.css" />
     <link rel="stylesheet" href="lib/js/jQCloud/jqcloud/jqcloud.css">
@@ -43,10 +46,10 @@
 
       </form>
     <div id="animControls">
-      <button id="play" class="anim-input" type="button" title="Play">
-      <div id="play-icon"></div>
-      <button id="pause" class="anim-input" type="button" title="Pause">
-	  <div id="pause-icon"></div>
+      <button id="play-pause" class="anim-input play-icon" type="button" title="Play/Pause">
+      <!--<div id="play-icon"></div>-->
+      <button id="stop" class="anim-input stop-icon" type="button" title="Stop">
+	  <!--<div id="stop-icon"></div>-->
     </div>
     <div id="social"> 
       <button id="twitter" class="social-button" type="button" title="Twitter">

diff --git a/js/map.js b/js/map.js
@@ -34,7 +34,7 @@ function init()
   HeatMap.init(heatLayer);
   Search.init(map, $('form#search'), $('input#termsInput'), $('input#userInput'), $('input#locationInput'));
   Settings.init(pointLayer, heatLayer, $('button#pointButton'), $('button#heatButton'));
-  Animation.init(pointLayer, heatLayer, $('button#play'), $('button#pause'));
+  Animation.init(pointLayer, heatLayer, $('button#play-pause'), $('button#stop'));
   //Settings.init($('button#gridSmall'), $('button#gridMedium'), $('button#gridLarge'));
   Chart.init($('div#chart'));
   MapD.start();

diff --git a/js/mapd.js b/js/mapd.js
@@ -894,23 +894,23 @@ var Animation = {
   heatLayer: null,
   //pointMap: null,
   //heatMap: null,
-  playButton: null,
+  playPauseButton: null,
   stopButton: null,
   playing: false,
-  numFrames: 60.0,
+  numFrames: 20.0,
   animStart: null,
   animEnd: null,
   step: null,
   numLayersLoaded: 0,
 
-  init: function(pointLayer, heatLayer, playButton, stopButton) {
+  init: function(pointLayer, heatLayer, playPauseButton, stopButton) {
     this.pointLayer = pointLayer;
     this.heatLayer = heatLayer;
     this.pointLayer.events.register("loadend", this, this.layerLoadEnd);
     this.heatLayer.events.register("loadend", this, this.layerLoadEnd);
-    this.playButton = playButton;
+    this.playPauseButton = playPauseButton;
     this.stopButton = stopButton;
-    $(this.playButton).click($.proxy(this.playFunc, this));
+    $(this.playPauseButton).click($.proxy(this.playFunc, this));
     $(this.stopButton).click($.proxy(this.stopFunc, this));
   },
 
@@ -946,6 +946,7 @@ var Animation = {
     console.log("play");
     if (this.playing == false) {
       this.playing = true;
+      this.playPauseButton.removeClass("play-icon").addClass("pause-icon");
       if (this.animStart == null) { // won't trigger if paused
         this.animStart = this.mapd.timestart;
         this.animEnd = this.mapd.timeend;
@@ -954,6 +955,11 @@ var Animation = {
         this.frameEnd = this.animStart + this.step;
       }
       this.animFunc();
+
+    }
+    else {
+      this.playing = false;
+      this.playPauseButton.removeClass("pause-icon").addClass("play-icon");
     }
   },
 
@@ -964,6 +970,8 @@ var Animation = {
     this.animStep = null;
     this.numLayersLoaded = 0;
     this.playing = false;
+    this.playPauseButton.removeClass("pause-icon").addClass("play-icon");
+    //this.playPauseButton.attr("id", "play-icon");
     this.mapd.services.pointmap.reload();
     this.mapd.services.heatmap.reload();
   }