Mobile Remote

Posted on Posted in Games, Websites

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