Qt Quick QML animation stressing CPU

[petermcg]

Hello,

I'm planning to use QML to implement an appealing UI for a project. The UI will be displayed on a range of display sizes including very large monitors/TVs. I put together a QML example that's driven by the data that I will be displaying (data comes in once a second from a serial device). Following is the QML...

import Qt 4.7
 
Rectangle {
    width: 640
    height: 480
	color: "white"
 
	Rectangle {
		x: 0
		width: 100
		height: wattsCirc*(parent.height/wattScale)
		//height: watts/6
		radius: 15
		anchors.bottom: parent.bottom
		//anchors.horizontalCenter: parent.horizontalCenter
		smooth: true
		gradient: Gradient {
			GradientStop { position: 0.0; color: "lightsteelblue" }
			GradientStop { position: 1.0; color: "blue" }
		}
		Behavior on height { NumberAnimation { duration: 1000; easing.type: Easing.InOutBounce } }
	}
 
	Rectangle {
		x: 100
		width: 100
		height: wattsCirc*(parent.height/wattScale)
		//height: watts/6
		radius: 15
		anchors.bottom: parent.bottom
		//anchors.horizontalCenter: parent.horizontalCenter
		smooth: true
		gradient: Gradient {
			GradientStop { position: 0.0; color: "lightsteelblue" }
			GradientStop { position: 1.0; color: "blue" }
		}
		Behavior on height { NumberAnimation { duration: 1000; easing.type: Easing.InOutBounce } }
	}
 
 
    //  SAME RECTANGLE REPEATED ANOTHER FIVE TIMES
 
	Text {
		text: "rawCurrent"
		y: 100
		x: 100
	}
 
	Text {
		id: id_current
		text: rawCurrent
		y: 100
		x: 200
	}
 
	// FOUR MORE TEXT ENTRIES LIKE THE ONE ABOVE, EACH DISPLAYING A DIFFERENT PROPERTY VALUE
}

import Qt 4.7

Rectangle {
    width: 640
    height: 480
	color: "white"

	Rectangle {
		x: 0
		width: 100
		height: wattsCirc*(parent.height/wattScale)
		//height: watts/6
		radius: 15
		anchors.bottom: parent.bottom
		//anchors.horizontalCenter: parent.horizontalCenter
		smooth: true
		gradient: Gradient {
			GradientStop { position: 0.0; color: "lightsteelblue" }
			GradientStop { position: 1.0; color: "blue" }
		}
		Behavior on height { NumberAnimation { duration: 1000; easing.type: Easing.InOutBounce } }
	}

	Rectangle {
		x: 100
		width: 100
		height: wattsCirc*(parent.height/wattScale)
		//height: watts/6
		radius: 15
		anchors.bottom: parent.bottom
		//anchors.horizontalCenter: parent.horizontalCenter
		smooth: true
		gradient: Gradient {
			GradientStop { position: 0.0; color: "lightsteelblue" }
			GradientStop { position: 1.0; color: "blue" }
		}
		Behavior on height { NumberAnimation { duration: 1000; easing.type: Easing.InOutBounce } }
	}


    //  SAME RECTANGLE REPEATED ANOTHER FIVE TIMES

	Text {
		text: "rawCurrent"
		y: 100
		x: 100
	}

	Text {
		id: id_current
		text: rawCurrent
		y: 100
		x: 200
	}

	// FOUR MORE TEXT ENTRIES LIKE THE ONE ABOVE, EACH DISPLAYING A DIFFERENT PROPERTY VALUE
}

To copy to clipboard, switch view to plain text mode 

So there are six rectangles, all displaying the same information, all animated on height change (implementing bar charts). There are also five text items displaying values. The values that are bound to are exposed from C++ to the QML using setContextObject, and the class in question uses the Meta-Object System to expose the properties. All properties are changed once a second.

When I run this example, I see that my CPU usage steadily climbs from something acceptable (~12%) to something that I think is too high (40-50%). Why would that be? It seems like a high load, considering that QML is targeted to mobile devices with much less processing power than my i5. Eliminating the QML UI and just running the underlying logic keeps CPU usage steady at 8%.

Any help on this would be greatly appreciated,

Peter

[petermcg]

Proper threading of the underlying logic fixed this.

[goli]

hi,
I wanted to know if you found a way to solve the problem of CPU consumption, because i have the same problem...
tnx