showoff 0.13.4 → 0.14.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: e2c16f1de4dfa9e1401b2d8882200287df206d61
-  data.tar.gz: e4db72901b96e5faf1c35ad018e60d3c29a14865
+  metadata.gz: 0a62e1cad01e674aaa210d8ec7130949db0965fb
+  data.tar.gz: 88a4bb776f6c82aa0ddc05efc73dc1379567bafb
 SHA512:
-  metadata.gz: 95c4ef9e3f7d94060af10f68bf7a7b0188c99b034eefc431e75e26cf4943d7697ccbf1d6f8c3cc884af6f97f03534af19b04c05e2cc00f615d6e1c12826667ed
-  data.tar.gz: c9c46ab3f68540dd773d7140c05d3e3cb8c23646e0a945ed7b0b5c455418e9dd9a10837f4bf0e33ae0bbe6bac72e8056944eaf03e29f43dc0f94a857d37a6f22
+  metadata.gz: 7926f32b1b0c317bbd74355901e5cbe0ad9c8f827b1fb9401c13554ce5e90c2f73193ac83c87b42dfcfdc956a4968561389cc85c08ba55a25a2c869c720f63a0
+  data.tar.gz: 4accf69a75e69ce437ab85c81f6a1ca07ef22731f8d49ae2a434e3855b11297743d72aea711a3e90c54cfa26e8b122164b35c617e42068cfab51faf8c3f8a302

data/bin/showoff

@@ -176,7 +176,13 @@ command :serve do |c|
   c.flag [:f, :file, :pres_file]
 
   c.desc 'Git URL to a repository containing the presentation'
-  c.flag [:u, :url]
+  c.flag [:u, :url, :git_url]
+
+  c.desc 'Branch of the git repository to use'
+  c.flag [:git_branch]
+
+  c.desc 'Path of the presentation within the git repository'
+  c.flag [:git_path]
 
   c.action do |global_options,options,args|
 
@@ -220,7 +226,7 @@ To run it from presenter view, go to: [ #{url}/presenter ]
 "
 
     if options[:url]
-      ShowOffUtils.clone(options[:url], options[:verbose]) do
+      ShowOffUtils.clone(options[:git_url], options[:git_branch], options[:git_path]) do
         ShowOff.run!(options) do |server|
           if options[:ssl]
             server.ssl         = true

data/lib/showoff.rb

@@ -413,6 +413,7 @@ class ShowOff < Sinatra::Application
 
         content += sl
         content += "</div>\n"
+        content += "<canvas class=\"annotations\"></canvas>\n"
         content += "</div>\n"
 
         final += update_commandline_code(content)
@@ -1461,6 +1462,9 @@ class ShowOff < Sinatra::Application
             when 'complete'
               EM.next_tick { settings.sockets.each{|s| s.send(control.to_json) } }
 
+            when 'annotation', 'annotationConfig'
+              EM.next_tick { (settings.sockets - settings.presenters).each{|s| s.send(control.to_json) } }
+
             when 'feedback'
               filename = "#{settings.statsdir}/#{settings.feedback}"
               slide    = control['slide']

data/lib/showoff/version.rb

@@ -1,3 +1,3 @@
 # No namespace here since ShowOff is a class and I'd have to inherit from
 # Sinatra::Application (which we don't want to load here)
-SHOWOFF_VERSION = '0.13.4'
+SHOWOFF_VERSION = '0.14.0'

data/lib/showoff_utils.rb

@@ -205,13 +205,17 @@ class ShowOffUtils
   end
 
   # clone a repo url, then run a provided block
-  def self.clone(url, verbose=false)
+  def self.clone(url, branch=nil, path=nil)
     require 'tmpdir'
     Dir.mktmpdir do |dir|
-      Dir.chdir dir do
-        puts "Cloning presentation repository to #{dir}..." if verbose
-        system('git', 'clone', '--depth', '1', url, '.')
+      if branch
+        system('git', 'clone', '-b', branch, '--single-branch', '--depth', '1', url, dir)
+      else
+        system('git', 'clone', '--depth', '1', url, dir)
+      end
 
+      dir = File.join(dir, path) if path
+      Dir.chdir dir do
         yield if block_given?
       end
     end

data/public/css/presenter.css

@@ -7,6 +7,7 @@
   -webkit-flex-flow: column;
           flex-flow: column;
   min-width: 630px;
+  min-height: 675px;
 }
 
 #timerSection,
