homekit dockerfile

apps/homekit/Dockerfile

@@ -0,0 +1,30 @@
+FROM python:3.12-slim
+
+# Environment defaults (can be overridden at runtime)
+ENV PYTHONUNBUFFERED=1 \
+    HOMEKIT_NAME="Home Automation Bridge" \
+    HOMEKIT_PIN="031-45-154" \
+    HOMEKIT_PORT="51826" \
+    API_BASE="http://api:8001" \
+    HOMEKIT_API_TOKEN="" \
+    HOMEKIT_PERSIST_FILE="/data/homekit.state"
+
+WORKDIR /app
+
+# Copy only requirements first for better build caching
+COPY apps/homekit/requirements.txt ./apps/homekit/requirements.txt
+
+RUN pip install --no-cache-dir --upgrade pip \
+    && pip install --no-cache-dir -r apps/homekit/requirements.txt
+
+# Copy full source tree
+COPY . /app
+
+# Expose HomeKit TCP port (mDNS uses UDP 5353 via host network)
+EXPOSE 51826/tcp
+
+# Volume for persistent HomeKit state (pairings etc.)
+VOLUME ["/data"]
+
+# Start the HomeKit bridge
+CMD ["python", "-m", "apps.homekit.main"]

apps/homekit/docker-compose.yaml

@@ -0,0 +1,42 @@
+version: "3.9"
+
+services:
+  homekit-bridge:
+    build:
+      context: ../..
+      dockerfile: apps/homekit/Dockerfile
+    container_name: homekit-bridge
+
+    # Host-Netzwerk, damit mDNS/Bonjour im LAN sichtbar ist
+    network_mode: host
+
+    # Environment-Variablen für die Bridge-Konfiguration
+    environment:
+      # Anzeigename der Bridge in HomeKit
+      - HOMEKIT_NAME=Home Automation Bridge
+      # HomeKit-Setup-PIN (Format XXX-YY-ZZZ)
+      - HOMEKIT_PIN=031-45-154
+      # TCP-Port, auf dem HAP-Python lauscht (muss zum EXPOSE passen)
+      - HOMEKIT_PORT=51826
+      
+      # Basis-URL deiner bestehenden API (anpassen!)
+      # Beispiel: UI/API im gleichen Docker-Netzwerk → http://api:8001
+      # Oder IP/Host im LAN → z.B. http://192.168.1.10:8001
+      - API_BASE=http://172.19.1.11:8001
+
+      # Optionales API-Token, falls deine API Auth nutzt
+      - HOMEKIT_API_TOKEN=
+
+      # Pfad für Persistenz der HomeKit-Daten im Container
+      - HOMEKIT_PERSIST_FILE=/data/homekit.state
+
+    # Persistentes Volume für Pairing-Infos (homekit.state)
+    volumes:
+      - homekit_data:/data
+
+    # Neustart-Policy
+    restart: unless-stopped
+
+volumes:
+  homekit_data:
+    driver: local

apps/ui/templates/garage.html

@@ -16,7 +16,7 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
     <meta name="apple-mobile-web-app-title" content="Garage">
     <meta name="theme-color" content="#667eea">
