Esempio GUI con Gtk/Glade(GtkBuilder) in C

Un ennesimo esempio con l'impiego delle GTK associate al Gui Designer denominato Glade

La caratteristica differente rispetto alle altre librerie viste finora e' la gestione in GTK delle proprieta' dello slider. Per inserire valore massimo, valore minimo e passo dello slider si deve associare un Adjustement,

Si deve quindi cliccare sulla proprieta' del wigdet e creare un nuovo adjustement, a questo punto scorrendo l'albero dei widget compare negli Oggetti un nuovo ramo; cliccando su questo e' possibile modificare le proprieta' dello slider

Schermata di Glade

Schermata di Glade . Gestione degli Adjustement

Glade permette la generazione di due formati file (che di fatto sono entrambi xml) ovvero LibGlade e LibGtkBuilder, nell'esempio di seguito e' stato usato il secondo sistema che di fatto e' quello piu' supportato da GTK2

main.c
---------------------------------------------------------

#include <gtk/gtk.h>
 GtkBuilder *gtkBuilder;
 GtkWidget *mainwin;
 GtkProgressBar *progress;
 GtkLabel *label;
 GtkHScale *scala;

void on_window1_delete_event()
{
  gtk_main_quit();
}

void on_hscale1_value_changed(GtkWidget* widget,gpointer user_data) {
   gdouble current_value = gtk_range_get_value(GTK_RANGE(scala));

 char buffer [14] = { '\0' };
 sprintf ( buffer, "%.0f", current_value);
 gtk_label_set_text(label,buffer);
 gtk_progress_bar_set_fraction(progress,current_value/100);
}


int main (int argc, char **argv) {

 gtk_set_locale();
 /* Initialize the widget set */
 gtk_init (&argc, &argv);
 /* Create the main window */
 gtkBuilder= gtk_builder_new();
 gtk_builder_add_from_file(gtkBuilder,"progressbar.xml",NULL);
 gtk_builder_connect_signals ( gtkBuilder, NULL );

 mainwin= GTK_WIDGET(gtk_builder_get_object(gtkBuilder,"window1"));
 label= GTK_WIDGET(gtk_builder_get_object(gtkBuilder,"label1"));
 progress= GTK_WIDGET(gtk_builder_get_object(gtkBuilder,"progressbar1"));
 scala= GTK_WIDGET(gtk_builder_get_object(gtkBuilder,"hscale1"));

 g_signal_connect (mainwin, "delete-event", G_CALLBACK (gtk_widget_hide_on_delete), NULL);

 g_object_unref ( G_OBJECT(gtkBuilder) );
 /* Show the application window */
 gtk_widget_show_all ( mainwin );
 /* Enter the main event loop, and wait for user interaction */
 gtk_main ();
 /* The user lost interest */
 return 0;
}

---------------------------------------------------------
progressbar.xml
---------------------------------------------------------

<?xml version="1.0"?>
<interface>
  <requires lib="gtk+" version="2.16"/>
  <!-- interface-naming-policy project-wide -->
  <object class="GtkWindow" id="window1">
    <property name="title" translatable="yes">Progress Bar</property>
    <property name="default_width">200</property>
    <property name="default_height">90</property>
    <signal name="delete_event" handler="on_window1_delete_event"/>
    <child>
      <object class="GtkVBox" id="vbox1">
        <property name="visible">True</property>
        <property name="orientation">vertical</property>
        <child>
          <object class="GtkHScale" id="hscale1">
            <property name="visible">True</property>
            <property name="can_focus">True</property>
            <property name="adjustment">adjustment1</property>
            <property name="lower_stepper_sensitivity">off</property>
            <property name="upper_stepper_sensitivity">off</property>
            <property name="digits">0</property>
            <property name="draw_value">False</property>
            <property name="value_pos">left</property>
            <signal name="value_changed" handler="on_hscale1_value_changed"/>
          </object>
          <packing>
            <property name="position">0</property>
          </packing>
        </child>
        <child>
          <object class="GtkLabel" id="label1">
            <property name="visible">True</property>
            <property name="label" translatable="yes">0
