Botones en Processig con G4P

Creación de Botones en Processing con G4P

Micro Pinguino Electrónica y Programación

 

Métodos y eventos de botón (Button)

Los botones en G4P tienen las siguientes métodos:

SetText()

este método permite cambiar el texto que aparece en el botón.

Ejemplo de instrucción: button1.setText( “Hola mundo”);

Código de ejemplo: En este ejemplo se hace el cambio de texto al hacer clic en el botón

public void button1_click1(GButton source, GEvent event) { //_CODE_:button1:211080:
  println("button1 - GButton >> GEvent." + event + " @ " + millis());
  button1.setText("Hola mundo");//Cambia texto al hacer clic
} //_CODE_:button1:211080:

setTextBold( )  

este método coloca la letra en negrilla.

Ejemplo de instrucción: button1.setTextBold();

Código de ejemplo: En este ejemplo se hace el cambio a negrilla al hacer clic

public void button1_click1(GButton source, GEvent event) { //_CODE_:button1:211080:
  println("button1 - GButton >> GEvent." + event + " @ " + millis());
  button1.setTextBold();//Cambia texto a negrilla
} //_CODE_:button1:211080:

También permite indicar qué parte del texto se desea en negrilla, indicando el inicio y el final. Ejemplo de instrucción: button1.setTextBold(0,4);

Código de ejemplo: En este ejemplo se hace el cambio a negrilla al hacer clic

public void button1_click1(GButton source, GEvent event) { //_CODE_:button1:211080:
  println("button1 - GButton >> GEvent." + event + " @ " + millis());
  button1.setText("Hola Mundo");
  button1.setTextBold(0,4);//Solo el Hola pasa a negrilla
} //_CODE_:button1:211080:

TsetTextItalic( )

este método coloca la letra en itálica.

Ejemplo de instrucción: button1.setTextItalic();

Código de ejemplo: En este ejemplo se hace el cambio a itálica al hacer clic

public void button1_click1(GButton source, GEvent event) { //_CODE_:button1:211080:
  println("button1 - GButton >> GEvent." + event + " @ " + millis());
  button1.setTextItalic();//Cambia texto a negrilla
} //_CODE_:button1:211080: 

También permite indicar qué parte del texto se desea en itálica, indicando el inicio y el final. Ejemplo button1.setTextItalic(0,4); en este ejemplo el texto del botón resultante es Hola mundo.

Código de ejemplo: En este ejemplo se hace el cambio a itálica al hacer clic

public void button1_click1(GButton source, GEvent event) { //_CODE_:button1:211080:
  println("button1 - GButton >> GEvent." + event + " @ " + millis());
  button1.setText("Hola Mundo");
  button1.setTextItalica(0,4);//Solo el Hola pasa a italica
} //_CODE_:button1:211080:

setTextPlain( )

este método deja el texto normal, quitando los estilos italic y bold.

Ejemplo de instrucción button1.setTextPlain();

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.