Monday, July 23, 2012

Qt SpeedGauge Tutorial 1

As I promised here is the first part of the SpeedGauge tutorial. This will be a series of tutorials. By the end of series you should know how to create an app that uses GPS of your Symbian and MeeGo Phone. As before we will use Qt Quick, QML and JavaScript for this. Firstly we will create the app for Symbian^3 phones and then we will adjust the app so it will work on MeeGo. It will need only minor adjustments.

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 1 of the Qt SpeedGauge tutorial for Symbian^3 and MeeGo. Check out other parts that are currently available:
Qt SpeedGauge tutorial 2 - Fixing the loose ends 
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

In the first tutorial you will learn:
1. how to create new app
2. how to insert images to the app and how to manipulate images
3. how to rotate the images
4. how to use custom properties
5. how to use buttons

We won't use the GPS just yet. We will do that in our future tutorials.

I won't teach you how to create the graphics. There are some great tutorials on that already on line. If  you want to learn how to create Speed Gauge graphics by using Photoshop I can recommend you read NOS Speed Gauge From Scratch (PhotoshopCS4 Tutorial)

I will not give you graphics I used in my app that is on Ovi Store. You will get the the similar version of the pictures. Maybe they are not pretty enough for submitting this app to AppStore bur they are perfect for learning. The download link is in Download section below.

If you are developing app for N9 MeeGo phone the only difference from this video is:
1. When you create a new project choose  Qt Quick components for MeeGo/Harmattan
2. You will need higher resolution graphics. For the sake of this tutorial you can stretch these graphics, it won't look as nice but it will be ok for demonstration purposes


As always there is a video tutorial on YouTube in 720p. You can watch it here





Download:
SpeedGauge app from Ovi Store 
Graphics for the app
Code from QML files used in this tutorial
Qt SDK 1.2.1 


Learn More:
Speed Gauge tutorial for Photoshop CS4
My previous Hello World Tutorial

Tutorial that explains Custom Properties in QML
QML Transform Element
QML Rotation Element
List of all my Symbian^3 and  MeeGo tutorials


1 comment: