Creating Custom Ellipse Button

[VireX]

I tried this code then did QEllipseButton b; b.setText("woot"); b.show(); in a simple window of Qt, and it will not show the area. I tried r3, and r1, update,setting a background... but it wont make me a button with a different size.

Like I would like to make an egg shaped button that works just like a pushbutton, but has a nice background image on it.

class QEllipseButton : public QPushButton {
  public:
    QEllipseButton(QWidget * parent = 0): QPushButton(parent){
    }
  protected:
    void paintEvent ( QPaintEvent * event ){
     QRegion r1(QRect(200, 50, 500, 400),    // r1: elliptic region
                QRegion::Ellipse);
     QRegion r2(QRect(200, 70, 90, 30));    // r2: rectangular region
     QRegion r3 = r1.intersected(r2);        // r3: intersection
 
     QPainter painter(this);
     painter.setClipping(true);
     painter.setClipRegion(r1);
     //QBrush brush(QColor(255,0,0,255));
     //painter.setBackground(brush);
     //update();
    }
};

class QEllipseButton : public QPushButton {
  public:
    QEllipseButton(QWidget * parent = 0): QPushButton(parent){
    }
  protected:
    void paintEvent ( QPaintEvent * event ){
     QRegion r1(QRect(200, 50, 500, 400),    // r1: elliptic region
                QRegion::Ellipse);
     QRegion r2(QRect(200, 70, 90, 30));    // r2: rectangular region
     QRegion r3 = r1.intersected(r2);        // r3: intersection

     QPainter painter(this);
     painter.setClipping(true);
     painter.setClipRegion(r1);
     //QBrush brush(QColor(255,0,0,255));
     //painter.setBackground(brush);
     //update();
    }
};

To copy to clipboard, switch view to plain text mode 

thx for help.

[marcel]

Why don't you try QWidget::setMask( const QRegion& ).
Using a painter to achieve this will probably not work, because the background of the widget is not (yet) transparent. You could first fill the widget rect with a transparent pixmap but it is better and easier to use QWidget::setMask.

Regards

[marcel]

Oh, and even if you subclass QPushButton, overriding paintEvent will not keep the push button behavior. If you like, you could call QPushButton:aintEvent in the paint event of your class( at the beginning ). But this could mess up things even more...

In my opinnion, the best solution is to subclass QAbstractButton and custom draw your button in all the states ( pressed, normal, hovered, disabled, etc...). This allows more freedom in defining the look of your widget.

Regards

[VireX]

Could you show any code examples of this?

[marcel]

Unfortunately I do not have any examples, nor the time to create one . But it should be pretty straightforwards.

You define an enum in your QAbstractButton subclass.

typedef enum States
{
  eStateNormal,
  eStatePressed,
  eStateHovered,
  eStateDisabled
} States;

typedef enum States
{
  eStateNormal,
  eStatePressed,
  eStateHovered,
  eStateDisabled
} States;

To copy to clipboard, switch view to plain text mode 

Then , add a State member in your class.
The state switching depends on the user actions.
Initially you start with eStateNormal.
In mousePressEvent, if the button is Qt::LeftButton, the state is eStatePressed.
In mouseMoveEvent, if no btns are pressed, the state is eStateHovered.
In mouseReleaseEvent, if the previous state was eStatePressed, then switch to eStateNormal.

After this, everything happens in paintEvent:

void MyBtn::paintEvent( QPaintEvent* )
{
     switch( mButtonState )
     {
        case eStateNormal:
        //Paint in this state
        break;
        case eStatePressed:
        //Paint in this state
         break;
        case eStateHovered:
        //Paint in this state
         break;
        case eStateDisabled:
        //Paint in this state
         break;
     }
}

void MyBtn::paintEvent( QPaintEvent* )
{
     switch( mButtonState )
     {
        case eStateNormal:
        //Paint in this state
        break;
        case eStatePressed:
        //Paint in this state
         break;
        case eStateHovered:
        //Paint in this state
         break;
        case eStateDisabled:
        //Paint in this state
         break;
     }
}

To copy to clipboard, switch view to plain text mode 

Actually, you should make pixmaps for all the states ( either external or you build them here ). It will make drawing faster.

Regards

[VireX]

Yeah I don't think this is working:

class QEllipseButton : public QAbstractButton {
  public:
    typedef enum States
      {
        eStateNormal,
        eStatePressed,
        eStateHovered,
        eStateDisabled
      } States; 
    States m_ButtonState;
    QEllipseButton(QWidget * parent = 0): QAbstractButton(parent){
      m_ButtonState = eStateNormal;
    }
  protected:
    void mousePressEvent(QMouseEvent *event){
     if (event->button() == Qt::LeftButton) {
         m_ButtonState = eStatePressed;
     }
    }
    void mouseMoveEvent(QMouseEvent *event){
     if(event->buttons() & Qt::LeftButton) {
       m_ButtonState = eStateHovered;
     }   
    }
    void mouseReleaseEvent(QMouseEvent *event){
      if(event->buttons() && m_ButtonState == eStatePressed){
           m_ButtonState = eStateNormal;
      }
    }
    void paintEvent ( QPaintEvent * event ){
     QRegion r1(QRect(200, 50, 500, 400),    // r1: elliptic region
                QRegion::Ellipse);
     QRegion r2(QRect(200, 70, 90, 30));    // r2: rectangular region
     QRegion r3 = r1.intersected(r2);        // r3: intersection
 
     QPainter painter(this);
     QPixmap qpx;
     switch( m_ButtonState ){
              case eStateNormal:
               qpx.load(QString("JoinNormal.jpg"));
               break;
              case eStatePressed:
               qpx.load(QString("JoinPressed.jpg"));
               break;
              case eStateHovered:
               qpx.load(QString("JoinHover.jpg"));
               break;
              case eStateDisabled:
               qpx.load(QString("JoinNormal.jpg"));
               break;
           }
     QRectF target(10.0, 20.0, 80.0, 60.0);
     QRectF source(0.0, 0.0, 70.0, 40.0);
     painter.drawPixmap(target, qpx, source);
     painter.setClipping(true);
     painter.setClipRegion(r1);
     //QBrush brush(QColor(255,0,0,255));
     //painter.setBackground(brush);
     //update();
    }
};

class QEllipseButton : public QAbstractButton {
  public:
    typedef enum States
      {
        eStateNormal,
        eStatePressed,
        eStateHovered,
        eStateDisabled
      } States; 
    States m_ButtonState;
    QEllipseButton(QWidget * parent = 0): QAbstractButton(parent){
      m_ButtonState = eStateNormal;
    }
  protected:
    void mousePressEvent(QMouseEvent *event){
     if (event->button() == Qt::LeftButton) {
         m_ButtonState = eStatePressed;
     }
    }
    void mouseMoveEvent(QMouseEvent *event){
     if(event->buttons() & Qt::LeftButton) {
       m_ButtonState = eStateHovered;
     }   
    }
    void mouseReleaseEvent(QMouseEvent *event){
      if(event->buttons() && m_ButtonState == eStatePressed){
           m_ButtonState = eStateNormal;
      }
    }
    void paintEvent ( QPaintEvent * event ){
     QRegion r1(QRect(200, 50, 500, 400),    // r1: elliptic region
                QRegion::Ellipse);
     QRegion r2(QRect(200, 70, 90, 30));    // r2: rectangular region
     QRegion r3 = r1.intersected(r2);        // r3: intersection

     QPainter painter(this);
     QPixmap qpx;
     switch( m_ButtonState ){
              case eStateNormal:
               qpx.load(QString("JoinNormal.jpg"));
               break;
              case eStatePressed:
               qpx.load(QString("JoinPressed.jpg"));
               break;
              case eStateHovered:
               qpx.load(QString("JoinHover.jpg"));
               break;
              case eStateDisabled:
               qpx.load(QString("JoinNormal.jpg"));
               break;
           }
     QRectF target(10.0, 20.0, 80.0, 60.0);
     QRectF source(0.0, 0.0, 70.0, 40.0);
     painter.drawPixmap(target, qpx, source);
     painter.setClipping(true);
     painter.setClipRegion(r1);
     //QBrush brush(QColor(255,0,0,255));
     //painter.setBackground(brush);
     //update();
    }
};

To copy to clipboard, switch view to plain text mode 

