title: Creating a complex custom widget in PyQt5 and adding it to a QGridlayout
body: <p>I have to create a custom widget that looks like the following:</p>
  
  <p>custom_widget_sketch</p>
  
  <p><img src="https://i.stack.imgur.com/MUitX.png" alt=""></p>
  
  <p>Each custom widget is a representation of one LIPO battery, and displays the battery volatge <code>(V)</code>, status text <code>(charging, discharging, etc)</code>, serial number of the battery <code>(S/N)</code> and three status <code>LEDs</code> (yellow, green and red)</p>
  
  <p>After I have created the custom widget I need to add 30 of these in a grid of 6*5. My assumption here is that once I have created that custom widget it should be as simple as adding say a QPushButton in a QGridLayout like so:</p>
  
  <pre><code>custom_layput = QGridLayout()
  custom_layout.addWidget(custom_widget, 0, 0)
  custom_layout.addWidget(custom_widget, 0, 1)
  
  .
  .
  .
  
  custom_layout.addWidget(custom_widget, 6, 5)
  </code></pre>
  
  <p>The final screen would look like this:</p>
  
  <p>main_window_sketch</p>
  
  <p><img src="https://i.stack.imgur.com/9vM99.png" alt=""></p>
  
  <p>Considering all of these requirements I have the following questions:</p>
  
  <ol>
  <li>Will I able able to create such a complex/rich custom widget using PyQt5? Is it doable?</li>
  <li>Is this the correct approach to create the custom widget: first draw a square using QPainter (this is the blue square in the custom_widget_sketch), then add QLineEdits to dispaly the voltage (V) text, serial number (S/N) text and the Status text, add a QLabel for displaying the "V", "S/N" and "STATUS" labels in the custom widget, then draw the three circles: one each for the yellow, green and red <code>LEDs</code>, then use a combination of <code>QVBoxLayout</code> and QHBoxLayout to arrange the <code>QLineEdits</code>, <code>QLabels</code>, the square and the circles (LED indicators)</li>
  <li>How do I package this custom widget such that I can simply add it to a layout like I would add a <code>QPushButton</code> or a <code>QLineEdit</code>?</li>
  </ol>
  
  <p>PS: The custom_widget_sketch also contains a line and a square with three lines inside it in the top left corner. This is to depict the connector for the LIPO battery. It may be too complex to implement that right now. So I would be happy even if I am able to implement everything other than these two elements</p>
  
  <p>I have been through a few SO questions but they all refer to one tutorial, which is not my end goal.</p>
  
  <p>I would appreciate any code snippets, general outline of code/steps to follow or links to any articles/tutorials that create custom widgets similar to the one I wish to create. </p>