Fare interfacce con GTK

 

Come fare una bella interfaccia in GTK magari per il vostro script Bash? Vediamo…

 

 

Occorre avere installato Gtkdialog (un grazie ad László Pere's); Inoltre occorre un certa conoscenza di XML o comunque XUL o HTML. Non è facile!

 

Volendo installatevi Glade.

 

Qui non pretendo di essere completo, ma solo proporre casi per fare semplici GUI per i vostri script Bash, ma la tecnica prevede anche di fare molto di più.

 

Grazie al sito che uso come guida:

https://www.tecmint.com/gtkdialog-create-graphical-interfaces-and-dialog-boxes/

https://pclosmag.com/html/Issues/200910/page21.html

https://pclosmag.com/html/Issues/201405/page15.html

https://pclosmag.com/html/Issues/201404/page12.html

http://blogs.czapski.id.au/tag/gtkdialog-bash-examples

 

Nota: Interfaccia grafica e GUI (Graphical Unit Interface) è la stessa cosa; Una Form è una GUI per introdurre dati o comunque fare una scelta. Un “window” è una GUI in forma di finestra secondo la Xerox.

 

 

 

 

Come fare una GUI

-Esempio avviso

 

Partiamo da una facile scritta (file chiamato myprogram):

 

#!/bin/bash

 

GTKDIALOG=gtkdialog

export MAIN_DIALOG='

 

<window title="My First Program" icon-name="gtk-about" resizable="true" width-request="300" height-request="30">

 

<vbox>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <hbox space-fill="true" space-expand="true">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <button>  ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <label>Welcome to TecMint.com Home!</label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <action>echo "Welcome to TecMint.com Home!"</action>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </button>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </hbox>

</vbox>

</window>

'

 

case $1 in

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ -d | --dump) echo "$MAIN_DIALOG" ;;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ *) $GTKDIALOG --program=MAIN_DIALOG --center ;;

 

esac

 

 

Vediamo subito che per prima cosa importiamo in una variabile Bash il Gtkdialog con:

GTKDIALOG=gtkdialog

 

Per aprire la finestra immettiamo:

export MAIN_DIALOG='

 

 

Notate che termina con l’accento questo per definire che non è finito e finisce solo con l’ultimo accento.

 

Qui è la vera e propria finestra:

 

<window title="My First Program" icon-name="gtk-about" resizable="true" width-request="300" height-request="310">

 

Qui si dice che il nome del programma che appare sulla finestra è “My First Program” che deve usare per la finestra l’icona (standard) "gtk-about", che la grandezza della finestra è modificabile (resizable="true") e che la gradezza di base della finestra è width-request="300" height-request="310".

 

Come vedete lui segue le specifiche XML e copia quelle XUL. Quindi come in HTML dovete seguere le stesse regole che un TAG deve essere chiuso e che quello che comprende un TAG è sotto l’influenza del TAG stesso.

 

<vbox>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <hbox space-fill="true" space-expand="true">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <button>  ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <label>Welcome to TecMint</label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <action>echo "Welcome to TecMint.com Home!"</action>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </button>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </hbox>

</vbox>

</window>

'

 

Il resto è facile da comprendere solo notate l’accento finale (ultima riga) che serve per chiudere la stringa. Da qui ricomincia il linguaggio Bash.

 

case $1 in

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ -d | --dump) echo "$MAIN_DIALOG" ;;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ *) $GTKDIALOG --program=MAIN_DIALOG --center ;;

 

esac

 

 

questo è un semplice costrutto case in cui controlliamo la variabile $MAIN_DIALOG che abbiamo riempito prima. Questo permette di controllare che sia piena e non richiamata (il perché lo capirete molto dopo)

Il vero pezzo che viene eseguito è questo:

$GTKDIALOG --program=MAIN_DIALOG --center ;;

 

Nota: L’opzione “--center” fa apparire la GUI al centro schermo.

