Skip to content
This repository
Browse code

builtin timer in presenter view

  • Loading branch information...
commit 3438dd0cd3da900e89eac0f87b612c6763f758de 1 parent 3f10cb7
Scott Chacon authored September 12, 2011
15  TODO.txt
@@ -3,21 +3,16 @@ TODO
3 3
 
4 4
 ==
5 5
 
6  
-- test suite
7  
-- static, heroku, github, pdf, presenter, normal all working
8 6
 - pdf with notes
9  
-- clean up js
10  
-- clean up ruby
11 7
 - presenter view
12 8
   - timer (time left, percent done, percent time done)
13  
-  - menu / goto
14  
-  - settings (footer, debug?)
15  
-  - madden? 
16  
-- track file each slide is from
17 9
 - editing slides
18 10
 - webpage
19  
-- message on startup
20  
-- fix heroku gem shit
  11
+
  12
+--
  13
+
  14
+- clean up js
  15
+- clean up ruby
21 16
 
22 17
 
23 18
 ==
12  public/css/presenter.css
@@ -10,12 +10,17 @@ div.zoomed {
10 10
   font-size: 1.5em;
11 11
 }
12 12
 
  13
+#timerSection {
  14
+  padding: 15px 10px;
  15
+  border-top: 1px solid #555;
  16
+  border-bottom: 1px solid #555;
  17
+}
13 18
 #progress {
14 19
   padding: 10px;
15 20
 }
16 21
 #slideSource {
17 22
   padding: 10px;
18  
-  background: #9d9;
  23
+  background: #ccc;
19 24
 }
20 25
 
21 26
 #preview {
@@ -64,3 +69,8 @@ div.zoomed {
64 69
   padding: 10px;
65 70
   background: #eee;
66 71
 }
  72
+
  73
+.tBlue   { background: #79d; }
  74
+.tGreen  { background: #9d9; }
  75
+.tRed    { background: #d99; }
  76
+.tYellow { background: #dd9; }
64  public/js/presenter.js
@@ -17,6 +17,9 @@ $(function(){
17 17
 			return false
18 18
 		}).next().hide()
19 19
 	})
  20
+  $("#minStop").hide()
  21
+  $("#startTimer").click(function() { toggleTimer() })
  22
+  $("#stopTimer").click(function() { toggleTimer() })
20 23
 });
21 24
 
22 25
 function presPrevStep()
@@ -127,3 +130,64 @@ function keyDown(event)
127 130
 	}
128 131
 	return true
129 132
 }
  133
+
  134
+//* TIMER *//
  135
+
  136
+var timerSetUp = false;
  137
+var timerRunning = false;
  138
+var intervalRunning = false;
  139
+var seconds = 0;
  140
+var totalMinutes = 35;
  141
+
  142
+function toggleTimer()
  143
+{
  144
+  if (!timerRunning) {
  145
+    timerRunning = true
  146
+    totalMinutes = parseInt($("#timerMinutes").attr('value'))
  147
+    $("#minStart").hide()
  148
+    $("#minStop").show()
  149
+    $("#timerInfo").text(timerStatus(0));
  150
+    seconds = 0
  151
+    if (!intervalRunning) {
  152
+      intervalRunning = true
  153
+      setInterval(function() {
  154
+        if (!timerRunning) { return; }
  155
+        seconds++;
  156
+        $("#timerInfo").text(timerStatus(seconds));
  157
+      }, 1000);  // fire every minute
  158
+    }
  159
+  } else {
  160
+    seconds = 0
  161
+    timerRunning = false
  162
+    totalMinutes = 0
  163
+    $("#timerInfo").text('')
  164
+    $("#minStart").show()
  165
+    $("#minStop").hide()
  166
+  }
  167
+}
  168
+
  169
+function timerStatus(seconds) {
  170
+  var minutes = Math.round(seconds / 60);
  171
+  var left = (totalMinutes - minutes);
  172
+  var percent = Math.round((minutes / totalMinutes) * 100);
  173
+  var progress = getSlidePercent() - percent;
  174
+  setProgressColor(progress);
  175
+  return minutes + '/' + left + ' - ' + percent + '%';
  176
+}
  177
+
  178
+function setProgressColor(progress) {
  179
+  ts = $('#timerSection')
  180
+  ts.removeClass('tBlue')
  181
+  ts.removeClass('tGreen')
  182
+  ts.removeClass('tYellow')
  183
+  ts.removeClass('tRed')
  184
+  if(progress > 10) {
  185
+    ts.addClass('tBlue')
  186
+  } else if (progress > 0) {
  187
+    ts.addClass('tGreen')
  188
+  } else if (progress > -10) {
  189
+    ts.addClass('tYellow')
  190
+  } else {
  191
+    ts.addClass('tRed')
  192
+  }
  193
+}
10  views/presenter.erb
@@ -36,11 +36,17 @@
36 36
   </div>
37 37
   <div class="clear"></div>
38 38
   <div id="sidebar" class="grid_4">
  39
+    <div id="slideSource">
  40
+      Source: <span id="slideFile"></span>
  41
+    </div>
39 42
     <div id="progress">
40 43
       Slide: <span id="slideInfo"></span>
41 44
     </div>
42  
-    <div id="slideSource">
43  
-      Source: <span id="slideFile"></span>
  45
+    <div id="timerSection">
  46
+      Timer: 
  47
+      <span id="minStart"><input type="text" size="2" id="timerMinutes"/> min <input type="button" id="startTimer" value="Start"></span>
  48
+      <span id="timerInfo"></span>
  49
+      <span id="minStop"><input type="button" id="stopTimer" value="Stop"></span>
44 50
     </div>
45 51
     <div id="debugInfo"></div>
46 52
     <div id="slidemenu">

1 note on commit 3438dd0

Konstantin Haase

The colors indicating your progress are awesome!

Please sign in to comment.
Something went wrong with that request. Please try again.