Puppy Linux Discussion Forum Forum Index Puppy Linux Discussion Forum
Puppy HOME page : puppylinux.com
"THE" alternative forum : puppylinux.info
 
 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

The time now is Thu 30 Oct 2014, 08:22
All times are UTC - 4
 Forum index » House Training » Users ( For the regulars ) » Usuarios de habla Hispana
Creando interfaces en GtkDialog
Moderators: rarsa
Post new topic   Reply to topic View previous topic :: View next topic
Page 1 of 4 [50 Posts]   Goto page: 1, 2, 3, 4 Next
Author Message
nilsonmorales


Joined: 15 Apr 2011
Posts: 508
Location: El salvador

PostPosted: Thu 12 Jun 2014, 04:19    Post subject:  Creando interfaces en GtkDialog
Subject description: Por donde comenzar
 

Poco o nada de información se encuentra sobre Gtkdialog en español googleando, y muchos seguramente se han preguntado como hacer esas "ventanitas" o interfaces de las aplicaciones o como es que un script cobra vida dando click sobre él.
Les aclaro que no conozco mucho sobre lenguajes de programación, asi que explicaré este tutorial de una manera mecanizada de manera que puedan dar sus primeros pasos escribiendo codigo y despertando las neuronas ( que en mi caso vaya si estaban dormidas ), quien quita y esto despierta el interes a otros lenguajes y se vuelven expertos en la materia.
Bueno empezemos.

1- Preparando el terreno
Lo primero es crear un archivo en texto plano donde van a escribir el código o simplemente dando click derecho desde rox>>nuevo>>script no importa la forma como lo hagan.

luego abren en algun editor de texto el script (geany, nano, sublime text lo que sea ) y veran una única linea
Code:
#!/bin/sh

Esta linea significa que el interprete de comandos que vamos a utilizar es lo que se conoce como bash eso explicado en mis palabras wikipedia puede servir si tienes mas dudas.

2- La base para usar gtkdialog
ahora esto es mandatorio para construir una interfaz que pueda ser interpretada por bash en gtkdialog escribimos lo siguiente
Code:
#!/bin/sh
export MAIN_DIALOG='
'
gtkdialog --program=MAIN_DIALOG

En el cual el cuerpo de la interfaz deberá quedar entre los 2 apóstrofos o comillas, segun el pais donde nacieron asi son conocidos, pero veamos el codigo completo y luego detallamos.
Code:
#!/bin/sh
export MAIN_DIALOG='
<window title="Titulo de la ventana principal">
  <vbox>
   <frame Este es el titulo del cuadro 1>
     <vbox>
        <button>
          <input file>/usr/share/icons/display.png</input><height>40</height><width>70</width>
           <label>Nombre del icono </label>
        </button>
              <text><label>En sentido vertical</label></text>
     </vbox>
   </frame>
 <frame Este es el titulo del cuadro 2>
   <hbox>
          <button>
          <input file>/usr/share/icons/display.png</input><height>40</height><width>70</width>
           <label>Nombre del icono </label>
        </button>
      <text><label>En sentido horizontal</label></text>
   </hbox>
 </frame>
   </vbox>         
  </window> 
'
gtkdialog --program=MAIN_DIALOG

Es en este punto que uno se pregunta que son todas esas llaves y palabras bueno cualquiera con un poco de ingles o un buen diccionario puede saber que significa cada una
window=ventana
label=viñeta
title=titulo
button=boton
y otra abreviadas como
vbox y hbox =caja horizontal, caja vertical

Si observas el script veras que el cuerpo de la interfaz se va dividiendo en muchas formas como cajas, ventanas, cuadros etc y que si inicias una de estas deberas terminarlas ejemplo:
Code:
<button></button>

Estas dos ordenes cerrarían la llave y el interprete entendería que estamos creando un botón simple en la interfaz, pero veamos que hace todo el codigo.

Se puede apreciar como disponiendo de las ordenes correctas la interaz hace lo que quieremos pero el ejercicio que realmente importa es como te imaginas el codigo cuando ves la interfaz y viceversa, eso te ayudará a crear e imaginar en tu mente antes de empezar a escribir el código.
Revisemos esto.



Como puedes ver la diferencia entre vbox y hbox es que las disposiciones de lo que vayas agregando sucesivamente irá colocandose en la forma deseada ya sea horizontal en linea o vertical de arriba hacia abajo, y que dentro de estas puedes seguir agregando tantos elementos como deseen, aqui la comparación de esa imágen.



Esto demuestra que crear una interfaz es mas simple de lo que muchos pensamos, claro que existen una buena cantidad de ordenes, acciones, atributos, variables, funciones extras que se pueden usar ademas de las que explique, pero que como una introducción a gtkdialog esto les será de utilidad.

Si me equivoco en algun concepto por favor me corrigen o aportan más información al respecto

Mi intención no es enseñarte, solo documentar lo que voy aprendiendo, ya que tengo poca memoria y luego me olvido de todo.

_________________
My blog


Back to top
View user's profile Send private message MSN Messenger 
mister_electronico


Joined: 20 Jan 2008
Posts: 663
Location: Asturias_ España

PostPosted: Thu 03 Jul 2014, 08:07    Post subject: Muy Interesante.  

Muy interesante Gtkdialog, yo proponi abrir este tema hace mucho tiempo y poner los programas en español.

Pero como todo no prospero... para la semana que viene pondre unos inicios si se une mas gente bien...

Sino pues nada...


Saludos... Nilson.
Back to top
View user's profile Send private message Yahoo Messenger 
josejp2424

Joined: 01 Aug 2010
Posts: 224

PostPosted: Thu 03 Jul 2014, 08:14    Post subject: gtkdialog  

yo me unire junto a mister electronico, gracias nilson
Back to top
View user's profile Send private message Visit poster's website 
josejp2424

Joined: 01 Aug 2010
Posts: 224

PostPosted: Sun 06 Jul 2014, 12:38    Post subject: boton transparente  

me gusta el boton frame como te quedo.
Back to top
View user's profile Send private message Visit poster's website 
mister_electronico


Joined: 20 Jan 2008
Posts: 663
Location: Asturias_ España

PostPosted: Sat 26 Jul 2014, 07:57    Post subject: continuando con GtkDialog  

Bueno antes de continuar comentar para los que comienzan que cuando copiamos el programa y lo pegamos en un fichero de texto, si se nos ejecutan es por que no tiene propiedades de ejecucion.

Si desde el terminal ejecutamos chmod 777 script.sh le damos todos los privilegios.

Tambien podemos hacerlo picando con el raton en el directorio Rox donde queremos crear el script con el boton derecho.

y seleccionamos New>Script o Nuevo>Script y esto nos creara un archivo con la propiedad de ejecucion.
Back to top
View user's profile Send private message Yahoo Messenger 
mister_electronico


Joined: 20 Jan 2008
Posts: 663
Location: Asturias_ España

PostPosted: Sat 26 Jul 2014, 08:23    Post subject: Continuando con GTkDialog.  

Continuando en la linea de Nilson con los botones, le dare propiedad de ejecutar programas. Ver el siguiente codigo:

Code:

#!/bin/sh
export MAIN_DIALOG='
<window title="Titulo de la ventana principal" width-request="320" height-request="460" resizable="false">
  <vbox>
   <frame abiword>
     <vbox>
        <button>
          <input file>/usr/local/lib/X11/mini-icons/abiword_16.xpm</input><height>40</height><width>70</width>
           <label>Abiword</label>
           <action>abiword</action>
        </button>
     </vbox>
   </frame>
      <frame Pintar>
     <vbox>
        <button>
          <input file>/usr/local/lib/X11/mini-icons/mini-Graphic-paint.xpm</input><height>40</height><width>70</width>
           <label>Mtpaint </label>
           <action>mtpaint</action>           
        </button>
     </vbox>
   </frame>
   <frame Calculadora>
        <text><label>"      "</label></text>
        <text><label>"      "</label></text>   
      <hbox>
        <button>
          <input file>/usr/share/pixmaps/galculator.png</input><height>40</height><width>70</width>
           <label>Calculadora </label>
           <action>galculator</action>           
        </button>
        <text><label>"      "</label></text> 
      </hbox>
              <text><label>"      "</label></text>
              <text><label>"      "</label></text>   
      <hbox>
        <text><label>"      "</label></text>       
        <button ok></button>
      </hbox>     
     
   </frame>   
   </vbox>         
  </window>
