inicio mail me! sindicaci;ón

Displaying Image Hints on an iPhone

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.

Simply genius!

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.

Or you can check out the full code in this gist.

A Browser within a Browser: HtmlCanvas

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.

htmlcanvas in action

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.

The Mystery of Jekyll

I recently stumbled across the much-loved Jekyll, a “blog aware” website generator.

I say “blog aware” since i have yet to be convinced it is. Jekyll seems to work fine if you have a flat layout of _posts with topics, but as soon as you stray away from that, it begins to fall apart.

An Example

I’ll give you a real world example. This blog. Simply enough, i’ve got posts organised into categories. I’ve also got a few tags on the posts, though they are mainly intended for the website feed. After reading the Jekyll documentation, it says:

Categories are derived from the directory structure above the _posts directory. For example, a post at /work/code/_posts/2008-12-24-closures.textile would have this field set to ['work', 'code'].”

So i think “right, i’ll make folders for my existing categories then stick their posts into each respective _posts folder“.

ex-folders

This actually works rather well: if i list {{ site.posts }} from /index.html, each post gets listed with their .categories attribute set.

ex-bug

However if i list a posts .categories in the actual post, the list is mysteriously empty. It’s like Jekyll decided to make the categories act as some weird reverse breadcrumb system. Why this would be remotely useful, i have no idea.

The problem with how posts are listed gets further compounded when you start to use topics. All of my real blog posts are tagged “blog”, so in order to list them i actually use site.topics.blog. This works fine, until i try and list posts from within a “category”.

For some bizarre reason, the list of posts varies depending on which category you list from. For example, i have a /feed folder which contains an rss feed template. The only posts listed in the feed are those in my “dev” topic.

My only guess is that since alphabetically “d” comes before “f”, Jekyll is going through each category one-by-one and making posts on-the-fly. Pre-processing? We don’t need pre-processing!

The only real solution seems to be to store all of your posts in the top-level _posts folder, but that sort of defeats the purpose of using a folder-based category system.

Onto pagination and beyond!

Now assuming you have got your posts sorted out, you’ll probably want to paginate them, right? Well good luck with that; while Jekyll will allow you to split posts up into pages, the paginator is a global option. So if you want pages, you’ve got to have pages on everything.

Got multiple lists of posts on a single page? Well watch out, you could be in for a nasty surprise!

Which brings me onto the rather limited Liquid markup Jekyll uses. Now i don’t have much of an issue with the Liquid markup itself, after all i thought it was used rather well in Mephisto.

But in Jekyll, i’m constantly trying to find a workaround for its rather limited set of liquid tags. Want to list posts by date? How about multiple tags? Good luck with that!

So safe to say, unless you have a pretty simple blog with a flat layout then out-of-the-box Jekyll quite simply doesn’t cut it yet – sad but true.

Frozen Synapse… on a Mac!

Frozen Synapse!

Yes indeed, it’s Frozen Synapse… Running on a mac.

“What is Frozen Synapse?”, you may ask. Well it’s nothing to do with web development. Nor ruby or rails. Nor even JavaScript for that matter!

Put simply, it’s a great new tactical strategy game from Mode 7 Games!

Unfortunately it’s still in development, so it’ll be a while till the general public can get its hands on the awesomeness of this game. Still, when it’s available you’ll be sure to find a nice mac version.

So until then, keep your eyes peeled for Frozen Synapse!

The Horror of Android Development

Back when the Android SDK was first released, i thought i’d check it out. Turns out there was a google competition where you could win cash prizes for making android apps. “Simple!”, i thought. That was until i looked further at the SDK and found it to be far too incomplete and with little documentation.

Safe to say, i didn’t make an Android app.

Recently, the has been another Google competition so i thought i’d check out the SDK. “It’s bound to be far more mature and usable!”, i thought (not to mention it’s supposed to be the greatest platform in the world to develop for). Unfortunately, it was just as bad as it was the last time i looked at it.

The Problems

Firstly, it’s based on Java, which isn’t really Java. Even so, it inherits all of Java’s problems. A weird and nonsensical class hierarchy for one. The overuse of abstraction for fairly simple API’s is another. Not to mention, the overload of XML files, which seem to permeate everything you do for no good reason.

