Archive for the ‘ qt ’ Category

First learning project with QML, the very basics – how to make a button

There has been a lots of discussion about the QML recently, so I decided to look at it myself as well. I think that QML is a very good new technology in the Qt and it makes it very much easier to implement out of the box UIs which are not bound to traditional UI logic, e.g. to what for example traditional desktop toolkits (like gtk+) tends to limit.

After one evening of doing things with varying success (in some places syntax is a bit weird and it required some patience to get over it) for one evening and I got a simple button and a dialpad with buttons implemented. Well it is not very usable dialpad, it even does not have 0 or any other buttons that might be necessary on it. Actually I was thinking of doing a calculator and that’s why I collected the buttons like this. I did not try it on N900 yet, but started trying it out on desktop because it is the fastest way to learn this new thing. After getting into it it started to feel pretty nice and many of the difficulties I immediately faced in the beginning were RTFM errors. Good idea is to read some documentation about it before swearing too many curse words – after all it is not bad at all. I got some help from Kate Alhola who is a guru with the QML already and it saved my time a little bit.

Here is what I did: I downloaded latest Qt SDK 4.7.0 to my Mac. I also installed it on my Linux laptop, but this example I created in the evening on Mac. I created empty QML project with Qt Creator. I added the following files to the project.

qmlwiz.qml (this is going to be my main, renders here a numeric keypad)
SimpleButton.qml (this contains the button code)

Unfortunately Blogger strips down all indents and the code looks a bit ugly, but I hope you can still read it somewhat. At least this is quite short reducing the chance of confusion.

SimpleButton.qml:

import Qt 4.7

Rectangle {
id: simpleButton
width: 60; height: 60;
radius: 10
border.color: "gray"
border.width: 2

gradient: Gradient {
GradientStop { position: 0.0; color: "gray" }
GradientStop { position: 0.33; color: "lightgray" }
GradientStop { position: 1.0; color: "darkgray" }
}

states: [
State {
name: "up"
PropertyChanges { target: down_anim; running: false }
PropertyChanges { target: up_anim; running: true }
},

State {
name: "down"
PropertyChanges { target: down_anim; running: true }
}

]
// transition is unfinished, possibly not needed at all, because states take care of it
transitions: [
Transition {
from: "up"; to: "down"
}
]

MouseArea {
anchors.fill: parent
onPressed: parent.state = "down"
onReleased: parent.state = "up"
}

SequentialAnimation {
id: down_anim
NumberAnimation {
target: simpleButton; properties: "scale"
from: 1.0; to: 0.8; duration: 100
easing.type: "OutExpo"

}
NumberAnimation {
target: simpleButton; properties: "opacity"
from: 1.0; to: 0.5; duration: 100
easing.type: "OutExpo"
}

running:false
}
SequentialAnimation {
id: up_anim

NumberAnimation {
target: simpleButton; properties: "opacity"
from: 0.5; to: 1.0; duration: 10
easing.type: "OutExpo"
}
NumberAnimation {
target: simpleButton; properties: "scale"
from: 0.8; to: 1.0; duration: 10
}

running:false
}

Text {
anchors.centerIn: parent
id: button_text
text: "0"
}
property alias label: button_text.text

}

qmlwiz.qml:

import Qt 4.7

Rectangle {
width: 800
height: 480

transform: Rotation { origin.x: 30; origin.y: 30; axis { x: 0; y: 1; z: 0 } angle: -10 }
Rectangle {
SimpleButton { x:100; y:100; label: "7" }
SimpleButton { x:100; y:100+64; label: "4" }
SimpleButton { x:100; y:100+64+64; label: "1" }
SimpleButton { x:100+64; y:100; label: "8" }
SimpleButton { x:100+64; y:100+64; label: "5" }
SimpleButton { x:100+64; y:100+64+64; label: "2" }
SimpleButton { x:100+64+64; y:100; label: "9" }
SimpleButton { x:100+64+64; y:100+64; label: "6" }
SimpleButton { x:100+64+64; y:100+64+64; label: "3" }

Text {
text: "Karoliina's Magic Keypad"
}
}
}

To run the application, there is a button with green triangle on near to the bottom of the left hand side toolbar on the Qt Creator. When the main program file is selected on the file list and this button is pressed, the program is run from Main.

I looked the documentation further and discovered that there is also a repeater functionality which can be used to build e.g. the dialpad or calcpad shown above without repeating the SimpleButton instantiations manually for each number.

There is plenty of room to make this nicer, actually I like a lot a such button that is composited from two layers: basic layer illustrates the button itself. Then a translucent highlight layer is composited on top of the button when press down occurs. When mouse button release occurs, the composited top layer is faded away with alpha channel ramp. I may try that next, but I did not have time to do the graphics for the highlight yet (as it looks the best when it is made with e.g. Inkscape and not attempted computationally). I may try that later. Now I wanted to finish something before going to sleep.

Bottom line is that QML is very nice and super easy. With short time it is possible to learn to do some quite nice things already. I rotated the scene a bit because I like how the menus on Colin McRae: Dirt are rotated. Actually with QML it is very easy to make similar dynamic animated rotation so that the scene slightly turns by itself on time back and forth. To do that, I was thinking using the NumberAnimation. I may try that after doing the composited button which I think is even cooler. Then I need to also hook these to C++ application to do the calculation logic on the C++ side. Kate has a nice AR-Drone control app doing this exactly already, so I need to look her code to see how to do it. Quick look reveals that it is very easy. I need to try maybe tomorrow if I have time.

Advertisements

Why Maemo is a powerful platform? Because of native applications!

I have been thinking what is the major difference of Maemo compared to many other platforms, and I think it is that it offers native Linux for developers. Instead of living in the limitations of javascript, Maemo enables you to do much more and enables you to use the full computing power available from this little computer. I feel that the train went already for Java, I was in the middle of the previous Java-bubble that pretty much exploded in around year 2000 depression. Been there, experience it first hand. Needless to say I don’t believe in Java or .NET or similar hypes anymore. The future is for mixed offering including both native and high level environments. And that is what Maemo exactly is today, you can use both high level languages _and_ more importantly low level languages.

Coding native applications can be tricky for newbie developers, but the possibilities are vast compared to running just for example javascript on top of some runtime or some proprietary environment with proprietary closed APIs.

What helps nowadays more in Maemo is the Qt, it makes the development of native applications a magnitude easier and more efficient. Instead of tinkering a lot with the user interface, now you can build one even with Qt Creator / Qt Designer.

Qt for Maemo 5, that Antonio Aloisio and Kate Alhola among others made it possible with their long work of hildonizing Qt, is now available as beta now from the Qt-labs. This technology luckily became officially supported from the roots of community supported port and hopefully this will get now even greater audience than before and attract more Maemo developers and prospective Maemo developers than before.

While Gtk is available and Maemo 5 applications have been done with Gtk, I would recommend to use Qt in the new future projects. PeterMaemo is saying that Qt is “forward-compatible technology on Maemo for years to come…”, I want to believe in that because the most wise thing to do is now stick with Qt for years to come to have best possible backwards compatibility for UI applications.

Recently there have been interesting development on native iPhone apps which utilize the power of the CPU (which would not be possible with some runtime without the CPU of the device being a supercomputer), like X-plane flight simulator, a controller for RC aircraft that streams video to the device and uses augmented reality to make a game on top of the cake, Voice Band where one can sing notes in a sequencer which translates them to notes and plays back with instruments so one can do convincing sounding compositions on the road without any musical instruments other than one’s voice etc.

I would be eager to see this kind of apps to emerge on Maemo. Maemo 5 has OpenGL ES 2.0 support, Qt, and a native application development environment. I think that is very cool, and one can do really creative and innovative things with it. If somebody will do X-plane quality simulator for N900, I will certainly even willing to pay for it. Same goes for Voice Band, I would eager to use it when I am not front of my iMac which is stationary in the corner of our living room – you know, you can’t really control when and how you compose, the ideas just pop in the head by itself in uncontrolled manner and they are gone (at least happens in my case) if they are not right away utilized. And I would like also augmented reality apps for the Maemo. Maemo has great camera and it is the most open phone out there, so I would think it would be the ideal place to hack this kind of things. And what’s more, there is even TV-out on the Nokia N900, I was thinking that one could connect data glasses to the TV out potentially and the image from camera and some computation could be used as augmented reality – not just in someday in the future, but right now today on Maemo 5! If you have some great idea, now it is a good time for pursuing it. Just remember to use Qt as UI toolkit and it has a good chance to survive also the future incarnations of the platform (you may need to do modifications to places where you use the lower layer, but if you do it wisely and in portable manner, you might not be so unlucky with future generation of Maemo and the Maemo devices).

A long time ago I was doing a loudspeaker box design program with Qt (actually that was before I even joined Maemo). The project unfortunately almost died. However, Kate found one day a backup from one hard drive and she uploaded the code to our home gforge. Luckily it worked out of the box with Qt 4.5.x on Today’s Ubuntu and possibly will also work with Qt 4.6. And luckily enough, the UI was actually designed with Qt-designer, so basically it is easily replaceable, and I can possibly produce a Maemo-version. Loudspeaker box design program may be niche, but since the current availability of them for other platforms than Windows is poor, it could be possibly cool to make this application a reality. It currently calculates correctly just closed box and the vented box calculation is broken. I will look if I can make it work with the vented boxes as well and then it could become somewhat useful compared to otherwise nothing available. It will not have all the features of e.g. WinISD initially, but it is cross platform and will run on Mac, Linux and Maemo, so that should be something. The cool thing about Qt is that you don’t need any high level language that would potentially cripple the features and performance to achieve cross platform compatibility (the calculation algorithm takes some time even on desktop machine, so it would be possibly too heavy for some Java app or similar). I think I will give it a try because it turned out that I will need this little software myself right now, so do it yourself is the best help yourself. It will be free GPL software.

I hope many people get inspired with the vast possibilities of the great Maemo platform and start making really cool things that utilize the CPU and GPU of Maemo device fully. Anybody can for example write a simple calculator app with some high level language, or maybe like somebody wrote the silly “I am rich -app” for iPhone, even entirely on QML, but when there are dozens of little calculator apps and silly apps which have no usefulness after 1 minutes of trying, it starts to be no point to be yet another on the sea of many. My recommendation: find something that does not already exist, get yourself an inspiration, aim for superhigh quality, and just go for it! Maemo is cool, but it is even cooler with your app, and your audience will love your creation!

ZDesigner snapshot

I created Qt-based UI for the aircraft design program I am writing. The initial version is available from here:

http://www.katix.org/karoliina/packages/zdesigner-current.tar.gz

ChangeLog
COPYING
zdesigner – Ubuntu Intrepid Binary

You need to have Qt 4.5 installed to run the binary.

ZDesigner snapshot

I created Qt-based UI for the aircraft design program I am writing. The initial version is available from here:

http://www.katix.org/karoliina/packages/zdesigner-current.tar.gz

ChangeLog
COPYING
zdesigner – Ubuntu Intrepid Binary

You need to have Qt 4.5 installed to run the binary.