NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO...

46
NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1 www.dagel.com.ar

Transcript of NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO...

Page 1: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

NUESTRA PRIMERA APLICACION

PRIMERA APP NANO LADER V1

www.dagel.com.ar

Page 2: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[1]

PAGINA EN BLANCO

Page 3: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[2]

CONTENIDO

1-Descripcion…………………………………………………………….3

2-Primeros Pasos………………………………………………………..4

3-Proyecto NANO LADDER V1 APP...………………..…………..…5

4-Nuestra Primera APP…………………………………………………8

Page 4: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[3]

1-Descripcion

En el Presente manual daremos los pasos básicos pero necesarios para

poder crear nuestra propia Aplicación, para poder comandar las salidas de

nuestro NANO LADDER V1.

Haremos uso de la plataforma MIT APP INVENTOR 2 para la creación de

nuestra Aplicación, dado que es más intuitiva para la gran mayoría de las

personas. Sin embargo no se profundizara en el manejo de la misma, salvo

las necesidades para crear la Aplicación, dado que no pretendemos con-

fundir con tanto conocimiento.

Se realizara un programa en nuestro NANO LADDER V1 para que este res-

ponda a los comandos enviados de nuestra Aplicación.

Se darán los procedimientos pasos por paso para no confundir al estudian-

te, programador o aficionado que dará inicio a esta nueva experiencia.

Habrá que tener en cuenta que la aplicación creada y desarrollada en las

formas graficas puede diferir en cada dispositivo móvil, por ende cada pro-

fesional deberá adecuar la interfaz gráfica de la misma a las necesidades

del dispositivo móvil con el que trabaje la aplicación.

Esperamos que sea de su agrado y no dude en consultarnos en nuestro si-

tio web cualquier duda que surja en este manual.

El Equipo de DAGEL

Page 5: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[4]

2-PRIMEROS PASOS

En principio debemos disponer de una cuenta en la plataforma MIT APP INVEN-

TOR 2, la misma se puede generar visitando el sitio web de la misma, se deja en-

lace a continuación.

http://appinventor.mit.edu/explore/

Sería muy conveniente para las personas que se inician por primera vez en esta

plataforma, explorar la página e investigar sobre que trata la misma, con el con-

cepto de familiarizarse.

En Internet hay mucha información de cómo registrarse en la plataforma como así

también como empezar a realizar los desarrollos en la misma, sin embargo el pro-

cedimiento es sencillo.

La aplicación que desarrollemos, tendrá como misión comandar 3 salidas digitales

a Relé de nuestro NANO LADDER V1, para eso deberemos en un principio desa-

rrollar la APP y después pasaremos a crear nuestro programa en nuestro NANO

LADDER V1. Ambos Programas se comunicaran y al hacerlo se podrán poner en

funcionamiento distintos procesos, en este caso comandaremos 3 procesos, de-

nominados de la siguiente manera.

1-SISTEMA DE ILUMINACION

2-SISTEMA DE AGUA

3-SISTEMA DE INGRESO

Se podría entender de la siguiente forma:

El primer proceso comandaría todo un sistema comprendido de luminarias (ilumi-

nación exterior etc…), el segundo proceso comandaría un sistema de agua para

distintas funciones (riego etc…) y el tercer proceso comandaría el sistema de in-

greso a una propiedad (Portón de acceso etc…), estos son algunos ejemplos de

procesos que se pueden comandar, sin embargo su imaginación o necesidad es la

que cuenta a la hora de armar una aplicación de este tipo.

Es MUY IMPORTANTE también, disponer de cierta experiencia en Proyectos con

Microladder en NANO LADDER V1 y haber leído y/o consultados los manuales de

MICROLADDER y el Manual de Usuario de NANO LADDER V1, para entender

con mayor rapidez los conceptos asociados a la creación de nuestro primer pro-

yecto, dado que algunos pasos se darán como entendidos y no serán explicados.

Los Manuales se pueden consultar en nuestra página web.

Page 6: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[5]

3-PROYECTO NANO LADDER V1 APP

Vamos a empezar realizando nuestro programa en nuestro NANO LADDER V1

para luego pasar a crear la aplicación correspondiente en el dispositivo móvil.

Para este Ejemplo deberemos tener la siguiente configuración:

Pin Configuración Función P07 Salida Digital (DO) Salida1: Sistema de Iluminacion

P011 Salida Digital (DO) Salida2: Sistema de Agua

P014 Salida Digital (DO) Salida3: Sistema de Ingreso

RD Configuración Función RD000.0 BIT CMD 1 Sistema de Iluminacion