'
gtkdialog --program=MAIN_DIALOG


Primero

El la linea de creaccion de ventana:

<window title="Titulo de la ventana principal" width-request="320" height-request="460" resizable="false">


Podemos ver que podemos hacer que se nos abra la ventana con un ancho y alto como nosotros queramos en este caso 320x460 y ademas le podemos dar la propieda resizable esto es que el operario pueda o no pueda agrandar la ventana. en este caso no puede por tener false pero si se le pone true si podria.


Segundo
A cada boton le podemos decir una accion a realizar o varios, dependiendo del numero de "action" que pongamos. En el caso del primer boton decimos que ejecute el programa abiword.

<action>abiword</action>


Y asi a los otros que ejecuten el programa mtpaint y al otro calculadora.

Lo mismo con input file se le asigna el icono.

Tercero
Por ultimo ver el uso de las lineas :

<text><label>" "</label></text>

Que no tiene ninguna utilidad salvo el echo de que nos pueden dejar los botones en posiciones donde nosotros queremos dentro de la ventana.

Asi las dos lineas text echan el boton de Calculadora dos posiciones hacia abajo.

La tercera lo coloca hacia la derecha.

y la cuarta y quinta da una separacion entre el boton de Calculadora y el de Ok.

en el codigo :

Code:

      </hbox>
              <text><label>"      "</label></text>
              <text><label>"      "</label></text>   
      <hbox>


Puede que no sea muy apropiado pero bueno en alguno momento puede servir para cuadrar nuestro formulario donde queremos.
Back to top
View user's profile Send private message Yahoo Messenger 
mister_electronico


Joined: 20 Jan 2008
Posts: 663
Location: Asturias_ España

PostPosted: Sat 26 Jul 2014, 08:30    Post subject: continuando con GtkDialog  

Comentar que en el script anterior, cuando pulsamos un boton y se ejecuta una accion como en el caso del primero:

<action>abiword</action>

Esto nos abre el programa de procesador de textos abiword, pero nos deja bloqueado el formulario principal.

Esto es por que el programa salta a la ejecucion de abiword y hasta que no se cierre este no puede continuar con la ejecucion del script.


Si desearamos que esto no fuera asi y que se ejecutaran los programas independientemente sin que se bloqueara nuestra ventana de script, lo que tenemos que hacer es ejecutarlos en segundo plano.

Para ello ponemos el simbolo " & " detras de cada accion.

<action>abiword &</action>

Y listo los botones ejecutaran los programas independientemente.
Back to top
View user's profile Send private message Yahoo Messenger 
mister_electronico


Joined: 20 Jan 2008
Posts: 663
Location: Asturias_ España

PostPosted: Sat 26 Jul 2014, 10:06    Post subject: Uso de svg con botones y mas...  

Bueno esto no es para el comienzo de iniciacion a Gtkdialog por que va mas alla, pero bueno esta bien para dar una idea de lo que puede venir.

Podemos usar svg para hacer nuestros botones y hacerlos mas atractivos lo mismo que para botones se puenden usar en otros modulos usados en gtkdialog y hacerlo mas actractivos.

Un breve introductorio de svg

http://es.wikipedia.org/wiki/Svg#Rect.C3.A1ngulos


En concreto en este caso este script convierte los botones a un color, y puede ser util por ejemplo en aplicaciones de programas como el de Walter de las resistencias en que picando el color se puede ir seleccionando las bandas de las resistencias.


Muy parecido al que puso Nilson de calculo de resistencias pero que era un binario y que no se podia ver como modicar el codigo.

Bueno svg esta muy bien se pueden hacer paneles LCD etc.... que ser vera masa adelante.

aqui lo dejo..

