PDA

View Full Version : tool buttons on top of label



McKee
26th October 2008, 14:39
I am looking for a simple way to place multiple tool buttons, laid out at arbitrary locations, on top of a label showing my pixmap. I plan to make the icons for the tool buttons semi-transparent, and set them to auto-raise, so that hovering over portions of the label will effectively highlight portions of its pixmap for the user to act on. Essentially, I want the user to be able to select a portion of a fixed picture by clicking a tool button. Once selected, I'll change either the underlying pixmap label or the tool button icon state to show the selection.

My basic question is how to set up the button layout over a pixmap. I'd like to use Designer if possible, since I may have to lay out tool buttons on multiple images. I looked at setting a background image for a QGroupBox, but didn't see that option. I looked at QStackedLayout and QStackedWidget, but that seems to show pages mutually exclusively.

This could reduce to a simple question: how to use Designer to lay out tool buttons on a label. (If so, perhaps I'm posting in the wrong forum.)

Suggestions on tools and classes or alternative approaches would be great.

thanks

Brandybuck
26th October 2008, 15:23
Since the buttons have static positions, then you should not use any layout manager. Just give them their static positions. This is easy in Designer. Create your label and set a pixmap for it. Then place toolbuttons where you want them. They will not be transparent in Designer (that's so you can see them), but you can use preview to see how it will behave.

wysota
26th October 2008, 16:14
Maybe what you require is a toolbar with a pixmap set as its background?

McKee
28th October 2008, 00:30
Thank you both for good ideas. I am following recommendation of Brandybuck. That should work nicely.

McKee
1st November 2008, 21:55
... just getting back to this task ...

Now my challenge is to get the tool button not to paint a button background when it auto-raises. I want to control the pixmaps shown in QIcon::Normal and Active modes, and QIcon::Off and On states. My QToolbutton items are auto-raise and checkable. The underlying label pixmap shows through nicely when I set the tool button icon to be semi-transparent, as in



QToolButton *tool_button = Ui.ToolButtonTest;
QSize size = tool_button->size();
tool_button->setIconSize(size - QSize(10,10));
QPixmap pixmap(size);
pixmap.fill(QColor(0,0,0,50));
QIcon icon;
icon.addPixmap(pixmap,QIcon::Active,QIcon::On);
tool_button->setIcon(icon);


But the when the tool button auto-raises or is "checked", the style engine appears to paint a system style dependent frame and background that I cannot suppress. We normally want this behavior, but it's not what I want here. I tried changing every color role in the toolbutton's palette to a transparent color, which helped a little in some styles but is not robust or complete.

Should I abandon QToolButton and create my own button subclass, re-implementing mouse events to create the auto-raise behavior I want? I was hoping to write a little less code and use Designer to just place tool buttons.

I'm using Qt 4.3.3 on XP.

Any suggestions?

thanks

McKee
2nd November 2008, 16:07
Oops. Never mind. The answer, of course, is Qt's Style Sheets. I got the effect I want by modifying each tool button's style sheet as follows.


QToolButton:hover {border: 2px solid grey; border-radius: 12px}
QToolButton:checked {border: 2px solid green; border-radius: 12px; background: rgba(0,0,0,25)}

I'm all set.