Simple Collaborative Blackboard
1 post
Page 1 of 1
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!
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>
1 post
Page 1 of 1
Copyright Information
Copyright © Codenstuff.com 2020 - 2023