Saludos.
imagen_activa.sh.gz
Description 
gz

 Download 
Filename  imagen_activa.sh.gz 
Filesize  543 Bytes 
Downloaded  51 Time(s) 
Back to top
View user's profile Send private message Yahoo Messenger 
nilsonmorales


Joined: 15 Apr 2011
Posts: 508
Location: El salvador

PostPosted: Sat 26 Jul 2014, 10:06    Post subject: !omr que aporte  

Gracias Mister por los datos, que bueno que tengo la oportunidad de seguir aprendiendo y entrando en un debate ameno y de mucho provecho.
sobre lo que comentas de los espacios vacios para encuadrar los formularios.
Mister_Electronico escribió:
Code:
      </hbox>
              <text><label>"      "</label></text>
              <text><label>"      "</label></text>   
      <hbox>

como tú dices no es muy apropiado, así que podrían cambiar por esto.
Code:
  <text width-chars="10" height-request="12"><label>""</label></text>

Saluos.

_________________
My blog


Back to top
View user's profile Send private message MSN Messenger 
mister_electronico


Joined: 20 Jan 2008
Posts: 663
Location: Asturias_ España

PostPosted: Sat 26 Jul 2014, 12:03    Post subject: Buen apunte...  

Buen apunte como tu dices siempre se aprenden cosas nuevas.... y este puede ser un buen sitio para aprender Gtkdialog y todos sus truquillos.

En nuestros script anteriores hemos visto label, me encontre este programa y quise ponerlo aqui... aunque todavia hay tema con los botones..

Las labels tambien pueden ser moviles.. ver este ejemplo.


Code:

#!/bin/sh
export MSG="Bienvenido al curso Gtkdialog... Bienvenido curso Gtkdialog.. "
export GTKBOX='
<window title="Ventana de label Movil" resizable="false">
<vbox width-request="300">
 <text>
  <variable>MSG</variable>
  <input>echo -en "${MSG:2}${MSG:0:2}"</input>
 </text>
 <timer milliseconds="true" interval="200" visible="false">
  <action type="refresh">MSG</action>
 </timer>
</vbox>
</window>'
gtkdialog -p GTKBOX


Decir que

<action type="refresh">MSG</action>

Hace que se refresco de nuestro formulario cada cierto tiempo que vendra determinado por el timer que lo ajustamos a 200 milisegundos mediante:

<timer milliseconds="true" interval="200" visible="false">


Lo he puesto por que me parecia interesante y seguro que mas alante se me olvida.
Back to top
View user's profile Send private message Yahoo Messenger 
mister_electronico


Joined: 20 Jan 2008
Posts: 663
Location: Asturias_ España

PostPosted: Sat 26 Jul 2014, 12:26    Post subject: comentar...  

Comentar que el timer y el refresh lo veremos mucho a lo largo de muchos ejemplos.
Back to top
View user's profile Send private message Yahoo Messenger 
mister_electronico


Joined: 20 Jan 2008
Posts: 663
Location: Asturias_ España

PostPosted: Sun 27 Jul 2014, 07:45    Post subject: Programa con multiples ventanas.  

Un programa de Gtkdialog puede contener las ventanas que queramos, aqui pongo un programa que esta realizado por "Patriot y Zigbert" el cual lo unico que he echo es modificar los nombres de ventanas a español y los textos al español para hacerlo mas compresible.


Quote:

#!/bin/sh
# Requires the fixed gtkdialog3-pe1

export HIJO1_DIALOG='
<window title="Ventana HIJO1">
<vbox width-request="180">
<frame>
<text><label> Ya estoy abierta </label></text>
<text><label> Soy ventana HIJO1. </label></text>
<text><label> Yo tengo mi PID, Pero puedo actuar en ventana principal. </label></text>
</frame>
<button><label>incrementa numero</label>
<action>A=$(cat /tmp/tmp); echo $(($A+1)) > /tmp/tmp</action>
<action>refresh:TEXT</action>
</button>
</vbox>
</window>
'

