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:

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/ liegt alles, um TD-Pult per Docker und nginx mit Passwortschutz auszuliefern, z. B. hinter dem Nginx Proxy Manager:

cd deploy
docker run --rm -it httpd:alpine htpasswd -Bn td > htpasswd
sh install.sh

Die ausführliche Anleitung steht in 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