Huge "Grid" of PushButtons lags awfully, buttons can't be enabled

Question

In my project, I have 256 tiny PushButtons in one 16x16 grid layout. (Yeah that took forever.) Editing and running my program now is very laggy. Also, for some strange reason, Qt will not let me enable any of the buttons, but other buttons to the side work just fine?

Is there any easy way to determine which square of the grid was clicked without having a bunch of buttons? (Like following the cursor over an image maybe?)

Also, when each "square" of the grid is clicked, it becomes the "selection" and it needs to be the only "square" selected. (Think about it like a huge chess board)

Here is a pic: http://gyazo.com/988cdbb59b3d1f1873c41bf91b1408fd

Later on, I will need to do this again for a 54x54 size grid (2916 buttons) and I REALLY don't want to do it button by button.

Thanks for your time, I hope you understand my question :)

Answer 1

You can do this easy way.

import sys
from PyQt4 import QtGui, QtCore
from PyQt4.QtGui import *
from PyQt4.QtCore import * 

class DrawImage(QMainWindow): 
    def __init__(self, parent=None):
        super(QMainWindow, self).__init__(parent)
        self.setWindowTitle('Select Window')
        
        #you can set grid size here ... 8x8, 16x16 , for bigger numbers (54x54) be sure your image is big enough, because QWidget can't be smaller then ~20 pixels
        self.gridSize = 16

        mainWidget = QWidget()
        self.setCentralWidget(mainWidget)
        self.scene = QGraphicsScene()
        view = QGraphicsView(self.scene)
        layout = QVBoxLayout()
        layout.addWidget(view)
        mainWidget.setLayout(layout)
        self.image = QImage('image.JPG')# put your image name here, image (suppose to be grid) must be at the same folder or put full path
        pixmapItem = QGraphicsPixmapItem(QPixmap(self.image), None, self.scene)
        pixmapItem.mousePressEvent = self.pixelSelect
        

    def pixelSelect( self, event ):
        #add whatever you want to this widget,any functionality or you can add image for example, I've simply colored it
        wdg = QWidget()
        layout = QVBoxLayout()
        palette =  QPalette(wdg.palette())
        palette.setBrush(QPalette.Background, QColor(200,255,255))
        wdg.setPalette(palette)
        wdg.setLayout(layout)
        self.scene.addWidget(wdg)
        
        #calculate size and position for added widget
        imageSize = self.image.size()
        width = imageSize.width()
        height = imageSize.height() 

        #size
        wgWidth = float(width)/self.gridSize  
        wgHeight =  float(height)/self.gridSize
        wdg.setFixedSize(wgWidth,wgHeight)

        #position       
        wgXpos = int(event.pos().x()/wgWidth) * wgWidth
        wgYpos = int(event.pos().y()/wgHeight) * wgHeight
        wdg.move(wgXpos,  wgYpos)

        #which square is clicked?
        print "square at row ", int(event.pos().y()/wgHeight)+1,", column ",int(event.pos().x()/wgWidth)+1, "is clicked"

def main():
    app = QtGui.QApplication(sys.argv)
    form = DrawImage()
    form.show()
    app.exec_()

if __name__ == '__main__':
    main()

Also, if you want to display simple square image over your grid image, look at question/solution I had: QGraphicsPixmapItem won't show over the other QGraphicsPixmapItem

Answer 2

If you don't really need the appearance of buttons, I would create a QWidget subclass that implements a custom paintEvent and renders a grid of needed size (taking the widget size into account). Then, in the mouse events (up,down,move etc.) you can calculate which grid item was clicked with a simple formula. You can render cells with different colors to indicate selection or highlighting.

P.S.:I would really like to post some code from my implementations (i have done this two or three times) but the source codes are at my old company :)

Answer 3

You just create your own QGridLayout in order to be able to add the buttons easily. I posted an answer to another question, showing you how to fill a custom made QGridLayout with a bunch of widgets sequentially. The buttons are added according to the maximum count of columns you specified. (Note: It's just a very rough example but enough to start from)

In your example you would create the custom grid layout with 16 columns and simply add your buttons.

To find out which button has been pressed (and to make connecting easier) you can use QSignalMapper.

For investigating the lag you could check the amount of (GDI-/User-) handles of your application (using ProcessExplorer for example). The handle count shouldn't be above 10.000.

I don't know why you can't enable the push buttons.