Heyyyyyyyyyyyyyyy

Aprende a programar microcontroladores en C... http://tecdigitaldelbajio.com/software-tarjeta.html

miércoles, 30 de diciembre de 2009

Ejemplo #15 Como agregar imágenes y el comando de salir en el modo gráfico



En el post pasado se vio como se agregan las imágenes en el modo gráfico y por otro lado en el ejemplo #14 “hola mundo en modo gráfico se menciono que el comando “Exit” que se agrega en la clase Canvas, no funciona, se presiona el botón y no pasa absolutamente nada, la razón es bien simple, no hace nada por que no existe ninguna línea de código en el método correspondiente para que realice una acción cuando se presiona el comando, así que el objetivo de este post es aprender a agregar comandos desde la interfaz de bajo nivel, específicamente se muestra como agregar el comando de salir a un MIDlet que muestra una imagen, así que iniciemos.

Cambios al código Midlet
Recuerde que se requieren dos códigos fuente para crear las interfaces de bajo nivel:

• El Midlet
• La clase miCanvas que proviene de la clase Canvas

Ambos códigos ya fueron analizados anteriormente, pero cabe mencionar que en la documentación de la clase MIDlet se indica que si se desea salir del MIDlet para que se liberen los recursos usados en el teléfono celular se debe mandar llamar el método:
destroyAPP() y notifyDestroy(),

estos métodos le "dicen" al celular que el MIDlet se va a destruir para que se liberen los recursos usados, para mandarlos llamar se recomienda la creación de un nuevo método en el código para el MIDlet, un método llamado exitMIDlet así:
public void exitMIDlet() {
   destroyApp(false);
   notifyDestroyed();
}
Al ejecutarse el método se destruye el MIDlet de la memoria del celular completamente, el método se puede agregar en cualquier parte del código de la clase Midlet, más adelante muestro donde podría ir este código.

Otro cambio a la clase MIDlet es el siguiente. Como ya se mencionó en algún post anterior, para mostrar los gráficos se crea un objeto de la clase llamada miCanvas esto se realiza con la instrucción:
helloCanvas = new miCanvas();

Y con esta instrucción se ejecuta el código paint de la clase miCanvas y se muestra en el en la pantalla del celular:
Display.getDisplay(this).setCurrent(helloCanvas);

Con la anterior instrucción se puede decir que “el flujo de programa pasa del MIDlet a la clase miCanvas”, entonces, se tiene un pequeño problema porque si el flujo de programa esta en la clase miCanvas es imposible desde ahí mandar llamar el método exitMiDlet que está en la clase MiDlet. ¿Si me explique? O lo puedo ver con otras palabras: el comando salir se agrega en la clase miCanvas ¿Cómo podría entonces mandar llamar el método exitMIDlet, si este método está en la clase MIDlet? Ahora si se ve el problema ¿verdad?.

La solución es la siguiente, es posible enviar información entre clases, esto solo se logra por medio del constructor de la clase que recibe la información, así pues yo puedo enviar datos de la clase MIDlet a la clase miCanvas por medio del constructor de la clase miCanvas, el constructor se manda llamar cuando se crea el objeto, el objeto se crea en la línea mencionada arriba y que aquí vuelvo a escribir:

helloCanvas = new miCanvas();
Con la línea anterior se crea el objeto, lo que hace esta instrucción realmente es ejecutar el código que viene en el constructor de la clase miCanvas, justo ahí es posible enviarle información a la clase miCanvas, la información se enviá como parámetro entre los paréntesis del constructor.

¿Pero que información voy a enviarle? La respuesta es sencilla, se tiene que enviar un objeto de la clase MIDlet, para que con el objeto se pueda mandar llamar el método exitMIDlet, existe una palabra reservada en J2ME para pasar como parámetro el objeto de la clase actual, esta palabra es simplemente “this”, entonces la sentencia para crear el objeto es así:

helloCanvas = new miCanvas(this);

