Albeit a couple of weeks late, it’s time to post about how the Capstone semester wrapped up. The short version: good. But, a longer explanation is probably necessary.
Dyksen recruited our Mozilla team, along with the Urban Science team from Capstone as well, to demo our projects for a Strategic Partners Presentation back on the 19th. Despite some initial, how should I put this, terrifiedness, at presenting in front of corporate people, it ran pretty smoothly. Good idea from Brandon to pass the Surface tablet around so everyone could use the rotate gesture themselves. I guess it’s good when the first question asked after the demo is “Where can I get this?”
Of course, our project still wasn’t 100% finished yet. We did a good job of hiding our bugs at our alpha, beta, and Strategic Partners presentations, but with Design Day looming, it was time to rid our project of its remaining issues. My main problem was an incorrect animation transition when zooming past the edge of a web page. After ~9 weeks of tweaking and slowly fixing issues but getting a problem that the scrollbars can’t go past their maximum, I finally found the (rather obvious) answer: just set the translation origin to the corner where the web page is past the edge (instead of always top left by default). Then a new translation amount is only the number of pixels past the corner, which can transition back to zero for the animation (scrollbars don’t transition, so transition animation is done via translating the entire page. Of course, you can’t just leave the page like that, or it’ll be cut off when the user scrolls around, so once the animation is complete, THEN re-render with just scrollbars now that there’s no over-zooming past the edge. Simple, right?)
The other problem was that pesky canvas-jumping issue on the Macbook Pro (see previous posts for details). Still don’t know why it did that, but after finding what the problem was with the HD canvas idea (also see previous posts) and fixing that (I forgot to check if HD canvas is active before the if statement to decide whether or not to add a certain canvas to the stack – otherwise, sometimes that canvas got stuck there and wouldn’t go away after the gesture terminated). The new problem was that this HD canvas leaves a white background around the rest of the page – but that’s only visible to the user if they move the mouse while pinching, which pans over while zooming. Luckily, for the Macbook, the mouse is the trackpad itself, and while in a pinching gesture, the mouse doesn’t move – so, problem taken care of by itself. Of course, on the Mac or the Surface Pro, the mouse CAN move while pinching (the Surface Pro’s mouse cursor is just the midpoint between one’s 2 fingers, which moves while pinching, and there’s an external mouse for the Mac, so one can pinch on the trackpad with one hand and move the mouse with their other hand). But again, problem taken care of – this canvas-jumps issue doesn’t occur for whatever reason on the Mac or Surface. It’s still nice to see a higher-resolution image after zooming in to 200% the original size, but since that white border becomes noticeable once panning over, the canvas is only displayed IF the mouse hasn’t changed position. Somehow it all worked out…
So, with a few days before Design Day, we were happy enough with our add-on that it came time for submission. And lo-and-behold, a couple of weeks later (May 4), turns out it got accepted! It can now be downloaded by anyone at https://addons.mozilla.org/en-US/firefox/addon/pinch-to-zoom-and-double-ta/
(Why the link ends in “double-ta” instead of “double-tap” I don’t know. Probably a missed letter while copy-and-pasting)
Not to say the add-on was perfect – far from it. Here’s the comments (and my comments on the comments) from our reviewer Nils Maier:
This version has been approved for the public. (Good)
The pinch-to-zoom feature seems to work well enough. (Good. But again, not perfect. Some pages just don’t seem to like to get their content scaled, like Facebook’s login screen, so sometimes it looks wacky)
The double-tab (smart zoom) one doesn’t really work for me. It zooms the wrong area, usually truncated. In my tests I browsed a couple of different pages, e.g. http://www.heise.de/newsticker/meldung/Dive-Die-Virtual-Reality-Brille-mit-dem-Smartphone-1854860.html, and tried double tab with the different text columns, but always ended up with a zoomed area not covering the whole text area, e.g. http://i.imgur.com/82ReLBZ.png after tapping into the text paragraph that is mostly visible.
Since the double-tap stuff seems to be experimental still and requires using a Nightly on OSX, I decided to let this slide for now. But please address this in a future update.
(Fair point. We didn’t implement double-tap so that it would zoom in to fit exactly the element that was being zoomed-in on. It was solely a matter of zooming either to max zoom level (if current zoom level is below a certain threshold), or back to 100% zoom (if above that threshold), centered on whatever the mouse is pointing at. Seems fair though that users would expect what they double-tap on to fit to the size of the window.)
Design Day came by a week later. It was nice to have an easy-to-demonstrate project that was very visual (“Here, look at this” *twist fingers* *image rotates* “Oh, cool!”). I guess that Strategic Partners presentation was a good de-facto practice run for our Design Day presentation to the panel of judges (not that I still wasn’t completely terrified, but to a lesser extent than I would have been without the practice run). The beginning was easy – we just watched our project video with them(here’s the link to it – feel free to skip past the part from 4:30 to 5:15 – http://capstone.cse.msu.edu/2013-01/projects/mozilla/project-video.mp4) but then came the Q&A session. I think I did well enough on it though to prove my knowledge/ability, except for one time when I got asked 2 questions in a row. I answered the first one and then TOTALLY forgot what the 2nd question was. Now the “correct” thing to do here was to just ask “I’m sorry, what was that other question again?”, but attempting to save myself from admitting I forgot, I used a much better solution – stare into space for approximately 8 seconds. But I did indeed remember it, and I answered it well too (the differences between our 2 zoom methods – fast zoom using a screenshot and pretty zoom using CSS to scale everything).
I thought the day went pretty well for Team Mozilla, and apparently the judges thought so too: we ended up winning the Chrysler LLC Praxis Award for the most technically challenging project (picture: http://capstone.cse.msu.edu/2013-01/slide-gallery/?starting-slide-number=266). I get the feeling that the judges wouldn’t allow the same team to get multiple awards, and that’s too bad because I think we could have at least been a contender for best project video also (Bill gets credit for that – good idea, outline, editing, final product). Nevertheless, I was happy to bring home some hardware (plus, it’ll make a good stabbing weapon should I ever need it for that purpose).
So, overall, good Capstone experience for the 2013 spring semester at Michigan State. I could end this post right here, but I have to mention the post-Design-Day experience of Friday, April 26, 2013. See, we went to the East Lansing bars afterward and I drank for the first time ever. This led me to the following revelation: I will never understand people.
I will never understand why anyone would rather pay $3 for a 2-ounce cup of liquid that (a) tastes awful, and (b) doesn’t come with free refills, instead of paying $1.50 for a regular-sized cup of soda that may as well be huge since you get unlimited refills. Needless to say, with the exception of 4 shots throughout the night, Sprite was my main drink of choice. But, I digress. I still got quite a lot of enjoyment in watching all my fellow Capstone students, normally the smartest group of people I’ve ever been with, just gradually go completely insane as the night went on. Plus, the Tigers won by 10 runs…
Now, detour aside, back to Mozilla. It was quite the learning experience discovering how a web browser works (and this project only covered a tiny portion of Firefox as a whole), and at the end, I’m glad that I’ll get to say I contributed to something that so many people use everyday. It’ll be cool if I see someone using one of the gestures and then I can mention “Oh yeah, I was on the team that implemented that.” “Really, on Firefox?” “Yeah, Firefox.”
So, thanks to my team members Brandon and Bill, as well as the Mozilla contacts Jared and Josh. It was a very long, frustrating, tiring, exhausting project that was also occasionally exhilerating when something I implemented WORKED!!! I’m happy that it ends with a product that can be used by other people. The experience was much appreciated.