Shared Whiteboard

Collaborative Shared Whiteboard with Zwibbler

by smhanov

HTML

<!DOCTYPE html>
<html>
  <body>
    <script src="http://zwibbler.com/zwibbler-demo.js"></script>
    <div id="top">
      <button id="share-button">
        Share Whiteboard Now
      </button>
      <button id="join-button">
        Join shared session
      </button>
      <input id="name" readonly>
    </div>
    <div id="whiteboard"></div>
  </body>
</html>

CSS

#whiteboard {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 50px;
}

#top {
  position: absolute;
  left: 0;
  right: 0;
  height: 50px;
}

body {
  overflow: hidden;
}

JavaScript

var ctx = Zwibbler.create("#whiteboard", {
		// options
});

var nameInput = document.querySelector("#name");

document.querySelector("#share-button").addEventListener("click", function() {
	var name = ctx.createSharedSession();
  prompt("Join this session in another window", name);
  nameInput.value = name;
});

document.querySelector("#join-button").addEventListener("click", function() {
	var name = prompt("Please enter the session name");
  if (name) {
  	ctx.joinSharedSession(name);
    nameInput.value = name;    
  }
});