A few days ago i popped across Anthony Calzadillas “Pure CSS3 AT-AT Walker“, which is a great application of using CSS3 Transforms and Animations to create a scene of an AT-AT Walker walking along in a simulated iPad.
Anthony explains in great detail how he built the AT-AT, but i couldn’t help but think “I’ve got a better way of doing this!”.
Last year i made a CSS Transform Exporter for Blender, which can take any scene and generate a corresponding version in a nice and simple HTML page.
So it can take this:
And turn it into this:
Admittedly simple, but it does show off the potential power in adopting CSS3 and HTML5. After all, who needs to use Flash when you can make everything work in actual web browser instead?
As any mobile app developer knows, there comes a time when you need to release your creations out to the general public. On the iPhone, one has the App Store. On Android, the Android Market. On Nokia devices, the Ovi Store.
Whenever i hear someone talk about the Ovi Store, they never have anything goodto sayabout it. Having not experienced the store myself, i remained skeptical.
Recently the Ovi Store on the Nokia N900 opened, so naturally i decided to check it out and see if it really was as bad as people suggested. What follows are my experiences, illustrated with accompanying screenshots.
To Start
First i tap on the “Ovi Store” icon on my device. After a short while, a web browser opens in fullscreen mode. So far, not bad.
Not sure what i want to do, i tap around the tabs (each loading a new page). Now i realise: i just saw something interesting on the last page, and want to see it again. But how do i go back? Well first i need to exit fullscreen mode. Next, i need to tap the back button. Then from the history list which appears:
I must then select the previous slide. *THEN* if i am really unlucky, i get to see the page load again.
Now i decide i want to download a game, so i tap on the “Games” tab. The “Games” page loads, showing:
So now i think “I’ll try and download Angry Birds.” Herein lies a puzzling problem. Nothing happens. A few more taps, and the browser zooms in. Finally after a bit more tapping, i manage to get it to recognise i selected the app. The “Angry Birds” page loads.
Ok, so “Download”. But first i need to sign up for an Ovi Account!
After filling out all the forms, i get a “Thanks for signing up” page. By this time, i’ve all but forgotten what app i was going to purchase.
What would come in handy here would be… i don’t know, some sort of “Click here to continue your purchase” button perhaps? Instead, i have to use… the back button.
Finally, i tap the download button again. This time it loads the “Application Manager”, which after a while asks me if i want to continue installing “Angry Birds.”
At last, the app is installed. Eager to run it, i looked in my applications list, but couldn’t find it. Until i looked closer…
Yes, Angry Birds is represented by… a blue box.
Thankfully though, the app ran fine.
All in all, i found the experience of downloading my free app to be unnecessarily frustrating. I can’t help but feel that nobody was really thinking when they designed the Ovi Store. From the constant page reloading, to the confusing appearance of the app on the device itself. I’d dread to think what would happen if i tried to buy an app.
I can safely say that currently the criticisms i have heard of the Ovi Store are well founded.
Following on from Creating CSS Animations, i have decided to release the exporter script used to create the animated orange test guy.
As the title implies, the exporter script runs in Blender. Simply construct a 2D scene using planes, add in an animation track, run the script and click Export. It’s as simple as that!
Each plane is exported as a HTML DIV. If present, any Ipos will be exported as CSS keyframes.
The exporter even supports parenting, so you can build up complex hierarchies of elements which can easily be transformed in an animation, or even javascript.
Note that currently the exporter only supports Webkit-based browsers (i.e. Chrome, Safari, MobileSafari). It also has limited support for Firefox (sans animations).
Recently i incorporated support for creating thumbnails in glgif, the backend gif animation library used in Anim8gif.
Rather than taking the easy route out and attempting to load the gif using UIImage, i decided to take advantage of glgif’s decode routines to create an accurate representation of the current state of the gif playback.
Put simply, i took the palette texture which is generated for display, and decoded it into a new UIImage.
The actual process is triggered by assigning a delegate (thumbDelegate), which will be invoked when the next frame in the gif is decoded. The delegate is then cleared.
Simple, right?
More Technical Details
The format of a palette texture in GLES is as follows:
Palette (16 or 256 entries)
Indexed Pixels (4bit or 8bit)
The palette can either be 16 or 256 entries long, depending on the format you use. Likewise the pixel data will either use 4 bits or 8 bits. To keep things simple, glgif uses an 8bit palette with 3 8bit entries for the color (GL_PALETTE8_RGB8_OES).
(Note that an 8bit palette can be insufficient as a gif can actually display more than 256 colours across multiple frames, but this is a necessary trade-off for speed)
So in order to decode it:
Read and decode the palette
Decode each pixel as an index into the palette
Using the decoded pixel data, create a new CoreGraphics bitmap context (using CGBitmapContextCreate)
Convert the bitmap context into a UIImage (using CGBitmapContextCreateImage and [UIImage imageWithCGImage:])
The resultant UIImage can then easily be used as a base to generate a sized down thumbnail of the gif, as illustrated below.
As always, the code for glgif is hosted on github, so feel free to check it out!
Moving on from Creating CSS Animations, i thought “How can i make this exporter more useful?”.
The answer is of course to completely remove Webkit from the equation, which leaves us with CoreAnimation. The end result being that the animation can be directly compiled into an iPhone or Mac OS X application.
Not going into much detail, CoreAnimation is essentially the library used by Webkit to display and animate any elements which have been transformed by a CSS Transform.
The actual scene is simply constructed using transformed CALayers. As for the animation, a CAKeyframeAnimation is created and attached to each CALayer. In the case of multiple properties being animated at the same time, a CAAnimationGroup is used to group these animations together.
The end result is a handy animation class which creates both the scene and the related animation tracks. i.e.:
CSS Transforms combined with animations are undoubtedly useful. Unfortunately though, the only way to create them is to manually input values and pretty much guess the result.
This methodology pretty much kills any creative aspirations anyone might have in making these animations. So while there are quite a few coollooking examples out there they lack the glamour of say, flash animations.
It seems to me there is a need for a tool which allows anyone to create these css animations in a visual way. As far as i know, no such tool currently exists. So naturally, i set about making something myself.
Rather than make an entire tool from scratch though, i decided to simply write an exporter script for another tool – in this case, Blender.
Why Blender? Well, it exposes pretty much all of the information i require to construct both a scene and animation tracks. Also, since Blender handles 3D scenes, there is a potential to work with 3D CSS Transforms in the future.
As an example, here’s a simple animation of an orange stick man walking across the screen. The stick man was both constructed and animated entirely within Blender, and exported using my export script.
And the scene as seen in blender:
Which is simply a set of planes linked together and animated. Really, it couldn’t be any simpler.
Currently the only browsers which seem to support both CSS transforms and animations are based off Webkit. i.e. Safari and Chrome (including the iPhone and Android browsers).
Which leads onto the question, is there a real-world demand for such a tool yet?
After almost a year of developing a and releasing a handful of iPhone apps to the App Store, i should be rollinginmoney, right?
Wrong.
In fact, i can officially reveal that with the exception of development contracts, my iPhone apps have netted me a grand total of:
£0
Yes, £0. It takes a lot of face up to facts, but it can’t be much more blunt than that. Granted i did sell a few units, but these were nowhere near the amount required to release any real payment into my bank account.
So what went wrong?
Well to be quite honest, i didn’t really market my apps at all well. I was hoping that simply being in the App Store combined with a word-of-mouth viral networking effect combined with some online ads would be sufficient. From there i could perhaps get some feedback, and introduce improvements in line with demand.
Did it work? Far from it.
Sadly since the iPhone market is pretty much saturated with thousands of apps, this is pretty much impossible to accomplish. You’d probably have more chance winning the lottery than going with that approach.
I even tried making one of my apps free and promoting one of my paid apps in the description. The actual response in sales was negligible.
It seems to me the only viable ways of attracting people to a new app are:
Getting it featured on the App Store
Pushing it out to as many review sites as you can ahead of time
Making it free
With regards to #3, not getting into in-depth analysis i will say this: if you have an app with a remotely useful purpose, people will consistently download it.
For example one of my apps, Anim8gif, gets at least 20 downloads a week – mind you, that figure isn’t really useful since none of those 20 people bother to write a review or send any useful feedback.
Right now though, i’m a bit tired of spending my budget coming up with the next big idea with elaborate marketing that’s likely to bring in tons of revenue. So here’s what i’m going to do.
I’m just giving up on making money off my own iPhone apps altogether. All my current apps: Anim8gif, VidSplit, and Overthecam are now free.
As for making future free apps, i am still undecided. Am i really getting anything out of the experience? Current signs point to no.
Recently in a little experiment, i made a rather cool demo which makes use of CSS Transforms, combined with CSS Transitions.
Note: Examples only work in Safari 4+, or other recent webkit-based browsers.
“Cool?” you say. Well admittedly i could have gone for something a bit more elaborate, however as it stands it pretty much serves its purpose – that is to demonstrate that using the magic of CSS Transitions you can create fast, useful web effects which run at acceptable framerates on an iPhone, and even on the desktop (since the tweening of properties is done by the browser).
However to get this admittedly simple demo working, i had to battle through a few odd issues with how these transitions operate.
The problems
To start off, resetting transitions is a bit tricky. Since properties are not processed immediately, you need to wait for the browser to detect you have reset transition values before you transition to any new values.
Thankfully a nice event called webkitTransitionEnd is provided which is fired as soon as a transition is complete, so you could conceivably use it to handle resetting the transition.
The only problem? webkitTransitionEnd seems to only fire when it feels like it.
The above example demonstrates the peculiarity of webkitTransitionEnd. The green/pink circle is meant to change colour every time the event is fired. Since there is an interval running every 100ms which changes the rotation of the circles, what typically happens 99.9% of the time is the transition never really ends, thus no event.
In general, the transition event seems to behave as follows:
Setting…
Result
Initial transition (element just created)
FAIL
Transition continuously (during transition)
MOSTLY FAIL
Transition after a sufficient undefined delay
PASS
So safe to say, unless you’ve got a transition you aren’t going to mess about with then don’t rely on webkitTransitionEnd.
Onto quirky platforms…
Finally, with regard to the iPhone platform there are even more quirks. Compared to desktop Safari, the tweening acts quite differently.
One notable quirk is if you make a new element with a transition on Desktop safari, it performs that transition. If however you do the same thing on Mobile Safari, the transition starts at the end. Whether or not this is some bizarre timing issue, i have no idea.
So safe to say, while CSS Transitions are a powerful tool to use, beware of the quirks.
Recently it has come to my attention that there is no way to view hints on images on an iPhone.
Normally on any modern desktop web browser when you hover your mouse cursor over an image, a hint if provided will be displayed. Certain websites use these hints to comedic effect, and it’s a shame you can’t see them.
Fortunately i have come up with a nice and simple bookmarklet to solve this issue. Simply add it to your bookmarks in Safari, sync over to your iPhone and run the bookmarklet.
To view a hint, simply hold down two fingers over an image. The associated hint will be displayed in a pop-up alert.
Drag this link to your bookmarks to add the bookmarklet.
It’s been a while since my last truly silly project, so i thought i’d come up with something else.
There has been a lot of talk recently about how the web is essentially replacing desktop applications, which to me sounds great.
But there is something missing from this new age of web applications. In order to run web apps you need a web browser, which is still a desktop app. It seems to me odd that a platform which replaces another still requires that platform to operate.
Which is where htmlcanvas comes in. It’s a HTML renderer implemented in JavaScript, which runs nicely in any capable web browser which supports the Canvas element.
In essence, it’s a web browser implemented within a web browser. The above example was rendered from this HTML:
<html>
<head>
<title></title>
</head>
<body><!-- Begin test -->
<p class="woo" id="render">
Rendering <b>HTML</b>...</p>
<p><span>In <b>Canvas</b></span>!</p>
<p>0_0</p>
</body>
</html>
This sort of recursive abstraction is not uncommon in the computing world. For example, C compilers are written in C, Pascal compilers are written in Pascal. There’s even a version of Python implemented within Python. So a web platform implemented within a web platform is quite natural.
Still, it will be a long while before htmlcanvas is remotely capable of running within itself, so a truly recursive web browsing experience is still a long way off.
As with most of my silly projects, the code to htmlcanvas is hosted on github. Fork it here!
Note: Currently only known to work in Safari 4, FireFox 3.5, or Google Chrome.
