# TD-Pult **Ein Regiepult im Browser für die Technische Direktion bei Live-Veranstaltungen.** TD-Pult ist eine einzelne HTML-Datei. Sie zeigt den Programmablauf einer Schicht, den gerade laufenden Punkt, das nächste Video und eure eigenen Anweisungen an das Team. Es gibt keinen Server, keine Datenbank und keine Installation: Datei öffnen, Programm einpflegen, loslegen. ``` ┌──────────────────────────────────────────────────────────────────────────┐ │ 14:32:07 Jahrestagung 2026 · Stadthalle [Schicht 1] ◀ ▶ Jetzt Dateien ▾│ ├──────────────┬───────────────────────────────┬───────────────────────────┤ │ ABLAUF │ 14:30 VORTRAG · NR. 4 │ Disposition │ Ablaufplan │ │ 14:00 Musik │ Titel des Vortrags │ │ │▶14:30 Vortrag│ ☐ Medien & Cams vorbereitet │ Gliederung des Vortrags │ │ 14:55 Video │ ☐ Punkt erledigt │ mit Video-Cues und │ │ 15:10 Pause │ │ Lesungen │ │ │ NÄCHSTES VIDEO · in 6 Min. │ │ │ │ ① vorbereitet ② sync ③ weiter │ │ │ │ │ │ │ │ MEINE ANWEISUNGEN │ │ │ │ [Wichtig] Cam 2 auf Bühne │ │ └──────────────┴───────────────────────────────┴───────────────────────────┘ ``` --- ## Was das Tool kann - **Ablauf und Jetzt-Ansicht.** Die Uhr läuft live mit. Mit *Jetzt* springt die Ansicht zum Punkt, der laut Uhrzeit gerade dran ist. - **Nächstes Video.** Aus Uhrzeit und Zeitleiste jedes Punkts wird geschätzt, wann welches Video kommt. Für jedes Video gibt es drei Schritte: *vorbereitet → sync → abgespielt*. - **Eigene Anweisungen** pro Programmpunkt oder für die ganze Schicht, mit Kategorien (Normal, Wichtig, Kritisch …), Abhaken und Sortieren. Bausteine und Teamnamen lassen sich per Klick einfügen. - **Rechte Spalte** mit Disposition (Gliederung eines Vortrags), Ablaufplan (Medienliste und offizieller Anweisungstext) und allgemeinen Absprachen. - **Mehrere Schichten** (z. B. Vormittag und Nachmittag), jeweils mit eigener Besetzung. - **Optional:** eine angeschlossene zweite Sprache (Sync-Schritt) und übertragene Programmteile (Stream). Ist beides aus, verschwinden die zugehörigen Kennzeichen und Schritte. - **Läuft offline.** Nach dem Laden braucht die Seite kein Netz mehr. --- ## Schnellstart 1. `TD-Pult.html` herunterladen und im Browser öffnen (Chrome, Edge, Firefox oder Safari). 2. Oben auf **Programm bearbeiten** klicken. 3. Unter **Einstellungen** Veranstaltung, Ort, Kategorien und Bausteine eintragen. 4. Unter **Schicht & Besetzung** Schichten anlegen und das Team eintragen. 5. Programmpunkte links mit **＋ Neuer Programmpunkt** anlegen und rechts Disposition und Ablaufplan füllen. 6. **Programm bearbeiten** wieder ausschalten. Jetzt seid ihr im Live-Betrieb. 7. Vor der Veranstaltung **Dateien → Programm sichern** und die JSON-Datei an alle Geräte verteilen. Mitgeliefert ist nur ein Beispielpunkt. Alle Inhalte pflegt ihr selbst ein. --- ## Die drei Modi | Modus | Schalter | Wofür | |---|---|---| | **Editieren** | `Editieren` / Taste `E` | Live-Betrieb, in dem man Anweisungen anlegen, ändern und sortieren kann | | **Ansicht** | `Ansicht` / Taste `E` | Live-Betrieb, nur lesen und abhaken, für den ruhigen Blick während der Schicht | | **Programm bearbeiten** | `Programm bearbeiten` | Programm, Schichten, Besetzung und Einstellungen pflegen | ### Tastenkürzel | Taste | Wirkung | |---|---| | `←` `↑` / `→` `↓` | vorheriger / nächster Programmpunkt | | `E` | zwischen Editieren und Ansicht wechseln | | `Enter` | Anweisung speichern (`Shift`+`Enter` für einen Zeilenumbruch) | | `Esc` | Bearbeitung einer Anweisung abbrechen | --- ## Einstellungen Alles, was sich von Veranstaltung zu Veranstaltung unterscheidet, steht unter **Programm bearbeiten → Einstellungen**: | Bereich | Inhalt | |---|---| | Veranstaltung und Ort | Name des Tools, Veranstaltung, Ort, Stadt, Sprache | | Angeschlossene Sprache | an/aus, Name und Kürzel (für den Sync-Schritt) | | Stream / Übertragung | an/aus, Quelle bzw. Ort | | Bezeichnungen | Texte der Status-Knöpfe und Medien-Schritte sowie die Begriffe *Ablaufplan*, *Vorsitz*, *Tagesmotto* und *Redner*. So passt ihr das Tool an eure Sprache an, z. B. „Moderation“ statt „Vorsitz“ | | Kategorien | Name und Farbe der Anweisungs-Kategorien. Die Sonderrolle *Vorbereitung* koppelt eine Kategorie an den Status „vorbereitet“ | | Bausteine | Gruppen von Stichwörtern, die als Chips unter dem Eingabefeld erscheinen (Kameras, Quellen, Schnittarten …) | | Auswahllisten | Arten von Programmpunkten, Medienarten, Zusatzaufgaben für die Vorbereitung | | Automatische Hinweise | „Wenn der Titel X enthält, zeige Hinweis Y.“ Der Hinweis erscheint gelb in der Jetzt-Ansicht | --- ## Eingabeformate ### Zeitleiste (Ablaufplan → Zeitleiste) Eine Zeile pro Abschnitt, in der Reihenfolge des Vortrags: ``` Redner 2 Block 8: 1=1, 2=6 Redner 5 ``` `Redner 2` sind 2 Minuten ohne Medien. `Block 8: 1=1, 2=6` ist ein Abschnitt von 8 Minuten, in dem Video 1 (ca. 1 Min.) und Video 2 (ca. 6 Min.) laufen. Die Nummern beziehen sich auf die Spalte *Nr.* in der Medienliste. Daraus rechnet das Tool die ungefähren Uhrzeiten der Videos aus. ### Disposition und allgemeine Anweisungen ``` # EINLEITUNG (5 Min.) Erster Gedanke Unterpunkt Unter-Unterpunkt > [Das Video wird abgespielt (3:33)] ! [Zitat vorlesen] ``` | Zeilenanfang | Darstellung | |---|---| | `#` | Abschnittsüberschrift | | `>` | Video-Cue, hervorgehoben | | `!` | Lesung / Zitat | | zwei Leerzeichen je Ebene | Einrückung | In der Ansicht *kompakt* sind nur die obersten Gliederungspunkte zu sehen. --- ## Daten und Speicherung Es gibt zwei getrennte Datenbestände. Beide liegen im **`localStorage` des Browsers** und werden bei jeder Änderung sofort gespeichert. | Bestand | Inhalt | Sichern / Laden | |---|---|---| | **Programm** | Schichten, Programmpunkte, Medien, Dispositionen, Besetzung, Einstellungen | *Dateien → Programm sichern / laden* | | **Anweisungen** | eure Anweisungen und alle Häkchen | *Dateien → Anweisungen sichern / laden* | So kann eine Person das Programm vorbereiten und an alle verteilen, während jeder am Pult seine eigenen Anweisungen behält. Gut zu wissen: - **Jedes Gerät und jeder Browser hat seinen eigenen Stand.** Übertragen wird per JSON-Datei. - **Der Stand hängt an der Adresse.** Eine lokal geöffnete Datei und dieselbe Datei auf einem Server sind für den Browser zwei verschiedene Orte. - **Wer die Website-Daten löscht, löscht auch die Anweisungen.** Vor jeder Schicht einmal sichern. - **Auf Auslieferungsstand zurücksetzen** stellt den Inhalt der HTML-Datei wieder her. Eure Anweisungen bleiben dabei erhalten. Die exportierten Dateien heißen `td-programm-JJJJ-MM-TT.json` und `td-anweisungen-JJJJ-MM-TT.json`. Die `.gitignore` hält sie aus dem Repo, damit keine echten Programme oder Namen veröffentlicht werden. ### Eigenes Programm fest einbauen (optional) Soll das Tool schon beim ersten Öffnen euer Programm zeigen, könnt ihr es in die Datei einbetten. In `TD-Pult.html` steht in der ersten Zeile des Skripts: ```js const SEED = { … }; ``` Ersetzt das Objekt durch den Inhalt eurer exportierten `td-programm-….json`. Speichert diese Fassung außerhalb des Repos, zum Beispiel im Ordner `privat/`, den Git ignoriert. --- ## Auf einem Server bereitstellen Im Ordner [`deploy/`](deploy/README.md) liegt alles, um TD-Pult per Docker und nginx mit Passwortschutz auszuliefern, z. B. hinter dem Nginx Proxy Manager: ```bash cd deploy docker run --rm -it httpd:alpine htpasswd -Bn td > htpasswd sh install.sh ``` Die ausführliche Anleitung steht in [`deploy/README.md`](deploy/README.md). --- ## Projektstruktur ``` td-pult/ ├── TD-Pult.html # das komplette Tool (HTML, CSS, JavaScript) ├── README.md ├── .gitignore ├── deploy/ # optionaler Server-Betrieb mit Docker + nginx │ ├── README.md │ ├── docker-compose.yml │ ├── Dockerfile │ ├── nginx.conf │ ├── install.sh │ └── site/ # hierhin kommt auf dem Server index.html └── privat/ # eigene Programme und Sicherungen (nicht im Repo) ``` --- ## Technik - Eine Datei, reines HTML, CSS und JavaScript, ohne Abhängigkeiten und ohne Build - Keine externen Aufrufe, keine Schriften oder Skripte aus dem Netz - Daten nur im Browser (`localStorage`, Schlüssel `td-programm-v1` und `td-notizen-v1`) - Ausgelegt für Laptops und Monitore am Regieplatz ab ca. 1280 px Breite