BrainstormMe

Overview:

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

Watch demo:

Screenshots:

Team Members & Roles:

• Illia Chaban
• Tigbemileke Ojo
• Jaehee Kim

Technologies used:

• Socket.io
• D3
• Node
• PostgreSQL
• Javascript
• Twilio API
• Express
• HTML
• CSS
• Heroku

Code snippets:

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);
    });
}