Qui semplicemente eseguiamo GTKDIALOG passando lo schema racchiuso in ​​ MAIN_DIALOG.

Per farlo funzionare questo script, logicamente salvatelo e settate i permessi ed eseguitelo come l’esempio:

chmod 755 myprogram

./myprogram

 

Noterete che la scritta è in un bottone che premuto non fa nulla. Ma nel terminale vedete che:

Vi scrive “Welcome to TecMint.com Home!” ogni volta che è premuto il bottone che poi è il TAG Action che lo comanda di fare con un bel comando “echo”.

 ​​​​ <action>echo "Welcome to TecMint.com Home!"</action>

 

Nota: Il “EXIT=”abort” ” appare solo se interrompete la GUI.

Da qui capirete già quanto sono stati SCEMI quelli di Mozilla / Firefox ad abbandonare XUL che era simile, le potenzialità di GUI qui sono espresse al massimo! Potevano fare un XUL2 che ricopiava la GTK3, invece di adattare il HTML5 che è fortemente limitato.

 

-Esempio passaggio parametri

--Output

Se voi sostituite la striga in “action” con

 ​​​​ <action>scelta='1'</action>

ed aggiungete alla fine dello script

echo $scelta

 

Avrete una bella sorpresa!!! Non esiste verso di far vedere la variabile settata dentro lo script GTK allo script chiamante Bash neanche con “export”. Neanche il comando “exit” permette di uscire dalla GUI e quindi trasferire un valore all’esterno.

L’unico modo per vedere una variabile all’esterno è scriverlo dentro un file che poi all’uscita di GTK, il resto del Bash potrà leggere; Oppure gestire parte dello script all’interno.

Oppure intercettare l’uscita. Come da esempio

case ${1} in

 ​​ ​​ ​​​​ -d | --dump) cat ${MAIN_DIALOG_FILE} ;;

 ​​ ​​ ​​​​ *) RESULTS=$(gtkdialog --center --file=${MAIN_DIALOG_FILE}) ;;

esac

 

Ma dopo dovete gestirla come file...

Esempio:

cat <<-'EOSCRIPT' > /tmp/ex03.sh

 

#!/bin/bash

 

MAIN_DIALOG_FILE=${0}.gtkd

cat <<-'EOUIDFEINITION' > ${MAIN_DIALOG_FILE}

<window>

 ​​​​ <vbox>

 ​​ ​​ ​​​​ <text>

 ​​ ​​ ​​ ​​ ​​​​ <label>I am a window.</label>

 ​​ ​​ ​​ ​​ ​​​​ <variable>vLabelVariable</variable>

 ​​ ​​ ​​​​ </text>

 ​​ ​​ ​​​​ <button ok></button>

 ​​ ​​ ​​​​ <button cancel></button>

 ​​​​ </vbox>

</window>

EOUIDFEINITION

 

case ${1} in

 ​​ ​​ ​​​​ -d | --dump) cat ${MAIN_DIALOG_FILE} ;;

 ​​ ​​ ​​​​ *) RESULTS=$(gtkdialog --center --file=${MAIN_DIALOG_FILE}) ;;

esac

 

I=$IFS; IFS=""

for STATEMENTS in "${RESULTS}"; do

 ​​​​ echo 'STATEMENTS:-->>'"${STATEMENTS}"'<<--'

 ​​​​ eval $STATEMENTS

done

IFS=$I

 

if [[ "$EXIT" = "OK" ]]; then

 ​​​​ echo "You clicked OK with vLabelVariable containing '${vLabelVariable}'"

else

 ​​​​ echo "You pressed the Cancel button."

fi

 

# rm -f ${MAIN_DIALOG_FILE}

EOSCRIPT

 

/tmp/ex03.sh

 

Notate che all’inizio voi create un file temporaneo:

cat <<-'EOSCRIPT' > /tmp/ex03.sh

 

In questo modo scriverete il seguito sul file:

MAIN_DIALOG_FILE=${0}.gtkd

cat <<-'EOUIDFEINITION' > ${MAIN_DIALOG_FILE}

 

Notate che Gtkdialog chiama il file “ --file=${MAIN_DIALOG_FILE}”, in “RESULTS” ritorneranno i valori.

*) RESULTS=$(gtkdialog --center --file=${MAIN_DIALOG_FILE}) ;;

 

Nota: Volendo potete fare due file, uno dello script di bash e uno del MAIN_DIALOG_FILE ma poi come potete creare lo script con dentro le vostre impostazioni?

Adesso potete leggere il output della GUI in ​​ STATEMENTS che pesca in RESULTS.

--Input

Invece per passare variabili all’interno:

scriptName=ex13

touch /tmp/${scriptName}.sh

chmod ug+x /tmp/${scriptName}.sh

 

cat <<-'EOSCRIPT' > /tmp/${scriptName}.sh

#!/bin/bash

 

GTKDIALOG=gtkdialog

 

fnEchoDateTime() {

echo "$(date)"

}

export -f fnEchoDateTime

 

GTK_WIN_POS_NONE=0

GTK_WIN_POS_CENTER=1

GTK_WIN_POS_MOUSE=2

 

# qui inizia la GUI

MAIN_DIALOG_FILE=${0}.gtkd

cat <<-EOUIDFEINITION > ${MAIN_DIALOG_FILE}

<window

 ​​ ​​ ​​​​ title="My First Window"

 ​​ ​​ ​​​​ window-position="${GTK_WIN_POS_CENTER}"

 ​​ ​​ ​​​​ default-width="400">

 ​​ ​​ ​​​​ <vbox>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <frame  ​​​​ Description ​​ >

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <text label="This is an example window."></text>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </frame>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <hbox>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <button use-underline="true" tooltip-text="Refresh window variable - update date in window title">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <label> _Refresh </label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <input file icon="gtk-refresh"></input>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <width>16</width>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <action function="refresh">vWindow</action>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </button>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <button ok></button>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <button cancel></button>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </hbox>

 ​​ ​​ ​​​​ </vbox>

 

 ​​ ​​ ​​​​ <variable>vWindow</variable>

 ​​ ​​ ​​​​ <input>fnEchoDateTime</input>

 

 ​​ ​​ ​​​​ <action this-is-window="escape" signal="key-press-event" condition="command_is_true( [[ \$KEY_RAW = 0x9 ]] && echo true )">EXIT:exit</action>

 

</window>

EOUIDFEINITION

 

case ${1} in

 ​​ ​​ ​​​​ -d | --dump) cat ${MAIN_DIALOG_FILE} ;;

 ​​ ​​ ​​​​ *) gtkdialog --center --file=${MAIN_DIALOG_FILE} ;;

esac

 

rm -f ${MAIN_DIALOG_FILE}

EOSCRIPT

 

/tmp/${scriptName}.sh

 

--Lista oggetti gerarchici:

 

-Esempio Solo testo

Esegue il comando tail sui messaggi di dmesg.

#!/bin/bash

export MY_DIALOG='

<vbox width-request="300">

 ​​​​ <text>

 ​​ ​​ ​​ ​​ ​​​​ <variable>MSG</variable>

 ​​ ​​ ​​ ​​ ​​​​ <input>dmesg | tail</input>

 ​​​​ </text>

 ​​​​ <hbox>

 ​​ ​​ ​​ ​​ ​​​​ <button>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <label>Refresh</label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <action>refresh:MSG</action>

 ​​ ​​ ​​ ​​ ​​​​ </button>

 ​​ ​​ ​​ ​​ ​​​​ <button>  ​​ ​​​​ 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <label>Done</label>

 ​​ ​​ ​​ ​​ ​​​​ </button>

 ​​​​ </hbox>

</vbox>'

