IoT & Web: Erstellen Sie einen Ampel-Monitor mit Zephyr OS, Next.js und WebSocket

In einer Welt, in der IoT und Web zunehmend verschmelzen, wird die Fähigkeit, Echtzeit-Überwachungsschnittstellen zu erstellen, immer wichtiger. In diesem praktischen Tutorial werden wir die Erstellung eines kompletten Ampel-Überwachungssystems erkunden, das die Leistungsfähigkeit von Zephyr OS für IoT mit modernen Webtechnologien kombiniert. Dieses Projekt dient als konkretes Beispiel zum Verständnis der Herausforderungen und Lösungen der IoT-Echtzeitüberwachung.

Hinweis: Als Zephyr OS-Experte stehe ich Ihnen bei Ihren IoT-Entwicklungsprojekten zur Verfügung. Kontaktieren Sie mich gerne per E-Mail oder über LinkedIn oder via GitHub für Fragen zu Zephyr OS oder um Ihre Embedded-Entwicklungsanforderungen zu besprechen.

Der vollständige Quellcode für dieses Projekt ist auf GitHub verfügbar.

Projektübersicht

1. Projektüberblick

   • Globale Architektur
   • Verwendete Technologien
   • Lernziele

2. IoT-Teil: Ampelsteuerung

   • Einführung in Zephyr OS
   • Controller-Implementierung in C++
   • Serverkommunikation

3. Backend: Server und Kommunikation

   • HTTP-API mit Bun
   • WebSocket-Server für Echtzeit
   • Zustandsverwaltung mit Redis

4. Frontend: Überwachungsschnittstelle

   • Entwicklung mit Next.js 15
   • Echtzeit-React-Komponenten
   • Zustands- und Aktualisierungsverwaltung

5. Infrastruktur und Deployment

   • Docker-Konfiguration
   • Entwicklungsskripte
   • Produktions-Deployment

6. Weiterführendes

   • Tests und Qualität
   • Monitoring und Beobachtbarkeit
   • Funktionale Verbesserungen

Einführung

Die Echtzeitüberwachung von IoT-Geräten stellt einzigartige Herausforderungen dar, von der Zustandsverwaltung bis zur bidirektionalen Kommunikation. Unser vernetztes Ampelprojekt veranschaulicht diese Probleme perfekt: Wie kann eine zuverlässige Synchronisation zwischen physischen Geräten und einer Webschnittstelle bei optimaler Leistung gewährleistet werden?

Projektziele

Dieses Lehrprojekt zielt darauf ab:

• Integration zwischen IoT und modernen Webtechnologien zu demonstrieren
• Echtzeit-Kommunikationsmuster zu erkunden
• Best Practices der Full-Stack-Entwicklung umzusetzen
• IoT-Überwachungsherausforderungen zu verstehen

Globale Architektur

Unser System basiert auf vier Hauptkomponenten:

1. IoT-Controller: Entwickelt mit Zephyr OS in C++, simuliert eine Ampelsteuerung
2. API-Gateway: HTTP-Server für die Controller-Kommunikation
3. WebSocket-Server: Gewährleistet die Echtzeit-Verteilung von Zustandsänderungen
4. Web-Interface: Next.js-Anwendung für Visualisierung und Steuerung

Wichtiger Hinweis zur Simulation: In diesem Projekt simulieren wir das IoT-Gerät in einem Docker-Container zu Lehrzwecken. Der Controller protokolliert lediglich Zustandsänderungen. In einer realen Implementierung würde dieser Controller auf einem echten IoT-Gerät (wie einem Raspberry Pi Pico) installiert sein und Ampeln physisch über seine GPIO-Pins steuern.

Beispiel mit Raspberry Pi Pico

Der Raspberry Pi Pico ist eine ausgezeichnete Wahl für die Implementierung dieses Projekts unter realen Bedingungen, weil:

• Er offiziell Zephyr OS unterstützt
• Er GPIO-Pins zur Steuerung der Ampel-LEDs besitzt
• Er über verschiedene Langstrecken-Kommunikationsmodule (LoRaWAN, NB-IoT, LTE-M) für Außeninstallationen angebunden werden kann
• Seine Kosten sehr erschwinglich sind (etwa 5€)

Um von unserer Simulation zu einer realen Implementierung zu wechseln, müssten Sie:

1. Logs durch GPIO-Befehle ersetzen
2. Netzwerkkonfiguration für WiFi oder Langstrecken-Kommunikationsmodule (LoRaWAN, NB-IoT, LTE-M) je nach Einsatzkontext anpassen
3. Stromversorgung und Ausfallsicherheit verwalten
4. Schutzgehäuse hinzufügen

1. Projektüberblick

Globale Architektur

Unser Ampel-Überwachungssystem basiert auf einer modernen verteilten Architektur, die entwickelt wurde, um eine zuverlässige Echtzeitkommunikation zwischen IoT-Geräten und der Benutzeroberfläche zu gewährleisten.

Datenfluss

