// HELPER FUNCTIONS function limitedArray(length) { // fixed size array implementation taken from https://stackoverflow.com/questions/31023330/drop-last-element-of-javascript-array-when-array-reaches-specific-length var array = new Array(); array.push = function () { if (this.length >= length) { this.shift(); } return Array.prototype.push.apply(this, arguments); } return array; } function randVal(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } function randColor() { return '#' + Math.floor(Math.random() * 16777215).toString(16); } function getTime(timestamp) { var d = new Date(timestamp); var h = (d.getHours()<10?'0':'') + d.getHours(); var m = (d.getMinutes()<10?'0':'') + d.getMinutes(); var s = (d.getSeconds()<10?'0':'') + d.getSeconds(); var D = (d.getDate() < 10?'0':'') + d.getDate(); var M = (d.getMonth() + 1 < 10?'0':'') + (d.getMonth() + 1); var Y = d.getYear() + 1900; return `${D}/${M}/${Y} - ${h}:${m}:${s}`; } function randomUsername(){ var base = "https://cors-anywhere.herokuapp.com/"; var url = 'http://names.drycodes.com/1'; axios.get(base + url).then(function(res){ username = res.data[0].replace(/_/g, ' '); setOnlineUser(username); }); } // global variables // Constants var MAX_LINES = 5000; var MAX_LINE_SIZE = 10; var MAX_NOTIFICATIONS = 20; var MAX_ARRAY_SIZE = 3000; var SCHEDULED_WIPE = false; var COLLECTION_LINES = 'lines/room'; var COLLECTION_NOTIFICATIONS = 'notifications/room'; var DEFAULT_CANVAS_BG = 'gainsboro'; // HTML elements variables var loader; var canvas; var sizeSelect; var roomSelect; var colors; var colorPicker; var clearBtn; var fillBtn; var clearEvent; var onlineUsersCount; var historyUsersCount; var notifyBtn; var notifyHistoryBtn; var context; // User variables var entryTimestamp = 0; var isOnline; var connectedUser; var connectedUserTimestamp = (new Date()).getTime(); // default generated username var username = `User ${randVal(1, 10000)}`; // currently logged users array var online_users = []; var history_users = []; // notifications history var notifications = []; // DB variables var db_ref; var lines_ref; var notify_ref; // current state of the brush (color, position is added in event handlers) var current = { color: 'black', size: 2 }; function roomNames(roomNum){ switch(roomNum){ case '0': return 'Lobby'; default: return `Room ${roomNum}`; } } // drawing flag var drawing = false; var currentRoom = 0; var roomsHistory = { 0: new limitedArray(MAX_ARRAY_SIZE) }; // INITIALIZE FUNCTION (the program entry point) function init() { // set location for notifications alertify.set('notifier', 'position', 'top-center'); // set references to HTML elements loader = document.getElementsByClassName('loader')[0]; canvas = document.getElementById('board'); sizeSelect = document.getElementById('size-select'); roomSelect = document.getElementById('room-select'); colors = document.getElementsByClassName('color'); colorPicker = document.getElementsByClassName('color-picker')[0]; clearBtn = document.getElementById('clear-btn'); fillBtn = document.getElementById('fill-btn'); clearEvent = document.getElementById('clear-event'); onlineUsersCount = document.getElementById('users-count'); historyUsersCount = document.getElementById('users-history'); notifyBtn = document.getElementById('notify-btn'); notifyHistoryBtn = document.getElementById('notify-hist-btn'); context = canvas.getContext('2d'); openUsernamePrompt(); initEventHandlers(); initFirebase(); initFirebaseReferences(currentRoom); initFirebaseListeners(); updateTimestampFromServer(); } function onError(err) { // error handler function (logs the error to console) console.log(err); } // FIREBASE INITIALIZATION function initFirebase() { // force firebase to use websockets firebase.database.INTERNAL.forceWebSockets(); // create reference to the firebase database db_ref = firebase.database(); } function initFirebaseReferences(roomNum){ // reference to the lines collection lines_ref = db_ref.ref(`${COLLECTION_LINES}${roomNum}`); // reference to the notification collection notify_ref = db_ref.ref(`${COLLECTION_NOTIFICATIONS}${roomNum}`); } function initFirebaseListeners() { // create event listener for newly added lines in the database and fire the getLine function lines_ref.on("child_added", getLine, onError); // load once all the lines and get rid of the loader lines_ref.orderByChild('timestamp').limitToLast(MAX_LINES).once('value', getAllLines, onError); // set listener for new notifications notify_ref.orderByChild('timestamp').limitToLast(1).on("child_added", getNotification, onError); notify_ref.orderByChild('timestamp').limitToLast(MAX_NOTIFICATIONS).once('value', getAllNotifications, onError); // set listener for new connected user db_ref.ref('connected').on('value', updateOnlineUsers); } function resetFirebaseListeners() { // invoked when user switches between rooms // detach the lines reference listener lines_ref.off(); // detach the notification reference listener notify_ref.off(); db_ref.ref('connected').off(); } // RESPONSE LINE/S HANDLER FUNCTIONS function getLineSnapshotChild(child) { // returns an object built from a snapshot child to send to the drawing function var data = child.val(); return { id: child.key, username: data.username, x0: data.x0, y0: data.y0, x1: data.x1, y1: data.y1, color: data.color, size: data.size, timestamp: data.timestamp, clear: data.clear } } function getLine(snapshot) { // retrieves the new line from the database, build a line object and pass on to a handling function var data = null; try { data = getLineSnapshotChild(snapshot); onDrawingEvent(data); roomsHistory[currentRoom].push(data); } catch (err) {} } function getAllLines(snapshot) { // retrives all fixed amount of lines from the database and pass each one to the drawing function setTimeout(function() { loader.classList.toggle('hidden'); }, 1000); snapshot.forEach(function(child) { var data = null; try { data = getLineSnapshotChild(child); onDrawingEvent(data, true); roomsHistory[currentRoom].push(data); addHistoryUser(data); } catch (err) {} }); } function addHistoryUser(data){ var username = `${data.username}:history`; if(history_users.findIndex(function(user){ return username === user.name; }) > -1){ return; } history_users.push({ name: username, time: data.timestamp }); historyUsersCount.innerHTML = `Users: ${history_users.length}`; } function setServerTimestamp(data){ // assign the time from the server to the global variable entryTimestamp = (data.val() + Date.now()); var minutes = new Date(entryTimestamp).getMinutes(); if (minutes % 10 === 0 && SCHEDULED_WIPE) { // clean the database every 10 minutes (only occurs if a user start the program at the time) lines_ref.set(null); notify_ref.set(null); } } function updateTimestampFromServer() { // retrieve the server time once only // for checking later on that we only draw new lines firebase.database().ref('/.info/serverTimeOffset').once('value').then(setServerTimestamp, onError); } // USER SETTING FUNCTIONS function openUsernamePrompt(){ var client = new ClientJS(); var fingerprint = client.getFingerprint(); username = `User ${fingerprint}`; // open prompt for username selection alertify.prompt("Select Username", "Leave blank for Anonymous:", "", setUsername, anonymousUser); } function setUsername(e, value) { // set the selected username, or Anonymous if nothing were entered username = value.length ? value : username; setOnlineUser(username); } function anonymousUser(e) { // set the default generated username randomUsername(); //setOnlineUser(username); } function setOnlineUser(username) { if(username.indexOf(':') !== -1){ alertify.notify(`Username cannot contain ':'`, 'error'); setTimeout(openUsernamePrompt, 1000); return; } // add user to the logged users list // access special reference for presence management isOnline = db_ref.ref('.info/connected'); var userWithRoom = `${username}:${currentRoom}`; // create reference with the username connectedUser = firebase.database().ref('/connected/' + userWithRoom); // create listener when new user is logged in isOnline.on('value', function(snapshot) { if (!snapshot.val()) return; // remove the user on disconnect event connectedUser.onDisconnect().remove(); // set the user in the connected users list in the DB connectedUser.set(firebase.database.ServerValue.TIMESTAMP); }); welcomeMessage(username); } function updateOnlineUsers(snapshot) { // reset the current online users list online_users = []; // get the new updated connected users list snapshot.forEach(function(child) { online_users.push({ name: child.key, time: child.val() }) }); onlineUsersCount.innerHTML = `Logged: ${online_users.length}`; } function welcomeMessage(username) { // display the connected user welcome notification alertify.notify(`Logged as ${username}`, 'information'); //alertify.notify("Send the notification containing 'Heart', 'Smiley' or 'Love' and see what happens ^_^", 'warning'); // send notification for all the users that a new user joined notify_ref.push({ author: 'System', body: `${username} Joined!`, type: 'system', timestamp: firebase.database.ServerValue.TIMESTAMP }); } function drawUserHistory(username){ clearBoard(DEFAULT_CANVAS_BG); drawRoomHistory(username); } function showOnlineUsers(users) { // show alert with the connected users list var sortedByRoom = users.slice().sort(function(a, b){ var aR = parseInt(a.name.split(':')[1], 10); var bR = parseInt(b.name.split(':')[1], 10); return bR - aR; }); var loggedUsersString = sortedByRoom.reverse().map(function(user) { var time = getTime(user.time); var userN = user.name.split(':')[0]; var userR = user.name.split(':')[1]; var isMe = userN === username? 'me':''; return `