gtkdialog --program=MY_DIALOG

 

Il TAG “window” possiede il refresh (auto-refresh=true If a file is specified as the value of the window’s <input file>xxxx</input> directive) automatico. Qui non è usato per far vedere come far interagire il bottone “Refresh” tramite la variabile MSG e quindi ogni volta premuto quel bottone si esegue un refresh nel “text”.

GUI con più Tab.

 

#!/bin/bash

GTKDIALOG=gtkdialog

export MAIN_DIALOG='

 

<window title="My Second Program" icon-name="gtk-about" resizable="true" width-request="250" height-request="150">

<notebook tab-label="First | Second|">

<vbox>

<hbox space-fill="true">

  <combobox>

   <variable>myitem</variable>

   <item>First One</item>

   <item>Second One</item>

   <item>Third One</item>

  </combobox>

</hbox>

<hbox>

  <button>

   <label>Click Me</label>

   <action>echo "You choosed $myitem"</action>

  </button>

</hbox>

<hseparator width-request="240"></hseparator>

<hbox>

  <button ok></button>

</hbox>

</vbox>

 

<vbox>

<hbox space-fill="true">

  <text>

  <label>Spinbutton </label>

  </text>

</hbox>

<hbox space-fill="true" space-expand="true">

  <spinbutton range-min="0" range-max="100" range-value="4">

   <variable>myscale</variable>

   <action>echo $myscale</action>

  </spinbutton>

</hbox>

<hbox>

  <button ok></button>

</hbox>

 

</vbox>

</notebook>

</window>

'

 

case $1 in

-d | --dump) echo "$MAIN_DIALOG" ;;

*) $GTKDIALOG --program=MAIN_DIALOG --center ;;

 

esac

 

Notare il bottone “<button ok></button>” che permette di uscire.

 

Bottoni

--Con più bottoni:

#!/bin/bash

GTKDIALOG=gtkdialog

export MAIN_DIALOG='

<frame>

<hbox>

 ​​​​ <button></button>

 ​​​​ <text></text>

 ​​​​ <button></button>

</hbox>

</frame>

'

$GTKDIALOG --program=MAIN_DIALOG --center

 

Si possono mettere più elementi in un hbox. Per didattica non metto il TAG window, serve solo per definire le caratteristiche della finestra.

Ricordatevi di introdurre del testo o almeno uno spazio bianco altrimenti lo segnala (la scritta “text”) nella GUI e per il bottone “ok”.

Esistono bottoni predefiniti:

  • <button yes></button>

  • <button no></button>

  • <button ok></button>

  • <button cancel></button>

  • <button help></button>

 

--Se volete un Bottone che fa una azione:

<window>

<vbox>

 ​​​​ <button>

 ​​ ​​ ​​​​ <label>Lancio Kate</label>

 ​​ ​​ ​​​​ <action>kate</action>

 ​​​​ </button>

</vbox>

</window>

 

--Non volete una scritta ma una immagine?

<button>

<input file>/usr/share/pixmaps/VBox.png</input>

<action>kate</action>

</button>

 

--Immagine e scritta?

<button>

<input file>/usr/share/pixmaps/VBox.png</input>

<label>Virtual Box</label>

<action>kate</action>

</button>

--Multi immagine bottoni collegati (switch)

#! /bin/bash

export MAIN_DIALOG='

<vbox>

 ​​ ​​ ​​​​ <button image-position="2">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <input file>writer.png</input>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <height>100</height>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <width>70</width>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <label>Write

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <variable>"wp"</variable>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <sensitive>"false"</sensitive>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <action type="enable">ss</action>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <action type="disable">wp</action>

 ​​ ​​ ​​​​ </button></font>

 ​​ ​​ ​​​​ <button image-position="2"></font>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <input file>calc.png</input>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <label>calc</label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <variable>"ss"</variable>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <sensitive>"true"</sensitive>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <action type="enable">wp</action>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <action type="disable">ss</action>

 ​​ ​​ ​​​​ </button></font>  ​​ ​​​​ 