1. IoT-Ebene

   • Ampelsteuerungen auf Basis von Zephyr OS verwalten die Lichtzustände
   • In unserer Implementierung werden Zustandsänderungen via HTTP an das API-Gateway übertragen, aber andere Protokolle wären möglich:
     • MQTT für leichtere und optimierte IoT-Kommunikation
     • CoAP für eingeschränkte Netzwerke
     • LoRaWAN für Langstreckenkommunikation
     • gRPC für erhöhte Leistung
   • Controller halten eine robuste Verbindung zum Server

2. Backend-Ebene

   • API-Gateway empfängt Updates und speichert sie in Redis
   • Redis fungiert als zentraler Zustandsspeicher
   • WebSocket-Server abonniert Redis-Events
   • Änderungen werden in Echtzeit an verbundene Clients übertragen

3. Frontend-Ebene

   • Next.js-Anwendung stellt WebSocket-Verbindung her
   • React-Komponenten aktualisieren sich automatisch
   • Interface zeigt Ampelzustände in Echtzeit an

Verwendete Technologien

IoT-Seite

cpp

Backend und Kommunikation

typescript

Frontend

typescript

Lernziele

Dieses Projekt wurde entwickelt, um mehrere wesentliche Aspekte moderner IoT- und Webentwicklung abzudecken:

1. Embedded-Programmierung

• Verwendung von Zephyr OS für IoT-Entwicklung
• Zustands- und Übergangsverwaltung in C++
• Netzwerkkommunikation von einem eingebetteten Gerät

2. Verteilte Architektur

• Kommunikation zwischen heterogenen Systemen
• Verteilte Zustandsverwaltung mit Redis
• Echtzeit-Messaging-Muster

3. Moderne Webentwicklung

• Hexagonale Architektur mit Next.js
• Performante React-Komponenten
• TypeScript und starke Typisierung

4. DevOps und Infrastruktur

• Containerisierung mit Docker
• Automatisierungsskripte
• Monitoring und Logging

In den folgenden Abschnitten werden wir jede Komponente des Systems im Detail erkunden, beginnend mit dem IoT-Controller auf Basis von Zephyr OS.

2. IoT-Teil: Ampelsteuerung

Einführung in Zephyr OS

Zephyr OS ist ein Open-Source-Echtzeitbetriebssystem (RTOS), das besonders für eingebettete Systeme und IoT geeignet ist. In unserem Projekt bietet es mehrere wichtige Vorteile:

• Echtzeitverwaltung: Perfekt für präzise Ampelsteuerung
• Robuster Netzwerk-Stack: Native TCP/IP-Protokollunterstützung
• Reduzierter Speicherbedarf: Ideal für eingeschränkte Geräte
• Moderne C++-Unterstützung: Ermöglicht objektorientierte Programmierung

Controller-Implementierung

Unser Ampelcontroller ist in modernem C++ implementiert und nutzt Zephyr OS-Funktionen für effiziente Zustands- und Kommunikationsverwaltung.

Code-Struktur

cpp

Zustandsverwaltung

cpp

Serverkommunikation

Die Kommunikation mit dem Backend-Server wird von einer dedizierten Klasse unter Verwendung der Zephyr HTTP-API verwaltet.

HTTP-Client

cpp

Logging und Überwachung

cpp

Ampelsteuerungs-Algorithmus

Der in main.cpp implementierte Algorithmus verwaltet den Ampelzyklus auf sichere und koordinierte Weise. Wir haben uns für eine einfache und demonstrative Implementierung entschieden, die für komplexere Anwendungsfälle erweitert werden könnte.

1. System-Initialisierung

   cpp

2. Hauptzyklus

   • Das System wechselt zwischen Nord-Süd- und Ost-West-Achsen
   • Jeder Zyklus umfasst drei Phasen:
     1. Grün (30 Sekunden)
     2. Gelb (5 Sekunden)
     3. Rot mit Sicherheitsverzögerung (2 Sekunden)

3. Zustandsänderungsverwaltung

   cpp

4. Asynchrone Kommunikation

   • Ein dedizierter Thread verarbeitet HTTP-Zustandsänderungen
   • Ereignisse werden über k_msgq in die Warteschlange gestellt
   • HTTP-Thread verarbeitet sie asynchron

5. Sicherheit und Robustheit

   • Sicherheitsverzögerung zwischen Achsenwechseln
   • Kommunikationsfehlerbehandlung
   • Ereignisprotokollierung zur Überwachung

Verbesserungsmöglichkeiten

Diese Basisimplementierung könnte erweitert werden durch:

1. Anpassbare Szenarien

   • Zeitbasierte Dauerkonfiguration
   • Spezialmodi (Nacht, Notfall, Events)
   • Echtzeitverkehrsanpassung

2. Erweitertes Verkehrsmanagement

   • Fahrzeugpräsenzerkennung
   • ÖPNV-Priorisierung
   • Kreuzungssynchronisation

