Smooth Text Scrolling

[plitex]

Hi all,

I'm looking to build a text scrolling app and I'm having a very bad performance animation. The animation isn't smooth as it jumps like a rabbit... I really don't understand why this simple example is not working well. Anyone can help?

Here you have the code I'm using to test the minimal function. I think it's implemented in the way the documentation recommends.

@
#include <QtGui>

class MainWindow : public QMainWindow
{
Q_OBJECT

public:
explicit MainWindow(QWidget parent = 0) : QMainWindow(parent){
QVBoxLayout layout = new QVBoxLayout();

pushButton = new QPushButton("start");
textEdit = new QTextEdit();
layout->addWidget(textEdit);
layout->addWidget(pushButton);
QWidget* central = new QWidget();
central->setLayout(layout);
setCentralWidget(central);
connect(pushButton, SIGNAL(clicked()),SLOT(start()));
}

QGraphicsView* view;
QGraphicsTextItem * text ;
QGraphicsScene* scene;
QPushButton* pushButton;
QTextEdit* textEdit;

public slots:

void start(){
scene = new QGraphicsScene();
text = new QGraphicsTextItem();
text->setDocument(textEdit->document());
text->scale(6,6);
text->setPos(-100,0);
text->setTextWidth(140);

scene->addItem(text);
scene->setSceneRect(0,0,400,400);
view = new QGraphicsView(scene);
view->fitInView(view->sceneRect(),Qt::KeepAspectRatio);
view->setRenderHint(QPainter::SmoothPixmapTransform);
view->showFullScreen();

// the important part:
QPropertyAnimation *anim = new QPropertyAnimation(text, "pos", text);
anim->setStartValue(text->pos());
anim->setEndValue(QPointF(-100, -1000));
anim->setDuration(5000);
anim->start();
}
};

#include "main.moc"

int main(int argc, char *argv[])
{
QApplication a(argc, argv);
MainWindow w;
w.show();

return a.exec();
}
@

[bjanuario]

Hi,

You should use QML for this, otherwise you will always have this problem trust me!
QML is the smoothest way to do such thing.

[raven-worx]

did you try to run the application in release mode?

[plitex]

I tried QML and is doing the same thing. No smooth animation.

In release mode, it works better but still unacceptable... I've tried on OS X and it works even better, but still not smooth, also QML and QScene.

Is it possible to be a problem with the graphics card driver?

[plitex]

As soon as I can, I will post a link with a video recording of the problem, because is very difficult to discuss this issue if you cannot see it...

[raven-worx]

[quote author="plitex" date="1370861243"]Is it possible to be a problem with the graphics card driver?[/quote]
Hmm...probably only if you use the default one (provided by the OS) instead the one from the card manufacturer?
Do you have another pc to test it?

If not, you can connect to the "QPropertyAnimation::valueChanged()":http://qt-project.org/doc/qt-4.8/qvariantanimation.html#valueChanged signal and check the values there.
But store the values to the memory, e.g. save them in a QLinkedList and display the list once the animation is finished. This gives an approximate idea how fast/slow the animation really is, apart of what you see on the screen.
If you get alot of values which are close together the animation just works fine and the problem is the display of the animation.

Note: Don't display the values directly in the slot via qDebug/console since this slows down the IDE.

[bjanuario]

:| I am surprised about now smooth on QML .... U should have a graphics problems for sure .. but record and send us the result

[plitex]

I've recorded some video... forgive my bad results on these recordings...

First one is using the first QML example on this post.

https://www.dropbox.com/s/q3wtdiw4bsvjoc2/VIDEO0028.mp4

The second one is using QGraphicsScene, QGraphicsItemAnimation and QTimeLine, I think is the better way to control the animation based on elapsed time.

@
_itemDuration = 4000;
_maskWidth = 960;

_timerLine = new QTimeLine;
_timerLine->setCurveShape(QTimeLine::LinearCurve);
_timerLine->setUpdateInterval(16);
_timerLine->setFrameRange(1, 960);
_timerLine->setDuration(_itemDuration);
connect(_timerLine, SIGNAL(finished()), this, SLOT(animation_finished()));

_animation = new QGraphicsItemAnimation;
_animation->setItem(this);
_animation->setTimeLine(_timerLine);
_animation->setPosAt(0.0, QPointF(0, pos().y()));
_animation->setPosAt(1.0, QPointF(-_maskWidth, pos().y()));

@

The paint method:

@
painter->setBrush(QColor(210, 210, 30));
painter->drawRoundedRect(5, 5, 205, 205, 5, 5);
painter->setBrush(_classBackground);
painter->drawRoundedRect(215, 5, 205, 205, 5, 5);
painter->setBrush(QColor(50,50,50));
painter->drawRoundedRect(425, 5, 530, 205, 5, 5);
painter->setBrush(_classBackground);
painter->drawRoundedRect(5, 215, 950, 135, 5, 5);
painter->setPen(Qt::black);
painter->setFont(QFont(font, 170, QFont::Bold));
painter->drawText(5.0, 5.0, 205.0, 205.0, Qt::AlignCenter, "A");
painter->setPen(_classForeground);
painter->setFont(QFont(font, 170, QFont::Bold));
painter->drawText(215.0, 5.0, 205.0, 205.0, Qt::AlignCenter, "B");

painter->setPen(_classForeground);
if (_text1.size() <= 13)
    painter->setFont(QFont(font, 130, QFont::Bold));
else if (_text1.size() <= 14)
    painter->setFont(QFont(font, 120, QFont::Bold));
else if (_text1.size() <= 15)
    painter->setFont(QFont(font, 120, QFont::Bold));
else
    painter->setFont(QFont(font, 120, QFont::Bold));
painter->drawText(5, 215, 955, 135, Qt::AlignCenter, "ABCDEFG");

painter->setPen(Qt::white);
painter->setFont(QFont(font, 120, QFont::Bold));
painter->drawText(425, 5, 530, 205, Qt::AlignCenter, "ABCDE");

@

https://www.dropbox.com/s/6vok92xx2vd6z7x/VIDEO0030.mp4

I hope you can see the animations in both cases are not smooth, specially in the second one.

Thanks in advance!

[plitex]

I've done what raven-worx said, connect valueChanged and store in a list. I used QTimeLine::valueChanged() and the results are very stable.

Here you have some values, as the list is very long to post here. First column is item position (x) and the second is the gap with the last value. It looks like the animation is rendering ok but it's displayed wrong.

0 0
-4.56 -4.56
-7.68 -3.12
-11.52 -3.84
-15.36 -3.84
-19.2 -3.84
-23.04 -3.84
-26.88 -3.84
-30.72 -3.84
-34.56 -3.84
-38.4 -3.84
-42.24 -3.84
-46.08 -3.84
-49.92 -3.84
-53.76 -3.84
-57.6 -3.84
-61.44 -3.84
-65.28 -3.84
-69.12 -3.84
-72.96 -3.84
-76.8 -3.84
.
.
.
-948.48 -3.84
-952.32 -3.84
-956.16 -3.84
-960 -3.84

[plitex]

Hi all,

Did you see the videos?