Visualizzazione post con etichetta GTK. Mostra tutti i post
Visualizzazione post con etichetta GTK. Mostra tutti i post

sabato 1 gennaio 2022

UI per Golang

 Go non ha una UI di default. Si possono utilizzare dei bindings con GTK3 o delle UI native 



go mod init luca.innocenti.gtk3test

si caricano i moduli

go get github.com/gotk3/gotk3/glib

go get github.com/gotk3/gotk3/gtk

si apre quindi Glade per creare la pgina (una semplice textbox Entry nel linguaggio di GTK, una label ed un pulsante)

---- completo.glade -----------------------------------------

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.22.1 -->
<interface>
  <requires lib="gtk+" version="3.20"/>
  <object class="GtkWindow" id="main_window">
    <property name="can_focus">False</property>
    <child>
      <placeholder/>
    </child>
    <child>
      <object class="GtkBox">
        <property name="visible">True</property>
        <property name="can_focus">False</property>
        <property name="margin_top">4</property>
        <property name="margin_bottom">4</property>
        <property name="orientation">vertical</property>
        <child>
          <object class="GtkEntry" id="txt1">
            <property name="visible">True</property>
            <property name="can_focus">True</property>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">True</property>
            <property name="position">0</property>
          </packing>
        </child>
        <child>
          <object class="GtkLabel" id="lbl1">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <property name="label" translatable="yes">Etichetta</property>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">True</property>
            <property name="position">1</property>
          </packing>
        </child>
        <child>
          <object class="GtkButton" id="btn1">
            <property name="label" translatable="yes">Ok</property>
            <property name="visible">True</property>
            <property name="can_focus">True</property>
            <property name="receives_default">True</property>
            <property name="halign">center</property>
            <property name="valign">center</property>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">True</property>
            <property name="position">2</property>
          </packing>
        </child>
      </object>
    </child>
  </object>
</interface>

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

nel codice go si carica il file completo.glade

Si tratta di una piccola modifica del codice degli esempi che si trovano su GitHub 

Gli eventi possono essere creati (connessi) sia nel codice sia all;'interno dei segnali di Glade...in questo caso sono tutti contenuti nel codice applicazione. In ogni caso se si puo' associare in Glade un segnnale di nome "pressione" all'evento di click del pulsante

package main

import (
"errors"
"fmt"
"log"
"os"

"github.com/gotk3/gotk3/glib"
"github.com/gotk3/gotk3/gtk"
)

const appId = "com.github.gotk3.gotk3-examples.glade"

func main() {
// Create a new application.
application, err := gtk.ApplicationNew(appId, glib.APPLICATION_FLAGS_NONE)
errorCheck(err)

// Connect function to application startup event, this is not required.
application.Connect("startup", func() {
log.Println("application startup")
})

// Connect function to application activate event
application.Connect("activate", func() {
log.Println("application activate")

// Get the GtkBuilder UI definition in the glade file.
// builder, err := gtk.BuilderNewFromFile("ui/example.glade")
builder, err := gtk.BuilderNewFromFile("/home/luca/glade/completo.glade")
errorCheck(err)

obj, _ := builder.GetObject("txt1")
entry1 := obj.(*gtk.Entry)

obj2, _ := builder.GetObject("btn1")
button1 := obj2.(*gtk.Button)

obj3, _ := builder.GetObject("lbl1")
label1 := obj3.(*gtk.Label)

button1.Connect("clicked", func() {
text, err := entry1.GetText()
if err == nil {
label1.SetText(text)
}
})

// Map the handlers to callback functions, and connect the signals
// to the Builder.
signals := map[string]interface{}{
"on_main_window_destroy": onMainWindowDestroy,
//"pressione": clickedTestButton,
}
builder.ConnectSignals(signals)

// Get the object with the id of "main_window".
obj4, err := builder.GetObject("main_window")
errorCheck(err)

// Verify that the object is a pointer to a gtk.ApplicationWindow.
win, err := isWindow(obj4)
errorCheck(err)

// Show the Window and all of its components.
win.Show()
application.AddWindow(win)
})

// Connect function to application shutdown event, this is not required.
application.Connect("shutdown", func() {
log.Println("application shutdown")
})

// Connect function to application shutdown event, this is not required.
application.Connect("pressione", func() {
log.Println("pressione")
fmt.Println("pressione")
})

// Launch the application
os.Exit(application.Run(os.Args))
}

func isWindow(obj glib.IObject) (*gtk.Window, error) {
// Make type assertion (as per gtk.go).
if win, ok := obj.(*gtk.Window); ok {
return win, nil
}
return nil, errors.New("not a *gtk.Window")
}

func errorCheck(e error) {
if e != nil {
// panic for any errors.
log.Panic(e)
}
}

/*
func clickedTestButton() {
fmt.Println("Testclick")
//headerBar.SetTitle("New Title!!")
}*/

// onMainWindowDestory is the callback that is linked to the
// on_main_window_destroy handler. It is not required to map this,
// and is here to simply demo how to hook-up custom callbacks.
func onMainWindowDestroy() {
log.Println("onMainWindowDestroy")
}

per eseguire il programma 

go run -tags pango_1_42,gtk_3_22 .


con la libreria nativa il codice e' piu' pulito. L'unico problema e' che si tratta di una libreria dichiarata ancora in alpha e che non risulta aggiornata da due anni

package main

import (
"github.com/andlabs/ui"
)