RD000.1 BIT CMD 2 Sistema de Agua

RD000.2 BIT CMD 3 Sistema de Ingreso

Vamos a iniciar “ML_PC” para empezar a desarrollar nuestro Programa para

NANO LADDER V1.

Iniciamos un Proyecto nuevo y realizamos las configuraciones de Entradas, Sali-

das y las variables RD según nuestro cuadro de configuración. Ver Figura 01 y 02

Nota Aclaratoria: En el “capítulo 6” del “Manual de Microladder” se describe el pro-

cedimiento de configuración y creación de Variables.

Fig. 01 Configuración

Page 7: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[6]

Nota Aclaratoria: Aunque no se empleen en este ejemplo los PINES de las Entra-

das Digitales “P02”,”P03”,”P04”,”P05” y “P06” y los PINES del LCD

“P012”,P013”, “P016” y del “P21 al P28” y el restante PIN de la Salida “P015”,

es conveniente dejarlo Configurado para tal fin como se observa en Figura 01.

Continuando con el proyecto vamos a realizar el programa para comandar los sis-

temas.

Vamos a realizar un programa para que a través de las Variables configuradas

“RD000.0”, “RD000.1” y “RD000.2” Se Activen las Salidas “DO07”,”DO011” y

“DO014”.

El Programa terminado debe ser como el que se puede ver en la Figura 003.

Fig. 02 Símbolos.

Page 8: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[7]

Terminado el Programa transferimos el proyecto a nuestro NANO LADDER V1.

Fig. 03 Programa Terminado

Page 9: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[8]

4-NUESTRA PRIMERA APP

Vamos a comenzar creando nuestra primera aplicación, para esto debemos estar

en la plataforma MIT APP INVENTOR 2 y empezar un nuevo proyecto.

Sobre la imagen de la figura 1 se puede observar la ventana para iniciar una Apli-

cación nueva, sobre la misma debemos hacer clic con el mouse sobre la pestaña

“Create apps” (remarcada en la figura 1).

Una vez hecho dicho paso, vamos a hacer clic sobre la pestaña “start new Pro-

yect”. Ver Figura 2.

Una vez realizado este paso deberemos agregar un nombre a nuestra aplicación,

la cual solo a modo indicativo para este manual podría ser

“CONTROL_DOMOTICO”. Pero a tener en cuenta, que el nombre a disponer va a

ser el que usted considere necesario a su desarrollo.

Fig. 1 Creación APP.

Fig. 2 Nuevo Proyecto

Fig. 3 Nombre del Proyecto.

Page 10: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[9]

Realizado esto, pasaremos a tener nuestra primera aplicación creada, en la cual

se puede observar la imagen de un dispositivo móvil con su pantalla en blanco. A

partir de este punto empezaremos a desarrollar nuestra Aplicación.

Vamos a poder observar que sobre la plataforma disponemos de diferentes he-

rramientas para la creación de la aplicación, vamos a tener que familiarizarnos con

la misma, con el fin de poder conocer todos los recursos que dispone, a grandes

rasgos podemos observar a su margen izquierdo que tenemos componentes y que

haciendo clic sobre cada uno disponemos de propiedades correspondientes a su

tipo. Por ejemplo en el componente “User Interface” tendremos elementos tales

como Botones (Button), Etiquetas (Label) y otros.

En todo momento disponemos de la posibilidad de cambiar el idioma de la plata-

forma si es que no estamos familiarizados con algunos de ellos.

Vamos a empezar, nos situaremos sobre el margen izquierdo y en el componente

“User Interface” Arrastramos un “Label” a la pantalla del dispositivo móvil.

Fig. 4 Proyecto Creado.

Page 11: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[10]

Después de haber hecho dicho paso vamos a centrar dicho “Label” posicionán-

donos ahora en el margen derecho y en “Properties” iremos a las propiedades

“AlignHorizontal” y “AlignVertical” y establecemos para “AlignHorizon-

tal=Center” y para “ AlignVertical=top”. Tener en cuenta que dichas opciones se

encuentran teniendo seleccionado “Screen1”, que es nuestra primera pantalla del

dispositivo móvil. Ver figura 5.

Ahora deberemos seleccionar nuestro “Label1” para poder entrar en sus propie-

dades y veremos en el margen derecho aparecen dichas propiedades, buscare-

mos la propiedad “Text”.

Borramos lo que se encuentra descripto en la casilla “Text” y pondremos como

ejemplo CONTROL CASA. También podremos cambiar el nombre a nuestro “La-

bel1” en la propiedad “Rename” y alternativamente cambiar otras propiedades,

