more UI feedback

Monday, January 21. 2008

After a month of no KDE coding I'm back to do a few things in KDE again - though I really want to (and need to) do more for University if I ever want to get done with it...

Anyway, what I wanted to show is how to do simple animations in the UI that should help the user to understand how the different UI elements play together. I have one such case with the Phonon KCM where I now tried the following animation to clear things up a bit:

more_ui_feedback.ogg

The way I achieved this effect was to add a special Animation widget that sits above the other widgets and is not added to any QLayout. Reimplement the paintEvent to draw the animation frames and use a QTimeLine member to call repaint(). It needs two pixmaps: one of the old content of the QListView at the right and one with the new content. The paintEvent then draws the old content over the QListView so that it seems the widget contents have not changed yet and draws the new content depending on the frame number of QTimeLine (with 50% opacity). QTimeLine::finished() is connected to the deleteLater slot which removes the animation widget.

Here's the code:

class SelectionChangeAnimation : public QWidget
{
public:
SelectionChangeAnimation(const QRect &sourceRect, QWidget *destWidget, QWidget *parent);
void start();

protected:
void paintEvent(QPaintEvent *);
bool eventFilter(QObject *, QEvent *);

private:
QTimeLine m_timeLine;
QPixmap m_old, m_new;
QRect m_sourceRect;
QRect m_destRect;
QWidget *m_destWidget;
bool m_needPixmapUpdate;
};

SelectionChangeAnimation::SelectionChangeAnimation(const QRect &sourceRect, QWidget *destWidget, QWidget *parent)
: QWidget(parent),
m_timeLine(200),
m_sourceRect(sourceRect),
m_destRect(destWidget->mapTo(parent, QPoint(0, 0)), destWidget->size()),
m_destWidget(destWidget),
m_needPixmapUpdate(true)
{
setGeometry(m_sourceRect | m_destRect);
m_sourceRect.moveTopLeft(mapFrom(parent, m_sourceRect.topLeft()));
m_destRect.moveTopLeft(mapFrom(parent, m_destRect.topLeft()));
m_old = QPixmap::grabWidget(m_destWidget);
m_timeLine.setFrameRange(0, 63);
connect(&m_timeLine, SIGNAL(finished()), SLOT(deleteLater()));
m_destWidget->installEventFilter(this);
show();
}

void SelectionChangeAnimation::start()
{
m_timeLine.start();
connect(&m_timeLine, SIGNAL(frameChanged(int)), SLOT(repaint()));
}

bool SelectionChangeAnimation::eventFilter(QObject *o, QEvent *e)
{
if (o == m_destWidget && e->type() == QEvent::Paint) {
m_needPixmapUpdate = true;
}
return QWidget::eventFilter(o, e);
}

void SelectionChangeAnimation::paintEvent(QPaintEvent *)
{
const int f = m_timeLine.currentFrame();
const QRect animRect = QRect(
m_sourceRect.x() + ((m_destRect.x() - m_sourceRect.x()) * f >> 6),
m_sourceRect.y() + ((m_destRect.y() - m_sourceRect.y()) * f >> 6),
m_sourceRect.width() + ((m_destRect.width() - m_sourceRect.width()) * f >> 6),
m_sourceRect.height() + ((m_destRect.height() - m_sourceRect.height()) * f >> 6));
// by masking the widget the flicker when deleting the animation widget is reduced
setMask(QRegion(animRect) + QRegion(m_destRect));

QPainter p(this);
p.drawPixmap(m_destRect, m_old);
if (m_needPixmapUpdate) {
m_destWidget->removeEventFilter(this);
m_new = QPixmap::grabWidget(m_destWidget);
m_destWidget->installEventFilter(this);
}
p.setOpacity(0.5);
p.drawPixmap(animRect, m_new);
}

Posted by Matthias Kretz in Phonon at 08:43 | Comments (8) | Trackbacks (0)

Trackbacks

Trackback specific URI for this entry

No Trackbacks

Comments

Display comments as (Linear | Threaded)

Well, I don't know, I don't find this animation very intuitive, at least not in that case. It's surely a big achievement programming-wise, but for me that effect looks like flickering and is thus not needed for understanding, as most people read left->right anyway.

#1 Thomas on 2008-01-21 13:17 (Reply)

Hello,

I don't think it's good idea.. I will be probably confused, when something like this occurs.. It looks like bad repainting or something like that.. Sorry, but I don't like it..

#2 NasaK on 2008-01-21 14:27 (Reply)

> Anyway, what I wanted to show is how to do simple animations
> in the UI that should help the user to understand how the
> different UI elements play together

I'm not quite sure what you are trying to achieve but the attached video looks like a layouting glitch rather than an animation.

I presume the goal of this dialog is to allow the user to choose the audio output for different activities. Reviewing the dialog with that goal in mind:

- The function of the dialog needs to be made more explicit. For example, you could add a label above the device list called "Activity" or "Category" and a label above the device list labeled "Preferred audio output"
- The tree-view on the left has only one top-level item, confusingly named "Audio Output" with a list of items underneath. You could replace that with a list, possibly with icons to represent each type of activity. I think a list would look nicer in any case.
- What about the order of the activity list? The activity whose output is most likely to be changed should be at the top. I'm not sure what that would be.
- The device list shows one entry, "Intel 82801DB-ICH4 with YMF753". What on earth is that? What I would like to see there is "PC Speaker" or, since this is a laptop, "Laptop Speaker"
- There is no indication of whether a particular device is believed to be working.
- What happens if I plug in a removable output such as a USB headset, then unplug it and go back to the dialog?
- The "Backend" tab is mysterious stuff, presumably I would only ever go there to fix problems. Perhaps it should be hidden out of the way more?

#3 Robert Knight on 2008-01-21 15:40 (Reply)

well... sorry but I agree with the previous posts

cheers

#4 DanaKil on 2008-01-21 23:34 (Reply)

Where could I get more animated widgets samples, more complex? I just need some nice elements transitions operations for my new application.

#5 Alexei on 2008-01-21 23:50 (Reply)

The concept of animation is great, and i'm a big fan of it, but this specific implementation just induces motion sickness.

#6 Danny on 2008-01-21 23:58 (Reply)

Will KDE4.1 ship with easy selection of screensavers and scripts for drawing dynamic desktop backgrounds? I've heard most of the code is in place for that kind of thing but the GUI and script particulars...

#7 ethana2 on 2008-01-22 04:14 (Reply)

Clever, but overkill. A west-tab-like look for the selected listitem would be better.

#8 stefan monov on 2008-01-22 14:12 (Reply)

Add Comment

Name
Email
Homepage
In reply to
Comment	E-Mail addresses will not be displayed and will only be used for E-Mail notifications To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly. Enter the string from the spam-prevention image above: HTML-Tags will be converted to Entities. You can use [geshi lang=lang_name [,ln={y\|n}]][/lang] tags to embed source code snippets Standard emoticons like :-) and ;-) are converted to images.
	Remember Information? Subscribe to this entry