Friday, December 30, 2011

Access QML Element properties from C++

Qt provides various method for working with QML. This following tutorial shows, how a QML Element properties can be accessed and modified from C++ code using QDeclarativeProperty class.

It will show a simple idea on accessing properties which cannot be accessed directly.

main.qml

import QtQuick 1.1

Rectangle {
    id: parentRect
    property bool layoutValue : LayoutMirroring.enabled ? true : false;// Read Only
    LayoutMirroring.enabled: false
    LayoutMirroring.childrenInherit: true
    width: 300; height: 50
    color: "yellow"
    border.width: 1

    Row {
        anchors { left: parent.left; margins: 5 }
        y: 5; spacing: 5

        Repeater {
            model: 5

            Rectangle {
                color: "red"
                opacity: (5 - index) / 5
                width: 40; height: 40

                Text {
                    text: index + 1
                    anchors.centerIn: parent
                }
            }
        }
    }
}


main.cpp

#include 
#include 
#include 
#include 
#include "qmlapplicationviewer.h"

Q_DECL_EXPORT int main(int argc, char *argv[])
{
    QScopedPointer app(createApplication(argc, argv));
    QScopedPointer viewer(QmlApplicationViewer::create());

    viewer->setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
    viewer->setMainQmlFile(QLatin1String("qml/Test/main.qml"));
    QDeclarativeProperty propLayout(viewer->rootObject(),"layoutValue");
    QDeclarativeProperty propLayoutMargin(viewer->rootObject(),"anchors.leftMargin");

    qDebug() << "Layout Property :" << propLayout.read().toBool();
    qDebug() << "Layout Margin :" << propLayoutMargin.read().toReal();

    qDebug() << "Property Modified? " << propLayoutMargin.write(QVariant::fromValue(20));
    if(propLayout.type() == QDeclarativeProperty::Invalid)
        qDebug() << "Invalid Layout Mirror property";
    if(propLayoutMargin.type() == QDeclarativeProperty::Invalid)
        qDebug() << "Invalid Anchor Margin property";
    viewer->showExpanded();

    return app->exec();
} 

Wednesday, December 14, 2011

Qt for Android - __atomic_inc undefined error!

I have also encountered this error. This is how I rectified.

Select Projects on the left panel (below Debug). Select "Build" in the top and make sure the Qt Version and arm configuration are same in
1) Compilation Target (Android robot symbol)
2) Edit Build Configuration (drop down list box)
3) Qt Version (General category)

Now click "Run" next to "Build". Now select atleast "android-8" as the Android target. Now clean the project and click rebuild. This should clear this error.

Tuesday, September 27, 2011

Nokia phone asking memory card password!

After resetting your mobile phone for some reasons, you may see that any E - Series or N - Series Nokia phone will ask you the memory card password, even if you haven't set one.

Just try the Lock Code of your mobile phone and that is the Abracadabra...

If you haven't set any Lock Code for your phone, try the default code i.e., 12345.

Wednesday, September 21, 2011

Install Qt MYSQL Driver for Linux (Ubuntu).

QSqlDatabase: QMYSQL driver not loaded
QSqlDatabase: available drivers: QSQLITE QSQLITE2

You might have come across this error, if you are using Qt SDK from Nokia.

Now follow these steps to get MYSQL working with Qt Creator.

Go to System-> Administration-> Synaptic manager and search "libqt4-sql-mysql" (libqt3-sql-mysql if you are using Qt3) and install the library by right clicking and select Mark for installation.



Now, in your Qt code add this line
                                qDebug() << QCoreApplication::libraryPaths();

You will see something like this upon running your program.
("/home/raja/QtSDK/Desktop/Qt/473/gcc/plugins", "/home/raja/Documents/QtProjects/SyncTest-build-desktop")

Now copy libqsqlmysql.so (search it or find it as shown in the above picture) to the above path. You can also use the library by using QCoreApplication::addLibraryPath(QString path).

Monday, September 19, 2011

Some random things about Qt & QML!

Someone asked a question in stack overflow about the future of Qt and Qt's future support for Desktop. A thought of sharing you what my answer was to him.



The future of Qt is never uncertain. The one who said, "there is not interest in desktop" is not the owner. The future of Qt is well mentioned after the Feb'11 (announcement of WP7 collaboration). In fact, QML is Good way to go for future UIs.

For your proof, the new Unity Interface for Ubuntu is going to have a 2D QML interface and the future editions are going to have QML 3D interface for some applications. The new Ubuntu is highly integrated with Qt.

The way Qt is going is too good so far. As a regular reader of Qt blogs and labs, I can say it for sure. The new Qt 5 is going to have lot of features and performance improvements. Also, they have committed its development to the successful Open Governance model. So, everyone can contribute.

Since the future of development is going to be for Mobiles and Tablets, most of the tutorials you will find may seem to create an illusion that Qt has no support for Desktop, but its not the case.

Download the latest Qt SDK 1.3 and you will find the Qt 4.7.4 for Desktop.

To ease the use of Qt, for developing both mobile and desktop applications, Nokia has combined both development environment into one SDK called Qt SDK, unlike the previous Nokia Qt SDK.

Moreover, I think no other C++ development framework can support a wide range of platforms like Qt supports now.

I supports: -
  • Desktop OSs: Windows, Linux, Mac OSx. 
  • Mobiles OSs: Symbian, Android (Community cupported), IOS (Comunity supported), Windows CE, Embedded Linux devices, Meego, Maemo. 
  • Tablet OSs: Android, Meego, Tablet Linux ports.

A new opportunity for porting it to is available in the name of Qt Necessitas- The Android port and IOS port of Qt are based on this only. If you have doubts check the YouTube for videos.

And regarding Java, I have read it is not that cross platform as Qt is. I also doubt whether any IDE, other than Qt can give you the comfort of cross compiling.
The Documentation is too good that, for rare cases where cross platform is not supported (for some Window functions) is mentioned explicitly along with alternative methods to implement it in that particular OS.

QML is awesome, since its behind the scene actions are performed using C++ to give you similar performance (85% as fast as Qt C++). And you don't have the head ache of Memory Management (if you are not used to with C++). If you really want a beautiful GUI and fast performance go for QML and C++.. Else the easy option is to use QML and Javascript.
I'm developing an application for Symbian, using heavy animations in my Nokia E63 with a CPU clock speed of 386 MHz and QML performance is smoother and doesn't hangs at all.

You can even find the OS and version with an if else statement, that easy. Give it a try before deciding it by reading some reviews.




Monday, September 5, 2011

Format pendrives, removable disks in Ubuntu!


I don't know whether you already know about this. You may even feel this post as silly, but yet this will help some newbies in Ubuntu.

To format your pendrive or any removable disk, you don't have to use any shell commands. Just select from the taskbar

Places -> Computer -> Right click the (pendrive or removable disk) and select Format.


You can select the file system according to your usage. If you are just going to use it under Linux, select "EXT" file system or choose "FAT" file system.

                                        

Monday, August 29, 2011

Use this code to paste Program source codes in blogger (or any HTML web page).

The program source code to be posted/pasted has to go between the <pre></pre> tags.

<div style="background-color: peachpuff; height: 600px; overflow: auto; width: 99%;">
<pre>

</pre>
</div>

The results will look like as it appears in the post. A Simple QML application

                                       

A simple application in QML - Stop Watch.

I've been playing around with Qt and QML for almost eight months and the new declarative language from the Troll Tech Engineers has impressed many people out there. If you don't know what QML is then don't hesitate to take a look at Nokia's website, you will find many things about Qt and QML.

QML is a wonderful language especially for developing mobile applications, where people always want to have fun with the UI. Thats why the legend Symbian seemed to lost its glory, but soon after Nokia's announcement of Symbian port of Qt, there is been a huge increase of interest from the people to develop for mobile.

