tag:blogger.com,1999:blog-362357832024-03-16T15:50:20.001-03:00Kenneth Christiansen's code postsKenneth Rohde Christiansenhttp://www.blogger.com/profile/01428436368669198056noreply@blogger.comBlogger54125tag:blogger.com,1999:blog-36235783.post-3684006713380742152011-02-18T06:18:00.002-03:002011-02-22T11:23:12.655-03:00FOSDEM talk<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/mB2v0QqqiZA" frameborder="0" allowfullscreen=""></iframe><div><br /></div><div>I will upload the slides soon.</div><div><br /></div><div><b>[Update] </b>Slides are up <a href="http://www.slideshare.net/kchristi/qt-webkit-going-mobile-7016102">here at slideshare.net</a></div>Kenneth Rohde Christiansenhttp://www.blogger.com/profile/01428436368669198056noreply@blogger.com2tag:blogger.com,1999:blog-36235783.post-69353379004802813602010-06-23T11:24:00.005-03:002010-06-23T11:40:16.043-03:00QtWebKit goes Mobile<i>Repost of Jesus' <a href="http://wouwlabs.com/blogs/jeez/?p=197">post</a>, that I helped write.</i><br /><p>There is a lot of effort being put into <a class="wiki" href="http://trac.webkit.org/wiki/QtWebKit" style="text-decoration: none; color: rgb(187, 0, 0); border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(187, 187, 187); ">QtWebKit</a> in order to make it attractive on the mobile front.</p><p>Among a tons of bug fixes and good performance improvements there are also lots of new features being developed, mainly geared toward mobile deployment.</p><p>The goal with this tutorial is to help you understand some of these new features and how to make the best of them. Or said in other words; how to create a good mobile web view that can be used on touch devices.</p><p>First we should make it clear that QGraphicsWebView is the way forward, so if you want to target mobile devices, it is bye bye QWebView. Why is that? Well, the QWebView is based on the QWidget system, thus it cannot easily support rotation, overlays, hardware accelerated compositing and tiling. If you need a QWidget anyway, you can always construct a QGraphicsView (which is a QWidget) with a QGraphicsWebView inside. This is more or less what we will start with.</p><p>Let's start with the most simple QGraphicsWebView based "browser" ever:</p><pre class="wiki" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(247, 247, 247); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(215, 215, 215); border-right-color: rgb(215, 215, 215); border-bottom-color: rgb(215, 215, 215); border-left-color: rgb(215, 215, 215); margin-top: 1em; margin-right: 1.75em; margin-bottom: 1em; margin-left: 1.75em; padding-top: 0.25em; padding-right: 0.25em; padding-bottom: 0.25em; padding-left: 0.25em; overflow-x: auto; overflow-y: auto; background-position: initial initial; background-repeat: initial initial; ">int main(int argc, char **argv)<br />{<br /> QApplication app(argc, argv);<br /> const int width = 640;<br /> const int height = 480;<br /><br /> QGraphicsScene scene;<br /><br /> QGraphicsView view(&scene);<br /> view.setFrameShape(QFrame::NoFrame);<br /> view.setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);<br /> view.setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);<br /><br /> QGraphicsWebView webview;<br /> webview.resize(width, height);<br /> webview.load(QUrl("http://www.wouwlabs.com/blogs/jeez"));<br /><br /> scene.addItem(&webview);<br /> view.resize(width, height);<br /> view.show();<br /><br /> return app.exec();<br />}</pre><p>Here we just bootstrap a QGraphicsView application and add a QGraphicsWebView to the scene.</p><p>It might seem a bit useless as you can only navigate through one website, but it serves well as a simple example. Notice that I'm disabling the scrollbars on the graphics view because <a class="wiki" href="http://www.blogger.com/wiki/QtWebKit" style="text-decoration: none; color: rgb(187, 0, 0); border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(187, 187, 187); ">QtWebKit</a> handles scrolling and scrollbars automatically. This is due to scrolling optimizations and due to the fact that web authors can interact with the scrollbars for instance style them differently.</p><p>On touch-based mobile devices a feature known as tiling is often used. It is used due to the interaction model (touch) as well as a scrolling "optimization". With this optimization we will have to deal with scrolling ourselves and we thus will have to say good bye to the scrollbar styling. Not a big thing, as mobile browsers usually do not even show scrollbars, but use scroll indicators instead.</p><p>Tiling basically means that the contents of the viewport is separated into a grid of tiles, so that when you update some area, instead of just updating the area you actually update the whole tile. This gives a few advantages for scrolling as when you scroll you do not need to repaint the new visible area for each scroll step, as you update a row of tiles each time; tiles that are often only partly on the screen. This minimized all the paint calls that we have to do and makes it possible to make nicely kinetic scrolling a possibility.</p><p>Loading, layouting etc are blocking operations. Though barely noticeable on a Desktop machines, these operations can block for a long time on a mobile device, letting the user believe the application has become unresponsive and died. Scrolling which is done by using fingers will also stall and give a bad user experience.</p><p>One way to over come this issue, is to do all loading, layouting and painting (basically all non-UI related work) in another thread or process, and just blit the result from the web process/thread to the UI. When using tiles, you can blit any tile available when scrolling. When no tile is available you can show a checkerboard tile instead, not letting the scrolling wait for the tiles to be updated. This results in a responsive interface, with the only disadvantage that you from time to time might see checkerboard tiles.</p><p>Tiles also helps with zooming. Repainting at each zoom level change during a zoom animation is basically impossible on a mobile device (or desktop for that sake) and thus with tiling, you can stop the tiles from being updates and just scale the already existing tiles, and then at the end of the animation update tiles on top of the scaled ones.</p><p>For now we will ignore the blocking issue and concentrate on the tiling and the interaction model.</p><p><br /></p><h3 id="Resizetocontents" style="font-family: Arial, Verdana, 'Bitstream Vera Sans', Helvetica, sans-serif; font-weight: bold; letter-spacing: -0.018em; page-break-after: avoid; font-size: 14px; margin-left: 0px; ">Resize to contents<a class="anchor" href="http://www.blogger.com/post-create.g?blogID=36235783#Resizetocontents" title="Link to this section" style="text-decoration: none; color: rgb(215, 215, 215); border-bottom-width: 1px; border-bottom-style: none; border-bottom-color: rgb(187, 187, 187); border-top-style: none; border-right-style: none; border-left-style: none; border-width: initial; border-color: initial; font-size: 0.8em; vertical-align: text-top; visibility: hidden; "></a></h3><p>When using tiling, we basically want the QGraphicsWebView to act as our contents, as it supports tiling a.o. things. In order for this we need to make it resize itself to the size of its contents. For this we will use <a class="ext-link" href="http://doc.qt.nokia.com/4.7-snapshot/qgraphicswebview.html#resizesToContents-prop" style="text-decoration: none; color: rgb(187, 0, 0); border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(187, 187, 187); "><span class="icon" style="background-image: url(http://trac.webkit.org/chrome/common/extlink.gif); background-attachment: initial; background-origin: initial; background-clip: initial; background- padding-left: 12px; background-position: 50% 50%; background-repeat: no-repeat no-repeat; color:initial;"> </span>QGraphicsWebView::resizesToContents</a>.</p><p>From Qt 4.7 documentation: "If this property is set, the QGraphicsWebView will automatically change its size to match the size of the main frame contents. As a result the top level frame will never have scrollbars. It will also make CSS fixed positioning to behave like absolute positioning with elements positioned relative to the document instead of the viewport."</p><p>This setting, thus, removes the scrollbars for us on the main frame and makes our QGraphicsWebView resize itself to the size of its content.</p><p>Enabling it, is as easy as:</p><pre class="wiki" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(247, 247, 247); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(215, 215, 215); border-right-color: rgb(215, 215, 215); border-bottom-color: rgb(215, 215, 215); border-left-color: rgb(215, 215, 215); margin-top: 1em; margin-right: 1.75em; margin-bottom: 1em; margin-left: 1.75em; padding-top: 0.25em; padding-right: 0.25em; padding-bottom: 0.25em; padding-left: 0.25em; overflow-x: auto; overflow-y: auto; background-position: initial initial; background-repeat: initial initial; "> webview.setResizesToContents(true); </pre><p>Qt 4.7 docs also says: "This property should be used in conjunction with the QWebPage::preferredContentsSize property. If not explicitly set, the preferredContentsSize is automatically set to a reasonable value."</p><p>If we are going to expand our mobile web view to the size of the contents of its contained page, then that is going to make the view a lot bigger that what can fit on the device's screen!</p><p><br /></p><h3 id="Usingaviewasthewindowtothecontents" style="font-family: Arial, Verdana, 'Bitstream Vera Sans', Helvetica, sans-serif; font-weight: bold; letter-spacing: -0.018em; page-break-after: avoid; font-size: 14px; margin-left: 0px; ">Using a view as the window to the contents<a class="anchor" href="http://www.blogger.com/post-create.g?blogID=36235783#Usingaviewasthewindowtothecontents" title="Link to this section" style="text-decoration: none; color: rgb(215, 215, 215); border-bottom-width: 1px; border-bottom-style: none; border-bottom-color: rgb(187, 187, 187); border-top-style: none; border-right-style: none; border-left-style: none; border-width: initial; border-color: initial; font-size: 0.8em; vertical-align: text-top; visibility: hidden; "></a></h3><p>The idea is to have a custom widget which has a QGraphicsWebView as a class member. Remember that the QGraphicsWebView will be as big as its content's size, so this custom widget will serve as a window, as a viewport.</p><p>There is not much more to say here, and the following code snippet illustrates it well:</p><pre class="wiki" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(247, 247, 247); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(215, 215, 215); border-right-color: rgb(215, 215, 215); border-bottom-color: rgb(215, 215, 215); border-left-color: rgb(215, 215, 215); margin-top: 1em; margin-right: 1.75em; margin-bottom: 1em; margin-left: 1.75em; padding-top: 0.25em; padding-right: 0.25em; padding-bottom: 0.25em; padding-left: 0.25em; overflow-x: auto; overflow-y: auto; background-position: initial initial; background-repeat: initial initial; ">class MobileWebView : public QGraphicsWidget<br />{<br /> Q_OBJECT<br /><br />public:<br /> MobileWebView(QGraphicsItem *parent = 0);<br /> ~MobileWebView();<br /><br /> bool mousePress(const QPoint &value);<br /> void mouseMove(const QPoint &value);<br /> void mouseRelease(const QPoint &value);<br /><br />private:<br /> QGraphicsWebView *webView;<br />}; </pre><p>In order to properly handle mouse events you must install an event filter on web view or stack it behind its parent object (search for QGraphicsItem::ItemStacksBehindParent). By doing this the mouse events will reach a MobileWebView instance before they reach the member QGraphicsWebView.</p><p>Keep in mind that you'll need to add some logic in order to distinguish different mouse events and gestures like a single click, double click, click-and-pan, etc. That is left as an exercise to the reader.</p><p>Also keep in mind that as stated earlier, scrolling will have to be implemented manually, just as zoom etc.</p><p><br /></p><h3 id="Adjustinghowcontentsislaidout" style="font-family: Arial, Verdana, 'Bitstream Vera Sans', Helvetica, sans-serif; font-weight: bold; letter-spacing: -0.018em; page-break-after: avoid; font-size: 14px; margin-left: 0px; ">Adjusting how contents is laid out<a class="anchor" href="http://www.blogger.com/post-create.g?blogID=36235783#Adjustinghowcontentsislaidout" title="Link to this section" style="text-decoration: none; color: rgb(215, 215, 215); border-bottom-width: 1px; border-bottom-style: none; border-bottom-color: rgb(187, 187, 187); border-top-style: none; border-right-style: none; border-left-style: none; border-width: initial; border-color: initial; font-size: 0.8em; vertical-align: text-top; visibility: hidden; "></a></h3><p>When testing the above on a device, you will notice that many pages do not layout very nicely. In particular the width is larger than the width of the device!</p><p>The way web contents is laid out, is that the first the viewport width is used for fitting the contents. If the contents doesn't fit due to non-flexible element with a width larger than the viewport width, the min width possible will be used. As most pages are written with a desktop browser in mind, that makes only very few sites fit into the width of a mobile device.</p><p><a class="wiki" href="http://www.blogger.com/wiki/QtWebKit" style="text-decoration: none; color: rgb(187, 0, 0); border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(187, 187, 187); ">QtWebKit</a> has a way to force a layout to a given width/height. What really matters here is the width. If you layout a size to a given width, it will get that width and images etc might get cut of. The width/height is also used for laying out fixed elements, but when we resize the QGraphicsWebView to the size of the contents, fixed elements will not be relative to the view, which is the behaviour found on most mobile browsers.</p><p>From <a class="ext-link" href="http://doc.qt.nokia.com/4.7-snapshot/qwebpage.html#preferredContentsSize-prop" style="text-decoration: none; color: rgb(187, 0, 0); border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(187, 187, 187); "><span class="icon" style="background-image: url(http://trac.webkit.org/chrome/common/extlink.gif); background-attachment: initial; background-origin: initial; background-clip: initial; background- padding-left: 12px; background-position: 50% 50%; background-repeat: no-repeat no-repeat; color:initial;"> </span>Qt 4.7 documentation</a>: "If this property is set to a valid size, it is used to lay out the page."</p><p>We saw that this property is automatically set to a reasonable value when using QGraphicsWebView::resizesToContents.</p><p>As you can imaging, laying out with a smaller viewport can cause pages to break, and as thus, a default value has been chosen so that it almost breaks no pages while still making the sites fit. This value is 960x800.</p><p>If the device have a bigger resolution, this value can be changed using:</p><pre class="wiki" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(247, 247, 247); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(215, 215, 215); border-right-color: rgb(215, 215, 215); border-bottom-color: rgb(215, 215, 215); border-left-color: rgb(215, 215, 215); margin-top: 1em; margin-right: 1.75em; margin-bottom: 1em; margin-left: 1.75em; padding-top: 0.25em; padding-right: 0.25em; padding-bottom: 0.25em; padding-left: 0.25em; overflow-x: auto; overflow-y: auto; background-position: initial initial; background-repeat: initial initial; "> webview.page()->setPreferredContentsSize(QSize(desiredWidth, desiredHeight)); </pre><p>You can play around with this and find your own magic number, but let's stick to this 960px wide for now.</p><p><br /></p><h3 id="Theviewportmetatag" style="font-family: Arial, Verdana, 'Bitstream Vera Sans', Helvetica, sans-serif; font-weight: bold; letter-spacing: -0.018em; page-break-after: avoid; font-size: 14px; margin-left: 0px; ">The 'viewport' meta tag<a class="anchor" href="http://www.blogger.com/post-create.g?blogID=36235783#Theviewportmetatag" title="Link to this section" style="text-decoration: none; color: rgb(215, 215, 215); border-bottom-width: 1px; border-bottom-style: none; border-bottom-color: rgb(187, 187, 187); border-top-style: none; border-right-style: none; border-left-style: none; border-width: initial; border-color: initial; font-size: 0.8em; vertical-align: text-top; visibility: hidden; "></a></h3><p>As some sites do not work with 960 or want to have control on how the page is laid out, <a class="wiki" href="http://www.blogger.com/wiki/QtWebKit" style="text-decoration: none; color: rgb(187, 0, 0); border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(187, 187, 187); ">QtWebKit</a> as well as Android, Firefox Mobile and the iPhone Safari supports a meta tag called viewport.</p><p>This one also deserves a whole blog post for itself. For now let's just say that this is a meta tag that Apple came up with to make a web page capable of "telling" the browser how it wants to be shown.</p><p>More information: <a class="ext-link" href="http://developer.apple.com/safari/library/documentation/appleapplications/reference/safarihtmlref/articles/metatags.html" style="text-decoration: none; color: rgb(187, 0, 0); border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(187, 187, 187); "><span class="icon" style="background-image: url(http://trac.webkit.org/chrome/common/extlink.gif); background-attachment: initial; background-origin: initial; background-clip: initial; background- padding-left: 12px; background-position: 50% 50%; background-repeat: no-repeat no-repeat; color:initial;"> </span>http://developer.apple.com/safari/library/documentation/appleapplications/reference/safarihtmlref/articles/metatags.html</a> and<a class="ext-link" href="http://developer.apple.com/safari/library/documentation/appleapplications/reference/safariwebcontent/usingtheviewport/usingtheviewport.html" style="text-decoration: none; color: rgb(187, 0, 0); border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(187, 187, 187); "><span class="icon" style="background-image: url(http://trac.webkit.org/chrome/common/extlink.gif); background-attachment: initial; background-origin: initial; background-clip: initial; background- padding-left: 12px; background-position: 50% 50%; background-repeat: no-repeat no-repeat; color:initial;"> </span>http://developer.apple.com/safari/library/documentation/appleapplications/reference/safariwebcontent/usingtheviewport/usingtheviewport.html</a></p><p>In <a class="wiki" href="http://www.blogger.com/wiki/QtWebKit" style="text-decoration: none; color: rgb(187, 0, 0); border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(187, 187, 187); ">QtWebKit</a> trunk we already have support for this with a nice API. You must connect the signal from QWebPage::viewportChangeRequested(const ViewportHints& hints) to a slot of your mobile web view and use what is provided by QWebPage::ViewportHints to updated your viewport size, scale range, and so on.</p><p>This can be tricky and that's why I'm not going deeper on it right now. Since I know you are curious about it I'll leave you with one more exercise! So try to understand how the guys from MicroB and Firefox Mobile dealt with this:</p><p><a class="ext-link" href="http://hacks.mozilla.org/2010/05/upcoming-changes-to-the-viewport-meta-tag-for-firefox-mobile" style="text-decoration: none; color: rgb(187, 0, 0); border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(187, 187, 187); "><span class="icon" style="background-image: url(http://trac.webkit.org/chrome/common/extlink.gif); background-attachment: initial; background-origin: initial; background-clip: initial; background- padding-left: 12px; background-position: 50% 50%; background-repeat: no-repeat no-repeat; color:initial;"> </span>http://hacks.mozilla.org/2010/05/upcoming-changes-to-the-viewport-meta-tag-for-firefox-mobile</a></p><p><br /></p><h3 id="Enablingthetiling" style="font-family: Arial, Verdana, 'Bitstream Vera Sans', Helvetica, sans-serif; font-weight: bold; letter-spacing: -0.018em; page-break-after: avoid; font-size: 14px; margin-left: 0px; ">Enabling the tiling<a class="anchor" href="http://www.blogger.com/post-create.g?blogID=36235783#EnablingtheTiling" title="Link to this section" style="text-decoration: none; color: rgb(215, 215, 215); border-bottom-width: 1px; border-bottom-style: none; border-bottom-color: rgb(187, 187, 187); border-top-style: none; border-right-style: none; border-left-style: none; border-width: initial; border-color: initial; font-size: 0.8em; vertical-align: text-top; visibility: hidden; "></a></h3><p>We haven't actually enabled tiling yet, so lets go ahead and do that. That is very simple as it is basically a setting:</p><pre class="wiki" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(247, 247, 247); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(215, 215, 215); border-right-color: rgb(215, 215, 215); border-bottom-color: rgb(215, 215, 215); border-left-color: rgb(215, 215, 215); margin-top: 1em; margin-right: 1.75em; margin-bottom: 1em; margin-left: 1.75em; padding-top: 0.25em; padding-right: 0.25em; padding-bottom: 0.25em; padding-left: 0.25em; overflow-x: auto; overflow-y: auto; background-position: initial initial; background-repeat: initial initial; "> QWebSettings::globalSettings()->setAttribute(QWebSettings::TiledBackingStoreEnabled, true); </pre><p>Voila! Mind that if you are going to add animations to your zoom/scale or want to implement a fancy kinetic scrolling you might want to take a look at QGraphicsWebView::setTiledBackingStoreFrozen. With this you can avoid updates to your tiles during an animation, for instance.</p><p><br /></p><h3 id="Avoidingscrollablesubelements" style="font-family: Arial, Verdana, 'Bitstream Vera Sans', Helvetica, sans-serif; font-weight: bold; letter-spacing: -0.018em; page-break-after: avoid; font-size: 14px; margin-left: 0px; ">Avoiding scrollable sub elements<a class="anchor" href="http://www.blogger.com/post-create.g?blogID=36235783#Avoidingscrollablesubelements" title="Link to this section" style="text-decoration: none; color: rgb(215, 215, 215); border-bottom-width: 1px; border-bottom-style: none; border-bottom-color: rgb(187, 187, 187); border-top-style: none; border-right-style: none; border-left-style: none; border-width: initial; border-color: initial; font-size: 0.8em; vertical-align: text-top; visibility: hidden; "></a></h3><p>One big issue with the above is that, iframes and sites using frames can contain scrollable sub elements. That doesn't work well with the touch interaction model, as you want a finger swipe to scroll the whole page and not end up just scrolling a sub frame. Most mobile browser work around this by enabling something called frame flattening.</p><p>Going straight to the point:</p><pre class="wiki" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(247, 247, 247); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(215, 215, 215); border-right-color: rgb(215, 215, 215); border-bottom-color: rgb(215, 215, 215); border-left-color: rgb(215, 215, 215); margin-top: 1em; margin-right: 1.75em; margin-bottom: 1em; margin-left: 1.75em; padding-top: 0.25em; padding-right: 0.25em; padding-bottom: 0.25em; padding-left: 0.25em; overflow-x: auto; overflow-y: auto; background-position: initial initial; background-repeat: initial initial; "> QWebSettings::globalSettings()->setAttribute(QWebSettings::FrameFlatteningEnable, true); </pre><p>This will make all frames from a web page expand themselves to the size of their contents, keeping us free of scrollable subareas.</p>Kenneth Rohde Christiansenhttp://www.blogger.com/profile/01428436368669198056noreply@blogger.com37tag:blogger.com,1999:blog-36235783.post-69682332399308026032010-05-31T17:05:00.000-03:002010-05-31T17:06:03.154-03:00New Qt WebKit nearing releaseSo, for the first time, we are going to release Qt WebKit as a separate project. This does not mean that we will stop releasing it as part of Qt, but that if you are stuck on an older Qt 4.6 release, it is still possible to use a newer Qt WebKit. In the future this also allows us to release more often, independently of Qt.<br /><br />The last half year we have been hard at work on enabling the use of Qt WebKit on mobile devices, while still supporting and maintaining our brilliant support of Desktop applications. Targeting mobile devices is an ongoing challenge due to other interaction modes, smaller screen sizes and less powerful processor.<br /><br />We have been growing our teams and our responsibilities and it has been an interesting, if not tiring, half a year :-) Locally, we have been growing our Brazilian core team to 5 people, plus creating some new teams working on related projects. What a rush! :-) We now have teams in at least Norway, Finland, Brazil and Boston working directly on WebKit.<br /><br />So what have our distributed teams been up to?<br /><br />Well, Qt WebKit has always felt reasonable fast on the Desktop. Not top in the class, but working quite well. On mobile devices the story was very different; dog slow, barely usable! Lots of time has gone into improving that situation by doing profiling and hunting down performance bottlenecks. Improvements that also help the Desktop case. We are not done yet, but our upcoming QtWebKit 2.0 release is a major improvement. Combining QtWebKit 2.0 with the upcoming Qt 4.7, are you will even get a few extra optimizations for free.<br /><br />Sometimes we had to make more drastic changes, such as using tiling for archiving good scrolling performance. Tiling basically means that you don't paint directly to the screen, but instead to surfaces (which then can actually benefit from hardware acceleration). When scrolling you then move/blit these tiles. The standard way of doing scrolling, is that you copy an area and move that area, but you always have to paint the new area visible. With tiling you normally update a few more row of tiles than those visible on the screen, so when moving you do not always need to repaint. Repainting can actually mostly be done when you are idle.<br /><br />We also experimented with rendering the tiles in another process, so that scrolling would never be blocked by loading or painting, but with the downside than when there is no tile painted, a checkerboard pattern would be shown, very similarly to the iPhone. Getting this right is a lot of work and with the announcement of WebKit2, we decided to postpone it for now and later concentrate on WebKit2 instead, as that will bring similar benefits, a.o.<br /><br />Tiling helps with the mobile interaction model, as it is quite fast to zoom. Zooming basically scaled the tiles and then re-renders, which can be done with a smooth animation. Unfortunately, just as on the iPhone, we cannot support fixed elements, so if page authors really need that, they will have to go for CSS3 Transformations which with accelerated compositing will be painted as another layer on top of the tiles.<br /><br />Which brings me to the next feature: accelerated compositing. Some of the new CSS3 features such as animation and transformations were created with hardware acceleration in mind, for instance the CSS 3 transformation live in another coordinate system, and thus animating a transformation change does not change any DOM values such as for instance 'left'. The idea is that the elements being transformed are painted as a separate layer, composited on top of the normal web contents. On the iPhone, this is implemented using CoreAnimation, I believe, and is thus, tied to hardware support. For Qt, we implemented it on top of out Graphics View system, which means that even when the Graphics System is not being accelerated by hardware, we will archive better performance due to caching of the painted elements. Pretty cool stuff. Unfortunately, just as with tiling, it is only possible to take advantage of this new feature if you use the QGraphicsWebView and not the older brother, QWebView.<br /><br />You can imagine that most web sites were written for a width a lot larger than what you find on most phones, so either you can show the page in its original size and you will have to scroll a lot, or you can zoom it out to fit within the width of the page. The latter makes it impossible to read the text, so instead of laying out to the size of the width, we have new API (actually originally introduced in Qt 4.6) that makes it possible to lay out the contents as it was having a different viewport. The iPhone and Android does the same, using a value between 800 and 1008 pixels (980 is always default on the iPhone, where as Android varies). Laying out with such a width makes the site's contents still readable most of the time, without breaking the layout. To give the page authors a bit more control over this, Apple introduced a meta tag called "viewport", which is now supported by most mobile browsers, including Mozilla Fennec. This tag allows the site author to specify which width should be used for laying out the contents as well as which zoom factor should be used, and within which limits.<br /><br />As touch is becoming standard on cell phones, we also had to make a few other adaptations. For instance sites with frame sets are mostly useless due to various scrolling sub elements; the same count for sites with iframes. What most mobile browsers do to fix this, is to apply frame flattening, which we now also supports/ Originally a feature invented by Nokia, but first really being put to good use on the iPhone and on Android.<br /><br />We didn't leave out non-touch phones either, and as such implemented spatial navigation (aka. keyboard navigation), which is not only useful for cellphones with keyboard only, but also by tv's and set-top boxes.<br /><br />Not everything has been related to mobile though, and as such our teams have been working on implementing new HTML5 elements such as the Progress element and concentrating on some CSS features and DOM features, such as DOM Level 3 CustomEvents, 'view-mode' Media Feature, as well as some features from CSSOM Views making it possible to listen to media and media feature changes; very useful for creating Web applications.<br /><br />Wow, it has been a loooong half year it seems! Now time to prepare for our local release parties! :-)Kenneth Rohde Christiansenhttp://www.blogger.com/profile/01428436368669198056noreply@blogger.com3tag:blogger.com,1999:blog-36235783.post-71952340428020698062010-03-15T22:51:00.002-03:002010-03-15T23:03:49.878-03:00Bossa ConferenceSo, once more I'm in the Amazon, but this time not for any fancy jungle trip, but instead for the great <a href="http://www.bossaconference.org">Bossa Conference</a>! The conference has been really great, with a focus a bit different that other conferences as the focus is on socializing, getting to know people, and actually getting stuff done.<div><br /></div><div>It was really nice to meet my friends from Qt again, as well as meet my fellow WebKit hacker, Ariya Hidayat, who has since moved on to Qualcomm. The conference spotted a lot of technical talks about everything from audio details, bluetooth to now we should develop UI widgets in the near future. </div><div><br /></div><div>This year is the first year that I did any presentation, so I started out by doing two :-) Here you have the first one, enjoy.</div><br /><div style="width:425px" id="__ss_3374573"><strong style="display:block;margin:12px 0 4px"><a href="http://www.slideshare.net/kchristi/connecting-technology-for-great-experiences-how-does-qml-and-web-fit-together" title="Connecting Technology for Great Experiences - How does QML and Web fit together?">Connecting Technology for Great Experiences - How does QML and Web fit together?</a></strong><object width="425" height="355"><param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=bossa-conf-1-final-100309072737-phpapp01&stripped_title=connecting-technology-for-great-experiences-how-does-qml-and-web-fit-together" /><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=bossa-conf-1-final-100309072737-phpapp01&stripped_title=connecting-technology-for-great-experiences-how-does-qml-and-web-fit-together" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="355"></embed></object><div style="padding:5px 0 12px">View more <a href="http://www.slideshare.net/">presentations</a> from <a href="http://www.slideshare.net/kchristi">kchristi</a>.</div></div>Kenneth Rohde Christiansenhttp://www.blogger.com/profile/01428436368669198056noreply@blogger.com35tag:blogger.com,1999:blog-36235783.post-62522198615104767022009-12-15T10:48:00.005-03:002009-12-18T13:48:23.219-03:00Nokia WebKit Code CampSo last week Nokia ASF hosted a Qt WebKit Code Camp in Wiesbaden, Germany. It was the first time most of the people working on - or using WebKit inside Nokia, got together and met face-to-face. It is obvious that we have a great bunch of clever people, but also that we still have a lot of work to do before out Qt port is up to the level of the Google and Apple ports, but don'tworry, we are definitely getting there!<br /><br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRL5gblbpm4dJ3Pger3cZ-8naUSGs6wP0RiDzoFvvJ7YM603S4b1BD3p8D4vkAt1EI2sg5rtr3CZp-DKqULZ2xmWS50h7cLZYybKw8-Tybcy9WvFr7aOOETKn7rFIxSoCe0DX53g/s1600-h/IMG_0858.jpg"><img style="cursor: pointer; width: 400px; height: 251px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRL5gblbpm4dJ3Pger3cZ-8naUSGs6wP0RiDzoFvvJ7YM603S4b1BD3p8D4vkAt1EI2sg5rtr3CZp-DKqULZ2xmWS50h7cLZYybKw8-Tybcy9WvFr7aOOETKn7rFIxSoCe0DX53g/s400/IMG_0858.jpg" alt="" id="BLOGGER_PHOTO_ID_5415461001891975058" border="0" /></a><br /></div><br />Before the event, I had a look at adding tiling support to see if it would actually bring noticable performance improvements. I did a small presentation about it, which you can find below. <b>[UPDATE]</b> The implementation is an experiment to avoid doing unnecessary calls into WebCore and is only meant as input for other people working on adding tiling support to WebKit. I would like to thanks ProFusion, Antti Koivisto and Benjamin Poulain for fruitful discussions who helped to the current implementation.<div><div><div style="width: 425px; text-align: left;" id="__ss_2722699"><a style="margin: 12px 0pt 3px; font-family: Helvetica,Arial,Sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-size-adjust: none; font-stretch: normal; display: block; text-decoration: underline;" href="http://www.slideshare.net/kchristi/considering-tiling-for-a-better-user-interface" title="Considering Tiling for a better User Interface">Considering Tiling for a better User Interface</a><object style="margin: 0px;" height="355" width="425"><param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=asf-webkit-summit-final-091215074559-phpapp02&stripped_title=considering-tiling-for-a-better-user-interface"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=asf-webkit-summit-final-091215074559-phpapp02&stripped_title=considering-tiling-for-a-better-user-interface" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" height="355" width="425"></embed></object><div style="font-size: 11px; font-family: tahoma,arial; height: 26px; padding-top: 2px;">View more <a style="text-decoration: underline;" href="http://www.slideshare.net/">documents</a> from <a style="text-decoration: underline;" href="http://www.slideshare.net/kchristi">kchristi</a>.</div></div><br />Having working on NPAPI plugin support before, I can tell you it is not a very beautiful part of a browser. Some time ago, we were so lucky that Girish joined us and implemented support for windowless plugins. Now he has even gone one step further and written a huge blog post about it, something that is definately worth checking out. You can find it here:<br /><br /><a href="http://blog.forwardbias.in/2009/12/flash-in-qgraphicsview.html">http://blog.forwardbias.in/2009/12/flash-in-qgraphicsview.html</a><br /><br />Also, join me in congratulating him in becoming an official WebKit committer!<br /><br />At the office we are starting to get into Christmas mood! and friday I'm heading off to Europe to celebrate the Christmas holidays with my family and girlfriend.<br /><br />Anselmo just took this nice picture from our office:<br /><br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggjxSerC8BQSv6DgC5FTyITn-ld96YIk5XsivXOwLwW0qVcWcCOGxwKSYinUnKs44ANRSREF1PEmepC_R2C-4DRU0SpPNjuR2ZLYum175GjSFCk-vC9nYeAtEb8P0a7Lo4cVmh-g/s1600-h/4177061349_7f5b8034bd.jpg"><img style="cursor: pointer; width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggjxSerC8BQSv6DgC5FTyITn-ld96YIk5XsivXOwLwW0qVcWcCOGxwKSYinUnKs44ANRSREF1PEmepC_R2C-4DRU0SpPNjuR2ZLYum175GjSFCk-vC9nYeAtEb8P0a7Lo4cVmh-g/s400/4177061349_7f5b8034bd.jpg" alt="" id="BLOGGER_PHOTO_ID_5415462835644314178" border="0" /></a><br /><br /><div style="text-align: right;"><span style="font-style: italic;">Merry Christmas to you all!</span><br /></div></div></div></div>Kenneth Rohde Christiansenhttp://www.blogger.com/profile/01428436368669198056noreply@blogger.com7tag:blogger.com,1999:blog-36235783.post-48238652777503989362009-12-01T10:20:00.002-03:002009-12-01T10:47:51.600-03:00The world just became a bit cuterToday is an important day for me, as <span style="font-weight: bold;">Qt 4.6</span> has been released; the first release that I have been deeply involved in.<br /><br />Actually, I can say that my employer Nokia Technology Institute, INdT, has done a great job on Qt 4.6, as we have contributed to various areas:<br /><ul><br /><li><span style="font-weight: bold;">QGraphicsAnchorLayouts</span>: My ex-team implemented a new layout together with Jan Arve, where one can anchor widgets together in the Graphics View. It is extremely flexible, as the layout has no pre-defined concept of how should the items be arranged. The final position of each item is totally dependent on how you set the anchors.<br /><br /></li><li><span style="font-weight: bold;">Qt Mobile Demos</span>: Three great demos, showing off the power and flexibility of the Qt 4.6 development framework. This video says it all:<br /><br /><object height="340" width="560"><param name="movie" value="http://www.youtube.com/v/PCx8RfNhhXk&hl=en_US&fs=1&"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/PCx8RfNhhXk&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" height="340" width="560"></embed></object><br /><span style="font-size:85%;"><span style="font-style: italic;">A cool video by my co-worker Ian Andrade</span></span><br /><br /></li><li><span style="font-weight: bold;">PySide</span>: A Python binding for Qt 4.6, that currently works on Linux, Maemo and Mac OS X, with Windows on the way.<br /><br /></li><li><span style="font-weight: bold;">QtWebKit:</span> Great works has happened on the WebKit front. Personally I have worked on plugin issues, a new QGraphics-based widget, testing framework, API reviewing, DOM access from C++, among other things. It has been a crazy 9 months since 4.5, and it is amazing how much we have got done.<br /><br />For more information on the WebKit work, checkout my Maemo Summit presentation, but keep in mind that the PluginDatabase support has been postponed for the next release.<br /><div style="width: 425px; text-align: left;" id="__ss_2197863"><a style="margin: 12px 0pt 3px; font-family: Helvetica,Arial,Sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-size-adjust: none; font-stretch: normal; display: block; text-decoration: underline;" href="http://www.slideshare.net/qtbynokia/developments-in-the-qt-webkit-integration" title="Developments in the Qt WebKit Integration">Developments in the Qt WebKit Integration</a><object style="margin: 0px;" height="355" width="425"><param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=maemosummit-091012083548-phpapp01&stripped_title=developments-in-the-qt-webkit-integration"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=maemosummit-091012083548-phpapp01&stripped_title=developments-in-the-qt-webkit-integration" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" height="355" width="425"></embed></object><div style="font-size: 11px; font-family: tahoma,arial; height: 26px; padding-top: 2px;">View more <a style="text-decoration: underline;" href="http://www.slideshare.net/">documents</a> from <a style="text-decoration: underline;" href="http://www.slideshare.net/qtbynokia">Nokia, Qt Development Frameworks</a>.</div></div><br /></li></ul><br />Please enjoy Qt 4.6! <a href="http://qt.nokia.com/download">Download it today</a>!Kenneth Rohde Christiansenhttp://www.blogger.com/profile/01428436368669198056noreply@blogger.com16tag:blogger.com,1999:blog-36235783.post-429952448363202972009-11-12T17:51:00.004-03:002009-11-12T17:59:22.661-03:00There we Go.Last week I visited Google for the first time. I even passed by Rob Pikes office...<br /><br />Today I'm using the language he and his team just created. Lots of inspirations from C, python, limbo and friends, and I actually had fun playing around with it.<br /><pre><br />1 package main<br />2<br />3 import "fmt"<br />4<br />5 func PrintAll(x interface{}) {<br />6 var str string;<br />7 switch value := x.(type) {<br />8 case bool:<br />9 if value {<br />10 str = "True"<br />11 } else {<br />12 str = "False"<br />13 }<br />14 case string:<br />15 str = value<br />16 default:<br />17 return<br />18 }<br />19 fmt.Printf(str + "\n")<br />20 }<br />21<br />22<br />23 func main() {<br />24 PrintAll("Hello world");<br />25 PrintAll(true);<br />26 PrintAll(false);<br />27 }<br /><br /></pre>Now look at that :-) Hello World, here we Go.<br /><pre>$ 6g test.go && 6l test.6 && ./6.out<br />Hello world<br />True<br />False</pre><br />PS: "!" replaced with ".", emphasising that I'm talking about "Go" and not the "Go!" language.Kenneth Rohde Christiansenhttp://www.blogger.com/profile/01428436368669198056noreply@blogger.com12tag:blogger.com,1999:blog-36235783.post-53924240252415504892009-10-20T14:49:00.003-03:002009-10-20T15:04:15.115-03:00LatinoWare 2009So, tomorrow 7 people from the Qt Labs Americas at the Brazilian Nokia Technology Institute are going to the biggest South American open source conference, <a href="http://www.latinoware.org/">LatinoWare</a> in Foz de Iguaçu.<br /><br /><br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAGr8c_GlFTXTwdPgDlh9Ghbjpno84gtVlfXgfmOzCvmruOLLS2AoQQ3cJ111RuGPWtq2nebV8te3uvtWAN_9Bv7cXPn-dzlmg3I6_Hk7szWrMV8NGt1ieLoNDeotLWgdCHgTatA/s1600-h/Latinoware2009_435x120px.gif"><img style="cursor: pointer; width: 400px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAGr8c_GlFTXTwdPgDlh9Ghbjpno84gtVlfXgfmOzCvmruOLLS2AoQQ3cJ111RuGPWtq2nebV8te3uvtWAN_9Bv7cXPn-dzlmg3I6_Hk7szWrMV8NGt1ieLoNDeotLWgdCHgTatA/s400/Latinoware2009_435x120px.gif" alt="" id="BLOGGER_PHOTO_ID_5394744386280861202" border="0" /></a><br /><br /></div><br />Jesus Sanchez-Palencia and Anselmo Melo will do a mini introduction-course to most the new features on Qt 4.6, and I will do a more elaborated presentation about what we have done with out WebKit support in 4.6, and where we are heading!<br /><br />Artus Souza, Caio Marcelo e Eduardo Fleury will also be doing very interesting presentations about the KDE Plama Netbook edition, as well about Qt Anchor Layouts.<br /><br />So, hope to see many of you there!Kenneth Rohde Christiansenhttp://www.blogger.com/profile/01428436368669198056noreply@blogger.com5tag:blogger.com,1999:blog-36235783.post-43013690233924155932009-10-16T14:53:00.008-03:002009-10-16T16:48:57.126-03:00Great week of Qt/Maemo events<div style="text-align: center;"><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2tbxbn5nCDJk3XTLhU8zeSLV6Lvsvdt2agV5DUMdBXWFRr1Oh_SIP4JxHdNujkjLUpweeKLT962Qj_bYfW95gtTlLTQE1e0FH7gqK5O6cNlCUmBFwBF3A0XHv5RFSWwUWDIN2KQ/s1600-h/20091009_001.jpg"><img style="cursor: pointer; width: 400px; height: 225px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2tbxbn5nCDJk3XTLhU8zeSLV6Lvsvdt2agV5DUMdBXWFRr1Oh_SIP4JxHdNujkjLUpweeKLT962Qj_bYfW95gtTlLTQE1e0FH7gqK5O6cNlCUmBFwBF3A0XHv5RFSWwUWDIN2KQ/s400/20091009_001.jpg" alt="" id="BLOGGER_PHOTO_ID_5393285658752218034" border="0" /></a><br /></div><br />So I arrived in Brazil again after one great week in Europe, attending the Maemo Summit in Amsterdam and the Qt Developer Days in Munich.<br /><br />The Maemo Summit was a great event and it was nice to finally meet the community, now that I have worked with Maemo for 3 years.<br /><br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCFczAK1wGyAyRxghV3DYSHo0alxIg0whiagfcS8LfOPmaqa8jW6uzvLrPMHn04KAtAn_ri3CzYZT2e2ZqgAlMmOX7BFRpXYvIWI_G0Dpgz35KZJoDm0HW6vJxywWegHfKtcEzWA/s1600-h/20091010_009.jpg"><img style="cursor: pointer; width: 400px; height: 225px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCFczAK1wGyAyRxghV3DYSHo0alxIg0whiagfcS8LfOPmaqa8jW6uzvLrPMHn04KAtAn_ri3CzYZT2e2ZqgAlMmOX7BFRpXYvIWI_G0Dpgz35KZJoDm0HW6vJxywWegHfKtcEzWA/s400/20091010_009.jpg" alt="" id="BLOGGER_PHOTO_ID_5393285834840584226" border="0" /></a><br /></div><br />I did a short presentation (25 min) about QtWebKit, what it is, why we chose WebKit for Qt, and about what we have been working on the last year. It was surprisingly well received, as different people told me that it was one of the best presentations there.<br /><br />I also got to meet one of the guys from the Nokia Starlight project, which has since when been opensourced (<a href="http://www.opensource.nokia.com/Starlight">read more here!</a>). Their work is really great and I'm looking forward cooperation more with the guys and getting their changes reviewed and integrated in the upstream WebKit.<br /><br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEBZJUiZEmpvbC-xTBQrwvw3NgJqKDOz76Uhnplr4vekNl5dJBncPMpWGfpzXdZRuzoeETacqpSqr14_519BOcEUvOIouzOJsxLxayYc4wT0nj1I1_DQIaC31SyPGkyRwzOQhdgg/s1600-h/20091012_001.jpg"><img style="cursor: pointer; width: 225px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEBZJUiZEmpvbC-xTBQrwvw3NgJqKDOz76Uhnplr4vekNl5dJBncPMpWGfpzXdZRuzoeETacqpSqr14_519BOcEUvOIouzOJsxLxayYc4wT0nj1I1_DQIaC31SyPGkyRwzOQhdgg/s400/20091012_001.jpg" alt="" id="BLOGGER_PHOTO_ID_5393286338257966706" border="0" /></a><br /></div><br />As you can probably deduct from the above, I have been working remotely at part of the Qt WebKit team for about a year now. Great gang of people, so it has been a very interesting and productive year.<br /><br />Qt 4.6 is looking really good and I'm currently thinking much about what we should concentrate on for Qt 4.7. Shortly, I expect to be looking into creating a clean and open backlog on the WebKit wiki.<br /><br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRDLqyq6cvJ9EYPS7Eok2bIpfhPutkQ_7rnHAq2w3EFFmqMEIgBC9ELGlvzHktRUkEYn4gNVjTsKjDoiACknXi81truaC5mktbkByaJAkI6jR5eOJbFXpXJ0I6_LAolXhn0mHjxA/s1600-h/20091013_009.jpg"><img style="cursor: pointer; width: 400px; height: 225px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRDLqyq6cvJ9EYPS7Eok2bIpfhPutkQ_7rnHAq2w3EFFmqMEIgBC9ELGlvzHktRUkEYn4gNVjTsKjDoiACknXi81truaC5mktbkByaJAkI6jR5eOJbFXpXJ0I6_LAolXhn0mHjxA/s400/20091013_009.jpg" alt="" id="BLOGGER_PHOTO_ID_5393286540020886706" border="0" /></a><br /></div><br />After the Maemo Summit, I went to Munich to give a more elaborated and detailed WebKit talk. Qt Developer Days is growing! Almost 700 people present, very professional presentations, great oppotunities to meet up with the trolls - something that just has to be experienced.<br /><br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfyAZSxAbMHgDHegqsBX5XSvaGCG4kIkQRJgC7qUvvJzoTrNORxSdMxIaW2VTOUUYmXRwSRTLpmvdEROYRJvsUQDwPx5w55IfjryY0MvV_0XKagoRNdkSn5YA7jB6H5g_NhP1Ryg/s1600-h/20091014_002.jpg"><img style="cursor: pointer; width: 400px; height: 225px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfyAZSxAbMHgDHegqsBX5XSvaGCG4kIkQRJgC7qUvvJzoTrNORxSdMxIaW2VTOUUYmXRwSRTLpmvdEROYRJvsUQDwPx5w55IfjryY0MvV_0XKagoRNdkSn5YA7jB6H5g_NhP1Ryg/s400/20091014_002.jpg" alt="" id="BLOGGER_PHOTO_ID_5393286684307104498" border="0" /></a><br /></div><br />Personally it was a great oppotunity for me to meet the difference people working on WebKit, such as people from Starlight, a WebKit performance hacker from The University of Szeged, people working on the Nokia Web Runtime etc. and it was also nice to be among many of my friends again :-)<br /><br />After the Qt Dev Days in San Francisco, I will see if it will be possible to publish the slides online, so watch this space!Kenneth Rohde Christiansenhttp://www.blogger.com/profile/01428436368669198056noreply@blogger.com16tag:blogger.com,1999:blog-36235783.post-31379151430649934702009-08-18T11:05:00.002-03:002009-08-18T11:14:05.741-03:00LGPL Python bindings for Qt released<div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.pyside.org"><img style="cursor: pointer; width: 199px; height: 102px;" src="http://www.pyside.org/wp-content/themes/openbossa/images/logo.png" alt="" border="0" /></a><br /><br /></div>I am very happy to announce that our OpenBossa labs have just released LGPL licensed Python bindings for Qt, endorced by Nokia. It is our first product being released as part of our newly founded <a href="http://qtlabs.openbossa.org">Qt Labs Americas</a>, and we hope they will be well received by the Python and Qt communities.<br /><br />Though, not being part of the Python team, I have long followed the project and tried to encourage the team and their work, and I think that they can all be very proud.<br /><br />The product is not a binding alone, but also a Binding Generator and an API Extractor, which should make it easier to generate bindings for other languages as well as easily bind other Qt libraries, and make them accessibly through Python.<br /><br />Please check out the brand new site: <a href="http://www.pyside.org">http://www.pyside.org</a>Kenneth Rohde Christiansenhttp://www.blogger.com/profile/01428436368669198056noreply@blogger.com25tag:blogger.com,1999:blog-36235783.post-66746961934765265972009-06-02T15:06:00.002-03:002009-06-02T17:24:43.892-03:00A look at QML Declarative UI and CSS3 AnimationsLast week a wrote a small article, taking a good look at Qt's new declarative UI format, QML as well as the new CSS3 features in WebKit, allowing for somewhat similar features.<br /><br />Both are very interesting technologies, that might become quite important in the long run, so if you are interested in one of the above, you should really go check out the article :-)<br /><br />The article introduces the two technologies, their concepts, and tries to look at their similarities and differences. Write writing the article I implemented some examples in both QML and CSS3, and I have based some of the article on these findings.<br /><br />You can find the article here:<br /><br /><a href="http://kenneth.christiansen.googlepages.com/DUI.html">http://kenneth.christiansen.googlepages.com/DUI.html</a>Kenneth Rohde Christiansenhttp://www.blogger.com/profile/01428436368669198056noreply@blogger.com10tag:blogger.com,1999:blog-36235783.post-23470442889230860002008-12-17T17:36:00.004-03:002008-12-18T10:01:32.039-03:00WebKit EFL receives its first patchSo first I would like to thanks everyone for their interest and support for the EFL-port of WebKit. People have been asking me for some screenshots, so I made one.<br /><br />It doesn't look like much as our test browser doesn't even have an address field yet, but at least it shows that I have logged into my google account and that it is possible to use Google Reader :-)<br /><br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4aunjaGk9ut4HkhRcCyyLxVtcRvWHWDJcPBSN7GtAUlHdg6VSKPGDL9-ANOi3Y9WiqgXqUc5IDH56nWK87XZcB8fA_nXUCWfPCkOCnztqAKN19NjH7MTNt3_uXXZN1ZcFAfRAvw/s1600-h/eweblauncher.png"><img style="cursor: pointer; width: 400px; height: 267px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4aunjaGk9ut4HkhRcCyyLxVtcRvWHWDJcPBSN7GtAUlHdg6VSKPGDL9-ANOi3Y9WiqgXqUc5IDH56nWK87XZcB8fA_nXUCWfPCkOCnztqAKN19NjH7MTNt3_uXXZN1ZcFAfRAvw/s400/eweblauncher.png" alt="" id="BLOGGER_PHOTO_ID_5280861519949773010" border="0" /></a><br /><br /><div style="text-align: left;">Later I hope to do a nice browser demo using Edje, if someone else doesn't step up and does it.<br /><br />Anyway, we also got our first patch today from Cedric Bail that fixes some crashes he had running on his system. Really nice knowing that people are already playing around with the code!<br /><br />EDIT: People asked me how to get and compile the code, well it is easy:<br /><br /><ul><li>git clone git://code.staikos.net/webkit webkit</li><li>cd webkit</li><li>git checkout origin/kenneth/efl-port</li><li>./autogen.sh –with-port=efl --enable-web-workers=no</li><li>make</li></ul>In order to test, you can run the test launcher:<br /><ul><li>Programs/EWebLauncher http://www.enlightenment.org<br /></li></ul></div></div>Kenneth Rohde Christiansenhttp://www.blogger.com/profile/01428436368669198056noreply@blogger.com32tag:blogger.com,1999:blog-36235783.post-29635782156374427032008-12-16T17:18:00.006-03:002008-12-16T18:36:12.358-03:00WebKit ported to the Enlightenment Foundation LibrariesSo, the last month and a half I have been porting WebKit to the EFL libraries. It has been something that I wanted to do for a long time, but due to other projects I never got around to it. It has been a very interesting last month and a half and it is very gratifying having something that is already usable :-) I hope that now vtorri (from #edevelop on freenode) will be very happy as he have encouraged me to do the port for I think about half a year.<br /><br />Some of our Manaus-based guys were already looking at doing the port so I went one month to the tropical rain forest to get the port really going. A lot of things are already working, some things ain't, like keyboard input, but we're looking into that. Just be patient :-)<br /><br />If people are interested the code lived in the kenneth/efl-port branch of <a href="http://code.staikos.net/cgi-bin/gitweb.cgi?p=webkit;a=shortlog;h=kenneth/efl-port">git://code.staikos.net/webkit</a> - and thus shares place with the Qt port.<br /><br />Now begins the work on improving the code, getting it reviewed and sometime in the future getting it all upstream!<br /><br />EDIT: Keyboard input now works thanks to Diego Gonzalez!Kenneth Rohde Christiansenhttp://www.blogger.com/profile/01428436368669198056noreply@blogger.com27tag:blogger.com,1999:blog-36235783.post-51485638989859309262008-09-19T09:43:00.002-03:002008-09-19T09:46:43.771-03:00The JavaScript wars have begon...<div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.satine.org/archives/2008/09/19/squirrelfish-extreme-fastest-javascript-engine-yet/"><img style="cursor: pointer; " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwgGrYClITFATAvnjyE0mefue5Md9H9qdIVcYw-d8IesJnHkzOh-5eVLKHne7za51ko8BPkXEvwBlYRB6fXdkhkv1xXqVnv1aaLofQ89ZhVIuqR6Gbe14_sDJ9nPLh56w6z6tlLA/s400/engine-perf.png" alt="" id="BLOGGER_PHOTO_ID_5247712671739752466" border="0" /></a><br /></div>Kenneth Rohde Christiansenhttp://www.blogger.com/profile/01428436368669198056noreply@blogger.com11tag:blogger.com,1999:blog-36235783.post-61254693078213207712008-08-12T15:16:00.007-03:002008-08-12T17:12:27.882-03:00Presenting QEdjeSo Nokia bought Trolltech and brought Qt into the fold. Really surprising to most of us, but also very exciting. I had never used Qt before, though heard lots of nice things about it from my team at the German Aerospace Center. Actually, I have never been much fond of KDE, and 4.0 also didn't make me that excited, though I must say that the same counts for GNOME these days.<br /><br />Anyway, Qt seems to be gaining ground so I installed Qt, and me and my team started researching this nice new technology. I have never been fond of programming in C++, maybe I have changed, but programming in Qt/C++ have been a breeze so far. Qt is a high quality piece of software and something not to be ignored.<br /><br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqL2azjp1SyhdI-kDn1dz0zJLG4bEcxylfgEqZiyIkSSM7O_JOx9J4ewLr5hZexpshxXvkPuIe55pi80PaLxCGnj-no3iTnnFSGaQCBxfFwlI-C-eg73a4m4QbfeOr4_nn-fAXCw/s1600-h/141.txt.png"><img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqL2azjp1SyhdI-kDn1dz0zJLG4bEcxylfgEqZiyIkSSM7O_JOx9J4ewLr5hZexpshxXvkPuIe55pi80PaLxCGnj-no3iTnnFSGaQCBxfFwlI-C-eg73a4m4QbfeOr4_nn-fAXCw/s400/141.txt.png" alt="" id="BLOGGER_PHOTO_ID_5233709518120954738" border="0" /></a></div><br />Working on Canola and other internal projects during the last year have brought a lot of experience to the team. We have learned that our investment in MVC, our plugin system and the Edje [1] canvas interface description language have born fruits, and is something that we cannot do without; I'm still amazed how much we completed in basically a years time.<br /><br />So Qt seems to be an important player in Nokia's future, atleast for the Internet Tablet, so to be better aligned with that, we researched the viability of porting Edje to Qt, and are very proud of making the announcement that the most important parts are already there and released under the same license model as Qt.<br /><br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbFxGepgZKFsZclAxG_UXBl3-Q4MHI1euMBvXtVyBSGiNldqw1Gqg7ydcfPFVJbedZTzniv57JeLXy7I-uj_QosAKyZn4AhAJW8oBQl0qpLEZXCxNqW9MGUUWLs7AHIUX86Ba-qQ/s1600-h/121.txt.png"><img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbFxGepgZKFsZclAxG_UXBl3-Q4MHI1euMBvXtVyBSGiNldqw1Gqg7ydcfPFVJbedZTzniv57JeLXy7I-uj_QosAKyZn4AhAJW8oBQl0qpLEZXCxNqW9MGUUWLs7AHIUX86Ba-qQ/s400/121.txt.png" alt="" id="BLOGGER_PHOTO_ID_5233709891673670866" border="0" /></a></div><br />Three guys from the team are present at the aKademy conference and have been giving a lecture on Edje and our QEdje project. The presentation went very well, and the audience seemed interested. Aaron Seigo went so far to look at implementing Plasma [2] objects (so-called plasmoids) using QEdje. How that went I don't know, but I guess we will see shortly.<br /><br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWEgm_x8CyHhML1871kPpxf8JoXnx6t4J7aClJxZyZKWw4s0_7Ap2SohssxM2qKRpvzL8DryqhMzDD7hP1Y4sgSqA2LJIRer2jkkX7QP7hJXIf8UPOWPnRu1t-EfZlcXPnGR2bRA/s1600-h/130.txt.png"><img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWEgm_x8CyHhML1871kPpxf8JoXnx6t4J7aClJxZyZKWw4s0_7Ap2SohssxM2qKRpvzL8DryqhMzDD7hP1Y4sgSqA2LJIRer2jkkX7QP7hJXIf8UPOWPnRu1t-EfZlcXPnGR2bRA/s400/130.txt.png" alt="" id="BLOGGER_PHOTO_ID_5233710206600647298" border="0" /></a><br /><br /></div>The presentation was written using python together with QEdje and pretty fancy in my opinion, but we have put a PDF version online for those of you who are interested and didn't go to the lecture.<br /><br /><center><br /><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/QZUwUDeJfX0&rel=0&color1=11645361&color2=13619151&fs=1"><param name="wmode" value="transparent"><param name="allowFullScreen" value="true"><embed src="http://www.youtube.com/v/QZUwUDeJfX0&rel=0&color1=11645361&color2=13619151&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" wmode="transparent" width="425" height="344"></embed></object></center><br /><br />It can be found here: "<a href="http://dev.openbossa.org/trac/qedje/attachment/wiki/WikiStart/qedje-presentation.pdf.7z">QEdje Presentation</a>" (7z compressed) at the <a href="http://dev.openbossa.org/trac/qedje/">project site</a>. A high quality version of the video is also <a href="http://www.youtube.com/watch?v=QZUwUDeJfX0&fmt=18">available</a>.<br /><br />QEdje is still running a bit slow on the Internet Tablet and we have been writing various profiles which we have shared with the Qt developers, showing that we will need some heavy optimizations before we can write applications like Canola and Carman using Qt + QEdje. The Qt developers have been really friendly and paid attention to our requirements, and to make my day, Andreas Aardal Hanssen <a href="http://dot.kde.org/1218387228/">announced</a> [3] at the conference that they are working hard on improving the raster graphics path in Qt and that it is already 40 times faster in some situations. Now that is what I needed to hear! <span style="font-style: italic;">Tusind Takk!</span><br /><br />[1]: Building Interfaces with Edje: <a href="http://docs.enlightenment.org/books/edjebook/edjebook.pdf">The Edje Developers Guide</a><br />[2]: Plasma, <a href="http://plasma.kde.org/">http://plasma.kde.org</a><br />[3]: Qt 4.5 to dramatically improve QtWebKit and QGraphicsView..., <a href="http://dot.kde.org/1218387228/">dot.kde.org</a>Kenneth Rohde Christiansenhttp://www.blogger.com/profile/01428436368669198056noreply@blogger.com32tag:blogger.com,1999:blog-36235783.post-86234771168242843842008-06-24T03:45:00.004-03:002008-06-28T06:50:51.025-03:00Get your cars ready!It has been some time since my employer INdT has released a new version of our car application, Carman. Carman is a OBD-II analyzer for the Nokia Internet Tablet, that presents various car information (via the onboard debug II interface) to the user, such as engine rounds per minute, calculated load value, vehicle speed, cooland temperature etc.<div><br /></div><div style="text-align: center;"><img style="cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinNWSylGXb0-Id2Clw_uPtyKPGFBsfyicuMnla9jNVXK-VZvhpRplMCpu9nwZ6mapwUP4-3AWWHiyJrl00Mo0_mlQj9Z01A4tC7W10FK-L_m7wxrXUomxK4wCIjEs4qBt9vuwLQA/s400/02_carman_tuning.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5215338729577289330" /><br /></div><div><br /></div><div>Carman isn't dead though, and a new, much-improved, version is about to be unleashed :-) still fully <span class="Apple-style-span" style="font-style: italic;">opensourced</span>! The new version is similar in architecture to Canola and provides a whole new user experience. As Canola, Carman is now based on the EFL framework and spots an integrated touch-based interface, full with animation, maps integration as well as trip reporting!</div><div><br /></div><div>Marcelo Oliveira has a <a href="http://www.marceloeduardo.com/blog/design/user-interface-design/carman-is-also-alive-news-upcoming-update">post</a>, explaining the details and showing off some of the cool new artwork! Though, not yet integrated with Canola, we are definately toying around with the idea, as well as hoping to be able to release Canola as opensource.</div>Kenneth Rohde Christiansenhttp://www.blogger.com/profile/01428436368669198056noreply@blogger.com8tag:blogger.com,1999:blog-36235783.post-31142253033521358452008-03-11T18:43:00.004-03:002008-03-11T18:52:28.830-03:00Canola2 vertical modeMarcelo did a nice <a href="http://www.marceloeduardo.com/blog/design/user-interface-design/team-work-canola2-portrait-test">post</a> on running Canola in vertical mode and has a video demonstrating the result:<br /><br /><object type="application/x-shockwave-flash" data="http://blip.tv/scripts/flash/showplayer.swf?enablejs=true&feedurl=http%3A%2F%2Fmarceloeduardo%2Eblip%2Etv%2Frss&file=http%3A%2F%2Fblip%2Etv%2Frss%2Fflash%2F741309&showplayerpath=http%3A%2F%2Fblip%2Etv%2Fscripts%2Fflash%2Fshowplayer%2Eswf" allowfullscreen="true" id="showplayer" width="400" height="255"><param name="movie" value="http://blip.tv/scripts/flash/showplayer.swf?enablejs=true&feedurl=http%3A%2F%2Fmarceloeduardo%2Eblip%2Etv%2Frss&file=http%3A%2F%2Fblip%2Etv%2Frss%2Fflash%2F741309&showplayerpath=http%3A%2F%2Fblip%2Etv%2Fscripts%2Fflash%2Fshowplayer%2Eswf"><param name="quality" value="best"><embed src="http://blip.tv/scripts/flash/showplayer.swf?enablejs=true&feedurl=http%3A%2F%2Fmarceloeduardo%2Eblip%2Etv%2Frss&file=http%3A%2F%2Fblip%2Etv%2Frss%2Fflash%2F741309&showplayerpath=http%3A%2F%2Fblip%2Etv%2Fscripts%2Fflash%2Fshowplayer%2Eswf" quality="best" name="showplayer" type="application/x-shockwave-flash" width="400" height="255"></embed></object><br /><br />The vertical mode is possible by using Xrandr, which has been ported to Mamona and the Chinook version of Maemo (os2008) by our [INdT] Mamona team. Really cool stuff. Great work guys :-)<br /><br />Now let's hope someone has the time to adapt the interface for vertical usage.<br /><br />PS: Leo reminded me to tell that not one line of code was made to the Canola2 before filming this video :-)Kenneth Rohde Christiansenhttp://www.blogger.com/profile/01428436368669198056noreply@blogger.com13tag:blogger.com,1999:blog-36235783.post-40212995752939799542008-01-15T15:34:00.000-03:002008-01-15T15:46:25.676-03:00Bossa Conference '08If you didn't have the privilege of joining our Bossa Conference last year, now is your chance. It was the first INdT sponsored conference on Mobile / Open Source Software and it was a huge success.<br /><br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDJfiomMP2XjBTAGgL3JX7Hbb130dbYza_Bd-UCMbxV035LcZTEmHDOZGA8hmskvPSNINQ07vjNH_LQhEvVWAsQT4htZ2NjlvF5dXJ6ccqq0DwnUAqVwKpRwBPfHa11dIc7M38mg/s1600-h/BossaConference08_Post.png"><img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDJfiomMP2XjBTAGgL3JX7Hbb130dbYza_Bd-UCMbxV035LcZTEmHDOZGA8hmskvPSNINQ07vjNH_LQhEvVWAsQT4htZ2NjlvF5dXJ6ccqq0DwnUAqVwKpRwBPfHa11dIc7M38mg/s400/BossaConference08_Post.png" alt="" id="BLOGGER_PHOTO_ID_5155775512024774738" border="0" /></a><br /></div><br />To quote some of our attendances:<br /><br /><span style="font-style: italic; font-weight: bold;">"The best Open Source conference I had the pleasure of attending."</span><br /><div style="text-align: right;"><span style="font-style: italic;">Zack Rusin<br />KDE/MESA/Gollium3D</span><br /></div><br /><span style="font-style: italic; font-weight: bold;">"The Bossa Conference was an awesome event. For me it was the best open source conference in 2007. Don't miss the next one..."</span><br /><div style="text-align: right;"><span style="font-style: italic;">Marcel Holtmann<br />Bluez Maintainer</span><br /></div><br /><span style="font-style: italic; font-weight: bold;">"Sand, sun and small devices. BOSSA was the perfect conference to discuss the future of Linux on embedded platforms."</span><br /><div style="text-align: right;"><span style="font-style: italic;">John 'J5' Palmieri<br />Red Hat/OLPC/DBus</span><br /></div><br /><span style="font-style: italic; font-weight: bold;">"Best conference I've ever been to. DON'T miss this one."</span><br /><div style="text-align: right;"><span style="font-style: italic;">Carsten 'Rasterman' Haltzler<br />OpenMoko/Enlightenment</span><br /></div><br /><br /><br />To sum up: <quote><span style="font-weight: bold;">Bossa Conference '08</span><br /><br />Come and enjoy a innovative conference on Open Source Software for Mobile Embedded Platforms. Located in Porto de Galinhas, one of the tropical paradises of Brazil, the Bossa Conference will happen during 16th to 19th of March at Summerville Beach Resort (<a href="http://www.summervilleresort.com.br/">www.summervilleresort.com.br</a>). The perfect combination of developers, pleasant environment and good ideas.<br /><br />Let's go! We're waiting for you.<br /><br /><br />Information and registration: <a href="http://www.bossaconference.org/">www.bossaconference.org</a>.</quote>Kenneth Rohde Christiansenhttp://www.blogger.com/profile/01428436368669198056noreply@blogger.com8tag:blogger.com,1999:blog-36235783.post-44490904414744936342007-12-20T10:26:00.000-03:002007-12-20T10:41:33.013-03:00It's out!So, after a long time working hard on getting the new Canola2 ready, the first beta is now officially out the door. I would like to congratulate the whole team, the high spirit and INdT for making this project possible.<br /><br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://openbossa.indt.org.br/canola2/"><img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYeaSjCc9ongcil9S8-EjIAHczhAR9OH5ZnWYBv7Rbj5JsTUVl2QUKvUeHH2qZ9LCYElU1XIRNsJLPpsruwGgAFjNs20yECz_FRNzJhNT1-uv-eLYK3-H3BXdGNR5fiianMX5hQQ/s400/Canola_download_post.png" alt="" id="BLOGGER_PHOTO_ID_5146046195623586994" border="0" /></a><br /><br /></div>Canola2 is, in my eyes, a very different product than the former version. The basic principles are the same, <span style="font-style: italic;">easy media consumption</span>, but everything has been rewritten and Canola2 is definitely a more mature product. It comes with support for playback of local media such as video and audio, as well as a new way of watching your photos.<br /><br />But, now that Canola2 is a product for the Nokia Internet Tablet, we haven't neglected internet connectivity, and as a result Canola2 is shipped with support for internet radio, podcasts as well as photocasts (Flickr and Picasaweb have been confirmed to work).<br /><br />If the new beta makes you as excited as I am, I would suggest you to have a look at our new product site,<br /><br /><a href="http://openbossa.indt.org.br/canola2/">http://openbossa.indt.org.br/canola2/</a><br /><br />where you will find screenshots, videos and more or less all there is to know about the new beta.Kenneth Rohde Christiansenhttp://www.blogger.com/profile/01428436368669198056noreply@blogger.com21tag:blogger.com,1999:blog-36235783.post-77854229773284602892007-12-03T09:56:00.001-03:002007-12-03T10:07:21.644-03:009 days to launch!<div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_LN8fDFlNMUHkQe4UYljTgJ3em7-i_Ym1_3ckMvMUtl0ekOVT8zBO7WFKM_SFlqeZsLP_m5QTZ28lgfj7OmFFtU4Be8It15IAe4IQ-MrlmKmEVQwRnljyOteV2fjV_JN97mJs3g/s1600-r/canola_beta_head.png"><img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidjZYw3xMQRNFIh6m4uIdBHcZmvpZhmYflxVf8AyhycOlMBmpjeHKIRnVsg84qpsMjQkSbNB7E63j2W_gE92i3Zz2uKmO96PiBfS4tXN_xL1smZSvSj7Gg1pY7QMVnz6xDRq7jqg/s400/canola_beta_head.png" alt="" id="BLOGGER_PHOTO_ID_5139729882429247186" border="0" /></a><br /></div><br />So, 9 days to the launch of the first Canola 2.0 beta. We are all very excited and we want you to be too, so we launched a teaser site so that you can already have a look at what you can expect. The site can be found at:<br /><br /><a href="http://openbossa.indt.org.br/canola/index2.html">http://openbossa.indt.org.br/canola/index2.html</a><br /><br />A bit more information on what the first beta will contain please consult the <a href="http://www.marceloeduardo.com/blog/design/user-interface-design/canola2-beta-teaser-site-online">latest blog entry</a> by Marcelo.<br /><br />On a related note, Eduardo posted a video of Canola 2.0 running on the N770... pretty amazing that it runs as well as it does. Don't just throw out your N770 yet ;-) Also, Marcelo has written a <a href="http://www.marceloeduardo.com/blog/design/graphical-design/canola-20-design-process-the-photo-viewer">nice entry</a> about the photos view.<br /><div style="text-align: center;"><br /><object height="355" width="425"><param name="movie" value="http://www.youtube.com/v/SJf-w-OjPeM&rel=1&border=0"><param name="wmode" value="transparent"><embed src="http://www.youtube.com/v/SJf-w-OjPeM&rel=1&border=0" type="application/x-shockwave-flash" wmode="transparent" height="355" width="425"></embed></object></div>Kenneth Rohde Christiansenhttp://www.blogger.com/profile/01428436368669198056noreply@blogger.com8tag:blogger.com,1999:blog-36235783.post-32033055030007004252007-11-21T10:07:00.000-03:002007-11-21T10:22:59.162-03:00Follow up to yesterdays post<div style="text-align: left;">So our Canola posts yesterday created a long thread on <a href="http://www.internettablettalk.com/forums/showthread.php?p=97808#post97808">InternetTabletTalk.com</a> and Marcelo has been really busy answering most of the questions that have come up.<br /></div><br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgggxPxII4ZBLYxWCcCymhys8MkGjbaK9X3gY4_iBZ_3CP0zpe-SG3D0Qt_qG-JK-LoqD_1qLD26cZ9QgX0Pv6C-7n_MdATjfdKfsh9OMFroMlEu1ZFrhjKX8Kd8hKzmsy-INMcfQ/s1600-h/teste1.png"><img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgggxPxII4ZBLYxWCcCymhys8MkGjbaK9X3gY4_iBZ_3CP0zpe-SG3D0Qt_qG-JK-LoqD_1qLD26cZ9QgX0Pv6C-7n_MdATjfdKfsh9OMFroMlEu1ZFrhjKX8Kd8hKzmsy-INMcfQ/s400/teste1.png" alt="" id="BLOGGER_PHOTO_ID_5135280510216605730" border="0" /></a><br /></div><br />Artur wrote a blog <a href="http://labs.morpheuz.eng.br/blog/21/11/2007/canolas-media-player/">entry</a> giving a bit of light on our new media framework Atabake, as well as posted a screenshot of Canola playing back an episode of the Office (screenshot above).<br /><br />Last evening there was a little hackaton here at work. Andre had spend the last week writing a new input framework(*) for EFL, much in the spirit of, and inspired by that of GTK+ and QT, and just couldn't resist trying to port Gustavo iPhone like keyboard to it.<br /><br />It is currently only possible to write input methods in C, so Andre ported Gustavos code and made it into a real input method. Later, together with Gustavo and with input of a lot of excited co-workers we modified the interface and <a href="http://andrunko.blogspot.com/2007/11/iphone-like-keyboard-on-canola.html">hooked the keyboard up</a> in Canola.<br /><br />Though, we are not going to use this exact keyboard, it shows what is possible, and if we find it worthy we might consider develop a new Canola integrated keyboard based on this code ;-)<br /><center><br /><object height="355" width="425"><param name="movie" value="http://www.youtube.com/v/I8a57qsuOXo&rel=1&border=0"><param name="wmode" value="transparent"><embed src="http://www.youtube.com/v/I8a57qsuOXo&rel=1&border=0" type="application/x-shockwave-flash" wmode="transparent" height="355" width="425"></embed></object><br /></center><br />(*) This work was done, in order for us to use the Hildon keyboard from within Canola.Kenneth Rohde Christiansenhttp://www.blogger.com/profile/01428436368669198056noreply@blogger.com5tag:blogger.com,1999:blog-36235783.post-67212348624543429972007-11-20T15:35:00.000-03:002007-11-20T15:44:22.086-03:00So does it run on a real device?It does, and it is really smooth :-)<br /><br />Have a look at this video. It is not the latest version, but it demonstrates the responsiveness of our user interface.<br /><br /><object height="350" width="425"> <param name="movie" value="http://www.youtube.com/v/bH5zTtHIy2c"> <embed src="http://www.youtube.com/v/bH5zTtHIy2c" type="application/x-shockwave-flash" height="350" width="425"></embed> </object><br /><br /><a href="http://www.marceloeduardo.com/18012007015.mp4">High quality</a> version at Marceloeduardo.com<br /><a href="http://blip.tv/file/494477">High quality</a> version at Blip.tvKenneth Rohde Christiansenhttp://www.blogger.com/profile/01428436368669198056noreply@blogger.com8tag:blogger.com,1999:blog-36235783.post-34922512509775970262007-11-20T11:37:00.000-03:002007-11-20T13:14:00.493-03:00Canola video from the World Usability DaySo <a href="http://www.marceloeduardo.com/blog/">Marcelo Oliveira</a> posted a video to YouTube of him demonstrating Canola at the World Usability Day here in <a href="http://en.wikipedia.org/wiki/Recife">Recife</a>. The video shows one of the concepts that we have used to develop the new Canola, more specifically the photo view and the new player view (including cover arts). It also shows our kinetic list, which has evolved a bit since our prototypes.<center><br /><object height="355" width="425"><param name="movie" value="http://www.youtube.com/v/TujTj1Ej3Ck&rel=1"><param name="wmode" value="transparent"><embed src="http://www.youtube.com/v/TujTj1Ej3Ck&rel=1" type="application/x-shockwave-flash" wmode="transparent" height="355" width="425"></embed></object><br /></center><br /><a href="http://blip.tv/file/494168/">High quality version</a> at Blip.tv<br /><br />Most of what is shown in the concept is already implemented and fully working. I especially love the photo view, and when the concept was first presented to me, it rocked me away; but it also left me scared for a moment.<br /><br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy5kBNC_21thaGo_zxo7y3TR4zp8gftDlgjlWZu9C6pj5S_FEovM0N51YttQqmVDy9j9pMD7BVHqhKtK8wgwl-hsJrZJqqszlQMYP7csiuYtJrmxi8FIRtevG0VcOi0aYfk1pQxA/s1600-h/canola-photo-1.png"><img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy5kBNC_21thaGo_zxo7y3TR4zp8gftDlgjlWZu9C6pj5S_FEovM0N51YttQqmVDy9j9pMD7BVHqhKtK8wgwl-hsJrZJqqszlQMYP7csiuYtJrmxi8FIRtevG0VcOi0aYfk1pQxA/s400/canola-photo-1.png" alt="" id="BLOGGER_PHOTO_ID_5134936062429401010" border="0" /></a></div><br />How to implement this in a way that it is usable and fast of the N800 device? Lots of problems came up as anticipated, but <a href="http://leosobral.blogspot.com/">Leo Sobral</a> has been working hard and has come up with a lot of clever solutions, and I must say that his work has been bearing fruit - the result is just astonishing, and it is now a joy viewing my photos on my N800!<br /><br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKExUKvyiVhgzC12M7Npjmk03Vqr1Ud0vKIhOIWDKi8fMA4BXlcp0833zDgGJ6rJOIbFJTjuOTApmDVd-3A7XttIxPmo-uC_GkIrioeUGwh1aXMAiMhA2lZnPD7q0VKnz75DFfmg/s1600-h/canola-photo-2.png"><img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKExUKvyiVhgzC12M7Npjmk03Vqr1Ud0vKIhOIWDKi8fMA4BXlcp0833zDgGJ6rJOIbFJTjuOTApmDVd-3A7XttIxPmo-uC_GkIrioeUGwh1aXMAiMhA2lZnPD7q0VKnz75DFfmg/s400/canola-photo-2.png" alt="" id="BLOGGER_PHOTO_ID_5134936337307307970" border="0" /></a><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4qp-_x4KyrzrkaUwEU-ES5TJtQKr44idX5OrNeuzYUoSicUUu8pU7HYb08IUx08vLJDjmgYNwPvXrBiHmAK_G3TQU_vipXhwwja1IxE6BBuOHJ6ZKBFhoVgvxuQxBxcSZq04aAQ/s1600-h/canola-photo-3.png"><img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4qp-_x4KyrzrkaUwEU-ES5TJtQKr44idX5OrNeuzYUoSicUUu8pU7HYb08IUx08vLJDjmgYNwPvXrBiHmAK_G3TQU_vipXhwwja1IxE6BBuOHJ6ZKBFhoVgvxuQxBxcSZq04aAQ/s400/canola-photo-3.png" alt="" id="BLOGGER_PHOTO_ID_5134956416279416850" border="0" /></a><br /><br /></div>The audio view is also quite nice, especially the cover view, which lets you view your music by album, showing tracks and album cover. The actual player has also evolved, and it now feels a lot slicker.<br /><br />Though, it mostly looks the same, all of the code is new, and <a href="http://labs.morpheuz.eng.br/blog/">Artur Souza</a> has been hard at work making sure that everything works smoothly and fast, but he will tell you a lot more about this in an upcoming blog post.<br /><br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLy5R0Ur6VeNIyvyypO6aHHEPIJpGOKeDgGJtFqypru3WQuWml5z1FRO7DhT_2F8-cN8fWPYboR8voHCJmPEkE-GUmd_IMJg6tRcBLOlBFhKI4o5RGyBd7Xhl6lSzEysDCsoZFhA/s1600-h/album_art.png"><img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLy5R0Ur6VeNIyvyypO6aHHEPIJpGOKeDgGJtFqypru3WQuWml5z1FRO7DhT_2F8-cN8fWPYboR8voHCJmPEkE-GUmd_IMJg6tRcBLOlBFhKI4o5RGyBd7Xhl6lSzEysDCsoZFhA/s400/album_art.png" alt="" id="BLOGGER_PHOTO_ID_5134954938810667010" border="0" /></a><br /><br /></div>During the last week, I have been busy working on adding support for podcast, but now I'm back at working on the mapping view for at least a week. Afterward, I will try blogging about the podcast support.<br /><br />Oh, and now to forget...<br /><br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZCSI6r160gfLGJ45R0m8-PYVu2r5WwTy_FgKh-c8ltoNkml7-gUoQ5OQJhuyYYdaiGsIlBLbdRy415-s4vjPIKNyRP2m-uGoCOwlYE4a402I1vXHbRvak9-0_JK4M-IaUZICE1Q/s1600-h/canola_scale.png"><img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZCSI6r160gfLGJ45R0m8-PYVu2r5WwTy_FgKh-c8ltoNkml7-gUoQ5OQJhuyYYdaiGsIlBLbdRy415-s4vjPIKNyRP2m-uGoCOwlYE4a402I1vXHbRvak9-0_JK4M-IaUZICE1Q/s400/canola_scale.png" alt="" id="BLOGGER_PHOTO_ID_5134942260067209202" border="0" /></a><br /><br /><div style="text-align: left;">...our new framework provides scaling with very little work; imagine what the future might bring ;-)<br /></div></div>Kenneth Rohde Christiansenhttp://www.blogger.com/profile/01428436368669198056noreply@blogger.com10tag:blogger.com,1999:blog-36235783.post-21087177232612312902007-11-14T15:53:00.000-03:002007-11-14T15:57:15.548-03:00Insights on the new Canola menuAs a follow-up to my video post yesterday, our UI-guru Marcelo, shares some insights on the ideas behind the redesigned Canola menu.<br /><br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBRbsyLdMe0ahKx18xl2hJXMzJTlC4WQb44RBMabfQuo-IiM9Iq9PNG3REKfbECuFAE25MEwK8exCavWNgWFzlGmjIKurv6gXDtdIhXaViXDMsJhxwnHIS1V-edQhuXC7d0ftKiQ/s1600-h/canola_ce_grid_upper_home.png"><img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBRbsyLdMe0ahKx18xl2hJXMzJTlC4WQb44RBMabfQuo-IiM9Iq9PNG3REKfbECuFAE25MEwK8exCavWNgWFzlGmjIKurv6gXDtdIhXaViXDMsJhxwnHIS1V-edQhuXC7d0ftKiQ/s400/canola_ce_grid_upper_home.png" alt="" id="BLOGGER_PHOTO_ID_5132771715896426802" border="0" /></a><br /><br /><div style="text-align: left;">If you are into user interface design, this should appear to you. The blog post can be found here:<br /><br /><a href="http://www.marceloeduardo.com/blog/design/user-interface-design/canola-with-carman">http://www.marceloe...user-interface-design/canola-with-carman</a><br /></div></div>Kenneth Rohde Christiansenhttp://www.blogger.com/profile/01428436368669198056noreply@blogger.com3tag:blogger.com,1999:blog-36235783.post-9717839258407481642007-11-13T14:04:00.000-03:002007-11-13T14:25:15.810-03:00Another glimpse of CanolaAs promised, I just posted a video demonstrating a part of our Canola framework. Actually, I'm demonstrating a plugin that is not scheduled for inclusion in the first public release, but it shows some of the possibilities.<br /><br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2WsOz5jkI3U9ze68bYtJJ_rs2Cd4wUvXgdU8pbKG9bRekd3lkBNtgx3Gbuzh_6687jzmZz-GU-lvozhsQ_5W_SSNos5Gjkc6xqW8ki8KejXgOFU6XbMjHbvWpgrbzz2xsrLowgA/s1600-h/canola-car.png"><img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2WsOz5jkI3U9ze68bYtJJ_rs2Cd4wUvXgdU8pbKG9bRekd3lkBNtgx3Gbuzh_6687jzmZz-GU-lvozhsQ_5W_SSNos5Gjkc6xqW8ki8KejXgOFU6XbMjHbvWpgrbzz2xsrLowgA/s400/canola-car.png" alt="" id="BLOGGER_PHOTO_ID_5132376787082226914" border="0" /></a><br /></div><br />It is a car module showing RPM, average gasoline consumption, etc, using the python-obdlib from the Carman project (Another INdT project). It communicated with the car using the OBD-II protocol or, as in the demonstration, simulates.<br /><br />The plugin was written in about a day, excluding the time spent by the designers.<br /><br /><center><object height="355" width="425"><param name="movie" value="http://www.youtube.com/v/LPG3kTZ9mPI&rel=1"><param name="wmode" value="transparent"><embed src="http://www.youtube.com/v/LPG3kTZ9mPI&rel=1" type="application/x-shockwave-flash" wmode="transparent" height="355" width="425"></embed></object></center><br />Next up, some mapping action...Kenneth Rohde Christiansenhttp://www.blogger.com/profile/01428436368669198056noreply@blogger.com5