Question

In this part of the Qyoto C# programming tutorial, we will show how to create a custom widget.

Most 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.

In this chapter we will create two custom widgets. A Burning widget and a Led widget.

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.

burning.cs

using System;
using QtCore;
using QtGui;

public class Burning : QWidget 
{
  const int PANEL_HEIGHT = 30;
  const int DISTANCE = 19;
  const int LINE_WIDTH = 5;
  const int DIVISIONS = 10;
  const float FULL_CAPACITY = 700f;
  const float MAX_CAPACITY = 750f;

  QColor redColor = new QColor(255, 175, 175);
  QColor yellowColor = new QColor(255, 255, 184);

  QWidget parent;

  String[] num = 
  {
    "75", "150", "225", "300",
    "375", "450", "525", "600",
    "675"
  };


  public Burning(QWidget parent) 
  {
    this.parent = parent;
    MinimumHeight = PANEL_HEIGHT;
  }

  protected override void OnPaintEvent(QPaintEvent pe) 
  {
    QPainter ptr = new QPainter(this);
    
    DrawWidget(ptr);
    ptr.End();
  }

  void DrawWidget(QPainter ptr) 
  {
    QyotoApp burn = (QyotoApp) parent;

    float slid_width = burn.GetCurrentWidth();
    float width = Size.Width;
    float step = width / DIVISIONS;

    float till = (width / MAX_CAPACITY) * slid_width;
    float full = (width / MAX_CAPACITY) * FULL_CAPACITY;

    if (slid_width > FULL_CAPACITY) 
    {
      ptr.Pen = yellowColor;
      ptr.Brush = yellowColor;
      ptr.DrawRect(new QRectF(0, 0, full, PANEL_HEIGHT));
      ptr.Pen = redColor;
      ptr.Brush = redColor;
      ptr.DrawRect(new QRectF(full+1, 0, till-full, PANEL_HEIGHT));

    } else 
    {
      if (slid_width > 0) 
      {
         ptr.Pen = yellowColor;
         ptr.Brush = yellowColor;
         ptr.DrawRect(new QRectF(0, 0, till, PANEL_HEIGHT));
      }
    }

    ptr.Pen = new QColor(90, 90, 90);
    ptr.SetBrush(BrushStyle.NoBrush);
    ptr.DrawRect(0, 0, Size.Width-1, PANEL_HEIGHT-1);
    
    QFont newFont = ptr.Font;
    newFont.PointSize = 7;
    ptr.Font = newFont;

    QFontMetrics metrics = new QFontMetrics(newFont);

    for (int i = 1; i <= num.Length; i++) 
    {
      ptr.DrawLine(new QLineF(i*step, 1, i*step, LINE_WIDTH));

      int w = metrics.Width(num[i-1]);
      ptr.DrawText(new QPointF(i*step-w/2, DISTANCE), num[i-1]);
    }    
  }
}

In this file, we create the Burning widget.

public class Burning : QWidget 
{
...

The custom widget is based on the QWidget class.

const int PANEL_HEIGHT = 30;
const int DISTANCE = 19;
const int LINE_WIDTH = 5;
const int DIVISIONS = 10;
const float FULL_CAPACITY = 700f;
const float MAX_CAPACITY = 750f;

These are important constants. The PANEL_HEIGHT defines the height for the custom widget. The DISTANCE is the distance of the numbers on the scale from the top of their parent border. The LINE_WIDTH is the vertical line width. The DIVISIONS is the number of parts of the scale. The FULL_CAPACITY is the capacity of the media. After it is reached, overburning happens. This is visualized by a red colour. The MAX_CAPACITY is the maximum capacity of a medium.

String[] num = 
{
  "75", "150", "225", "300",
  "375", "450", "525", "600",
  "675"
};

We use these numbers to build the scale of the Burning widget.

protected override void OnPaintEvent(QPaintEvent pe) 
{
  QPainter ptr = new QPainter(this);
  
  DrawWidget(ptr);
  ptr.End();
}

The drawing of the custom widget is delegated to the DrawWidget() method.

QyotoApp burn = (QyotoApp) parent;

We retrieve the reference to the parent widget.

float slid_width = burn.GetCurrentWidth();

We use it to get the currently selected slider value.

float width = Size.Width;

We get the width of the widget. The width of the custom widget is dynamic. It can be resized by a user.

float till = (width / MAX_CAPACITY) * slid_width;
float full = (width / MAX_CAPACITY) * FULL_CAPACITY;

We use the width variable to do the transformations. Between the values of the scale and the custom widget's measures. Note that we use floating point values. We get greater precision in drawing.

ptr.Pen = redColor;
ptr.Brush = redColor;
ptr.DrawRect(new QRectF(full+1, 0, till-full, PANEL_HEIGHT));

These three lines draw the red rectangle, indicating the overburning.

ptr.DrawRect(0, 0, Size.Width-1, PANEL_HEIGHT-1);

This is the perimeter of the widget. The outside rectangle.

ptr.DrawLine(new QLineF(i*step, 1, i*step, LINE_WIDTH));

Here we draw the small vertical lines.

QFontMetrics metrics = new QFontMetrics(newFont);
...
int w = metrics.Width(num[i-1]);
ptr.DrawText(new QPointF(i*step-w/2, DISTANCE), num[i-1]);

Here we draw the numbers on the scale. To precisely position the numbers, we must get the width of the string.

main.cs

using System;
using QtCore;
using QtGui;

/**
 * ZetCode Qyoto C# tutorial
 *
 * In this program, we create
 * a custom Burning widget.
 *
 * @author Jan Bodnar
 * website zetcode.com
 * last modified October 2012
 */

public class QyotoApp : QWidget 
{
  const int MAX_CAPACITY = 750;

  QSlider slider;
  QWidget widget;
  int cur_width;

  public QyotoApp() 
  {
    WindowTitle = "The Burning Widget";

    InitUI();

    Resize(370, 200);
    Move(300, 300);
    Show();
  }

  void InitUI() 
  {     
     slider = new QSlider(Qt.Orientation.Horizontal , this);
     slider.Maximum = MAX_CAPACITY;
     slider.SetGeometry(50, 50, 130, 30);

     slider.ValueChanged += OnValueChanged;
     
     QVBoxLayout vbox = new QVBoxLayout(this);
     QHBoxLayout hbox = new QHBoxLayout();

     vbox.AddStretch(1);

     widget = new Burning(this);
     hbox.AddWidget(widget, 0);

     vbox.AddLayout(hbox);

     Layout = vbox;
  }

  [Q_SLOT]
  void OnValueChanged(int val) 
  {
    cur_width = val;
    widget.Repaint();
  }

  public int GetCurrentWidth() 
  {
    return cur_width;
  }

  [STAThread]
  public static int Main(String[] args) 
  {
    new QApplication(args);
    new QyotoApp();
    return QApplication.Exec();
  }
}

This is the main file. Here we create the slider widget and use our custom widget.

widget = new Burning(this);
hbox.AddWidget(widget, 0);

We create the instance of the Burning widget and add it to the horizontal box.

[Q_SLOT]
void OnValueChanged(int val) 
{
  cur_width = val;
  widget.Repaint();
}

When the value of the slider changes, we store it inside the cur_width variable and repaint the custom widget.

public int GetCurrentWidth() 
{
  return cur_width;
}

This method is called by the custom widget to get the actual slider value.

Figure: The Burning widget

The Led widget

A Led widget is a bulb, which can be set to different colours. In our case red, green, orange and black. This custom widget is simply created with a SVG image. There are four SVG images. Each for one state of the Led widget.

To compile the example, we need to reference the qyoto-qtsvg.dll library. For example, on our system we have added -r:/usr/local/lib/mono/qyoto/qyoto-qtsvg.dll to the compile options.

led.cs

using System;
using QtCore;
using QtGui;
using QtSvg;

public class Led : QWidget 
{
  string[] cols;
  int col;

  public Led(QWidget parent) 
  {
    const int GREEN = 1;
    col = GREEN;

    SetMinimumSize(50, 50);
    SetMaximumSize(50, 50);
    
    cols = new string[] { "red.svg", "green.svg",  
      "orange.svg", "black.svg" };
  }

  public void SetColour(int newColour)
  {
    col = newColour;
    Update();
  }

  protected override void OnPaintEvent(QPaintEvent e) 
  {
    QPainter ptr = new QPainter(this);
    
    DrawCustomWidget(ptr);
    ptr.End();
  }