In general i’d probably call it a rewrite of J2ME, only 10 times worse. Why worse? well at least with any decent J2ME SDK, you usually get some sort of usable GUI builder. Instead with Android, you get this mess…

GUI Builder Horror

Seriously, it’s the 21st century and i’m reduced to building a GUI using a spreadsheet and dragging a few nondescript labels around the screen in the vain attempt to build something which actually looks good. It’s so bad, even the tutorials recommend editing XML files rather than using it.

Earth to Android: people were making far better gui builders as early as 1989.

The distributed emulator application doesn’t exactly instil me with confidence either. Not only do i have to wait 5 minutes for it to boot up, it’s also horrifically slow for anything other than a simple “Hello World” application.

Android Emulator

Seriously, if Android is supposed to be OS agnostic, why not make a simulated environment rather than a whole emulator? Would be a whole lot faster and usable if you ask me!

And of course, the real killer. The preferred IDE is…

Eclipse.

If you asked a bunch of random strangers to build a bridge, you’d get a hideous construction which leads nowhere. In a similar vein, Eclipse is built by a complete bunch of strangers and ends up being an unusable mess. What’s worse is they’ve had 3 whole versions to sort it out, and rather than getting better it seems to be turning into an increasingly bloated mess.

I’ll give you an example. The code window is by default cramped in the middle of the window, it’s like looking through a keyhole to get at your code. Want to find the configuration settings? Good luck. You’ll have to dig through a whole myriad of menus just to change the font size.

Lets not forget the quirks. Want to scroll through a list using a mouse wheel? Well you’d better watch out for those pesky hint boxes which pop up and completely block focus.

But i digress; continuing with the Android SDK, another issue i have is with the actual documentation. Most of the time it follows a policy of listing what i can do, but not giving me any good examples of how to do it.

I’ll give you an example, looking at the “3D with OpenGL” section:

“Writing a summary of how to actually write 3D applications using OpenGL is beyond the scope of this text and is left as an exercise for the reader.”

Want to write OpenGL applications? We’ll just vaguely describe how you could do it and just leave you to guess it all out on your own. Not that your app will be usable on all devices of course.

It also likes to mention technologies with little to no explanation of what they do. Taking the “Audio and Video” section as an example, a reference is made to “Playing JET content”. What is “JET content”? I seriously have no idea.

Not to mention, there are a lack of comprehensive tutorials.

Take the Notepad tutorial for example, for every exercise you have to start from an archive of what the project should look like. It is impossible to follow the tutorial through without starting all over again with these archives.
There is even an “Extra Credit” section. I’m not even going to comment on that one.

Really, it feels just like i’m copying and pasting code. i.e. not learning anything.

To Conclude

So safe to say, i’m not going to make an Android app anytime in the near future.

Now i realise why Google is offering cash prices for making android apps: The SDK is so horrible, you’ll need all the money to pay for the therapy you’ll need after you finish your app.

The Wonders of iPhone Camera Apps

IMG_0479

Those of you who happen to follow me on Twitter might have heard a while back that i tried releasing a camera app for the iPhone, which simply allowed you to overlay arbitrary images as guides over the camera.

Unfortunately it was rejected last month because of the following criteria:

“3.3.1 Applications may only use Documented APIs in the manner prescribed by Apple and must not use or call any private APIs.”

Which to me was extremely annoying. Until you get rejected for something as arbitrary as this, i don’t think one truly understands how frustrating it can be to have a weeks worth of work flushed down the toilet.

My objections to this were as follows. All the API’s i used were documented. I simply made a UIImagePickerController, a UIView and overlaid it on top of the camera view. The only potentially problematic thing i did was to check for the presence of the TPCameraPushButton in the view hierarchy (again, a public api) to see when the overlay should vanish.

This check was written in such a way that if the class name of the camera button changed in a future release, the overlay would just stay visible all the time.

But no, apparently i didn’t use the API correctly “in the manner prescribed by Apple”. Thus no camera app was released.

