maemo.org - Talk - QML on N900

maemo.org - Talk (https://talk.maemo.org/index.php)

- Development (https://talk.maemo.org/forumdisplay.php?f=13)

- - QML on N900 (https://talk.maemo.org/showthread.php?t=35194)

Hi Gents and Ladies,

Here I would like to present you how to port Qt4.6 to N900 and use the Declarative UI benefits from QML. Qt team did pretty awesome job on this idea. They are too busy coding right now, therefore I would like to advertise this feature here.

If you don't know QML yet, probably you would like to look at this:
http://labs.trolltech.com/blogs/2009...tive-binaries/

It's a Javascript like language and allow you to build your own application rapidly. And yes, you don't need to really care about your development platform too much. All you need to do is using QmlViewer to examine your code. That's pretty much the same when you run on the device (though might be slightly different because of resolution and performance. And note that currently it's still highly experimental!)

Building Qt 4.6
To build Qt with QML support on N900, you need a 32-bit Linux box (better choice is Ubuntu, I am using Karmic, but you can use other versions as well).

I assumed you already have Maemo SDK running (also Nokia closed binary with SGX). Now it's time to download Qt-declarative UI branch:
http://qt.gitorious.org/+qt-kinetic-...-declarativeui

Once you unpack it within your scratchbox, say ~/qt-kinetic, create a build directory anywhere you like, e.g.: ~/qt-build, then do the following within scratchbox:

1. execute command 'export PKG_CONFIG_PATH=/usr/lib/pkgconfig; export PKG_CONFIG_SYSROOT=/'
2. edit ~/qt-kinetic/mkspecs/common/g++.conf, and remove -fvisibility=hidden -fvisibility-inlines-hidden, otherwise qemu would crash during compiling.
3. configure Qt with '~/qt-kinetic/configure -platform linux-g++ -release -opengl es -webkit -force-pkg-config --prefix=/opt/qt'
4. make
5. make install

It will take a whole day to compile this sexy devil. Make sure you have brewed the coffee. In case of running into linking problem (or you have trouble to pass EGL test), please try "export SUBLIBS='-lX11 -lXau -lEGL -lGLESv2 ...' ", throwing whatever GCC complains what's missing (I left my laptop in the office, forgive me I am typing this in my plain memory).

Now, you should have the Qt 4.6 DUI binary sitting in your scratchbox. You can either copy those binaries under /opt/qt to your device or mount it as NFS.

Test Run on Device
On this stage, you should be able to write your first QML application.

Code:

#include <QtGui/QApplication>

#include <QmlView>

#include <QUrl>

#include <QGLWidget>



int main(int argc, char *argv[])

{

    QApplication a(argc, argv);



    QmlView *canvas = new QmlView;

    QGLFormat format = QGLFormat::defaultFormat();

    format.setSampleBuffers(false);

    QGLWidget *glWidget = new QGLWidget(format); // make QmlView use OpenGL ES2 backend.

    glWidget->setAutoFillBackground(false);

    canvas->setViewport(glWidget);

    canvas->setUrl(QUrl::fromLocalFile("/home/user/demos/declarative/flickr/flickr-desktop.qml")); // wherever your qml file is.

    canvas->execute();

    canvas->show();



    return a.exec();

}

Then you will see the program running as same as this demo:
http://labs.trolltech.com/blogs/2009...eclarative-ui/

Attachment is the fresh screenshot as proof! =]

Finally, here are some few notices / limitation of current Qt4.6-QML:
1. Performance is not that great yet. You may suffer some tearing issues. Write your Qt app in full screen mode will give you some boost.
2. Document is bundle inside the source tree. 'make docs' will generate proper document for you.
3. -webkit may crash your qmlviewer under N900 if you wish to try. That's why I wrote the code with QmlView binding. If you want to play with qmlviewer, please remove -webkit from your configuration.
4. All credits go to Qt team. =] Thanks for their help on technical support. If you have any questions / comments, please don't hesitate to visit: http://labs.trolltech.com/blogs/
5. Happy hacking!

Well done! Did you also get the creepy finger compiled in the N900? ;)

Now seriously, this is probably too cool to end up in a forum post alone. Please consider a Qt Declarative UI page at http://wiki.maemo.org

Hi Quim,

Qt QML Team is very interested to see how community going to utilize QML I have forwarded the post to the team and they are pretty glad to see the post.

I did get almost everything compiled on N900. Almost all QML demo could be running on N900 from my current test. The coolest part is the built-in webkit / AJAX support. You can hook up any existing web service you want with only a few lines of code.

To experience full performance, you need to turn off compositor via "dsmetool -k /usr/bin/hildon-desktop" in the terminal. To turn back on: "dsmetool -t /usr/bin/hildon-desktop"

It runs very smooth after turning off hildon-desktop. FPS is 40-50. The scrolling is as smooth as milk shake and built-in kinetic effects (it also takes care of touch very nicely).

The Qt-Kinetic/DUI team page: http://labs.trolltech.com/page/Proje...aphics/Kinetic

You can reach them at irc.freenode.net #qt-kinetic.
Public's response will help QML to grow. Please don't hesitate to give feedback. =]

Note that I am not on behalf of Qt QML team. Just a QML lover! <3

The wiki page is here: http://wiki.maemo.org/QML

Though I don't know how to categorize it nor uploading the pictures.
Thanks!

Quote:

Originally Posted by bbns (Post 394440)

5. Happy hacking!

Perhaps you should add a disclaimer that no developer fingers were harmed during the making of the demo video ;)

Great job, by the way!

Quote:

Originally Posted by bbns (Post 395330)

The wiki page is here: http://wiki.maemo.org/QML

Though I don't know how to categorize it nor uploading the pictures.
Thanks!

There is a link "Upload file" when you are logged in. http://wiki.maemo.org/Special:Upload

Then just go to Edit mode in a page with categories and images to see how are they shown e.g. http://wiki.maemo.org/Miniature

Thanks for this post. Funny thing that I also started to look at this QML stuff few days ago. The building part was very useful. Thanks. I added a youtube video of running qml demo apps on N900 to my blog also. The video is available here:

http://www.youtube.com/watch?v=3VKqwDN6P6o

@zchydem

Thanks for the article. I am so honor. QML is very important part of designing experience hopefully to bring to the public.

Don't hesitate to drop your opinions to Qt-Kinetic team here: http://labs.trolltech.com/page/Proje...aphics/Kinetic

They are very passionate people.

Quote:

Originally Posted by bbns (Post 425228)

@zchydem

Don't hesitate to drop your opinions to Qt-Kinetic team here: http://labs.trolltech.com/page/Proje...aphics/Kinetic

They are very passionate people.

Yes, I will let them know if there's something to comment. Now I just need to find some time to get more familiar with QML. Do you happen to know is there already a Qt Creator version which has a graphical QML editor integrated? I have one version which supports qml files and projects, but the graphical part doesn't work. At least in mac.

I heard that they had a demo in Developer days where they used that. Maybe it's available from gitorious?

Quote:

Originally Posted by zchydem (Post 426185)

Current graphical editor is not released to public yet since it's not yet stable. Writing QML shouldn't be too hard with text editor though. It's just like writing HTML in traditional way.

Yet, they are writing code like crazy to ensure you will get a friendlier developing environment.