[Solved] QAnimations: what's the best way to print flippable cards?

Pippin

hi
i think you need to make you own QGraphicsObject
that controls the image drawing.
Then add a new property for switching the image to next one and
use that for QState::assignProperty

I'm really not familiar enough with Qt for that sadly... It's a real shame there is no simple way to do that. I'm a bit surprised that the beginner that I am finds right away something easy that is not easily done on Qt.

mrjj

@Pippin
well the c++ of Qt does take some practice and knowledge of Class and subclasses and other
c++ related topic. Once mastering common c++ methods, its not that hard as it else would seem.

Did you have a look at QML ? its another qt way that is more easy in regards to more dynamic
user interfaces.
For example it can just flip
http://doc.qt.io/qt-4.8/qml-flipable.html#details
and tons of other easy to use features.

Pippin

@mrjj I don't know how to use QML, the tutorial shows code but I failed to understand where to put it / how to link it with the rest of the project. I'm doing everything through qmake, make and ./run in the terminal. I'm also not sure if QML can do anything I could do with C++ methods :S

mrjj

@Pippin
its not like c++
there is a viewer program and you can also embed in c++
http://www.ics.com/blog/whole-shebang-running-qml-files-directly
Google is your friend
You can mix with c++ so you can do most.
But depends on what you really need for project.

Pippin

@mrjj said:

@Pippin
its not like c++
there is a viewer program and you can also embed in c++
http://www.ics.com/blog/whole-shebang-running-qml-files-directly
Google is your friend
You can mix with c++ so you can do most.
But depends on what you really need for project.

The thing is, the QGraphicsView/Scene is only part of a window, which is part of my global project. How exactly do I insert QML inside a Qt project?

mrjj

hi
you can use createWindowContainer
http://www.ics.com/blog/combining-qt-widgets-and-qml-qwidgetcreatewindowcontainer
or like this
http://doc.qt.io/qt-4.8/qml-integration.html
(check if works for 5.5)

But if most of is c++ , it might be overkill to use QML just to draw some cards.
Even if easy animation wise. You can try it out and see how much a hassle it is.

Pippin

Would it work if I created a class that inherits both from QObject and QGraphicsPixmapItem? Would that make the assignProperty thing work or is it more complicated than that?

mrjj

@Pippin
That should work. Remember Q_OBJECT in class.
Not much more needed
adding a property for advancing image
http://doc.qt.io/qt-5.5/properties.html
then use the CurrentFrame (or what you call it) with animation system to
load next image .
If I understand correctly that you have sequence of images that is the card flipping.

Pippin

Thank you for your help so far @mrjj

So I've created the class QSpecialGraphicsPixmapItem, which basically inherits from QObject and QGraphicsPixmapItem.

	QPixmap *pix = new QPixmap("Images/A.png");
	QSpecialGraphicsPixmapItem* item = new QSpecialGraphicsPixmapItem(*pix);
	item->setPos(100, 100);
	WindowScene.addItem(item);
	
	QStateMachine *machine = new QStateMachine();
	
	QState *state1 = new QState();
	state1->assignProperty(item, "rotation", 90);
	
	QState *state2 = new QState();
	state2->assignProperty(item, "rotation", 0);
	
	state1->addTransition(&Button1, SIGNAL(clicked()), state2);
	state2->addTransition(&Button1, SIGNAL(clicked()), state1);
	
	machine->addState(state1);
	machine->addState(state2);
	machine->setInitialState(state1);
	machine->start();

But when I compile & execute it, the pixmap is not rotated by 90 as it should be (since state1 is the initial state). What am I missing? Edit: nvm, got it. I just had to add

Q_PROPERTY(qreal rotation READ rotation WRITE setRotation)

in the definition of the class QSpecialGraphicsPixmapItem. I'm starting to get it.

mrjj

Good work!
If it works, please update to solved.
Im pretty sure many more in the future will want to flip cards. :)

Pippin

@mrjj Well not yet, I'm not quite flipping QGraphicsPixmapItems yet ^^

Let's suppose I want to flip an horizontal, face-down card so that it becomes a vertical, face-up card. Let's suppose I also want to move it in the process, from point A to point B. There are 3 transformations to operate at once:

