Spoilt for choice

Spinbutton and Combobox

Named widgets simplify input of values by providing a value list or range. Value input is normally done via mouseclicks, key input is optional.

Glade

/images/08_combospin.thumbnail.png

Spinbutton

In Glade some properties of spinbutton widgets can be set like the minimum/maximum/default value. It is required to tie a adjustment widget to the spinbutton. To do so select "General > Spin Button Attributes > Adjustment" and assign or create an adjustment.

Looking at the example file the two spinbuttons represent month and year dates. The month spinbutton is set to be circular, the minimum value follows after passing the maximum value. This act emits the wrapped signal which is assigned to then adjust the year date of the second spinbutton.

Combobox

There are two different combobox widgets in GTK+:

GtkComboboxText
The list items of the dropdown menu are strings directly that are directly set in the Glade widget properties
GtkCombobox
The list items are stored in a ListStore or TreeStore element that can hold data sets instead of a plain list. These data stores are accessible to different widgets (see the "List article").

Both widgets can include an optional entry widget which has to be activated in "General > Has Entry". By activating an internal GtkEntry widget is created. It is important to set "Common > Widget Flags > Can focus".

The first ComboboxText widget in the exampe does not possess an entry field, the user can only select an item from the list. In both widgets the changed signal is assigned to retrieve the selection.

Python

Spinbutton

The value of a spinbutton can be easily retrieved and set via get_value and set_value.

In the example the values for the month and year date are set with the current dates. The on_spin_m_wrapped function changes the year date up or down according to the value set in month date.

Combobox

Combobox lists can be extended by using the append function, p.e.

[self.builder.get_object("comboboxtext2").append(None,entry) for entry in ("foo","bar","yes","no")]

You get the selected item by calling widget.set_active_text() which also passes the text of the optional text entry widget.

Read more…

Jumping off the greyscale

Pimp GUI using Cascading Style Sheets

CSS

GTK+ objects' layouts can be altered by using CSS. In my humble opinion the usage should not be exaggerated and the main part of the layout should be left to be managed by the theme. Links:

Glade

/images/07_css.thumbnail.png

CSS layout instructions are set in the source code. This example shows the usage of CSS in levelbars so 4 of them are created with Glade.

Python

CSS

The pattern for layout instructions is

widget [element] {
  font...
  color...
  background...
  ...
}

that are stored in a string variable loaded by the Gtk.CssProvider() class.

Levelbar

Levelbar values can be displayed in different colours depending on the defined value range (see article "Bars"), p.e. to visualize a critical battery status. The predefined offset markers are:

  • low (<=.25)
  • high (<=.75)
  • full (bis 1)

The values can be retrieved by the get_offset_value function or created/changed with the add_offset_value function.

In the example the 4th levelbar has an additional offset marker between high and full that's why a value of 0.8 is not visualized as full like it is in the 3rd levelbar.

self.bar.add_offset_value("alert",.9)

Read more…

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.

Read more…

Serve the menu

Menus, toolbars and statusbars

Glade

/images/05_menutoolbar.thumbnail.png

Toolbar

Toolbars contain different widgets like buttons, togglebuttons, radiobuttons oder (sub) menus. Generating and editing toolbars is analogue to menus.

Statusbar

The purpose of statusbars is to show notifications or useful information. Messages are treated like a list, the statusbar widget provides the functions push and pop.

Python

To send a message to the statusbar you will just need the function

widget.push(content_id,message)

If messages are exclusively shown "on top" the content_id can be a random number, like 0.

Read more…

Clickbaiting

Switch, checkbox, radiobutton - more elements to click on

This article explains the usage of control and display widgets on the basis of these selected elements. The usage follows the pattern:

  1. create container (box, toolbar etc.) for widget
  2. add element
  3. add an identifier to the element (that step canbe skipped for elements that do not need to be addressed in the source code like boxes or separators)
  4. assign a function to a signal
  5. (optional) test signal emission in Glade preview window
  6. code funtion

All available GTK+ classes and their functions are documented in the Python GI API Reference >> Gtk 3.0 >> Classes.

/images/04_clickableelements.thumbnail.png

Glade

Switch

A switch is a widget that posseses two states, on and off. The current status can be retrieved by the state_set signal which is emitted on turning the switch on or off.

Checkbox

Checkboxes are basically just togglebuttons therefore the toggled signal is allocated.

Radiobutton

The purpose of radiobuttons is the selection of _one_ list item. The widget is also a sub class of GtkToggleButton (allocate toggled signal).

Every radio button is a member of a group. This is done via "General > Button Attributes > Group". There is one 'leading' radiobutton that are all other radiobuttons bound to.

Python

Given that checkboxes and radiobuttons are togglebuttons the status is retrieved by the widget.get_active() function.

When the state_set signal is emitted on the switch a parameter is passed containing the status as boolean (True/False).

def on_switch_state_set(self,widget,state):
    if state is True:
        print("switch is on")
    else:
        print("switch is off")

Read more…