</property>
          </object>
          <packing>
            <property name="position">1</property>
          </packing>
        </child>
        <child>
          <object class="GtkProgressBar" id="progressbar1">
            <property name="visible">True</property>
          </object>
          <packing>
            <property name="position">2</property>
          </packing>
        </child>
      </object>
    </child>
  </object>
  <object class="GtkAdjustment" id="adjustment1">
    <property name="upper">110</property>
    <property name="step_increment">1</property>
    <property name="page_increment">10</property>
    <property name="page_size">10</property>
  </object>
</interface>

---------------------------------------------------------
Makefile
--------------------------------------------------------

LIBS=$(shell pkg-config --cflags --libs gtk+-2.0)
CFLAGS=-Wall -g -export-dynamic
hello: main.c
gcc -o progress_bar main.c $(LIBS) $(CFLAGS)

--------------------------------------------------------
A questo link i file di esempio

Esempio GUI con Gtk/Anjuta in C

Per la generazione di questo esempio e' stato impiegato Anjuta, una Ide che integra al suo interno Glade per la generazione dell'interfaccia.

Nella creazione di un progetto GTK vengono gia' creati i file necessari compreso un file.ui per il codice xml dell'interfaccia grafica ed i file main e callbacks per il codice da eseguite

Glade all'interno di Anjuta

Nota bene: la versione di Glade inserita in Anjuta ha un errore nella gestione dei segnali (almeno nella versione pacchettizzata in Debian stable 6). In pratica il menu a tendina associato ai widget non mostra gli eventi associati ma una lista di valori bianchi (la versione di Glade che si scarica in modo separato invece funziona in modo corretto)..si deve conoscere ed inserire a mano il nome dell'evento da gestire

Al link seguente il progetto completo per la generazione dell'esempio link

Altrimenti il codice puo' essere riscritto separando la parte della gestione degli eventi (callbacks.c) cosi' come Anjuta suggerisce implicitamente
main.c
----------------------------------------------------------------

/* -*- Mode: C; indent-tabs-mode: t; c-basic-offset: 4; tab-width: 4 -*- */
/*
 * main.c
 * Copyright (C) Luca Innocenti 2012 <lucainnoc@gmail.com>
 * 
 */

#include <sys/types.h>
#include <sys/stat.h>
#include <unistd.h>
#include <string.h>
#include <stdio.h>

#include <config.h>
#include <gtk/gtk.h>
#include "callbacks.h"
#define UI_FILE "src/gtkglade.ui"


GtkWidget* create_window (void)
{
GtkBuilder *builder;
GError* error = NULL;

builder = gtk_builder_new ();
if (!gtk_builder_add_from_file (builder, UI_FILE, &error))
{
g_warning ("Couldn't load builder file: %s", error->message);
g_error_free (error);
}

gtk_builder_connect_signals (builder, NULL);
window = GTK_WIDGET (gtk_builder_get_object (builder, "window"));
progress = GTK_WIDGET (gtk_builder_get_object (builder, "progressbar1"));
label = GTK_WIDGET (gtk_builder_get_object (builder, "label1"));
scala = GTK_WIDGET (gtk_builder_get_object (builder, "hscale1"));

g_object_unref (builder);
return window;
}

int main (int argc, char *argv[])
{
  GtkWidget *window;
gtk_set_locale ();
gtk_init (&argc, &argv);
window = create_window ();
gtk_widget_show (window);
gtk_main ();
return 0;
}

----------------------------------------------------------------
callbacks.c
----------------------------------------------------------------

/* -*- Mode: C; indent-tabs-mode: t; c-basic-offset: 4; tab-width: 4 -*- */
/*
 * callbacks.c
 * Copyright (C) Luca Innocenti 2012 <lucainnoc@gmail.com>
 */

#ifdef HAVE_CONFIG_H
#  include <config.h>
#endif

#include "callbacks.h"

void on_hscale1_value_changed(GtkWidget* widget,gpointer user_data) {
   gdouble current_value = gtk_range_get_value(GTK_RANGE(scala));

 char buffer [14] = { '\0' };
 sprintf ( buffer, "%.0f", current_value);
 gtk_label_set_text(label,buffer); 
 gtk_progress_bar_set_fraction(progress,current_value/100);
}

void
destroy (GtkWidget *widget, gpointer data)
{
gtk_main_quit ();
}

----------------------------------------------------------------

callbacks.h
----------------------------------------------------------------

