Was ist Billard Training?

Eine Web-App, die Trainingsübungen (Drills) über einen Beamer direkt auf deinen Billardtisch projiziert. So siehst du Kugelpositionen, Stoßlinien und Zielzonen in Echtgröße auf dem echten Tisch.

So funktioniert es

Die App besteht aus drei Ansichten, die über dein WLAN miteinander verbunden sind. Der Projektor läuft auf dem Computer, der an den Beamer angeschlossen ist. Die Steuerung öffnest du auf deinem Handy oder Tablet. Beide sind in Echtzeit synchronisiert – wählst du eine Übung in der Steuerung aus, erscheint sie sofort auf dem Projektor.

Voraussetzungen

• Computer mit XAMPP – läuft Apache + MySQL als lokaler Webserver
• Beamer / Projektor – von oben auf den Billardtisch gerichtet
• WLAN-Netzwerk – Computer und Handy/Tablet im gleichen Netzwerk
• Moderner Browser – Chrome, Firefox, Edge oder Safari

Installation

1. XAMPP starten – Starte Apache und MySQL im XAMPP Control Panel. Stelle sicher, dass MySQL auf Port 3308 läuft (oder passe api/config.php an).
2. Datenbank anlegen – Öffne phpMyAdmin (http://localhost/phpmyadmin) und importiere die Datei setup.sql. Diese erstellt die Datenbank billard_training mit allen Tabellen und Beispiel-Drills.
3. Konfiguration prüfen – Die Datei api/config.php enthält die Datenbankverbindung. Standardmäßig:
   Host: 127.0.0.1 Port: 3308 Datenbank: billard_training Benutzer: root Passwort: (leer)
4. App im Browser öffnen – Navigiere zu http://localhost/billardtraining/. Wenn die Drill-Liste erscheint, ist alles korrekt eingerichtet.

Schnellstart (5 Minuten)

1. Projektor-Seite öffnen – Am Computer, der am Beamer hängt: http://localhost/billardtraining/projector.html öffnen. Auf die schwarze Fläche klicken → Vollbildmodus.
2. IP-Adresse herausfinden – Am selben Computer die IP-Adresse ermitteln (z.B. 192.168.1.100). Unter Windows: ipconfig in der Eingabeaufforderung.
3. Steuerung auf Handy öffnen – Am Handy/Tablet im gleichen WLAN: http://192.168.1.100/billardtraining/ aufrufen. Im Header erscheint ein grüner Punkt am Avatar-Symbol als Verbindungsanzeige.
4. Drill antippen – In der Drill-Liste eine Übung antippen. Die Projektion erscheint sofort auf dem Tisch!

Projektor einrichten

Hardware-Setup

1. Beamer senkrecht von oben über dem Billardtisch montieren
2. Beamer so ausrichten, dass das Bild die gesamte Spielfläche abdeckt
3. Beamer per HDMI/USB-C an den Computer anschließen
4. Im Betriebssystem den Beamer als erweiterten Desktop einrichten (nicht spiegeln)

Projektor-Seite öffnen

1. Am Computer den Browser öffnen (Chrome empfohlen).
2. Navigiere zu http://localhost/billardtraining/projector.html
3. Das Browserfenster auf den Beamer-Bildschirm ziehen (den erweiterten Desktop).
4. Auf die schwarze Fläche klicken oder F / F11 drücken für den Vollbildmodus.
5. Es erscheint: “Warte auf Drill-Auswahl...” – der Projektor ist bereit und wartet auf Befehle von der Steuerung.

Vollbildmodus

Aktion	Ergebnis
Klick / Touch auf die Fläche	Vollbild ein
F oder F11	Vollbild ein/aus
Esc	Vollbild verlassen

Steuerung (Bedienfeld)

Aufbau der Steuerung

Die Steuerung (index.html) ist die Haupt-Bedienoberfläche:

• Header-Navigation – Logo, Menüpunkte, + Neuer Drill-Button und ein grüner Punkt am Avatar zeigt den Verbindungsstatus an
• Aktiver Drill-Banner – Zeigt den aktuell projizierten Drill mit Name, Beschreibung und einem Stopp-Button
• Vorschau – Farbige Vorschau des ausgewählten Drills mit Einstellungen für Tisch, Raster, Invertierung und Projektor-Link
• Filter-Leiste – Kategorie, Schwierigkeit und Suchfeld zum Filtern
• Drill-Liste – Alle verfügbaren Übungen als Kachelansicht

Drill auswählen & projizieren

1. Scrolle durch die Drill-Liste oder nutze die Filter, um eine Übung zu finden.
2. Tippe auf den gewünschten Drill. Die Vorschau zeigt sofort eine farbige Darstellung.
3. Der Drill wird automatisch an den Projektor gesendet und erscheint in Echtzeit auf dem Tisch.
4. Der aktive Drill wird im Banner oben hervorgehoben und in der Liste grün markiert.

Drill stoppen

Um die Projektion zu beenden, tippe auf den Stopp-Button im aktiven Drill-Banner oben. Der Projektor zeigt dann wieder einen schwarzen Bildschirm (keine Projektion auf dem Tuch).

Filtern & Suchen

Filter	Beschreibung
Kategorie	Filtert nach Kategorie: Gerade Stöße, Cut Shots, Positionsspiel, Bandenstöße, etc.
Schwierigkeit	Anfänger, Fortgeschritten oder Profi
Suchfeld	Sucht im Namen und in der Beschreibung der Drills

Tischgröße einstellen

Im Vorschau-Bereich oben rechts kannst du die Tischgröße wählen:

Größe	Maße (Spielfläche)
7 Fuß	200 × 100 cm
8 Fuß	224 × 112 cm
9 Fuß	254 × 127 cm

Die Änderung wird sofort an den Projektor übermittelt und passt die Darstellung an die Tischproportionen an.

Drill Editor

Editor öffnen

Es gibt zwei Wege:

• In der Navigation oben rechts auf + Neuer Drill klicken
• Direkt: http://localhost/billardtraining/editor.html

Zum Bearbeiten eines existierenden Drills wird die URL mit Parameter aufgerufen: editor.html?id=5

Werkzeuge

Die Toolbar unter dem Tisch enthält 7 Werkzeuge:

Metadaten

Über dem Tisch befinden sich die Eingabefelder für:

• Name – Name der Übung (Pflichtfeld)
• Beschreibung – Optionale Beschreibung
• Kategorie – z.B. Gerade Stöße, Cut Shots, Positionsspiel
• Schwierigkeit – Anfänger, Fortgeschritten, Profi

Unter dem Tisch gibt es außerdem:

• Anweisungen – Textfeld für Spieleranweisungen (z.B. “Gerader Stoß in die rechte Mitteltasche”)

Speichern

1. Gib dem Drill einen Namen (Pflichtfeld).
2. Platziere mindestens eine Kugel auf dem Tisch.
3. Klicke oben rechts auf Speichern.
4. Der Drill ist sofort in der Steuerung verfügbar und kann projiziert werden.

Bestehende Drills bearbeiten

Um einen bestehenden Drill zu bearbeiten, rufe den Editor mit dem id-Parameter auf, z.B.: editor.html?id=5. Alle Daten werden geladen und können verändert werden. Beim Speichern wird der bestehende Drill aktualisiert.

Tastenkürzel im Editor

Taste	Funktion
Entf / Backspace	Ausgewähltes Objekt löschen
Esc	Auswahl aufheben

Tipps & Tricks

Projektor-Tipps

• Raum abdunkeln – Je dunkler der Raum, desto besser sind die Projektionslinien auf dem Tisch sichtbar.
• Beamer-Helligkeit – Stelle die Helligkeit hoch genug ein, damit die Linien auf dem grünen Tuch erkennbar sind.
• Schwarzer Hintergrund – Die Projektor-Ansicht nutzt einen schwarzen Hintergrund. Schwarz = kein Licht = nur die Übungslinien sind auf dem Tisch sichtbar.
• Tischgröße korrekt einstellen – Die Projektion muss zur physischen Tischgröße passen, damit die Kugelpositionen stimmen.
• Kalibrierung – Richte den Beamer so aus, dass die Tischkanten im Projektorbild mit den echten Kanten übereinstimmen.

Steuerungs-Tipps

• Handy-Steuerung – Am bequemsten steuerst du vom Handy aus, während du am Tisch stehst.
• Vorschau nutzen – Die farbige Vorschau in der Steuerung zeigt, wie die Übung aufgebaut ist, bevor du sie auf den Tisch sendest.
• Mehrere Geräte – Mehrere Handys/Tablets können gleichzeitig verbunden sein und die Steuerung nutzen.

Editor-Tipps

• Stoßrichtung & Kugelweg – Nutze den Linientyp „Stoßlinie“ (weiß, gestrichelt, Pfeil) für die Stoßrichtung und „Kugelweg“ (gelb, gepunktet) für den Laufweg der Weißen nach dem Stoß.
• Positionsfeld – Nutze das Ziel-Tool mit Typ „Positionsfeld“, um zu markieren, wo die Weiße nach dem Stoß liegen soll (blauer Kreis mit „P“).
• Ghost-Kugeln – Zeigen dem Spieler, wohin die Kugel idealerweise laufen soll.
• Texte – Nutze kurze Beschriftungen auf dem Tisch, um z.B. “Ziel” oder “Start” zu markieren.
• Anweisungen – Schreibe längere Erklärungen in das Anweisungsfeld unter dem Tisch (wird in der Steuerung angezeigt, nicht auf dem Tisch).

Problemlösung

“Verbindung getrennt” in der Steuerung

• Prüfe, ob XAMPP (Apache + MySQL) läuft
• Prüfe, ob Handy und Computer im gleichen WLAN sind
• Lade die Seite neu (Pull-to-Refresh auf dem Handy)

Projektor zeigt nichts / bleibt schwarz

• Das ist normal, wenn kein Drill ausgewählt ist – Schwarz = kein Drill aktiv
• Wähle in der Steuerung einen Drill aus
• Prüfe den Verbindungsstatus (grüner Punkt am Avatar) in der Steuerung

Drill-Liste ist leer

• Prüfe, ob die Datenbank korrekt eingerichtet ist (setup.sql importiert?)
• Prüfe die Datei api/config.php – stimmen Host, Port und Passwort?
• Öffne http://localhost/billardtraining/api/drills.php direkt im Browser – es sollte JSON zurückgeben

Projektor reagiert nicht auf Steuerung

• Beide Seiten müssen die gleiche Server-Adresse verwenden
• Wenn du am Handy über die IP zugreifst (192.168.x.x), muss der Projektor auch über diese IP laufen (oder zumindest über localhost am gleichen Computer)
• Die Synchronisation nutzt Server-Sent Events (SSE) – prüfe, ob api/sync.php erreichbar ist

Editor: Speichern schlägt fehl

• Prüfe, ob ein Name eingegeben wurde (Pflichtfeld)
• Prüfe, ob mindestens eine Kugel platziert wurde
• Prüfe die Browser-Konsole (F12) auf Fehlermeldungen