Bootstrap, LM35 y Arduino MKR1000 pueden darnos una idea de lo que podemos hacer gracias al módulo WiFi que incorpora esta placa. No me cansaré de decir que se nos avecina una revolución, un cambio en la manera de vivir en las ciudades e interactuar con las cosas y los objetos, donde poco a poco irán cobrando vida y empezarán a comunicarse entre ellos y con nosotros. Aunque el IoT (Internet de las Cosas) no es una novedad, el Arduino MKR1000 pone al alcance de todo el mundo este sector, bienvenido a la era del IoT.
Si no conoces las posibilidades que nos ofrece esta placa o todavía no las has configurado, por favor lee estos artículos de introducción:
- Arduino MKR1000
- Configurar Arduino MKR1000
- Configurar la WiFi en Arduino MKR1000
- Comenzar con Arduino MKR1000
Si estás interesado en profundizar en este tipo de dispositivos, mira el curso que está en el Campus de Programarfacil, Crea un dispositivo del IoT.
Conectando los componentes (sin batería)
Lo primero de todo es prototipar así que, debemos conectar los componentes como si fuera un Arduino UNO o MEGA. El material necesario es el siguiente:
- Arduino MKR1000
- 3 LEDs de diferentes colores (rojo, verde y azul)
- Sensor de temperatura LM35
- Cables
- Protoboard
Construir el circuito es sencillo, puedes apoyarte en el artículo donde ya hablé de este sensor de temperatura. A continuación te dejo el esquema que he utilizado. Como puedes ver, todavía no existe un modelo para Fritzing del Arduino MKR1000 y he tenido que utilizar una foto.
Una vez montado el circuito empezamos a programar los componentes.
Programando los componentes
Ya hablé hace tiempo de las características de este sensor y cómo utilizarlo con el Arduino UNO. Es exactamente igual, lo único que tenemos que tener en cuenta es que Arduino MKR1000 tiene un voltaje de operación de 3,3V. Esto implica que la fórmula que utilizamos para el Arduino UNO deba ser modificada de la siguiente manera.
Solo he cambiado el valor de referencia, en Arduino UNO es 5V y en Arduino MKR1000 es 3,3V, el resto funcionaría igual.
Esta placa tiene la posibilidad de trabajar con diferentes resoluciones en los pines analógicos, en este caso trabajamos con el valor por defecto que es 10 bits, pero podemos utilizar 8 bits o 12 bits. En estos casos deberíamos sustituir el valor de 1023 por la resolución correspondiente, 255 para 8 bits y 4095 para 12 bits.
He incorporado 3 LEDs, uno rojo que indica que no está conectado a la WiFi, uno verde que indica lo contrario, conexión establecida y un LED azul que marca cuando se hace la lectura de la temperatura a través del sensor LM35.
Todo esto está plasmado en el siguiente código nativo de Arduino, es una adaptación del código original SimpleWebServerWiFi que viene incluido en los ejemplos del entorno de desarrollo oficial de Arduino.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 |
/* Creado: Luis del Valle (ldelvalleh@programarfacil.com) @ldelvalleh Sensor de temperatura MKR1000 https://programarfacil.com */ // Importamos librerías #include <SPI.h> #include <WiFi101.h> // Constantes pines int const pinLedAzul = 2; int const pinLedVerde = 1; int const pinLedRojo = 0; int const pinSensorTemp = 1; // Declaracion de variables globales float tempC; // Variable para almacenar el valor obtenido del sensor (0 a 1023) char ssid[] = "nombre_red_wifi"; // Nombre de tu WiFi char pass[] = "contraseña_wifi"; // Password de tu WiFi int status = WL_IDLE_STATUS; WiFiServer server(80); // Dirección IP de MKR1000 // La tienes que sustituir por una IP válida en tu red WiFi IPAddress ip(192, 168, 1, 177); void setup() { // Pin número 6 en modo salida pinMode(pinLedVerde, OUTPUT); pinMode(pinLedRojo, OUTPUT); pinMode(pinLedAzul, OUTPUT); // Configuramos el puerto serial a 9600 bps Serial.begin(9600); digitalWrite(pinLedRojo, HIGH); // Comprobamos que el módulo WiFi esté correctamente if (WiFi.status() == WL_NO_SHIELD) { Serial.println("El módulo WiFi no funciona"); while (true); // no continuamos si no funciona el módulo WiFi } // Configuración IP estática WiFi.config(ip); // Conectar con la WiFi while ( status != WL_CONNECTED) { Serial.print("Intentando conectar con la red: "); Serial.println(ssid); // Conectando con una red WPA/WPA2. Cambia esta línea si es una red WEP status = WiFi.begin(ssid, pass); delay(10000); } server.begin(); // Iniciar el servidor web en el puerto 80 digitalWrite(pinLedRojo, LOW); digitalWrite(pinLedVerde, HIGH); Serial.println("Conexión realizada."); delay(1000); } void loop() { digitalWrite(pinLedAzul, HIGH); LeerTemperatura(); delay(300); digitalWrite(pinLedAzul, LOW); delay(1000); WiFiClient client = server.available(); if (client) { Serial.println("new client"); String currentLine = ""; while (client.connected()) { if (client.available()) { char c = client.read(); Serial.write(c); if (c == '\n') { if (currentLine.length() == 0) { client.println("HTTP/1.1 200 OK"); client.println("Content-type:text/html"); client.println(); // Contenido de la respuesta HTTP, es una web con bootstrap client.print(" <!DOCTYPE html>"); client.print(" <html lang=\"en\">"); client.print(" <head>"); client.print(" <meta charset=\"UTF-8\">"); client.print(" <title>Control de temperatura</title>"); client.print(" <meta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\">"); client.print(" <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css\" integrity=\"sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7\" crossorigin=\"anonymous\">"); client.print(" <style type=\"text/css\">"); client.print(" header {"); client.print(" background-color: #2980b9;"); client.print(" color: white;"); client.print(" }"); client.print(" aside{"); client.print(" background-color: #0f5786;"); client.print(" color: white;"); client.print(" }"); client.print(" .color1{"); client.print(" background-color: #e67d22;"); client.print(" color: white;"); client.print(" }"); client.print(" .color2{"); client.print(" background-color: white;"); client.print(" color: #e67d22;"); client.print(" }"); client.print(" footer {"); client.print(" background-color: #2980b9;"); client.print(" color: white;"); client.print(" }"); client.print(" a:link {"); client.print(" color: white;"); client.print(" }"); client.print(" a:visited {"); client.print(" color: white;"); client.print(" }"); client.print(" a:hover {"); client.print(" color: hotpink;"); client.print(" }"); client.print(" a:active {"); client.print(" color: white;"); client.print(" }"); client.print(" </style > "); client.print(" </head > "); client.print(" <body>"); client.print(" <header>"); client.print(" <div class = \"container\">"); client.print(" <h1>Control de temperatura</h1>"); client.print(" <h3>Arduino MKR1000</h3>"); client.print(" <h4><a href=\"https://programarfacil.com\">programarfacil.com</a></h4>"); client.print(" </div>"); client.print(" </header>"); client.print(" <div class=\"container\">"); client.print(" <section class=\"main row\">"); client.print(" <article class=\"col-xs-12 col-sm-8 col-md-9 col-lg-9 \">"); client.print(" <h3>Temperatura</h3>"); client.print(" <h1 class=\"text-center\">"); client.print(tempC); client.print("º</h1>"); client.print(" </article>"); client.print(" <aside class = \"col-xs-12 col-sm-4 col-md-3 col-lg-3\">"); client.print(" <h3>Arduino MKR1000</h3>"); client.print(" <p><img src=\"http://i0.wp.com/programarfacil.com/wp-content/uploads/2016/04/mkr1000-difuminada.jpg?w=450\" alt=\"MKR1000\" style=\"width:190px;height:127px;\" class=\"img-responsive center-block\"></p>"); client.print(" </aside>"); client.print(" </section>"); client.print(" </div>"); client.print(" <footer>"); client.print(" <div class=\"container\">"); client.print(" <h4>Luis del Valle <a href=\"https://twitter.com/ldelvalleh\">@ldelvalleh</a></h4>"); client.print(" </div>"); client.print(" </footer>"); client.print(" <script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js\" integrity=\"sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS\" crossorigin=\"anonymous\"></script>"); client.print(" <script src=\"https://code.jquery.com/jquery-2.2.3.min.js\" integrity=\"sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=\" crossorigin=\"anonymous\"></script>"); client.print(" </body>"); client.print(" </html>"); client.println(); break; } else { currentLine = ""; } } else if (c != '\r') { currentLine += c; / } } } // close the connection: client.stop(); Serial.println("Cliente desconectado"); } } void LeerTemperatura() { // Con analogRead leemos el sensor, recuerda que es un valor de 0 a 1023 tempC = analogRead(pinSensorTemp); // Calculamos la temperatura con la fórmula tempC = (3.3 * tempC * 100.0) / 1023.0; // Envia el dato al puerto serial //Serial.println(tempC); } |
Como ves en el código, en este ejemplo voy a utilizar el Arduino MKR1000 como servidor web, por eso he tenido que meter la web completa dentro del sketch.
Cosas a tener en cuenta:
- Líneas 18 y 19: escribir el nombre de red WiFi y la contraseña
- Línea 24: escribe una IP que esté en el rango de tu WiFi.
Para poder ver la web a través de cualquier dispositivo ya sea móvil, tablet o pc, es necesario utilizar el framework Bootstrap. Este framework nos facilita la tarea de hacer responsive nuestra web, siempre y cuando sigamos sus procedimientos.
Te dejo a continuación la web en HTML5, todo este código ha sido incorporado en el sketch de Arduino, está entre las líneas 88 y 173.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Control de temperatura</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <style type="text/css"> header { background-color: #2980b9; color: white; } aside{ background-color: #0f5786; color: white; } .color1{ background-color: #e67d22; color: white; } .color2{ background-color: white; color: #e67d22; } footer { background-color: #2980b9; color: white; } a:link { color: white; } a:visited { color: white; } a:hover { color: hotpink; } a:active { color: white; } </style> </head> <body> <header> <div class="container"> <h1>Control de temperatura</h1> <h3>Arduino MKR1000</h3> <h4><a href="https://programarfacil.com">programarfacil.com</a></h4> </div> </header> <div class="container"> <section class="main row"> <article class="col-xs-12 col-sm-8 col-md-9 col-lg-9 "> <h3>Temperatura</h3> <h1 class="text-center">Aquí irá la temperatura</h1> </article> <aside class="col-xs-12 col-sm-4 col-md-3 col-lg-3"> <h3>Arduino MKR1000</h3> <p><img src="http://i0.wp.com/programarfacil.com/wp-content/uploads/2016/04/mkr1000-difuminada.jpg?w=450" alt="MKR1000" style="width:190px;height:127px;" class="img-responsive center-block"></p> </aside> </section> </div> <footer> <div class="container"> <h4>Luis del Valle <a href="https://twitter.com/ldelvalleh">@ldelvalleh</a></h4> </div> </footer> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script> </body> </html> |
Si lo pruebas verás que funciona. La alimentación que estamos utilizando es mediante USB, alimentación de 5V. Si queremos sacar todo el potencial de esta placa deberíamos conectarlo a una batería, esto lo veremos ahora.
Conectando los componentes (con batería)
Aquí es donde realmente sacamos todo el jugo al Arduino MKR1000, cuando creamos un dispositivo totalmente autónomo. Esto lo hacemos gracias a una batería, las características mínimas que debe tener son que suministre 3,7V y una capacidad de 700 mAh. En este caso la que yo utilizo es de 2000 mAh. Una de las capacidades de esta placa es que permite cargar la batería a través de ella. Tiene un LED naranja que nos indica si se está cargando o no.
Pero no todo es tan sencillo como parece. Cuando conectamos una batería, el pin de salida de 5V ya no suministra esos 5V, en ese momento empieza a trabajar con 3,7V, insuficiente para alimentar el LM35 así que hay que buscar una solución. Por la que yo he optado es añadir una pila de 9V que alimente el sensor de temperatura LM35. Te recuerdo que su rango de operación es de 4V a 30V así que no tendremos problema.
El circuito incorporando estos dos elementos sería el siguiente.
Con respecto a la programación no hay que hacer ningún cambio por introducir una batería y una pila a no ser que queramos controlar la vida útil de estos dos elementos. Eso lo dejaremos para otro artículo.
Te dejo a continuación unas fotos del circuito terminado y de la aplicación web tanto en móvil como en PC.