${roomNames(userR)}: ${userN} since ${time}

`; }).join('

'); alertify.alert("Logged Users", loggedUsersString); } function switchRoom(roomNum) { history_users = []; notifications = []; // switch between rooms roomSelect.value = roomNum; // display the loading message loader.classList.toggle('hidden'); // update the time from the server updateTimestampFromServer(); // clear the board clearBoard(DEFAULT_CANVAS_BG); // detach firebase listeners resetFirebaseListeners(); // re-set firebase listeners to the new room initFirebaseReferences(roomNum); // re-initialize firebase listeners initFirebaseListeners(); currentRoom = roomNum; connectedUser.set(null); setOnlineUser(username); roomsHistory[roomNum] = roomsHistory[roomNum] || limitedArray(MAX_ARRAY_SIZE); drawRoomHistory(); } function drawRoomHistory(usernameFilter){ function linesFilter(line){ return usernameFilter? line.username === usernameFilter:true; } var lines = roomsHistory[currentRoom].slice(); lines = lines.filter(linesFilter); lines.forEach(function(line){ onDrawingEvent(line, true); }); } // NOTIFICATION FUNCTIONS function promptNotification() { // propmts the user for notification input if (alertify) { alertify.prompt("Send Notification", "Enter Message", "", sendNotification, null).bringToFront();; } else { var value = prompt("Enter Message"); sendNotification(null, value); } } function sendNotification(e, value) { notify_ref.push({ author: username, body: value, type: 'message', color: current.color, timestamp: firebase.database.ServerValue.TIMESTAMP }); } function getNotificationSnapshotChild(child) { // returns an object built from a snapshot child to send to the drawing function var data = child.val(); return { id: child.key, author: data.author, body: data.body, type: data.type, color: data.color, timestamp: data.timestamp } } function getNotification(snapshot) { var data = null; try { data = getNotificationSnapshotChild(snapshot); if (data.timestamp > entryTimestamp) { if (data.body === "Clear") { lines_ref.set(null); notify_ref.set(null); } else if(data.body.toLowerCase().indexOf('heart') > -1){ heart(data.color || current.color); }else if(data.body.toLowerCase().indexOf('smiley') > -1){ smiley(data.color || current.color); }else if(data.body.toLowerCase().indexOf('love') > -1){ for(var i=0;i<10;i++){ setTimeout(function(){ heart(randColor()); }, randVal(500, 3000)); setTimeout(function(){ smiley(randColor()); }, randVal(500, 3000)); } } else { showNotification(data); notifications.push(data); } } } catch (err) {} } function getAllNotifications(snapshot) { var data = null; snapshot.forEach(function(child){ try { data = getNotificationSnapshotChild(child); if (data.timestamp > entryTimestamp) { notifications.push(data); } notifications.push(data); } catch (err) {} }); } function showNotification(data) { var msg = `${data.author}: ${data.body}`; alertify.notify(msg, "success", 10); } function showNotificationsHistory() { var notificationsHistoryString = notifications.slice().reverse().map(function(msg) { var time = getTime(msg.timestamp); var isMe = msg.author === username? 'me':''; return `

