# Week 4 - Labo - Realtime
Dit labo bestaat uit meerdere delen, het eerste deel is ter illustratie en testen van de basis. De overige delen zijn voor aan jullie om uit te werken.
# Deel 0
Led laten blinken op Raspberry Pi 4 en 5, afhankelijk van welke je hebt.
# Stappen
- Maak een map aan voor je project, dat kan via de terminal of via de file explorer
mkdir pi-realtime
- Navigeer naar de map
cd pi-realtime
- Maak een bestand aan met de naam
led.py
touch led.py
Open het bestand in een editor naar keuze. VSCode is een goede keuze.
Maak een virtual-environment aan met volgend commando
python3 -m venv venv --system-site-packages
Met --system-site-packages kan je de GPIO library gebruiken in de virtual-environment (en van andere packages in de system site-packages).
- Activeer de virtual-environment
source venv/bin/activate
- Voeg volgende code toe in app.py
from gpiozero import LED
from time import sleep
red = LED(17)
while True:
red.on()
sleep(1)
red.off()
sleep(1)
2
3
4
5
6
7
8
9
10
- Run het bestand
python3 led.py
- De led zou nu moeten knipperen. Yaay! 🎉
# Deel 1 - Flask
Zet een Flask server op met een aantal endpoints.
- Voorzie twee routes die louter een boodschap teruggeven
- Voorzie twee routes die de led aan en uit zetten
/
[GET] # The server is running on: --local-ip-address--
/nmd
[GET] # Greetings Earthlings. We are IMD
/led1/on
[GET] # Zet de led aan
/led1/off
[GET] # Zet de led uit
2
3
4
5
6
7
8
9
Je zal hiervoor Flask moeten gebruiken,
from flask import Flask, render_template
Flask Guide: https://flask.palletsprojects.com/en/2.3.x/quickstart/ (opens new window)
Problemen die je kan tegenkomen: https://forums.raspberrypi.com/viewtopic.php?t=362014&sid=a16fb3a89f71006aec8e77e550875411&start=25 (opens new window) https://forums.raspberrypi.com/viewtopic.php?p=2160578#p2160578 (opens new window)
# Deel 2 - Tonen van waarden en input via interface op de webpagina
# Flask
Maak een nieuwe route aan die de waarden van de led toont op een webpagina.
/led1
[GET] # Toon de status van de led
Maak een nieuwe route aan die een formulier toont om de led aan en uit te zetten.
/led1
[GET] # Toon de status van de led
[POST] # Zet de led aan of uit
# HTML
Maak een html-bestand aan in de templates-folder met de naam led.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>LED</h1>
<p>De led is momenteel: {{ led_status }}</p>
<form action="/led1" method="post">
<input type="submit" value="Aan">
<input type="submit" value="Uit">
</form>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Deel 3 - Realtime updaten van interface
# Challenges
We lijsten enkele challenges op die je kan proberen oplossen.
- Zorg ervoor dat je de LED kan aan- en uitzetten zonder de pagina te herladen
- Je kan hiervoor gebruik maken van JavaScript (fetch)
- Maak hiervoor een API, met enkele endpoints
- endpoint die de huidige status van de led teruggeeft in JSON-formaat
- endpoint die de led aan en uit zet
- Lees de waarde van een sensor uit
- Bijvoorbeeld een temperatuursensor, lichtsensor, …
- Maak een API die de waarde van de sensor teruggeeft
- Toon de waarde van de sensor op de webpagina
- Zorg ervoor dat de waarde realtime geüpdatet wordt (vb via websockets)
- Maak een dashboard
- Op dat dashboard kan je de status van alle led’s en sensoren zien
- (Daarvoor zou iedereen reeds een eigen API moeten hebben)
# Realtime solutions
Realtime kunnen we oplossen met meerdere technieken, zoals:
# Websockets (Flask-SocketIO)
Dit is een uitbreiding van Flask die websockets mogelijk maakt. Een socket is een verbinding tussen een client en een server. Het is een bidirectionele verbinding, wat betekent dat zowel de client als de server berichten kunnen sturen. Dit is een goede manier om real-time communicatie te hebben tussen de server en de client.
Flask-SocketIO: https://flask-socketio.readthedocs.io/en/latest/ (opens new window) is een bibliotheek die het mogelijk maakt om websockets te gebruiken in Flask. Om de bibliotheek te gebruiken, moet je deze eerst installeren.
pip install flask-socketio
Om in de browser websockets te kunnen gebruiken, kan je de JavaScript-bibliotheek socket.io gebruiken. Deze bibliotheek is beschikbaar via een CDN, dus je kan deze toevoegen aan je HTML-bestand.
<script src="https://cdn.socket.io/4.7.4/socket.io.min.js" integrity="sha384-Gr6Lu2Ajx28mzwyVR8CFkULdCU7kMlZ9UthllibdOSo6qAiN+yXNHqtgdTvFXMT4" crossorigin="anonymous"></script>
# Polling (fetch)
Polling is een techniek waarbij de client op regelmatige tijdstippen de server bevraagt voor nieuwe data. Dit kan je doen met JavaScript, bijvoorbeeld met de fetch-functie.
setInterval(() => {
fetch('/led1/status')
.then(response => response.json())
.then(data => {
console.log(data);
});
}, 1000);
2
3
4
5
6
7
Deze code zal elke seconde de status van de led bevragen en loggen naar de console. Let op, dit is niet de meest efficiënte manier om real-time data te verkrijgen, maar het is wel een eenvoudige manier.
# Server-Sent Events (Flask-SSE)
Let op, voor deze heb je een actieve REDIS-server nodig, dit is een extra stap die je moet uitvoeren.
Server-Sent Events (SSE) is een techniek die het mogelijk maakt om een server berichten te laten sturen naar de client. Dit is eenrichtingsverkeer, wat betekent dat de client geen berichten kan sturen naar de server. Dit is een goede manier om real-time data te verkrijgen van de server.
Flask-SSE: https://flask-sse.readthedocs.io/en/latest/ (opens new window) is een bibliotheek die het mogelijk maakt om SSE te gebruiken in Flask. Om de bibliotheek te gebruiken, moet je deze eerst installeren.
pip install flask-sse
Om in de browser SSE te kunnen gebruiken, kan je de JavaScript-bibliotheek EventSource gebruiken. Deze bibliotheek is beschikbaar in de meeste moderne browsers.
const eventSource = new EventSource('/led1/status');
eventSource.onmessage = (event) => {
console.log(event.data);
};
2
3
4