como color de Fondo “BackgroundColor”, tipo de Letra “FonTypeface” y otras.

Ver figura 6.

Fig. 5 Label.

Page 12: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[11]

Ahora vamos a “Layout” situado en el margen izquierdo y seleccionamos el com-

ponente “HorizontalArrangement” lo arrastramos a la pantalla del dispositivo

móvil por debajo del “Label1” creado anteriormente, y establecemos en la propie-

dades “Height=Automatic” y “Width=Fill parent”, haremos la misma operación an-

terior para arrastrar dos “HorizontalArrangement” más y de esta forma tendre-

mos 3 “HorizontalArrangement”, pondremos las mismas propiedades para cada

“HorizontalArrangement” arrastrado. Ver figura 7.

Al hacer esto hemos creado 3 contenedores para situar posteriormente en ellos,

distintos componentes de la interface gráfica de la aplicación que a continuación

usaremos.

Fig. 6 Propiedades Label.

Page 13: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[12]

Vamos a realizar a continuación el agregado de dos botones a la interfaz gráfica,

buscaremos para esto en “User Interfase” el componente “Button” y lo arras-

tramos adentro del “HorizontalArrangement1” una vez agregado estos dos bo-

tones en las propiedades del “HorizontalArrangement1” pondremos en la pro-

piedad “AlignHorizontal=Center” y “AlignVertical=top”, de esta manera los boto-

nes agregados se quedaran situados según se ve observa en la figura 8.

Fig. 7 Horizontal Arrangement.

Fig. 8 Botones.

Page 14: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[13]

Vamos a repetir el mismo paso anteriormente hecho, para agregar dos botones

más a cada “HorizontalArrangement” creado, esto sería el “HorizontalArran-

gement2” y el “HorizontalArrangement3” a los cuales como se dijo anterior-

mente se le van agregar dos botones a cada uno de ellos, manteniendo las mis-

mas propiedades que el “HorizontalArrangement1” en cuanto a su “AlignHori-

zontal” y su “AlignVertical” .Ver figura 9.

Ahora nos situaremos sobre el “Button1” haciendo un solo clic sobre él, en la in-

terfaz gráfica, y de esa manera podremos observar que hacia el margen derecho

de la plataforma aparecen las Propiedades “Properties” del “Button1”. Dentro

de esas propiedades buscaremos “Width” y escogemos la opción de “Fill pa-

rent”, luego de esto buscaremos la Propiedad “Text” y colocaremos en el campo

perteneciente de dicha propiedad el texto “Sistema de Iluminación OFF”, haremos

el mismo procedimiento para el “Button2”, con la salvedad que en la propiedad

“Text” del “Button2” pondremos “Sistema de Iluminación ON”. Ver figura 10.

Fig. 9 Agregar Botones.

Page 15: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[14]

Vamos a realizar el mismo procedimiento para los demás botones agregados en

los otros “HorizontalArrangement, pero con la misma salvedad anterior, de cam-

biar la propiedad “Text” en cada uno de ellos.

Para el “Button3” la propiedad “Text” seria “Sistema de Agua OFF”.

Para el “Button4” la propiedad “Text” seria “Sistema de Agua ON”.

Para el “Button5” la propiedad “Text” seria “Sistema de Ingreso OFF”.

Para el “Button6” la propiedad “Text” seria “Sistema de Ingreso ON”.

Hecho esto deberíamos tener la interfaz del dispositivo móvil de la siguiente mane-

ra con respecto a la figura 11.

Fig. 10 Propiedades Botones.

Page 16: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[15]

Con esto ya tendríamos una parte de la aplicación grafica desarrollada, pero va-

mos a mejorar un poco más la apariencia de la misma. Vamos a darles color a los

Botones creados, para esto vamos a la propiedad “BackgroundColor” de cada

“Button” y escogemos el color dentro de la gama de colores existentes, pudiendo

nosotros desarrollar nuestro color eligiendo dentro de la propiedad “Background-

Color” la opción “Custom”. Para este fin hemos elegido el color Rojo para los

botones “OFF” y el color Verde para los botones “ON”.

Además acuérdese que puede definir otras propiedades para los “Button” que se

encuentran creados, nosotros en el presente manual no lo haremos para no hacer-

lo tan extenso, pero es buena opción por no decir obligatoria, la de mejorar lo más

que pueda la interfaz gráfica para hacerla más agradable. Ver figura 12.

Fig. 11 Propiedades Botones.

Page 17: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[16]

Ya hemos realizado la parte gráfica de nuestra aplicación, después seguiremos

modificando algunas propiedades de la misma si es necesario.

