Создание собственных виджетов в PyGTK с помощью cairo

Свободная библиотека Gtk, как известно, не отличается очень большим выбором виджетов. Но никто не мешает создавать свои собственные.

Gtk, как известно, построена на принципах ООП, что хорошо ложится на объектную модель Python. В данном случае это означает, что наследование виджетов естественным образом соответствует наследованию классов в Питоне. Так, создав класс-потомок gtk.VBox, мы получим виджет со всеми свойствами VBox, и сможем добавлять в него нужную функциональность.

Покажу простейший пример. Пусть мы хотим создать виджет, выглядящий как комбинация gtk.Label и gtk.Entry, т.е. поле для ввода сразу с подписью. Чтобы сделать такое непосредственно средствами gtk, нужно создать gtk.HBox, а в него поместить Label и Entry. Т.е. HBox окажется родительским виджетом для всей конструкции. Вот от него и будем наследоваться:

class LabeledEntry(gtk.HBox):

Но наш виджет довольно сильно отличается от простого HBox, поэтому нужно переопределить инициализатор:

  def __init__(self,label=None):
   gtk.HBox.__init__(self)        # Вызываем инициализатор родительского класса
   self.label = gtk.Label(label)  # Создаём текстовую метку с нужной подписью
   self.entry = gtk.Entry()       # И поле для ввода текста
   self.pack_start(self.label, expand=False)  # Добавляем label в создаваемый виджет
   self.pack_start(self.entry, expand=True)   # Поле для ввода - туда же

Теперь можно дописывать методы по собственному усмотрению. Например, логично было бы видеть методы set_text и get_text:

  def get_text(self):
   return self.entry.get_text()

  def set_text(self,text):
   self.entry.set_text(text)

При желании можно добавить, например, get_label и set_label. Пример использования нашего виджета:

...
entry = LabeledEntry("Enter some text")
...

Таким образом, наследуясь от HBox или VBox, можно создавать виджеты, состоящие из нескольких готовых. Но иногда нужны виджеты, внешне не похожие ни на один из стандартных. И вот тогда выручает то, что все виджеты gtk отрисовываются с помощью Cairo, который имеет весьма простой API.

API этот имеет много общего со многими другими рисовальными API. Прежде всего, нужно получить контекст Cairo - объект, содержащий состояние изображения. Далее для собственно рисования вызываются методы этого объекта. Наиболее часто используемые:

• cr.move_to(x,y) - переместить графический указатель в нужную точку холста,

• cr.line_to(x,y) - провести линию от положения указателя до данной точки (указатель сдвинется в указанную точку),

• cr.path_close() - делает текущую линию замкнутой,

• cr.rectangle(x,y,w,h) - рисует прямоугольник; задаются координаты левого верхнего угла и размеры,

• cr.set_source_rgb(r,g,b) - выбрать цвет для рисования; компоненты r,g,b измеряются от 0 до 1,

• cr.stroke() - нарисовать контур текущей линии (выбранным цветом),

• cr.fill() - закрасить текущую линию.

Координаты измеряются как обычно - от левого верхнего угла вправо и вниз, в пикселах.

Пусть нам, скажем, нужен виджет, который будет отображать простейшие линейные диаграммы. Должна быть возможность добавлять в него данные, а он должен соответственно перерисовывать диаграмму. Такие виджеты удобнее всего наследовать от gtk.DrawingArea:

  class Diagram(gtk.DrawingArea):

Сам виджет DrawingArea выглядит как белый прямоугольник. И на нём, в соответствии с названием, можно рисовать. Пока сделаем инициализацию нашего виджета:

  def __init__(self,max=10,color=(0.8,0.8,0.6)):
   gtk.DrawingArea.__init__(self)
   self.data = [1]                # Это будут данные, отображаемые виджетом
   self.max = max                 # Сколько максимум данных будет рисовать виджет
   self.color = color             # Цвет диаграммы
   # Вот это, можно сказать, самое главное: привязываем рисующую процедуру к событию перерисовки виджета
   self.connect('expose-event', self.on_expose)

Определяем собственно метод, который будет отрисовывать виджет:

  def on_expose(self, widget, event):

В аргументе widget передаётся сам виджет. Первое, что нам от него нужно - это размеры и положение:

    x,y, width,height,_ = widget.window.get_geometry()

Кроме того, нам понадобится контекст Cairo:

    cr = widget.window.cairo_create()

Вычислим некоторые размеры:

    xpad = 0.03*self.width           # Поля по горизонтали
   ypad = 0.07*self.height          # И по вертикали
   w = float(self.width-2*xpad)     # Ширина 'рабочей' части виджета
   h = float(self.height-2*ypad)    # и высота
   M = max(self.data)               # Максимум данных - он нужен, чтобы выставить масштаб по оси Y
   n = len(self.data)               # Количество данных

    cr.rectangle(0,0,self.width,self.height)   # Обозначаем прямоугольник, закрывающий весь виджет
   cr.set_source_rgb(1,1,1)                   # Выбираем белый цвет
   cr.fill()                                  # Закрашиваем наш прямоугольник - это будет фон

    cr.move_to(xpad, ypad+h-h*float(self.data[0])/M)  # Ставим указатель в верхний левый угол будущей диаграммы
   for x,y in enumerate(self.data[1:]):              # Пробегаемся по всем данным
   cr.line_to(xpad+w*float(x+1)/(n-1), ypad+h-h*float(y)/M)  # Проводим очередной отрезок ломанной
   cr.line_to(xpad+w, ypad+h)                        # Проводим правую границу диаграммы
   cr.line_to(xpad,ypad+h)                           # Теперь нижнюю границу
   cr.close_path()                                   # Замыкаем ломанную - это проведёт левую границу диаграммы
   cr.set_source_rgb(*self.color)                    # Выбираем цвет
   cr.fill()                                         # Закрашиваем ломанную

Этот метод будет вызываться каждый раз, когда нужно перерисовать виджет. Конечно, стоит иметь ввиду, что если он будет выполняться долго - перерисовка виджета будет тормозить. Так что вычислений и циклов в нём должно быть минимум. Всё, что можно, следует вычислять заранее, или кэшировать.

Ну и допишем метод для добавления данных в диаграмму:

def accept(self,n):
if len(self.data) == self.max:
    del self.data[0]           # Если данных слишком много - забываем самое старое значение
self.data.append(float(n))     # Добавляем число в список
self.queue_draw()              # Этот вызов заставит виджет перерисоваться, т.е. лишний раз вызовет on_expose().

Пример использования:

...
dg = Diagram(max=20)
...
dg.accept(10)
dg.accept(20)
...