3. Dynamische Konfiguration

   • Remote-Parameterschnittstelle
   • Szenariowechsel im laufenden Betrieb
   • Verkehrsmuster-Maschinelles Lernen

Für diese Verbesserungen müssten wir:

• Eine Abstraktionsschicht für Szenarien hinzufügen
• Ein dynamisches Konfigurationssystem implementieren
• Sensoren und komplexe Geschäftsregeln integrieren
• Eine umfassendere Steuerungs-API entwickeln

Diese einfache Version bleibt perfekt geeignet, um grundlegende IoT- und Echtzeit-Kommunikationskonzepte zu demonstrieren.

Projektkonfiguration

Die prj.conf-Datei konfiguriert Zephyr OS-Funktionen für unser Projekt. Diese Konfiguration aktiviert:

• C++ und C++17-Standard-Unterstützung für moderne Sprachfunktionen
• Netzwerkfähigkeiten mit IPv4 und TCP für Serverkommunikation
• Sockets und HTTP-Client zum Senden von Zustandsaktualisierungen
• Logging-System für Debugging und Überwachung

Diese Optionen sind essentiell für unseren IoT-Controller, um über das Netzwerk zu kommunizieren und Ampelzustandsänderungen an den zentralen Server zu senden.

conf

Optimierte Kompilierung mit Zephyr OS

Im Gegensatz zu traditionellen Betriebssystemen wie Linux, die viele Standardmodule und Treiber enthalten, verwendet Zephyr OS einen minimalistischen und hochkonfigurierbaren Ansatz. Während der Kompilierung werden nur die unbedingt notwendigen Komponenten in das finale Image eingebunden:

1. Unterschied zu traditionellen Betriebssystemen

   • Ein klassisches Embedded Linux ist mehrere hundert MB groß
   • Es enthält viele ungenutzte Treiber und Dienste
   • Der Start lädt viele überflüssige Komponenten
   • Die Angriffsfläche ist größer

2. Vorteile des Zephyr-Ansatzes

   • Finales Image ist nur wenige hundert KB groß
   • Nur konfigurierte Treiber und Protokolle werden eingebunden
   • Start ist nahezu instantan
   • Angriffsfläche ist minimal

3. Granulare Konfiguration

   • Jede Funktion ist ein Kconfig-Modul
   • Abhängigkeiten werden automatisch aufgelöst
   • Optimierung wird maximiert
   • Ressourcen werden statisch zugewiesen Dieser "von Grund auf" Ansatz ermöglicht ein hochoptimiertes und sicheres System, das perfekt an IoT-Einschränkungen angepasst ist:

• Begrenzte Ressourcen (RAM/Flash)
• Minimaler Energieverbrauch
• Schneller Start
• Reduzierte Angriffsfläche

Kompilierung und Deployment

Das Projekt verwendet CMake für die Kompilierung:

cmake

Diese IoT-Implementierung veranschaulicht mehrere fortgeschrittene Konzepte:

1. Ereignisgesteuerte Programmierung

   • Verwendung von Nachrichtenwarteschlangen für Thread-Kommunikation
   • Timer für Zustandsübergangsverwaltung

2. Ressourcenverwaltung

   • Effizienter Speicherverbrauch
   • Netzwerkverbindungsverwaltung

3. Robustheit

   • Detaillierte Ereignisprotokollierung
   • Kommunikationsfehlerbehandlung
   • Automatische Wiederverbindung

3. Backend: Server und Kommunikation

Unser Backend besteht aus mehreren Diensten, die zusammenarbeiten, um eine reibungslose Kommunikation zwischen IoT-Controllern und der Weboberfläche zu gewährleisten.

API Gateway mit Bun

Das API Gateway ist der Eingangspunkt für IoT-Controller. Implementiert mit Bun für seine außergewöhnliche Leistung, verarbeitet es HTTP-Anfragen und erhält die Zustandskonsistenz.

Anfragenverarbeitung

typescript

WebSocket Server

Der WebSocket-Server gewährleistet die Echtzeit-Verteilung von Updates an verbundene Web-Clients.

Server-Implementierung

typescript

Zustandsverwaltung mit Redis

Redis spielt eine zentrale Rolle in unserer Architektur und dient sowohl als Message Broker als auch als Zustandsspeicher.

Redis-Konfiguration

yaml

Redis-Subscriber

typescript

Kommunikationsarchitektur

Unser Backend implementiert mehrere wesentliche Kommunikationsmuster:

1. Pub/Sub-Muster

   • Redis als Message Broker
   • Entkopplung von Produzenten und Konsumenten
   • Effiziente Update-Verteilung

2. Gateway-Muster

   • Einzelner Eingangspunkt für IoT-Geräte
   • Datenvalidierung und -transformation
   • Zentralisierte Fehlerbehandlung

3. Observer-Muster

   • Echtzeit-Änderungsbenachrichtigung
   • WebSocket-Verbindungswartung
   • Update-Verteilung an Clients

Sicherheit und Leistung

Mehrere Maßnahmen sind implementiert, um Sicherheit und Leistung zu gewährleisten:

1. Sicherheit

   • Eingabedatenvalidierung
   • Konfigurierte CORS-Header
   • Netzwerkisolierung mit Docker

2. Leistung

   • Verwendung von Bun für optimale Leistung
   • Persistente Redis-Verbindungen
   • Effizientes WebSocket-Management

3. Zuverlässigkeit

   • Ereignisprotokollierung
   • Robuste Fehlerbehandlung
   • Automatische Dienst-Wiederverbindung

4. Frontend: Überwachungsschnittstelle

Unsere Benutzeroberfläche ist mit Next.js 15 entwickelt und folgt modernen Entwicklungspraktiken und einer hexagonalen Architektur.

Frontend-Architektur

Unsere Anwendung folgt einer hexagonalen Architektur (Ports und Adapter), um eine klare Trennung der Belange zu gewährleisten:

typescript

Adapter-Implementierung

Der Adapter verwaltet die Kommunikation mit dem Backend über WebSocket:

typescript

React-Komponenten

Hauptseite

typescript

Ampel-Komponente

typescript

Styles und Konfiguration

Tailwind-Konfiguration

typescript

Optimierungen und Best Practices

1. Leistung

   • Verwendung von React Server Components
   • Render-Optimierung
   • Lazy Loading von nicht-kritischen Komponenten

2. Barrierefreiheit

   • Tastaturunterstützung
   • Angemessene ARIA-Attribute
   • Optimierter Farbkontrast

3. Wartbarkeit

   • Hexagonale Architektur
   • Strikte Typisierung mit TypeScript
   • Automatisierte Tests

5. Infrastruktur und Deployment

Unser System verwendet Docker, um eine konsistente und reproduzierbare Bereitstellung in allen Umgebungen zu gewährleisten.

Docker-Konfiguration

Service-Komposition

yaml

Entwicklungsskripte

Service-Management-Skript

shell

Entwicklungsumgebungs-Konfiguration

Docker Image für Zephyr

dockerfile

Unterstützungsdienste

Docker-Dienste-Skript

shell

Abhängigkeitsverwaltung

Next.js-Konfiguration

json

Deployment Best Practices

1. Geheimnisverwaltung

   • Verwendung von Umgebungsvariablen
   • Trennung der Konfigurationen nach Umgebung
   • Sichere Geheimnisspeicherung

2. Überwachung

   • Zentralisiertes Logging
   • Leistungsmetriken
   • Automatisierte Warnungen

3. Sicherheit

   • Netzwerkisolierung
   • Regelmäßige Abhängigkeitsaktualisierungen
   • Schwachstellenscanning

6. Weiterführendes

Um dieses Projekt robuster und produktionsreif zu machen, können mehrere Verbesserungsbereiche erkundet werden:

1. Tests und Qualität

Um die Systemzuverlässigkeit zu gewährleisten, sollten wir implementieren:

IoT-Controller-Tests

• Unit-Tests für Ampel-Zustandsmaschine
• Netzwerk-Integrationstests
• Fehlerbedingungssimulation
• Lichtsequenzvalidierung

Frontend-Tests

• React-Komponententests mit Jest und Testing Library
• End-to-End-Tests mit Cypress oder Playwright
• Leistungstests mit Lighthouse
• Barrierefreiheitsvalidierung

2. Überwachung und Beobachtbarkeit

Für eine effektive Produktionsüberwachung sollten wir hinzufügen:

1. Leistung

   • Integration mit Prometheus/Grafana
   • Detaillierte WebSocket-Metriken
   • IoT-Ressourcenüberwachung

2. Zuverlässigkeit

   • Controller-Heartbeat-System
   • Automatische Anomalieerkennung
   • Automatische Zustandssicherung

3. Sicherheit

   • Controller-Authentifizierung
   • Kommunikationsverschlüsselung
   • Zugriffsprüfung

3. Funktionale Verbesserungen

Das System könnte erweitert werden um:

1. Erweiterte Schnittstelle

   • Wartungsmodus
   • Zustandsänderungsverlauf
   • Anpassbare Dashboards

2. Szenarioverwaltung

   • Zeitbasierte Planung
   • Spezialmodi (Notfall, Events)
   • Externe Integrations-API

3. Skalierbarkeit

   • Multi-Kreuzungs-Unterstützung
   • Kreuzungssynchronisation
   • Lastverteilung

4. Energieoptimierung für Batteriebetrieb

Für Projekte, die Energieautonomie erfordern (isolierte Standorte, Bereiche ohne Netzstrom), wären mehrere Optimierungen notwendig:

1. Energiemodi

   • Normalmodus für Standardbetrieb
   • Eco-Modus für Energieeinsparung an ruhigen Tagen
   • Nachtmodus mit reduzierter Helligkeit
   • Notfallmodus für niedrigen Batteriestand

cpp

2. Energiesparstrategien

   • CPU-Schlaf zwischen Zustandsänderungen
   • Netzwerkübertragungsbündelung
   • Dynamische LED-Helligkeitsanpassung

