Overview

While working at Hoffi I was asked to investigate the possibility of using mobile devices to control a computer’s web browser. This would involve developing a prototype which allows users to draw lines on a canvas from their mobile phones or tablets and then instantly update the canvas on the browser and other devices with the same line.

I created this prototype primarily in HTML, CSS, JavaScript and JQuery. I used canvas to implement the drawing functionality. Each user is randomly allocated a line colour so they can be individually identified. To send the draw data to different users I used Nodejs, Express and Socketio. If the user visits the URL from a computer browser, a page containing a QR code and a list of online users will be displayed in addition to the canvas area. If the user visited it from a mobile device only a canvas would be displayed. The purpose of the QR code is to allow mobile devices to open up the prototype by simply scanning the QR code with a QR reader. This prototype would need to be used across many different sized devices so it had to be responsive.

Screenshots

Technologies

• Nodejs
• SocketIO
• Express
• JavaScript
• JQuery
• Canvas
• JSON
• HTML
• CSS
• GitHub
• QR Code