Se crea el objeto helloCanvas y aparte se envía una referencia al objeto de la clase MIDlet que inicio la ejecución del programa, ups espero haberme explicado.

Finalmente el código completo para la clase MIDlet incluyendo el método exitMIDllet queda así:

import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
/**
 * @author User
 */
public class Midlet extends MIDlet {
    miCanvas helloCanvas;
    public void startApp() {
        helloCanvas = new miCanvas(this);
        Display.getDisplay(this).setCurrent(helloCanvas);
    }

    public void pauseApp() {
    }

    public void destroyApp(boolean unconditional) {
    }

    public void exitMIDlet() {
        destroyApp(false);
        notifyDestroyed();
    }
}

Cambios a la clase miCanvas
La parte importante del código para esta clase se muestra enseguida (recuerde que este código lo genera NetBeans dar clic aquí si no recuerdas como se hace):

import javax.microedition.lcdui.*;
public class miCanvas extends Canvas implements CommandListener {
    /**
     * constructor
     */
    public miCanvas() {        
        try {
     // Set up this canvas to listen go command events
     setCommandListener(this);
     // Add the Exit command
     addCommand(new Command("Exit", Command.EXIT, 1));
        } catch(Exception e) {
            e.printStackTrace();
        }
    } 
    
    /**
     * Called when action should be handled
     */
    public void commandAction(Command command, Displayable displayable) {        
    }
}

Ahora vea el constructor, esté debe estar preparado para recibir la información que proviene de la clase MIDlet, en este caso lo que se envió fue el mismo Midlet, así que se debe estar preparado para recibirlo, esto lo realizamos agregando una variable entre los paréntesis del constructor así:

public miCanvas(Midlet m ) {        

  // código del constructor
}

