Qml item state undefined

I'm working on a info screen application done in Qml that will be run on a Raspberry Pi. I'm doing the main coding on the desktop and everything runs well.

On the Pi I'm using a self build of Qt 5.4.2 and it worked very well, until yesterday that is. Suddenly I got no display of my info slides. Strange thing, it worked perfeclt fine before.

After a good bit of cursing I found that my Image didn't show, because for some odd reason the binding of

visible: root.state=='rotating'

was evaluated as false. Well, how the hell is that possible was the next question. And debug output of the state randomly said "undefined", eh ?? WTF!?

What I don't understand is how it suddenly crept up as I've used states before too in my app. Anyway, it turns out that it is a known bug (QTBUG-41649) in gcc-4.6 on arm that miss compiles a specific file in the Qml library.

 Fix applied and all seems well. I hope.

MouseJoint support added to QtQuick Box2D bindings

I added support for the Box2D MouseJoint a couple of days ago to the QML Box2D bindings. A quick and dirty test video below:



Get it here.

More QML Box2D progress and github

To start with, I pushed my enhanced version of the qml-box2d bindings to github.

It is based on Box2D 2.2.1 and adds more features:
Joint release/grab, WeldJoint, WheelJoint, FrictionJoint, Edge shape support, more properties and methods (gravityScale, getMass(), getInertia(), angularVelocity, etc) and Body fixture iteration.

Here are some videos showing usage of PulleyJoint and RopeJoin:

PulleyJoint

RopeJoint

Have fun! (oh, Qt 4.7 or 4.8 only!)

Drawing lines in QML

QML is very nice way to build stuff, but it does lack some features that has bugged at least myself quite a lot. There is no Line element for drawing arbitrary lines from point x1,y1 to x2,y2.

Fortunately there is the Rectangle element. And what is a rectangle with a height of 1 ? More or less a line. Rectangles can be set to be at x1,y1 and you can specify the rotation. And that gives us a line from x1,y1 with a rotation. And digging deep in your brain for some basic math gives us a line drawing algorithm.

Just calculate the length from x1,y1 to x2,y2 and that gives us the width of the rectangle. Then calculate the slope and we have the rotation we need.


And here you have a Line element ready to go for your QtQuick project, free to use so enjoy!
(Note: This is a workaround for having no canvas like element in Qt 4.7/8, if you are using Qt 5 then you can use the Canvas)

import QtQuick 1.1