export HIJO2_DIALOG='
<variable>HIJO2_DIALOG</variable>
<vbox>
<text>
<label>Esta es la ventana HIJO2.</label>
</text>
<button><label>incrementa numero</label>
<action>A=$(cat /tmp/tmp); echo $(($A+1)) > /tmp/tmp</action>
<action>refresh:TEXT</action>
</button>
<button>
<label>Cierra me</label>
<action type="closewindow">HIJO2_DIALOG</action>
</button>
</vbox>
'

export MAIN_DIALOG='
<window title="Main Dialog" tooltip-text="Copyleft by Patriot and zigbert">
<vbox width-request="240">
<text width-chars="40"><label>"Haga click para abrir"</label></text>
<text width-chars="40"><label>"Haga click para cerrar"</label></text>
<text width-chars="40"><label>"Haga click para salir"</label></text>
<frame>
<text width-chars="40" height-request="120"><variable>TEXT</variable><input>cat /tmp/tmp</input></text>
</frame>
<button><label>Abra ventana HIJO1 anotando su PID</label>
<variable>OCD</variable>
<action>gtkdialog3 -p HIJO1_DIALOG -c &</action>
<action>echo $(ps ax|awk '"'"'{if (match($7, "HIJO1_DIALOG")) print $1}'"'"')>/tmp/child.pid</action>
<action>enable:CCD</action>
<action>disable:OCD</action>
</button>
<button sensitive="false"><label>Cierre HIJO1 matandola por su PID</label>
<variable>CCD</variable>
<action>[ -f /tmp/child.pid ] && p=$(cat /tmp/child.pid) && kill $p</action>
<action>enable:OCD</action>
<action>disable:CCD</action>
</button>

<button><label>Abre ventana HIJO2</label>
<action type="launch">HIJO2_DIALOG</action>
</button>
<button><label>Cierra ventana HIJO2</label>
<action type="closewindow">HIJO2_DIALOG</action>
</button>

<button tooltip-text=" Exit? Really? "><label>Salir </label>
<action>exit:Exit</action>
</button>
</vbox>
</window>>
'
echo 1 > /tmp/tmp

# Requires the fixed gtkdialog3-pe1

gtkdialog3 -p MAIN_DIALOG -c
unset CHILD_DIALOG
unset MAIN_DIALOG




No lo podemos bajar descomprimirlo y si no se puede ejecutar darle permisos de ejecucion:

chmod 777 varias_ventanas
varias_ventanas.gz
Description 
gz

 Download 
Filename  varias_ventanas.gz 
Filesize  841 Bytes 
Downloaded  51 Time(s) 
Back to top
View user's profile Send private message Yahoo Messenger 
mister_electronico


Joined: 20 Jan 2008
Posts: 663
Location: Asturias_ España

PostPosted: Sun 27 Jul 2014, 08:14    Post subject: Explicacion  

Como explicacion a este programa podemos decir que consta de un programa principal MAIN_DIALOG y de dos ventanas que se nos abriran cuando piquemos sobre los botones correspondientes HIJO1 y HIJO2.

Si nos vamos a la ventana principal vemos que el primer boton abrira la ventana HIJO1 :

<action>gtkdialog3 -p HIJO1_DIALOG -c &</action>

Esto hace que abra la ventana con distinto PID

Pero lo interesante de esto es que anota el PID con el que se abre esta ventana y la forma de hacerlo es con la linea:

<action>echo $(ps ax|awk '"'"'{if (match($7, "HIJO1_DIALOG")) print $1}'"'"')>/tmp/child.pid</action>


Que lo que hace es anotar los 7 primeros caracteres que corresponden al valor de el PID de la ventana HIJO1_DIALOG y los sala dentro de un archivo temporal que esta dentro de /tmp/child.pid.

La forma en que lo hace se escapa a mi compresion pero el caso es que lo hace.

Con el boton que esta debajo de abrir esta ventana es el de cerrar esta ventana y el proceso lo hace a la inversa.

Esto es es leer el numero de PID que esta almacenado en child.pid y coger el dato y matar el proceso mediante KILL


<action>[ -f /tmp/child.pid ] && p=$(cat /tmp/child.pid) && kill $p</action>



