Online whiteboard for collaborative brainstorming. Users can:
- draw a line
- draw a polygon
- change color
- change width of the line
- join a conference call (Twilio API)
- undo drawing
![](https://user-images.githubusercontent.com/34459770/40571539-75e942d8-6068-11e8-9835-1cac2b655949.png)
- Socket.io
- D3
- Node
- PostgreSQL
- Javascript
- Twilio API
- Express
- HTML
- CSS
- Amazon EC2
io.on('connection', function (socket) {
getElementHistory().then( (el_history) => {
for (let objD of el_history) {
if (objD !== '') {
if (objD.type === 'polygon') {
socket.emit('draw_poly', objD)
} else {
socket.emit('draw_line', objD);
}
}
}
})
socket.on('start_line', (objD) => {
insertDB(objD);
socket.broadcast.emit('start_line', objD);
})
socket.on('real_time_line', (objD) => {
updateElDB(objD);
socket.broadcast.emit('real_time_line', objD);
});
socket.on('undo', (projectId) => {
deleteLastElDB(projectId);
io.emit('undo', (projectId));
})
socket.on('draw_poly', (objD) => {
insertDB(objD);
socket.broadcast.emit('draw_poly', objD);
})
});
################### front end
let drawBtn = document.querySelector('#drawTool');
drawBtn.addEventListener('click', () => {
svg.call(d3.drag()
.container(function () { return this; })
.subject(function () { var p = [d3.event.x, d3.event.y]; return [p, p]; })
.on('start', drawStarted));
});
//Freehand drawing tool function
function drawStarted() {
var d = d3.event.subject;
objD = {projectid: 1, el_count: countElements() + 1, d: d, color: penColor, size: strokeWidth, type: 'line' };
let x0 = d3.event.x,
y0 = d3.event.y;
drawLine(objD);
socket.emit('start_line', objD);
d3.event.on("drag", function () {
var x1 = d3.event.x,
y1 = d3.event.y,
dx = x1 - x0,
dy = y1 - y0;
if (dx * dx + dy * dy > 50) {
objD.d.push([x0 = x1, y0 = y1]);
}
else objD.d[d.length - 1] = [x1, y1];
updateLineRealTime(objD);
socket.emit('real_time_line', objD);
});
}