QML, the declarative language has the strong Qt C++ on its backend and is a very simple environment for Web Programmers and New Programmers who don't have much experience with traditional programming languages like C++, C# and Java.
So here is my Stopwatch code snippet programs source code.

MainUI: StopWatch.qml (Best viewed in Landscape View)


import Qt 4.7



Rectangle {

    id:parentContainer

    width:320

    height: 240

    focus:true

    Image {

        id: background

        width:parentContainer.width

        height:parentContainer.height

        source: "background.jpg"

    }



    FontLoader{

        id:digitalFont

        source:"trana.ttf"

    }

    Keys.onSelectPressed:{

        startButton.startFunction()

    }



    Keys.onSpacePressed:{

        startButton.startFunction()

    }



    Keys.onEnterPressed:{

        startButton.startFunction()

    }



    Keys.onLeftPressed:{

        resumeButton.resumeFun()

    }



    Keys.onRightPressed:{

        stopButton.stopFunction()

    }
http://www.techieshome.in/2011/08/simple-application-in-qml-stop-watch.html


    Keys.onUpPressed:{

        newLapButton.createNewLapRecord()

    }



    Keys.onDownPressed:{

        resetButton.resetFun()

    }



    Keys.onAsteriskPressed:{

        Qt.quit()

    }



    Keys.onContext2Pressed:{

        Qt.quit()

    }



   Grid{

        id:lapRecordView

        rows:4

        columns:3

        spacing:3

        anchors.top:parent.top

        anchors.horizontalCenter:parent.horizontalCenter

        NewLapL{

            id:lap1

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap1

                        opacity:1.0

                        height: (parentContainer.height*7)/100

                        width: (parentContainer.width*29)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap1; property: "width"; from: 0; duration: 200 }



                }

            ]





            }

        NewLapL{

            id:lap2

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap2

                        opacity:1.0

                        height: (parentContainer.height*7)/100

                        width: (parentContainer.width*29)/100

                    }



                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap2; property: "width"; from: 0; duration: 200 }



                }

            ]





            }

        NewLapL{

            id:lap3

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap3

                        opacity:1.0

                        height: (parentContainer.height*7)/100

                        width: (parentContainer.width*29)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap3; property: "width"; from: 0; duration: 200 }



                }

            ]





            }

        NewLapL{

            id:lap4

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap4

                        opacity:1.0

                        height: (parentContainer.height*7)/100

                        width: (parentContainer.width*29)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap4; property: "width"; from: 0; duration: 200 }



                }

            ]





            }

        NewLapL{

            id:lap5

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap5

                        opacity:1.0

                        height: (parentContainer.height*7)/100

                        width: (parentContainer.width*29)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap5; property: "width"; from: 0; duration: 200 }



                }

            ]





            }

        NewLapL{

            id:lap6

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap6

                        opacity:1.0

                        height: (parentContainer.height*7)/100

                        width: (parentContainer.width*29)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap6; property: "width"; from: 0; duration: 200 }



                }

            ]





            }

        NewLapL{

            id:lap7

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap7

                        opacity:1.0

                        height: (parentContainer.height*7)/100

                        width: (parentContainer.width*29)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap7; property: "width"; from: 0; duration: 200 }



                }

            ]





            }

        NewLapL{

            id:lap8

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap8

                        opacity:1.0

                        height: (parentContainer.height*7)/100

                        width: (parentContainer.width*29)/100



                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap8; property: "width"; from: 0; duration: 200 }



                }

            ]





            }

        NewLapL{

            id:lap9

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap9

                        opacity:1.0

                        height: (parentContainer.height*7)/100

                        width: (parentContainer.width*29)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap9; property: "width"; from: 0; duration: 200 }



                }

            ]





            }

        NewLapL{

            id:lap10

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap10

                        opacity:1.0

                        height: (parentContainer.height*7)/100

                        width: (parentContainer.width*29)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap10; property: "width"; from: 0; duration: 200 }



                }

            ]





            }

        NewLapL{

            id:lap11

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap11

                        opacity:1.0

                        height: (parentContainer.height*7)/100

                        width: (parentContainer.width*29)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap11; property: "width"; from: 0; duration: 200 }



                }

            ]





            }

        NewLapL{

            id:lap12

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap12

                        opacity:1.0

                        height: (parentContainer.height*7)/100

                        width: (parentContainer.width*29)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap12; property: "width"; from: 0; duration: 200 }



                }

            ]





            }



        }





    Row{

        id:buttonRow

        spacing:5

        anchors.bottom:parent.bottom

        anchors.bottomMargin:5

        anchors.horizontalCenter:parent.horizontalCenter



        Rectangle{

            id:startButton

            width:start.width + 9

            height:start.height + 10

            radius:5

            smooth:true

            gradient: Gradient{

                GradientStop{color:"white"; position:0.0}

                GradientStop{color:"gray"; position:0.5}

                GradientStop{color:"white"; position:1.0}

            }



            Image {

                id: startIcon

                source: "qrc:/ok.png"

                opacity:0.75

                anchors.horizontalCenter:parent.horizontalCenter

                width:parent.width - start.width/2

                height:parent.height-3

            }



            SequentialAnimation{

                id: startButtonAnimation

                running:false

                NumberAnimation { target: startButton; property: "y"; to: startButton.y - 15; duration: 300 }

                NumberAnimation { target: startButton; property: "y"; to: startButton.y; duration: 200 }

                NumberAnimation { target: startButton; property: "y"; to: startButton.y - 8; duration: 200 }

                NumberAnimation { target: startButton; property: "y"; to: startButton.y; duration: 200 }

            }



            Text {

                id: start

                text: "Start"

                smooth:true

                font.bold:true

                font.italic:true

                font.pixelSize:(((parentContainer.width*9)/100)*50)/100

                style:Text.Raised

                color:"indigo"

                styleColor:"slateblue"

                anchors.horizontalCenter:parent.horizontalCenter

                anchors.verticalCenter:parent.verticalCenter

            }



            MouseArea{

                anchors.fill:parent

                onClicked: {

                    startButton.startFunction()

                }

            }



            function startFunction()

            {

                clock.running = false;

                timer.milliSeconds = 0;

                timer.seconds = 0;

                timer.minutes = 0;

                timer.hours = 0;



                milli.text = "00"

                second.text = "00"

                minute.text = "00"

                hour.text = "00"



                lap1.text = ""

                lap2.text = ""

                lap3.text = ""

                lap4.text = ""

                lap5.text = ""

                lap6.text = ""

                lap7.text = ""

                lap8.text = ""

                lap9.text = ""

                lap10.text = ""

                lap11.text = ""

                lap12.text = ""





                lap1.opacity = 0

                lap2.opacity = 0

                lap3.opacity = 0

                lap4.opacity = 0

                lap5.opacity = 0

                lap6.opacity = 0

                lap7.opacity = 0

                lap8.opacity = 0

                lap9.opacity = 0

                lap10.opacity = 0

                lap11.opacity = 0

                lap12.opacity = 0



                lap1.state = ""

                lap2.state = ""

                lap3.state = ""

                lap4.state = ""

                lap5.state = ""

                lap6.state = ""

                lap7.state = ""

                lap8.state = ""

                lap9.state = ""

                lap10.state = ""

                lap11.state = ""

                lap12.state = ""



                newLapButton.lapCount = 0;



                clock.running = true;



                startButtonAnimation.running = true

            }



        }

        Rectangle{

            id:stopButton

            width:stop.width + 9

            height:stop.height + 10

            radius:5

            smooth:true

            gradient: Gradient{

                GradientStop{color:"white"; position:0.0}

                GradientStop{color:"gray"; position:0.5}

                GradientStop{color:"white"; position:1.0}

            }



            Image {

                id: stopIcon

                source: "qrc:/right.png"

                opacity:0.75

                anchors.horizontalCenter:parent.horizontalCenter

                width:parent.width - stop.width/2

                height:parent.height-3

            }





            SequentialAnimation{

                id: stopButtonAnimation

                running:false

                NumberAnimation { target: stopButton; property: "y"; to: stopButton.y - 15; duration: 300 }

                NumberAnimation { target: stopButton; property: "y"; to: stopButton.y; duration: 200 }

                NumberAnimation { target: stopButton; property: "y"; to: stopButton.y - 8; duration: 200 }

                NumberAnimation { target: stopButton; property: "y"; to: stopButton.y; duration: 200 }

            }



            Text {

                id: stop

                text: "Stop"

                smooth:true

                font.bold:true

                font.italic:true

                font.pixelSize:(((parentContainer.width*9)/100)*50)/100

                style:Text.Raised

                styleColor:"slateblue"

                color:"indigo"

                anchors.horizontalCenter:parent.horizontalCenter

                anchors.verticalCenter:parent.verticalCenter

            }



            MouseArea{

                anchors.fill:parent

                onClicked : {

                    stopButton.stopFunction()

                }

            }

            function stopFunction()

            {

                clock.running = false

                stopButtonAnimation.running = true

            }

        }



        Rectangle{

            id:resumeButton

            width:resume.width + 9

            height:resume.height + 10

            radius:5

            smooth:true

            gradient: Gradient{

                GradientStop{color:"white"; position:0.0}

                GradientStop{color:"gray"; position:0.5}

                GradientStop{color:"white"; position:1.0}

            }



            Image {

                id: resumeIcon

                source: "qrc:/left.png"

                opacity:0.75

                anchors.horizontalCenter:parent.horizontalCenter

                width:parent.width - resume.width/2

                height:parent.height-3

            }



            SequentialAnimation{

                id: resumeButtonAnimation

                running:false

                NumberAnimation { target: resumeButton; property: "y"; to: resumeButton.y - 15; duration: 300 }

                NumberAnimation { target: resumeButton; property: "y"; to: resumeButton.y; duration: 200 }

                NumberAnimation { target: resumeButton; property: "y"; to: resumeButton.y - 8; duration: 200 }

                NumberAnimation { target: resumeButton; property: "y"; to: resumeButton.y; duration: 200 }

            }



            Text {

                id: resume

                text: "Resume"

                smooth:true

                font.bold:true

                font.italic:true

                font.pixelSize:(((parentContainer.width*9)/100)*50)/100

                style:Text.Raised

                styleColor:"slateblue"

                color:"indigo"

                anchors.horizontalCenter:parent.horizontalCenter

                anchors.verticalCenter:parent.verticalCenter

            }



            MouseArea{

                anchors.fill:parent

                onClicked: {

                    resumeButton.resumeFun()

                }

            }



            function resumeFun()

            {

                resumeButtonAnimation.running = true

                if(timer.milliSeconds > 0 || timer.seconds > 0 || timer.minutes > 0 || timer.hours > 0)

                    clock.running = true;

                else

                    return;

            }



        }

        Rectangle{

            id:newLapButton

            property int lapCount: 0



            width:newLap.width + 9

            height:newLap.height + 10

            radius:5

            smooth:true

            gradient: Gradient{

                GradientStop{color:"white"; position:0.0}

                GradientStop{color:"gray"; position:0.5}

                GradientStop{color:"white"; position:1.0}

            }



            Image {

                id: newLapIcon

                source: "qrc:/up.png"

                opacity:0.75

                anchors.horizontalCenter:parent.horizontalCenter

                width:parent.width - newLap.width/2

                height:parent.height-3

            }



            SequentialAnimation{

                id: newLapButtonAnimation

                running:false

                NumberAnimation { target: newLapButton; property: "y"; to: newLapButton.y - 15; duration: 300 }

                NumberAnimation { target: newLapButton; property: "y"; to: newLapButton.y; duration: 200 }

                NumberAnimation { target: newLapButton; property: "y"; to: newLapButton.y - 8; duration: 200 }

                NumberAnimation { target: newLapButton; property: "y"; to: newLapButton.y; duration: 200 }

            }



            Text {

                id: newLap

                text: "New Lap"

                smooth:true

                font.bold:true

                font.italic:true

                font.pixelSize:(((parentContainer.width*9)/100)*50)/100

                style:Text.Raised

                styleColor:"slateblue"

                color:"indigo"

                anchors.horizontalCenter:parent.horizontalCenter

                anchors.verticalCenter:parent.verticalCenter

            }



            MouseArea{

                anchors.fill:parent

                onClicked:{

                    newLapButton.createNewLapRecord()

                }

            }



            function createNewLapRecord()

            {

                newLapButtonAnimation.running = true



                if(newLapButton.lapCount == 0){

                lap1.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap1.state = "created";

            }

                if(newLapButton.lapCount == 1){

                lap2.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap2.state = "created";

            }

                if(newLapButton.lapCount == 2){

                lap3.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap3.state = "created";

            }

                if(newLapButton.lapCount == 3){

                lap4.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap4.state = "created";

            }

                if(newLapButton.lapCount == 4){

                lap5.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap5.state = "created";

            }

                if(newLapButton.lapCount == 5){

                lap6.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap6.state = "created";

            }

                if(newLapButton.lapCount == 6){

                lap7.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap7.state = "created";

            }

                if(newLapButton.lapCount == 7){

                lap8.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap8.state = "created";

            }

                if(newLapButton.lapCount == 8){

                lap9.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap9.state = "created";

            }



                if(newLapButton.lapCount == 9){

                lap10.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap10.state = "created";

            }



                if(newLapButton.lapCount == 10){

                lap11.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap11.state = "created";

            }



                if(newLapButton.lapCount == 11){

                lap12.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap12.state = "created";

            }

                newLapButton.lapCount ++;

            }



        }

        Rectangle{

            id:resetButton

            width:reset.width + 9

            height:reset.height + 10

            radius:5

            smooth:true

            gradient: Gradient{

                GradientStop{color:"white"; position:0.0}

                GradientStop{color:"gray"; position:0.5}

                GradientStop{color:"white"; position:1.0}

            }

            Image {

                id: resetIcon

                source: "qrc:/down.png"

                opacity:0.75

                anchors.horizontalCenter:parent.horizontalCenter

                width:parent.width - reset.width/2

                height:parent.height-3

            }





            SequentialAnimation{

                id: resetButtonAnimation

                running:false

                NumberAnimation { target: resetButton; property: "y"; to: resetButton.y - 15; duration: 300 }

                NumberAnimation { target: resetButton; property: "y"; to: resetButton.y; duration: 200 }

                NumberAnimation { target: resetButton; property: "y"; to: resetButton.y - 8; duration: 200 }

                NumberAnimation { target: resetButton; property: "y"; to: resetButton.y; duration: 200 }

            }



            Text {

                id: reset

                text: "Reset"

                smooth:true

                font.bold:true

                font.italic:true

                font.pixelSize:(((parentContainer.width*9)/100)*50)/100

                style:Text.Raised

                styleColor:"slateblue"

                color:"indigo"

                anchors.horizontalCenter:parent.horizontalCenter

                anchors.verticalCenter:parent.verticalCenter

            }



            MouseArea{

                anchors.fill:parent

                onClicked:{

                    resetButton.resetFun()

                }



            }



            function resetFun()

            {



                resetButtonAnimation.running=true



                clock.running=false

                timer.milliSeconds = 0;

                timer.seconds = 0;

                timer.minutes = 0;

                timer.hours = 0;

                milli.text = "00"

                second.text = "00"

                minute.text = "00"

                hour.text = "00"



                lap1.text = ""

                lap2.text = ""

                lap3.text = ""

                lap4.text = ""

                lap5.text = ""

                lap6.text = ""

                lap7.text = ""

                lap8.text = ""

                lap9.text = ""

                lap10.text = ""

                lap11.text = ""

                lap12.text = ""





                lap1.opacity = 0

                lap2.opacity = 0

                lap3.opacity = 0

                lap4.opacity = 0

                lap5.opacity = 0

                lap6.opacity = 0

                lap7.opacity = 0

                lap8.opacity = 0

                lap9.opacity = 0

                lap10.opacity = 0

                lap11.opacity = 0

                lap12.opacity = 0



                lap1.state = ""

                lap2.state = ""

                lap3.state = ""

                lap4.state = ""

                lap5.state = ""

                lap6.state = ""

                lap7.state = ""

                lap8.state = ""

                lap9.state = ""

                lap10.state = ""

                lap11.state = ""

                lap12.state = ""



                newLapButton.lapCount = 0;

            }



        }



        Rectangle{

            id:quitButton

            width:quitImage.width+5

            height:quitImage.height

            color:"transparent"



            Image {

            id: quitImage

            source: "qrc:/quit.png"

            width:startButton.height

            height:startButton.height

            anchors.centerIn:parent.Center

            }



            Image {

                id: quitIcon

                source: "qrc:/asterisk.png"

                opacity:0.8

                anchors.bottom:quitImage.bottom

                anchors.horizontalCenter:quitButton.horizontalCenter

                width:parent.width/2

                height:parent.height-6

            }



            MouseArea{

                anchors.fill:parent

                onClicked:{

                    Qt.quit()

                }

            }

        }

    }



    Row{

        id:timer

        property int milliSeconds: 0

        property int seconds: 0

        property int minutes: 0

        property int hours: 0

        anchors.centerIn:parent



        Rectangle{

            id:hourContainer

            width:(((parentContainer.width*20)/100))

            height:(((parentContainer.width*20)/100))

            gradient: Gradient{

                GradientStop{color:"gray"; position:0}

                GradientStop{color:"white"; position:0.5}

                GradientStop{color:"gray"; position:1.0}

            }

            Text {

                id: hour

                text: "00"

                font.family:digitalFont.name

                font.bold:true

                smooth:true

                font.pixelSize:26

                anchors.centerIn:parent

            }



        }





        Rectangle{

            width:5

            height:(((parentContainer.width*20)/100))

            gradient: Gradient{

                GradientStop{color:"gray"; position:0}

                GradientStop{color:"white"; position:0.5}

                GradientStop{color:"gray"; position:1.0}

            }

            Text {

                text: ":"

                font.family:digitalFont.name

                font.bold:true

                smooth:true

                font.pixelSize:26

                anchors.centerIn:parent

            }



        }







        Rectangle{

            id:minuteContainer

            width:(((parentContainer.width*20)/100))

            height:(((parentContainer.width*20)/100))

            gradient: Gradient{

                GradientStop{color:"gray"; position:0}

                GradientStop{color:"white"; position:0.5}

                GradientStop{color:"gray"; position:1.0}

            }

            Text {

                id: minute

                text: "00"

                font.family:digitalFont.name

                font.bold:true

                smooth:true

                font.pixelSize:26

                anchors.centerIn:parent

            }



        }



        Rectangle{

            width:5

            height:(((parentContainer.width*20)/100))

            gradient: Gradient{

                GradientStop{color:"gray"; position:0}

                GradientStop{color:"white"; position:0.5}

                GradientStop{color:"gray"; position:1.0}

            }

            Text {

                text: ":"

                font.family:digitalFont.name

                font.bold:true

                smooth:true

                font.pixelSize:26

                anchors.centerIn:parent

            }



        }





        Rectangle{

            id:secondContainer

            width:(((parentContainer.width*20)/100))

            height:(((parentContainer.width*20)/100))

            gradient: Gradient{

                GradientStop{color:"gray"; position:0}

                GradientStop{color:"white"; position:0.5}

                GradientStop{color:"gray"; position:1.0}

            }

            Text {

                id: second

                text: "00"

                font.family:digitalFont.name

                font.bold:true

                smooth:true

                font.pixelSize:26

                anchors.centerIn:parent

            }

        }







        Rectangle{

            width:5

            height:(((parentContainer.width*20)/100))

            gradient: Gradient{

                GradientStop{color:"gray"; position:0}

                GradientStop{color:"white"; position:0.5}

                GradientStop{color:"gray"; position:1.0}

            }

            Text {

                text: ":"

                font.family:digitalFont.name

                font.bold:true

                smooth:true

                font.pixelSize:26

                anchors.centerIn:parent

            }



        }





        Rectangle{

            id:milliSecondContainer

            width:(((parentContainer.width*20)/100))

            height:(((parentContainer.width*20)/100))

            gradient: Gradient{

                GradientStop{color:"gray"; position:0}

                GradientStop{color:"white"; position:0.5}

                GradientStop{color:"gray"; position:1.0}

            }

            Text {

                id: milli

                text: "00"

                font.family:digitalFont.name

                font.bold:true

                smooth:true

                font.pixelSize:26

                anchors.centerIn:parent

            }

        }

    }









    Timer{

        id:clock

        interval:50

        triggeredOnStart:true

        onTriggered: clock.updateTime()

        repeat:true



        function updateTime()

        {

            if(timer.milliSeconds == 950)

            {

                timer.milliSeconds = 0;

                if(timer.seconds == 59)

                {

                    timer.seconds = 0;

                    if(timer.minutes == 59)

                    {

                        timer.minutes = 0;

                        if(timer.hours == 59)

                            clock.running=false;

                        else

                            timer.hours++;



                    }

                    else

                        timer.minutes++;

                }

                else

                    timer.seconds++;

            }

            else

                timer.milliSeconds = timer.milliSeconds+50;

            if(timer.milliSeconds == 0)

                milli.text = "000";

            else

                milli.text = timer.milliSeconds;

            if(timer.seconds == 0)

                second.text = "00";

            if(timer.seconds < 10)

                second.text = '0' + timer.seconds

            else

                second.text = timer.seconds;

            if(timer.minutes == 0)

                minute.text = "00";

            if(timer.minutes < 10)

                minute.text = '0' + timer.minutes;

            else

                minute.text = timer.minutes;



            if(timer.hours == 0)

                hour.text = "00";

            if(timer.hours < 10)

                hour.text = '0' + timer.hours;

            else

                hour.text = timer.hours;

        }

    }





}