@@ -217,15 +218,22 @@
             order: 1;
     min-width: 0px;
   }
+    #frame {
+      display: -webkit-flex;
+      display:         flex;
+      -webkit-flex-flow: row;
+              flex-flow: row;
+      -webkit-flex: 10;
+              flex: 10;
+    }
 
     #preview {
-      -webkit-flex: 1;
-              flex: 1;
+      -webkit-flex: 10;
+              flex: 10;
       overflow: auto;
       background: #eee;
       padding: 1em;
     }
-
       #preview input[type=button].display {
         display: inline;
       }
@@ -245,6 +253,10 @@
         visibility: visible;
         color: #ccc;
       }
+      #preview .inverse .incremental.hidden {
+        color: #404040;
+      }
+
 
     #preso {
       -webkit-box-shadow:0 0 25px rgba(0,0,0,0.35);
@@ -253,6 +265,8 @@
     }
 
     #statusbar {
+      -webkit-flex: 0.5;
+              flex: 0.5;
       height: 22px;
       line-height: 22px;
       text-transform: uppercase;
@@ -267,7 +281,8 @@
         display: inline;
       }
       #enableFollower,
-      #enableRemote {
+      #enableRemote,
+      #enableAnnotations {
         float: right;
         margin: 1px;
         padding: 0.1em;
@@ -279,6 +294,52 @@
         box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
       }
 
+  #annotationToolbar {
+    display: -webkit-flex;
+    display:         flex;
+    -webkit-flex-flow: column;
+            flex-flow: column;
+    -webkit-flex: 0.5;
+            flex: 0.5;
+    -webkit-order: 2;
+            order: 2;
+    min-width: 48px;
+    width: 48px;
+    padding: 0;
+    margin: 0;
+    background-color: black;
+    color: white;
+    text-align: center;
+  }
+    #annotationToolbar label {
+      font-size: 0.8em;
+      padding-top: 1em;
+      margin-bottom: 1px;
+      border-bottom: 1px solid #ccc;
+    }
+    #annotationToolbar i {
+      padding: 5px;
+      margin: 0 6px;
+      border-radius: 3px;
+    }
+    #annotationToolbar i:hover {
+      background-color: #555;
+    }
+    #annotationToolbar i.active {
+      background-color: #003d96;
+      border: 1px solid white;
+    }
+    #annotationToolbar i.lines.color1 { color: red    }
+    #annotationToolbar i.lines.color2 { color: cyan   }
+    #annotationToolbar i.lines.color3 { color: orange }
+    #annotationToolbar i.lines.color4 { color: green  }
+    #annotationToolbar i.shapes.color1 { color: red    }
+    #annotationToolbar i.shapes.color2 { color: cyan   }
+    #annotationToolbar i.shapes.color3 { color: orange }
+    #annotationToolbar i.shapes.color4 { color: green  }
+
+
+
 #bottom {
   display: -webkit-flex;
   display:         flex;

data/public/css/showoff.css

@@ -20,6 +20,11 @@ pre {
   padding: .25em;
 }
 
