Introducción a dispositivos IoT.

Transcripción

1 Interfaces y Periféricos. Guía 6. 1 Introducción a dispositivos IoT. Facultad: Ingeniería Escuela: Electrónica Asignatura: Interfaces y Periféricos (IYP111). Lugar de Ejecución: Microprocesadores (3.23). Objetivo general. Desarrollar habilidades en el uso del entorno de programación de Particle para la creación de aplicaciones básicas sobre IoT en el microcontrolador Photon. Objetivos Específicos. Unir código html a las aplicaciones que se desarrollan para microcontroladores. Comprender las características básicas del entorno de desarrollo Web IDE. Evaluar de forma rápida los diferentes puertos I/O tanto analógicos como digitales del microcontrolador Photon. Materiales y equipos. 1 Computadora con sistema operativo Linux o Windows y con acceso a Internet. 1 Teléfono móvil o tablet con sistema operativo Android (propiedad del estudiante). 1 Cable USB (tipo A hacia tipo micro USB). 1 Access Point (1 dispositivo para todo el laboratorio). 1 Microcontrolador Photon de Particle. 1 tarjeta I/O. 1 Potenciómetro de 10kΩ. 1 Breadboard. 1 Pinza punta plana. 1 Cortadora (pinza de corte diagonal). 12 jumpers o cable UTP. Introducción Teórica. El internet de las cosas (IoT, Internet of Things por sus siglas en inglés) conecta los objetos inteligentes (Smart) con el internet. La intención es generar un intercambio de datos e información a los usuarios que permita tener un conocimiento profundo que pueda enriquecer la productividad, crear modelos para nuevos negocios y generar utilidades reales. El Internet del Todo (IoE por sus siglas en inglés) consiste en reunir personas, procesos, datos y cosas para conseguir que las conexiones de red sean más pertinentes y valiosas que nunca, convirtiendo la información en acciones que creen nuevas capacidades, experiencias más ricas y oportunidades económicas sin precedentes para las empresas, las personas y los países, (Cisco, 2013).

2 2 Interfaces y Periféricos. Guía 6. Internet del Todo describe un mundo en el que miles de millones de objetos disponen de sensores para detectar, medir y valorar el estado; todo ello conectado a través de redes públicas o privadas utilizando protocolos estándar y patentados. Esta información en la nube (Internet) permite ser accedida de manera remota y agregando algún sistema inteligente preprogramado ayudaría a realizar sistemas de: domótica, control de generadores eléctricos en base a la demanda, manejar impresores desde su móvil, controlar cuartos fríos y monitorearlos, despacho inteligente de mercaderías tal como lo hace amazon o ebay, etc. Figura 1: Concepto del internet de las cosas 1. Figura 2: Concepto del internet de las cosas 2. Microcontrolador Photon de Particle, estos dispositivos trabajan con niveles de tensión de 0V a 3.3V. Poseen capacidades de conexión a otros dispositivos o computadoras a través de Wifi. Existen 1 Imagen tomada de: 2 Imagen tomada de:

3 Interfaces y Periféricos. Guía 6. 3 otros dispositivos como el Electron de Particle, que se comunica de forma similar a través de las redes telefónicas usando una tarjeta SIM. Figura 3: Microcontrolador con acceso a Wifi, Photon es un dispositivo de Particle. Tabla 1: Características del microcontrolador Photon de Particle. [1] FT = pines tolerantes a 5,0 V Todos los pines, excepto A3 y DAC, son tolerantes a 5 V (cuando no están en modo analógico). Si se utiliza como una entrada de 5 V, la resistencia pull-up / pull-down debe estar desactivada. [2] 3V3 = 3.3V máx. Pines. [3] PWM está disponible en D0, D1, D2, D3, A4, A5, WKP, RX, TX con una advertencia: el periférico del temporizador PWM se duplica en dos pines (A5 / D2) y (A4 / D3) para un total de 7 salidas PWM independientes. Por ejemplo: PWM puede usarse en A5 mientras que