class QEllipseButton : public QAbstractButton {
public:
typedef enum States
{
eStateNormal,
eStatePressed,
eStateHovered,
eStateDisabled
} States;
States m_ButtonState;
QEllipseButton(QWidget * parent = 0): QAbstractButton(parent){
m_ButtonState = eStateNormal;
}
protected:
void mousePressEvent(QMouseEvent *event){
if (event->button() == Qt::LeftButton) {
m_ButtonState = eStatePressed;
}
}
void mouseMoveEvent(QMouseEvent *event){
if(event->buttons() & Qt::LeftButton) {
m_ButtonState = eStateHovered;
}
}
void mouseReleaseEvent(QMouseEvent *event){
if(event->buttons() && m_ButtonState == eStatePressed){
m_ButtonState = eStateNormal;
}
}
void paintEvent ( QPaintEvent * event ){
QRegion r1(QRect(200, 50, 500, 400), // r1: elliptic region
QRegion::Ellipse);
QRegion r2(QRect(200, 70, 90, 30)); // r2: rectangular region
QRegion r3 = r1.intersected(r2); // r3: intersection

QPainter painter(this);
QPixmap qpx;
switch( m_ButtonState ){
case eStateNormal:
qpx.load(QString("JoinNormal.jpg"));
break;
case eStatePressed:
qpx.load(QString("JoinPressed.jpg"));
break;
case eStateHovered:
qpx.load(QString("JoinHover.jpg"));
break;
case eStateDisabled:
qpx.load(QString("JoinNormal.jpg"));
break;
}
QRectF target(10.0, 20.0, 80.0, 60.0);
QRectF source(0.0, 0.0, 70.0, 40.0);
painter.drawPixmap(target, qpx, source);
painter.setClipping(true);
painter.setClipRegion(r1);
//QBrush brush(QColor(255,0,0,255));
//painter.setBackground(brush);
//update();
}
};


I posted twice, so you can copy one, since someone not so smart decided to use number lines with Geshi knowing that no one can COPY the code because of damn number lines.

[caduel]

You have to trigger repainting after updating your state (call update()).
Just setting your internal state variable will not cause your button to repaint itself in this state.

HTH
Christoph

[marcel]

Yes.
I forgot that, but you must call an update() to schedule a paintEvent each time you switch the states.

Other than this, the code looks good.

Regards

[VireX]

No the code still does not work:

#include <QtGui>
#include "flowlayout.h"
class QEllipseButton : public QAbstractButton {
public:
typedef enum States
{
eStateNormal,
eStatePressed,
eStateHovered,
eStateDisabled
} States;
States m_ButtonState;
QEllipseButton(QWidget * parent = 0): QAbstractButton(parent){
m_ButtonState = eStateNormal;
}
protected:
void mousePressEvent(QMouseEvent *event){
if (event->button() == Qt::LeftButton) {
m_ButtonState = eStatePressed;
update();
}
}
void mouseMoveEvent(QMouseEvent *event){
if(event->buttons() & Qt::LeftButton) {
m_ButtonState = eStateHovered;
update();
}
}
void mouseReleaseEvent(QMouseEvent *event){
if(event->buttons() && m_ButtonState == eStatePressed){
m_ButtonState = eStateNormal;
update();
}
}
void paintEvent ( QPaintEvent * event ){
QRegion r1(QRect(200, 50, 500, 400), // r1: elliptic region
QRegion::Ellipse);
QRegion r2(QRect(200, 70, 90, 30)); // r2: rectangular region
QRegion r3 = r1.intersected(r2); // r3: intersection

QPainter painter(this);
QPixmap qpx;
switch( m_ButtonState ){
case eStateNormal:
qpx.load(QString("Normal.jpg"));
break;
case eStatePressed:
qpx.load(QString("Pressed.jpg"));
break;
case eStateHovered:
qpx.load(QString("Hover.jpg"));
break;
case eStateDisabled:
qpx.load(QString("Normal.jpg"));
break;
}
QRectF target(100.0, 100.0, 100.0, 100.0);
QRectF source(100.0, 100.0, 100.0, 100.0);
painter.drawPixmap(target, qpx, source);
painter.setClipping(true);
painter.setClipRegion(r1);
//QBrush brush(QColor(255,0,0,255));
//painter.setBackground(brush);
//update();
}
};

----------------- hOW i run it: -------
QEllipseButton b;
b.setText("hoot");
b.show();

[marcel]

QRectF target(100.0, 100.0, 100.0, 100.0);
     QRectF source(100.0, 100.0, 100.0, 100.0);

QRectF target(100.0, 100.0, 100.0, 100.0);
     QRectF source(100.0, 100.0, 100.0, 100.0);

To copy to clipboard, switch view to plain text mode 

Is the problem, by any chance, that you don't see any pixmap?
Try drawing everything relative to (0,0), not (100, 100).
Also, overwrite QAbstractButton::sizeHint() and return your size hint( which probably is the size of one of the pixmaps ).

Regards

[VireX]

I used 0, and I finally saw the picture. However, the clip stuff never works. Also putting everything inside a QHBoxLayout and settingLayout with a widget, makes it dissappear.

Also Hover absolutely does not work.