+/* when code blocks are embedded in a table, we don't need giant whitespace */
+table pre {
+  margin: 0;
+}
+
 /* applies to inline code only */
 code {
   padding: 2px 4px;
@@ -110,6 +115,16 @@ pre code {
     max-width: 100%;
     max-height: 100%;
   }
+
+  /* set up annotation overlays */
+  .slide canvas.annotations {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
 }
 
 /* plain (non-bullet) text */
@@ -167,6 +182,18 @@ pre code {
     font-size: 70%;
 }
 
+/* inverse slide style */
+.slide.inverse {
+  color: #efefef;
+  background-color: #262626;
+}
+  .slide.inverse code {
+    color: black;
+  }
+  .slide.inverse h1:first-child {
+    border-bottom: 3px solid #efefef;
+  }
+
 /**********************************
  ***       List styling         ***
  **********************************/
@@ -183,7 +210,7 @@ pre code {
 }
 
 /* ironically, normal lists have bullets and 'bullets' lists don't */
-.bullets > ul {
+.bullets ul {
   list-style: none;
   padding-left: 0px;
 }
@@ -480,6 +507,9 @@ img#disconnected {
 }
 
 .navItem {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   padding: .5em 1.5em;
 }
 

data/public/js/annotations.js

@@ -0,0 +1,279 @@
+function Annotate(params) {
+  if (!(this instanceof Annotate)) {
+    // the constructor was called without "new".
+    return new Annotate(params);;
+  }
+  params = typeof params !== 'undefined' ? params : {};
+
+  this.tool       = 'draw';
+  this.context    = null;
+  this.callbacks  = null;
+  this.concurrent = 0;
+  this.imgData    = null;
+
+  // I'd like this to be styled, but this is enough for MVP
+  this.lineWidth          = params.lineWidth           || 5;
+  this.lineColor          = params.lineColor           || "#df4b26";
+  this.fillColor          = params.fillColor           || "#F49638";
+  this.highlightRadius    = params.highlightRadius     || 20;
+  this.highlightPeriod    = params.highlightPeriod     || 500;
+  this.highlightFillColor = params.highlightFillColor  || 'rgba(245, 213, 213, 0.5)';
+  this.highlightLineColor = params.highlightLineColor  || '#cc0000';
+  this.zoom               = params.zoom                || 1; // Can you just die already?
+
+  this.setActiveCanvas = function(canvas) {
+    // dereference so we can use raw DOM objects or jQuery collections
+    canvas = canvas[0] || canvas;
+    if (canvas.nodeName.toLowerCase() !== 'canvas' ) {
+      throw new TypeError('Expected a DOM canvas element');
+    }
+    this.context = canvas.getContext("2d");
+
+    this.context.strokeStyle = this.lineColor;
+    this.context.fillStyle   = this.fillColor;
+    this.context.lineWidth   = this.lineWidth;
+    this.context.lineJoin    = "round";
+  }
+
+  this.erase = function() {
+    if ( this.callbacks && this.callbacks['erase'] ) {
+      try {
+        this.callbacks['erase']();
+      } catch (e) {
+        console.log('Erase callback failed. ' + e);
+      }
+    }
+
+    this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
+  }
+
+  this.draw = function(x, y) {
+    if (this.tool == 'draw') {
+      // undo the effects of the zoom
+      x = x * this.zoom;
+      y = y * this.zoom;
+
+
+      if ( this.callbacks && this.callbacks['draw'] ) {
+        try {
+          this.callbacks['draw'](x, y);
+        } catch (e) {
+          console.log('Draw callback failed. ' + e);
+        }
+      }
+
+      this.context.strokeStyle = this.lineColor;
+      this.context.lineTo(x, y);
+      this.context.stroke();
+    }
+  }
+
+  this.click = function(x, y) {
+    // undo the effects of the zoom
+    x = x * this.zoom;
+    y = y * this.zoom;
+
+    if ( this.callbacks && this.callbacks['click'] ) {
+      try {
+        this.callbacks['click'](x, y);
+      } catch (e) {
+        console.log('Click callback failed. ' + e);
+      }
+    }
+
+    this.context.fillStyle = this.fillColor;
+    this.context.beginPath();
+    this.context.moveTo(x, y);
+
+    switch(this.tool) {
+      case 'leftArrow':
+// IE doesn't understand Path2D
+//      var left  = new Path2D('m'+x+','+y+' 40,-40 0,20 50,0 0,40 -50,0 0,20 -40,-40 z');
+        this.context.beginPath();
+        this.context.moveTo(x, y);   x += 40;   y -= 40;
+        this.context.lineTo(x, y);              y += 20;
+        this.context.lineTo(x, y);   x += 50;
+        this.context.lineTo(x, y);              y += 40;
+        this.context.lineTo(x, y);   x -= 50;
+        this.context.lineTo(x, y);              y += 20;
+        this.context.lineTo(x, y);   x -= 40;   y -= 40;
+
+        this.context.fill();
+        break;
+
+      case 'rightArrow':
+//      var right = new Path2D('m'+x+','+y+' -40,-40 0,20 -50,0 0,40 50,0 0,20 40,-40 z');
+        this.context.beginPath();
+        this.context.moveTo(x, y);   x -= 40;   y -= 40;
+        this.context.lineTo(x, y);              y += 20;
+        this.context.lineTo(x, y);   x -= 50;
+        this.context.lineTo(x, y);              y += 40;
+        this.context.lineTo(x, y);   x += 50;
+        this.context.lineTo(x, y);              y += 20;
+        this.context.lineTo(x, y);   x += 40;   y -= 40;
+
+        this.context.fill();
+        break;
+
+      case 'highlight':
+        // save the current state of the canvas so we can restore it
+        var width  = this.context.canvas.width;
+        var height = this.context.canvas.height;
+
+        // save the canvas so we can restore it, but only if the user hasn't clicked multiple times.
+        if ( this.concurrent == 0 ) {
+          this.imgData = this.context.getImageData(0, 0, width, height);
+        }
+        this.concurrent += 1;
+
+        var period = this.highlightPeriod;
+        var start  = null;
+
+        // Save the settings object so the animate() callback can get to it
+        var settings = this;
+
+        // can only accept a single timestamp argument
+        function animate(timestamp) {
+          if (!start) start = timestamp;
+          var progress = timestamp - start;
+
+          var linear = timestamp % period / period;   // ranges from 0 to 1
+          var easing = Math.sin(linear * Math.PI);    // simple easing to create some bounce
+          var radius = settings.highlightRadius * easing;
+
+          settings.context.clearRect(0, 0, width, height);
+          settings.context.beginPath();
+          settings.context.arc(x, y, radius, 0, Math.PI*2);
+
+          settings.context.fillStyle   = settings.highlightFillColor;
+          settings.context.strokeStyle = settings.highlightLineColor;
+
+          settings.context.fill();
+          settings.context.stroke();
+
+          if (progress < 1000) {
+            window.requestAnimationFrame(animate);
+          }
+          else {
+            settings.concurrent -= 1;
+            if (settings.concurrent == 0) {
+              // We're done animating, restore the canvas
+              settings.context.clearRect(0, 0, width, height);
+              settings.context.putImageData(settings.imgData, 0, 0);
+              settings.context.strokeStyle = settings.lineColor;
+              settings.context.fillStyle   = settings.fillColor;
+              settings.imgData = null;
+            }
+          }
+        }
+        window.requestAnimationFrame(animate);
+        break;
+    }
+  }
+
+}
+
+
+// Allow us to attach the annotations to canvases via jquery
+// var annotations = new Annotate({lineColor: 'blue'});
+// $('#overlay').annotate(annotations);
+jQuery.fn.extend({
+  annotate: function (annotations) {
+    return this.each(function() {
+      if ( ! $(this).is( "canvas" ) ) {
+        throw new TypeError('The annotation functions only work on canvas elements');
+      }
+      if ( typeof annotations == 'undefined') {
+        // instantiate with defaults
+        annotations = new Annotate();
+      }
+      console.log('starting annotations');
+      var painting = false;
+
+      // the canvas cannot be css sized because reasons.
+      // Nor is it smart enough to understand how it fits into the styled page.
+      var height = $(this).parent().height();
+      var width  = $(this).parent().width();
+
+      // We only want to do this the first time. It clears the canvas.
+      // Note that if the browser is resized, then the annotations are cleared.
+      if (this.height != height) {
+        this.height = height
+      }
+      if (this.width != width) {
+        this.width = width
+      }
+
+      annotations.setActiveCanvas(this);
+
+      // let the annotation overlay own mouse events.
+      // This means that clicking links or copying text will not work.
+      $(this).css('pointer-events', 'initial');
+
+      $(this).unbind( "mousedown" );
+      $(this).mousedown(function(e){
+        painting = true;
+        annotations.click(e.offsetX, e.offsetY)
+      });
+
+      $(this).unbind( "mouseup" );
+      $(this).mouseup(function(e){
+        painting = false;
+      });
+
+      $(this).unbind( "mouseleave" );
+      $(this).mouseleave(function(e){
+        painting = false;
+      });
+
+      $(this).unbind( "mouseleave" );
+      $(this).mousemove(function(e){
+        if(painting){
+            annotations.draw(e.offsetX, e.offsetY);
+        }
+      });
+    });
+  },
+  stopAnnotation: function () {
+    return this.each(function() {
+      if ( ! $(this).is( "canvas" ) ) {
+        throw new TypeError('The annotation functions only work on canvas elements');
+      }
+      // Ignore pointer events again to make the overlay inactive.
+      $(this).css('pointer-events', 'none');
+
+      $(this).unbind( "mousedown" );
+      $(this).unbind( "mouseup" );
+      $(this).unbind( "mouseleave" );
+      $(this).unbind( "mouseleave" );
+    });
+  },
+  annotationListener: function (settings) {
+    return this.each(function() {
+      if ( ! $(this).is( "canvas" ) ) {
+        throw new TypeError('The annotation functions only work on canvas elements');
+      }
+      if ( typeof settings == 'undefined') {
+        // instantiate with defaults
+        annotations = Annotate();
+      }
+      console.log('starting annotation listener');
+
+      // the canvas cannot be css sized because reasons.
+      height = $(this).parent().height();
+      width  = $(this).parent().width();
+
+      // We only want to do this the first time. It clears the canvas.
+      // Note that if the browser is resized, then the annotations are cleared.
+      if (this.height != height) {
+        this.height = height
+      }
+      if (this.width != width) {
+        this.width = width
+      }
+
+      annotations.setActiveCanvas(this);
+    });
+  }
+
+});

data/public/js/presenter.js

@@ -9,7 +9,7 @@ section = 'notes'; // which section the presenter has chosen to view
 
 $(document).ready(function(){
   // set up the presenter modes
-  mode = { track: true, follow: true, update: true, slave: false, next: false, notes: false};
+  mode = { track: true, follow: true, update: true, slave: false, next: false, notes: false, annotations: false};
 
   // attempt to open another window for the presentation if the mode defaults
   // to enabling this. It does not by default, so this is likely a no-op.
@@ -23,8 +23,8 @@ $(document).ready(function(){
   $("#stopTimer").click(function()  { stopTimer()   });
 
   /* zoom slide to match preview size, then set up resize handler. */
-  zoom();
-  $(window).resize(function() { zoom(); });
+  zoom(true);
+  $(window).resize(function() { zoom(true); });
 
   $('#statslink').click(function(e) {
     presenterPopupToggle('/stats', e);
@@ -54,13 +54,71 @@ $(document).ready(function(){
     });
   }
 
+  // Hide with js so jquery knows what display property to assign when showing
+  toggleAnnotations();
+
+  $('#annotationToolbar i.tool').click(function(e) {
+    var action = $(this).attr('data-action');
+
+    switch (action) {
+      case 'erase':
+        annotations.erase();
+        break;
+
+      default:
+        $('#annotationToolbar i.tool').removeClass('active');
+        $(this).addClass('active');
+        annotations.tool = action;
+        if (slaveWindow) slaveWindow.annotations.tool = action;
+        sendAnnotationConfig('tool', action);
+    }
+
+  });
+
+  $('#annotationToolbar i.lines').click(function(e) {
+    $('#annotationToolbar i.lines').removeClass('active');
+    $(this).addClass('active');
+    var color = $(this).css('color');
+
+    annotations.lineColor = color;
+    if (slaveWindow) slaveWindow.annotations.lineColor = color;
+    sendAnnotationConfig('lineColor', color);
+  });
+
+  $('#annotationToolbar i.shapes').click(function(e) {
+    $('#annotationToolbar i.shapes').removeClass('active');
+    $(this).addClass('active');
+    var color = $(this).css('color');
+
+    annotations.fillColor = color;
+    if (slaveWindow) slaveWindow.annotations.fillColor = color;
+    sendAnnotationConfig('fillColor', color);
+  });
+
   $('#remoteToggle').change( toggleFollower );
   $('#followerToggle').change( toggleUpdater );
+  $('#annotationsToggle').change( toggleAnnotations );
 
   setInterval(function() { updatePace() }, 1000);
 
   // Tell the showoff server that we're a presenter
   register();
+
+  annotations.callbacks = {
+    erase: function()    {
+      if (slaveWindow) slaveWindow.annotations.erase();
+      sendAnnotation('erase');
+    },
+    draw:  function(x, y) {
+      if (slaveWindow) slaveWindow.annotations.draw(x,y);
+      sendAnnotation('draw', x, y);
+    },
+    click: function(x,y) {
+      if (slaveWindow) slaveWindow.annotations.click(x,y);
+      sendAnnotation('click', x, y);
+    }
+  };
+
 });
 
 function presenterPopupToggle(page, event) {
@@ -443,7 +501,7 @@ function postSlide() {
       $(notesWindow.document.body).html(notes);
     }
 
-		var fileName = currentSlide.children().first().attr('ref');
+		var fileName = currentSlide.children('div').first().attr('ref');
 		$('#slideFile').text(fileName);
 
     $("#notes div.form.wrapper").each(function(e) {
@@ -641,3 +699,22 @@ function toggleUpdater()
   mode.update = $("#followerToggle").prop("checked");
   update();
 }
+
+/********************
+ Annotations
+ ********************/
+function toggleAnnotations()
+{
+  mode.annotations = $("#annotationsToggle").prop("checked");
+
+  if(mode.annotations) {
+    $('#annotationToolbar').show();
+    currentSlide.find('canvas.annotations').annotate(annotations);
+    $('canvas.annotations').show();
+  }
+  else {
+    $('#annotationToolbar').hide();
+    $('canvas.annotations').stopAnnotation();
+    $('canvas.annotations').hide();
+  }
+}

data/public/js/showoff.js

@@ -71,6 +71,9 @@ function setupPreso(load_slides, prefix) {
   zoom();
   $(window).resize(function() {zoom();});
 
+  // yes, this is a global
+  annotations = new Annotate();
+
   // Open up our control socket
   if(mode.track) {
     connectControlChannel();
@@ -168,7 +171,7 @@ function initializePresentation(prefix) {
 	$("#preso").trigger("showoff:loaded");
 }
 
-function zoom() {
+function zoom(presenter=false) {
   var preso = $("#preso");
   var hSlide = parseFloat(preso.height());
   var wSlide = parseFloat(preso.width());
@@ -186,6 +189,21 @@ function zoom() {
   // Don't use standard transform to avoid modifying Chrome
   preso.css("-moz-transform", "scale(" + newZoom + ")");
   preso.css("-moz-transform-origin", "0 0 0");
+
+  // correct the zoom factor for the presenter
+  if (presenter) {
+    // We only want to zoom if the canvas is actually zoomed. Firefox and IE
+    // should *not* be zoomed, so we want to exclude them. We do that by reading
+    // back the zoom property. It will return a string percentage in IE, which
+    // won't parse as a number, and Firefox simply returns undefined.
+    // Because reasons.
+
+    // TODO: When we fix the presenter on IE so the viewport isn't all wack, we
+    // may have to revisit this.
+
+    var zoomLevel = Number( preso.css('zoom') ) || 1;
+    annotations.zoom = 1 / zoomLevel
+  }
 }
 
 function setupSideMenu() {
@@ -252,6 +270,10 @@ function setupSideMenu() {
     closeMenu();
   });
 
+  $('#clearAnnotations').click(function() {
+    annotations.erase();
+  });
+
   $('#closeMenu, #sidebarExit').click(function() {
     closeMenu();
   });
@@ -337,15 +359,19 @@ function setupMenu() {
     // look for first header to use as a title
     if (headers.length > 0) {
       slideTitle = headers.first().text();
+
     } else {
-      // if no header, look at content
+      // if no header, look at the first non-empty line of content
       content    = $(slide).find(".content");
-      slideTitle = content.text().substr(0, 20).trim();
+      slideTitle = content.text().split("\n").filter(Boolean)[0] || ''; // split() gives us an empty array when there's no content.
 
       // if no content (like photo only) fall back to slide name
       if (slideTitle == "") {
         slideTitle = content.attr('ref').split('/').pop();
       }
+
+      // just in case we've got any extra whitespace around.
+      slideTitle = slideTitle.trim();
     }
 
     var navLink = $("<a>")
@@ -443,6 +469,11 @@ function showSlide(back_step, updatepv) {
 		return
 	}
 
+  // stop annotations on old slide if we're a presenter
+  if(currentSlide && typeof slaveWindow !== 'undefined') {
+    currentSlide.find('canvas.annotations').first().stopAnnotation();
+  }
+
 	currentSlide = slides.eq(slidenum)
 
 	var transition = currentSlide.attr('data-transition')
@@ -481,13 +512,24 @@ function showSlide(back_step, updatepv) {
 
 	var ret = setCurrentNotes();
 
-	var fileName = currentSlide.children().first().attr('ref');
+	var fileName = currentSlide.children('div').first().attr('ref');
   $('#slideFilename').text(fileName);
 
   if (query.next) {
     $(currentSlide).find('li').removeClass('hidden');
   }
 
+  if(typeof slaveWindow == 'undefined') {
+    // hook up the annotations for viewing
+    currentSlide.find('canvas.annotations').annotationListener(annotations);
+  }
+  else {
+    if (mode.annotations) {
+      currentSlide.find('canvas.annotations').annotate(annotations);
+    }
+  }
+
+
   // Update presenter view, if we spawned one
 	if (updatepv && 'presenterView' in window && ! mode.next) {
     var pv = window.presenterView;
@@ -861,10 +903,22 @@ function parseMessage(data) {
       case 'cancel':
         removeQuestion(command["questionID"]);
         break;
+
+      case 'annotation':
+        invokeAnnotation(command["type"], command["x"], command["y"]);
+        break;
+
+      case 'annotationConfig':
+        setting = command['setting'];
+        value   = command['value'];
+
+        annotations[setting] = value;
+        break;
+
     }
   }
   catch(e) {
-    console.log("Not a presenter!");
+    console.log("Not a presenter! " + e);
   }
 
 }
@@ -905,6 +959,34 @@ function sendFeedback(rating, feedback) {
   }
 }
 
+function sendAnnotation(type, x, y) {
+  if (ws.readyState == WebSocket.OPEN) {
+    ws.send(JSON.stringify({ message: 'annotation', type: type, x: x, y: y }));
+  }
+}
+
+function sendAnnotationConfig(setting, value) {
+  if (ws.readyState == WebSocket.OPEN) {
+    ws.send(JSON.stringify({ message: 'annotationConfig', setting: setting, value: value }));
+  }
+}
+
+function invokeAnnotation(type, x, y) {
+  switch (type) {
+    case 'erase':
+      annotations.erase();
+      break;
+
+    case 'draw':
+      annotations.draw(x,y);
+      break;
+
+    case 'click':
+      annotations.click(x,y);
+      break;
+  }
+}
+
 function feedbackActivity() {
   $('#hamburger').addClass('highlight');
   setTimeout(function() { $("#hamburger").removeClass('highlight') }, 75);

data/views/header.erb

@@ -23,6 +23,7 @@
 
   <script type="text/javascript" src="<%= @asset_path %>/js/coffee-script.js"></script>
 
+  <script type="text/javascript" src="<%= @asset_path %>/js/annotations.js"></script>
   <script type="text/javascript" src="<%= @asset_path %>/js/showoff.js"></script>
 
   <% css_files.each do |css_file| %>

data/views/index.erb

@@ -63,6 +63,8 @@
         <div id="editSlide" class="buttonWrapper">Edit Current Slide</div>
         <% end %>
         <hr>
+        <div id="clearAnnotations" class="buttonWrapper"><i class="fa fa-eraser"></i> Clear Annotations</div>
+        <hr>
     <% end %>
 
     <div id="closeMenu" class="buttonWrapper"><i class="fa fa-close"></i> Close</div>

data/views/presenter.erb

@@ -74,9 +74,29 @@
       <div id="navigation" class="submenu"></div>
     </div>
     <div id="presenter">
-      <div id="preview">
-        <img id="disconnected" src="<%= @asset_path %>/css/disconnected-large.png" />
-        <div id="preso">loading presentation...</div>
+      <div id="frame">
+        <div id="preview">
+          <img id="disconnected" src="<%= @asset_path %>/css/disconnected-large.png" />
+          <div id="preso">loading presentation...</div>
+        </div>
+        <div id="annotationToolbar">
+          <label>Tools</label>
+            <i class="fa fa-pencil tool default active" data-action="draw" aria-hidden="true"></i>
+            <i class="fa fa-arrow-right tool"  data-action="rightArrow" aria-hidden="true"></i>
+            <i class="fa fa-arrow-left tool"  data-action="leftArrow" aria-hidden="true"></i>
+            <i class="fa fa-bullseye tool" data-action="highlight" aria-hidden="true"></i>
+            <i class="fa fa-eraser tool"  data-action="erase" aria-hidden="true"></i>
+          <label>Lines</label>
+            <i class="fa fa-square-o lines color1 active" aria-hidden="true"></i>
+            <i class="fa fa-square-o lines color2" aria-hidden="true"></i>
+            <i class="fa fa-square-o lines color3" aria-hidden="true"></i>
+            <i class="fa fa-square-o lines color4" aria-hidden="true"></i>
+          <label>Shapes</label>
+            <i class="fa fa-square shapes color1" aria-hidden="true"></i>
+            <i class="fa fa-square shapes color2" aria-hidden="true"></i>
+            <i class="fa fa-square shapes color3 active" aria-hidden="true"></i>
+            <i class="fa fa-square shapes color4" aria-hidden="true"></i>
+        </div>
       </div>
       <div id="statusbar">
         <span id="progress">
@@ -89,6 +109,10 @@
         <span id="enableFollower" title="Send slide change notifications.">
           <label for="followerToggle">Update Follower</label><input type="checkbox" id="followerToggle" checked />
         </span>
+        <span id="enableAnnotations" title="Enable the annotation system.">
+          <label for="annotationsToggle">Annotations</label><input type="checkbox" id="annotationsToggle" />
+        </span>
+
       </div>
     </div>
   </div>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: showoff
 version: !ruby/object:Gem::Version
-  version: 0.13.4
+  version: 0.14.0
 platform: ruby
 authors:
 - Scott Chacon
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-08-10 00:00:00.000000000 Z
+date: 2016-08-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sinatra
@@ -326,6 +326,7 @@ files:
 - public/css/titlebar/right.png
 - public/favicon.ico
 - public/js/TimeCircles.js
+- public/js/annotations.js
 - public/js/coffee-script.js
 - public/js/highlight.pack.js
 - public/js/jTypeWriter.js