Marquee text element with Qt Quick (QML)

Currently I am adding new feature to one of my QML application. While doing so I created marquee text element for QML.

I had created such component for Symbian long time ago when I was working on Avkon. Using similar logic I created similar component for QML as well.

I needed this component because while displaying one line text item in QML, sometime text is much larger than display area.

Following is code which I created my purpose, I tried to make it as much reusable as I can without putting much effort. Hope this will be to helpful to someone.

In following code whenever someone touch text element, it start scrolling its content. To scroll I am using text's actual width and display width. On timer event I am increasing x position of text so new text can be displayed. But I am subtracting same x delta from text's x location so text element remain on same position. And as I have enabled clipping on item element text which is outside of visible area will not be displayed.

import QtQuick 1.0

Item {
    id:marqueeText
    height: scrollingText.height
    clip: true    
    property int tempX: 0
    property alias text: scrollingText.text
    Text {        
        x: tempX
        id:scrollingText        
    }

    MouseArea {
        id:mouseArea
        anchors.fill: parent
        onClicked: {                            
            tempX = 0;
            timer.running = true;            
        }
    }

    Timer {
        id:timer
        interval: 200; running: false; repeat: true
        onTriggered:{            
            tempX = tempX + 5
            scrollingText.x = -tempX;

            if( tempX + marqueeText.width > scrollingText.width ) {
                timer.running = false
                pauseTimer.running = true
            }
        }
    }

    Timer {
        id:pauseTimer
        interval: 500; running: false; repeat: false
        onTriggered: {
            scrollingText.x = 0
        }
    }
}

Following is code, how above code can be used.

Rectangle {
        border.width: 2
        border.color: "black"
        color: "lightsteelblue"
        anchors.horizontalCenter: parent.horizontalCenter
        width: 250
        height: text.height + 10
        y:100
        MarqueeText {
            id:text
            width: 200
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            text: "start ------ abcdefghijklmnopqrtaksdjfkdfjklsdjflksdjfklsjadfkljsad;flasjdlfjasdfjldsdfljf---- end"
        }
    }

Following output from above code.

Trying out iPhone SDK Mapkit framework

Currenly I am working on my small pet project for my iPod. I want my iPod to communicate with my Nokia device to get current location and display it.

I have not make much progress yet,  now days I don't have much free time. But I was easily able to display hard coded location on my application.

To display map and location you can use iPhone SDK's Mapkit framework. But before using it you must add framework to your project.  To add framework right click on framework-> add -> existing frameworks and then choose Mapkit framework.

Now I added instance of MKMapView to my view controller like below.

#import <UIKit/UIKit.h>
#import <MapKit/MapKit.h>

@interface MapkitDemoViewController : UIViewController {
 IBOutlet MKMapView* mapView;
}

@property(retain,nonatomic) MKMapView* mapView;

@end

And initialized it in viewDidLoad function like below. I am using CLLocationCoordinate2D structure to set required cordinate and MKCoordinateSpan to specify required zoom level.  Then creating MKCoordinateRegion from above info and setting that to mapView.

We can also add our custom place marker using MKPointAnnotation, its concrete implementation for MKAnnotation protocol. Creating instance of MKPointAnnotation and setting it to mapView is quite strait forward.

- (void)viewDidLoad {
[super viewDidLoad];
 
 mapView = [[MKMapView alloc] initWithFrame:self.view.bounds];
 mapView.mapType = MKMapTypeHybrid;
 
 CLLocationCoordinate2D coord = {latitude: 37.247414,longitude: 127.058278};
 MKCoordinateSpan span = {latitudeDelta: 0.001, longitudeDelta:0.001};
 MKCoordinateRegion region = {coord, span};
 
 [mapView setRegion:region];
 
 MKPointAnnotation *anno = [[MKPointAnnotation alloc] init];
 [anno setCoordinate:coord];
 [anno setTitle:@"Test"];
 [anno setSubtitle:@"Test annotation"];
 [mapView addAnnotation:anno];
  
 [self.view addSubview:mapView];
}

In case you need convert latitude and longitude between decimal degrees and degrees, minutes, and seconds. Here is link which I used.

And also If you face "Couldn't register com.yourcompany.Mapkit Demo with the bootstrap server" kind of error. I used to kill my simulator and relaunch application and it worked fine then after.

That's all for now, following is output from above code.

Using TextInput in Qt Quick (QML)

Recently I wanted to created a text input dialog box in QML. QML has nice support for editing large text and one line text. For editing large text we can use TextEdit QML element and for one line text we can use TextInput QML element.

But default appearance of TextInput might not suite look and feel of your application. It was not suited for my application as well. Following is my initial code.

TextInput {
        y:50
        anchors.horizontalCenter: parent.horizontalCenter
        id: text1
        font.pixelSize: 20; font.bold: true
        text: "Enter text here ..."
        focus: true
        width: container.width - 30 ; height: 40
    }

And following is output from above code.

To change appearance, I put it inside Rectangle element and modified its border and other properties.

Here how it looks after my change.

Here is modified code. In following code container is parent Rectangle element.

    Rectangle{
        y: 100
        width: container.width - 30 ; height: 40
        anchors.horizontalCenter: parent.horizontalCenter
        border.width: 3
        border.color: "#4b4b4b"
        color: "lightsteelblue"
        radius: 5
        TextInput {
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            id: text2
            font.pixelSize: 20; font.bold: true
            text: "Enter text here..."
            width: container.width - 40 ;
            color: "#4b4b4b"
            focus: true
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                text2.selectAll();
            }
        }
    }

Hope it will help someone.

The Math Game using Qt Quick

As I told in my previous post that I am trying to learn QML Animation and creating a simple game to try out Animations.

As a result I created simple and fun math game. I mainly targeted children for this game and wanted it to be easy and fun and not demanding.


I uploaded this game to ovi store for free. Will update when its available on ovi store.

Mean time enjoy following screen shots from game.

Meego Avatar creator

Today while surfing Internet I found out this cool site from Intel AppUp Developer program which let you create MeeGo character like avatar for you.

I created following avtar for my self, named it Qt Warrior.

Give it a try, its fun. Here is link.