MainUI: StopWatch.qml (Best viewed in Portrait View)

import QtQuick 1.0



Rectangle {

    id:parentContainer

    width:320

    height: 240

    focus:true

    Image {

        id: background

        width:parentContainer.width

        height:parentContainer.height

        source: "background.jpg"

    }



    FontLoader{

        id:digitalFont

        source:"trana.ttf"

    }

    Keys.onSelectPressed:{

        startButton.startFunction()

    }



    Keys.onSpacePressed:{

        startButton.startFunction()

    }



    Keys.onEnterPressed:{

        startButton.startFunction()

    }



    Keys.onLeftPressed:{

        resumeButton.resumeFun()

    }



    Keys.onRightPressed:{

        stopButton.stopFunction()

    }



    Keys.onUpPressed:{

        newLapButton.createNewLapRecord()

    }



    Keys.onDownPressed:{

        resetButton.resetFun()

    }



    Keys.onAsteriskPressed:{

        Qt.quit()

    }





    Keys.onContext2Pressed:{

        Qt.quit()

    }





   Grid{

        id:lapRecordView

        rows:4

        columns:3

        spacing:3

        anchors.top:parent.top

        anchors.horizontalCenter:parent.horizontalCenter

        NewLapP{

            id:lap1

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap1

                        opacity:1.0

                        height: (parentContainer.height*8)/100



                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap1; property: "opacity"; to: 1.0; duration: 200 }



                }

            ]





            }

        NewLapP{

            id:lap2

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap2

                        opacity:1.0

                        height: (parentContainer.height*8)/100

                    }



                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap2; property: "opacity"; to: 1.0; duration: 200 }



                }

            ]





            }

        NewLapP{

            id:lap3

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap3

                        opacity:1.0

                        height: (parentContainer.height*8)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap3; property: "opacity"; to: 1.0; duration: 200 }



                }

            ]





            }

        NewLapP{

            id:lap4

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap4

                        opacity:1.0

                        height: (parentContainer.height*8)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap4; property: "opacity"; to: 1.0; duration: 200 }



                }

            ]





            }

        NewLapP{

            id:lap5

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap5

                        opacity:1.0

                        height: (parentContainer.height*8)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap5; property: "opacity"; to: 1.0; duration: 200 }



                }

            ]





            }

        NewLapP{

            id:lap6

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap6

                        opacity:1.0

                        height: (parentContainer.height*8)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap6; property: "opacity"; to: 1.0; duration: 200 }



                }

            ]





            }

        NewLapP{

            id:lap7

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap7

                        opacity:1.0

                        height: (parentContainer.height*8)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap7; property: "opacity"; to: 1.0; duration: 200 }



                }

            ]





            }

        NewLapP{

            id:lap8

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap8

                        opacity:1.0

                        height: (parentContainer.height*8)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap8; property: "opacity"; to: 1.0; duration: 200 }



                }

            ]





            }

        NewLapP{

            id:lap9

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap9

                        opacity:1.0

                        height: (parentContainer.height*8)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap9; property: "opacity"; to: 1.0; duration: 200 }



                }

            ]





            }

        NewLapP{

            id:lap10

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap10

                        opacity:1.0

                        height: (parentContainer.height*8)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap10; property: "opacity"; to: 1.0; duration: 200 }



                }

            ]





            }

        NewLapP{

            id:lap11

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap11

                        opacity:1.0

                        height: (parentContainer.height*8)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap11; property: "opacity"; to: 1.0; duration: 200 }



                }

            ]





            }

        NewLapP{

            id:lap12

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap12

                        opacity:1.0

                        height: (parentContainer.height*8)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap12; property: "opacity"; to: 1.0; duration: 200 }



                }

            ]





            }



        }





    Row{

        id:buttonRow

        spacing:3

        anchors.bottom:parent.bottom

        anchors.bottomMargin:5

        anchors.horizontalCenter:parent.horizontalCenter

        Rectangle{

            id:startButton

            width:start.width + 6

            height:start.height + 14

            radius:5

            smooth:true

            gradient: Gradient{

                GradientStop{color:"white"; position:0.0}

                GradientStop{color:"gray"; position:0.5}

                GradientStop{color:"white"; position:1.0}

            }



            Image {

                id: startIcon

                source: "qrc:/ok.png"

                opacity:0.75

                anchors.horizontalCenter:parent.horizontalCenter

                width:parent.width - start.width/2

                height:parent.height-3

            }



            SequentialAnimation{

                id: startButtonAnimation

                running:false

                NumberAnimation { target: startButton; property: "y"; to: startButton.y - 15; duration: 300 }

                NumberAnimation { target: startButton; property: "y"; to: startButton.y; duration: 200 }

                NumberAnimation { target: startButton; property: "y"; to: startButton.y - 8; duration: 200 }

                NumberAnimation { target: startButton; property: "y"; to: startButton.y; duration: 200 }

            }



            Text {

                id: start

                text: "Start"

                smooth:true

                font.bold:true

                font.italic:true

                font.pixelSize:(((parentContainer.width*9)/100)*50)/100

                style:Text.Raised

                color:"indigo"

                styleColor:"slateblue"

                anchors.horizontalCenter:parent.horizontalCenter

                anchors.verticalCenter:parent.verticalCenter

            }



            MouseArea{

                anchors.fill:parent

                onClicked: {

                    startButton.startFunction()

                }

            }



            function startFunction()

            {

                clock.running = false;

                timer.milliSeconds = 0;

                timer.seconds = 0;

                timer.minutes = 0;

                timer.hours = 0;

                clock.running = true;



                startButtonAnimation.running = true

            }



        }

        Rectangle{

            id:stopButton

            width:stop.width + 6

            height:stop.height + 14

            radius:5

            smooth:true

            gradient: Gradient{

                GradientStop{color:"white"; position:0.0}

                GradientStop{color:"gray"; position:0.5}

                GradientStop{color:"white"; position:1.0}

            }



            Image {

                id: stopIcon

                source: "qrc:/right.png"

                opacity:0.75

                anchors.horizontalCenter:parent.horizontalCenter

                width:parent.width - stop.width/2

                height:parent.height-3

            }





            SequentialAnimation{

                id: stopButtonAnimation

                running:false

                NumberAnimation { target: stopButton; property: "y"; to: stopButton.y - 15; duration: 300 }

                NumberAnimation { target: stopButton; property: "y"; to: stopButton.y; duration: 200 }

                NumberAnimation { target: stopButton; property: "y"; to: stopButton.y - 8; duration: 200 }

                NumberAnimation { target: stopButton; property: "y"; to: stopButton.y; duration: 200 }

            }



            Text {

                id: stop

                text: "Stop"

                smooth:true

                font.bold:true

                font.italic:true

                font.pixelSize:(((parentContainer.width*9)/100)*50)/100

                style:Text.Raised

                styleColor:"slateblue"

                color:"indigo"

                anchors.horizontalCenter:parent.horizontalCenter

                anchors.verticalCenter:parent.verticalCenter

            }



            MouseArea{

                anchors.fill:parent

                onClicked : {

                    stopButton.stopFunction()

                }

            }

            function stopFunction()

            {

                clock.running = false

                stopButtonAnimation.running = true

            }

        }



        Rectangle{

            id:resumeButton

            width:resume.width + 6

            height:resume.height + 14

            radius:5

            smooth:true

            gradient: Gradient{

                GradientStop{color:"white"; position:0.0}

                GradientStop{color:"gray"; position:0.5}

                GradientStop{color:"white"; position:1.0}

            }



            Image {

                id: resumeIcon

                source: "qrc:/left.png"

                opacity:0.75

                anchors.horizontalCenter:parent.horizontalCenter

                width:parent.width - resume.width/2

                height:parent.height-3

            }



            SequentialAnimation{

                id: resumeButtonAnimation

                running:false

                NumberAnimation { target: resumeButton; property: "y"; to: resumeButton.y - 15; duration: 300 }

                NumberAnimation { target: resumeButton; property: "y"; to: resumeButton.y; duration: 200 }

                NumberAnimation { target: resumeButton; property: "y"; to: resumeButton.y - 8; duration: 200 }

                NumberAnimation { target: resumeButton; property: "y"; to: resumeButton.y; duration: 200 }

            }



            Text {

                id: resume

                text: "Resume"

                smooth:true

                font.bold:true

                font.italic:true

                font.pixelSize:(((parentContainer.width*9)/100)*50)/100

                style:Text.Raised

                styleColor:"slateblue"

                color:"indigo"

                anchors.horizontalCenter:parent.horizontalCenter

                anchors.verticalCenter:parent.verticalCenter

            }



            MouseArea{

                anchors.fill:parent

                onClicked: {

                    resumeButton.resumeFun()

                }

            }



            function resumeFun()

            {

                resumeButtonAnimation.running = true

                if(timer.milliSeconds > 0 || timer.seconds > 0 || timer.minutes > 0 || timer.hours > 0)

                    clock.running = true;

                else

                    return;

            }



        }

        Rectangle{

            id:newLapButton

            property int lapCount: 0



            width:newLap.width + 6

            height:newLap.height + 14

            radius:5

            smooth:true

            gradient: Gradient{

                GradientStop{color:"white"; position:0.0}

                GradientStop{color:"gray"; position:0.5}

                GradientStop{color:"white"; position:1.0}

            }



            Image {

                id: newLapIcon

                source: "qrc:/up.png"

                opacity:0.75

                anchors.horizontalCenter:parent.horizontalCenter

                width:parent.width - newLap.width/2

                height:parent.height-3

            }

            SequentialAnimation{

                id: newLapButtonAnimation

                running:false

                NumberAnimation { target: newLapButton; property: "y"; to: newLapButton.y - 15; duration: 300 }

                NumberAnimation { target: newLapButton; property: "y"; to: newLapButton.y; duration: 200 }

                NumberAnimation { target: newLapButton; property: "y"; to: newLapButton.y - 8; duration: 200 }

                NumberAnimation { target: newLapButton; property: "y"; to: newLapButton.y; duration: 200 }

            }



            Text {

                id: newLap

                text: "New Lap"

                smooth:true

                font.bold:true

                font.italic:true

                font.pixelSize:(((parentContainer.width*9)/100)*50)/100

                style:Text.Raised

                styleColor:"slateblue"

                color:"indigo"

                anchors.horizontalCenter:parent.horizontalCenter

                anchors.verticalCenter:parent.verticalCenter

            }



            MouseArea{

                anchors.fill:parent

                onClicked:{

                    newLapButton.createNewLapRecord()

                }

            }



            function createNewLapRecord()

            {

                newLapButtonAnimation.running = true



                if(newLapButton.lapCount == 0){

                lap1.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap1.state = "created";

            }

                if(newLapButton.lapCount == 1){

                lap2.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap2.state = "created";

            }

                if(newLapButton.lapCount == 2){

                lap3.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap3.state = "created";

            }

                if(newLapButton.lapCount == 3){

                lap4.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap4.state = "created";

            }

                if(newLapButton.lapCount == 4){

                lap5.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap5.state = "created";

            }

                if(newLapButton.lapCount == 5){

                lap6.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap6.state = "created";

            }

                if(newLapButton.lapCount == 6){

                lap7.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap7.state = "created";

            }

                if(newLapButton.lapCount == 7){

                lap8.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap8.state = "created";

            }

                if(newLapButton.lapCount == 8){

                lap9.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap9.state = "created";

            }



                if(newLapButton.lapCount == 9){

                lap10.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap10.state = "created";

            }



                if(newLapButton.lapCount == 10){

                lap11.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap11.state = "created";

            }



                if(newLapButton.lapCount == 11){

                lap12.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap12.state = "created";

            }

                newLapButton.lapCount ++;

            }



        }

        Rectangle{

            id:resetButton

            width:reset.width + 6

            height:reset.height + 14

            radius:5

            smooth:true

            gradient: Gradient{

                GradientStop{color:"white"; position:0.0}

                GradientStop{color:"gray"; position:0.5}

                GradientStop{color:"white"; position:1.0}

            }



            Image {

                id: resetIcon

                source: "qrc:/down.png"

                opacity:0.75

                anchors.horizontalCenter:parent.horizontalCenter

                width:parent.width - reset.width/2

                height:parent.height-3

            }



            SequentialAnimation{

                id: resetButtonAnimation

                running:false

                NumberAnimation { target: resetButton; property: "y"; to: resetButton.y - 15; duration: 300 }

                NumberAnimation { target: resetButton; property: "y"; to: resetButton.y; duration: 200 }

                NumberAnimation { target: resetButton; property: "y"; to: resetButton.y - 8; duration: 200 }

                NumberAnimation { target: resetButton; property: "y"; to: resetButton.y; duration: 200 }

            }



            Text {

                id: reset

                text: "Reset"

                smooth:true

                font.bold:true

                font.italic:true

                font.pixelSize:(((parentContainer.width*9)/100)*50)/100

                style:Text.Raised

                styleColor:"slateblue"

                color:"indigo"

                anchors.horizontalCenter:parent.horizontalCenter

                anchors.verticalCenter:parent.verticalCenter

            }



            MouseArea{

                anchors.fill:parent

                onClicked:{

                    resetButton.resetFun()

                }



            }



            function resetFun()

            {



                resetButtonAnimation.running=true



                clock.running=false

                timer.milliSeconds = 0;

                timer.seconds = 0;

                timer.minutes = 0;

                timer.hours = 0;

                milli.text = "00"

                second.text = "00"

                minute.text = "00"

                hour.text = "00"



                lap1.text = ""

                lap2.text = ""

                lap3.text = ""

                lap4.text = ""

                lap5.text = ""

                lap6.text = ""

                lap7.text = ""

                lap8.text = ""

                lap9.text = ""

                lap10.text = ""

                lap11.text = ""

                lap12.text = ""





                lap1.opacity = 0

                lap2.opacity = 0

                lap3.opacity = 0

                lap4.opacity = 0

                lap5.opacity = 0

                lap6.opacity = 0

                lap7.opacity = 0

                lap8.opacity = 0

                lap9.opacity = 0

                lap10.opacity = 0

                lap11.opacity = 0

                lap12.opacity = 0



                lap1.state = ""

                lap2.state = ""

                lap3.state = ""

                lap4.state = ""

                lap5.state = ""

                lap6.state = ""

                lap7.state = ""

                lap8.state = ""

                lap9.state = ""

                lap10.state = ""

                lap11.state = ""

                lap12.state = ""



                newLapButton.lapCount = 0;

            }



        }



        Rectangle{

            id:quitButton

            width:quitImage.width+5

            height:quitImage.height

            color:"transparent"



            Image {

            id: quitImage

            source: "qrc:/quit.png"

            width:startButton.height

            height:startButton.height

            anchors.centerIn:parent.Center

            }



            Image {

                id: quitIcon

                source: "qrc:/asterisk.png"

                opacity:0.8

                anchors.bottom:quitImage.bottom

                anchors.horizontalCenter:quitButton.horizontalCenter

                width:parent.width/2

                height:parent.height-4

            }



            MouseArea{

                anchors.fill:parent

                onClicked:{

                    Qt.quit()

                }

            }

        }

    }

    Row{

        id:timer

        property int milliSeconds: 0

        property int seconds: 0

        property int minutes: 0

        property int hours: 0

        anchors.centerIn:parent



        Rectangle{

            id:hourContainer

            width:(((parentContainer.width*24)/100))

            height:(((parentContainer.width*24)/100))

            gradient: Gradient{

                GradientStop{color:"gray"; position:0}

                GradientStop{color:"white"; position:0.5}

                GradientStop{color:"gray"; position:1.0}

            }

            Text {

                id: hour

                text: "00"

                font.family:digitalFont.name

                font.bold:true

                smooth:true

                font.pixelSize:28

                anchors.centerIn:parent

            }



        }





        Rectangle{

            width:5

            height:(((parentContainer.width*24)/100))

            gradient: Gradient{

                GradientStop{color:"gray"; position:0}

                GradientStop{color:"white"; position:0.5}

                GradientStop{color:"gray"; position:1.0}

            }

            Text {

                text: ":"

                font.family:digitalFont.name

                font.bold:true

                smooth:true

                font.pixelSize:28

                anchors.centerIn:parent

            }



        }







        Rectangle{

            id:minuteContainer

            width:(((parentContainer.width*24)/100))

            height:(((parentContainer.width*24)/100))

            gradient: Gradient{

                GradientStop{color:"gray"; position:0}

                GradientStop{color:"white"; position:0.5}

                GradientStop{color:"gray"; position:1.0}

            }

            Text {

                id: minute

                text: "00"

                font.family:digitalFont.name

                font.bold:true

                smooth:true

                font.pixelSize:28

                anchors.centerIn:parent

            }



        }



        Rectangle{

            width:5

            height:(((parentContainer.width*24)/100))

            gradient: Gradient{

                GradientStop{color:"gray"; position:0}

                GradientStop{color:"white"; position:0.5}

                GradientStop{color:"gray"; position:1.0}

            }

            Text {

                text: ":"

                font.family:digitalFont.name

                font.bold:true

                smooth:true

                font.pixelSize:28

                anchors.centerIn:parent

            }



        }





        Rectangle{

            id:secondContainer

            width:(((parentContainer.width*24)/100))

            height:(((parentContainer.width*24)/100))

            gradient: Gradient{

                GradientStop{color:"gray"; position:0}

                GradientStop{color:"white"; position:0.5}

                GradientStop{color:"gray"; position:1.0}

            }

            Text {

                id: second

                text: "00"

                font.family:digitalFont.name

                font.bold:true

                smooth:true

                font.pixelSize:28

                anchors.centerIn:parent

            }

        }



        Rectangle{

            width:5

            height:(((parentContainer.width*24)/100))

            gradient: Gradient{

                GradientStop{color:"gray"; position:0}

                GradientStop{color:"white"; position:0.5}

                GradientStop{color:"gray"; position:1.0}

            }

            Text {

                text: ":"

                font.family:digitalFont.name

                font.bold:true

                smooth:true

                font.pixelSize:28

                anchors.centerIn:parent

            }



        }







        Rectangle{

            id:milliSecondContainer

            width:(((parentContainer.width*24)/100))

            height:(((parentContainer.width*24)/100))

            gradient: Gradient{

                GradientStop{color:"gray"; position:0}

                GradientStop{color:"white"; position:0.5}

                GradientStop{color:"gray"; position:1.0}

            }

            Text {

                id: milli

                text: "00"

                font.family:digitalFont.name

                font.bold:true

                smooth:true

                font.pixelSize:28

                anchors.centerIn:parent

            }

        }

    }









    Timer{

        id:clock

        interval:50

        triggeredOnStart:true

        onTriggered: clock.updateTime()

        repeat:true



        function updateTime()

        {

            if(timer.milliSeconds >= 950)

            {

                timer.milliSeconds = 0;

                if(timer.seconds == 59)

                {

                    timer.seconds = 0;

                    if(timer.minutes == 59)

                    {

                        timer.minutes = 0;

                        if(timer.hours == 59)

                            clock.running=false;

                        else

                            timer.hours++;



                    }

                    else

                        timer.minutes++;

                }

                else

                    timer.seconds++;

            }

            else

                timer.milliSeconds = timer.milliSeconds+50;

            if(timer.milliSeconds == 0)

                milli.text = "000";

            else

                milli.text = timer.milliSeconds;

            if(timer.seconds == 0)

                second.text = "00";

            if(timer.seconds < 10)

                second.text = '0' + timer.seconds

            else

                second.text = timer.seconds;

            if(timer.minutes == 0)

                minute.text = "00";

            if(timer.minutes < 10)

                minute.text = '0' + timer.minutes;

            else

                minute.text = timer.minutes;



            if(timer.hours == 0)

                hour.text = "00";

            if(timer.hours < 10)

                hour.text = '0' + timer.hours;

            else

                hour.text = timer.hours;

        }

    }





}