/* -*- Mode: C; indent-tabs-mode: t; c-basic-offset: 4; tab-width: 4 -*- */
/*
 * callbacks.h
 * Copyright (C) Luca Innocenti 2012 <lucainnoc@gmail.com>
 */

#include <gtk/gtk.h>

GtkWidget *window;
GtkProgressBar *progress;
GtkLabel *label;
GtkHScale *scala;

void destroy (GtkWidget *widget, gpointer data);
void on_hscale1_value_changed(GtkWidget* widget,gpointer user_data);

----------------------------------------------------------------

Al link seguente il codice completo del progetto link

Esempio GUI con PyGTK/Glade

In questa versione dell'esempio di GUI l'interfaccia non e' stata creata da codice bensi' mediante il GUI Designer di GTK ovvero Glade

Per iniziare a creare l'interfaccia deve essere prima aggiunto una form (ovvero un TopLevel) a cui deve essere aggiunta una Box (in questo caso un VBox) per impacchettare i Widgets e successivamente si aggiungono i Widgets
Il nome della finestra di TopLevel e' stato definito come MainWindow (nome che servira' per la referenziazione)

In Properties/Signal si puo' definire l'evento che si vuole catturare

Il salvataggio dell'interfaccia puo' avvenire in due formati (GtkBuilder e Libglade). Nell'esempio riportato di seguito e' stato scelto LibGlade

Il programma in Python...il codice e' abbastanza autoesplicativo
---------------------------------------------------
 import sys
try:
    import pygtk
    pygtk.require("2.0")
except:
    pass
try:
    import gtk
    import gtk.glade
except:
    sys.exit(1)


class ProgressBar:

    def __init__(self):

      
        self.gladefile = "progressbar.glade"
        self.wTree = gtk.glade.XML(self.gladefile)
        self.window = self.wTree.get_widget("MainWindow")
        self.window.show()
        if (self.window):
            self.window.connect("destroy", gtk.main_quit)

        dic = { "on_hscale1_value_changed" : self.cambia_valore}
        self.wTree.signal_autoconnect(dic)
      
    def cambia_valore(self, widget):
        a = self.wTree.get_widget("hscale1").get_value()
        self.wTree.get_widget("label1").set_text(str(int(a)))
        self.wTree.get_widget("progressbar1").set_fraction(a/100)


      
if __name__ == "__main__":
    hwg = ProgressBar()
    gtk.main()
---------------------------------------------------
progressbar.glade
---------------------------------------------------
 <?xml version="1.0" encoding="UTF-8"?>
<glade-interface>
  <!-- interface-requires gtk+ 2.24 -->
  <!-- interface-naming-policy project-wide -->
  <widget class="GtkWindow" id="MainWindow">
    <property name="can_focus">False</property>
    <property name="title" translatable="yes">Progress Bar</property>
    <property name="default_width">250</property>
    <property name="default_height">80</property>
    <child>
      <widget class="GtkVBox" id="vbox1">
        <property name="visible">True</property>
        <property name="can_focus">False</property>
        <child>
          <widget class="GtkHScale" id="hscale1">
            <property name="visible">True</property>
            <property name="can_focus">True</property>
            <property name="adjustment">0 0 110 1 1 10</property>
            <property name="lower_stepper_sensitivity">off</property>
            <property name="upper_stepper_sensitivity">off</property>
            <property name="restrict_to_fill_level">False</property>
            <property name="round_digits">1</property>
            <property name="digits">0</property>
            <property name="draw_value">False</property>
            <signal name="change_value" handler="on_hscale1_change_value" swapped="no"/>
            <signal name="value_changed" handler="on_hscale1_value_changed" swapped="no"/>
          </widget>
          <packing>
            <property name="expand">True</property>
            <property name="fill">True</property>
            <property name="position">0</property>
          </packing>
        </child>
        <child>
          <widget class="GtkLabel" id="label1">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <property name="label" translatable="yes">0</property>
          </widget>
          <packing>
            <property name="expand">True</property>
            <property name="fill">True</property>
            <property name="position">1</property>
          </packing>
        </child>
        <child>
          <widget class="GtkProgressBar" id="progressbar1">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
          </widget>
          <packing>
            <property name="expand">True</property>
            <property name="fill">True</property>
            <property name="position">2</property>
          </packing>
        </child>
      </widget>
    </child>
  </widget>
</glade-interface>
---------------------------------------------------