Qt Speed Gauge Tutorial 2

Hi, Here is the part 2 of our Qt SpeedGauge tutorial. In this  tutorial we will fix few things we didn't make it in our last one. We will remove ToolBar, add stops so that the needle doesn't go all the way around and we will add Spring animation to the Needle movement. This will result in a wobbly movement of needle. Also We will prevent the screen rotation. During programming I have also stumbled on an error message Cannot open output file Permission denied and collect2: Id returned 1 exit status. You can find out how I handled the situation. If I got your attention read on.



This tutorial is created by using Qt SDK 1.2.1. For more info look for the link in the Download section below this text.
This is part 2 of the Qt SpeedGauge tutorial for Symbian^3 and MeeGo. Check out other parts that are currently available:
Qt SpeedGauge tutorial 1 - Arranging the UI
Qt SpeedGauge tutorial 3 - Adding GPS

If you like these tutorials please support them by buying my app from Ovi store
SpeedGauge app from Ovi Store

Ok, so here is what we will be doing in this video:

1. Remove the ToolBar

You can see that the ToolBar is covering my plus and minus buttons. Obviously when I add GPS functionality I will remove the buttons and I will return the ToolBar again. But for now I just want to remove it. My first idea was to change the Boolean value of
showToolBar: false
For unknown reasons to me that didn't work. If someone know let me know.
So I decided to comment out line
//initialPage: MainPage {tools: toolBarLayout}
and replace it with
initialPage: MainPage {}

This way I didn't pass the toolbar to my MainPage. I am not sure if this is best way of handling this but it worked.

2. Preventing Screen Orientation in Qt

Since my app is made for portrait orientation doesn't make sense to rotate the screen when user rotates the phone. It looks ugly when you rotate the screen. Since I won't create a different view for landscape now best thing to do is to prevent the screen orientation. There are two ways to approach this problem. If you are using Symbian^3 phone you should add a line to main.cpp file. After declaring the viewer element just add a line
viewer.setOrientation(QmlApplicationViewer::ScreenOrientationLockPortrait);

If you are using MeeGo device just add line
orientationLock: PageOrientation.LockPortrait
inside a Page element. Look at the video for more details. Also check out the link
Controling  the Screen orientation on MeeGo N9 device

2. Adding stops

If we press minus or plus button too many times out Needle will go below 0 or over 240 Km/h. We have to implement stops for this. We will use JavaScript Math.min() and Math.max() functions for this. If the value of the property needleAngle is below 0, function Math.max(needleAngle,0) will return 0. Also if the needleAngle is over 240, function Math.min(needleAngle,240) will return 240. You have links for min and max functions under Learn More links below this post.

4. Adding SpringAnimation

It is nicer if the needle is obeying the laws of physics like inertia. SpringAnimation element will help us achieve that. You can find more animation on SpringAnimation element under Learn More links below this post.

5. Handling "Cannot open output file" error

At one point while I was recording this tutorial I also got this error:

Cannot open output file debug\SpeedGaugeTutorial.exe: Permission denied
File not found
collect2: Id returned 1 exit status
File not found

I have solved it by closing Qt Simulator. Also you can try going to Build and Clean All. After this I just rebuilt the project and everything was fine.

As always you can download the code from QML and main.cpp files. Just copy/paste the code to your Qt SDK project.

And finally here is the video. The video is 720p so you can watch it full screen.

This tutorial is inspired by the example you can find on Qt Reference Documentation webpage. Check out the UI Components: Dial Control Example

Download:

Qt SDK 1.2.1
SpeedGauge app from Ovi Store
Code from QML and main.cpp used in this tutorial

Learn More:

QML ShowToolbar property

Controling  the Screen orientation on MeeGo N9 device
JavaScript Math.min() function
JavaScript Math.max() function

QML Behavior Element
QML SpringAnimation Element
UI Components: Dial Control Example
List of all my Symbian^3 and  MeeGo tutorials