Wednesday, May 08, 2019

Visual Cryptography Part 3 - Whoops, Totally Broken on Mobile Devices

You could tell I was pretty proud of myself for implementing my Visual Cryptography Demo. Admittedly, my spirits came crashing down when I visited the demo on my mobile phone. Not only was the layout of the page distorted, but all of the functionality on the page had ceased to work. What the heck?!

It took only a few minutes of introspection to realize the problem: I'd built the demo around mouse events, and mobile devices like my phone don't have a mouse.

It was time work on version 2.0--the responsive/mobile friendly version of Visual Cryptography. To that end, I fixed the following:

  • Installed the correct viewport meta tag to fix browser zooming
  • Derived the size of my drawing canvas from $(window).width() and $(window).height() rather than hard coding the values
  • Updated the drawing code to listen for touch as well as a mouse events. This blog post was helpful for figuring out reliable x,y coordinates for touch events.
  • Disabled Chrome's pull-down-to-refresh functionality so that you could draw without triggering a page reload

And just like that, my little toy app now works on mobile devices. Here's a video-capture showing me encrypt and decrypt the 'code' 123:

Check out the code here, and play with the demo here. And hopefully next time I casually browse to the page I won't find it completely non-functional.

No comments:

Post a Comment