1 August 2008

Making cool things with WebKit

Everybody have heard that WebKit is the new cool kid.  Here is one reason: it is rather easy to hack on.   My colleague at Collabora, Siraj Razick, mixed up QWebView and QGraphicsItem to allow developers to put the Web inside a QGraphicsScene.  As he demonstrates, you can do crazy graphics with that.

From there, I went to look at how we can implement the same behaviour we have in one of the popular mobile browser these days.  Here’s the result: stefani.ogg (Stefani is the name of our hacking app).

In this video, you can see that each time I click on a paragraph, its content is zoomed to fill the screen.  If you click again, you get back to the full page view.  At all time the page is live and active (it isn’t a static image), although that can prove to be an issue (like mistakenly clicking on a link while in full page view).

You can try it if you want, just keep in mind that this is a quick prototype and it doesn’t really support scrolling yet.  The code is here: http://git.collabora.co.uk/?p=user/pierlux/stefani.git;a=shortlog;h=refs/heads/pierlux-zoom 

Now more details on how this works: on double click, I do a hitTestContent() at that position.  With a patch we wrote, you can access the HitTest’s bounding box.  That is how I determine on what to zoom.  After that, it is simple mathematics, signals and QTimeLines.

Granted this method is rudimentary and does not always gives the best result, it works with patched current available API.  A more elegant solution (which we may write in the future), would be to use a DOM API and access the node that was clicked on.  From there, you could go up the DOM tree and see if a particular div would be more interesting to zoom on  (ie, if a <p> tag is contained in a <div>, zoom on that <div> might also contains the title of the paragraph).  But first, we have to write that Qt DOM API :) .

Comments are closed.