a rotation round the Z axis (horizontal to vertical: 90 degrees)
a rotation round the Y axis (face-down to face-up: 180 degrees)
a translation from (x_a, y_a) to (x_b, y_b)

My plan is to first create a transformation that will do half the above (1):

a rotation round the Z axis (horizontal to oblique: 45 degrees)
a rotation round the Y axis (face-down to <interim state> : 90 degrees)
a translation from (x_a, y_a) to ([x_a + x_b]/2, [y_a + y_b]/2)

When this animation is over, I have to find a way to automatically run another function that will change the QPixmap, then initiate the rest of the transformation (2). I have no idea which signal conveys the information "Animation is Finished" in Qt 5.5 though. Once this is coded, I only have to create the second, and last, animation that will operate at once (3):

a rotation round the Z axis (oblique to vertical: 45 degrees)
a rotation round the Y axis (<interim state> to face-up : 90 degrees)
a translation from([x_a + x_b]/2, [y_a + y_b]/2) to (x_b, y_b)

So basically, to do that, I have to find out the QTransform objects that will do (1) and (3) for me, and I have to find out how to "know" that my QObject has finished its first animation so that I can change its QPixmap then initiate the second animation (2).

If someone knows how to handle either part of the solution, feel free to share... Thank you.

Or maybe I should forget about the rotation round the Y axis and simply realize a scale from 0 to 1 x-wise. Not sure which is better.

mrjj

oh, biit too early to celebrate ;)
Animations can tell when finished.
connect(animation, signal( finished() ), this, slot( XXx );
Also look at QSequentialAnimationGroup
http://doc.qt.io/qt-5/qsequentialanimationgroup.html#details

Pippin

@mrjj Okay thanks, I'll look into it. Do you have any idea how to use an animation based on a QTransform object? Is it even possible? Like, putting the starting value at Id, and the ending value at the matrix we want?

Or should I rather create 3 animations on the same object (1 translation + 1 scale x-wise OR 1 rotation round Y + 1 rotation round Z) ? Does Qt allow more than 1 animation at a time for a given object?

mrjj

@Pippin

Well I only used QPropertyAnimation which needs a property.
Not seen any that took a QTransform. So I think it can't out of the box but
it might be possible in some way.

--Does Qt allow more than 1 animation at a time for a given object
That I never tried. But if different props, I see no reason why not.

SGaist

QParallelAnimationGroup to apply several animations at once

There's no QTransform property put that can be added to a custom object

Pippin

Okay I'm almost there! Switching the 2 Pixmaps is done successfully, the card is moved, rotated and scaled at the same time.

But the overall process doesn't look natural because, while the translation's speed is constant, the QGraphicsItem is not centered. (If I move the item to the position (x, y), the top left corner of the item will match (x, y) instead of its center.) Because of this, the item first seems to move slowly (typically when I'm scaling it from 1 to 0), and then faster (typically when I'm scaling it back from 0 to 1).

How can I specify that I want my items centered on the position I draw them onto?

mrjj

@Pippin
Hi
Good work.
Maybe its stupid question but if you draw it yourself, cant you just draw it centered ?
All you need is size of area and sixe of item, then you can offset x,y
sort of like this:
Draws images centered.

QImage source;
QPainter painter(...);
QRect rect(source.rect());
QRect devRect(painter.device()->width(), painter.device()->height());
rect.moveCenter(devRect.center());
painter.drawImage(rect.topLeft(), source);

Pippin

@mrjj

I don't understand, how can I draw it myself? I'm doing everything through animations. I'm not using any QImage or QPainter at this point. Qt is basically drawing everything itself from Point A to Point B, and I'm looking for a way to make it do that in a centered manner.

mrjj

@Pippin
Ok. Just read "on the position I draw them onto?" that you did draw it yourself.
So I guess you cannot adjust x,y yourself. sorry.

Pippin

So does this mean there's no way to solve this problem with animations? I've tried to set the "TransformOriginPoint" to the center of the item but that didn't change anything apparently. I've also looked for an option that would allow "drawing on center" but I couldn't find anything.