Home  Contents

Custom widget in Qt4

In this part of the Qt4 C++ programming tutorial, we will create a custom widget.

Have you ever looked at an application and wondered, how a particular GUI item was created? Probably every wannabe programmer has. Then you were looking at a list of widgets provided by your favourite GUI library. But you couldn't find it. Toolkits usually provide only the most common widgets like buttons, text widgets, sliders etc. No toolkit can provide all possible widgets.

Programmers must create such widgets by themselves. They do it by using the drawing tools provided by the toolkit. There are two possibilities. A programmer can modify or enhance an existing widget. Or he can create a custom widget from scratch.

The Burning widget

In the next example we will create a custom burning widget. This widget can be seen in applications like Nero or K3B. The widget will be created from scratch.

#ifndef BURNING_H
#define BURNING_H

#include <QWidget>
#include <QSlider>
#include "widget.h"


class Burning : public QFrame
{
  Q_OBJECT

  public:
    Burning(QWidget *parent = 0);

  public slots:
    void valueChanged(int);
    int getCurrentWidth();

  private:
    QSlider *slider;
    Widget *widget;
    int cur_width;

};

#endif

This is the header file of the main window of the example.

  private:
    QSlider *slider;
    Widget *widget;
    int cur_width;

We will have two widgets on the client area of the window. A predefined slider and a custom widget. The cur_width variable will hold the current value from the slider. This value is used when painting the custom widget.

#include "burning.h"
#include <QApplication>
#include <QPainter>
#include <QVBoxLayout>
#include <QFrame>
#include <QPushButton>

Burning::Burning(QWidget *parent)
    : QFrame(parent)
{
  slider = new QSlider(Qt::Horizontal , this);
  slider->setMaximum(750);
  slider->setGeometry(50, 50, 130, 30);

  connect(slider, SIGNAL(valueChanged(int)), this, SLOT(valueChanged(int)));

  QVBoxLayout *vbox = new QVBoxLayout(this);
  QHBoxLayout *hbox = new QHBoxLayout();

  vbox->addStretch(1);

  widget = new Widget(this);  
  hbox->addWidget(widget, 0);

  vbox->addLayout(hbox);

  setLayout(vbox);

}

void Burning::valueChanged(int val) 
{
  cur_width = val;
  widget->repaint();
}

int Burning::getCurrentWidth() 
{
  return cur_width;
}

Here we build the main window of the example.

void Burning::valueChanged(int val) 
{
  cur_width = val;
  widget->repaint();
}

When we change the value of the slider, we store the new value and repaint the custom widget.

#ifndef WIDGET_H
#define WIDGET_H

class Burning;

#include <QFrame>

class Widget : public QFrame
{
  Q_OBJECT  

  public:
    Widget(QWidget *parent = 0);

  protected:
    void paintEvent(QPaintEvent *event);

  public:
    QWidget *m_parent;
    Burning *burn;

};

#endif

This is the header file of the custom burning widget.

  public:
    QWidget *m_parent;
    Burning *burn;

We store a pointer to the parent widget. We get the cur_width through this pointer.

#include "widget.h"
#include "burning.h"
#include <QPainter>
#include <QFrame>
#include <QHBoxLayout>
#include <QTextStream>


QString num[] = { "75", "150", "225", "300", "375", "450", "525", "600", "675" };
int asize = sizeof(num)/sizeof(num[1]);

Widget::Widget(QWidget *parent)
    : QFrame(parent)
{
  m_parent = parent;
  setFrameShape(QFrame::StyledPanel);
  setMinimumHeight(30);
}

void Widget::paintEvent(QPaintEvent *event)
{

  QPainter painter(this);
  painter.setPen(QColor("#d4d4d4"));

  int width = size().width();


  Burning *burn = (Burning *) m_parent;
  int cur_width = burn->getCurrentWidth();


  int step = (int) qRound(width / 10.0);


  int till = (int) ((width / 750.0) * cur_width);
  int full = (int) ((width / 750.0) * 700);


  if (cur_width >= 700) {

      painter.setPen(QColor(255, 255, 184)); 
      painter.setBrush(QColor(255, 255, 184));
      painter.drawRect(0, 0, full, 30);
      painter.setPen(QColor(255, 175, 175));
      painter.setBrush(QColor(255, 175, 175));
      painter.drawRect(full, 0, till-full, 30);

  } else { 

      painter.setPen(QColor(255, 255, 184));
      painter.setBrush(QColor(255, 255, 184));
      painter.drawRect(0, 0, till, 30);

  }

  painter.setPen(QColor(90, 80, 60));
  for ( int i=1; i <= asize; i++ ) {

    painter.drawLine(i*step, 0, i*step, 6);
    QFont newFont = font();
    newFont.setPointSize(7);
    setFont(newFont);

    QFontMetrics metrics(font());

    int w = metrics.width(num[i-1]);
    painter.drawText(i*step-w/2, 19, num[i-1]);

  }

  QFrame::paintEvent(event);

}

Here we paint the custom widget. We paint the rectangle, vertical lines and the numbers.

 setFrameShape(QFrame::StyledPanel);

We use a decorated QFrame widget as a base for our custom widget.

  Burning *burn = (Burning *) m_parent;
  int cur_width = burn->getCurrentWidth();

We get the cur_width value.

 QFontMetrics metrics(font());

 int w = metrics.width(num[i-1]);
 painter.drawText(i*step-w/2, 19, num[i-1]);

This code draws the numbers. We use font metrics to get the width of the text.

 QFrame::paintEvent(event);

We propagate the paint event further to the parent widget.

#include "burning.h"
#include <QDesktopWidget>
#include <QApplication>

void center(QWidget &widget)
{
  int x, y;
  int screenWidth;
  int screenHeight;

  int WIDTH = 370;
  int HEIGHT = 200;
  

  QDesktopWidget *desktop = QApplication::desktop();

  screenWidth = desktop->width();
  screenHeight = desktop->height();
 
  x = (screenWidth - WIDTH) / 2;
  y = (screenHeight - HEIGHT) / 2;

  widget.setGeometry(x, y, WIDTH, HEIGHT);
}


int main(int argc, char *argv[])
{
  QApplication app(argc, argv);
  Burning window;

  window.setWindowTitle("The Burning widget");
  window.show();
  center(window);

  return app.exec();
}

This is the main file.

---

In this part of the Qt4 tutorial, we have created a custom Burning widget.