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.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: …
Select a repo