</vbox>'</font>

​​ gtkdialog --program MAIN_DIALOG

-Bottone tipo Menu

Tipo menu

#!/bin/sh

 

# 2button_icon_actiones

# simple example for Porteus

 

export MAIN_DIALOG='

<vbox>

 ​​​​ <hbox>  ​​ ​​​​ 

 ​​ ​​ ​​​​ 

 ​​ ​​ ​​​​ <button>

 ​​ ​​ ​​ ​​ ​​​​ <input file icon="gnome-mplayer"></input>

 ​​ ​​ ​​ ​​ ​​​​ <label>media player</label>

 ​​ ​​ ​​ ​​ ​​​​ <action>gnome-mplayer</action>

 ​​ ​​ ​​​​ </button>  ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 

 ​​ ​​ ​​​​ 

 ​​ ​​ ​​​​ <button>

 ​​ ​​ ​​ ​​​​ <input file icon="xarchiver"></input>

 ​​ ​​ ​​ ​​​​ <label>compression tool</label>

 ​​ ​​ ​​ ​​​​ <action>xarchiver</action>

 ​​ ​​​​ </button>  ​​​​ 

 ​​ ​​​​ 

 ​​​​ </hbox>

</vbox>

'

 

gtkdialog --program=MAIN_DIALOG

 

Menu

Creare il menu sopra.

La schema in ​​ MAIN_DIALOG:

<hbox>

<pixmap>

 ​​​​ <input file>path_to_file</input>

</pixmap>

<menubar>

 ​​​​ <menu>

 ​​ ​​ ​​​​ <menuitem>

 ​​ ​​ ​​ ​​ ​​​​ <label></label>

 ​​ ​​ ​​ ​​ ​​​​ <action></action>

 ​​ ​​ ​​​​ </menuitem>

 ​​ ​​ ​​​​ <label></label>

 ​​​​ </menu>

</menubar>

</hbox>

 

“path_to_file” è il path vero dell’immagine che si vuole.

Esempio:

#!/bin/bash

 

GTKDIALOG=gtkdialog

export MAIN_DIALOG='

 

<window title="My First Program" icon-name="gtk-about" resizable="true" width-request="300" height-request="130">

<vbox>

 ​​ ​​ ​​​​ <hbox>

 ​​ ​​ ​​ ​​ ​​ ​​​​ <menubar>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <menu>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <menuitem>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <label>Apri</label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <action>echo</action>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </menuitem>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <label>File</label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </menu>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <menu>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <menuitem>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <label>Annulla</label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <action>echo</action>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </menuitem>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <label>Modifica</label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </menu>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <menu>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <menuitem>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <label>Apri Visualizza</label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <action>echo</action>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </menuitem>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <label>Visualizza</label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </menu>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <menu>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <menuitem>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <label>Help1</label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <action>echo</action>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </menuitem><menuitem> ​​ 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <label>Help2</label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <action>echo</action>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </menuitem><menuitem>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <label>help3</label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <action>echo</action>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </menuitem>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <label>Help</label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </menu>

 ​​ ​​ ​​ ​​ ​​ ​​​​ </menubar>

 ​​ ​​ ​​​​ </hbox>

 ​​ ​​ ​​​​ <hbox space-fill="true" space-expand="true">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <button>  ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <label>Welcome to TecMint.com Home!</label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <action>echo '1'</action>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </button>

 ​​ ​​ ​​​​ </hbox>

</vbox>

</window>

'

 ​​ ​​ ​​ ​​ ​​ ​​​​ scelta= ​​ $GTKDIALOG --program=MAIN_DIALOG --center

Progressbar

Esempio gestione di Progresskbar

https://github.com/Pinperepette/gtkdialog/blob/master/examples/progressbar/progressbar

#!/bin/sh