4 4 Interfaces y Periféricos. Guía 6. D2 se usa como GPIO, o D2 como PWM, mientras que A5 se utiliza como entrada analógica. Sin embargo, A5 y D2 no se pueden usar como salidas PWM controladas independientemente al mismo tiempo. [4] Técnicamente, estos pines toleran 5.0V, pero como no los operarías con un transceptor de 5.0V, es apropiado clasificarlos como 3.3V. El LED RGB le brindará indicaciones clave para comprender el estado del módulo, las siguientes líneas describen cada uno de dichos estados: Intermitente azul: Esperando credenciales del WIFI. Color azul solido: Obteniendo información del WIFI desde la app. Intermitente Verde: Conectando a la red WIFI. Intermitente cyan: Conectando a la nube de Particle. Intermitente morado : Actualizando el firmware Intermitente lento en cyan: Conectado. Publicando variables desde el photon a la nube, Particle.variable () Particle.variable registra una variable, por lo que su valor se puede recuperar de la nube en el futuro. Solo se llama a Particle.variable una vez por variable, generalmente pasando una variable global. Puede cambiar el valor de la variable global subyacente tantas veces como desee; el valor solo se recupera cuando se solicita, por lo que simplemente al cambiar la variable global no se utiliza ningún dato. No llama a Particle.variable cuando cambia el valor. Se pueden registrar hasta 20 variables en la nube y cada nombre de la variable está limitado a un máximo de 12 caracteres. Hay tres tipos de datos compatibles: INT DOUBLE STRING (la longitud máxima de la cadena es 622 bytes) Nota: solo use letras, números, guiones bajos y guiones en los nombres de las variables. Los espacios y los caracteres especiales pueden ser escapados por diferentes herramientas y bibliotecas que causan resultados inesperados. Se puede llamar a esta función cuando la nube está desconectada; la variable se registrará la próxima vez que se conecte la nube. Publique una variable a través de la nube para que pueda ser llamada con una petición GET. Se deben hacer dos cosas para corroborar este funcionamiento: 1. Realizar la programación del dispositivo con la publicación de variables. Sintaxis de la programación en el microcontrolador para realizar la publicación: Particle.variable("nombre_de_la_variable_a_publicar_en_web", Valor_a_publicar); Ejemplos: Particle.variable("analogvalue", analogvalue); Particle.variable("temp", tempc); 2. Observar a través de un navegador web (o aplicación) el dato publicado por el dispositivo. Los siguientes ejemplos se colocan en la barra de direcciones de un navegador web.

5 Interfaces y Periféricos. Guía 6. 5 Sintaxis del formato de petición: Device ID = abcdef Su access token = Ejemplos: Figura 4. Respuesta del navegador web ante una solicitud. La misma solicitud haciendo uso de html y java se muestra como, este detalle es importante puesto que se realizará la aplicación móvil con esta sintaxis: requesturl = " + deviceid + "/" + analogvalue + "?access_token=" + accesstoken; $.getjson(requesturl, function(json) { if(json.result == "1") { v1= "Ventana 1 activada" else { v1 = " "; ); Código 1. Sección de una archivo html + java. Publicando eventos a los oyentes registrados desde la nube al Photon, Particle.function() Exponga una función a través de la nube para poder llamarla con un evento POST. Particle.function permite que el código en el dispositivo se ejecute cuando se solicita desde la API de la nube. Normalmente se hace esto cuando se desea controlar algo en el Photon (una pantalla LCD o un Buzzer, o funciones de control en tu firmware), desde la nube. Se pueden registrar hasta 15 funciones en la nube y cada nombre de función está limitado a un máximo de 12 caracteres. Para registrar una función en la nube, el usuario proporciona el funckey, que es el nombre de cadena utilizado para realizar una solicitud POST y un funcname, que es el nombre real