-    <link rel="manifest" href="/static/manifest.json">
+    <link rel="manifest" href="/manifest.json">
     <style>
         * {
             margin: 0;

apps/ui/templates/rooms.html

@@ -16,7 +16,7 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
     <meta name="apple-mobile-web-app-title" content="Räume">
     <meta name="theme-color" content="#667eea">
-    <link rel="manifest" href="/static/manifest.json">
+    <link rel="manifest" href="/manifest.json">
     <style>
         * {
             margin: 0;

create_proper_icons.py

@@ -0,0 +1,118 @@
+"""
+Script to create proper PNG icons with house and car symbols
+"""
+
+import os
+from pathlib import Path
+from PIL import Image, ImageDraw, ImageFont
+
+def create_proper_icons():
+    static_dir = Path("/Users/wn/Workspace/home-automation/apps/ui/static")
+    
+    # Create home icon with house symbol
+    def create_home_icon(size):
+        img = Image.new('RGBA', (size, size), color=(102, 126, 234, 255))  # #667EEA
+        draw = ImageDraw.Draw(img)
+        
+        # Calculate proportions
+        margin = size // 10
+        house_size = size - 2 * margin
+        
+        # Draw house shape
+        # Base rectangle
+        base_height = house_size // 2
+        base_y = size - margin - base_height
+        draw.rectangle([margin, base_y, size - margin, size - margin], fill='white')
+        
+        # Roof triangle
+        roof_height = house_size // 3
+        roof_points = [
+            (size // 2, margin),  # top point
+            (margin, base_y),     # bottom left
+            (size - margin, base_y)  # bottom right
+        ]
+        draw.polygon(roof_points, fill='white')
+        
+        # Door
+        door_width = house_size // 6
+        door_height = base_height // 2
+        door_x = size // 2 - door_width // 2
+        door_y = size - margin - door_height
+        draw.rectangle([door_x, door_y, door_x + door_width, size - margin], fill=(102, 126, 234, 255))
+        
+        # Window
+        window_size = house_size // 8
+        window_x = margin + house_size // 4
+        window_y = base_y + base_height // 4
+        draw.rectangle([window_x, window_y, window_x + window_size, window_y + window_size], fill=(102, 126, 234, 255))
+        
+        return img
+    
+    # Create car icon with car symbol
+    def create_car_icon(size):
+        img = Image.new('RGBA', (size, size), color=(102, 126, 234, 255))  # #667EEA
+        draw = ImageDraw.Draw(img)
+        
+        # Calculate proportions
+        margin = size // 8
+        car_width = size - 2 * margin
+        car_height = car_width // 2
+        car_y = size // 2 - car_height // 2
+        
+        # Draw car body
+        draw.rounded_rectangle([margin, car_y, size - margin, car_y + car_height], 
+                             radius=size//20, fill='white')
+        
+        # Draw car roof
+        roof_margin = car_width // 4
+        roof_height = car_height // 2
+        roof_y = car_y - roof_height // 2
+        draw.rounded_rectangle([margin + roof_margin, roof_y, 
+                              size - margin - roof_margin, car_y + roof_height // 2],
+                             radius=size//30, fill='white')
+        
+        # Draw wheels
+        wheel_radius = car_height // 4
+        wheel_y = car_y + car_height - wheel_radius // 2
+        
+        # Left wheel
+        left_wheel_x = margin + car_width // 4
+        draw.ellipse([left_wheel_x - wheel_radius, wheel_y - wheel_radius,
+                     left_wheel_x + wheel_radius, wheel_y + wheel_radius], 
+                    fill=(102, 126, 234, 255))
+        
+        # Right wheel
+        right_wheel_x = size - margin - car_width // 4
+        draw.ellipse([right_wheel_x - wheel_radius, wheel_y - wheel_radius,
+                     right_wheel_x + wheel_radius, wheel_y + wheel_radius], 
+                    fill=(102, 126, 234, 255))
+        
+        return img
+    
+    # Sizes to create
+    sizes = [16, 32, 57, 60, 72, 76, 114, 120, 144, 152, 180]
+    
+    # Create home icons
+    for size in sizes:
+        home_icon = create_home_icon(size)
+        home_icon.save(static_dir / f"apple-touch-icon-{size}x{size}.png")
+        print(f"Created apple-touch-icon-{size}x{size}.png")
+    
+    # Also create the main apple-touch-icon.png
+    main_icon = create_home_icon(180)
+    main_icon.save(static_dir / "apple-touch-icon.png")
+    print("Created apple-touch-icon.png")
+    
+    # Create garage icons
+    for size in sizes:
+        car_icon = create_car_icon(size)
+        car_icon.save(static_dir / f"garage-icon-{size}x{size}.png")
+        print(f"Created garage-icon-{size}x{size}.png")
+    
+    # Also create the main garage-icon.png
+    main_garage = create_car_icon(180)
+    main_garage.save(static_dir / "garage-icon.png")
+    print("Created garage-icon.png")
+
+if __name__ == "__main__":
+    create_proper_icons()

icon-test.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Icon Test</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            padding: 20px;
+            background: #f5f5f5;
+        }
+        .icon-container {
+            display: flex;
+            gap: 20px;
+            margin: 20px 0;
+        }
+        .icon-test {
+            background: white;
+            border-radius: 8px;
+            padding: 20px;
+            text-align: center;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
+        .icon-test img {
+            display: block;
+            margin: 10px auto;
+            border-radius: 8px;
+        }
+        .icon-sizes {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+            justify-content: center;
+            margin-top: 10px;
+        }
+    </style>
+</head>
+<body>
+    <h1>Apple Touch Icon Test</h1>
+    
+    <div class="icon-container">
+        <div class="icon-test">
+            <h3>Home Icon</h3>
+            <img src="apps/ui/static/apple-touch-icon.png" alt="Home Icon" width="120" height="120">
+            <p>Haupticon für die Home Automation App</p>
+            <div class="icon-sizes">
+                <img src="apps/ui/static/apple-touch-icon-76x76.png" alt="Home 76px" width="76" height="76">
+                <img src="apps/ui/static/apple-touch-icon-60x60.png" alt="Home 60px" width="60" height="60">
+                <img src="apps/ui/static/apple-touch-icon-32x32.png" alt="Home 32px" width="32" height="32">
+            </div>
+        </div>
+        
+        <div class="icon-test">
+            <h3>Garage Icon</h3>
+            <img src="apps/ui/static/garage-icon.png" alt="Garage Icon" width="120" height="120">
+            <p>Icon für die Garage-Seite</p>
+            <div class="icon-sizes">
+                <img src="apps/ui/static/garage-icon-76x76.png" alt="Garage 76px" width="76" height="76">
+                <img src="apps/ui/static/garage-icon-60x60.png" alt="Garage 60px" width="60" height="60">
+                <img src="apps/ui/static/garage-icon-32x32.png" alt="Garage 32px" width="32" height="32">
+            </div>
+        </div>
+    </div>
+    
+    <h2>iPhone Homescreen Test</h2>
+    <p>Um die Icons auf dem iPhone zu testen:</p>
+    <ol>
+        <li>Öffnen Sie Ihre Home Automation App im Safari</li>
+        <li>Tippen Sie auf das Teilen-Symbol</li>
+        <li>Wählen Sie "Zum Home-Bildschirm hinzufügen"</li>
+        <li>Das Icon sollte jetzt als Haus-Symbol erscheinen</li>
+    </ol>
+    
+    <p><strong>Hinweis:</strong> Falls das alte Icon noch angezeigt wird, löschen Sie die bestehende App vom Homescreen und fügen Sie sie neu hinzu.</p>
+</body>
+</html>