cpp

3. Solarstrom

   • Angemessene Paneldimensionierung
   • LiFePO4-Batterien für Langlebigkeit
   • Backup-System

4. Batterieüberwachung

cpp

Für eine erfolgreiche Bereitstellung wird empfohlen:

• Kontinuierliche Überwachung der Batteriegesundheit
• Planung vorbeugender Austausche
• Regelmäßige Reinigung der Solarpanels
• Implementierung von Notfallmodi bei niedrigem Batteriestand
• Bereitstellung von Backup-Signalisierung

Fazit

Dieses Projekt demonstriert die erfolgreiche Integration von IoT und modernen Webtechnologien zur Erstellung eines Echtzeit-Überwachungssystems. Wichtige Erkenntnisse sind:

1. Verteilte Architektur

   • Klare Trennung der Verantwortlichkeiten
   • Effiziente Komponentenkommunikation
   • Skalierbarkeit und Wartbarkeit

2. Moderne Technologien

   • Zephyr OS für IoT
   • Next.js für Frontend
   • WebSocket für Echtzeit

3. Best Practices

   • Automatisierte Tests
   • Vollständige Überwachung
   • Detaillierte Dokumentation

Dieses Projekt kann als Grundlage für die Entwicklung komplexerer IoT-Anwendungen dienen, indem die verwendete Architektur und Muster entsprechend Ihren spezifischen Anforderungen angepasst werden.

Praktische Umsetzung

Um das Beste aus diesem Tutorial herauszuholen und Ihre eigenen IoT-Projekte zu entwickeln, hier einige praktische Übungsvorschläge:

1. Klein anfangen

1. Vereinfachte Version

   • Erstellen Sie zunächst eine einzelne Ampel
   • Verwenden Sie einen einfachen HTTP-Server ohne WebSocket
   • Zeigen Sie den Zustand auf einer einfachen Webseite an

2. IoT-Simulation

   • Beginnen Sie ohne physische Hardware
   • Simulieren Sie den Controller mit einem Node.js-Skript
   • Testen Sie die Kommunikationslogik

2. Schrittweise Entwicklung

1. WebSockets hinzufügen

   • Implementieren Sie Echtzeit-Updates
   • Behandeln Sie automatische Wiederverbindung
   • Fügen Sie Logs hinzu, um den Ablauf zu verstehen

2. Redis integrieren

   • Speichern Sie zunächst einfache Zustände
   • Fügen Sie Datenpersistenz hinzu
   • Implementieren Sie Pub/Sub-Muster

3. Projektvariationen

Hier einige Ideen, um Ihre eigene Version zu erstellen:

1. Andere Anwendungsfälle

   • Temperatur-/Feuchtigkeitsmonitor
   • Intelligentes Beleuchtungssystem
   • Automatische Bewässerungssteuerung

2. Alternative Technologien

   • Ersetzen Sie Zephyr OS durch ESP32/Arduino
   • Verwenden Sie MQTT statt WebSockets
   • ...

4. Zusätzliche Ressourcen

Um jeden Aspekt zu vertiefen:

1. Offizielle Dokumentation

   • Zephyr OS Getting Started
   • Next.js Documentation
   • Redis Pub/Sub Guide

2. Beispiel-Repositories

   • Zephyr OS Samples
   • Next.js Examples
   • Redis WebSocket Examples

3. Communities

   • Discord Zephyr
   • Forum Next.js
   • Reddit r/IOT

1CONFIG_CPP=y
2CONFIG_STD_CPP17=y
3CONFIG_NETWORKING=y
4CONFIG_NET_IPV4=y
5CONFIG_NET_TCP=y
6CONFIG_NET_SOCKETS=y
7CONFIG_HTTP_CLIENT=y
8CONFIG_LOG=y

1// WebSocket Server mit Bun
2const wsServer = new WebSocketServer({ port: 8001 });
3
4// Redis Event-Abonnement
5subscriber.subscribe('traffic-lights', (message) => {
6  wsConnections.forEach((ws) => {
7    ws.send(JSON.stringify(JSON.parse(message)));
8  });
9});

1// Next.js Komponente mit WebSocket
2export function Intersection() {
3  const [lights, setLights] = useState<TrafficLightState[]>([]);
4
5  useEffect(() => {
6    const adapter = new TrafficLightAdapter();
7    return adapter.subscribeToUpdates((state) => {
8      setLights(prev => prev.map(light =>
9        light.id === state.id ? { ...light, state: state.state } : light
10      ));
11    });
12  }, []);
13
14  return (/* Ampel-Rendering */);
15}

1cmake_minimum_required(VERSION 3.20.0)
2
3set(CONF_FILE "prj.conf")
4set(BOARD qemu_x86)
5
6enable_language(C CXX)
7set(CMAKE_CXX_STANDARD 17)
8
9find_package(Zephyr REQUIRED HINTS $ENV{ZEPHYR_BASE})
10project(traffic-lights-orcherstrator)
11
12target_sources(app PRIVATE
13    src/main.cpp
14    src/logger.cpp
15    src/http_client.cpp
16)