Ahora pasaremos a la parte de programación, para que nuestra aplicación interac-

túe con nuestro NANO LADDER V1 y así comandaremos nuestras salidas vincu-

lados a los relés 1,2 y 3 que están asociados nuestros procesos. Para esto prime-

ro vamos a determinar de qué manera vamos a hacerlo, y para eso debemos ir a

“Connectivity” sobre el margen izquierdo de la plataforma y estando en las op-

ciones, buscaremos “BluetoothClient” lo seleccionamos y lo arrastramos a la

pantalla de nuestro dispositivo, no interesa la posición de donde lo soltemos al

arrastrarlo, dado que el componente “BluetoothClient” es un componente “no

visible” y por lo tanto no estará a la vista en la interfaz gráfica de nuestra aplica-

ción.

Quedando de esta manera como se muestra en la figura 13.

Fig. 12 Propiedades Botones.

Page 18: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[17]

Ahora vamos a agregar dos botones “Button” con el fin de usarlos para conectar

y desconectar la aplicación con nuestro NANO LADDER V1 a través de Bluetooth,

situamos los botones arrastrándolos a la interfaz gráfica de nuestro dispositivo

móvil como lo veníamos haciendo, situamos un “Button” y después el otro, en

donde nos parezca más cómodo a nosotros, en este caso lo vamos a situar uno

arriba y el otro abajo, como se ve en la figura 14.

Una vez realizado la ubicación de los mismos vamos a definir el texto de los boto-

nes.

Para el “Button7” la propiedad “Text” seria “Conectar”.

Para el “Button8” la propiedad “Text” seria “Desconectar”.

Podemos asignarle un color de fondo a cada botón y lo que nos parezca adecuado

también en las demás propiedades de los mismos.

Fig. 13 Componente BluetoothClient.

Page 19: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[18]

Nuestra Aplicación ha quedado definida muy básicamente, pero debemos antes

de continuar asignar un nombre a cada componente de la interfaz gráfica, dado

que por ejemplo tendremos nuestros Botones “Buttons” con el nombre que APP

INVENTOR le asigno por defecto y estos no se corresponden con nuestras inten-

ciones de comando. Para ello vamos a la propiedad “Rename” donde vamos a

poder asignar dichos nombres. Hay que tener en cuenta que los nombres que le

asignemos a los componentes que tendremos, deben de cumplir con una sintaxis

significativa de lo que hacen.

Por ejemplo:

Para el componente “Button1” que contiene en la propiedad “Text” el Texto “Sis-

tema de Iluminación OFF”, se le podría asignar como nombre del componente

“Sist.Ilumin.OFF” y asi para los respectivos componentes quedando de la si-

guiente manera:

-“Button1” Rename=”Sist.Ilumn.ON”

-“Button2” Rename=”Sist.Ilumn.OFF”

-“Button3” Rename=”Sist.Agua ON”

Fig. 14 Conectar y Desconectar

Page 20: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[19]

-“Button4” Rename=”Sist.Agua OFF”

-“Button5” Rename=”Sist.Ingre.ON”

-“Button6” Rename=”Sist.Ingre.OFF”

-“Button7” Rename=”Conectar”

-“Button8” Rename=”Desconectar”

Estos cambios se aprecian en la Figura 15.

Fig. 15 Rename Componentes

Page 21: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[20]

Realizado este paso, ahora empezaremos a realizar la programación correspon-

diente a nuestra aplicación, iremos a la parte superior derecha la ventana y hare-

mos clic en “Blocks”. Ver figura 16

Podremos observar que se inicia una pantalla en blanco y que la interfaz ha cam-

biado en sus márgenes, dado que ahora estamos situados en la pantalla de Blo-

ques “Blocks” la que corresponde a la parte de programación. Ver Figura 17.

Fig. 16 Blocks.

Fig. 17 Blocks.

Page 22: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[21]

Vamos a comenzar definiendo la comunicación Bluettooh de nuestro dispositivo

para que se comunique con nuestro NANO LADDER V1, para este paso lo vamos

a hacer de la siguiente manera:

Vamos a utilizar el “Button7” al cual lo habíamos denominado “Conectar”, para

ello lo vamos a buscar sobre el margen izquierdo en donde se encuentran los

componentes de “Blocks”. Ver figura 18.

Cuando lo hayamos ubicado vamos a hacer un solo clic sobre él, y de esta mane-

ra nos aparecerán las propiedades asociadas a dicho “Conectar”

Podremos Observar que aparecen muchos eventos relacionados a la acción del

botón “Conectar”, es importante descubrir y aprender cada una de ellos para ser

