I made the source code for ScoreBook and my hybrid app library publicly available for anyone. Unfortunately I don't have the time to post a full tutorial, but the sources are quite well structured and documented. For anyone interested I suggest just playing around the code and identifying the main ideas behind them.
To my knowledge there is no default Qml-item for handling zooming. PinchArea is the currently best for providing zoom by pinch, but it doesn't work on desktop, and the default zoom behaviour isn't really to my liking.
Luckily Qml provides different transformations, and you can create your own zoomable area with a little extra effort. The following is my take on a draggable and zoomable Qml-item. This works on Android and on desktop (zoom with wheel). You can test this code by creating a Qt Quick application with the wizard in Qt Creator 3.1.1, and copy pasting this code into the default file called "main.qml"
import QtQuick 2.2
import QtQuick.Window 2.1
Window {
id: container
visible: true
width: 1280
height: 768
Rectangle {
id: rect
gradient: Gradient {
GradientStop { position: 0.0; color: "red" }
GradientStop { position: 0.33; color: "yellow" }
GradientStop { position: 1.0; color: "green" }
}
border.width: 2
width: 600
height: 600
transform: Scale {
id: scaler
origin.x: pinchArea.m_x2
origin.y: pinchArea.m_y2
xScale: pinchArea.m_zoom2
yScale: pinchArea.m_zoom2
}
PinchArea {
id: pinchArea
anchors.fill: parent
property real m_x1: 0
property real m_y1: 0
property real m_y2: 0
property real m_x2: 0
property real m_zoom1: 0.5
property real m_zoom2: 0.5
property real m_max: 2
property real m_min: 0.5
onPinchStarted: {
console.log("Pinch Started")
m_x1 = scaler.origin.x
m_y1 = scaler.origin.y
m_x2 = pinch.startCenter.x
m_y2 = pinch.startCenter.y
rect.x = rect.x + (pinchArea.m_x1-pinchArea.m_x2)*(1-pinchArea.m_zoom1)
rect.y = rect.y + (pinchArea.m_y1-pinchArea.m_y2)*(1-pinchArea.m_zoom1)
}
onPinchUpdated: {
console.log("Pinch Updated")
m_zoom1 = scaler.xScale
var dz = pinch.scale-pinch.previousScale
var newZoom = m_zoom1+dz
if (newZoom <= m_max && newZoom >= m_min) {
m_zoom2 = newZoom
}
}
MouseArea {
id: dragArea
hoverEnabled: true
anchors.fill: parent
drag.target: rect
drag.filterChildren: true
onWheel: {
console.log("Wheel Scrolled")
pinchArea.m_x1 = scaler.origin.x
pinchArea.m_y1 = scaler.origin.y
pinchArea.m_zoom1 = scaler.xScale
pinchArea.m_x2 = mouseX
pinchArea.m_y2 = mouseY
var newZoom
if (wheel.angleDelta.y > 0) {
newZoom = pinchArea.m_zoom1+0.1
if (newZoom <= pinchArea.m_max) {
pinchArea.m_zoom2 = newZoom
} else {
pinchArea.m_zoom2 = pinchArea.m_max
}
} else {
newZoom = pinchArea.m_zoom1-0.1
if (newZoom >= pinchArea.m_min) {
pinchArea.m_zoom2 = newZoom
} else {
pinchArea.m_zoom2 = pinchArea.m_min
}
}
rect.x = rect.x + (pinchArea.m_x1-pinchArea.m_x2)*(1-pinchArea.m_zoom1)
rect.y = rect.y + (pinchArea.m_y1-pinchArea.m_y2)*(1-pinchArea.m_zoom1)
}
MouseArea {
anchors.fill: parent
onClicked: console.log("Click in child")
}
}
}
}
}
By default the descendant MouseAreas of the "dragArea" will "steal" the dragging event, and drag will not work. In this case you can enable the drag by providing setting "drag.filterChildren" to true in "dragArea".
If you want to add e.g. SoundEffects to your awesome Qml app, then besides using the "import QtMultimedia 5.0" in the Qml file, remember to add QT += multimedia to your .pro file!
Although this is a bit off-topic, I would like to advertise this great widget-based plotting library based on Qt. Apparently it is a one-man-project, but fear not, the build quality and documentation is very good. It also comes with a set of easy to understand examples. The library can also export plots as vector or raster images.
I was looking for a C++ based plotting tool for a simulation project, and it turns out that there really aren't too many alternatives. Although I would recommend matplolib for almost all scientific plotting, real time plotting with intensive computations are a bit different.
Here is a screenshot from my simulation:
As mentioned here by using the Qt Resource System (qrc) has significant benefits over the assets folder on Android. Loading e.g. Qml-files is significantly faster with qrc than using assets.
Quite misleadingly the "Qt Quick Application" wizard on Qt Creator (3.0.0 and below) will currently use assets as the way to bundle files on Android. Instead I tried packaging all my Qml files, images and other static assets to qrc and my app loading times dropped from +5 seconds to a fraction of a second, so there really is a difference!
In addition the qrc system is cross-platform and there is a simple wizard in Qt Creator for creating the qrc-package.
I uploaded my first hybrid app made with Qt 5.1 to Google Play. The app is a simple score counter that can be used to track scores in social games like card e.g. card games. It uses C++/Qt for logic and QML for the UI.
Since Qt 5.1 for android is a developer preview version there are still many things that are not fully functional. This app was exclusively tested only on android 4.1 running on Samsung Galaxy Note II, so there's no guarantee that it will run on other setups. Qt 5.2 is promised to bring a performance boost and a more stable build on android, and Digia has encouraged to postpone app publishing in Play Store until then. That being said you are welcome to test the app and email me if you have any questions about it. If someone is interested in the source code, please do inform me and I'll see what I can do :)
So I ran into trouble when trying to publish my first Qt application on google Play store (using Qt 5.1.1, and Qt Creator 2.8.1). First of all I learned that "The Android system requires that all installed applications be digitally signed with a certificate whose private key is held by the application's developer" (more info here). Luckily Qt Creator 2.8.1 already includes an automated tool for creating this private keystore, so there's little extra effort involved. So I created a new keystore, signed my application with it and compiled the release version. But when I tried to deploy the app to my cellphone through Qt Creator, it would not start at all.
Turns out that the problem was that the default signing algorithm has changed between JDK 6 and JDK 7. So if you have JDK 7 installed your package will get signed with an unacceptable algorithm. More on this problem can be found here. My solution was to temporarily replace JDK 7 with JDK 6 (not the best solution). After this I could succesfully deploy the signed package.