1async fetch(req: Request) {
2  const url = new URL(req.url);
3
4  // CORS-Header für alle Antworten
5  const corsHeaders = {
6    "Access-Control-Allow-Origin": "*",
7    "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
8    "Access-Control-Allow-Headers": "Content-Type",
9  };
10
11  // Route zum Empfangen von Ampel-Updates
12  if (req.method === "POST" && url.pathname === "/traffic-light") {
13    try {
14      const data = await req.json();
15      const { id, state } = data;
16
17      // Zustandsvalidierung
18      const validStates = ["red", "yellow", "green"];
19      if (!validStates.includes(state)) {
20        return new Response("Ungültiger Zustand", {
21          status: 400,
22          headers: corsHeaders
23        });
24      }
25
26      // Zustand an Redis publizieren
27      await redis.publish("traffic-lights", JSON.stringify({ id, state }));
28      // Aktuellen Zustand speichern
29      await redis.set(`traffic-light:${id}`, state);
30
31      return new Response(JSON.stringify({ success: true }), {
32        headers: {
33          ...corsHeaders,
34          "Content-Type": "application/json"
35        }
36      });
37    } catch (error) {
38      console.error("Fehler:", error);
39      return new Response(JSON.stringify({ error: error.message }), {
40        status: 500,
41        headers: corsHeaders
42      });
43    }
44  }
45}

1const subscriber = redis.duplicate();
2await subscriber.connect();
3
4await subscriber.subscribe("traffic-lights", (message) => {
5  try {
6    const data = JSON.parse(message);
7    console.log("Neue Ampelzustandsänderung:", data);
8
9    wsConnections.forEach((ws) => {
10      ws.send(JSON.stringify(data));
11    });
12  } catch (err) {
13    console.error("Fehler beim Parsen der Nachricht:", err);
14  }
15});

1services:
2  redis:
3    image: redis:latest
4    ports:
5      - "6379:6379"
6    volumes:
7      - redis-data:/data
8    command: redis-server --appendonly yes
9    networks:
10      zephyr-net:
11        ipv4_address: 10.5.0.3

1async function main() {
2    const redis = createClient({
3        url: "redis://localhost:6379"
4    });
5
6    redis.on("error", err => console.error("Redis-Fehler:", err));
7    redis.on("connect", () => console.log("Mit Redis verbunden"));
8
9    await redis.connect();
10
11    const subscriber = redis.duplicate();
12    await subscriber.connect();
13
14    await subscriber.subscribe("traffic-lights", (message) => {
15        try {
16            const data = JSON.parse(message);
17            console.log("Neue Ampelzustandsänderung:", data);
18        } catch (err) {
19            console.error("Fehler beim Parsen der Nachricht:", err);
20        }
21    });
22}

1export interface TrafficLightState {
2  id: string;
3  state: "red" | "yellow" | "green";
4}
5
6export interface TrafficLightPort {
7  getInitialStates(): Promise<TrafficLightState[]>;
8  subscribeToUpdates(callback: (state: TrafficLightState) => void): () => void;
9}

1export class TrafficLightAdapter implements TrafficLightPort {
2  async getInitialStates(): Promise<TrafficLightState[]> {
3    try {
4      const responses = await Promise.all(
5        ["North", "South", "East", "West"].map((id) =>
6          fetch(`${API_URL}/traffic-light/${id}`).then((res) => res.json())
7        )
8      );
9
10      return responses.map((response) => ({
11        id: response.id,
12        state: response.state,
13      }));
14    } catch (error) {
15      console.error("Fehler beim Abrufen der Zustände:", error);
16      return [
17        { id: "North", state: "red" },
18        { id: "South", state: "red" },
19        { id: "East", state: "red" },
20        { id: "West", state: "red" },
21      ];
22    }
23  }
24
25  subscribeToUpdates(callback: (state: TrafficLightState) => void): () => void {
26    const ws = new WebSocket(WS_URL);
27
28    ws.onmessage = (event) => {
29      try {
30        const data = JSON.parse(event.data);
31        callback(data);
32      } catch (error) {
33        console.error("Fehler bei der Verarbeitung der WebSocket-Nachricht:", error);
34      }
35    };
36
37    return () => ws.close();
38  }
39}

1import { Intersection } from "@/interfaces/components/traffic-lights/intersection";
2
3export default function Home() {
4  return (
5    <div className="min-h-screen flex flex-col items-center justify-center p-8">
6      <h1 className="text-2xl font-bold mb-8">Ampel-Monitor</h1>
7      <Intersection />
8    </div>
9  );
10}