${time} - ${msg.author}: ${msg.body}

` }).join('

'); alertify.alert("Notifications History", notificationsHistoryString); } function initEventHandlers(){ // initialize mouse events canvas.addEventListener('mousedown', onTouchStart, false); canvas.addEventListener('mouseup', onTouchStop, false); canvas.addEventListener('mouseout', onTouchStop, false); canvas.addEventListener('mousemove', throttle(onTouchMove, 10), false); // initialize touch events canvas.addEventListener('touchstart', onTouchStart, false); canvas.addEventListener('touchend', onTouchStop, false); canvas.addEventListener('touchcancel', onTouchStop, false); canvas.addEventListener('touchmove', throttle(onTouchMove, 10), false); // initialize event listeners of HTML elements (button clicks, dropdown changes) sizeSelect.onchange = sizeSelectChanged; colorPicker.onchange = colorPickerChanged; clearBtn.onclick = clearAndTransmit; fillBtn.onclick = clearAndTransmit; notifyBtn.onclick = promptNotification; notifyHistoryBtn.onclick = showNotificationsHistory; roomSelect.onchange = roomSelectChanged; onlineUsersCount.onclick = function(){ showOnlineUsers(online_users); } historyUsersCount.onclick = function(){ showOnlineUsers(history_users); } // initialize default colors event listeners for (var i = 0; i < colors.length; i++) { colors[i].addEventListener('click', onColorUpdate, false); } // window.addEventListener('resize', onResize, false); onResize(); } // make the canvas fill its parent function onResize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } function sizeSelectChanged(e) { current.size = sizeSelect.value; } function colorPickerChanged(e) { current.color = e.target.value; } function roomSelectChanged(e) { switchRoom(roomSelect.value); } function transmitLine(data) { lines_ref.push(data); } function clearAndTransmit(e) { var color = e.target.name === "fill" ? current.color : DEFAULT_CANVAS_BG; clearBoard(color); transmitClear(color); roomsHistory[currentRoom] = limitedArray(MAX_ARRAY_SIZE); } function clearBoard(color) { var w = canvas.width; var h = canvas.height; canvas.style.background = color; context.fillStyle = color; context.fillRect(0, 0, w, h); } function transmitClear(color) { transmitLine({ username: username, x0: -1, y0: -1, x1: -1, y1: -1, color: color, size: 0, timestamp: firebase.database.ServerValue.TIMESTAMP, clear: true }); } function onColorUpdate(e) { current.color = e.target.className.split(' ')[2]; colorPicker.value = current.color; } function drawLine(x0, y0, x1, y1, color, size, emit) { context.beginPath(); context.moveTo(x0, y0); context.lineTo(x1, y1); context.strokeStyle = color; context.lineWidth = size; context.stroke(); context.closePath(); if (!emit) { return; } var w = canvas.width; var h = canvas.height; transmitLine({ username: username, x0: x0 / w, y0: y0 / h, x1: x1 / w, y1: y1 / h, color: color, size: size, timestamp: firebase.database.ServerValue.TIMESTAMP }); } function getPosition(e) { // get touches object if exists var w = canvas.width; var h = canvas.height; var touch = e.changedTouches; // calculate offset of canvas var offset = canvas.getBoundingClientRect(); var scaleX = w / offset.width; var scaleY = h / offset.height; var offsetX = offset.left; var offsetY = offset.top; // get mouse position var x = e.clientX; var y = e.clientY; // get touches if available, otherwise get position from mouse event (default) if (touch) { x = touch[0].clientX; y = touch[0].clientY; } // return new position with calculated offsets return { x: (x - offsetX) * scaleX, y: (y - offsetY) * scaleY } } function onTouchStart(e) { var pos = getPosition(e); drawing = true; current.x = pos.x; current.y = pos.y; } function onTouchStop(e) { if (!drawing) { return; } var pos = getPosition(e); drawing = false; var x1 = pos.x; var y1 = pos.y; drawLine(current.x, current.y, x1, y1, current.color, current.size, true); } function onTouchMove(e) { if (!drawing) { return; } // current.color = randColor(); var pos = getPosition(e); var x1 = pos.x; var y1 = pos.y; drawLine(current.x, current.y, x1, y1, current.color, current.size, true); current.x = x1; current.y = y1; } // limit the number of events per second function throttle(callback, delay) { var previousCall = new Date().getTime(); return function() { var time = new Date().getTime(); if ((time - previousCall) >= delay) { previousCall = time; callback.apply(null, arguments); } }; } function onDrawingEvent(data, getAllFlag) { var w = canvas.width; var h = canvas.height; var isNewLine = data.timestamp > entryTimestamp || getAllFlag; var isSizeLegal = data.size <= MAX_LINE_SIZE; if (isNewLine && isSizeLegal) { drawLine(data.x0 * w, data.y0 * h, data.x1 * w, data.y1 * h, data.color, data.size); } if (data.clear && clearEvent.checked) { clearBoard(data.color); } } //window.onload = init; document.addEventListener('DOMContentLoaded', init); function heart(color){ // http://www.java2s.com/Tutorials/Javascript/Canvas_How_to/Shape/Draw_Heart_shape.htm var size = randVal(20, 150); //canvas.x = randVal(20, canvas.width); //canvas.y = randVal(20, canvas.height); //var w = 200, h = 200; var w = size, h = size; context.strokeStyle = "#000000"; context.strokeWeight = 3; context.shadowOffsetX = 4.0; context.shadowOffsetY = 4.0; context.lineWidth = 10.0; context.fillStyle = color; var d = Math.min(w, h); var k = randVal(0, canvas.width - size); context.beginPath(); context.moveTo(k, k + d / 4); context.quadraticCurveTo(k, k, k + d / 4, k); context.quadraticCurveTo(k + d / 2, k, k + d / 2, k + d / 4); context.quadraticCurveTo(k + d / 2, k, k + d * 3/4, k); context.quadraticCurveTo(k + d, k, k + d, k + d / 4); context.quadraticCurveTo(k + d, k + d / 2, k + d * 3/4, k + d * 3/4); context.lineTo(k + d / 2, k + d); context.lineTo(k + d / 4, k + d * 3/4); context.quadraticCurveTo(k, k + d / 2, k, k + d / 4); context.stroke(); context.fill(); context.closePath(); } function smiley(color) { // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes var ctx = context; var x = randVal(0, canvas.width - 75); var y = randVal(0, canvas.height - 75); ctx.strokeStyle = color; ctx.lineWidth = 5.0; ctx.beginPath(); ctx.arc(75 + x, 75 + y, 50, 0, Math.PI * 2, true); // Outer circle ctx.moveTo(110 + x, 75 + y); ctx.arc(75 + x, 75 + y, 35, 0, Math.PI, false); // Mouth (clockwise) ctx.moveTo(65 + x, 65 + y); ctx.arc(60 + x, 65 + y, 5, 0, Math.PI * 2, true); // Left eye ctx.moveTo(95 + x, 65 + y); ctx.arc(90 + x, 65 + y, 5, 0, Math.PI * 2, true); // Right eye ctx.stroke(); ctx.closePath(); }

Public Canvas