In my last blog post about Awwation, I had talked about live thumbnails. What I’ve discovered is that since <use> references the original SVG, the editor becomes really slow as you add more presentation nodes to the timeline, because the changes are reflected in real-time across all the thumbnails. For short presentations this isn’t really a problem, so I’m keeping this feature as it is till I figure out a more efficient solution.
My other pet peeve was that the presentation would not animate in several browsers – particularly Opera. This has now been fixed with the latest version of the Sozi script, which is much faster and seems to work on all major browsers – I’ve tested on IE9, Safari, Firefox, Chrome, Arora, the iOS browser, and the one on my phone: the Nokia N950 developer device.
So that’s it for the presentations. I’ve also tried to make the editor work across all browsers – the saving with the FileSaver polyfill worked only in Chrome, and since I really want everything to be done client-side, I have used a tiny script, Downloadify, that saves the presentation using flash if you’re not using Chrome.
Oh, and now instead of the default name aww.svg, you now get a system dialog asking you for the filename and location for the generated presentation.
The next major thing I finished off was the support for offline theming.
I’ve cloned the Google Fonts Collection and base64-encoded some fonts and embedded them into the CSS theme files, so you don’t have to do any CSS @import for the fonts from Google’s CDN. Next, I’m XHRing the theme files (statically hosted along with the editor) and injecting the CSS response into the presentation when you pick a theme, instead of stuffing an @import between <style> tags. Oh, and since there’s no @import URL anymore, I can use a relative path to the theme file for the XHR and therefore the theme can be retrieved from the same static hosting as the editor, and the theming in the editor and the presentations works offline, too.
So, now everything in the presentation works offline, except for images.
Images are a different breed – right now, the image embdedding functionality from SVG-edit takes URLs to remote images. Ideally, in the editor, I want to retrieve the images and embed their base64 dataURL in the SVG, but this will require a cross-domain request, which is a security problem and therefore disallowed by browsers. I could allow the user to read in an image from their local machine with the HTML5 File API, but sadly this isn’t supported by IE9.
So right now, you need an internet connection to view presentations with images. Hopefully I can figure out a solution soon for this.
Interestingly, I’ve been able to successfully create an Awwation entirely on my phone using the editor, from within Mobile Firefox! In it’s current state, there are many more things that can be used to make the Awwation editor more touch-friendly though.
Now that I’ve graduated from college, I should have some free time to work on this project. These days, I particularly enjoy working from The Chocolate Room, a popular cafe chain here in Ahmedabad, where they have really nice coffee and crushed ice drinks for the summer. Nothing better than great coffee to to help you code. And they have power sockets for people like me to plug in their laptops, so that’s great!
Aditya Bhatt 