más eficientes a la hora de armar un código en los proyectos de nuestra Aplica-

ción, nosotros vamos a utilizar el evento “When Conectar. Click” lo cual nos

permitirá que una vez que oprimamos sobre él, se produzca la acción asociada a

la conexión, que iremos a programar a continuación.

Para seleccionar dicho evento haremos clic en él y automáticamente se pondrá en

la pantalla de programación. Ver Figura 19 y Figura 20.

Fig. 18 Propiedades “Conectar”

Page 23: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[22]

Ahora vamos a programar el evento asociado al botón “Conectar” a través de

“When Conectar.Click”.

Fig. 19 Selección Evento “When Conectar.Click”

Fig. 20 Evento “When Conectar.Click”

Page 24: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[23]

Nuestro objetivo en este paso va a ser que se conecte directamente con nuestro

NANO LADDER V1, y lo vamos a hacer a través de la dirección “MAC” que tiene

nuestro NANO LADDER V1, para ello establecemos los criterios de programación

correspondientes.

Vamos a determinar que si se oprime el botón “Conectar” y si esta Bluetooth dis-

ponible, entonces que se conecte a la dirección “MAC adress” “xxxx” (donde “xxxx”

es la dirección “MAC adress” que viene en nuestro NANO LADDER V1 y se entre-

ga al momento de la compra).

Veremos a continuación los pasos a seguir.

Vamos a ir a las propiedades de “Blocks” y en “Built-in” haremos un clic sobre

la pestaña “Control”, ahí veremos que se nos abren todos los bloques lógicos

que pertenecen a “Control” y seleccionamos el Bloque “If Then”. Ver Figura 21.

Fig. 21 Control “If Then”

Page 25: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[24]

Una vez hecho el paso anterior tendremos el Bloque “If Then” situado en la pan-

talla. Deberemos arrastrarlo y posicionarlo dentro del Bloque “When Conec-

tar.Click”. Ver Figura 22.

Debiendo quedar como se muestra en la figura 23.

Fig. 23 Control “If Then”

Fig. 22 Control “If Then”

Page 26: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[25]

Con esto hemos programado el evento del “Conectar” y le hemos agrego el Blo-

que “If Then”, ahora resta darle la instrucción al bloque “If Then”, la cual va a

determina que si Bluetooth está disponible.

Para ello vamos a buscar dentro de “Built In” a “BluetoothClient1”, cuando se

nos desplieguen los eventos asociados a “BluetoothClient1”, vamos a seleccio-

nar “Call BluetoothClient1.Connect address”. Este Bloque nos permite llamar a

la función Conectar Cliente Bluetooth con la dirección que le especifiquemos. Ver

Figura 24.

Ahora tendremos que unir dicho Bloque a la sentencia “If Then” sobre el”If” de-

jando la sentencia “Then” vacía, si el Lector es una persona experimentada en

APP INVENTOR seguramente ya le puede dar uso a la función “Then”, en caso

contrario para un lector que recién inicia en APP INVENTOR le sugerimos a modo

de practica que use dicha función para colocar un “Label” por ejemplo para avisar

si la conexión fue exitosa. Nosotros no le daremos uso en el presente manual y lo

dejaremos a criterio de cada uno el uso apropiado. Ver Figura 25.

Fig. 24 Control “If Then”

Page 27: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[26]

Vamos a colocar la dirección “MAC adress”, en nuestro caso va a ser

“00:11:35:96:02:29”, para colocar la dirección “MAC adress” en nuestro Bloque

“Call BluetoothClient1.Connect address”. Vamos a tener que ir a la pestaña

“Bloks” y seleccionar el componente “Text” sobre la lista de propiedades que se

despliegan del componente “Text” vamos a seleccionar el casillero vacío. Ver Fi-

gura 26.

Una vez que lo hayamos seleccionado vamos a unirlo al bloque “Call Blue-

toothClient1.Connect address” como veníamos realizando con el resto de los

Bloques que hemos programado, una vez realizado este paso, sobre el Bloque

vacío de “Text” y realizando un clic dentro de ese bloque vacío, vamos a poder

introducir la dirección “MAC adress” tal como se encuentra escrita. Ver figura 27.

Fig. 25 Bloque “CallBluetoothClient1.Connect address”

Page 28: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[27]

Con esto ya tenemos la conexión a nuestro NANO LADDER V1 a través de Blue-

tooth. Es necesario saber que antes de proceder a conexión real de nuestra apli-

cación que estamos desarrollando con nuestro NANO LADDER V1, es necesario