Now i would have just left it there and waited until Apple made a nice API for me to properly overlay images over the camera (if ever), but what do i find posted on tuaw today?

“Camera Genius for iPhone updates and improves”

Yes, a camera app which overlays images on the camera. But not only that, it completely modifies the camera, and what’s more, it was both updated and approved well before and after my application.

(Note that i did not know about this particular camera app before i made mine. In addition it doesn’t appear to allow custom overlay images, one of the features of my app)

I guess it’s ok to make a camera application which completely modifies the camera UI. But if you just overlay images and check to see if the camera button exists then no, that doesn’t utilise the API in the manner prescribed by Apple.

iCompetition

So i have a challenge for you iPhone Developers out there. I have released the sourcecode to my ill-fated camera app, OverTheCam, under the GPL. Your mission, should you choose to accept it is to get it approved by Apple.

I’m going to award points based on :

  • How much of the app you need to change to get it approved.
  • How many “Camera Genius” UI enhancements you can get away with
  • How long it takes to get approved
  • The alternate name you pick

Additionally entries designed for any version of the OS later than 3.0.1 will not be counted. I’d also like to point out that you’ll also need to change the name of the application when submitting, for obvious reasons.

So what are you waiting for? Grab the code here on github and get submitting!Update:Since overthecam has finally been approved on OS 3.1, the competition has ended. The code is no longer available on github, but feel free to pop over a message if you want to check it out!

Moved to gandi.net

For a few years now, i’ve been hosting this site on Dreamhost. Despite the subpar performance, 90% of the time the site was up churning out requests, which for me worked out great.

Still, there’s something about shared hosting that makes me cringe, so i’ve been meaning to move to a VPS (Virtual Private Server) for quite some time now. After much consideration, i’ve decided to go with gandi.net. The reason? I’ve tried it before and they offer a fair price for what they offer: a single 256mb “slice” for $16/month, scalable up to 16 slices.

It may be a little bit more expensive than Dreamhost, but in the long run, i reckon it will pay back in terms of uptime and expandability.

So goodbye Dreamhost, hello Gandi!

RailsCollab isn’t Dead

For those of you interested in web-based project management tools, you might have noticed i’ve not really been maintaining RailsCollab for quite a few months now. Why? well because i really wanted to concentrate on other things, such as making cool iPhone apps and the usual contracts.

(Plus to be honest i wasn’t really using it myself)

Still, since its open source other people were free to use and modify it for their own needs. I was pleased to see that there has been a healthy level of forking according to github’s network graph.

fork_graph_rc

Feature-wise, one fork made by scambra has even implemented a fully fledged wiki.

wiki_tab

I’ve also seen partial localisation’s implemented for German and Simplified Chinese. So safe to say, i’m very impressed that despite my lack of updates, RailsCollab is still going strong – all thanks to its growing community!

Now for my input…

Projects like RailsCollab are hardly one-way streets. One has to give back as well as receive contributions.

So i’m pleased to announce that as well as merging the wiki and language updates into the main RailsCollab tree, i’ve also merged in my own updates which convert the Message, Comment, and File controllers into RESTful resource controllers.

Simply put, this means that you can now manipulate messages, comments, and files as XML. e.g.:

/project/1/messages/1.xml


<message>
  <additional-text/>
  <attached-files-count type="integer">0</attached-files-count>
  <category-id type="integer">1</category-id>
  <comments-count type="integer">2</comments-count>
  <comments-enabled type="boolean">true</comments-enabled>
  <created-by-id type="integer">1</created-by-id>
  <created-on type="datetime">2009-07-16T19:35:00Z</created-on>
  <id type="integer">1</id>
  <is-important type="boolean">false</is-important>
  <is-private type="boolean">false</is-private>
  <milestone-id type="integer">0</milestone-id>
  <project-id type="integer">1</project-id>
  <text>It's a *test*!</text>
  <title>Test message!</title>
  <updated-by-id type="integer">1</updated-by-id>
  <updated-on type="datetime">2009-07-16T19:35:16Z</updated-on>
</message>

/project/1/messages/1/comments.xml