6 6 Interfaces y Periféricos. Guía 6. de la función a la que se llama en su aplicación. La función de la nube debe devolver un número entero; -1 se usa comúnmente para una llamada de función fallida. Una función de la nube está configurada para tomar un argumento del tipo de datos String. Esta longitud de argumento está limitada a un máximo de 63 caracteres. Cuando use SYSTEM_THREAD (ENABLED) debe tener cuidado cuando registre sus funciones. Al comienzo de la configuración (), antes de realizar operaciones prolongadas, demoras o cosas como esperar que se presione una tecla, es lo mejor. El motivo es que los registros de variables y funciones solo se envían una vez, aproximadamente 30 segundos después de conectarse a la nube. Llamar a Particle.function después de que se haya enviado la información de registro no reenvía la solicitud y la función no funcionará. Se deben hacer dos cosas para corroborar este funcionamiento: 1. Realizar la programación del dispositivo con la publicación de variables. Sintaxis de la programación en el microcontrolador para realizar la publicación: Particle.function("nombre_de_la_función_a_publicar_en_web", Nombre_de_la_función_local); Ejemplo: void setup() { // register the cloud function Particle.function ("brew", brewcoffee); // this function automagically gets called upon a matching POST request int brewcoffee(string command){ // look for the matching argument "coffee" <-- max of 64 characters long if(command == "coffee"){ // some example functions you might have //activatewaterheater(); //activatewaterpump(); return 1; else return -1; 2. Observar a través de un navegador web (o aplicación) el dato publicado por el dispositivo. Los siguientes ejemplos se colocan en la barra de direcciones de un navegador web. Sintaxis del formato de petición: Device ID = abcdef Su access token = Desde la consola de Linux: curl /brew \ -d access_token= \ -d "args=coffee"

7 Interfaces y Periféricos. Guía 6. 7 Procedimiento. Parte 1: Controlando el Photon a través de una app de Android Particle. 1. Encienda la computadora. Cuando cargue el sistema operativo utilice las siguientes credenciales: Usuario: usuario0 Contraseña: usuario 2. Arme el circuito propuesto para esta guía conforme a la figura Conecte el Photon a la computadora por medio del cable USB hacia micro USB. Figura 5. Respuesta del navegador web ante una solicitud. 4. Ingrese desde su móvil a Google Play Store. 5. Busque la aplicación Particle e instálela en su móvil, ver figura 6a. 6. Toque el enlace I already have an account. 7. Ingrese las credenciales de correo y contraseña (de la cuenta de Particle, brindadas en la tapadera de la caja que se le ha proporcionado), presione el botón LOG IN, figura 6b. 8. Una vez que ingrese a la cuenta tendrá frente a usted una pantalla similar a la de la figura 6c, toque el dispositivo Photon. 9. Le mostrará la figura 7, en la cual se muestra el Device ID del dispositivo (este dato se utilizará más adelante en las aplicaciones web que se quieran comunicar con el dispositivo IoT).

8 8 Interfaces y Periféricos. Guía 6. Figura 6: Utilizando aplicación de Particle para comunicarse con Photon. 10. Presione el botón de tres puntos de la barra superior y seleccione la opción Re-flash Tinker, luego presione el botón Flash, durante este proceso el led RGB del Photon cambiará a color morado intermitente y luego a celeste (CYAN). 11. Presione la tecla atrás, para regresar a la figura 6c. 12. Presione sobre la barra del nombre de su dispositivo IoT, deberá observar la figura 8a. 13. Presione el botón D7 > digitalwrite, figura 8b. 14. Nuevamente presione el botón D7 > HIGH, deberá ver como el led azul asignado a ese pin sobre la tarjeta enciende. Apague el led y enciéndalo varias veces cambiando entre LOW y HIGH. Nota: en esencia puede repetir este procedimiento con todos los pines pero deberá conectar el arreglo de resistencia, led y tierra respectivo para ver la funcionalidad, ya que solo D7 trae incorporado ese circuito en la tarjeta del microcontrolador. 15. Repita el procedimiento anterior con diferentes pines de D0 a D7, conectando la tarjeta I/O para lograr ver su funcionamiento. 16. Conecte uno de los led s a la salida DAC y utilice la función analogwrite con lo que podrá variar la intensidad de encendido del diodo led, ver figura 8c.

9 Interfaces y Periféricos. Guía 6. 9 Figura 7: Utilizando aplicación de Particle para comunicarse con Photon. Figura 8: Utilizando aplicación de Particle para controlar microcontrolador Photon. Parte 2: Creando archivos desde el entorno de desarrollo web (WEB IDE). 17. Desde la computadora ingrese al navegador web (Mozilla Firefox, Google Chrome) y digite la dirección: Dé clic izquierdo en el enlace FOR DEVELOPERS >> Web IDE (en su defecto puede ser Docs & Tools >> Web IDE). 19. La página solicitará las credenciales de la cuenta escritas en la tapa superior de la caja entregada para la práctica de laboratorio, con lo cual se abrirá el editor de archivos de programación de los dispositivos IoT de Particle.

10 10 Interfaces y Periféricos. Guía 6. Figura 9: Acceso a Web IDE entorno de desarrollo de Particle. 20. Digite el código mostrado a continuación: int i=0; double Volt=0; int Sal_bin=0; int temp=0; int Valorbit=0; int analogvalue = 0; int retardo = 500; int salidas[]={d0,d1,d2,d3,d4,d5,d6,d7; //Pines físicos del dispositivo IoT void setup(){ //Declaración de variables a publicar a través de Internet (Solicitudes GET) // variable name max length is 12 characters long Particle.variable("Valor_bin", analogvalue); Particle.variable("Valor_volt", Volt); //Declaración de funciones a publicar a través de Internet (Solicitudes POST) Particle.function("Secuencia", Enciende); for(i=0;i<8;i++){ pinmode(salidas[i],output); void loop(){ // Read the analog value to 12 bits (0-4095) analogvalue = analogread(a1); //Convert the reading of analog pin into Voltage Volt = ((double)analogvalue) * (3.3/4095); //Convert the value of scale [0,4095] to [0,255] for write in digital pins Sal_bin = map(analogvalue, 0, 4095, 0, 255); Escribe(Sal_bin); delay(200); //Function to write in digital pins void Escribe(int conteo){ temp=conteo; for(i=0;i<8;i++){ Valorbit=temp%2;

11 Interfaces y Periféricos. Guía temp=temp/2; if(valorbit==0){ digitalwrite(salidas[i],low); else{ digitalwrite(salidas[i],high); // this function auto-magically gets called upon a matching POST request int Enciende(String command) { // look for the matching argument "uno" or "dos" <-- max of 64 characters long if(command == "uno"){ Escribe(24); delay(retardo); Escribe(36); delay(retardo); Escribe(66); delay(retardo); Escribe(129); delay(retardo); return 1; else if(command == "dos"){ Escribe(129); delay(retardo); Escribe(66); delay(retardo); Escribe(36); delay(retardo); Escribe(24); delay(retardo); return 1; else{ Escribe(0); delay(3*retardo); return -1; Código 2. Código del ejemplo 1, publicación de variable y función de secuencia. 21. En la barra lateral izquierda dé clic izquierdo en el icono del rayo (Flash), el cual permite programar el dispositivo IoT (deberá observar como el led RGB cambia de color morado a celeste intermitente), sólo si éste esta encendido y conectado a Internet. 22. En la barra lateral izquierda dé clic izquierdo en el icono Console (se parece a un diagrama de barras). Flash: Compila y programa el dispositivo IoT. Verify: Compila el código actual sin descargarlo sobre el dispositivo IoT. Save: Permite guardar cualquier cambio en el código actual.

12 12 Interfaces y Periféricos. Guía 6. Code: Muestra una lista de todas las aplicaciones que pueden seleccionarse para edición o programación. Libraries: Presenta todas las librerías creadas por el usuario o por terceros. Help: Permite ver una lista rápida de los estados y colores del led RGB del dispositivo IoT. Docs: Te direcciona a la página web del material de referencia para observar sintaxis y descripción de la misma: Devices: Muestra la lista de dispositivos asociados a la cuenta de Particle. De esta sección se obtiene el Device ID del dispositivo vinculado. Console: Es una aplicación web para interactuar con las variables, funciones, eventos, etc. del dispositivo IoT. Settings: Menú de administración de la cuenta (salir, desvincular un dispositivo, etc.), de esta sección se obtiene el AccessToken. 23. En la página web recién cargada, dé clic izquierdo en el icono My Devices. 24. Dé clic izquierdo sobre el dispositivo IoT (Photon) vinculado a su cuenta, ver figura Luego de que la página web se recargue, dirija su vista a la esquina inferior derecha de la pantalla, dé clic izquierdo sobre los botones GET de las variables Valor_bin y Valor_volt. 26. Mueva la perilla del potenciómetro y repita el paso anterior. 27. En el recuadro de la sección funciones, escriba uno y dé clic izquierdo en el botón CALL a la derecha del recuadro para hacer una solicitud POST. Verifique en los leds el resultado obtenido. 28. Repita el paso anterior poniendo en el recuadro la palabra dos. 29. Repita el paso 27 poniendo en el recuadro la palabra tres o cualquier otra cosa que ud quiera. Figura 10: Conexión de las funciones de la nube de Particle y el dispositivo IoT. Figura 11: Verificación de variables y funciones del dispositivo IoT desde Particle.

13 Parte 3: Creación de páginas web. En Linux: 30. Presione la combinación de teclas Ctrl + Alt + t. 31. Escriba en la ventana que se abrió, gedit. 32. Digite en la ventana del gedit el código 3. En Windows: 33. Presione la combinación de teclas Windows + r. 34. Escriba en la ventana que se abrió, Notepad. 35. Digite en la ventana del Notepad el código 3. Interfaces y Periféricos. Guía <!-- Reemplace su Device_ID con el numero de su dispositivo y su Access_token con el numero de su dispositivo--> <!DOCTYPE> <html> <body> <center> <H1>Cu&aacutel funci&oacuten debe realizar?</h1> <form action=" access_token= " method="post"> <input type="radio" name="arg" value="uno">secuencia 1: Inicia en el centro. <input type="radio" name="arg" value="dos">secuencia 2: Inicia en los extremos. <input type="radio" name="arg" value="tres">secuencia asignada al evento else. <input type="submit" value="ejecutar secuencia"> </form> </center> </body> </html> Código 3. Código html, para probar funciones en el Photon. 36. El código requiere el Device ID y access token del dispositivo asignado a su persona, los valores mostrados a continuación deberá cambiarlos. Device ID = abcdef Su access token = En el navegador web, en la pestaña del Web IDE de Particle (pantalla con fondo negro), dé clic izquierdo en el icono Devices. Se desplazará una sección de la ventana, dé clic izquierdo en el nombre del Photon y observará el Device ID. Copie el valor y colóquelo en el código html. 38. Dé clic izquierdo en el icono Settings. Podrá observar el access token de su dispositivo. Copie el valor y colóquelo en el código html. 39. Guarde el archivo con un nombre de su elección pero la extensión del archivo debe ser:.html

14 14 Interfaces y Periféricos. Guía 6. Figura 12: Verificación de variables y funciones del dispositivo IoT desde Particle. 40. En el navegador web, abra una nueva pestaña y dé clic en el menú Archivo >> Abrir archivo, busque la ubicación del archivo guardado en el paso anterior. 41. Seleccione uno de los radio button y presione el botón Ejecutar secuencia, verifique el funcionamiento en el circuito implementado. La página web también mostrará un cambio. 42. Dé clic izquierdo en el icono Ir a la página anterior, modifique su selección y realice una vez más el paso anterior. Figura 13: Verificación de variables y funciones del dispositivo IoT desde una página web. 43. Cree un archivo nuevo en Gedit (Notepad) y agregue el siguiente código: <!-- Reemplazar el device ID con el correspondiente de su módulo IoT y Reemplazar su token de acceso con el correspondiente a su cuenta--> <!DOCTYPE HTML> <HTML> <script src=" type="text/javascript" charset="utf-8"></script> <HEAD> <script type="text/javascript"> var deviceid = " abcdef"; var accesstoken = " "; var Func1 = "Valor_bin"; var Func2 = "Valor_volt"; var requesturl;

15 Interfaces y Periféricos. Guía var Text_cuadro; var myvar = setinterval(alertfunc, 1000); function alertfunc() { requesturl = " + deviceid + "/" + Func1 + "/?access_token=" + accesstoken; $.getjson(requesturl, function(json){ document.getelementbyid("t0").value = json.result; ); requesturl = " + deviceid + "/" + Func2 + "/?access_token=" + accesstoken; $.getjson(requesturl, function(json){ document.getelementbyid("t1").value = json.result; ); function Ejecutar() { Text_cuadro = document.getelementbyid("t2").value; //alert(text_cuadro); requesturl = " + deviceid + "/Secuencia/"; $.post(requesturl, { params: Text_cuadro, access_token: accesstoken ); </script> </HEAD> <BODY BGCOLOR="AliceBlue"> <CENTER> <FORM> <H1>Prueba de funcionamiento de solicitudes GET y POST desde una p&aacutegina web.</h1> <img src=" Device ID = <B> abcdef</B> access token = <B> </B> Valor_bin (int32): <input type="text" id="t0" name="texto0" value="" readonly="readonly"/> Valor_volt (double): <input type="text" id="t1" name="texto1" value="" readonly="readonly"/> Escriba la funci&oacuten a realizar: <input type="text" id="t2" name="texto2" value=""> <input type="button" onclick="ejecutar()" value="solicitar funcion"/> </FORM> </CENTER> </BODY> </HTML> Código 4. Código html, para probar variables y funciones en el Photon. 44. El código requiere el Device ID y access token del dispositivo asignado a su persona, los valores mostrados a continuación deberá cambiarlos. Device ID = abcdef Su access token =

16 16 Interfaces y Periféricos. Guía Guarde el archivo con un nombre de su elección pero la extensión del archivo debe ser:.html 46. Corra el archivo en el navegador web. 47. Gire la perilla del potenciómetro y verifique el cambio en la página web. 48. Ponga la palabra uno en el cuadro de texto editable. Presione el botón Solicitar funcion y observe el comportamiento del circuito implementado. 49. Repita el procedimiento anterior para las palabras: dos. tres. Figura 14: Verificación de variables y funciones del dispositivo IoT desde una página web. 50. Desde su celular ingrese a la aplicación de Particle. 51. Toque el dispositivo Photon asociado a la cuenta. 52. Verifique el funcionamiento de funciones y variables creadas en el dispositivo IoT tal como se hizo con la página web. Figura 15: Verificación de variables y funciones desde aplicación de Particle.

17 Interfaces y Periféricos. Guía Cree un archivo nuevo en Gedit (Notepad) y agregue el siguiente código: <!-- Reemplazar el device ID con el correspondiente de su módulo IoT y Reemplazar su token de acceso con el correspondiente a su cuenta--> <!DOCTYPE html> <html lang="en"> <script src=" type="text/javascript" charset="utf-8"></script> <HEAD> <script type="text/javascript"> var deviceid = " abcdef"; var accesstoken = " "; var Func1 = "Valor_bin"; var Func2 = "Valor_volt"; var requesturl; var Text_cuadro; var Amp = 0, Amp2=0; var incr=0, inc1=50; var myvar = setinterval(alertfunc, inc1); function alertfunc() { if((incr%50) == 0){ requesturl = " + deviceid + "/" + Func1 + "/?access_token=" + accesstoken; $.getjson(requesturl, function(json){ document.getelementbyid("t0").value = json.result; ); requesturl = " + deviceid + "/" + Func2 + "/?access_token=" + accesstoken; $.getjson(requesturl, function(json){ Amp = json.result; document.getelementbyid("t1").value = Amp; ); draw(amp*100); function draw(valor){ var c = document.getelementbyid("mycanvas"); var ctx = c.getcontext("2d"); var offset = 50, x=0, y=0, x2=0, y2=0; var pointsize = 2; // Cambia el tamaño del punto var height, width, xaxis, yaxis; var unit = 100, counter = 0; var increase = 90/180*Math.PI ; var i; height = c.height; width = c.width; xaxis = Math.floor(height/8); yaxis = Math.floor(width/8); x = 7 * xaxis; y = 7 * yaxis; // Set styles for animated graphics ctx.save(); ctx.strokestyle = '#ff'; //Color de línea ctx.fillstyle = 'black'; //Color de relleno ctx.linewidth = 1; if (incr == 0){ // Draw X and Y axes ctx.moveto(0, 7*xAxis); ctx.lineto(width, 7*xAxis); ctx.moveto(yaxis, 0); ctx.lineto(yaxis, height); ctx.font = "18px Arial"; ctx.fillstyle = "black"; for(i = 0.5; i <= 3; i += 0.5) { //Lineas del eje vertical ctx.moveto(yaxis-5, x-offset); ctx.lineto(yaxis+5, x-offset); ctx.filltext(i,xaxis+15,x-offset+5); //Colocar textos offset += 50; offset = 0; for(i = 0; i <= 13; i += 1) { //Lineas del eje horizontal

18 18 Interfaces y Periféricos. Guía 6. ctx.moveto(yaxis+offset, x-5); ctx.lineto(yaxis+offset, x+5); ctx.filltext(i,yaxis+offset-5,x+25); offset += 50; ctx.stroke(); ctx.beginpath(); // Iniciar trazo - puntos de cada valor ctx.fillstyle = "#ff2626"; // Color rojo x2 = yaxis + incr; y2 = x - valor; ctx.arc(x2, y2, pointsize, 0, Math.PI * 2, true); // Dibujar un punto usando la funcion arc ctx.fill(); // Terminar trazo ctx.stroke(); incr = incr + (inc1/10); //document.getelementbyid("t2").value = incr; if (incr > 690){ incr = 0; ctx.clearrect(0,0,width,height); function Ejecutar() { Text_cuadro = document.getelementbyid("t2").value; //alert(text_cuadro); requesturl = " + deviceid + "/Secuencia/"; $.post(requesturl, { params: Text_cuadro, access_token: accesstoken ); </script> </HEAD> <BODY BGCOLOR="AliceBlue"> <CENTER> <FORM> <H1>Prueba de funcionamiento de solicitudes GET y POST desde una p&aacutegina web.</h1> <img src=" <canvas id="mycanvas" width="800" height="400" style="border:1px solid #d3d3d3;">su navegador no soporta canvas :(</canvas> Device ID = <B> abcdef</B> access token = <B> </B> Valor_bin (int32): <input type="text" id="t0" name="texto0" value="" readonly="readonly"/> Valor_volt (double): <input type="text" id="t1" name="texto1" value="" readonly="readonly"/> Escriba la funci&oacuten a realizar: <input type="text" id="t2" name="texto2" value=""> <input type="button" onclick="ejecutar()" value="solicitar funcion"/> </FORM> </CENTER> </BODY> </html> Código 5. Código html, graficando variables desde el Photon. 54. El código requiere el Device ID y access token del dispositivo asignado a su persona, los valores mostrados a continuación deberá cambiarlos. Device ID = abcdef Su access token = Guarde el archivo con un nombre de su elección pero la extensión del archivo debe ser:.html 56. Corra el archivo en el navegador web. 57. Gire la perilla del potenciómetro y verifique el cambio en la página web.

19 Interfaces y Periféricos. Guía Figura 16: Verificación de variables y funciones del dispositivo IoT desde una página web. 58. Desconecte el Photon de la computadora. 59. Desarme el circuito y haga entrega del equipo que se le proporcionó en orden. 60. Apague la computadora, incluyendo el monitor. 61. Deje en orden su puesto de trabajo. Análisis de Resultados. Desafíos cortos: 1. Modifique el código 5, para que al variar el potenciómetro varie la amplitud (Valor_volt) de un gráfico de señal senoidal a 1kHz. 2. Modifique el código 5, para que al variar el potenciómetro varie la frecuencia (Valor_bin) de un gráfico de señal senoidal con una amplitud de 3.3V. Actividad complementaria. 1. Desarrollar programas utilizando las siguientes funciones de nube de particle: Particle.publish() Particle.subscribe() Particle.unsubscribe()

20 20 Interfaces y Periféricos. Guía 6. Particle.syncTime() Particle.connect() Particle.disconnect() 2. En la figura 8, pasos 13 y 14 se mostró la escritura digital, verifique el funcionamiento de la lectura digital, escritura análoga, lectura análoga. Bibliografía. Sitio web de los desarrolladores: Características del Photon: Referencia en línea de la sintaxis: Video de configuración de Photon: Configuración del dispositivo IoT vía navegador web: Emulador de código HTML: HTML, Referencia en línea de varios lenguajes: Dibujar funciones con canvas, javascript y html: ormas HTML, guía rápida de referencia: Manual básico de HTML, creación y estructura de páginas web: Manual básico de creación de páginas web: Curso completo de HTML:

21 Interfaces y Periféricos. Guía Hoja de cotejo: 1 Guía 6: Introducción a dispositivos IoT. Alumno: Maquina N : Docente: GL: Fecha: EVALUACION % Nota CONOCIMIENTO APLICACIÓN DEL CONOCIMIENTO 25% Conocimiento deficiente de los fundamentos teóricos 70% ACTITUD 2.5% 2.5% TOTAL 100% No Terminó completamente el programa y comentó mal el código (30%) No realizó el circuito correctamente (40%) Es un observador pasivo. Es ordenado; pero no hace un uso adecuado de los recursos Conocimiento y explicación incompleta de los fundamentos teóricos Terminó completamente el programa pero los comentarios no estaban del todo correctos El circuito funcionó Participa ocasionalmente o lo hace constantemente pero sin coordinarse con su compañero. Hace un uso adecuado de los recursos, respeta las pautas de seguridad; pero es desordenado. Conocimiento completo y explicación clara de los fundamentos teóricos Terminó completamente el programa con sus comentarios correctos El circuito funcionó Participa propositiva e integralmente en toda la práctica. Hace un manejo responsable y adecuado de los recursos conforme a pautas de seguridad e higiene.