Hardware components | ||||||
 |
| × | 1 | |||
Software apps and online services | ||||||
| ||||||
| ||||||
In this step by step guide, I'll dive into how to create a live temperature dashboard using the Raspberry Pi Pico W. This project combines the power of Python, Web Sockets, and modern web technologies to deliver real-time temperature data directly to your web browser.
By the end of this tutorial, you'll have a functional dashboard displaying the temperature readings from your Raspberry Pi Pico W.
Prerequisites- A Raspberry Pi Pico W with MicroPython installed.
- Basic knowledge of Python and HTML/CSS.
- A micro USB cable for programming and power.
- Access to a Wi-Fi network.
- A basic understanding of electronic circuits for reading sensor data (not covered in depth here).
First, ensure your Raspberry Pi Pico W is set up with MicroPython. You can follow the official guide from Raspberry Pi on how to install MicroPython of you can follow this in-depth guide: How To Get Started with Raspberry Pi Pico in 2024.
Step 2: Connecting to the Wi-FiOur project needs internet access to send data via Web Sockets. Below is the Python function to connect your Raspberry Pi Pico W to your Wi-Fi network:
import network
def connect_to_wifi():
sta_if = network.WLAN(network.STA_IF)
if not sta_if.isconnected():
print("Connecting to the network...")
sta_if.active(True)
sta_if.connect("YourSSID", "YourPassword")
while not sta_if.isconnected():
pass
print("Connected with IP: ", sta_if.ifconfig()[0])
connect_to_wifi() Replace "YourSSID" and "YourPassword" with your Wi-Fi credentials. This script activates the Pico W’s Wi-Fi and connects it to your network.
We use the Microdot library, a lightweight WSGI-compatible web server for MicroPython. Install it via pip and import it in your script. The following code snippet sets up a basic web server and WebSocket route:
from microdot import Microdot, send_file
from microdot.websocket import with_websocket
app = Microdot()
@app.route('/')
async def index(request):
return send_file('index.html')
@app.route('/temperature')
@with_websocket
async def temperature_socket(request, ws):
while True:
# Simulated temperature reading
temperature = read_temperature()
await ws.send(str(temperature))
time.sleep(1)
def read_temperature():
# Dummy function to simulate reading from a sensor
return 25 # replace with actual code to read from a sensor
app.run(debug=True) This server serves an index.html file and continuously sends temperature data through the /temperature WebSocket endpoint.
Your index.html should include a visual representation of the temperature. Below is a simplified version with Chart.js to plot real-time data:
<!DOCTYPE html>
<html>
<head>
<title>Live Temperature Dashboard</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body { font-family: Arial, sans-serif; background-color: #333; color: #fff; }
.chart-container { width: 600px; margin: auto; }
</style>
</head>
<body>
<h1>Live Temperature Dashboard</h1>
<div class="chart-container">
<canvas id="temperatureChart"></canvas>
</div>
<script>
var ctx = document.getElementById('temperatureChart').getContext('2d');
var temperatureChart = new Chart(ctx, {
type: 'line',
data: {
labels: [], // Time labels
datasets: [{
label: 'Temperature (°C)',
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
data: []
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
var socket = new WebSocket('ws://' + location.host + '/temperature');
socket.onmessage = function(event) {
let temperature = parseFloat(event.data);
let currentTime = new Date().toLocaleTimeString();
temperatureChart.data.labels.push(currentTime);
temperatureChart.data.datasets[0].data.push(temperature);
temperatureChart.update();
};
</script>
</body>
</html>If you found this guide helpful, consider buying me a coffee to keep the projects coming!
Make sure to download the full code from the sketches or you can get from our gist:
Step 5: Testing Your Setup- Load your Python code onto the Raspberry Pi Pico W.
- Place the
index.htmlin the root directory or specify its path correctly. - Power the Pico W and connect it via a web browser to see real-time temperature data.
And there you have it—a live temperature dashboard using your Raspberry Pi Pico W! This project not only gives you practical insights into the Internet of Things and real-time data processing but also serves as a cool addition to any smart home setup. Enjoy monitoring and stay tuned for more fun projects!
RajivCodeLab
Comments