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.

As an update,

Qt team already ported hildonized QML + Qt4.6 on N900, please follow the instruction here:
http://labs.trolltech.com/blogs/2009...e-for-maemo-5/

It runs pretty smooth on my device though you may encounter some glitches because it's still in development.

I have successfully mixing QML with OpenGL ES2 (not yet test on the device). However, that means your territory is more than expected.

Feel free to publish your innovation!

Watch out the battery life differences in the images on the first post.. awesome.. :p

cheers!

Quote:

Originally Posted by Osilayer (Post 441484)

Watch out the battery life differences in the images on the first post.. awesome.. :p

cheers!

I was charging ... now go write some apps!

Thanks bbns for your evangelism here on QML. Interesting technology indeed, I also see it having a role in the Maemo developer offering.

Hi, Quim!

I am a Nokian (NRC). ;-) If I don't advocate it for N900 who will?
Regardless, I am looking forward to see more QML projects prosper, especially Augmented Reality apps.

Interesting bbns! So you're one of the first researchers in the new center @ LA!

Since you are interested in Javascript maybe you find interesting a neighbour thread here about Nokia Web Runtime coming to Maemo: http://talk.maemo.org/showthread.php?t=38214

Quote:

Originally Posted by qgil (Post 395277)

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

Hehe, that finger was seriously scary. Next time, please do use a hand, I mean really.. :-)
Other than that, great demo's, promissing stuff with the new QT.

I'm a newb here concerning Qt and developing apps and such. I have been programming PHP, Javascript, Actionscript and such, so I'm sure I can get my head around this at some point.

so, my qyestion regarding the Qt Creator and Qml files: how can I compile them to run on a N900? or can they (for now) only run on the N900 with the Qmlviewer?

With the Qt creator they have given us powerfull tools and I (and most likely a lot of others) would really like to get my head around it and start doing stuff with it.

Quote:

Originally Posted by misterm (Post 503974)

so, my qyestion regarding the Qt Creator and Qml files: how can I compile them to run on a N900? or can they (for now) only run on the N900 with the Qmlviewer?

Check the following link for getting further instructions:
http://labs.trolltech.com/blogs/2009...e-for-maemo-5/

There were also a good example how to run QML application without qmlviewer in the first post of this thread.

There are packages available for Maemo 5.

Quote:

With the Qt creator they have given us powerfull tools and I (and most likely a lot of others) would really like to get my head around it and start doing stuff with it.

Now there is unofficial Qt Creator available which have a graphical editor for QML. Check the following link for more information:

http://labs.trolltech.com/blogs/2010...at-is-bauhaus/

Thanx for the reply. I Have allready read and seen those pages, as well as many other pages and resources.
Qt creator is just amazing. lowering a lot of barriers and providing great ease in development.

I am just curious how i could package a project if I wanted to share it for other N900 owners for testing and such.

Quote:

Originally Posted by misterm (Post 504443)

I am just curious how i could package a project if I wanted to share it for other N900 owners for testing and such.

Required Qt packages are in extras-devel repository so that must be enabled of course. When you pack your app, it must have a dependency e.g. to libqt4-maemo5-declarative package. This is how it should go in my opinion, but I'm not a debian packaging expert so you better check this information e.g. from freenode #maemo irc channel.

Hi there,

Is there a way to integrate QML application with the maemo's back button? In Qt we need to create stackable windows and secondStackableWindow->setAttribute(Qt::WA_Maemo5StackedWindow);

Any chance to have it using QML?

BR

We're working on components for Qt Quick; http://gitorious.org/qt-components

Quote:

Originally Posted by hhartz (Post 806414)

We're working on components for Qt Quick; http://gitorious.org/qt-components

Thanks for the info! That looks really interesting! Keep us up-to-date!

Daniel