1"use client";
2
3interface TrafficLightProps extends TrafficLightState {
4  orientation?: "vertical" | "horizontal";
5}
6
7export function TrafficLight({
8  id,
9  state,
10  orientation = "vertical",
11}: TrafficLightProps) {
12  const lights = ["red", "yellow", "green"];
13
14  return (
15    <div className="flex flex-col gap-2 items-center">
16      <h3 className="text-sm font-semibold">{id}</h3>
17      <div
18        className={`bg-gray-800 p-2 rounded-lg flex ${
19          orientation === "horizontal" ? "flex-row" : "flex-col"
20        } gap-2`}
21      >
22        {lights.map((light) => (
23          <div
24            key={light}
25            className={`w-8 h-8 rounded-full ${
26              state === light
27                ? {
28                    red: "bg-red-500",
29                    yellow: "bg-yellow-500",
30                    green: "bg-green-500",
31                  }[light]
32                : "bg-gray-700"
33            }`}
34          />
35        ))}
36      </div>
37    </div>
38  );
39}

1export default {
2  content: [
3    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
4    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
5    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
6    "./src/interfaces/**/*.{js,ts,jsx,tsx,mdx}",
7  ],
8  theme: {
9    extend: {
10      colors: {
11        background: "var(--background)",
12        foreground: "var(--foreground)",
13      },
14      borderSpacing: {
15        'road': '16px'
16      },
17      backgroundImage: {
18        'dashed-white': 'repeating-linear-gradient(90deg, white 0 12px, transparent 12px 32px)',
19        'dashed-white-vertical': 'repeating-linear-gradient(0deg, white 0 12px, transparent 12px 32px)',
20      }
21    },
22  },
23  plugins: [],
24}

1services:
2  traffic-lights-monitor:
3    image: oven/bun:latest
4    working_dir: /traffic-lights-monitor
5    volumes:
6      - ./traffic-lights-monitor/:/traffic-lights-monitor
7    command: sh -c "bun install && bun run build && bun run start"
8    ports:
9      - "3000:3000"
10    environment:
11      - NEXT_PUBLIC_API_URL=http://zephyr-dev:8000
12      - NEXT_PUBLIC_WS_URL=ws://localhost:8001
13    networks:
14      zephyr-net:
15        ipv4_address: 10.5.0.5
16
17  redis:
18    image: redis:latest
19    ports:
20      - "6379:6379"
21    volumes:
22      - redis-data:/data
23    command: redis-server --appendonly yes
24    networks:
25      zephyr-net:
26        ipv4_address: 10.5.0.3
27
28volumes:
29  redis-data:
30
31networks:
32  zephyr-net:
33    driver: bridge
34    ipam:
35      config:
36        - subnet: 10.5.0.0/24

1#!/bin/bash
2
3# Farben für Nachrichten
4RED='\033[0;31m'
5GREEN='\033[0;32m'
6YELLOW='\033[1;33m'
7NC='\033[0m'
8
9# Funktion zum Prüfen, ob Container laufen
10check_containers() {
11    if ! docker compose ps --quiet &>/dev/null; then
12        echo -e "${RED}Container laufen nicht.${NC}"
13        echo -e "${YELLOW}Starte Container...${NC}"
14        docker compose up -d
15    fi
16}
17
18# Funktion zum Starten der Container
19up() {
20    echo -e "${YELLOW}Baue Docker-Image falls nötig...${NC}"
21    docker compose build
22    echo -e "${YELLOW}Starte Container...${NC}"
23    docker compose up -d
24    echo -e "${GREEN}Container erfolgreich gestartet${NC}"
25}
26
27# Funktion zum Stoppen der Container
28down() {
29    echo -e "${YELLOW}Stoppe Container...${NC}"
30    docker compose down
31    echo -e "${GREEN}Container erfolgreich gestoppt${NC}"
32}

1FROM ghcr.io/zephyrproject-rtos/zephyr-build:latest
2
3USER root
4
5RUN apt-get update
6RUN apt-get install -y \
7    net-tools \
8    uml-utilities \
9    bridge-utils \
10    nftables
11
12RUN apt-get install -y qemu-system-x86
13RUN apt-get install -y iputils-ping curl
14RUN apt-get install -y --no-install-recommends git cmake ninja-build gperf \
15    ccache dfu-util device-tree-compiler wget \
16    python3-dev python3-pip python3-setuptools python3-tk python3-wheel xz-utils file \
17    make gcc gcc-multilib g++-multilib libsdl2-dev libmagic1
18
19RUN west init -m https://github.com/zephyrproject-rtos/zephyr --mr main .
20RUN west update
21RUN west zephyr-export
22
23RUN cd /workdir/tools/net-tools && make
24
25RUN curl -fsSL https://bun.sh/install | bash
26ENV PATH="/root/.bun/bin:${PATH}"
27
28COPY gateway-http-server-redis /gateway-http-server-redis
29RUN cd /gateway-http-server-redis && bun install
30
31EXPOSE 8000
32
33USER root

1#!/bin/bash
2
3/workdir/tools/net-tools/loop-socat.sh & > /dev/null 2>&1
4/workdir/tools/net-tools/loop-slip-tap.sh & > /dev/null 2>&1
5cd /gateway-http-server-redis && bun run main.ts
6/bin/bash