que estén anteriormente vinculados a través de Bluetooth. Así es posible la cone-

xión final con la dirección “MAC adress”. El proceso de vinculación es sencillo y es

el mismo procedimiento que cualquier otro dispositivo Bluettooh a nuestro teléfono

móvil.

Fig. 26 Bloque “Text”

Fig. 27 Bloque Direccion MAC

Page 29: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[28]

Siguiendo con el proyecto vamos a programar el evento para la desconexión a

través del Botón desconectar, para ello debemos buscar en botón “Desconectar” y

dentro de sus propiedades elegir “When Desconectar.Click” y arrastrarlo a la

pantalla de aplicaciones. El Procedimiento es igual al del Botón “Conectar”. Ver

Figura 28 y 29.

Fig. 28 Boton “Desconectar”

Page 30: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[29]

Vamos a continuar integrando la función de desconexión al Boton “Desconectar”,

para eso vamos a situarnos nuevamente en la pestaña “Bloks” y vamos a hacer

clic en el componente “BluetoothClient1”, para que se nos abran las propieda-

des de ese componente y de ahí vamos a elegir “Call Blue-

toothClient1.Disconnet”. Ver figura 30.

Fig. 29 Boton “Desconectar”

Fig. 30 “Call BluetoothClient1.Disconnet”

Page 31: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[30]

Seleccionado el Bloque “Call BluetoothClient1.Disconnet” vamos a unirlo al

Bloque “When Desconectar.Click” para que cada vez que se oprima el Botón

“Desconectar” este llame a la función “Call BluetoothClient1.Disconnet” y así

se detenga la conexión Bluetooth con nuestro NANO LADDER V1. Ver Figura 31.

Si quisiéramos ya podríamos probar la conexión a nuestro NANO LADDER V1

para saber si nuestra programación hasta el momento ha sido exitosa, nosotros

vamos a continuar con el desarrollo del proyecto y la programación del mismo.

Lo que vamos a realizar ahora son los pasos para el envió de los comandos a

nuestro NANO LADDER V1, cada vez que se oprime un Boton asociado a la Acti-

vación o Desactivación del Sistema que hemos denominado anteriormente a cada

Boton.

Por ejemplo:

Teníamos el Boton”Sist_Ilumn_ON” para Activar la Iluminación y el Boton

”Sist_Ilumn_OFF” para Desactivar la Iluminación.

Con estos Botones vamos a empezar.

Fig. 31 Bloque “Call BluetoothClient1.Disconnet”

Page 32: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[31]

Los comandos que se emplean en NANO LADDER V1 son Tramas, se podría de-

finir como Trama a una secuencia de datos que se envían a nuestro NANO LAD-

DER V1 para que el mismo ejecute una determinada tarea o función dentro del

programa que tiene cargado. Estos datos que se van a enviar, se va a hacer a tra-

vés de los Botones que hemos definido para tal sistema en la aplicación y median-

te la conexión Bluetooth.

Vamos a definir conceptos del programa que tiene cargado nuestro NANO LAD-

DER V1.

En principio nosotros vamos a forzar Variables del tipo BIT, que pueden tomar dos

estados solamente 0 y 1, lo cual se traduce como 0=Desactivado y 1=Activado.

Aprovechando esto vamos a poder Activar y Desactivar los Sistemas que hemos

Creados, estas variables se denominan “RD” y lo que vamos a hacer es modificar

los estados de esas “RD” que están asociadas a comandar nuestras Salidas.

Por ejemplo en nuestro programa tenemos la RD 000.0 para el comando de la Sa-

lida 1 (Sistema de Iluminacion), la RD 000.1 para la Salida 2 (Sistema de

Agua) y RD 000.2 para la Salida 3 (Sistema de Ingreso).

En resumen vamos a forzar dichas variables y así tendremos el control de nuestro

Sistema.

Como aclaración se deja dicho que no es posible forzar las Salidas Directamente,

por eso se emplean las Variables anteriormente denominadas.

“En el “MANUAL DE MICROLADDER” que se encuentra en nuestra página web

vamos a encontrar información completa y detallada sobre las Variables RD”

Las tramas (en formato Hexadecimal) para modificar el estado de dichas Variables

son:

-Para poner a “1” RD 000.0 se envía “C9 00 00 0C 04 01 00 00 00 11 CA”

-Para poner a “0” RD 000.0 se envía “C9 00 00 0C 04 00 00 00 00 10 CA”

-Para poner a “1” RD 000.1 se envía “C9 00 00 0C 04 01 01 00 00 12 CA”

-Para poner a “0” RD 000.1 se envía “C9 00 00 0C 04 00 01 00 00 11 CA”

