sábado, 28 de octubre de 2017

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.

G4P009
Figura 9.


lunes, 2 de octubre de 2017

Reto sacar bloques con Lego NXT

Descripción del reto Reto

El reto consiste en sacar las cajas de icopor de la pista según el color que tenga en la parte superior . Competirán dos robots simultáneamente donde ganará el que más puntos realice.

RetoLegoBloquesRev002.png
Figura 1. Configuración de la pista
  1. Reglas

  • El día del evento se entregará a los concursantes el mapa de los bloques, indicando la ubicación y el color.
  • Los equipos tendrán tiempo de introducir el mapa de los bloques en el programa. El mapa solo se introducirá una vez en el robot.
  • En el momento de participar el color del bloque a sacar se hará de forma aleatoria por medio del lanzamiento de una moneda.
  • Para hacer un punto solo es necesario que el robot toque el bloque del color correcto, no es necesario moverlo o sacarlo de la pista, aunque no hay penalización en caso de hacerlo.
  • El robot debe tener un menú en pantalla para seleccionar el color del bloque que debe sacar.
  1. Puntuación

    Bloques
    Puntos
    1 a 5
    1 punto por bloque
    6 a 10
    2 puntos por bloque
    11 a 12
    5 puntos por bloque

    Tocar o sacar bloques del color opuesto, dará puntos al equipo contrario

    El equipo que termine primero el recorrido tendrá un bonificación de 5 puntos.
  2. Tipo de robot

La configuración empleada será el multibot Seguidor (Figura 2) al cual se le adecuará un sensor de color frontal.

SeguidorLinea.JPG
Figura 2: Multibot Seguidor consultado en: http://nxtprograms.com/NXT2/multi-bot/index.html
  1. Características de la pista de la pista

La pista de exploración tendrá las siguientes características
RetoLegoBloquesRev001
Figura 3: Pista vista superior

  • 1 metros de ancho.
  • 2 metros de largo.
  • Cubos de incopor de 5 cm.
  • Los cubos están distribuidos cada 20 cm
    Cada columna tendrá 8 cubos, 4 verdes y 4 azules distribuidos de forma aleatoria.
  • Fondo del piso de color blanco.
  • Robot inician a la Izquierda.
    El primer cubo estará a 10 cm del punto de inicio del robot.
    El Punto de cruce estará a 10 cm del ultimo cubo de la primer fila
  • Línea negra de 2 cm de ancho.
    Construcción de la pista
     En la pista de la figura el robot encontrá siempre los cubos al lado izquierdo.
    • Primer columna verde,azul,azul,verde,verde,verde,azul,azul
    • Segunda columna verde,verde,azul,azul,azul,verde,verde