Skip to content
BranchesTags

Repository files navigation

🏟️ Phoenix Contact Arena - Lichtsteuerung PWA

Progressive Web App für die Steuerung der Arena-Beleuchtung über Gira HomeServer 4.13.

GitHub Repository: https://github.com/Jan-Geiger-Networking/pca.git
Live-URL: https://jan-geiger-networking.github.io/pca/

🚀 Quick Start (5 Minuten)

# 1. Repository klonen
git clone https://github.com/Jan-Geiger-Networking/pca.git
cd pca

# 2. Object-IDs in app.js eintragen (Zeile 10-14)
# 3. Grundriss ersetzen: arena-grundriss.jpg

# 4. Pushen
git add .
git commit -m "Config: Object-IDs und Grundriss"
git push

# 5. GitHub Pages aktivieren (Settings → Pages)
# 6. iPad: Safari → URL → "Zum Home-Bildschirm"

Fertig! 🎉

✨ Features

  • 🎨 Dunkles Design mit cyan Akzenten (#00bcd4)
  • 📱 PWA - Installierbar auf 4 iPads als Kiosk-App
  • 🔄 Auto-Update - Git Push → 30s später alle Geräte aktualisiert
  • 🎛️ 3 Haupt-Dimmer - Spielfeld, Tribüne, Sonstige
  • 🗺️ Grundriss-Integration mit 6 klickbaren Raum-Kacheln
  • 📴 Offline-fähig - Funktioniert auch ohne Internet
  • 🔐 Basic Auth - Sichere Verbindung zum Homeserver

🚀 Deployment

1. GitHub Pages aktivieren

# Repository klonen
git clone https://github.com/Jan-Geiger-Networking/pca.git
cd pca

# Dateien hinzufügen
git add .
git commit -m "Initial PWA setup"
git push origin main

GitHub Settings:

  1. Repository → Settings → Pages
  2. Source: main branch, / (root)
  3. Save
  4. URL: https://jan-geiger-networking.github.io/pca/

2. Konfiguration anpassen

Wichtig: Vor dem ersten Start anpassen!

Object-IDs einfügen

Öffne app.js und ersetze die Platzhalter:

this.objectIDs = {
    spielfeld: 'SPIELFELD-ID',    // ← Echte Object-ID vom Gira Experten
    tribuene: 'TRIBUENE-ID',      // ← Echte Object-ID
    sonstige: 'SONSTIGES-ID'      // ← Echte Object-ID
};

Beispiel:

this.objectIDs = {
    spielfeld: '12345',
    tribuene: '12346',
    sonstige: '12347'
};

Grundriss ersetzen

  1. Datei: arena-grundriss.jpg (1920x1080 empfohlen)
  2. Ersetzen mit Ihrem Arena-Grundriss
  3. Commit & Push:
git add arena-grundriss.jpg
git commit -m "Update Grundriss"
git push

Raum-Positionen anpassen

In index.html die Kachel-Positionen ändern:

<button class="room-tile" style="top: 20%; left: 15%;" data-room="1">
    💡 Raum 1
</button>

Anpassen: top und left Werte (0-100%)

📱 iPad Installation

Schritt 1: Safari öffnen

  1. URL eingeben: https://jan-geiger-networking.github.io/pca/
  2. Warten bis Seite geladen ist

Schritt 2: Zum Home-Bildschirm hinzufügen

  1. Teilen-Button tippen (Quadrat mit Pfeil)
  2. "Zum Home-Bildschirm" wählen
  3. Name: "Arena Licht" (oder anpassen)
  4. Hinzufügen tippen

Schritt 3: Einstellungen konfigurieren

  1. App öffnen vom Home-Bildschirm
  2. ⚙️ Button oben links tippen
  3. Eingeben:
    • Homeserver IP: 192.168.1.100 (Ihre IP)
    • Benutzername: admin
    • Passwort: [IHR-PASSWORT]
  4. 💾 Speichern

Schritt 4: Kiosk-Modus aktivieren (Guided Access)

Verhindert versehentliches Verlassen der App

  1. Einstellungen → Bedienungshilfen
  2. Geführter Zugriff aktivieren
  3. Code festlegen (z.B. 1234)
  4. Arena-App öffnen
  5. Home-Button 3x drücken
  6. Geführter Zugriff starten

Beenden: Home-Button 3x drücken → Code eingeben

🔧 Gira HomeServer Konfiguration

API-Endpunkte

Die App nutzt folgende Endpoints:

POST https://[HS-IP]:443/api/objects/[OBJECT-ID]/value
Body: {"value": 50}
Auth: Basic admin:[PASSWORT]

Object-IDs ermitteln

Über Gira Experten:

  1. Projekt öffnen in Gira Experten
  2. Objekt auswählen (z.B. Spielfeld-Dimmer)
  3. Eigenschaften → Object-ID notieren
  4. In app.js eintragen

HTTPS & Zertifikat

Wichtig: Homeserver muss HTTPS unterstützen!

Falls selbstsigniertes Zertifikat:

  1. Safari öffnen: https://[HS-IP]:443
  2. Zertifikat akzeptieren
  3. Dann PWA installieren

🔄 Auto-Update Workflow

Änderungen pushen

# Änderungen machen (z.B. in app.js)
git add .
git commit -m "Update: Neue Raum-Kachel hinzugefügt"
git push origin main

Was passiert?

  1. GitHub Pages baut die Seite neu (ca. 30 Sekunden)
  2. Service Worker erkennt neue Version
  3. iPads laden automatisch neu beim nächsten Öffnen
  4. Notification "Update verfügbar" → Auto-Reload

Manuelles Update erzwingen

Auf iPad:

  1. App schließen (Wischen nach oben)
  2. Neu öffnen
  3. Update wird geladen

🎨 Anpassungen

Farben ändern

In style.css:

/* Hauptfarben */
background-color: #222;          /* Hintergrund */
color: #fff;                     /* Text */
background: #00bcd4;             /* Akzentfarbe (Cyan) */
border: 3px solid #00bcd4;       /* Rahmen */

Neue Raum-Kachel hinzufügen

In index.html:

<button class="room-tile" style="top: 30%; left: 50%;" data-room="7">
    💡 Raum 7
</button>

Slider hinzufügen

In index.html (Sidebar):

<div class="slider-group">
    <label class="slider-label">🎪 VIP-Bereich</label>
    <div class="slider-container">
        <div class="slider-progress" id="progress-vip"></div>
        <input type="range" min="0" max="100" value="0" 
               class="slider" id="slider-vip" 
               data-object-id="VIP-OBJECT-ID">
    </div>
    <span class="slider-value" id="value-vip">0%</span>
</div>

In app.js Object-ID hinzufügen:

this.objectIDs = {
    spielfeld: 'SPIELFELD-ID',
    tribuene: 'TRIBUENE-ID',
    sonstige: 'SONSTIGES-ID',
    vip: 'VIP-OBJECT-ID'  // ← Neu
};

📊 Responsive Design

Desktop (> 1024px)

  • Grundriss: 80% links
  • Sidebar: 20% rechts

iPad Portrait

  • Grundriss: 100% oben (60vh)
  • Sidebar: 100% unten (40vh)

iPad Pro (1024-1366px)

  • Grundriss: 75%
  • Sidebar: 25%

🐛 Fehlerbehebung

Verbindung fehlgeschlagen

Prüfen:

  1. ✅ Homeserver erreichbar? (Ping-Test)
  2. ✅ IP-Adresse korrekt?
  3. ✅ HTTPS aktiviert?
  4. ✅ Passwort richtig?
  5. ✅ Zertifikat akzeptiert?

Lösung:

  • Settings öffnen (⚙️)
  • IP/Passwort prüfen
  • Safari: https://[IP]:443 → Zertifikat akzeptieren

Slider reagiert nicht

Prüfen:

  1. ✅ Object-IDs korrekt in app.js?
  2. ✅ Verbindung aktiv? (Status: Verbunden)
  3. ✅ Browser-Konsole öffnen (Safari → Entwickler)

Lösung:

  • Object-IDs vom Gira Experten prüfen
  • API-Endpunkt testen: POST /api/objects/[ID]/value

Update wird nicht geladen

Lösung:

  1. App schließen (komplett)
  2. Safari öffnen → Cache leeren
  3. App neu installieren (vom Home-Bildschirm löschen)
  4. Neu hinzufügen (Schritt 2 wiederholen)

Offline-Modus

Funktioniert:

  • ✅ UI wird angezeigt
  • ✅ Slider können bewegt werden
  • ✅ Werte werden lokal gespeichert

Nicht funktioniert:

  • ❌ Echte Lichtsteuerung (kein Homeserver)
  • ❌ Status-Updates

Sync: Sobald online → Werte werden automatisch gesendet

📁 Dateistruktur

pca/
├── index.html              # Haupt-HTML
├── style.css               # Styles
├── app.js                  # JavaScript-Logik
├── sw.js                   # Service Worker (Auto-Update)
├── manifest.json           # PWA-Manifest
├── netlify.toml            # Netlify-Config (optional)
├── arena-grundriss.jpg     # Grundriss (1920x1080)
├── icons/
│   ├── icon-192.png        # App-Icon 192x192
│   └── icon-512.png        # App-Icon 512x512
└── README.md               # Diese Datei

🔐 Sicherheit

  • ✅ HTTPS-only in Produktion
  • ✅ Basic Auth für Homeserver
  • ✅ Passwort wird lokal gespeichert (localStorage)
  • ✅ Kein Cloud-Service - alles lokal
  • ⚠️ Wichtig: Passwort nicht in Git committen!

📝 Lizenz

MIT License - Freie Nutzung und Anpassung.

🤝 Support

GitHub Issues: https://github.com/Jan-Geiger-Networking/pca/issues

Kontakt: Jan Geiger Networking

🎯 Bereit für 4 iPads im Kiosk-Modus!

Git Push → 30s → Alle Geräte aktualisiert! 🚀

About

No description, website, or topics provided.

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages