Tonight I could not attend band rehearsal so I used the time to play with the new QML language. There is a nice tutorial online and a good screencast.

QML allows one to write flashy applications with little code. My first QML program is a metronome. The N900 has a metronome program but it is rather boring. It does not look and feel like a real metronome. So I set out to write one in QML and managed to do so in 56 lines of QML. The interaction is simple: tap it to toggle between on and off and slide up and down to move the cross-bar on the metronome which will adjust the tempo in the range 40 to 208 beats per minute.

Without further ado here is the code. You can run it in qmlviewer. Two things are lacking at the moment: a nice SVG image of a metronome and of course the ticking sound. I am keen to find out how to make the metronome produce sound to make it useful.


import Qt 4.6

Rectangle {
width: 640
height: 480

Rectangle { // metronome bar
id: bar
x: 320; y: 100; width: 30; height: 300
color: "#aaaaaa"
property double tempo: 120

Rectangle { // weight on metronome bar that determines the tempo
x: -15; y: parent.tempo; width: 60; height: 30
color: "#aaaaaa"
}

transformOrigin: Item.Bottom
rotation: 0
rotation: SequentialAnimation {
id: anim
repeat: true
NumberAnimation { to: 35; easing: "easeInOutQuad"; duration: 60000/bar.tempo }
NumberAnimation { to: -35; easing: "easeInOutQuad"; duration: 60000/bar.tempo }
}
}

Text { // tempo indicator
x: 0; y: 0;
font.pointSize: 24; font.bold: true
text: bar.tempo
}

MouseRegion { // logic for tempo tuning and turning metronome on and off
anchors.fill: parent
property int start: -1
property bool moved: false
property bool wasrunning: true

onReleased: { // start or stop the metronome
anim.running = (moved) ?wasrunning :!wasrunning
bar.rotation = 0
start = -1
}
onPositionChanged: { // adjust the tempo
moved = start != -1
wasrunning = (moved) ?wasrunning :anim.running
bar.tempo += (moved) ?(mouse.y - start) :0
bar.tempo = (bar.tempo > 208) ?208 :bar.tempo
bar.tempo = (bar.tempo < 40) ?40 :bar.tempo
anim.running = false;
bar.rotation = 0
start = mouse.y
}
}
}

With the release of Trolltech's java bindings it kinda feels like Christmas. I wanted to point out some more presents under the tree...

Look closely at the dockwidgets on the right of the image. See that? Recent versions of Qt 4.2 snapshot include a new Ideal like feature. When you drag a dockwidget completely on top of another an Ideal like tabbed bar is created. This is done entirely within Qt and any application which uses QMainWindow will have this functionality. Pretty cool, eh? :)

This is a screenshot of KDevelop 4 as it currently stands. As you can see, we now natively integrate Qt 4 designer. You can thank Matt Rogers and Roberto Raggi for this one. KDevelop 4 is going through some pretty incredible changes right now. Hopefully the dot is going to host an interview with some updates on what is going on. Stay tuned!

KDevelop 4 screenshot with an integrated designer