Design buttons with custom shapes

[LuisLoez89]

Hello everyone!
I am trying to desing a sequence of custom buttons with arrow shape but I could not find the way. I need something like the buttons that you can see in the next picture in order to manage the workflow of my program and guide the user through it.
stepButtons.jpg

Any help or suggestion is welcome.
Thanks for your help.

[Santosh Reddy]

Do you want Buttons or Progress Indicators?

[LuisLoez89]

Hello Santosh Reddy.
I want buttons. The main idea is that each button will launch a wizard dialog to perform each step. Then, when this step is finished the next button will be enabled. So the buttons should change its color and being enabled sequentially guiding the user throught the workflow.

Thanks

[anda_skoa]

My approach would be to do this as a custom widget.
Either direct painting or with a graphicsview and arrow shaped items.

Cheers,
_

[Santosh Reddy]

Here is one approach using QPushButton Button, see if it fits your need

CustomBottuns.jpg

QWidget widget;
 
for(int i = 0; i < 4; i++)
{
    QPushButton * button = new QPushButton(QString("Step %1").arg(i + 1), &widget);
 
    if((i == 0) or (i == 2))
    {
        button->setEnabled(true);
    }
    else
    {
        button->setEnabled(false);
    }
 
    QPixmap pixmap;
 
    if(i == 0)
    {
        pixmap = QPixmap("C:/Left.png");
    }
    else if(i == 3)
    {
        pixmap = QPixmap("C:/Right.png");
    }
    else
    {
        pixmap = QPixmap("C:/Mid.png");
    }
 
    button->setFixedSize(110,68);
 
    button->setMask(pixmap.mask());
 
    button->setGeometry((110 - 40) * i, 0, 110, 68);
}
 
widget.show();

QWidget widget;

for(int i = 0; i < 4; i++)
{
    QPushButton * button = new QPushButton(QString("Step %1").arg(i + 1), &widget);

    if((i == 0) or (i == 2))
    {
        button->setEnabled(true);
    }
    else
    {
        button->setEnabled(false);
    }

    QPixmap pixmap;

    if(i == 0)
    {
        pixmap = QPixmap("C:/Left.png");
    }
    else if(i == 3)
    {
        pixmap = QPixmap("C:/Right.png");
    }
    else
    {
        pixmap = QPixmap("C:/Mid.png");
    }

    button->setFixedSize(110,68);

    button->setMask(pixmap.mask());

    button->setGeometry((110 - 40) * i, 0, 110, 68);
}

widget.show();

To copy to clipboard, switch view to plain text mode 

Here are the mask files (some quick drawing using GIMP)

Left.png

Mid.png

Right.png

[LuisLoez89]

Thanks! It looks great but I am having a problem in the line "button->setMask(pixmap.mask());". It is the next error:

error: C2027: use of type 'QBitmap' undefined.

I don't know how to solve it.
Thanks for your help


SOLVED! I need to include QBitMap to use this method.
Thanks for your help!!

[Santosh Reddy]

I used QPixmap not QBitmap.

Does the sample code work in your setup?

[LuisLoez89]

Yes I am using QPixmap too but it seems that you need include QBitmap to use the .mask() method.

It is working fine! I need make some changes but your example was really usefull to understand the use of the masks.

Thanks