func main() {
err := ui.Main(func() {
input := ui.NewEntry()
button := ui.NewButton("Ok")
greeting := ui.NewLabel("")
box := ui.NewVerticalBox()
box.Append(ui.NewLabel("Label"), false)
box.Append(input, false)
box.Append(button, false)
box.Append(greeting, false)
window := ui.NewWindow("UI", 200, 100, false)
window.SetMargined(true)
window.SetChild(box)
button.OnClicked(func(*ui.Button) {
greeting.SetText(input.Text())
})
window.OnClosing(func(*ui.Window) bool {
ui.Quit()
return true
})
window.Show()
})
if err != nil {
panic(err)
}
}


giovedì 24 gennaio 2013

Sviluppare in GTK su Linux e Windows

Per impostare un ambiente di sviluppo per GTK su Linux e Windows si devono seguire i seguenti passi:

Linux
Il metodo e' quantomai sbrigativo

apt-get install libgtk-3-dev
apt-get install anjuta



Windows
In questo caso la strada e'  un po piu' lunga
Si devono prima scaricare i file

gtk+-bundle_2.24.10-20120208_win32
codeblocks-12.11mingw-setup_user

che corrispondono alle librerie (Gtk) ed all'editor (Codeblocks)
L'editor si installa come un normale programma mentre il file zip delle gtk deve essere decompresso (per esempio su C:\gtk)
In conclusione si deve aggiungere alla Path la directory c:\gtk\bin

A questo punto si lancia l'editor, si crea un nuovo progetto Gtk e quando si arriva alla schermata sottostante si imposta la directory dove e' stato scompattato il pacchetto delle librerie



Si precisa che nella versione per Windows non e' disponibile l'editor visuale delle form in quanto manca Glade
Vi e' inoltre da precisare che la versione di Gtk su Debian Testing e' la 3 mentre su Windows e' la versione 2

sabato 8 settembre 2012

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

lunedì 3 settembre 2012

Compilare GTK in Code::Blocks in Debian

Come compilare GTK con Code::Blocks sotto Debian
(attenzione agli apici che sono inversi)

Compiler
-------------------------------------------------
`pkg-config –cflags gtk+-2.0 gmodule-export-2.0`
`pkg-config –cflags libglade-2.0`


Linker
--------------------------------------------------------------
`pkg-config –libs gtk+-2.0 gmodule-export-2.0`
`pkg-config –libs libglade-2.0`


altrimenti a linea di comando
gcc `pkg-config –cflags libglade-2.0 –libs gtk+-2.0` `pkg-config –libs gtk+-2.0 gmodule-export-2.0` main.c

lunedì 27 agosto 2012

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>

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

Esempio GUI con GTK in C

Per creare la GUi viene impiegata la libreria GTK senza l'impiego di Glade (ovvero in GUI Designer di GTK)

Impiegando Code::Block e scegliendo il progetto GTK non e' necessario impostare le flag del compilatore che vengono aggiunte in automatico dall'IDE per cui e' molto semplice giungere ad un eseguibile

Compilare l'esempio seguente con Eclipse e' decisamente piu' complicato

Una delle principali differenze rispetto a Qt risiede nel fatto che GTK e' completamente in C (ha una interfaccia in C++ ma solo come wrapper) per cui la gestione degli oggetti non esiste in modo tradizionale. Inoltre per aggiungere una azione ad un widget si usa signal connect

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

#include <stdlib.h>
#include <gtk/gtk.h>
#include <stdio.h>



GtkWidget *scale = NULL;
GtkWidget *label = NULL;
GtkWidget *progressbar= NULL;


static void cambia_valore (GtkWidget *wid, GtkWidget *win)
{
  gdouble current_value = gtk_range_get_value(GTK_RANGE(scale));

  char buffer [14] = { '\0' };
  sprintf ( buffer, "%.0f", current_value);

  gtk_label_set_text(label,buffer);
  gtk_progress_bar_set_fraction(progressbar,current_value/100);

}


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

  GtkWidget *win = NULL;
  GtkWidget *vbox = NULL;



  /* Initialize GTK+ */
  g_log_set_handler ("Gtk", G_LOG_LEVEL_WARNING, (GLogFunc) gtk_false, NULL);
  gtk_init (&argc, &argv);
  g_log_set_handler ("Gtk", G_LOG_LEVEL_WARNING, g_log_default_handler, NULL);

  /* Create the main window */
  win = gtk_window_new (GTK_WINDOW_TOPLEVEL);
  gtk_container_set_border_width (GTK_CONTAINER (win), 8);
  gtk_window_set_title (GTK_WINDOW (win), "Progress Bar");
  gtk_window_set_position (GTK_WINDOW (win), GTK_WIN_POS_CENTER);
  gtk_widget_realize (win);
  g_signal_connect (win, "destroy", gtk_main_quit, NULL);

  /* Create a vertical box with buttons */
  vbox = gtk_vbox_new (TRUE, 6);
  gtk_container_add (GTK_CONTAINER (win), vbox);

  scale = gtk_hscale_new_with_range(0,100,1);
  g_signal_connect (G_OBJECT (scale), "value_changed", G_CALLBACK (cambia_valore), (gpointer) win);
  gtk_box_pack_start (GTK_BOX (vbox), scale, TRUE, TRUE, 0);

  label = gtk_label_new("0");
  gtk_box_pack_start (GTK_BOX (vbox), label, TRUE, TRUE, 0);

  progressbar = gtk_progress_bar_new();
  gtk_box_pack_start (GTK_BOX (vbox), progressbar, TRUE, TRUE, 0);


  /* Enter the main loop */
  gtk_widget_show_all (win);
  gtk_main ();
  return 0;
}


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

nel caso di compilazione a mano si puo' invece da riga di comando indicare
gcc `pkg-config --cflags --libs gtk+-2.0` main.c -o programma

Debugger integrato ESP32S3

Aggiornamento In realta' il Jtag USB funziona anche sui moduli cinesi Il problema risiede  nell'ID USB della porta Jtag. Nel modulo...