Bootstrap, LM35 y Arduino MKR1000

Luis del Valle Hernández

hace 9 años

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:

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.

/*
  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);

}

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.

<!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="https://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>

<!DOCTYPE html>

<head>

<title>Control de temperatura</title>

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>

<h1>Control de temperatura</h1>

<h3>Arduino MKR1000</h3>

<h4><a href="https://programarfacil.com">programarfacil.com</a></h4>

</div>

</header>

<h3>Temperatura</h3>

<h1 class="text-center">Aquí irá la temperatura</h1>

</article>

<h3>Arduino MKR1000</h3>

</aside>

</section>

</div>

<h4>Luis del Valle <a href="https://twitter.com/ldelvalleh">@ldelvalleh</a></h4>

</div>

</footer>

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