Está en la página 1de 21

Interfaces y Periféricos. Guía 6.

1
Facultad: Ingeniería
Introducción a dispositivos IoT. 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 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 pre-
programado 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 cosas1.

Figura 2: Concepto del internet de las cosas2.

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: https://e-estonia.com/internet-of-things-way-for-b2g-solutions/
2
Imagen tomada de: https://mundo.sputniknews.com/tecnologia/201607071061687983-robots-trabajaran-
almacenes-amazon/
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 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.
Interfaces y Periféricos. Guía 6. 5

Sintaxis del formato de petición:


https://api.particle.io/v1/devices/device_ID/variable?access_token=number_access_token

Device ID = 0123456789abcdef
Su access token = 123412341234

Ejemplos:
https://api.particle.io/v1/devices/0123456789abcdef/analogvalue?access_token=123412341234

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 = "https://api.particle.io/v1/devices/" + deviceID + "/" + analogvalue +


"?access_token=" + accessToken;
$.getJSON(requestURL, function(json) {
if(json.result == "1")
{
v1= "<br>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 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 = 0123456789abcdef
Su access token = 123412341234

Desde la consola de Linux:


curl https://api.particle.io/v1/devices/0123456789abcdef /brew \
-d access_token=123412341234 \
-d "args=coffee"
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 5.


3. 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 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.
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: https://www.particle.io/
18. 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 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;
Interfaces y Periféricos. Guía 6. 11

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 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: https://docs.particle.io/reference/firmware/photon/
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 10.
25. 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.
Interfaces y Periféricos. Guía 6. 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.

<!-- 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>
<br>
<br>
<form action="https://api.particle.io/v1/devices/0123456789abcdef/Secuencia?
access_token=123412341234" method="POST">
<br>
<input type="radio" name="arg" value="uno">Secuencia 1: Inicia en el centro.
<br>
<input type="radio" name="arg" value="dos">Secuencia 2: Inicia en los extremos.
<br>
<input type="radio" name="arg" value="tres">Secuencia asignada al evento else.
<br>
<br>
<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 = 0123456789abcdef
Su access token = 123412341234

37. 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 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="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript" charset="utf-8"></script>
<HEAD>
<script type="text/javascript">
var deviceID = "0123456789abcdef";
var accessToken = "123412341234";
var Func1 = "Valor_bin";
var Func2 = "Valor_volt";
var requestURL;
Interfaces y Periféricos. Guía 6. 15

var Text_cuadro;
var myVar = setInterval(alertFunc, 1000);

function alertFunc() {
requestURL = "https://api.particle.io/v1/devices/" + deviceID + "/" + Func1 +
"/?access_token=" + accessToken;
$.getJSON(requestURL, function(json){
document.getElementById("T0").value = json.result;
});
requestURL = "https://api.particle.io/v1/devices/" + 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 = "https://api.particle.io/v1/devices/" + 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="http://i64.tinypic.com/2ebtm4k.png"/><br>
<br>
Device ID = <B>0123456789abcdef</B>
<br>
access token = <B>123412341234</B>
<br><br>
Valor_bin (int32):
<input type="text" id="T0" name="texto0" value="" readonly="readonly"/><br>
Valor_volt (double):
<input type="text" id="T1" name="texto1" value=""
readonly="readonly"/><br><br>
Escriba la funci&oacuten a realizar:
<input type="text" id="T2" name="texto2" value=""><br><br>
<input type="button" onclick="Ejecutar()" value="Solicitar funcion"/>
<br><br>
</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 = 0123456789abcdef
Su access token = 123412341234
16 Interfaces y Periféricos. Guía 6.

45. 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.


Interfaces y Periféricos. Guía 6. 17

53. 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="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"
charset="utf-8"></script>
<HEAD>
<script type="text/javascript">
var deviceID = "0123456789abcdef";
var accessToken = "123412341234";
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 = "https://api.particle.io/v1/devices/" + deviceID + "/" + Func1 + "/?access_token=" +
accessToken;
$.getJSON(requestURL, function(json){
document.getElementById("T0").value = json.result;
});
requestURL = "https://api.particle.io/v1/devices/" + 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 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 = "https://api.particle.io/v1/devices/" + 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="http://i64.tinypic.com/2ebtm4k.png"/><br>
<br>
<canvas id="myCanvas" width="800" height="400" style="border:1px solid #d3d3d3;">Su navegador no soporta
canvas :(</canvas>
<br><br>
Device ID = <B>0123456789abcdef</B>
<br>
access token = <B>123412341234</B>
<br><br>
Valor_bin (int32):
<input type="text" id="T0" name="texto0" value="" readonly="readonly"/><br>
Valor_volt (double):
<input type="text" id="T1" name="texto1" value="" readonly="readonly"/><br><br>
Escriba la funci&oacuten a realizar:
<input type="text" id="T2" name="texto2" value=""><br><br>
<input type="button" onclick="Ejecutar()" value="Solicitar funcion"/>
<br><br>
</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 = 0123456789abcdef
Su access token = 123412341234

55. 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.
Interfaces y Periféricos. Guía 6. 19

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 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: https://www.particle.io/
 Características del Photon:
https://docs.particle.io/datasheets/photon-(wifi)/photon-datasheet/
 Referencia en línea de la sintaxis: https://docs.particle.io/reference/firmware/photon/
 Video de configuración de Photon: https://vimeo.com/178282058
 Configuración del dispositivo IoT vía navegador web:
https://docs.particle.io/guide/getting-started/start/photon/#step-1-power-on-your-device
 Emulador de código HTML:
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
 HTML, Referencia en línea de varios lenguajes:
https://www.w3schools.com/html/default.asp
 Dibujar funciones con canvas, javascript y html:
https://developer.mozilla.org/es/docs/Web/Guide/HTML/Canvas_tutorial/Dibujando_f
ormas
https://jsfiddle.net/hashem/Lw41nwx7/
 HTML, guía rápida de referencia:
http://www.aragonemprendedor.com/archivos/descargas/manual_rapido_html.pdf
 Manual básico de HTML, creación y estructura de páginas web:
http://www.bolivia-internet.com/html/manualhtml.pdf
 Manual básico de creación de páginas web:
https://www.um.es/atica/documentos/html.pdf
 Curso completo de HTML:
http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html.pdf
Interfaces y Periféricos. Guía 6. 21

Hoja de cotejo: 1

Guía 6: Introducción a dispositivos IoT.


Alumno: Maquina N°:

Docente: GL: Fecha:

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