<comments type="array">
  <comment>
    <attached-files-count type="integer">0</attached-files-count>
    <author-name nil="true"/>
    <created-by-id type="integer">1</created-by-id>
    <created-on type="datetime">2009-07-17T20:34:12Z</created-on>
    <id type="integer">5</id>
    <is-anonymous type="boolean">false</is-anonymous>
    <is-private type="boolean">true</is-private>
    <text>Test REST comment - edited</text>
  </comment>
</comments>

/project/1/files.xml


<files type="array">
  <file>
    <comments-count type="integer">0</comments-count>
    <comments-enabled type="boolean">true</comments-enabled>
    <created-by-id type="integer">1</created-by-id>
    <created-on type="datetime">2009-07-18T13:22:20Z</created-on>
    <filename>kitten-logo.png</filename>
    <id type="integer">9</id>
    <is-important type="boolean">false</is-important>
    <is-locked type="boolean">false</is-locked>
    <is-private type="boolean">false</is-private>
    <updated-on type="datetime">2009-07-18T13:34:50Z</updated-on>
  </file>
</files>

So what are you waiting for? fork it, use it, enjoy!

New iPhone Puzzle Game: VidSplit

Just thought i’d let all you devoted readers know, i just released my second iPhone app on iTunes, vidsplit.

vidsplit

vidsplit is a simple picture puzzle game with an added twist: instead of a picture, you have to piece together a full-motion video. With a grand total of two difficulty settings and 3 puzzles, it should keep pretty much any puzzle enthusiast entertained for hours.

On the technical side of things, vidsplit is basically a really souped up fork of anim8gif. Instead of animated gifs however, i’m using far higher quality PVR compressed videos.

Why PVR? Well, it really is the only thing you can use to get smooth video playback, apart from the hardware mpeg decoding chips which sadly aren’t accessible using the SDK. All other methods and texture formats are far too slow to get any acceptable playback speed.

For the curious, you might also be interested to know the video frames are basically 256×256 pixels in size, stretched to the dimensions of the screen. Any bigger and the video files would balloon in size. Any smaller and the video would look like complete mush, so it’s pretty much an acceptable sweet spot in terms of quality.

The decoder is pretty simple. Every frame, a PVR texture is read from the video file (basically concatenated PVR textures) and uploaded as an OpenGLES texture. Ad-infimum. It really couldn’t be any simpler than that!

As for the actual graphical interface, i’m using a custom solution based on my kitten game engine.

To conclude

So what are you waiting for, why not buy it from itunes? :)

Playing Animated GIFs on the iPhone

Following on from my Animated images on the iPhone post, i thought i’d take things a step further.

To re-cap, i pretty much summarised the available options for playing back simple animations on the iphone in this nice table:

Method Problem
Use UIImageView It doesn’t scale
Re-draw a UIView every frame Far too slow
Use GLES Beyond the scope of the last article, but not this one!
Transform a clipped UIView each frame We did that last time

To take things further, OpenGLES needs to be used. Specifically, you need to upload and draw a texture for every frame of your animation.

Now while this sounds like a great idea, there is a slight problem: uploading textures on the iPhone is hideously slow. Excluding the requirements of a video decoder, you only have enough time per frame to be able to playback a small stop motion video in RGB format.

All is not lost though. The iPhone supports two rather interesting texture formats: GL_COMPRESSED_RGB_PVRTC_* which is the native format, and GL_PALETTE* which is, as the name implies is a texture with a palette.

The fastest format to upload is PVR, but unfortunately there aren’t many native video codecs or animation formats about that decode to PVR format. Which leaves us with the palette format, which is just about fast enough to playback something more substantial…

Now which animation format uses a palette and is widely supported? Animated gif!

So to cut a long story short, i ended up writing a fairly elaborate library to decode and playback animated gifs on the iPhone, all in realtime.

Provided the gif is not gigantic (since the bigger the gif, the slower the decode + upload), it’s actually quite useable.

anim8gif

In fact, as a proof of concept i ended up writing an app using this library to playback animated gifs from any website in fullscreen (similar to the youtube app). Feel free to check it out – anim8gif.

The code

The code for this gif animation library, glgif, is located on github. As always, feel free to fork!

« Previous entries · Next entries »