QML Dial example

An example of how property bindings with mechanics like springs can improve the user experience of even simple controls, using Qt's declarative Qt Modeling Language (QML).

http://labs.qt.nokia.com/page/Projects/Graphics/Kinetic/DeclarativeUI

Note the way the needle bounces a little as if on a real spring. Different Follow parameters will make it feel full of oil, or whatever other physical feel.

http://qt.nokia.com

Category:

Science & Technology

Tags:

• qt
• declarative
• programming
• qml
• spring
• follow
• UI
• cross-platform
• framework
• cpp
• development

[cyborgtroy]

So could you have something like a shower dial, where there's a lot of friction, and you need to move the cursor a lot, but then it breaks down and turns way further than you expected?

that would suck.

[QtStudios]

In the Dial QML there is a little piece of code that gives that behavior:

rotation: Follow { spring: 1.4  damping: .15 source: Math.min(Math.max(-130, value*2.2 - 130), 133) }

If you get rid of the "spring" and "damping" lines, then the needle will follow the set point exactly.

In fact, if you download the Windows demo (or build from source), you can change the QML yourself. No recompile needed.

[gu4xinim]

Qt guys have a thing for gauges. Since trolltech i see that in a lot of examples.

[arm73c05]

beautiful.

[cyborgtroy]

lol I was just joking about how shower faucets are hard to turn without going past where you want.

I think QML is a good idea, but I'm not a GUI developer, so I don't get much of a chance to use Qt :(