Used QML component for NewLap: NewLap.qml (Best viewed in Landscape view)
 
import Qt 4.7



 Rectangle {

     property alias text: textItem.text

     width: textItem.width + 4

     height: 12

     border.width: 1

     radius: 5

     smooth: true

     opacity:0

     gradient: Gradient {

         GradientStop { position: 0.0; color: "darkGray" }

         GradientStop { position: 0.5; color: "black" }

         GradientStop { position: 1.0; color: "darkGray" }

     }



     Text {

         id: textItem

         anchors.centerIn: parent

         smooth:true

         color: "white"

     }

 }

Used QML component for NewLap: NewLap.qml (Best viewed in Landscape view)

import Qt 4.7



 Rectangle {

     property alias text: textItem.text

     width: textItem.width + 4

     height: 18

     border.width: 1

     radius: 5

     smooth: true

     opacity:0

     gradient: Gradient {

         GradientStop { position: 0.0; color: "darkGray" }

         GradientStop { position: 0.5; color: "black" }

         GradientStop { position: 1.0; color: "darkGray" }

     }



     Text {

         id: textItem

         anchors.centerIn: parent

         smooth:true

         color: "white"

     }

 }


The Javascript code  that has been used to create the application logic is just embedded into the QML code. It is a much simple program and I have done it right after my Hello World! program in QML. And thats the beauty of QML.


