Introduccion e Instalacion de G4P en Processing

Interfaz de Usuario en Processing con G4P

1. Creación de interfaces gráficas de usuario

Una forma práctica de crear interfaces de usuario con botones, barras deslizantes, cuadros de texto, etc es la utilización de una herramienta de construcción de interfaces gráficas de usuario como la G4P.

2. Instalación de G4P

• Ir a sketch-->Importar Biblioteca-->Añadir Biblioteca
• Buscar G4P y dar clic al botón de instalación tal como se ve en la Figura 1.
• Ir a herramientas-->Añadir herramientas
• Buscar G4P y dar clic al botón de instalación tal como se ve en la Figura 2.

  

  Figura 1.

  
  



Figura 2.

3. Programación de botones

En este ejemplo se agregan dos botones para cambiar el fondo de dibujo en Processing.

• Ir a herramientas y abrir G4O GUI builder.
• Agregar dos botones y cambiar los textos para que el botón 1 diga rojo y el botón 2 diga amarillo. Ver la figura 3
• Agregar las instrucciones faltantes tal como se ve en las figuras 4 y 5

Figura 3.

Figura 4.

Figura 5.

4. Programación de Áreas de texto

En este ejemplo se agrega un cuadro de texto para mostrar un texto cada vez que se hace clic a un botón

• Ir a herramientas y abrir G4O GUI builder.
• Agregar un cuadro de texto. Ver la figura 6
• Agregar las instrucciones faltantes tal como se ve en las figura 7. Para agregar textos se emplea el método textarea1.appendText

Figura 6.

Figura 7.

5.Creación de etiquetas Label

En este ejemplo se agrega una etiqueta para mostrar la posición en x del ratón

• Ir a herramientas y abrir G4O GUI builder.
• Agregar una etiqueta. Ver la figura 8
• Agregar las instrucciones faltantes tal como se ve en las figura 9. Para cambiar el texto de la etiqueta se emplea el método label1.setText( )

Figura 8.

Figura 9.