En esta práctica vamos a construir un sensor de temperatura que nos muestre la temperatura ambiente de la zona y nos indique dicha situación en la pantalla de la aplicación en Python que vamos a construir con la librería WebUI Brick, para que tenga un formato gráfico y nos muestre una gráfica de temperatura.
El WebUI Brick es un componente de Arduino APP Lab que actúa como un pequeño servidor web. Se encarga automáticamente de servir la interfaz (creada con HTML, CSS y JavaScript) y de gestionar la comunicación en tiempo real con tu código Python mediante WebSockets. De esta forma, evitas las complicaciones de ejecutar una interfaz gráfica (GUI) como Tkinter desde un contenedor, y obtienes una aplicación a la que puedes acceder desde cualquier navegador en la misma red.
Vamos a ir paso a paso construyendo la aplicación. Pero primero hablemos sobre el TMP36, que es un sensor de temperatura integrado.
Medida de temperatura con TMP36.
El sensor de temperatura TMP36, es un lector de temperatura en grados Fahrenheit por defectos, por lo que para saber los grados Celsius habrá que realizar una pequeña conversión. Este sensor proporciona una salida de precisión y bajo voltaje.
Este sensor es muy fácil de usar, basta con conectarlo a tierra y a un voltaje de 2.7V a 5.5 VDC y se podrán comenzar a tomar lecturas por el pin Vout. El voltaje de salida puede ser convertido fácilmente a temperatura utilizando el factor de escala de 10 mV÷ºC.
Patillaje del integrado TMP36
Vamos a comprobar de manera rápida como funciona el TMP36 conectándolo a una placa protoboard.
Sobre las caracterísisticas podemos destacar:
● Voltaje de entrada: 2.7 a 5.5 VDC
● Factor de escala 10 mV/°C
● Precisión de ±2 °C sobre temperatura
● Linealidad de ±0.5 °C
● Rango de operación: -40 °C a +125 °C
Para la comprobación neesitaremos un TMP36, un condensador de 100nF cerámico y una fuente de alimentación de entre 3 y 5 voltios. Además también necesitaremos un voltímetro para medir la variación de tensión de acuerdo a la temperatura.
Lo primero es montar el TMP36 en una ranura de la placa protoboard para realizar el montaje del circuito. Después inserta el condensador cerámico de 100µF, entre los terminales positivo y negativo del TMP36, de forma que quede en paralelo como puedes ver en la imagen central.
Y después conectar la fuente de alimentación de entre 2 y 5,5V. Yo utilizo por ejemplo, una batería de litio que utilicé de un dron roto. En la imagen siguiente puedes ver como queda el circuito.
Montaje del circuito en una protoboard.
Cuando conectamos un tester en escala milivoltios, entre el terminal del medio y masa, nos dará una medida en milivoltios que es razón de la temperatura ambiente.
Comprobar salida del integrado.
Esta salida es una tensión que hay que transformar de acuerdo a la formula siguiente:
Fórmula para realizar la conversión a grados centígrados.
Y con ello obtendremos una temperatura en grados centígrados con una variación de +-2 grados centígrados por efecto del error absoluto del sensor.
WebUI Brick.
Vamos a empezar con el proyecto, abre tu Arduino APP Lab una vez que hayas conectado tu Arduino UNO Q al puerto del PC.
Pulsa sobre Create New APP.
Crea un nuevo proyecto.
Como vamos a utilizar el Brick de WebUI Brick, lo vamos a importar al proyecto, para ello pulsa sobre el icono del menú lateral izquierdo 
y se te abrirá el menú de Bricks.
En Arduino App Lab, los Bricks son bloques o módulos de construcción reutilizables, tanto de interfaz gráfica como de lógica de datos y que permiten diseñar aplicaciones y paneles de control interactivos de forma modular.
Funcionan como piezas interconectables que encapsulan código y funciones específicas:
● Componentes de interfaz (UI): Incluyen elementos visuales como botones, deslizadores (sliders), conmutadores, gráficos de datos en tiempo real, medidores (gauges) y pantallas de texto para controlar o supervisar la placa desde una pantalla.
● Módulos de lógica y datos: Procesan la información que proviene de los sensores o de la entrada del usuario antes de ejecutar una acción o mostrar un resultado.
● Conectores de hardware: Vinculan directamente las entradas y salidas físicas de la placa (pines digitales, analógicos, sensores o actuadores) con los elementos visuales de la aplicación.
Entonces seleccionaremos el Brick de WebUI Brick y lo agregaremos a nuestro proyecto.
Seleccionamos el Brick de WebUI Brick.
Edición de archivos.
Basicamente vamos a editar en tres archivos de nuestro proyecto:
● El .ino que codifica la lógica del sensor TMP36 en la MCU.
● La lógica del servidor en Python.
● La intefaz Web.
Te voy a ir poniendo el código en cada sección para que lo copies directamente en tu proyecto y puedas usarlo para tu proyecto.
codificación del sensor en la MCU de Arduino UNO Q.Este es el código que leerá el TMP36 y enviará los datos al lado Linux a través del Bridge.
// sketch/sketch.ino (¡ESTA ES LA VERSIÓN CORRECTA!)
#include "Arduino_RouterBridge.h"
const int sensorPin = A0;
void setup() {
Serial.begin(9600);
Bridge.begin();
Serial.println("Sensor TMP36 configurado - 10 bits, 3.3V");
}
void loop() {
int sensorValue = analogRead(sensorPin);
// Conversión: 10 bits, referencia 3.3V
float voltage = (sensorValue / 1023.0) * 3.3;
// Fórmula del TMP36
float temperatureC = (voltage * 1000.0 - 500.0) / 10.0;
Bridge.call("temperature_update", String(temperatureC, 2));
delay(1000);
}
Arduino
Como curiosidad de éste código, usamos una referencia de 3.3V para que el Convertidor Analógico-Digital(ADC) de Arduino UNO Q pueda ser capaz de convertir correctamente los valores de la temperatura del TMP36. ¿Por qué?
Porque el TMP36 necesita de una alimentación de entre 2.7V y 5.5V y el sensor genera una salida proporcionada de acuerdo a la temperatura ambiente.
Pero en Arduino UNO Q, la referencia del ACD es de 3.3V y no de 5V como lo hacían sus versiones anteriores de Arduino UNO. Por eso el máximo valor del ACD a 3.3V es de 1023 bits.
Si pusieramos la referencia de 5V, el valor que nos devolvería sería de un valor mayor que nos produciría error en los datos.
Esta modificación de sketch es necesaria y la alimentación debe de permanecer al Pin 5V del Arduino UNO Q, porque aunque la referencia sea de 3.3V, el TMP36 se alimenta con un rango superior a 3.3V y alimentar el circuito con una tensión de 3.3V haría que cuando se superasen valores de tensión por aumento de temperatura, no se mostrase en el sistema dichos valores. Además, disminuye el ruido eléctrico y hace el circuito muy estable.
Lógica del servidor Python.El script de Python recibirá los datos del sensor desde la MCU y los expondrá a través de una API para que la interfaz web pueda mostrarlos en tiempo real.
# python/main.py
from arduino.app_utils import App, Bridge
from arduino.app_bricks.web_ui import WebUI
import json
# --- Configuración del WebUI ---
web_ui = WebUI() # Inicializa el servidor web en el puerto 7000
# --- Estado compartido para la temperatura ---
current_temp = {"celsius": 0.0}
# --- Función que recibe la temperatura desde la MCU ---
def update_sensors(temp_str):
global current_temp
try:
# Convertir el string recibido a float
current_temp["celsius"] = float(temp_str)
# Usar print normal para depurar (App Lab lo redirige a su consola)
print(f"Temperatura actualizada: {current_temp['celsius']} °C")
except ValueError:
print(f"Error al parsear temperatura: {temp_str}")
# Registrar la función para que Bridge la ejecute cuando llegue el evento
Bridge.provide("temperature_update", update_sensors)
# --- Exponer una API para que la interfaz web pida el estado ---
def get_temperature():
# Devuelve un diccionario que se convertirá automáticamente a JSON
return {"celsius": current_temp["celsius"]}
# Asocia la función a una URL (GET /api/temperature)
web_ui.expose_api("GET", "/api/temperature", get_temperature)
# --- Iniciar la aplicación ---
# Este comando inicia el WebUI y la comunicación Bridge
App.run()
Python
Y para terminar ya solo nos queda unir ambos archivos y que se nos cargue en el proyecto. Fijate que cuando has vuelto a entrar (o refrescas el proyecto), se te ha creado una nueva carpeta llamada Assets en el proyecto. Y dentro de la misma hay un archivo llamado index.html. Vamos a configurarlo.
Interfaz Web.Aquí es donde creas la interfaz de usuario visual. El HTML cargará la temperatura desde la API que expusiste en Python y la mostrará en un gráfico sencillo usando JavaScript.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Monitor de Temperatura UNO Q</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body { font-family: sans-serif; text-align: center; margin-top: 50px; background: #f0f0f0; }
.container { background: white; padding: 30px; border-radius: 20px; max-width: 800px; margin: 0 auto; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.temp-value { font-size: 4em; margin: 20px 0; color: #333; }
.temp-value .unit { font-size: 0.5em; color: #666; }
.status { color: #666; font-size: 0.9em; margin-bottom: 20px; }
.chart-container { width: 100%; max-width: 700px; margin: 20px auto; }
.error { color: #e74c3c; }
</style>
</head>
<body>
<div class="container">
<h1>🌡️ Monitor de Temperatura</h1>
<div class="status" id="status">Conectando...</div>
<div class="temp-value" id="temperatureDisplay">-- <span class="unit">°C</span></div>
<div class="chart-container">
<canvas id="tempChart"></canvas>
</div>
</div>
<script>
// --- Configuración del Gráfico ---
const ctx = document.getElementById('tempChart').getContext('2d');
const tempChart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: 'Temperatura (°C)',
data: [],
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.1)',
tension: 0.1,
fill: true
}]
},
options: {
responsive: true,
maintainAspectRatio: true,
scales: {
y: {
min: 0,
max: 50,
grid: { color: 'rgba(0,0,0,0.05)' }
},
x: {
grid: { display: false }
}
},
plugins: {
legend: { display: false }
}
}
});
let errorCount = 0;
// --- Función para obtener datos y actualizar la UI ---
function updateDashboard() {
fetch('/api/temperature')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(data => {
// Resetear contador de errores
errorCount = 0;
document.getElementById('status').textContent = '✅ Actualizando...';
document.getElementById('status').style.color = '#2ecc71';
// Actualizar el número grande
const temp = data.celsius;
document.getElementById('temperatureDisplay').innerHTML =
temp.toFixed(1) + ' <span class="unit">°C</span>';
// Actualizar el gráfico
const now = new Date().toLocaleTimeString();
tempChart.data.labels.push(now);
tempChart.data.datasets[0].data.push(temp);
// Mantener solo los últimos 20 puntos
if (tempChart.data.labels.length > 20) {
tempChart.data.labels.shift();
tempChart.data.datasets[0].data.shift();
}
tempChart.update();
})
.catch(error => {
errorCount++;
console.error('Error al obtener datos:', error);
document.getElementById('status').textContent = '❌ Error de conexión';
document.getElementById('status').style.color = '#e74c3c';
// Si hay muchos errores, mostrar mensaje más claro
if (errorCount > 3) {
document.getElementById('status').textContent =
'⚠️ No se reciben datos. ¿Está el UNO Q ejecutando la app?';
}
});
}
// Actualizar el dashboard cada 1.5 segundos
setInterval(updateDashboard, 1500);
// Ejecutar una vez al cargar la página
updateDashboard();
// Cambiar estado después de 2 segundos
setTimeout(() => {
document.getElementById('status').textContent = '🔄 Esperando datos...';
}, 2000);
</script>
</body>
</html>
HTML
Montaje del circuito.
Antes de darle al botón de RUN para que ejecute este proyecto nuestro Arduino APP Lab, hay que montar el circuito físico correspondiente en nuestra Arduino UNO Q. El TMP36 tiene 3 pines y viene en un encapsulado TO-92, que es el mismo encapsulado que los transistores bipolares de pequeña potencia. Viéndolo desde el frente (la parte plana o con la inscripción hacia ti) se vería de la forma:
Patillaje del integrado TMP36
● El terminal más a la izquierda (1), será el que conectemos a la tensión +5V del Arduino UNO Q.
● El terminal del medio (2), será el que conectemos al PIN A0 analógico.
● El terminal más a la derecha (3), será el que conectemos a masa o GND.
Este es el circuito físico montado:
Montaje del circuito en la Arduino UNO.
El circuito es muy sencillo, tanto que no hace falta ni conectarlo a una placa protoboard. Pero yo, como siempre lo monto en una placa protoboard.
Montaje del circuito en la Arduino UNO en placa board.
Ya estamos en disposición de pulsar RUN sobre la aplicación en Arduino APP Lab.