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

miércoles, 30 de agosto de 2017

Integrar Java Swing en Processing

Integración de Java Swing en Processing

Estructura básica

Este ejemplo de código implementa la creación del panel en el cual se agregaran los controles de la aplicación en Processing. En la siguiente figura se muestra las ventanas resultantes para este ejemplo, la tradicional ventana correspondiente al lienzo o sketch de Processing y otra correspondiente al aplicativo Java con Swing.
A partir de esta plantilla básica se procede a desarrollar la aplicación agregando botones, sliders, etc.

Ventanas estructura básica.

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.event.*;

MyPanel controlPanel= new MyPanel();
 void setup() {
  JFrame frame = new JFrame("Ejemplo Frame");
  frame.setContentPane(controlPanel);
  frame.pack();
  frame.setVisible(true);
}
void draw() {
}
public class MyPanel extends JPanel {
    public MyPanel() {
       setPreferredSize(new Dimension(200, 400));
       setLayout(null);
   }
}

Agregando Botones

Este ejemplo de código implementa agrega un botón y el evento de click para este botón.
En el ejemplo el botón se llama boton01 pero puede tener cualquier otro nombre, pero se sugiere que para distinguir varios botones en la aplicación estos tengan en su nombre una numeración.
el método boton01.setBounds(0, 0, 200, 25); sirve para indicar la posición y tamaño del botón en el panel, su formato es el siguiente setBounds(x,y,ancho,alto) donde las coordenadas x,y corresponden a la esquina superior izquierda y ancho, alto a las dimensiones del botón.
Para agregar el evento de click se emplea el método y en este se indica como se llama la clase que implementa el método boton01.addActionListener(new ClickBoton01()); para detectar el evento de click en este botón. Para este ejemplo al clase se llama ClickBoton01 pero el nombre puede ser cualquiera, es importante indicar que por lo general cada botón tiene su propio evento de click indicado con un nombre que lo diferencia de los demás.
 
Creación de un botón.

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.event.*;

MyPanel controlPanel= new MyPanel();
 void setup() {
  JFrame frame = new JFrame("Ejemplo Frame");
  MyPanel controlPanel= new MyPanel();
  frame.setContentPane(controlPanel);
  frame.pack();
  frame.setVisible(true);
}
void draw() {
}
public class MyPanel extends JPanel {
  private JButton boton01;
  public MyPanel() {
    setPreferredSize(new Dimension(200, 400));
    setLayout(null);
    boton01 = new JButton ("Presionar");
    boton01.setBounds(0, 0, 200, 25);
    add(boton01);
    boton01.addActionListener(new ClickBoton01());
  }
}
class ClickBoton01 implements ActionListener{
  public void actionPerformed(ActionEvent e){
    JButton b = (JButton)e.getSource();
    b.setLabel("Presionado");
  }


Cambiar el Color de Fondo del Sketch al Presionar un Botón

Este ejemplo permite cambiar el color de fondo de blanco a negro y viceversa al presionar un único botón, para esto se agrega una variable de tipo booleano que cambia de estado cada vez que se presiona el botón.

Botón para cambiar color de fondo


import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.event.*;
MyPanel controlPanel= new MyPanel();
boolean banderaBoton01 = true;
void setup() {
  JFrame frame = new JFrame("Ejemplo Frame");

  frame.setContentPane(controlPanel);
  frame.pack();
  frame.setVisible(true);
  size(400,400);
}
void draw() {
  if (banderaBoton01) {
    background(255);//Blanco
  } else {
    background(0);//Falso
  }
}
public class MyPanel extends JPanel {
  private JButton boton01;
  public MyPanel() {//Metodo constructor
    setPreferredSize(new Dimension(200, 400));
    setLayout(null);
    boton01 = new JButton ("Blanco");
    boton01.setBounds(0, 0, 200, 25);
    add(boton01);
    boton01.addActionListener(new ClickBoton01());
  }
}
class ClickBoton01 implements ActionListener {
  public void actionPerformed(ActionEvent e) {
    JButton b = (JButton)e.getSource();
    banderaBoton01=!banderaBoton01;//Cambia de estado al negarse a si misma
    if (banderaBoton01) {
      b.setLabel("Blanco");
    } else {
      b.setLabel("Negro");
    }
   
  }
}

Cambiar el Color del panel y el botón

Los objetos de Swing como los botones y paneles tienen propiedades de color que se pueden cambiar con el metodo setBackground() .
Los colores que se pueden seleccionar directamente son: Color.lightGray Color.gray Color.darkGray Color.blue Color.cyan Color.green Color.yellow Color.magenta Color.orange Color.pink Color.red Color.white Color.black
Para agregar un color empleando el formato RGB empleamos la objeto Color que en este ejemplo se utilizo  de la siguiente manera para cunado se presiona el botón b.setBackground(new Color( 128, 0, 32 ));

Panel gris y botón amarillo
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.event.*;

MyPanel controlPanel= new MyPanel();
 void setup() {
  JFrame frame = new JFrame("Ejemplo Frame");
  frame.setContentPane(controlPanel);
  frame.pack();
  frame.setVisible(true);
}
void draw() {
}
public class MyPanel extends JPanel {
  private JButton boton01;
  public MyPanel() {
    setPreferredSize(new Dimension(200, 400));
    setLayout(null);
    setBackground(Color.gray);//Color del panel
    boton01 = new JButton ("Presionar");
    boton01.setBounds(0, 0, 200, 25);
    boton01.setBackground(Color.yellow);//Color del boton
    add(boton01);
    boton01.addActionListener(new ClickBoton01());
  }
}
class ClickBoton01 implements ActionListener {
  public void actionPerformed(ActionEvent e) {
    JButton b = (JButton)e.getSource();
    b.setLabel("Presionado");
    b.setBackground(new Color( 128, 0, 32 ));
  }


Cambiar valores de los controles desde la función  draw()

Las propiedades de los objetos pueden ser cambiados desde la función draw(), en este ejemplo se visualiza el tiempo transcurrido en milisegundo en una etiqueta JLabel esto se hace con la siguiente isntruccion donde se modifica la propiedad del texto controlPanel.texto01.setText(str(millis())); donde el metodo setText cambia el texto que es de tipo string. Para convertir el valor entero de la funcion millis() se emplea la funcion srt() que convierte un dato tipo int o float a una cadena de caracteres string
 
Mostrar tiempo en milisegundos

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
boolean baderaCrono = false;
MyPanel controlPanel= new MyPanel();
void setup() {
  JFrame frame = new JFrame("Cronometro");
  frame.setContentPane(controlPanel);
  frame.pack();
  frame.setVisible(true);
}
void draw() {
  if (baderaCrono) {
    controlPanel.texto01.setText(str(millis()));
  }
}
public class MyPanel extends JPanel {
  private JButton boton01;
  private JLabel texto01;
  public MyPanel() {
    setPreferredSize(new Dimension(200, 400));
    setLayout(null);
    boton01 = new JButton ("Cronometrar");
    boton01.setBounds(0, 0, 200, 25);
    add(boton01);
    boton01.addActionListener(new ClickBoton01());
    texto01= new JLabel("0");
    texto01.setBounds(0, 25, 200, 25);
    texto01.setForeground(Color.blue);
    add(texto01);
  }
}
class ClickBoton01 implements ActionListener {
  public void actionPerformed(ActionEvent e) {
    JButton b = (JButton)e.getSource();
    baderaCrono=!baderaCrono;
    if (baderaCrono) {
      b.setLabel("Pausar");
    } else {
      b.setLabel("Cronometrar");
    }
  }
}