• Top Members
    Reps
    Posts
  • 834 Replies
    2585 Replies
  • 716 Replies
    2025 Replies
  • 331 Replies
    1928 Replies

Simple Collaborative Blackboard

User avatar
mikethedj4
VIP - Site Partner
Posts: 2577

Simple Collaborative Blackboard

Fri Sep 26, 2014 11:56 pm

In this tutorial I introduced you to TogetherJS which makes real time collaboration. Easy!

Here's a snipplet for a simple collaborative blackboard you guys can use for whatever you wish. Tinker with it, mod it however you wish. Enjoy!

Code: Select all

<!DOCTYPE html>
<html>
  <head>
    <title>Basic HTML5 Drawing Board</title>
    <meta charset='utf-8' />
    <meta name='viewport' content='initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='IE=9' />
    <link type='text/css' rel='stylesheet' href='http://necolas.github.io/normalize.css/3.0.1/normalize.css'/>
    <script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
    <script src="https://togetherjs.com/togetherjs-min.js"></script>
    <style type='text/css'>
      body, html {
        height: 100%;
        margin: 0;
      }

      #sketch {
        cursor: crosshair;
        position: fixed;
      }

      #collab {
        cursor: pointer;
        position: absolute;
        top: 5px;
        right: 5px;
        border: 0;
        padding: .5em 1em;
        font: 16px arial;
        background: #6af;
        color: #fff;
        z-index: 9999;
      }

      #collab:hover {
        background: #8cf;
      }

      #collab:active {
        background: #59e;
      }
    </style>
  </head>
  <body>
    <button id="collab" onclick="TogetherJS(this); return false;">Team Up</button>
    <canvas id="sketch"></canvas>

    <script type='text/javascript'>
      // get the canvas element and its context
      var canvas = document.querySelector('#sketch');
      var context = canvas.getContext('2d');

      // Fill Window Width and Height
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      // Set Background Color
      context.fillStyle='#000';
      context.fillRect(0,0,canvas.width,canvas.height);

      var lastMouse = {
        x: 0,
        y: 0
      };

      // brush settings
      context.lineWidth = 5;
      context.lineJoin = 'round';
      context.lineCap = 'round';
      context.strokeStyle = '#fff';

      // attach the mousedown, mousemove, mouseup event listeners.
      canvas.addEventListener('mousedown', function (e) {
        lastMouse = {
          x: e.pageX - this.offsetLeft,
          y: e.pageY - this.offsetTop
        };
        canvas.addEventListener('mousemove', move, false);
      }, false);

      canvas.addEventListener('mouseup', function () {
        canvas.removeEventListener('mousemove', move, false);
      }, false);

      function move(e) {
        var mouse = {
          x: e.pageX - this.offsetLeft,
          y: e.pageY - this.offsetTop
        };
        draw(lastMouse, mouse);
        if (TogetherJS.running) {
          TogetherJS.send({
            type: "draw",
            start: lastMouse,
            end: mouse
          });
        }
        lastMouse = mouse;
      }

      function draw(start, end) {
        context.beginPath();
        context.moveTo(start.x, start.y);
        context.lineTo(end.x, end.y);
        context.closePath();
        context.stroke();
      }

      TogetherJS.hub.on("draw", function (msg) {
        if (! msg.sameUrl) {
          return;
        }
        draw(msg.start, msg.end, true);
      });

      TogetherJS.hub.on("togetherjs.hello", function (msg) {
        if (! msg.sameUrl) {
          return;
        }
        var image = canvas.toDataURL("image/png");
        TogetherJS.send({
          type: "init",
          image: image
        });
      });

      TogetherJS.hub.on("init", function (msg) {
        if (! msg.sameUrl) {
          return;
        }
        var image = new Image();
        image.src = msg.image;
        context.drawImage(image, 0, 0);
      });
      
      var App = {};
      App.run = function() {
          (function init() {
              var shareBtn = document.getElementById("collab");

              // share button should trigger TogetherJS
              shareBtn.addEventListener("click", function(e) {
                  e.preventDefault();
                  TogetherJS(this);
              }, false);
          })();
      }

      window.addEventListener("load", function() {
          App.run();
      }, false);

      TogetherJSConfig_siteName="Basic HTML5 Drawing Board";
      TogetherJSConfig_toolName="Team Up";
      TogetherJSConfig_dontShowClicks = true;
      TogetherJSConfig_suppressJoinConfirmation = true;
      TogetherJSConfig_disableWebRTC = true;
      TogetherJSConfig_includeHashInUrl = true;
      TogetherJSConfig_youtube = false;
      TogetherJSConfig_on = {
          ready: function () {
              var share = document.getElementById("collab");
              share.style.display = "none";
          },
          close: function() {
              var share = document.getElementById("collab");
              share.style.display = "inline-block";
          }
      };
    </script>
  </body>
</html>
Image
Image

Post Reply

Return to “Tutorials”