Modul 1: Wetter Simulation¶

Unter Wettersteuerung findest du eine Fernsteuerung für das Wetter in unserer Smart City. So kannst du z.B. Starkregen bei Nacht oder Sonnenschein am Morgen einstellen. In diesem Modul programmierst du eine Website, die auf die eingestellten Werte reagiert und ein entsprechendes Wetter visualisiert. Das kann z.B. so aussehen:

Vorbereitung¶

Zur Durchführung benötigst du einen Editor (Visual Studio Code) und einen Browser (Firefox). Öffne zunächst Visual Studio Code:

Der Editor glieder sich grob in zwei Bereiche: links die Dateiliste und rechts das Editorfenster. Rechts-klicke nun links in die Dateiliste, um eine neue Datei zu erstellen. Nenne sie z.B. index.html und fülle sie im Editorfenster rechts mit Inhalt:

<html>
    <title>Wetter Simulation</title>
</head>
<body>
    <h1>Herzlich Willkommen zur Wetter Simulation</h1>
</body>

Nun öffne die index.htmlin einem Browser. Du solltest eine einfache Website mit einer entsprechenden Überschrift sehen

Als nächstes musst du dich mit dem MQTT-Broker verbinden. Dafür benötigst du eine Programmierbibliothek, die du im <head> Block einfügst:

  <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>

Nun kannst du dich in JavaScript mit dem MQTT-Broker verbinden und auf Nachrichten warten:

<html>
    <title>Wetter Simulation</title>
    <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
</head>
<body>
    <h1>Wetter Simulation</h1>
    <script>
        const client = mqtt.connect("wss://imiq-lab.et.uni-magdeburg.de/mqtt");
        client.on("connect", () => {
            client.subscribe("#")
            client.on("message", (topic, payload) => {
                document.body.append(topic + ":" + payload)
            });
        })
    </script>
</body>

Überprüfe mithilfe des MQTT Viewer, ob du Nachrichten empfangen kannst.

Info

Warte nun, bis alle Teilnehmenden sich mit dem Broker verbunden haben.

Deine Aufgabe¶

Passe den Code so an, dass er folgende Topics auswertet:

Topic	Beschreibung	Beispiel
city/weather/hour	Uhrzeit in Stunden (0-24)	12
city/weather/rain	Regenstärke in Prozent, 0 bedeutet kein Regen, 100 Starkregen	80
city/weather/temperature	Temperatur in Grad Celcius	21

Dies sind exakt die Topics, die mit der Wettersteuerung eingestellt werden.

Entsprechend der empfangenen Werte kannst du nun das passende Wetter darstellen. Du kannst auch deine Lieblings-KI zur Hilfe nehmen, um entsprechenden Code zu erzeugen.