Linux Tech Blog

In my previous post, I’ve shown you how to handle events (specifically mouse events) inside GraphicsView.

Lets expand this idea and create a customized widget on Graphics View. The simplest widget of them all is the Push Button (actually the simplest widget is the Label, but then, I wouldn’t have much to write on this post ).

The Button widget has the following characteristics:

1. Display 2 images depending on its state (normal & pressed);
2. Detects mouse clicks (including moving the mouse while clicked);

On to the coding part…

There’s only one attribute for storing the Button’s state: m_isPressed. Depending on the value of m_isPressed, the paint() method will either draw one of two QPixmap objects, m_normal or m_pressed.

Here’s the paint() method for the Button class:

void Button::paint(QPainter *painter,
                   const QStyleOptionGraphicsItem *option,
                   QWidget *widget)
{
    Q_UNUSED(option);
    Q_UNUSED(widget);
 
    if (m_isPressed)
        painter->drawPixmap(0, 0, m_pressed);
    else
        painter->drawPixmap(0, 0, m_normal);
}

The change between the normal and pressed image happens through the mouse handling methods. Here’s the mousePressEvent() method:

void Button::mousePressEvent(QGraphicsSceneMouseEvent *event)
{
    if (event->button() == Qt::LeftButton) {
        if (contains(event->pos()))
            m_isPressed = true;
 
        update();
    }
}

If the user clicks within the image area, m_isPressed is set. Therefore, the pressed image is displayed.

Now the mouseMoveEvent() method:

void Button::mouseMoveEvent(QGraphicsSceneMouseEvent *event)
{
    if (event->buttons() & Qt::LeftButton) {
        if (contains(event->pos())) {
            m_isPressed = true;
        } else {
            m_isPressed = false;
        }
 
        update();
    }
}

It the user moves the mouse (while clicking) to outside the image area, m_isPressed is changed.

And finally, the mouseReleaseEvent() method:

void Button::mouseReleaseEvent(QGraphicsSceneMouseEvent *event)
{
    if (event->button() == Qt::LeftButton) {
        m_isPressed = false;
 
        update();
 
        if (contains(event->pos())) {
            emit clicked();
        }
    }
}

The m_isPressed attribute is unset and the clicked() signal is emitted (if the mouse stays within the image area).
Here’s the customized Button in action:

The source code for this example is at my gitorious repository, under the button dir:

http://gitorious.org/tech-blog/sources/trees/master/button

Because the image is a rounded one, there are some parts “outside” of the Button that also receive mouse events. This happens because we still need to determine the “clickable” area through the shape() method. But that’s something for another post.

Till next time.