Jetpack and Code Portability
Yesterday I was tinkering with my Multitouch Simulator Jetpack wondering if I could take the code out of it and make it a standalone library. I expected some pain extracting the code and making it work on a webpage as it's a somewhat different environment... I couldn't be more wrong.
From the beginning I wanted to code the extension's modules in a way that would allow me to take them away from the Jetpack extension. But that was it, just a wish, I didn't write each single line thinking on portability. Hopefully things ended up better than I expected.
When it was time to take the code out, I just copied the events dispatcher and files parser modules, performed 2 or 3 global replaces because of conflicting names and... job done! You can see the results in here with Firefox Minefield.
I think this is a great feature, not only meaning that you can take your code out from a Jetpack extension, but also the possibility of putting in a Jetpack previously coded "for the web" JavaScript libraries!
If you know me a little, you would guess that I couldn't leave that possibility without a try... And you would be quite right
So I took some little bit of code that Marcio Galli showed me on twitter, a QR-Code maker done entirely in Canvas+Javascript (see here), and decided to stuff it in a Jetpack.
Again, a very effort-less thing with great results. I ported that code to Jetpack in a blink, and created a qr-code library for jetpack, and in 5 more minutes, I had this Selection-To-QRcode extension running.
So, in brief, these are some exciting new possibilities to expand and remix the web and your experience with it!
New recording features for the MT-Simulator
The end of the Google Summer of Code is approaching and the Simulator have reached the Feature Completion stage. From now on, only minor bugfixes will be made untill the end of the project (August 16) when I have to submit the final code. From that on coding won't stop, is just that the GSoC ends. Probably the way things are done will be different and more feedback will be seek, but this project will surely continue.
And now the news about this release...
Notice
If you don't want to read the whole stuff and go right to the testing and trying fun stuff, just jump to the "Links! Links! Links!" section on the bottom
The new Recording features
Something that was very very needed was a more natural way to record the input files. Doing so programatically tends to be more dificoult and troublesome than moving your mouse around, so something had to be done. After some thinking and discussion with Felipe, I came up with a more comfortable way to record the files. I'll describe it briefly here, but you can alsgo skip it and see a demo after the break
.
Basically the UI consists of a representation of the fingers on the screen. Moving them with the mouse represents the movement of the fingers on the multitouch surface.
First you click the Start Recording Button and choose where to save the final file. Once the file is specified, the number of fingers that will be on-screen has to be chosen. Pushing the Finger Button will add a finger to the screen, but beware because there's no way to remove a finger for now.
Doing the recording is pretty straight forward. All fingers are recorded in cycles, one at a time starting from the first one added and then going sequentially with the rest. The cycle starts again when the last finger is done.
Before starting to record the actual moves, you have to set the starting position of each finger. Doing so is pretty easy, drag the black-bordered (active) finger and then click on the Accept Button, then the next finger will be activated and so on. Once all the fingers are set, the recordings can start.
You will notice when the fingers are being recorded because a trace of the finger movement will appear on screen. If a mistake happens, the finger movement can be undone, and this can go as far as the first finger of the cycle. The recording cycles can be repeated until you decide to hit the save button.
When the cycle is finished (last finger moved) it can be played back, triggering the multitouch events on the page, with the Play button. This is in case some actions are needed in order to continue recording. Keep in mind that this is a replay of just the previous recorded cycle: you cannot do it twice and cycles don't accumulate.
When you decide the recording is done and click on the save button, the file will be closed and saved. Also, every element added for the recording will be removed from the screen.
Multitouch Landed on trunk!
For those who are wondering what does this means: Multitouch support is now on Minefield and will be included on the Firefox 4 Beta 3 that is going to be released soon. This also means that the custom build I had to upload on my previous post is no longer needed to try the extension
You can download the multitouch simulator 0.4 from AMO here. Remember to download the xpi and drag n' drop it on firefox, that will do for installation. In Firefox 3.6 you'll have to restart to see the efects, but in Firefox 4 betas the extension will load without restart
If you find the bottom bar annoying, it can be hidden pressing Ctrl+Shift+U (or in OSX Cmnd+Shif+U).
If you just want to see this in action on a live demo, you can see the JavaScript library version here with the Firefox 4 beta 3 or greater. You don't need to install any addon, is a stand-alone version of the code running on a demo page
Also, here you have a list of available demos to try the multitouch support coded by Felipe Gomes:
- Image Crop
Draw a rectangle to potentially "crop" an image with a pinch gesture - Image Resize
Shrink and Enlarge images with pinch gestures. With two simultaneous pinches you can resize two different images - Touch Canvas
Simple canvas that tracks your fingers - Tracking Divs
Two divs keep tracking of the fingers you have on the screen - Fluids
Fluid simulation following your fingers!