Additional Note:
  • I have written it using the Qt version 4.7.0, but after Qt 4.7.1 you can use import QtQuick 1.0 and thats recommended too.
  • Also, in this I have hardcoded the Animations for Buttons but its not necessary. You can use Behaviour, States or Transitions for the same effect with a much better & short code.
  • In the main.cpp file I have calculated the screen width and height to set the application output to full screen. I will show it in the next post.
  • As you can see, I have not hardcoded  most of the QML items width and height and most of its been relative to the screen size. So make thing look better I have created two versions of the same above QML files. One for a Portrait view, and another for Landscape view.
  • When the width of the screen is more, the QML file optimized for Landscape view is used. For example, in Nokia E Series mobiles, and vice versa.

Friday, August 26, 2011

Python file renamer!

Sometimes we may want to remove some common patterns from files. For example, if we download MP3 songs or music from a specific website, then all the file names will begin with that website name. This might create some irritation when searching for songs. The following snippet of Python can be used to rename files in directory and to remove common patterns from files.

This is applicable to all types of files and just not limited to mp3 files.

import os, array
files = os.listdir("D:\\Music") #The directory path of the files goes here
fnames = array.array('u')
fnames = files
#print fnames
#print files
for filename in fnames:
    print filename
    if(filename.startswith("<text to remove>")): # The common pattern that you want to remove goes within the quotes
        print "Found: " + filename
        os.rename(filename,filename.replace(("
<text to remove>"),"<If left empty the pattern will be removed with remaining text a new filename, or type something to replace the common pattern>"))
        print "Renamed to: " + filename.replace("_","")
 
print "Finished task"
This shows the simplicity of Python language and also its ability to achieve something tedious with much shorter codes. Although it lacks performance, it can be effectively used to write this kind of codes that will make our tasks easier.



Saturday, August 20, 2011

No targets found in Qt SDK Remote Compiler!

Sometimes you might have faced this problem, if you are using the Remote Compiler feature in the Linux version of Qt SDK. There will be no targets found in the Remote Compiler.


Solution: 
               Make sure that you Linux machine is connected to the Internet before you open the Qt Creator IDE.
                  If not, then close the Qt Creator and connect to the Internet. Now open the Qt Creator again.
                   The same procedure may apply to Mac version of Qt SDK's Remote Compiler. 
                   Sometimes closing your simulator may also work. 

Wednesday, July 27, 2011

My Second ever QML program! (A simple QML Program)

Since I have done my  final year project in Qt for Symbian, I have become a fan of Qt and QML. So I just wanted to try something in QML rather than Hello World! I always wanted to have a good Stop Watch in my mobile, so I just went straight away to right it in QML.

It merely took around 12 hours for me to code this decent looking looking app, but I have written it immediately after my Hello World in QML. So after getting used to it, it won't be time consuming.

I have published the app to OVI store, but I don't have the patience for it to get approved in the QA process, so I'm linking the packages here for you to try. The name says it all, download appropriate packages for your Symbian phone and Maemo.

Note : Before that you have to install the necessary Qt packages, and it must be of the version Qt 4.7.0 or higher. Qt Mobility packages are not necessary.

If you don't know what Qt and Qt Mobility packages are, then install the following package in your device.

If you are already using Qt or QML apps on your device, then start downloading the appropriate package for your mobile phone.

Update: 

To download SIS file!

This is the self signed package for all devices like S60 V3 FP1, FP2, S60 V5, Symbian^3.

stopwatch_qt-4_7_0_m1_0_2_maemo5.deb - 331.3 KB
This is the Maemo 5 compatible Debian package. This package is not tested in real device.

For shortcuts: RR-StopWatch

Monday, June 27, 2011

Why Meego will be a success!


After 6 days from the launch of Nokia’s flagship model N9, I’m writing this post today (27-06-11)! Finally, Nokia fan boys could really stop scratching their heads about the much awaited Meego phone. Since, Feb 11, when Elop Devil, current CEO of Nokia has announced its partnership with Microsoft to use WP7 as its future smartphone OS, there had been a war happening about Nokia’s Meego Phone N9.

Nokia fans and developers had showed their hateful in Nokia blogs and websites for dumping Meego OS and choosing WP7 as its primary OS Broken heart, and why not I was one among them. I was a pure Windows user and fan of the same till I tried Ubuntu a year before. Although I have used Red Hat Linux during my twelfth grade (2007), the UI didn’t manage to attract me. But now, Ubuntu is my favourite OS because of its speed and the options that we have to customize its appearance, after all its free. Ok! Just wanted to tell my experience with Ubuntu and Windows.

Now lets discuss about the child of Intel’s Moblin and Nokia’s Maemo, the Meego. As per the title of this post, this is going to be praising session for Meego rather than a discussion, of course I cannot discuss with myself.

Ok here we go,

Its Linux:

Lets differentiate things first. First of all, the major advantage is, its a Linux OS, and not a “Linux based OS”. So it is like any other Linux distribution, so no modified Kernel, no Virtual layers etc. This makes is different from Android, which is a Linux based OS.

This means, we will have a lot more freedom than other Smart Phone operating systems like IOS, WP7, Web OS and Symbian. And why not?! it will have a slight benefit over Android too, because as it is like our PC Ubuntu or Redhat so we are already used to it in terms of usage. The Linux community can also use their existing knowledge with Ubuntu or RedHat to modify this new comer.

I’m touching the support of PC Linux here, because Meego is not just limited to Smart Phones but also for Tablets and Vehicle infotainment systems. The WeTab is currently using this Meego platform and Big players like BMW and General Motors are committed to use Meego in their vehicle’s entertainment system.

Linux is not just limited to these capabilities but a lot others are already known to us! So Meego might close the gap between PC Linux and Embedded Linux, which Moblin failed to does.

I have seen a comment in YouTube which stated
Android is a wannabe Linux and Meego is real Linux
and eventually it got most users Thumbs UP!

Power of Multi tasking:

As we have already witnessed the speed and power of Linux in PC, it is also the same with Meego. Its assumed that it can run 200 apps simultaneously. Remember, this time you don’t have to hold a key to switch between apps, just a swipe can do it. At the same time, the real time view of that application will be displayed in this view. This will surely make multitasking a cake walk for users.
Maemo was also famous for this multitasking capability. View the video below if you don’t believe.
Maemo 5 Multi Tasking in action!
I have also read some comments from frustrated Apple fans regarding this Winking smile, one guy stated
Does Meego has 200 apps at all?
The answer for this comment is the next point.

Its faster and faster:

Being overwhelmed by the announcement of Nokia N9, I could not help searching YouTube for every video about this phone. Eventually I didn't miss to read about the response from users. Some users has commented that, the Nokia N9’s CPU was out dated and slow. I really don’t know about whether  its CPU but if it is old as they said, then Meego is faster than any other OS in existence.

I don’t understand the point of a modern CPU when it is already capable of running 200 apps at a time. Atleast 20 apps I believe! Smile with tongue out.

The speed is because it is native and does not contains a virtual layer(Thinking smile) as Android has. Neither it has a managed code environment as WP7 does.


Apps from Linux, Mac, Windows and Symbian:

I’m not sure how many are writing apps for Mac and Windows using Qt, but if there is something, they can be quite easily to this platform with just a compilation. But I’m sure that there are decent amount of apps available for Linux which are developed using Qt, that can be installed right away into this platform. With enough libraries KDE apps can also run seamlessly, but may suffer to support touch gestures.

With the announcement of Qt for Symbian in the year 2009, there is been a huge amount of interest shown by developers and users for creating apps in Qt and QML (Declarative language based on JavaScript, can be extended using Qt). Qt Mobility is an API used to access system based services like Messaging, Contacts, Sensors etc. is same for Symbian, Maemo and Meego, which is a huge advantage.

And who knows, with a custom Wine, we may able to run Windows executables too.

May emulate Android in future:

The only disadvantage that Meego  has is, the apps availability. Even though it will be  shipped with some featured applications, it may miss fun applications like we have in IOS and Android. To balance this, there is a group of people developing a Android emulation layer and its said that they can run Android apps seamlessly like native apps.

If you think this is not possible, then the two points are for you:
  1. Already, there is a similar kind of Android emulation layer for Black Berry!
  2. Alien Dalvik, is already under development phase which can run a fair number of Android apps.
Myriad Alien Dalvik.

Wide range of development options:

This is a huge advantage to both end users and also for developers, in my opinion. As a twelfth grade student I have used m-Shell scripts for my Symbian phone (Nokia 3230), so I think so will the other users will be privileged to have a variety of languages for their mobile.

Python & PyQt:

Personally I love Python for some simple scripting and because of the amount of libraries it has. So even if you want to generate a list of number that ends with ‘9’ for your vehicle registration number, it wont be a problem. PyQt is a Qt port for Python which is useful for both UI development and simple coding conventions, like Python.

Standard C & C++:

I’m not sure with this programming option, but having said that it is a Linux, it should support  C & C++.

HTML5, JavaScript and CSS3:

Meego website says that, HTML5, JavaScript and CSS3 are used to developed games for Meego, so it wont be a problem to write apps too.



May be Silverlight:

Silver light is basically focussed on cross platform deployment, so in future Silver light may also be used to create games for Meego. Remember, we already have an open source implementation of Silverlight for PC Linux.

Qt & QML:

Here come the heroes (IMHO), Qt and QML are really the building blocks of Meego. This language deserves to be highlighted separately. I personally believe that Nokia Engineers are working hard to dig every possibility out Qt framework. Since last year, I believed C# was the best language Shifty. With a recent project called Qt Lighthouse, the Qt Engineers have made the possibility of porting Qt to <any operating system>. And there is already a Qt port for Android is available unofficially. A single guy could achieve this port within a year time. So this tells the story about Qt. You can also see the IOS port of Qt using the same Lighthouse project.

I have read somewhere that editing the GUI for Android applications in XML (in 2011)Shifty is fair difficult and tiresome. So, I believe that, Qt and QML will be used by the Android developers hereafter. Again, with the cross platform capabilities they can target users from Symbian, Android, IOS and Meego environment for better profit. This symmetrically increases the number of Meego apps too. QML is another story and it leverages the power of Qt C++ and the simplicity of JavaScript. If you do not know about this, just Google it, it has a lot of features and is very easy to create beautiful fluid and animated interfaces. Can be used for creating Games very easily.

Intel AppUp Store:

If you ask me about the success of IOS and Android, its highly because of the range of apps and games it have. Obviously, the touch interface of both OSs provide good environment for fun games. Apple has the most number of apps despite the irksome Objective-C is only because it provided a platform for developers to make money with their apps, AppStore. But the story with Android is different, here the number of Java developers in the world are relatively higher. In the past Nokia has not realised the importance of apps but lately came up with OVI store which became a huge success inspite of the number of apps being low. But Intel has done things right right from the start by providing their SDKs and by awarding the best developer. So, it won’t be a big deal for Meego to get a streamline of developers, provided the nice Qt and QML languages.
As already said, Apps for Meego = Apps from Symbian + Apps from PC Linux + Apps from Window & Mac + Apps from Android + HTML apps from Web OS and Web.

Its Open Source:

Last but not least, its open source. I know, open source merely is not a synonym to quality, but Meego seems to be a quality product. Even serious Nokia critics has said good things about Meego after the launch of Nokia N9, YouTube videos are flooded with appreciating comments from open source and Nokia lovers, Blogs are lined up with a lot of happy comments from users about this product. An online petition called Twitition is also created by some Meego fans to get users support. If you feel like you are loving Meego for any reason, please sign up here and don’t forget to spread this among your friends.  Let’s hope that Nokia regroups with Intel to produce god damn Meego mobile phones in the future and continue to support Linux and Open Source.
Technorati Tags: ,,,,,
Your Ad Here