I'm trying to create a delegate to draw custom widgets as elements in a listview on icon mode. I have it more or less working but I can't get the widgets to draw in the right place, it seems they are getting drawn considering (0,0) the origin on the main window not the origin of the list view. What do I need to pass to render the widget on the right place? I know I can pass an offset... how can I calculate the offset between the main window and the listview?
This is my paint method on my delegate (derived from QStyledItemDelegate)
def paint(self, painter, option, index):
painter.save()
if option.state & QStyle.State_Selected:
painter.fillRect(option.rect, option.palette.highlight());
model = index.model()
myWidget = model.listdata[index.row()]
myWidget.setGeometry(option.rect)
myWidget.render(painter, option.rect.topLeft() )
painter.restore()
Thanks
/J
In case this is useful for someone else I'll post my solution...
I don't know if this is the best way of doing it, but I'm calculating the offset by mapping the orgin of my parent to the main window:
offset = self._parent.mapTo(self._mainWindow, QPoint(0,0))
myWidget.render(painter, option.rect.topLeft() + offset)
It works, so I'll use it until I find a better way for doing this.
You can render your Widget into a temporary pixmap and then draw the pixmap instead. That solves the shift issue:
def paint(self, painter, option, index):
pic = QPixmap( option.rect.width(), option.rect.height() )
w = ItemWidget()
w.setGeometry( option.rect )
w.render(pic)
painter.drawPixmap( option.rect, pic )
I use another alternative method, and it works.
painter.translate(option.rect.topLeft())
myWidget.render(painter, QtCore.QPoint(0, 0))
Related
I need to create a toolbar (on the left side for example) that will contain many buttons. On default if overall height of all buttons is greater than the hight of toolbar these surplus buttons will be hidden. And I want to make this toolbar show all buttons and allow me to scroll down to see the rest. I couldn't find anything usefull on the web so far. Any ideas?
You should be able to stick the QToolBar inside a QScrollArea.
toolbar = QtGui.QToolBar()
toolbar.setOrientation(QtCore.Qt.Vertical)
for i in range(20):
toolbar.addAction('Action{0}'.format(i))
scroll_area = QtGui.QScrollArea()
scroll_area.setWidget(toolbar)
For anyone interested here is the solution:
Thanks to #Brendan Abel's answer I've came up with an idea. What I did is I've created my toolbar the same way I did before. Then I've added all my widgets (that previously were in this toolbar) to the new QWidget with QVBoxLayout. Then I've created a QScrollArea and set my recently-created-widget as a child widget of this scroll area. And finally I've added my ScrollArea to the Toolbar using addWidget().
class LeftToolbar(QtGui.QToolBar):
def __init__(self, *args):
QToolBar.__init__(self, *args)
self.setFloatable(False)
self.setMovable(False)
self.scroll_widget = QtGui.QWidget(self)
self.scroll_layout = QtGui.QVBoxLayout()
self.scroll_widget.setLayout(self.scroll_layout)
# Add your toolbar widgets here
self.ExampleWidget1 = QtGui.QLabel(self)
self.ExampleWidget1.setText("Example Text1")
self.scroll_layout.addWidget(self.ExampleWidget1)
self.ExampleWidget2 = QtGui.QLabel(self)
self.ExampleWidget2.setText("Example Text2")
self.scroll_layout.addWidget(self.ExampleWidget2)
# Create QScrollArea
self.scroll_area = QtGui.QScrollArea()
self.scroll_area.setWidget(self.scroll_widget)
self.addWidget(self.scroll_area)
# Create object LeftToolbar in your main window
self.LeftToolbar = LeftToolbar()
self.addToolBar(Qt.LeftToolBarArea, self.LeftToolbar)
I am coding a game using Kivy. I have a Screen class where I put my animation code. It's not a usual game, it's more like several screens, each with its own animation, with button commands for going back and forth to different screens.
It works ok, but when I make more classes like this and put it all in a ScreenManager, the animation is disrupted with random white screens.
class Pas(Screen):
def __init__(self, **kwargs):
super(Pas, self).__init__(**kwargs)
Clock.schedule_interval(self.update, 1 / 60.0)
self.ani_speed_init = 15
self.ani_speed = self.ani_speed_init
self.ani = glob.glob("img/pas_ani*.png")
self.ani.sort()
self.ani_pos = 0
self.ani_max = len(self.ani)-1
self.img = self.ani[0]
self.update(1)
back = Button(
background_normal=('img/back-icon.png'),
background_down=('img/back-icon.png'),
pos=(380, 420))
self.add_widget(back)
def callback(instance):
sm.current = 'game'
back.bind(on_press=callback)
def update(self, dt):
self.ani_speed -= 1
if self.ani_speed == 0:
self.img = self.ani[self.ani_pos]
self.ani_speed = self.ani_speed_init
if self.ani_pos == self.ani_max:
self.ani_pos = 0
else:
self.ani_pos += 1
with self.canvas:
image = Image(source=self.img, pos=(0, 0), size=(320, 480))
What am I doing wrong? I am also accepting ideas for a different way of doing this.
If you want to use Screen and ScreenManager for your screens, it would be better to use the transition system they define and use, so, to define your own Transitions, and apply them. If you want more control, i would advise getting ride of Screen and ScreenManager, and just using Widgets, to control the whole drawing/positioning process.
Also, Clock.schedule_interval(self.update, 0) is equivalent to the call you are making, the animation will be called each frame, and you can use dt to manage the animation progress.
Also, kivy can manage gifs, as well as zip archives of images to directly do animations (useful to have animated pngs), you can let kivy manage the whole animation process this way.
Although I have found partial and indirect answers to this question (see, e.g., this link), I am posting this here because putting together the bits and pieces of the puzzle took me a bit of time, and I thought someone else might find my efforts of use.
So, how to achieve a seamless resizing of images on buttons in GTK+ when the parent window is resized?
The solution offered for PyGTK in the link posted in the question does not work in Python-GI with GTK3, although the trick of using a ScrolledWindow in place of the usual Box was very useful.
Here is my minimal working solution to getting an image on a button to resize with the container.
from gi.repository import Gtk, Gdk, GdkPixbuf
class ButtonWindow(Gtk.Window):
def __init__(self):
Gtk.Window.__init__(self, title="Button Demo")
self.set_border_width(10)
self.connect("delete-event", Gtk.main_quit)
self.connect("check_resize", self.on_check_resize)
self.box = Gtk.ScrolledWindow()
self.box.set_policy(Gtk.PolicyType.ALWAYS,
Gtk.PolicyType.ALWAYS)
self.add(self.box)
self.click = Gtk.Button()
self.box.add_with_viewport(self.click)
self.pixbuf = GdkPixbuf.Pixbuf().new_from_file('gtk-logo-rgb.jpg')
self.image = Gtk.Image().new_from_pixbuf(self.pixbuf)
self.click.add(self.image)
def resizeImage(self, x, y):
print('Resizing Image to ('+str(x)+','+str(y)+')....')
pixbuf = self.pixbuf.scale_simple(x, y,
GdkPixbuf.InterpType.BILINEAR)
self.image.set_from_pixbuf(pixbuf)
def on_check_resize(self, window):
print("Checking resize....")
boxAllocation = self.box.get_allocation()
self.click.set_allocation(boxAllocation)
self.resizeImage(boxAllocation.width-10,
boxAllocation.height-10)
win = ButtonWindow()
win.show_all()
Gtk.main()
(The -10 on the width and height are to accommodate the inner borders and padding in the button. I tried fiddling with this to get a bigger image on the button, but the result did not look so nice.)
The jpeg file used in this example can be downloaded from here.
I welcome further suggestions on how to do this.
self.image = Gtk.Image().new_from_pixbuf(self.pixbuf)
Should probably be:
self.image = Gtk.Image().set_from_pixbuf(self.pixbuf)
You're creating a new image twice.
I have designed a group of three uitabpanels objects.
htab = uitabgroup('v0');
th1 = uitab('v0',htab,'title','Panel 1','ButtonDownFcn',...
#th1_ButtonDownFcn);
th2 = uitab('v0',htab,'title','Panel 2','ButtonDownFcn',...
#th2_ButtonDownFcn);
th3 = uitab('v0',htab,'title','Panel 3','ButtonDownFcn',...
#th3_ButtonDownFcn);
My intention is having a smooth transition between them when I change the selected uipanel through the mouse click. I pretend to achieve it changing the 'Visible' property of the elements contained inside them using the ButtonDownFcn function ( I got this idea based on the description section of this page).
set(handles.th2,'Visible','off');
set(handles.th3,'Visible','off');
...
function th1_ButtonDownFcn(hObject, eventdata)
handles = guidata(fh);
set(handles.th1,'Visible','on');
set(handles.th2,'Visible','off');
set(handles.th3,'Visible','off');
guidata(fh,handles);
end
function th2_ButtonDownFcn(hObject, eventdata)
handles = guidata(fh);
set(handles.th1,'Visible','off');
set(handles.th2,'Visible','on');
set(handles.th3,'Visible','off');
guidata(fh,handles);
end
function th3_ButtonDownFcn(hObject, eventdata)
handles = guidata(fh);
set(handles.th1,'Visible','off');
set(handles.th2,'Visible','off');
set(handles.th3,'Visible','on');
guidata(fh,handles);
end
where
fh: handle of the figure where they are contained the uitabpanels.
handles.th1, handles.th2, handles.th3: handles of the elements contained into each uitabpanel respectively.
However, it has not worked (I click on each one of uitabpanel's tabs and the visibility of them do not change) and I do not understand why.
In conclusion, the ButtonDownFcn and SelectionChangeFcn functions of an UITAB are already active when you click in the tab´s label. So it is not possible to achieve the desired target (smooth optical transition) because the obtained result (modifying the mentioned functions) is the same that doing nothing.
How is it possible to maintain widgets aspect ratio in Qt and what about centering the widget?
You don't have to implement your own layout manager. You can do with inheriting QWidget and reimplementing
int QWidget::heightForWidth( int w ) { return w; }
to stay square. However, heightForWidth() doesn't work on toplevel windows on X11, since apparently the X11 protocol doesn't support that. As for centering, you can pass Qt::AlignCenter as the third parameter of QBoxLayout::addWidget() or the fifth parameter of QGridLayout::addWidget().
Note: In newer versions of Qt at least, QWidget does not have the heightForWidth or widthForHeight anymore (so they cannot be overriden), and therefore setWidthForHeight(true) or setHeightForWidth(true) only have an effect for descendants of QGraphicsLayout.
The right answer is to create your custom layout manager. That is possible by subclassing QLayout.
Methods to implement when subclassing QLayout
void addItem(QLayoutItem* item);
Adds item to layout.
int count() const;
Returns the item count.
QLayoutItem* itemAt(int index) const;
Returns item reference at index or 0 if there's none.
QLayoutItem* takeAt(int index);
Takes and returns item from the layout from index or returns 0 if there is none.
Qt::Orientations expandingDirections() const;
Returns the layouts expanding directions.
bool hasHeightForWidth() const;
Tells if the layout handles height for width calculation.
QSize minimumSize() const;
Returns the layouts minimum size.
void setGeometry(const QRect& rect);
Sets the geometry of the layout and the items inside it. Here you have to maintain the aspect ratio and do the centering.
QSize sizeHint() const;
Returns the preferred size for the layout.
Further reading
Maintaining square form for a widget in Qt # Forum Nokia
Implementing a layout manager in Qt # Forum Nokia
Writing custom layout managers # Qt documentation
Calling resize() from within resizeEvent() has never worked well for me -- at best it will cause flickering as the window is resized twice (as you have), at worst an infinite loop.
I think the "correct" way to maintain a fixed aspect ratio is to create a custom layout. You'll have to override just two methods, QLayoutItem::hasHeightForWidth() and QLayoutItem::heightForWidth().
I too was trying to achieve the requested effect: a widget that keeps a fixed aspect ratio while staying centred in its allocated space. At first I tried other answers from this question:
implementing heightForWidth and hasHeightForWidth as suggested by marc-mutz-mmutz simply didn't work for me.
I briefly looked at implementing a custom layout manager, but all Bleadof's links were dead, and when I found the documentation and read through it, it looked way too complicated for what I was trying to achieve.
I ended up creating a custom widget that responds to resizeEvent and uses setContentsMargin to set margins such that the remaining content area keeps the desired ratio.
I found I also had to set the widget's size policy to QSizePolicy::Ignored in both directions to avoid odd resizing issues resulting from the size requests of child widgets—the end result is that my widget accepts whatever size its parent allocates to it (and then sets its margins as described above to keep the desired aspect ratio in its content area).
My code looks like this:
from PySide2.QtWidgets import QWidget, QSizePolicy
class AspectWidget(QWidget):
'''
A widget that maintains its aspect ratio.
'''
def __init__(self, *args, ratio=4/3, **kwargs):
super().__init__(*args, **kwargs)
self.ratio = ratio
self.adjusted_to_size = (-1, -1)
self.setSizePolicy(QSizePolicy(QSizePolicy.Ignored, QSizePolicy.Ignored))
def resizeEvent(self, event):
size = event.size()
if size == self.adjusted_to_size:
# Avoid infinite recursion. I suspect Qt does this for you,
# but it's best to be safe.
return
self.adjusted_to_size = size
full_width = size.width()
full_height = size.height()
width = min(full_width, full_height * self.ratio)
height = min(full_height, full_width / self.ratio)
h_margin = round((full_width - width) / 2)
v_margin = round((full_height - height) / 2)
self.setContentsMargins(h_margin, v_margin, h_margin, v_margin)
(Obviously, this code is in Python, but it should be straightforward to express in C++ or your language of choice.)
In my case overriding heightForWidth() doesn't work. And, for someone, it could be helpful to get working example of using resize event.
At first subclass qObject to create filter. More about event filters.
class FilterObject:public QObject{
public:
QWidget *target = nullptr;//it holds a pointer to target object
int goalHeight=0;
FilterObject(QObject *parent=nullptr):QObject(parent){}//uses QObject constructor
bool eventFilter(QObject *watched, QEvent *event) override;//and overrides eventFilter function
};
Then eventFilter function. It's code should be defined outside of FilterObject definition to prevent warning. Thanks to this answer.
bool FilterObject::eventFilter(QObject *watched, QEvent *event) {
if(watched!=target){//checks for correct target object.
return false;
}
if(event->type()!=QEvent::Resize){//and correct event
return false;
}
QResizeEvent *resEvent = static_cast<QResizeEvent*>(event);//then sets correct event type
goalHeight = 7*resEvent->size().width()/16;//calculates height, 7/16 of width in my case
if(target->height()!=goalHeight){
target->setFixedHeight(goalHeight);
}
return true;
};
And then in main code create FilterObject and set it as EventFilter listener to target object. Thanks to this answer.
FilterObject *filter = new FilterObject();
QWidget *targetWidget = new QWidget();//let it be target object
filter->target=targetWidget;
targetWidget->installEventFilter(filter);
Now filter will receive all targetWidget's events and set correct height at resize event.