Skip to main content

Bars

Progressbars and levelbars

Glade

/images/06_progresslevel.thumbnail.png

Progressbar

Progressbars usually show the current state of a longer lasting process. The widget offers two operation modes:

  1. proportional mode, the progress is expressed by a value between 0 and 1

  2. activity mode, a block moves back and forth

The widget posseses an optional text field. It shows the progress in percent if the field content is not specified otherwise.

Levelbar

Levelbar widgets are used as level indicators. The level is visualized like in a progressbar but it has some more properties:

  1. Two operation modes:

    1. continous: one single block represents the value

    2. discrete: the levelbar is split into a defined number of blocks, each block represents a value range

  2. Define minimum/maximum value, default is 0/1; the default number of blocks in discrete mode corresponds to the maximum value

  3. Change colours when exceeding predefined values (see also CSS article)

Python

Progressbar

In the example the first progressbar operates in proportional mode, the second in activity mode. The latter does not show the progress in the text field, this has to be accomplished manually:

widget.pulse()
widget.set_text("%d %%" % perc_value)

Levelbar

What set_fraction is for progressbar is set_value for levelbar. This is self-explanatory for the continous mode. In discrete mode the number of blocks have to be factored in:

widget.set_value(fraction*blocks)

For the add_offset_value function and colour schemes read the CSS article.

Listings

Glade

06_progresslevel.glade (Source)

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.20.0 -->
<interface>
  <requires lib="gtk+" version="3.20"/>
  <object class="GtkWindow" id="window">
    <property name="can_focus">False</property>
    <property name="default_width">400</property>
    <property name="default_height">150</property>
    <signal name="destroy" handler="on_window_destroy" swapped="no"/>
    <child>
      <object class="GtkBox">
        <property name="visible">True</property>
        <property name="can_focus">False</property>
        <property name="orientation">vertical</property>
        <property name="homogeneous">True</property>
        <child>
          <object class="GtkProgressBar" id="prog1">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <property name="text" translatable="yes">Text hier</property>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">False</property>
            <property name="position">0</property>
          </packing>
        </child>
        <child>
          <object class="GtkProgressBar" id="prog2">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <property name="pulse_step">0.14999999999999999</property>
            <property name="show_text">True</property>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">False</property>
            <property name="position">1</property>
          </packing>
        </child>
        <child>
          <object class="GtkLevelBar" id="lev1">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">False</property>
            <property name="position">2</property>
          </packing>
        </child>
        <child>
          <object class="GtkLevelBar" id="lev2">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <property name="max_value">5</property>
            <property name="mode">discrete</property>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">False</property>
            <property name="position">3</property>
          </packing>
        </child>
        <child>
          <object class="GtkButton" id="go">
            <property name="label" translatable="yes">Go!</property>
            <property name="visible">True</property>
            <property name="can_focus">True</property>
            <property name="receives_default">True</property>
            <property name="always_show_image">True</property>
            <signal name="clicked" handler="on_go_clicked" swapped="no"/>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">False</property>
            <property name="position">7</property>
          </packing>
        </child>
      </object>
    </child>
    <child>
      <placeholder/>
    </child>
  </object>
</interface>

Python

06_progresslevel.py (Source)

#!/usr/bin/python
# -*- coding: utf-8 -*-

import time

import gi
gi.require_version("Gtk", "3.0")
from gi.repository import Gtk


class Handler:

    def on_window_destroy(self, *args):
        Gtk.main_quit()

    def on_go_clicked(self, widget):
        for i in range(101):
            x.progbar1.set_fraction(i / 100)
            x.progbar2.pulse()
            x.progbar2.set_text("{} %".format(i))
            x.levbar1.set_value(i / 100)
            x.levbar2.set_value((i / 100) * 5)
            time.sleep(.05)
            #interrupt main loop to update GUI
            while Gtk.events_pending():
                Gtk.main_iteration()
        x.progbar2.set_fraction(1)


class Example:

    def __init__(self):

        self.builder = Gtk.Builder()
        self.builder.add_from_file("06_progresslevel.glade")
        self.builder.connect_signals(Handler())

        self.progbar1 = self.builder.get_object("prog1")
        self.progbar2 = self.builder.get_object("prog2")
        self.levbar1 = self.builder.get_object("lev1")
        self.levbar2 = self.builder.get_object("lev2")

        self.levbar2.add_offset_value("high", 4)
        self.levbar2.add_offset_value("full", 5)

        window = self.builder.get_object("window")
        window.show_all()

    def main(self):
        Gtk.main()


x = Example()
x.main()

Comments

Comments powered by Disqus