title: Displaying custom button class in PyQt4
body: <p>I've created a custom button class that I wish to add to my layout created using QT Designer.</p>
  
  <p>Here is the first class' <strong>init</strong> function:</p>
  
  <pre><code>class Ui_Form(QtGui.QWidget):
      def __init__(self):
          QtGui.QWidget.__init__(self)
          self.setupUi(self)
          self.button1 = Button()
          self.button1.clicked.connect(self.button1.playSample)
  </code></pre>
  
  <p>And here is the button class it is calling:</p>
  
  <pre><code>class Button(QtGui.QPushButton):
      def __init__(self):
          super(Button, self).__init__()
          self.setAcceptDrops(True)
          self.setGeometry(QtCore.QRect(90, 90, 61, 51))
          self.setText("Drag onto Me")
  </code></pre>
  
  <p>The problem is that I have no idea how to display this button class in the way I display the buttons created by QT Designer. </p>
  
  <p>Buttons are currently added in the setupUi function of the Ui_Form class in the following way (they are not added to a layout manager, so I assume 'form' has something to do with it, however I just do not know what to do!):</p>
  
  <pre><code>    self.btn_b8 = QtGui.QPushButton(Form)
      self.btn_b8.setGeometry(QtCore.QRect(440, 90, 61, 51))
      self.btn_b8.setText("")
      icon = QtGui.QIcon()
      icon.addPixmap(QtGui.QPixmap("Python/LP_Proj/LP_Square_Off.png"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
      self.btn_b8.setIcon(icon)
      self.btn_b8.setIconSize(QtCore.QSize(55, 55))
      self.btn_b8.setObjectName("btn_b8")
  </code></pre>
  
  <p>Here is a minimalistic example of code (as small as I could make it) that depicts a button working, and the button I am trying to create not being shown.. The reason I don't know how to implement using a layout manager is that I have a background image that needs to be used, and with a layout manager the image just gets put into one of the slots, rather than placing everything upon it. But this is most likely due to my limited knowledge of PyQt!</p>
  
  <pre><code>import sys
  from PyQt4 import QtCore, QtGui
  
  class Ui_Form(QtGui.QWidget):
      def __init__(self):
          QtGui.QWidget.__init__(self)
          self.setupUi(self)
  
      def setupUi(self, Form):
          Form.setObjectName("Form")
          Form.resize(591, 591)
          self.Background = QtGui.QLabel(Form)
          self.Background.setGeometry(QtCore.QRect(0, 0, 631, 591))
          self.Background.setText("")
          self.Background.setPixmap(QtGui.QPixmap("Python/LP_Proj/LP_Background.png"))
          self.Background.setObjectName("Background")
  
          self.btn_a1 = Button(Form)
  
          self.btn_a2 = QtGui.QPushButton(Form)
          self.btn_a2.setGeometry(QtCore.QRect(90, 40, 41, 41))
          self.btn_a2.setText("")
          self.btn_a2.setObjectName("btn_a2")
  
          self.lab_a1 = QtGui.QLabel(Form)
          self.lab_a1.setGeometry(QtCore.QRect(20, 76, 61, 16))
          font = QtGui.QFont()
          font.setPointSize(10)
          self.lab_a1.setFont(font)
          self.lab_a1.setObjectName("lab_a1")
  
          self.lab_a2 = QtGui.QLabel(Form)
          self.lab_a2.setGeometry(QtCore.QRect(80, 76, 61, 16))
          font = QtGui.QFont()
          font.setPointSize(10)
          self.lab_a2.setFont(font)
          self.lab_a2.setObjectName("lab_a2")
  
          self.retranslateUi(Form)
          QtCore.QMetaObject.connectSlotsByName(Form)
  
      def retranslateUi(self, Form):
          Form.setWindowTitle(QtGui.QApplication.translate("Form", "Launchpad Control", None, QtGui.QApplication.UnicodeUTF8))
          self.btn_a1.clicked.connect(self.btn_a1.playSample)
          self.lab_a1.setText(QtGui.QApplication.translate("Form", "&lt;html&gt;&lt;head/&gt;&lt;body&gt;&lt;p align=\"center\"&gt;&lt;span style=\" color:#ffffff;\"&gt;Unassigned&lt;/span&gt;&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;", None, QtGui.QApplication.UnicodeUTF8))
          self.lab_a2.setText(QtGui.QApplication.translate("Form", "&lt;html&gt;&lt;head/&gt;&lt;body&gt;&lt;p align=\"center\"&gt;&lt;span style=\" color:#ffffff;\"&gt;Unassigned&lt;/span&gt;&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;", None, QtGui.QApplication.UnicodeUTF8))
  
  class Button(QtGui.QPushButton):
      def __init__(self, Form):
          super(Button, self).__init__()
          self.setAcceptDrops(True)
  
          self.setGeometry(QtCore.QRect(30, 40, 41, 41))
          self.setText("")
          self.setObjectName("btn_a1")
  
      def dragEnterEvent(self, event):
          if event.mimeData().hasUrls():
              event.acceptProposedAction()
          else:
              super(Button, self).dragEnterEvent(event)
  
      def dragMoveEvent(self, event):
          super(Button, self).dragMoveEvent(event)
  
      def dropEvent(self, event):
          if event.mimeData().hasUrls():
              for url in event.mimeData().urls():
                  self.samplepath = str(url.toLocalFile())
                  print self.samplepath
              event.acceptProposedAction()
          else:
              super(Button,self).dropEvent(event)
  
      def playSample(self):
          sample = self.samplepath
          print sample
  
  if __name__=='__main__':
      app = QtGui.QApplication(sys.argv)
      ex = Ui_Form()
      ex.show()
      sys.exit(app.exec_())
  </code></pre>
  
  <p>The button 'a1' should be created to the left of 'a2' and above the label 'a1'. Below is a small screenshot of the programme running and where the button should be. In all there is a total of 80 buttons + labels, all with this drag and drop functionality, hence why I'd prefer/need to use a class. The class will eventually determine the positioning and image for the button, but for now I'm just trying to get it to work! </p>
  
  <p><img src="https://i.stack.imgur.com/2vs2t.png" alt="Example of button"></p>