diff --git a/README.md b/README.md
index 6073b77a4467ba54bc5a8e0665de2029c295e35d..f03ae0f23068aeeccf1f05229cf0a040a162a176 100644
--- a/README.md
+++ b/README.md
@@ -187,6 +187,9 @@ Reveal.initialize({
// Display a presentation progress bar
progress: true,
+ // Set default timing of 2 minutes per slide
+ defaultTiming: 120,
+
// Display the page number of the current slide
slideNumber: false,
@@ -967,12 +970,15 @@ Notes are only visible to the speaker inside of the speaker view. If you wish to
When `showNotes` is enabled notes are also included when you [export to PDF](https://github.com/hakimel/reveal.js#pdf-export). By default, notes are printed in a semi-transparent box on top of the slide. If you'd rather print them on a separate page after the slide, set `showNotes: "separate-page"`.
-#### Speaker notes clock and timer
+#### Speaker notes clock and timers
The speaker notes window will also show:
- Time elapsed since the beginning of the presentation. If you hover the mouse above this section, a timer reset button will appear.
- Current wall-clock time
+- (Optionally) a pacing timer which indicates whether the current pace of the presentation is on track for the right timing (shown in green), and if not, whether the presenter should speed up (shown in red) or has the luxury of slowing down (blue).
+
+The pacing timer can be enabled by configuring by the `defaultTiming` parameter in the `Reveal` configuration block, which specifies the number of seconds per slide. 120 can be a reasonable rule of thumb. Timings can also be given per slide `<section>` by setting the `data-timing` attribute. Both values are in numbers of seconds.
## Server Side Speaker Notes
diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html
index df55e79b7aeefc1e1403c7acff8b5ec0b1fc4087..c339d58231197f3b2bb32c27b1671c5be5a81e0e 100644
--- a/plugin/notes/notes.html
+++ b/plugin/notes/notes.html
@@ -82,6 +82,7 @@
}
.speaker-controls-time .label,
+ .speaker-controls-pace .label,
.speaker-controls-notes .label {
text-transform: uppercase;
font-weight: normal;
@@ -90,7 +91,7 @@
margin: 0;
}
- .speaker-controls-time {
+ .speaker-controls-time, .speaker-controls-pace {
border-bottom: 1px solid rgba( 200, 200, 200, 0.5 );
margin-bottom: 10px;
padding: 10px 16px;
@@ -111,6 +112,13 @@
.speaker-controls-time .timer,
.speaker-controls-time .clock {
width: 50%;
+ }
+
+ .speaker-controls-time .timer,
+ .speaker-controls-time .clock,
+ .speaker-controls-time .pacing .hours-value,
+ .speaker-controls-time .pacing .minutes-value,
+ .speaker-controls-time .pacing .seconds-value {
font-size: 1.9em;
}
@@ -127,6 +135,18 @@
opacity: 0.3;
}
+ .speaker-controls-time .pacing.ahead {
+ color: blue;
+ }
+
+ .speaker-controls-time .pacing.on-track {
+ color: green;
+ }
+
+ .speaker-controls-time .pacing.behind {
+ color: red;
+ }
+
.speaker-controls-notes {
padding: 10px 16px;
}
@@ -276,6 +296,12 @@
<span class="hours-value">00</span><span class="minutes-value">:00</span><span class="seconds-value">:00</span>
</div>
<div class="clear"></div>
+
+ <h4 class="label pacing-title" style="display: none">Pacing</h4>
+ <div class="pacing" style="display: none">
+ <span class="hours-value">00</span><span class="minutes-value">:00</span><span class="seconds-value">:00</span>
+ to finish current slide
+ </div>
</div>
<div class="speaker-controls-notes hidden">
@@ -450,6 +476,47 @@
}
+ function getTimings() {
+
+ var slides = Reveal.getSlides();
+ var defaultTiming = Reveal.getConfig().defaultTiming;
+ if (defaultTiming == null) {
+ return null;
+ }
+ var timings = [];
+ for ( var i in slides ) {
+ var slide = slides[i];
+ var timing = defaultTiming;
+ if( slide.hasAttribute( 'data-timing' )) {
+ var t = slide.getAttribute( 'data-timing' );
+ timing = parseInt(t);
+ if( isNaN(timing) ) {
+ console.warn("Could not parse timing '" + t + "' of slide " + i + "; using default of " + defaultTiming);
+ timing = defaultTiming;
+ }
+ }
+ timings.push(timing);
+ }
+ return timings;
+
+ }
+
+ /**
+ * Return the number of seconds allocated for presenting
+ * all slides up to and including this one.
+ */
+ function getTimeAllocated(timings) {
+
+ var slides = Reveal.getSlides();
+ var allocated = 0;
+ var currentSlide = Reveal.getSlidePastCount();
+ for (var i in slides.slice(0, currentSlide + 1)) {
+ allocated += timings[i];
+ }
+ return allocated;
+
+ }
+
/**
* Create the timer and clock and start updating them
* at an interval.
@@ -457,18 +524,30 @@
function setupTimer() {
var start = new Date(),
- timeEl = document.querySelector( '.speaker-controls-time' ),
- clockEl = timeEl.querySelector( '.clock-value' ),
- hoursEl = timeEl.querySelector( '.hours-value' ),
- minutesEl = timeEl.querySelector( '.minutes-value' ),
- secondsEl = timeEl.querySelector( '.seconds-value' );
+ timeEl = document.querySelector( '.speaker-controls-time' ),
+ clockEl = timeEl.querySelector( '.clock-value' ),
+ hoursEl = timeEl.querySelector( '.hours-value' ),
+ minutesEl = timeEl.querySelector( '.minutes-value' ),
+ secondsEl = timeEl.querySelector( '.seconds-value' ),
+ pacingTitleEl = timeEl.querySelector( '.pacing-title' ),
+ pacingEl = timeEl.querySelector( '.pacing' ),
+ pacingHoursEl = pacingEl.querySelector( '.hours-value' ),
+ pacingMinutesEl = pacingEl.querySelector( '.minutes-value' ),
+ pacingSecondsEl = pacingEl.querySelector( '.seconds-value' );
+
+ var timings = getTimings();
+ if (timings !== null) {
+ pacingTitleEl.style.removeProperty('display');
+ pacingEl.style.removeProperty('display');
+ }
function _displayTime( hrEl, minEl, secEl, time) {
+
var sign = Math.sign(time) == -1 ? "-" : "";
time = Math.abs(Math.round(time / 1000));
var seconds = time % 60;
- var minutes = ( time / 60 ) % 60 ;
- var hours = time / ( 60 * 60 ) ;
+ var minutes = Math.floor( time / 60 ) % 60 ;
+ var hours = Math.floor( time / ( 60 * 60 )) ;
hrEl.innerHTML = sign + zeroPadInteger( hours );
if (hours == 0) {
hrEl.classList.add( 'mute' );
@@ -489,12 +568,34 @@
function _updateTimer() {
var diff, hours, minutes, seconds,
- now = new Date();
+ now = new Date();
diff = now.getTime() - start.getTime();
clockEl.innerHTML = now.toLocaleTimeString( 'en-US', { hour12: true, hour: '2-digit', minute:'2-digit' } );
_displayTime( hoursEl, minutesEl, secondsEl, diff );
+ if (timings !== null) {
+ _updatePacing(diff);
+ }
+
+ }
+
+ function _updatePacing(diff) {
+
+ var slideEndTiming = getTimeAllocated(timings) * 1000;
+ var currentSlide = Reveal.getSlidePastCount();
+ var currentSlideTiming = timings[currentSlide] * 1000;
+ var timeLeftCurrentSlide = slideEndTiming - diff;
+ if (timeLeftCurrentSlide < 0) {
+ pacingEl.className = 'pacing behind';
+ }
+ else if (timeLeftCurrentSlide < currentSlideTiming) {
+ pacingEl.className = 'pacing on-track';
+ }
+ else {
+ pacingEl.className = 'pacing ahead';
+ }
+ _displayTime( pacingHoursEl, pacingMinutesEl, pacingSecondsEl, timeLeftCurrentSlide );
}
@@ -504,9 +605,26 @@
// Then update every second
setInterval( _updateTimer, 1000 );
- timeEl.addEventListener( 'click', function() {
- start = new Date();
+ function _resetTimer() {
+
+ if (timings == null) {
+ start = new Date();
+ }
+ else {
+ // Reset timer to beginning of current slide
+ var slideEndTiming = getTimeAllocated(timings) * 1000;
+ var currentSlide = Reveal.getSlidePastCount();
+ var currentSlideTiming = timings[currentSlide] * 1000;
+ var previousSlidesTiming = slideEndTiming - currentSlideTiming;
+ var now = new Date();
+ start = new Date(now.getTime() - previousSlidesTiming);
+ }
_updateTimer();
+
+ }
+
+ timeEl.addEventListener( 'click', function() {
+ _resetTimer();
return false;
} );