Marco Antonio Montero Chavarría

1) Implementación y creación de una interfaz gráfica para un aplicación móvil que controle los movimientos del carro omnidireccional del arcos lab.

1. Investigación sobre tecnologías existentes, aplicaciones móviles, código, plataformas utilizadas, ya sea raspberry pi o algún otro micro controlador.
2. Instalación Eclipse Java y JDK.java devoleper tools, para creación de aplicaciones android.
3. Creación interfaz gráfica de la aplicación.
4. Estudio del carro omni, funcionamiento y estructura, tipo de sistema que lo controla.
5. Conexión de la aplicación con la computadora personal del carro omni, a través de una conexión wifi.
6. Puesta en prueba de la aplicación

Los medios para la realización de una investigación como esta, presentan una fuente bastante importante de aprendizaje, ya que para el presente trabajo se deben trabajar con distintos lenguajes de programación y más aún entender sobre protocolos de comunicaciones, como por ejemplo tcp/ip. Esto hace de un trabajo como este una fuente integral de conocimiento para futuros trabajos o investigaciones que vayan de la mano con proyectos de programación en plataformas móviles, es decir sentará cierta base teórica y obligará a un esfuerzo extra para la compresión del mismo, que será valiosa a futuro. Además a la larga un sistema simple de movimiento mediante una aplicación móvil permite el acceso a un robot o una plataforma con movimiento en 2D. Permitiría un acceso remoto que puede ayudar a agilizar procesos ya que no se necesitaría un acción directa presencial de un operario sobre el sistema.

La idea principal de esta primera parte yacía en encontrar una plataforma o ambiente de programación, en el cual se pudiera desarrollar una aplicación móvil. Una vez encontrada la misma, estudiar el lenguaje de programación utilizado en la plataforma y crear poco a poco una aplicación simple que cumpliera con 4 necesidades básicas; crear 4 flechas que apuntaran en las direcciones cardinales: norte, sur, este y oeste. Se decidió por programar la aplicación en el sistema operativo android por encima de IOS. Android es un sistema operativo desarrollado por google con kernel Linux y existen muchos más ejemplos y mucho más documentación que se pueden utilizar de referencia para aprender sobre el mismo, en comparación con IOS. Para el IOS de la empresa Apple la creación de una aplicación móvil es un poco más laboriosa ya que tienen ciertos estándares rigurosos que se deben cumplir y aparte solo pueden ser utilizadas por teléfonos iphone. Android es un sistema más libre y muchos más celulares lo utilizan. Ahora bien, se comenzó por la plataforma android studio de la compañía google, que es la más moderna en la actualidad y la que se puede utilizar por excelencia para la creación de una aplicación android. Para desarroladores principiantes existe una guía en la página oficial de google:

https://developer.android.com/sdk/index.html

En ella se detalla paso a paso como instalar la aplicación y los paquetes necesarios para que la misma funcione debidamente, entre ellos los más importantes son los paquetes del javaSDK que se encarga de las simulaciones y de preparar los emuladores de celulares para el android studio. En si el programa una vez instalado tiene todo para comenzar a programar una aplicación y aparte en la misma página existe un tutorial pequeño que explica cómo hacer un “hello world” y obtenerlo en pantalla.

Es simplemente abrir una serie de archivos “sample” y seguir las instrucciones paso a paso. Desafortunadamente el emulador no puede ser usado para una computadora de 32bits ya que el paquete actualizado HAX. del javaSDK que se encarga de las simulaciones solo sirve en sistemas operativos de 64bits y la versión de 32bits desactualizada no funciona con el android studio nuevo. Debido a esto se debió buscar una solución alterna, y se encontró eclipse java que es una plataforma de programación en java equivalente a dr java, pero más profesional. Esta misma puede ser adjuntada al javaSDK versión de 32bits que tiene lo necesario para hacer simulaciones y creaciones de aplicaciones. Además cabe destacar que para crear una aplicación móvil android se requieren dos cosas, conocimiento básico de lenguaje android nativo y conocimiento quizás basto de java, ya que es mediante a lenguaje de programación java que se crean los métodos necesarios para el funcionamiento de la aplicación. Por su parte el lenguaje android nativo se utiliza para asignación de posición de botones, menus, imágenes, barras de tareas en la aplicación. Primero se debía buscar algún tutorial o apoyo que diera instrucciones para instalación y ejecución de eclipse en conjunto con java SDK. Para efecto se encontró una lección online impartida por la universidad autónoma de Madrid, mediante el sitio virtual Edx. La siguiente página, brinda lo necesario para aprender a usar el ambiente de programación, además aprender a instalar los paquetes de SDK para desarrollo de aplicaciones android:

https://www.edx.org/course/jugando-con-android-aprende-programar-tu-uamx-android301x#!

Las lecciones son impartidas por profesores, se requiere crear un usuario y contraseña e inscribirse en el curso, luego se puede seguir en orden o en desorden el curso de acuerdo a lo que se desee.

Ahora bien una vez completados estos pasos, se empezó la programación de la aplicación.

Primero se comenzó con ejemplos de java utilizando comandos creadores de botones para explorar el funcionamiento de la parte java. Se tienen comandos como Jbutton, JFrame, Jpanel que se encargan de la creación de un botón, un cuadro y un panel respectivamente mediante la librería java.swing, y ActionEvent.

Por medio de Jframe se crea el objeto “Arrow button”.

Además por medio de un código como el siguiente se puede crea una interfaz con un botón imagen:

JButton button = new JButton(); try { Image img = ImageIO.read(getClass().getResource(«flecha.png“)); button.setIcon(new ImageIcon(img)); }

* package Carro; * import javax.swing.*; * import java.awt.*; * public class carro{ * * * public static void main(String[] args) { * JFrame frame = new JFrame(“Test”); * frame.setVisible(true); * frame.setSize(500,500); * frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); * * JPanel panel = new JPanel(); * frame.add(panel); * panel.setLayout(new GridLayout(5,5)); * ImageIcon flechaadelante = new ImageIcon(“flechaadelante.jpg”); * JButton button = new JButton(flechaadelante); * panel.add(button); * button.setContentAreaFilled(false); * button.setBorderPainted(false); * button.setFocusPainted(false); * } }

Esto crearía un botón con la imagen que se desee en este caso “flecha.png”. Ahora bien usando todo el ambiente de programación y no solo la parte de java se realizan cosas más interesantes.

Se buscó crear 4 flechas en la interfaz celular simulada y esto se realizó por el comando image button que existe en el grid layout del programa.

Creando cuatro archivos .png se creó las 4 flechas, luego por medio del comando image button en “images and media” se pueden colocar las imagenes como botones en el layout emulado. Además se crea el código android en el activity_main.

<ImageButton android:id=”@+id/imageButton4“ android:layout_width=“wrap_content” android:layout_height=“wrap_content” android:layout_alignLeft=”@+id/imageButton1“ android:layout_alignStart=”@+id/imageButton1“ android:layout_centerVertical=“true” android:contentDescription=”@string/desc“ android:src=”@drawable/felchaizquierda“ />

Cada botón generó un código similar a este de 6-7 lineas. Este código define los parámetros necesarios de posicionamiento del mismo dentro del gridlayout

Luego se debió poner un actionListener, en este caso conocido como “onclickListerner”, al butón para que cuando este sea presionado, suceda algo: se envie un mensaje en pantalla o en consola, enceder, mover, etc. Para este caso se le puso que envié un mensaje “mover hacia x” a consola.

Esto se debe realizar en la parte de java del proyecto, llamado Main Activity.java. Se crea un método privado void setupBotonIzquierda() y así para cada botón, luego se le añade un parámetro que une la imagen a un objeto Button “botónIzquierda” y luego se le añade la capacidad de “escuchar clicks” al butón. Una vez hecho esto se obtiene una pantalla con 4 flechas que al ser clickeadas presentan el mensaje en pantalla “mover hacia (una dirección cardinal)”

protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); setupBotonDerecha(); setupBotonIzquierda(); setupBotonAdelante(); setupBotonAtras(); } private void setupBotonDerecha(){ Button botonderecha = (Button) findViewById(R.id.imageButton3); botonderecha.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { TODO Auto-generated method stub Log.i(“Omni”, “Mover derecha”); } }); }'' Y el mismo se repite para cada una de las flechas necesarias.