|
|
|
@ -0,0 +1,226 @@
|
|
|
|
|
|
|
|
# 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
|