Observar que el boton de abrir HIJO1 le asociamos la variable OCD y que el boton cerrar HIJO1 tiene asociado la variable CCD si habiitamos o desabilitamos estas variable, se habilitaran o desabilitaran los botones asociados a estas variables.

Este uso tiene fin de que para cuando abrir la ventana HIJO1 este se desahabilite para que no pueda volverse abrir otra vez y habilita el boton de abrir HIJO2.

Ejemplo

<action>disable:OCD</action>
<action>enable:CCD</action>

La segunda parte del los botones ose el boton 3 abre la ventana HIJO2 y el 4 boton cierra la ventana HIJO2 pero lo hace en vez de por PID por el comando
closewindow como segun se ve en el codigo.


La linea :

<text width-chars="40" height-request="120"><variable>TEXT</variable><input>cat /tmp/tmp</input></text>

lo que hace es poner texto con el tamaño que se indica de la variable TEXT que esta almacenado dentro del archivo /tmp/tmp

Y que es una forma que tienen de comunicarse los formularios y lo que haran lo formularios es ir incrementando el valor de esta variable desde el otro formulario.

Bueno la unica cosa asi relevante que queda de esta ventana principal es la linea primera de codigo que es :

<window title="Main Dialog" tooltip-text="Copyleft by Patriot and zigbert">

este tooltip-text es para cuando pasemos el raton por la ventana Principal aparezca el mensaje "Copyleft by Patriot and zigbert"

Last edited by mister_electronico on Sun 27 Jul 2014, 08:28; edited 1 time in total
Back to top
View user's profile Send private message Yahoo Messenger 
mister_electronico


Joined: 20 Jan 2008
Posts: 663
Location: Asturias_ España

PostPosted: Sun 27 Jul 2014, 08:25    Post subject: Continuando...  

Bueno la comunicacion mediante ficheros entre formularios de GTkdialog, es un buen metodo, no solo para Gtkdialog si no para otros programas que pueden ser de C, Python, scripts etc... para almacenar datos temporales, registros, etc...


Con respecto a la ventana HIJO1 comentar la linea

<action>A=$(cat /tmp/tmp); echo $(($A+1)) > /tmp/tmp</action>

Incrementa el valor de la variable TEXT del programa principal y lo va salvando en el fichero /tmp/tmp

La siguiente linea :

<action>refresh:TEXT</action>

No tiene ningun efecto sobre la ventana Principal por que la ventana HIJO1 fue abierto con distinto PID que la ventana Principal.

Pero si va incrementando la variable aunque no se vea.


Y esto es todo con respecto a la ventana HIJO1.
Back to top
View user's profile Send private message Yahoo Messenger 
mister_electronico


Joined: 20 Jan 2008
Posts: 663
Location: Asturias_ España

PostPosted: Sun 27 Jul 2014, 08:34    Post subject: La ventana HIJO2  

Con respecto a la ventana HIJO2 no hay nada nuevo que mencionar salvo que la linea:

<action>refresh:TEXT</action>

si tiene efecto sobre la ventana Principal por que tiene el mismo PID, ademas si antes hemos incrementamos el valor en la ventana HIJO1 y no lo veiamos ahora veremos que se nos incrementa todo de una vez.

Por ultimo como esta ventana la abrimos con:

<action type="launch">HIJO2_DIALOG</action> en la ventana Principal

aqui ahora podemos cerrarla mediante:

<action type="closewindow">HIJO2_DIALOG</action>

Y esto es todo.
Back to top
View user's profile Send private message Yahoo Messenger 
Display posts from previous:   Sort by:   
Page 1 of 4 [50 Posts]   Goto page: 1, 2, 3, 4 Next
Post new topic   Reply to topic View previous topic :: View next topic
 Forum index » House Training » Users ( For the regulars ) » Usuarios de habla Hispana
Jump to:  

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You can download files in this forum


Powered by phpBB © 2001, 2005 phpBB Group
[ Time: 0.1324s ][ Queries: 12 (0.0080s) ][ GZIP on ]