How to implement two-finger pinch gesture handling for Qt3D Camera's FOV?
There are FirstPersonCameraController and OrbitCameraController camera controllers which handles mouse/touch pad events. The latter even have zoomLimit property, but its meaning is not what I need to zoom scene (from inside a cubemap, camera position is fixed to (0, 0, 0)). I use the former one. It correctly handles mouse drag and single-finger touch events, but not deals with two-finger pinch-like gesture.
Can I customize in simple way PinchArea to interact with Qt3D's Camera? Or Qt Quick's API are orthogonal in this sense to Qt3D's API?
Use the pinchUpdated event of PinchArea to find information about the Pinch: according to the doc
The pinch parameter provides information about the pinch gesture,
including the scale, center and angle of the pinch. These values
reflect changes only since the beginning of the current gesture, and
therefore are not limited by the minimum and maximum limits in the
pinch property.
So you should be able to do something like:
Camera {
id: myCamera
}
PinchArea {
onPinchUpdated: {
myCamera.fieldOfView = pinch.scale*someFactor
}
}
This can be done in any custom QML you have that has access to the Pinch and the Camera.
If it is a custom script, you can alwazs pass the camera as a property
property Camera myCamera
I ended up with combination of PinchArea and MouseArea:
import QtQml 2.2
import QtQuick 2.9
import QtQuick.Scene3D 2.0
import Qt3D.Core 2.9
import Qt3D.Extras 2.9
import Qt3D.Render 2.9
import Qt3D.Input 2.1
import Qt3D.Logic 2.0
import PanoEntity 1.0
import Utility 1.0
Item {
property url panorama
onPanoramaChanged: {
if (panorama.toString().length !== 0) {
if (panoEntity.setPanorama(panorama)) {
basicCamera.position = Qt.vector3d(0.0, 0.0, 0.0)
basicCamera.upVector = Qt.vector3d(0.0, 0.0, 1.0)
basicCamera.viewCenter = panoEntity.pano.dir
pinchArea.updateFov(defaultFov)
}
}
}
property Image previewImage
property real fovMin: 20.0
property real defaultFov: 60.0
property real fovMax: 90.0
property real sensitivity: 1.5
property real pinchSensitivity: 0.5
Scene3D {
id: scene3d
anchors.fill: parent
aspects: ["render", "input", "logic"]
cameraAspectRatioMode: Scene3D.AutomaticAspectRatio // basicCamera.aspectRatio = width / height
multisample: true
Entity {
Camera {
id: basicCamera
projectionType: CameraLens.PerspectiveProjection
nearPlane: 0.1
farPlane: 2.0 * Math.SQRT2
}
RenderSettings {
id: renderSettings
renderPolicy: scene3d.visible ? RenderSettings.Always : RenderSettings.OnDemand
ForwardRenderer {
camera: basicCamera
clearColor: "transparent"
}
}
InputSettings {
id: inputSettings
}
components: [renderSettings, inputSettings]
PanoEntity {
id: panoEntity
MemoryBarrier {
waitFor: MemoryBarrier.All
}
}
}
}
PinchArea {
id: pinchArea
anchors.fill: parent
function updateFov(newFov) {
if (newFov > fovMax) {
newFov = fovMax
} else if (newFov < fovMin) {
newFov = fovMin
}
var eps = 1.0 / 60.0
if (Math.abs(basicCamera.fieldOfView - newFov) > eps) {
basicCamera.fieldOfView = newFov
zoomer.fov = newFov
}
}
function updatePinch(pinch) {
updateFov(basicCamera.fieldOfView * (1.0 + (pinch.previousScale - pinch.scale) * pinchSensitivity))
}
onPinchUpdated: {
updatePinch(pinch)
}
onPinchFinished: {
updatePinch(pinch)
}
MouseArea {
anchors.fill: parent
propagateComposedEvents: true
property point startPoint
function updateView(mouse) {
basicCamera.pan((startPoint.x - mouse.x) * sensitivity * basicCamera.fieldOfView / width, Qt.vector3d(0.0, 0.0, 1.0))
basicCamera.tilt((mouse.y - startPoint.y) * sensitivity * basicCamera.fieldOfView / height)
startPoint = Qt.point(mouse.x, mouse.y)
}
onPressed: {
startPoint = Qt.point(mouse.x, mouse.y)
}
onPositionChanged: {
updateView(mouse)
}
onReleased: {
updateView(mouse)
}
}
}
Zoomer {
id: zoomer
fovMax: parent.fovMax
defaultFov: parent.defaultFov
fovMin: parent.fovMin
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: 45
onFovChanged: {
pinchArea.updateFov(fov);
}
}
Shortcut {
context: Qt.WindowShortcut
enabled: scene3d.visible
sequence: StandardKey.Save
onActivated: {
panoEntity.pano.dir = basicCamera.viewCenter
panoEntity.pano.up = basicCamera.upVector
panoEntity.pano.version = 7
if (!panoEntity.updatePanorama()) {
console.log("Unable to update panorama %1".arg(panorama))
} else if (previewImage && Utility.fileExists(previewImage.source)) {
scene3d.grabToImage(function(grabResult) {
if (!grabResult.saveToFile(Utility.toLocalFile(previewImage.source))) {
console.log("Unable save preview to file: %1".arg(previewImage.source))
}
}, Qt.size(512, 512))
}
}
}
}
Related
my question is about using a QML DragHandler to move a QML Item. I have successfully implemented position through dragging (when holding the Ctrl modifier) like so:
DragHandler {
dragThreshold: 0
acceptedModifiers: Qt.ControlModifier
}
Now I would like to add another handler that allows me to precisely position the element. Other software does this throught the use of the shift modifier. So what I want to do is move the element not by the pixel amount that the mouse moves, but an amount smaller than that. Ideally I would want to do something like this:
DragHandler {
dragThreshold: 0
acceptedModifiers: Qt.ShiftModifier
onActiveTranslationChanged: {
activeTranslation *= 0.5;
}
}
Unfortunatelly activeTranslation is read-only and I don't see any other property I could use and I can't think of any other way to do it... Does anybody have an idea?
Thank you very much in advance!
Unfortunately Qt doesn't provide any way to change the drag speed AFAIK.
But this is a way to achieve it:
Rectangle
{
id: theDraggableElement
width: 100
height: width
color: "red"
DragHandler
{
id: dragHandlerFast
dragThreshold: 0
acceptedModifiers: Qt.ControlModifier
target: theDraggableElement
}
}
Item
{
id: invisibleItemForSlowDragging
width: theDraggableElement.width
height: theDraggableElement.height
Binding { restoreMode: Binding.RestoreBinding; when: !dragHandlerSlow.active; target: invisibleItemForSlowDragging; property: "x"; value: theDraggableElement.x }
Binding { restoreMode: Binding.RestoreBinding; when: !dragHandlerSlow.active; target: invisibleItemForSlowDragging; property: "y"; value: theDraggableElement.y }
DragHandler
{
id: dragHandlerSlow
dragThreshold: 0
acceptedModifiers: Qt.ShiftModifier
target: invisibleItemForSlowDragging
onTranslationChanged:
{
theDraggableElement.x = invisibleItemForSlowDragging.x - dragHandlerSlow.translation.x / 2
theDraggableElement.y = invisibleItemForSlowDragging.y - dragHandlerSlow.translation.y / 2
}
}
}
I have tested this with Qt 5.15.2.
I'm trying to do the following.
So far the only solution I found is to create my button from C++ and to use setMask. Is there any other way in order to achieve the same results but just using QML?
My shape button:
import QtQuick 2.0
import QtQuick.Shapes 1.14
Item {
id: sideButtonID
property alias mouseX: mouseArea.mouseX
property alias mouseY: mouseArea.mouseY
readonly property bool pressed: containsMouse && mouseArea.pressed
property point topLeftOffset: Qt.point(0, 0)
property point topRightOffset: Qt.point(0, 0)
property point bottomRightOffset: Qt.point(0, 0)
property point bottomLeftOffset: Qt.point(0, 0)
property var colorPressed: "green"
property var colorSelected: "red"
property var colorUnselected: "darkorange"
signal clicked
property var coordinate: generateButtonShapeCoordinates(x,y,width,height)
property point topLeft: coordinate.topLeft
property point topRight: coordinate.topRight
property point bottomRight: coordinate.bottomRight
property point bottomLeft: coordinate.bottomLeft
function generateButtonShapeCoordinates(x, y, width, height){
var topLeft = Qt.point(x-width/2 - topLeftOffset.x, y-height-topLeftOffset.y)
var topRight = Qt.point(x+width/2-topRightOffset.x, y-height-topRightOffset.y)
var bottomRight = Qt.point(x+width/2-bottomRightOffset.x, y-bottomRightOffset.y)
var bottomLeft = Qt.point(x - width/2-bottomLeftOffset.x, y-bottomLeftOffset.y)
return {
topLeft : topLeft,
topRight : topRight,
bottomRight : bottomRight,
bottomLeft : bottomLeft
};
}
function inside(point, polygon) {
// ray-casting algorithm based on
// http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html
var x = point[0], y = point[1];
var inside = false;
for (var i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
var xi = polygon[i][0], yi = polygon[i][1];
var xj = polygon[j][0], yj = polygon[j][1];
var intersect = ((yi > y) != (yj > y))
&& (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
if (intersect) inside = !inside;
}
return inside;
}
property bool containsMouse: {
var topLeft = Qt.point(0-topLeftOffset.x, 0-topLeftOffset.y)
var topRigh = Qt.point(width-topRightOffset.x, 0-topRightOffset.y)
var bottomRight = Qt.point(width-bottomRightOffset.x, height-bottomRightOffset.y)
var bottomLeft = Qt.point(0-bottomLeftOffset.x, height-bottomLeftOffset.y)
var polygon = [[topLeft.x,topLeft.y],[topRigh.x,topRigh.y],[bottomRight.x,bottomRight.y],[bottomLeft.x,bottomLeft.y]]
var point = [mouseX, mouseY]
return inside(point, polygon)
}
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: if (sideButtonID.containsMouse) sideButtonID.clicked()
}
Shape {
antialiasing: true
vendorExtensionsEnabled: true
asynchronous: true
anchors.centerIn: parent
ShapePath {
id: shapepathId
strokeWidth: -1
fillColor: sideButtonID.pressed ? sideButtonID.colorPressed : (sideButtonID.containsMouse ? sideButtonID.colorSelected : sideButtonID.colorUnselected)
startX: sideButtonID.topLeft.x; startY: sideButtonID.topLeft.y
PathLine { x: sideButtonID.topRight.x; y: sideButtonID.topRight.y }
PathLine { x: sideButtonID.bottomRight.x; y: sideButtonID.bottomRight.y }
PathLine { x: sideButtonID.bottomLeft.x; y: sideButtonID.bottomLeft.y }
}
Component.onCompleted: {
console.log("TopLeft: "+sideButtonID.topLeft)
console.log("TopRight: "+sideButtonID.topRight)
console.log("BottomLeft: "+sideButtonID.bottomLeft)
console.log("BottomRight: "+sideButtonID.bottomRight)
}
}
}
The usage of my button:
SideButtons {
z: 100
id: sideButtonID
width: 130
height: 248
anchors.verticalCenterOffset: 9
anchors.horizontalCenterOffset: -255
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
bottomRightOffset: Qt.point(100,0)
onClicked: {
print("X: "+mouseX)
print("Y: "+mouseY)
print("clicked")
}
}
Some of the options that I've heard so far but there are not good in my case.
using an image with a transparent background (sure but I'm going to have the same problem)
creating a C++ class which will inherit QAbstractButton (I would prefer to avoid as much as I can usage of C++ in the Ui side)
usage of a Shape in combination with MouseArea (I'm doing this already but I am encountering the bounding box problem.
Is there any other way which I don't know yet about?
How to display a OpenStreetMap on a ui-form in Qt? In the main window of mainwindow.ui. I need an interactive map. The transmitting latitude, longitude of the point and adding information about the point.
How to make this example interactive and display on the mainwindow.ui form?
main.cpp :
#include <QGuiApplication>
#include <QQuickView>
int main(int argc, char **argv)
{
QGuiApplication app(argc,argv);
QQuickView view;
view.setSource(QUrl(QStringLiteral("qrc:///places_map.qml")));
view.setWidth(360);
view.setHeight(640);
view.show();
return app.exec();
}
places_map.qml :
import QtQuick 2.0
import QtPositioning 5.5
import QtLocation 5.6
//! [Imports]
Rectangle {
anchors.fill: parent
//! [Initialize Plugin]
Plugin {
id: myPlugin
name: "osm" // "mapboxgl", "esri", ...
//specify plugin parameters if necessary
//PluginParameter {...}
//PluginParameter {...}
//...
}
//! [Initialize Plugin]
//! [Current Location]
PositionSource {
id: positionSource
property variant lastSearchPosition: locationOslo
active: true
updateInterval: 120000 // 2 mins
onPositionChanged: {
var currentPosition = positionSource.position.coordinate
map.center = currentPosition
var distance = currentPosition.distanceTo(lastSearchPosition)
if (distance > 500) {
// 500m from last performed pizza search
lastSearchPosition = currentPosition
searchModel.searchArea = QtPositioning.circle(currentPosition)
searchModel.update()
}
}
}
//! [Current Location]
//! [PlaceSearchModel]
property variant locationOslo: QtPositioning.coordinate( 59.93, 10.76)
PlaceSearchModel {
id: searchModel
plugin: myPlugin
searchTerm: "Pizza"
searchArea: QtPositioning.circle(locationOslo)
Component.onCompleted: update()
}
//! [PlaceSearchModel]
//! [Places MapItemView]
Map {
id: map
anchors.fill: parent
plugin: myPlugin;
center: locationOslo
zoomLevel: 13
MapItemView {
model: searchModel
delegate: MapQuickItem {
coordinate: place.location.coordinate
anchorPoint.x: image.width * 0.5
anchorPoint.y: image.height
sourceItem: Column {
Image { id: image; source: "marker.png" }
Text { text: title; font.bold: true }
}
}
}
}
//! [Places MapItemView]
Connections {
target: searchModel
onStatusChanged: {
if (searchModel.status == PlaceSearchModel.Error)
console.log(searchModel.errorString());
}
}
}
At least there are 2 ways using QtDesigner
1. using the QQuickWidget plugin from Qt Designer
Qt Designer is the tool used by QtCreator to modify the .ui, so it has more used widgets plugins, in my case I have it as shown below
and you go to the view of properties and in source you place the url of the .qml as it shows the following image:
Then we add to the .pro:
QT += quickwidgets
2. If you do not have it, we can use the widget and promote it as a class that inherits from QQuickWidget
for this we create a class that inherits from QQuickWidget:
#ifndef QUICKWIDGET_H
#define QUICKWIDGET_H
#include <QQuickWidget>
class QuickWidget: public QQuickWidget
{
public:
QuickWidget(QWidget *parent = Q_NULLPTR):QQuickWidget(parent){
setSource(QUrl("qrc:/places_map.qml"));
setResizeMode(QQuickWidget::SizeRootObjectToView);
}
};
#endif // QUICKWIDGET_H
Then we drag the QtDesigner Widget
and we right click selecting Promote to..., after that we obtain a menu where we place the values shown in the image, press the add button and then the promote button:
Then we add to the .pro:
QT += quickwidgets
Both examples are in the following link
I am creating a game for touch screens that requires 2-4 players to each have access to a pair of slider controls. The problem is that the QML Slider control responds to touch as a mouse event and seizes the focus. Then only one player can access a single control at a time. I need multiple sliders to respond to touch events simultaneously. My question is how to do that?
With the help of a variety of stack overflow posts, I have been able to create my own answer that so far seems to work. I detail the answer below in the answer section to save other newbies like me the trouble.
There is a pure qml solution to this problem. The TouchSlider C++ object in my first answer (elsewhere in this thread) was unnecessary. Here I have modified the code to the TouchSlider qml code to eliminate references to touchslider (the TouchSlider C++ object).
TouchPoint.qml:
import QtQuick 2.0
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2
Item {
property string sliderTitle
property real sliderMin
property real sliderMax
property real sliderVal
ColumnLayout{
id: column1
Label {
text: qsTr(sliderTitle)
font.pointSize: 10
}
Slider {
id: touchSlider1
minimumValue: sliderMin
maximumValue: sliderMax
orientation: Qt.Vertical
value: sliderVal
onValueChanged: function(){
sliderVal = Math.round(this.value);
labelSliderValue.text = qsTr(JSON.stringify(sliderVal));
}
}
Label {
id: labelSliderValue
text: qsTr(JSON.stringify(sliderVal))
font.pointSize: 10
}
function sliderSetValueFromTouch(position){
// Assume qs a vertical slider
var minvalue = touchSlider1.minimumValue;
var maxvalue = touchSlider1.maximumValue;
// Since this is a vertical slider, by assumption, get the height
var height = touchSlider1.height;
// Compute the new value based on position coordinate
var newvalue = (height-position)/height * (maxvalue-minvalue);
if (newvalue<minvalue) newvalue = minvalue;
if (newvalue>maxvalue) newvalue = maxvalue;
//qDebug() << newvalue;
// Set the value of the slider
touchSlider1.value = newvalue;
}
MultiPointTouchArea{
anchors.fill: touchSlider1
touchPoints: [
TouchPoint {
id: point1
onPressedChanged: function(){
if(pressed){
//console.log("pressed");
//console.log(touchslider.testStringReturn());
//touchslider.sliderSetValueFromTouch(touchSlider1,point1.y);
column1.sliderSetValueFromTouch(point1.y);
}
}
}
]
onTouchUpdated: function(){
//touchslider.sliderSetValueFromTouch(touchSlider1,point1.y);
column1.sliderSetValueFromTouch(point1.y);
}
}
}
}
The touchslider.h and touchslider.cpp files add no value.
I could not find a pure QML way to solve the problem but I wanted to minimize the use of C++. Using C++, I create an object TouchSlider and add it to my qml scene. The TouchSlider object has a simple function to update the value of a vertical slider according to a position argument. Then in the QML code, I add a MultiPointTouchArea on top of a regular slider and respond to the touch events by calling C++ function.
Here are all my files for a project called SliderPair.
SliderPair.pro:
QT += qml quick widgets
QT += quickcontrols2
QT += core
CONFIG += c++11
SOURCES += main.cpp \
touchslider.cpp
RESOURCES += \
qml.qrc
# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH += qml
# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target
HEADERS += \
touchslider.h
DISTFILES +=
main.cpp:
#include <QApplication>
#include <QQmlApplicationEngine>
// add following includes for exposing new class TouchSlider to QML
#include <QQmlEngine>
#include <QQmlContext>
#include "touchslider.h"
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
//Create an object of type TouchSlider
//When a scoped pointer goes out of scope the object is deleted from memory. Good housekeeping:
QScopedPointer<TouchSlider> touchslider (new TouchSlider);
QQmlApplicationEngine engine;
engine.addImportPath(QStringLiteral("qml"));
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
//QML can now refer to the TouchSlider object using the handle "touchslider":
engine.rootContext()->setContextProperty("touchslider",touchslider.data());
return app.exec();
}
touchslider.h:
#ifndef TOUCHSLIDER_H
#define TOUCHSLIDER_H
#include <QObject>
#include <QDebug>
#include <QtQuickControls2>
class TouchSlider : public QObject
{
Q_OBJECT
public:
explicit TouchSlider(QObject *parent = 0);
//call Q_INVOKABLE macro to set up functions for QML
Q_INVOKABLE void testDebug(); //hello world from C++
Q_INVOKABLE QString testStringReturn(); //hello world to javascript
Q_INVOKABLE void sliderSetValueFromTouch(QQuickItem *qs,int position );//use touch event to set slider value
signals:
public slots:
};
#endif // TOUCHSLIDER_H
touchslider.cpp:
#include "touchslider.h"
TouchSlider::TouchSlider(QObject *parent) : QObject(parent)
{
}
void TouchSlider::testDebug()
{
qDebug() << "Hello from C++";
}
QString TouchSlider::testStringReturn()
{
QString message = "Hi from C++";
return message;
}
void TouchSlider::sliderSetValueFromTouch(QQuickItem *qs, int position)
{
// Assume qs a vertical slider
// Get its properties (its slider properties are accessible even though it is declared as QQuickItem)
// minimumValue and maximumValue are of type QVariant so we need to cast them as double
double minvalue = qs->property("minimumValue").value<double>();
double maxvalue = qs->property("maximumValue").value<double>();
// Since this is a vertical slider, by assumption, get the height
double height = qs->property("height").value<double>();
// Compute the new value based on position coordinate
double newvalue = (height-position)/height * (maxvalue-minvalue);
if (newvalue<minvalue) newvalue = minvalue;
if (newvalue>maxvalue) newvalue = maxvalue;
//qDebug() << newvalue;
// Set the value of the slider
qs->setProperty("value",newvalue);
}
TouchSlider.qml:
import QtQuick 2.0
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2
Item {
property string sliderTitle
property real sliderMin
property real sliderMax
property real sliderVal
ColumnLayout{
Label {
text: qsTr(sliderTitle)
font.pointSize: 10
}
Slider {
id: touchSlider1
minimumValue: sliderMin
maximumValue: sliderMax
orientation: Qt.Vertical
value: sliderVal
onValueChanged: function(){
sliderVal = Math.round(this.value);
labelSliderValue.text = qsTr(JSON.stringify(sliderVal));
}
}
Label {
id: labelSliderValue
text: qsTr(JSON.stringify(sliderVal))
font.pointSize: 10
}
MultiPointTouchArea{
anchors.fill: touchSlider1
touchPoints: [
TouchPoint {
id: point1
onPressedChanged: function(){
if(pressed){
//console.log("pressed");
//console.log(touchslider.testStringReturn());
touchslider.sliderSetValueFromTouch(touchSlider1,point1.y);
}
}
}
]
onTouchUpdated: function(){
touchslider.sliderSetValueFromTouch(touchSlider1,point1.y);
}
}
}
}
PlayerControls.qml:
import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2
Item {
// These properties act as constants, useable outside this QML file
property string playerName
property real priceMin
property real priceMax
property real qualityMin
property real qualityMax
property real priceValue
property real qualityValue
property int sliderWidth
ColumnLayout{
id: columnLayout1
width: 640
height: 480
Layout.minimumWidth: 640
Layout.fillWidth: true
anchors.fill: parent
spacing: 10.2
Label {
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
id: labelPlayer1
text: qsTr(playerName)
font.pointSize: 10
}
RowLayout{
ColumnLayout{
Label {
text: qsTr("")
font.pointSize: 10
width: 50
}
}
TouchSlider {
width: sliderWidth
sliderTitle: "Price"
sliderMin: priceMin
sliderMax: priceMax
sliderVal: priceValue
}
TouchSlider {
width: sliderWidth
sliderTitle: "Quality"
sliderMin: qualityMin
sliderMax: qualityMax
sliderVal: qualityValue
}
}
}
}
main.qml:
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("SliderPair Test")
Item {
PlayerControls{
playerName: "Player 1"
priceMin: 0
priceMax: 200
priceValue: 100
qualityMin: 0
qualityMax: 50
qualityValue: 25
sliderWidth: 200
}
}
}
The result should look like this:
On a touch screen like my Surface Pro, I can control each slider simultaneously with two fingers. Since Windows supports up to 10 simultaneous touches that should mean I can have 2-4 players without a problem. We shall see.
I'm trying to find a way to do a transition on a QML element, when a binding changes. Say you have a Text element, with the text property bound to something. What I want is when the data in the binding changes, the element fades out (Still displaying old data), switches and fades back in with the new data (the actual transition occurring while the element isn't visible.)
I've been searching everywhere for a way to do this but I can figure it out. I've tried using Qt Quick animations within QML, but the data itself changes before the animation runs, leaving the animation unnecessary. I've tried creating a custom QDeclarativeItem object that calls an animation within the QDeclarativeItem::paint() but I can't figure out how to get it to actually run.
I should note here that I know my bindings are working fine as the displayed data changes, I just can't get these animations to run at the proper time.
Here is what I tried with QML:
Text {
id: focusText
text: somedata
Behavior on text {
SequentialAnimation {
NumberAnimation { target: focusText; property: "opacity"; to: 0; duration: 500 }
NumberAnimation { target: focusText; property: "opacity"; to: 1; duration: 500 }
}
}
}
And here is what I tried in implementing a custom QDeclarativeItem:
// PAINTER
void AnimatedBinding::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) {
// Setup the pen
QPen pen(m_color, 2);
painter->setPen(pen);
painter->setOpacity(this->opacity());
// Draw the item
if (m_bindingType == QString("text")) {
QPropertyAnimation animation(this, "opacity");
animation.setDuration(1000);
animation.setStartValue(1);
if (drawn) {
animation.setStartValue(1);
animation.setEndValue(0);
animation.start();
} else drawn = true;
painter->drawText(boundingRect(), m_data.toString());
animation.setEndValue(0);
animation.start();
} else {
qCritical() << "Error unknown binding type!";
return;
}
}
But like I said, the animation that I start within the painter never actually fires.
Any tips? Anyone ever done this before? I've been banging my head on this for about a week.
How about doing it in qml only this ways :
Define a custom element of your own type, that behaves the way you want it to.
Use this element instead of traditional element to be animated.
eg. I have create a custom 'AnimatedText' type to have the fading in and fading out behavior on the text elements whenever text related to them changes.
File 1 : AnimatedText.qml
import QtQuick 1.0
Item
{
id: topParent
property string aText: ""
property string aTextColor: "black"
property int aTextFontSize: 10
property int aTextAnimationTime : 1000
Behavior on opacity { NumberAnimation { duration: aTextAnimationTime } }
onATextChanged:
{
topParent.opacity = 0
junkTimer.running = true
}
Timer
{
id: junkTimer
running: false
repeat: false
interval: aTextAnimationTime
onTriggered:
{
junkText.text = aText
topParent.opacity = 1
}
}
Text
{
id: junkText
anchors.centerIn: parent
text: ""
font.pixelSize: aTextFontSize
color: aTextColor
}
}
and in your main.qml
import QtQuick 1.0
Rectangle
{
id: topParent
width: 360
height: 360
AnimatedText
{
id: someText
anchors.centerIn: parent
aText: "Click Me to change!!!.."
aTextFontSize: 25
aTextColor: "green"
aTextAnimationTime: 500
}
MouseArea
{
anchors.fill: parent
onClicked:
{
someText.aText = "Some random junk"
}
}
}