-Para poner a “1” RD 000.2 se envía “C9 00 00 0C 04 01 03 00 00 14 CA”

-Para poner a “0” RD 000.2 se envía “C9 00 00 0C 04 00 03 00 00 13 CA”

Page 33: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[32]

Vamos a comenzar a terminar la aplicación y se podrán ver cuáles son los pasos

para el envío de las Tramas anteriormente explicadas.

Tendremos que buscar en la pestaña de “Blocks” el Boton”Sist_Ilumin_OFF”

haremos un clic sobre él y nos parecen sus propiedades, elegimos “When

Sist_Ilumin_OFF.Click do”. Ver Figura 32.

Quedando seleccionado y listo en la pantalla de aplicación. Ahora vamos a utilizar

un Bloque de Control “If Then”, lo seleccionamos y se le añadimos al Bloque

“When Sist_Ilumin_OFF.Click do” como hemos hecho anteriormente con los

demás Bloques. Ver Figura 33

Fig. 32 Bloque “Sist_Ilumin_OFF”

Page 34: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[33]

Ahora vamos a seleccionar para la parte del “If” el componente “Blue-

toothClient1.Available” que se encuentra dentro de las propiedades de “Blue-

toothClient1”. Ver Figura 34.

Fig. 33 Bloque Armado

Fig. 34 “Bluetooth.Client1.Available”

Page 35: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[34]

Este componente nos dice si Bluetooth está habilitado que junto con la sentencia

“If” lo que hace es comprobar si está habilitado el Bluetooth para ejecutar lo que

se encuentra en la parte “Then” del Bloque. Ver Figura 35.

Vamos a programar la parte “Then” del Bloque “If”, o que haremos es seleccio-

nar otro componente de “BluetoothClient1” denominado “Call Blue-

toothClient1.SendBytes list”. Ver Figura 36.

Fig. 35 “Bluetooth.Client1.Available”

Fig. 36 Selección “Bluetooth.Client1.SendBytes list”

Page 36: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[35]

Este componente se encarga de enviar una lista de Bytes al Cliente Bluetooth, lo

vamos añadir al “Then” del Bloque “If”. Para posteriormente usarlo para el envío

de las tramas. El bloque finalmente queda como se aprecia en la Figura 37.

Ahora debemos seleccionar el componente “List” y elegir dentro de sus propie-

dades “Make a list”. Ver Figura 38.

Fig. 37 “Bluetooth.Client1.SendBytes list”

Fig. 38 Seleccion“Make a list”

Page 37: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[36]

Ahora añadimos el Bloque “Make a list” al “list” del Bloque “Call Blue-

toothClient1.SendBytes list”. Ver Figura 39.

Ahora vamos a buscar el Componente “Math” lo seleccionamos y dentro de sus

propiedades elegimos “convert number”. Ver Figura 40.

Fig. 39 “Make a list”

Fig. 40 Selección “convert number”

Page 38: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[37]

Realizado esto lo añadimos a la primera posición del Bloque “Make a list”.ver

Figura 41.

Este Bloque lo vamos a utilizar para realizar la conversión de los valores de la

Trama (que se encuentran en formato Hexadecimal) a formato decimal.

Para ello vamos a tener que cambiar su factor de conversión, dado que el Bloque

por defecto lo tiene en “base 10 to hex” como se puede apreciar en la Figura 41,

para modificar dicha opción de conversión, debemos hacer clic sobre la base de

conversión del Bloque y Seleccionar “hex to base 10”. Ver Figura 42.

Fig. 41 “convert number”

Page 39: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[38]

Quedando como se ve en la Figura 43.

Fig. 42 Cambio de factor de conversión “convert number”

Fig. 43 “convert number”

Page 40: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[39]

Vamos a añadir al Bloque “convert number” los valores de la trama en Formato

Hexadecimal, para eso tendremos que seleccionar el componente “Text” y dentro

de sus propiedades elegimos el casillero vacío. Ver Figura 44.

Una vez realizado esto, añadimos ese casillero vacío al Bloque “convert num-

ber”. Ver Figura 45.

Fig. 44 Selección “Casillero Text”

Fig. 45 “Text”

Page 41: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[40]

Dentro del “Casillero Text” vamos a empezar a colocar los valores en Hexadeci-

mal que componen la Trama, lo vamos a hacer de la siguiente forma.

Vamos a Empezar con la primer Trama que habíamos visto anteriormente y que

se encarga de poner a “0” la Variable RD 0000.0

La Trama está formada de la siguiente forma:

C9 00 00 0C 04 01 00 00 00 11 CA

Y lo que vamos a realizar es lo siguiente, a cada “Casillero Text” le va a corres-

ponder dos dígitos Hexadecimales que vienen en la Trama, entonces copiamos

los dígitos y se la pasamos al “Casillero Text” empezaremos por los dígitos

“C9”. Ver Figura 46.

Ahora vamos a hacer lo mismo para los demás dígitos de la Trama, pero si pres-

tamos atención en la figura 46 vemos que solo disponemos en el Bloque “Make a

list” de una sola ubicación libre (dado que hemos ocupado la primera), para dis-

poner, lo cual no nos alcanzaría para armar toda la Trama, entonces lo que vamos

a hacer será darle más casilleros al Bloque “Make a list” de la Siguiente forma.

Vamos a hacer clic en la Casilla de color azul del Bloque “Make a list” y veremos

que se nos abre una ventana con opciones, entre esas opciones que aparecen

elegimos “ítem” y se lo agregamos a “list” que se encuentra a la derecha. Ver

Figura 47.

Fig. 46Trama “Text”

Page 42: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[41]

Vamos a agregar en total 11 “ítem” a “list” contando los dos que ya teníamos.

Ver Figura 48.

Fig. 47 Agregado de “ítem”

Fig. 48 “ítem”

Page 43: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[42]

Ahora continuando con el procedimiento vamos a seguir añadiendo más Bloques

“convert number” junto con el “Casillero Text” al Bloque “Make a list”, pero

para hacerlo más dinámico vamos a duplicar el bloque “convert number” ya

creado de la siguiente forma.

Vamos a posicionarnos sobre el Bloque “convert number” con el puntero del

mouse y haremos clic derecho, al hacerlo nos van a parecer opciones de ese Blo-

que, y elegimos “Duplicate”. Ver Figura 49.

Haciendo esto nos genera otro Bloque “convert number” ídem al seleccionado

anteriormente en donde vamos a terminar de añadirlo al Bloque “Make a list” pa-

ra poder así terminar de construir la trama. Ver figura 50.

Fig. 49 “Duplicate”

Page 44: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[43]

Simplemente nos queda cambiar los dígitos del “Casillero Text” del nuevo “con-

vert number” por lo que corresponden con la continuación de la Trama.

Repetimos este paso para los restantes “convert number”. Figura 51.

Fig. 50 “make a list” completa

Fig. 51 Bloque finalizado

Page 45: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[44]

Hemos terminado de realizar la programación o mejor dicho el evento asociado al

Boton “Sist_Ilumin_OFF”.

Análogamente vamos a realizar el mismo paso para los demás Botones asociados

al control de cada sistema, de esta manera a cada Boton le corresponde un even-

to, el cual deberá enviar las tramas correspondientes anteriormente explicadas.

Finalizada toda la secuencia de procedimientos y pasos, nuestra aplicación habrá

quedado lista, entonces podemos hacer la prueba de la misma desde el margen

superior en donde vamos a encontrar la opción “Built”. Ver Figura 52.

La opción “Built” nos va a empaquetar todo nuestro proyecto, generando un ar-

chivo con extensión APK, que es el archivo que contiene todo nuestro proyecto y

el cual deberemos instalar en nuestro dispositivo móvil.

Dentro de las opciones “Built” tendremos dos maneras de llevar nuestro archivo

APK a nuestro dispositivo móvil, la primera opción es escanear el código QR el

cual nos va a permitir posteriormente escaneado el código descargar el archivo PK

en nuestro dispositivo móvil.

Fig. 52 “Built”

Page 46: NUESTRA PRIMERA APLICACION APP NANOLADDER V1... · NUESTRA PRIMERA APLICACION PRIMERA APP NANO LADER V1

[45]

La segunda opción es descargando el archivo APK en nuestra computadora para

luego posteriormente pasarlo a nuestro dispositivo móvil a través de un cable USB

por ejemplo.

Posiblemente cuando veamos nuestra aplicación instalada en nuestro dispositivo

móvil no estemos muy contento con nuestra interfaz gráfica, pero es preciso re-

cordar que la misma se puede modificar y crear algo mucho más elaborado con

imágenes de fondo, imágenes para nuestro botones y etc…dado que la plataforma

APP INVENTOR tiene muchas posibilidades en gráficas como así también en blo-

ques de programación.

Como última recomendación invitamos al lector a continuar con el desarrollo de la

aplicación para convertirla en algo más profesional y elegante para desarrollos

propios o profesionales.

Recordamos también que cualquier duda nos contacte a través de nuestra página

web.