GTKDIALOG=gtkdialog

MAIN_DIALOG='

<window>

 <vbox>

  <frame Progress>

   <text>

    <label>Some text describing what is happening.</label>

   </text>

   <progressbar>

    <label>Some Text</label>

    <input>for i in $(seq 0 10 100); do echo $i; sleep 0.3; done;</input>

    <action function="exit">Ready</action>

   </progressbar>

  </frame>

  <hbox>

   <button cancel></button>

  </hbox>

 </vbox>

</window>

'

export MAIN_DIALOG

case $1 in

 -d | --dump) echo "$MAIN_DIALOG" ;;

 *) $GTKDIALOG --program=MAIN_DIALOG ;;

esac

 

Fare una Taskbar

La Taskbar ovvero i programmi che si trovano vicino all’orologio di sistema, come il volume, rete, ecc..

In questo caso basta dare dei parametri alla finestra ovvero al TAG windows, il skip-taskbar-hint che se è settato come “false”. Va messo sempre l’icona con icon-name settato o con un nome-alias (vedere il manuale per sapere che icone compaiono di base) oppure con il percorso e nome dell’icona (meglio PNG o JPG).

Esempio:

​​ <window title="" skip-taskbar-hint="true" icon-name="gtk-about" resizable="false" width-request="30" height-request="300" >

 

Aggiungere CSS

Il CSS sono i fogli di stile, ovvero potete colorare e abbellire in vari modi usando il CSS come accade in HTML. Ovvio deve rispettare le regole GTK.

Per aggiungere CSS

## Create a custom GTK+ 2 style for specific widgets.

funcgtkrcCreate() {

IMAGEFILE="`find /usr/share/pixmaps -maxdepth 1 -type f | head -1`"

 

echo '

​​ style "styleBgGreen" {

bg[NORMAL] = "#00a000"

​​ }

​​ style "styleBgBlue" {

bg[NORMAL] = "#0000a0"

​​ }

​​ pixmap_path "'"`dirname $IMAGEFILE`"'"

​​ style "styleBgPixmap" {

bg_pixmap[NORMAL] = "'"`basename $IMAGEFILE`"'"

​​ }

​​ widget "*BgGreen" style "styleBgGreen"

​​ widget "*BgBlue" style "styleBgBlue"

​​ widget "*BgPixmap" style "styleBgPixmap"

' > "$TMPDIR"/.gtkrc-2.0

 

GTK2_RC_FILES="$TMPDIR"/.gtkrc-2.0:~/.gtkrc-2.0

export GTK2_RC_FILES

}

 

Qui vediamo anche che possiamo passare variabili come ​​ IMAGEFILE che automaticamente si converte nel path+nome verso l’immagine da usare. Il tutto verso la fine (ultime tre righe) viene registrato come file alla fine.

Come in HTML gli attributi di stile si applicano al nome, qui un esempio:

<eventbox name="BgGreen" above-child="false" visible-window="true">

 

Pensa poi lui ad integrare i due file in

$GTKDIALOG --space-expand=true --space-fill=true --program=MAIN_DIALOG $EXTRA_ARGS

 

Esempio completo qui:

https://github.com/01micko/gtkdialog/blob/master/examples/eventbox/eventbox

Se non vi piace il CSS in un file, potete ricorrere al semplicemente alla dichiarazione diretta in XML come in HTML.

<label>"<span fgcolor='"'black'"' bgcolor='"'white'"'> Text from command </span>"</label>

 

Usare Glade

Glade è un programma per fare interfacce in GTK3, una volta in GTK2. Quindi attenzione che formato crea!!!

Potete fare l’interfaccia e poi copiarla nello script.

Ricordarsi che per lanciarla abbisogna di questi parametri

gtkdialog --glade-xml=toolbar1

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ --program=window1

 

esempio:

<?xml version="1.0"?>