Entoces la variable llamada “m” recibe una referencia real del MIDlet, ahora necesito asignarla a una variable para poder usarla por lo que agrego una llamada “mid” así:
Midlet mid;
Ahora simplemente le asigno el valor de “m” así:
mid = m;
El código parcial de la clase helloCanvas queda entonces así:
public class miCanvas extends Canvas implements CommandListener {
    Mildet mid;
 /**
 * constructor
 */
public miCanvas(Midlet m ) {        
     mid = m;
     // código del constructor
 }

Lo único que nos falta es mandar llamar el método para salir del midlet, esto se hace simplemente con la sentencia siguiente:
mid.exitMIDlet();

Esta sentencia se agrega en el método de la clase miCanvas que procesa los comandos y que NetBeans genera automáticamente, justo ahí se coloca la sentencia así:
public void commandAction(Command command, Displayable displayable) {        
  mid.exitMIDlet();
}
Como solo es un comando el que se tiene en el MIDlet es posible hacer lo anterior, cuando hay más de un comando se debe usar un if para identificar cuál comando se presionó pero en este ejemplo solo se tiene el comado de salir.

Bueno otro cambio que se hará es en el código que NetBeans genera para agregar el comando de salir, NetBeans coloca “Exit” nosotros vamos a colocar la palabra “Salir” el código queda así:
addCommand(new Command("Salir", Command.EXIT, 1));

Finalmente agrego el video tutorial, por si quedaron algunas dudas, el programa muestra cómo se agrega una imagen y el comando salir (ahora hice el video con el Sony Vegas y pues no se vio como yo lo deseaba, te recomiendo que lo veas en pantalla completa o desde el sitio de youtube dando clic aqui, mil disculpas)








Clic AQUI para leer más...!

viernes, 25 de diciembre de 2009

Dibujo de imágenes en modo gráfico



La lección de hoy mostrará como cargar una imagen para después desplegarla en la pantalla del celular, en el modo gráfico. Esto es particularmente importante, si en un futuro deseamos realizar animaciones o juegos para el teléfono.

He realizado pruebas en Java Micro Edition y soporta imágenes en los formatos más populares como JPG, PNG y GIF, dando clic aqui puedes ver como crear imágenes en la interfaz de alto nivel algo relativamente fácil, usando las interfaces de bajo nivel no lo es tanto, hay que hacerlo con código, unas pocas líneas se requiere para ello, tampoco nada del otro mundo así que iniciemos, haa se me olvida decir que todo este código debe ir en la clase que hereda de la clase Canvas (donde está el método paint, por si no lo recuerdas).

Paso 1. Declarar un objeto de la clase Image
En J2ME es posible hacer uso de la clase Image para crear objetos que almacenen toda la información de una imagen, para crear el objeto, recuerde que primero hay que declararlo, esto se realiza con la sentencia siguiente:

Image img

El objeto que se declara es llamado img, la sentencia generalmente se coloca justo al principio de la creación de la clase, así:




public class miCanvas extends Canvas implements CommandListener {
    Image img;
    /**
     * constructor
     */
    public miCanvas() {
        try { 
    // etc...

Paso 2. Crear la imagen usando el método createImage
Apenas se declaro el objeto con la sentencia anterior (esto significa que se reserva espacio en la memoria para el objeto img) ahora hay que crearlo realmente, esto se realiza por medio del método creteImage de la clase Image, la sentencia es bien simple como se verá enseguida y debe llevar entre “ “ la ruta de la imagen, así:
img = Image.createImage("/itesiPNG.png");

La imagen se llama itesiPNG y como se puede observar tiene el formato PNG. Por facilidad la imagen fue almacenada previamente en la ruta donde NetBeans crea el código fuente del programa de Java, esto se puede ver en la figura siguiente (recuerda que puedes dar clic en la figura para observarla mejor):


El código anterior generalmente se agrega en el constructor de la clase que hereda de Canvas, aquí lo reproduzco por si no te acuerdas cuál es el constructor:
public miCanvas() {
 try {
    img1 = Image.createImage("/itesiPNG.png"); // Se crea la imagen
   // Set up this canvas to listen tgo command events
    setCommandListener(this);
   // Add the Exit command
    addCommand(new Command("Exit", Command.EXIT, 1));
 } catch(Exception e) {
            e.printStackTrace();
 }
}

El siguiente paso es mostrar la imagen en la pantalla del celular.


Paso #3 Dibujar imagen
Para dibujar la imagen se hace uso del método drawImage, si alguno de ustedes fue curioso y se puso a practicar con la clase Graphics, ahí debió ver este método. El método tal y como lo muestra la documentación de J2ME es así:



La documentación del método indica que debe llevar cuatro párametros entre paréntesis, el primero de ellos es el objeto de la clase Image (en nuestro caso se llama img), el segundo es la coordenada x (por ejemplo 50) el tercero es la coordenada y (por ejemplo 50 también) para finalmente terminar con el parámetro que se llama Anchor o anclaje (por ejemplo Graphics.TOP | Graphics.LEFT), así el ejemplo quedaría:

g.drawImage(img, 50, 50, Graphics.TOP | Graphics.LEFT);

por supuesto que el método debe ser ingresado dentro del método paint() tal y como se observa enseguida:
public void paint(Graphics g) {
   g.setColor(0xFF, 0xFF, 0xFF); // se elige el color blanco de fondo
   g.fillRect(0, 0, getWidth(), getHeight());
   g.drawImage(img1, 50, 50, Graphics.TOP | Graphics.LEFT);    
}

Lo anterior dibuja la imagen a partir de las coordenadas (50, 50), se usa el fillRect para “borrar la pantalla” como se vio en el post pasado.

La figura siguiente muestra como se ve la imagen en el emulador con el código anterior:


Vamos a ver en detalle el último de los parámetros el llamado Anchor Points, para que quede bien claro.

Anchor Points
Voy a trazar un par de líneas que pasen por las coordenada (50, 50), para analizar los llamados Anchor Points (puntos de anclaje), y para ver bien que pasa con la figura voy a pintar el fondo de color amarillo para notar bien su tamaño, entonces voy a ejecutar el código siguiente:
public void paint(Graphics g) {
   g.setColor(0xFF, 0xFF, 0x00); // se elige el color amarillo
   g.fillRect(0, 0, getWidth(), getHeight());
   g.drawImage(img1, 50, 50, Graphics.TOP | Graphics.LEFT);
   g.setColor(0xFF, 0x00, 0x00); // se elige el color rojo para las líneas
   g.drawLine(0, 50, getWidth(), 50);
   g.drawLine(50, 0, 50, getHeight());
}

Que al ejecutarlo resulta:


La coordenada (50, 50) justo es donde se cruzan las líneas, el anchor point que se uso es:

Graphics.TOP | Graphics.LEFT

El anchor Point es el resultado de unir dos parámetros, uno es si la imagen estará arriba o debajo de las coordenadas:

• TOP
• BUTTOM

Y el otro es si está a la izquierda, a la derecha o centrada horizontalmente

• LEFT
• RIGTH
• HCENTER

Esos dos parámetros se unen con el operador lógico “ | ” or.

Pero que más claro que otro ejemplo, vamos a cambiar el Anchor Point ahora por lo contrario que el anterior, “abajo y a la derecha”
Graphics.BUTTOM | Graphics.RIGTH

entonces el código es así:
g.drawImage(img1, 50, 50, Graphics.BUTTOM | Graphics.RIGTH);


El resultado lo puedes ver en la siguiente imagen:




Recuerde que las coordenadas son (50,50) y a partir de ahí se dibuja la imagen dependiendo del punto de anclaje, ahora fue abajo y a la derecha, veamos otro ejemplo:

g.drawImage(img1, 50, 50, Graphics.TOP | Graphics.HCENTER);

da como resultado lo siguiente:


Bueno si lo deseas puedes seguir practicando esto de los Anchor Points yo aquí a cabo este post, por cierto los puntos de anclaje también se usan en el método drawString por si también deseas probarlos ahí.

Haa por cierto, Feliz navidad a todos¡¡¡




Clic AQUI para leer más...!

viernes, 11 de diciembre de 2009

La clase Graphics



Hoy vamos a hablar más acerca de la clase Graphics. Está clase me permite dibujar en pantalla, mostrar incluso imágenes y como se vio en el post anterior es posible mostrar textos. La clase Graphics se crea justo en el método paint() como se vio en la clase HelloCanvas del ejemplo pasado, este método lo reproduzco enseguida:

public void paint(Graphics g) {
 g.drawString("Hola mundo, en modo gráfico",0,0,Graphics.TOP|Graphics.LEFT);
}

Otra vez, la declaración del objeto de la clase Graphics es así:
                                            Graphics  g
Con la declaración anterior, por medio del objeto g, ya puedo usar los métodos de la clase, uno de estos métodos es 

                                           drawString

pero existen muchos métodos más basta con ver la documentación de la clase Graphics, para conocer algunos de sus métodos. La figura siguiente muestra algunos de ellos directamente de la documentación de J2ME (puedes dar clic en la imagen para verla mas grande).



 



Claro que para ver la documentación como se muestra en la imagen se debe tener instalado el SonyEricsson SDK, dando clic aquí   ver el post para su instalación, por si todavía no lo tienes.

 

Método drawLine

 

Como se ve en la figura la clase Graphics tiene infinidad de métodos, ya conocemos uno el drawString, vemos otro:

 drawLine

 

En la documentación dando clic en el método nos lleva a su descripción la cual es mostrada en la siguiente imagen:




La descripción nos dice que el método dibuja una línea entre las coordenadas (x1, y1) y ( x2, y2). Por ejemplo:

                                 drawLine(0, 0, 100, 100);

Dibuja una línea de la coordenada (0,0) a la (100, 100), como se usa el método así:


public void paint(Graphics g) {
   g.drawLine(0, 0, 100, 100);
}

Para usar cualquier método de la clase Graphics, se debe hacer por medio del objeto esa es la razón de que se le agregue la g y el punto y todo lo anterior debe estar dentro del método paint. La figura siguiente muestra la línea en el emulador:



Note como en el emulador no se borran las letras, cuando lo programe físicamente en el celular ahí si se borraba todo y aparecía solo la línea. Más adelante vemos como cambiar eso, para que no aparezcan esas letras.

 

Método setColor

 

En la figura siguiente muestro el método setColor tal y como está en la documentación de J2ME:

 



Este método establece el color en términos de valores RGB (dando clic en el hipervínculo podemos ver la explicación desde la WikiPedia, e incluso se pueden ver los valores para los distintos colores), estos valores son pasados por medio de los parámetros por ejemplo:
.

Negro                         setColor(0, 0, 0)

Blanco                        setColor(255, 255, 255)

 

Este Si se vio el enlace desde la wikipedia está dice qué el color blanco es con el numero FF FF FF, esos valores están en  hexadecimal, según dicen, es mejor manejarlos así, entonces el FF es igual al 255 en decimal. Por cierto si deseo escribirlo en hexadecimal también es posible en java usando el operador 0x, así quedaría el color blanco en hexadecimal

 

                               setColor(0xFF, 0xFF, 0xFF)

 

 Los tres colores básicos se forman así:


Color      en decimal                en hexadecimal                           
Rojo     setColor(255, 0, 0)       setColor(0xFF, 0, 0)
Verde    setColor(0, 255, 0)       setColor(0, 0xFF, 0)  
Azul     setColor(0, 0, 255)       setColor(0, 0, 0xFF)  



Combinando los valores RGB podemos obtener prácticamente cualquier color, la misma wikipedia nos da ejemplos de otros colores por ejemplo:

 

Amarillo                     setColor(0xFF, 0xFF, 0x00)

Purpura                     setColor(0x80, 0x00, 80)

 

Puedes ver más colores desde el artículo de la wikipedia si lo deseas.

 

Como hago uso del método, ya te lo has de imaginar, por ejemplo si deseo crear tres líneas dos horizontales y una vertical, una roja, otra verde y la otra azul, escribo dentro del método paint así:


public void paint(Graphics g) {

     g.setColor(0xFF, 0, 0);  // Se establece el color rojo
     g.drawLine(0, 50, 100, 50); // Se dibuja la primer línea horizontal
     g.setColor(0, 0xFF, 0);  // Se establece el color verde
     g.drawLine(0, 150, 100, 150); // Se dibuja la segunda línea horizontal
     g.setColor(0, 0, 0xFF);  // Se establece el color azul
     g.drawLine(100, 50, 100, 150); // Se dibuja la línea vertical
}
Al ejecutar el código se vería lo siguiente:




Método fillRect

 

La figura siguiente muestra la documentación de este método:




Dibuja un rectángulo relleno con el color actual, a partir de la coordenada (x,y) con un ancho y un alto especificado en los parámetros width y height. Por ejemplo:


public void paint(Graphics g) {
 g.setColor(0xFF, 0, 0);  // Se establece el color rojo
 g.fillRect(45, 60, 100, 100); // rectángulo relleno
}
Al ejecutar el código se muestra la figura siguiente






En este caso dibuja el rectángulo a partir de la coordenada (25, 60) con un ancho de 100 pixeles y con un alto también de 100 pixeles.

 

Ahora te toca a ti, nos llevaría mucho tiempo ver todos y cada uno de los métodos de la clase Graphics, son más de 20, así que no lo voy a hacer, más adelante usare algunos métodos y los explicaré pero hay muchos con los cuales tu puedes practicar, aquí les muestro como se hace, simplemente ver la documentación y a probar como se comporta, así que tu experimenta con los otros métodos.

 

Ancho y Alto de la Pantalla

 

Para finalizar este post, veré dos métodos que me permiten obtener el ancho y alto de la pantalla del celular en el modo gráfico:

 

getWidth(): Obtiene el ancho en pixeles de la pantalla disponible del celular

getheight(): Obtiene el alto en pixeles de la pantalla disponible del celular

 

Estos métodos se heredan a la clase Canvas por eso no tengo que crear ningún objeto, son métodos que puede usar directamente, así por ejemplo si deseo rellenar la pantalla con un color de fondo hago lo siguiente:



public void paint(Graphics g) {
     g.setColor(0xFF, 0, 0);  // Se establece el color rojo
     g.fillRect(0, 0, getWidth(), getHeight);
}

El resultado es el siguiente:




Se acostumbra iniciar el método paint con una llamada a ese par de instrucciones, esto con la finalidad de “borrar” toda la pantalla, se acostumbra el blanco pero puede ser el que cada quien desee.

 

Así por ejemplo si me piden dibujar una línea, un cuadrado sin rellenar, y un cuadrado relleno este sería el código:

 

public void paint(Graphics g) {
      g.setColor(255,255,255); // se establece el color blanco
      g.fillRect (0, 0, getWidth(), getHeight()); // "borra" la pantalla
      g.setColor(10,200,100);
      g.drawLine (0, 0, 100, 100);
      g.drawRect(90, 50, 30, 30);
      g.fillRect (50, 50, 30, 30);
}


Note como ya no se ve ninguna de las letras que aparecía antes, ahora si esta el área de dibujo libre, solo aparece lo que yo mande dibujar.



Clic AQUI para leer más...!

miércoles, 9 de diciembre de 2009

Aplicación de la programación de teléfonos celulares usando J2ME



Ups por fin, terminamos los proyectos finales, ya voy a “postear” más seguido. Hoy les muestro una aplicación practica que se hizo aquí en el ITESI por los alumnos del Grupo de Sistemas Digitales de la carrera de Ingeniería electrónica.

Proyecto: Sistema Electrónico de Identificación por Radio-Frecuencia

Objetivo

Desarrollar un Sistema de hardware y software capaz de identificar y almacenar identificación relevante a la crianza de ganado usando la identificación por radiofrecuencia (RFid). Cabe mencionar que el seguimiento se realiza por un MIDlet programado en un teléfono celular.


La figura siguiente muestra un diagrama a bloques del sistema que se desarrollo.




No voy a entrar en detalle sobre la descripción de cada uno de los bloques, pero el sistema funciona agrandes rasgos así:

1.- Una etiqueta de radiofrecuencia se coloca en el ganado bovino (como si fuera un arete como los que comúnmente se usan) pero la etiqueta tiene un chip especial que contiene un número.

2. Al acercar el lector de RFid, se detecta el número de la etiqueta de RFid que es irrepetible para cada bovino.

3.- El lector de RFid envía el número de etiqueta a la tarjeta DLP-TXRX que se encarga de pasarlo a una PC via puerto USB.

4.- La PC recibe en un programa creado en Java Estándar Edition (J2SE) el número de etiqueta y se lo transfiere (con el mismo programa) a un módulo Bluetooth  conectado al puerto USB de la PC (incluso se hicieron pruebas con PCs que tienen internamente un módulo Bluetooth y el sistema igual funciono muy bien).

5.- El teléfono celular recibe el número de etiqueta vía Bluetooth con un programa creado en Java Micro Edition y registra los datos del bovino.

En el video siguiente se muestran más detalles de los componentes usados y del programa en el celular.




Enseguida se muestran algunas fotos del proyecto.

La figura siguiente muestra la fotografía de las etiquetas de RFid y del lector de RFid, estos fueron adquiridos desde la compañá Parallax



En la figura siguiente se ve el módulo USB que fue comprado a la compañía DLP-Design



Finalmente se ve el programa creado para el celular, obviamente fue programado con Java Micro Edition usando el NetBeans.



En la figura se muestra cuando se inicia la busqueda de dispositivos Bluetooth, esto también fue programado en J2ME.



Aqui muestra la lista de dispositivos Bluetooth encontrados, se elije uno y se conecta para poder recibir el dato de la etiqueta



Enseguida se muestra cuando se detecto la etiqueta y se procede a registrar los datos del bovino.



Bueno aqui dejo este post, solamente fue con fines demostrativos en el siguiente post seguiremos con las lecciones de java.



Clic AQUI para leer más...!