Rectangle {
    id: l
    property alias x1: l.x
    property alias y1: l.y

    property real x2: l.x
    property real y2: l.y

    color: "black"
    height: 2
    smooth: true;

    transformOrigin: Item.TopLeft;

    width: getWidth(x1,y1,x2,y2);
    rotation: getSlope(x1,y1,x2,y2);

    function getWidth(sx1,sy1,sx2,sy2)
    {
        var w=Math.sqrt(Math.pow((sx2-sx1),2)+Math.pow((sy2-sy1),2));
        console.debug("W: "+w);
        return w;
    }

    function getSlope(sx1,sy1,sx2,sy2)
    {
        var a,m,d;
        var b=sx2-sx1;
        if (b===0)
            return 0;
        a=sy2-sy1;
        m=a/b;
        d=Math.atan(m)*180/Math.PI;

        console.debug(a)
        console.debug(b)

        if (a<0 a="" b="" d="" else="" if="" return="">=0 && b>=0)
            return d;
        else if (a<0 b="">=0)
            return d;
        else if (a>=0 && b<0 0="" d="" else="" pre="" return="">

Retro pinball, game prototype and qml box2d demo

Something I'm working on, not that special, but kinda fun still. Uses my improved Box2D QML plugin, otherwise it is pure QML only (for now).

QML Box2D and more features

I'm working on a couple of different games, using the QML Box2D bindings. As I'm targeting the N9, I need to use the Qt 4.x based version that has been pretty much forgotten by the authors, old version of Box2D and many features are missing. So lets scratch that itch then. The Moto Trial Racer sources where consulted for some features and ideas.

So here, my a bit more updated version of the QML Box2D bindings:

• Box2D upgraded to 2.2.1
• Joint release/grab
• WeldJoint added
• WheelJoint added
• FrictionJoint added
• Basic Edge shape support added
• Missing properties and methods added (gravityScale, getMass(), getInertia(), angularVelocity, etc)

I'm also going to add RopeJoint, PulleJoint and GearJoint  support as time permits (and need arises).

Enjoy !

Radio X3M app or how to use Qt, Gstreamer and the N9

As a bit of a training in using Qt and Gstreamer together I made a Radio X3M app for the N9, first mainly for personal use but maybe there is one or two Radio X3M listeners with a N9, who knows.

Submitted it to QA today, it is also available as a direct download here. Sources are are in git here. The most interesting part is probably the QML Gstreamer RTSP player element, here. It uses a bunch of elements that are connected to various UI elements for Volume, Equalizer and Surround.

OpenStreetMap Maps with QML Map object

QtQuick/QML comes with a nice ready made Map element that can show map tiles and dots and polygons and stuff. Really nice and all, unfortunately the default and only map available is Nokia maps. And well, I prefer free maps. So, how to get OpenStreetMap working ?

One option is to make your own QML based map element, I started on that but never had enough patience to finish it.

But after some googling around I found qtm-geoservices-extras ! Today I started to look into it a bit more and trying to figure out how to get in working when targeting the N9 as we have the silly problem that anything submitted to the Nokia Store can not depend on any outside packages. Extremely annoying that.

The extra geoservices contain Qt plugins for providing map (and route, search, etc) features from OSM and Google. I didn't care of the goolge plugin at all.

So how to get the plugin working when you make your own app ?

Adding OpenStreetMap Qt map provider to your app

QML Map with OpenStreetMap tiles, running on the simulator

First, checkout qtm-geoservices-extras

git clone git://gitorious.org/qtm-geoservices-extras/qtm-geoservices-extras.git

Then copy the openstreetmap directory into your own project

cp -a qtm-geoservices-extras/openstreetmap your-map-app/

The edit your projects .pro file to include:

include(openstreetmap/openstreetmap.pro)

And in your main.cpp (or whatever), add:

#include <qtplugin>
Q_IMPORT_PLUGIN(qtgeoservices_osm)

Then edit the openstreetmap.pro file in the openstreetmap directory, like this:

1. Add static to CONFIG
2. Remove or comment out the include(../common.pri)
3. Remove or comment out TARGET=
4. Remove or comment out TEMPLATE=
5. Add 
   

   INCLUDEPATH += $$PWD
   DEPENDPATH += $$PWD

End result should look something like this:

#TEMPLATE = lib
CONFIG += plugin
#TARGET = $$qtLibraryTarget(qtgeoservices_osm)
PLUGIN_TYPE=geoservices
# include(../common.pri)
QT += network
CONFIG += mobility static
MOBILITY = location
INCLUDEPATH += $$PWD
DEPENDPATH += $$PWD

Then add the map element to your QML code

import QtMobility.location 1.2

    Map {
        id: nmap
        width: 480;
        height: 300;
        anchors.top: osm.bottom;
        zoomLevel: 10
        center: mypos;
        connectivityMode: Map.OfflineMode;
        plugin : Plugin {
                name : "openstreetmap"
                PluginParameter{ name:  "mapping.cache.directory" ; value: "/tmp/qtmap" }
                PluginParameter{ name:  "mapping.cache.size" ; value: "200000" }
            }
    }

    Coordinate {
        id: mypos
        latitude: 60.45;
        longitude: 22.25;
    }

And that should do it. Build your app and try it out!

Qt and QtQuick/QML resources for N9/N950 development

Finding documentation and other resources for N9 (and N950) development is not hard, but it's a bit too spread around. Generic Qt information can be found on the Nokia Qt site, then N9 specific stuff are in another place. Then there are at least 3 forums to follow.

I started writing this some time ago already, I was going to write some more later when I had time but this post is more or less what I was about to write. So there, go read it.

QML DatePicker giving a headache ?

More as a note-to-self but maybe someone else has the same problem. I was trying out the QML DatePicker from com.nokia.extras and it just didn't like to work in the Simulator. After some random clicking around I found the solution, make sure you have selected "Harmattan" as the com.nokia.extras platform in the Simulators "Application" configuration tab.