<glade-interface>

 ​​​​ <widget class="GtkWindow" id="window1">

 ​​ ​​ ​​​​ <property name="resizable">False</property>

 ​​ ​​ ​​​​ <property name="modal">True</property>

 ​​ ​​ ​​​​ <property name="window_position">GTK_WIN_POS_CENTER</property>

 ​​ ​​ ​​​​ <property name="decorated">False</property>

 ​​ ​​ ​​​​ <child>

 ​​ ​​ ​​ ​​ ​​​​ <widget class="GtkToolbar" id="toolbar1">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <property name="visible">True</property>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <property name="toolbar_style">GTK_TOOLBAR_BOTH</property>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <property name="show_arrow">False</property>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <property name="icon_e_size">GTK_ICON_SIZE_SMALL_TOOLBAR</property>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <child>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <widget class="GtkToolButton" id="toolbutton1">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <property name="visible">True</property>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <property name="label" translatable="yes">Spegni</property>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <property name="stock_id">gtk-stop</property>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <signal name="clicked" handler="halt"/>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </widget>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <packing>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <property name="homogeneous">True</property>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </packing>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </child>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <child>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <widget class="GtkToolButton" id="toolbutton2">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <property name="visible">True</property>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <property name="label" translatable="yes">Riavvia</property>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <property name="stock_id">gtk-refresh</property>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <signal name="clicked" handler="reboot"/>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </widget>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <packing>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <property name="homogeneous">True</property>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </packing>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </child>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <child>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <widget class="GtkToolButton" id="toolbutton3">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <property name="visible">True</property>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <property name="label" translatable="yes">Pm-suspen</property>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <property name="stock_id">gtk-close</property>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <signal name="clicked" handler="pm-suspend"/>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </widget>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <packing>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <property name="homogeneous">True</property>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </packing>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </child>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <child>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <widget class="GtkToolButton" id="toolbutton4">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <property name="visible">True</property>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <property name="stock_id">gtk-quit</property>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <signal name="clicked" handler="exit:normal"/>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </widget>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <packing>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <property name="homogeneous">True</property>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </packing>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </child>

 ​​ ​​ ​​ ​​ ​​​​ </widget>

 ​​ ​​ ​​​​ </child>

 ​​​​ </widget>

</glade-interface>

 

Errori

Se si presenta:

​​ “interprete errato: File o directory non esistente”

vuol dire che nel vostro script sono inseriti caratteri strani. Il modo più veloce per risolvere è dire all’editor di salvare in UTF8 oppure (meglio) di salvare in stile UNIX (CR e non CR+LF).

Per il resto è molto rognoso quindi controllate tutta la punteggiatura.

 

Manuali



http://code.google.com/p/gtkdialog/

Ufficiale
http://xpt.sourceforge.net/techdocs/lan ... es/single/

here are "officialy tested on Porteus examples" with color highlighting and new images
http://puppy2.org/slaxer/Porteus/Gtkdia ... color.html

The best tips and getting started by zigbert
http://www.murga-linux.com/puppy/viewtopic.php?t=38608

Excellent tech side of gtkdialog by thunor
http://www.murga-linux.com/puppy/viewto ... 88&start=2

Esempi

http://blogs.czapski.id.au/tag/gtkdialog-bash-examples

https://github.com/01micko/gtkdialog/tree/master/examples

 

Conclusioni

Qui voi veramente programmate una interfaccia grafica, una GUI nel vero senso della parola, logico che al minimo errore non funzioni più.

Avete però per il vostro Bash una Form completa, bella, professionale, finalmente adattabile come volete voi. Del resto è il sistema che usa chi programma anche se in altra forma.

Non dovete scendere al compromesso come altri sistemi come Yad, Kdialog, ecc..

​​ Vorrei dire di più ma qui conviene comperarvi un libro dedicato!

Ciaooooooooooooooooooooooooooooooooo

Precedente Trucchi KDE5 e Opensuse Successivo Fare script in SUSE