1{
2  "name": "traffic-lights-monitor",
3  "version": "0.1.0",
4  "private": true,
5  "scripts": {
6    "dev": "next dev --turbopack",
7    "build": "next build",
8    "start": "next start",
9    "lint": "next lint"
10  },
11  "dependencies": {
12    "react": "^19.0.0",
13    "react-dom": "^19.0.0",
14    "next": "15.1.3"
15  },
16  "devDependencies": {
17    "typescript": "^5.7.2",
18    "@types/node": "^22.10.2",
19    "@types/react": "^19.0.2",
20    "@types/react-dom": "^19.0.2",
21    "postcss": "^8.4.49",
22    "tailwindcss": "^3.4.17",
23    "eslint": "^9.17.0"
24  }
25}

1// Zephyr OS Codebeispiel
2void change_traffic_light_state(const char* id, const char* state) {
3    // Zustand via HTTP senden
4    http_client.send_traffic_light_state(id, state);
5    // Event-Logging
6    LOG_INF("Ampel %s: %s", id, state);
7}

1enum class LightState
2{
3    RED,
4    YELLOW,
5    GREEN
6};
7
8struct TrafficLight
9{
10    const char *name;
11    LightState state;
12    k_timer timer;
13};
14
15struct StateChangeEvent
16{
17    int light_index;
18    LightState new_state;
19};

1void change_axis_state(int light1_index, int light2_index, LightState new_state, uint32_t duration_ms)
2{
3    StateChangeEvent evt1 = {light1_index, new_state};
4    StateChangeEvent evt2 = {light2_index, new_state};
5
6    k_msgq_put(&state_change_queue, &evt1, K_NO_WAIT);
7    k_msgq_put(&state_change_queue, &evt2, K_NO_WAIT);
8
9    if (duration_ms > 0)
10    {
11        k_timer_start(&lights[light1_index].timer, K_MSEC(duration_ms), K_NO_WAIT);
12        k_timer_start(&lights[light2_index].timer, K_MSEC(duration_ms), K_NO_WAIT);
13    }
14}

1void HttpClient::send_traffic_light_state(const char *id, const char *state)
2{
3    // HTTP-Request-Vorbereitung
4    struct http_request req;
5    memset(&req, 0, sizeof(req));
6
7    const char *headers[] = {
8        "Content-Type: application/json\r\n",
9        content_len,
10        NULL
11    };
12
13    req.method = HTTP_POST;
14    req.url = "/traffic-light";
15    req.host = SERVER_ADDR;
16    req.protocol = "HTTP/1.1";
17    req.header_fields = headers;
18    req.payload = payload;
19    req.payload_len = strlen(payload);
20}

1#include <zephyr/logging/log.h>
2
3LOG_MODULE_REGISTER(traffic_lights, LOG_LEVEL_INF);
4
5void log_light_state(const char *name, const char *state)
6{
7    LOG_INF("Ampel %s: %s", name, state);
8}

1void init_traffic_system() {
2    // Timer-Initialisierung für jede Ampel
3    for (auto &light : lights) {
4        k_timer_init(&light.timer, timer_expiry_callback, nullptr);
5    }
6    // HTTP-Thread-Erstellung für Kommunikation
7    http_thread_id = k_thread_create(&http_thread_data, ...);
8}

1void change_axis_state(int light1_index, int light2_index,
2                      LightState new_state, uint32_t duration_ms) {
3    // Zustandsänderungsereignisse senden
4    StateChangeEvent evt1 = {light1_index, new_state};
5    StateChangeEvent evt2 = {light2_index, new_state};
6
7    // Timer-Programmierung falls Dauer angegeben
8    if (duration_ms > 0) {
9        k_timer_start(&lights[light1_index].timer, ...);
10        k_timer_start(&lights[light2_index].timer, ...);
11    }
12}

1enum class PowerMode {
2    NORMAL,     // Standardbetrieb
3    ECO,        // Energiesparmodus
4    NIGHT,      // Nachtmodus
5    EMERGENCY   // Notfallmodus (niedriger Batteriestand)
6};

1void enter_low_power_mode() {
2    // CPU-Frequenzreduzierung
3    pm_device_action_run(cpu_dev, PM_DEVICE_ACTION_RESUME);
4
5    // Timer-Aufweckkonfiguration
6    k_timer_start(&wakeup_timer, K_SECONDS(state_duration), K_NO_WAIT);
7
8    // Schlafmodus eintreten
9    k_sleep(K_FOREVER);
10}

1struct PowerMetrics {
2    float battery_voltage;
3    float current_draw;
4    float temperature;
5    uint32_t uptime;
6};
7
8PowerMetrics getCurrentMetrics() {
9    PowerMetrics metrics;
10    metrics.battery_voltage = adc_read_battery();
11    metrics.current_draw = adc_read_current();
12    metrics.temperature = read_temperature();
13    metrics.uptime = k_uptime_get();
14    return metrics;
15}