  void DrawCustomWidget(QPainter ptr) 
  {
    QSvgRenderer srnd = new QSvgRenderer();
    srnd.Load(cols[col]);
    srnd.Render(ptr);     
  }
}

In the led.cs class we build the custom widget.

const int GREEN = 1;
col = GREEN;

The GREEN constant indicates the state of the Led widget, when all is OK. The colour variable defnes the current state of the widget.

SetMinimumSize(50, 50);
SetMaximumSize(50, 50);

These two lines force the widget to have constant size. The size of a SVG image is 50x50.

cols = new string[] { "red.svg", "green.svg",  
  "orange.svg", "black.svg" };

We store the SVG image file names in the cols array.

public void SetColour(int newColour)
{
  col = newColour;
  Update();
}

The SetColour() method sets the col variable to a new value. We call the Update() method to redraw the Led widget to reflect the new state.

void DrawCustomWidget(QPainter ptr) 
{
  QSvgRenderer srnd = new QSvgRenderer();
  srnd.Load(cols[col]);
  srnd.Render(ptr);     
}

In the DrawCustomWidget() method we display the SVG image using the QSvgRenderer class.

main.cs

using Qyoto;
using QtCore;
using QtGui;

/**
 * ZetCode Qyoto C# tutorial
 *
 * This program creates a custom Led
 * widget.
 *
 * @author Jan Bodnar
 * website zetcode.com
 * last modified October 2012
 */


public class QyotoApp : QWidget 
{
  const int RED = 0;
  const int GREEN = 1;
  const int ORANGE = 2;
  const int BLACK = 3;
  
  Led led;

  public QyotoApp() 
  {
    WindowTitle = "Led widget";

    SetupUI();

    Resize(250, 150);
    Move(300, 300);
    Show();
  }

  public void SetupUI() 
  {    
    QVBoxLayout vbox = new QVBoxLayout();
    QHBoxLayout hbox = new QHBoxLayout();
    
    led = new Led(this);

    hbox.AddWidget(led);
    vbox.AddStretch(1);
    vbox.AddLayout(hbox);
    vbox.AddStretch(1);
    
    QHBoxLayout hbox2 = new QHBoxLayout();

    QPushButton pb1 = new QPushButton("Normal", this);
    QPushButton pb2 = new QPushButton("Warning", this);
    QPushButton pb3 = new QPushButton("Emergency", this);
    QPushButton pb4 = new QPushButton("Off", this);
    
    hbox2.AddWidget(pb1);
    hbox2.AddWidget(pb2);
    hbox2.AddWidget(pb3);
    hbox2.AddWidget(pb4);
        
    vbox.AddLayout(hbox2);
    
    Connect(pb1, SIGNAL("clicked()"), this, SLOT("OnClicked()"));
    Connect(pb2, SIGNAL("clicked()"), this, SLOT("OnClicked()"));
    Connect(pb3, SIGNAL("clicked()"), this, SLOT("OnClicked()"));
    Connect(pb4, SIGNAL("clicked()"), this, SLOT("OnClicked()"));
     
    Layout = vbox;
  }
     
  [Q_SLOT]
  public void OnClicked() 
  {
   
    QPushButton sender = (QPushButton) this.Sender();
    string text = sender.Text;

    if (text == "Normal") 
    {
      led.SetColour(GREEN);
    } 
    else if (text == "Warning")
    {
      led.SetColour(ORANGE);
    } 
    else if (text == "Emergency")
    {
      led.SetColour(RED);
    } 
    else if (text == "Off")
    {
      led.SetColour(BLACK);    
    }
  }

  [STAThread]
  public static int Main(String[] args) 
  {
    new QApplication(args);
    new QyotoApp();

    return QApplication.Exec();
  }
}

This is main.cs file. We have four buttons in a row and a Led widget in the center of the window. These four buttons control the state of the Led widget. There are four states for a Led widget. Normal, warning, emergency and off.

led = new Led(this);

hbox.AddWidget(led);

We create an instance of the Led widget and put it into a horizontal box.

else if ( text == "Warning")
{
  led.SetColour(ORANGE);
} 

If we click on the Warning button, the colour of the Led widget will change to orange. More precisely a new orange SVG image is loaded and displayed.

Figure: The Led widget showing the Off state

In this part of the Qyoto C# tutorial, we have demonstrated how to create custom widgets.