# OverlayTimer nicht nur für Chaos-Studios

## 1. Anforderungen
Zeitlich gesteuert HTML-Elemente einblenden, um dies mit anderen Kanälen, zb. in einer OBS-Szene oder als einfaches Stream-Overlay verwenden zu können. Auch mal checken.

### 1.1 Allgemein
- Mehrere Ebenen, um Vorder- und Hintergrund vom Mittleren zu trennen
- Alpha-Transparenz z.b. durch PNG/SVG
- In OBS-Szenen integrierbar
- Als Webseite einbindbar (evt. gitpage hub oder CCCV gitlab)
- Aufrufbar mit Uhrzeit zum testen

### 1.2 Overlay-Typen
- Statische Overlays mit festen Texten.
- Dynamische Overlays
- Vor einem Event, zb. "Fängt am um an"
- Während einer Session, z.b.: "Gerade läuft ..."
- Außerhalb einer Session: "Um xx Uhr startet Talk ABC"
- Nach einem Event "Event ist vorbei"

## 2. Was muss wann passieren (BauchbinderFlow):


Seiten im Iframe (Quelle-A):
(1) EventBefore.htm (template)
(2) EventAfter.htm (template)
(3) SessionOnAir.htm (template)
(4) SessionPause.htm (template)

Seiten mit/ohne Iframe (Quelle-B)
(5) Static[Name].htm
(Name: Social, TechTrouble, BreakingNews, FlaschenAufraeumen, GleichWiederDa, Tschunk, WaffelnFertig, ...)

## 2.1 Attribute
### 2.1.1 Event
Event.Name: Names des Events
Event.URL: Startseite vom Event
Event.Start: DateTime
Event.End: DateTime

### 2.1.2 Session
Session[n].Title: Title der Session
Session[n].Attendee: Teilnehmende Wesen
Session[n].URL: Startseite zur Session
Session[n].Start: DateTime
Session[n].End: DateTime

### 2.1.3 ot.js[on] (Beispiel tbd)
...
...

## 3. Utils
3.1 Pretalx Fahrplan converter nach ot.js (jinja)
3.2 permaClock (js)
3.3 Mousecursor X|Y (js)
3.4 Seafile Syncer (gitlab ci/cd)
3.5 github Mirror (gitlab ci/cd)

## 4. So geht's (Aufbau-Anleitung)
### 4.1 gitlab/hub projekt forken
### 4.2 gitpage einrichten
### 4.3 Struktur anpassen:
[!!!] Decision needed: [!!!]
Entscheidung treffen:
a. Pro Serial/Season ein Fork oder Verzeichnis
b. Pro Event ein Fork oder Verzeichnis
c. Pro Operator (z.b. Studio) ein Fork oder Verzeichnis
Lösung a) pro Event/Operator ein Fork
- Dezentraler Ansatz
- Pro: Struktur einfacher
- Contra: Verwaltung komplizierter
Lösung b) pro Event/Operator ein Verzeichnis
- zentraler Ansatz
- Pro: Verwaltung einfacher
- Pro: Lerneffekte einfacher
- Contra: Struktur komplizierter

6. Ein Vorschlag:
7. [www]
index.html
ot.css
ot.js
(event)
[Standard]
index.html
event.css
event.js
(op)
[Standard]
index.html
Sessions
[default]
10. sessions.json
11.
### 4.4 timer.js pflegen oder generieren
### 4.5 testen mit virtueller Datum / Uhrzeit
### 4.6 Templates (1-5) nach eigenen Wünschen anpassen

.
.
.
.

## 5. FAQ
- Was passiert wenn sich der Schedule verschiebt?
- timer.js anpassen
- Können beliebig viele statische Overlayse angelegt werden?
- ja
- Wie kann man Verwirrbelungen zwischen statischen und dynamischen Overlays vermeiden?
- Sind zwei unterschiedliche URL's, zwei Quellen für OBS.
- Warum eine eigene ot.json?
- OverlayTimer soll auch ohne Pretalx-Projekt funktionieren können.
- Strukturen brechen nicht bei Updates o.ä.
- ot.js wesentlich einfacher zu bedienen als Fahrplan JSON|XML|XCAL
- Jinjia-Script konvertiert von Fahrplan nach ot.json

## 6. Link-Sammlungen

### 6.1 Repos
a) gitlab CCCV (SPOT): https://git.cccv.de/codefreezr/overlaytimer
b) github Mirror: InSync with a)
c) Seafile-Share: InSync with a)

### Material vom rc3.rev2:
- ...
- ...

### Material von divoc:
- seafile:
- gitlab c3:
- github: ...