stagemonitor einrichten
Schritt-für-Schritt: Bilder ablegen, config.js befüllen – fertig. Die index.html wird nie angefasst.
Jede Konferenz bekommt einen eigenen Ordner. Nur die markierten Dateien müssen angepasst werden:
meine-konferenz/
├── config.js ← hier alle Daten eintragen
├── index.html ← nie anfassen
├── setup.html ← diese Anleitung
├── start.command ← Doppelklick zum Starten
└── slides/
├── slide-01.jpg
├── slide-02.jpg
└── slide-03.jpg ← Bilder hierher
Tipp: Einfach diesen Ordner für jede neue Konferenz kopieren und config.js + slides/ ersetzen.
Format und Benennung
Die Bilder müssen nach diesem Schema benannt und im Unterordner slides/ abgelegt werden:
slides/slide-01.jpg
slides/slide-02.jpg
slides/slide-03.jpg
...
slides/slide-21.jpg
Die Nummer im Dateinamen entspricht dem n-Feld in der config.js. Stimmt die Nummer nicht überein, wird das Bild nicht gefunden.
Technische Anforderungen
| Eigenschaft | Empfehlung |
|---|
| Dateiformat | JPG (funktioniert auch mit .jpeg) |
| Auflösung | Mindestens 1920 × 1080 px (Full HD) |
| Optimal | 3840 × 2160 px (4K) oder höher für scharfe Vollbilddarstellung |
| Seitenverhältnis | Beliebig – wird automatisch zentriert und angepasst |
| Nummerierung | Zweistellig mit führender Null: 01, 02 … 09, 10, 11 … |
Folien aus Keynote oder PowerPoint exportieren
- Keynote: Ablage → Exportieren → Bilder → JPEG → Alle Folien
- PowerPoint: Datei → Exportieren → Dateityp: JPEG → Alle Folien
- Die exportierten Dateien umbenennen:
Folie1.jpg → slide-01.jpg usw.
Lücken sind erlaubt: Du musst nicht alle Nummern belegen. slide-01.jpg, slide-05.jpg, slide-12.jpg funktioniert – solange die Nummern mit den Einträgen in config.js übereinstimmen.
Die Datei ist in vier Bereiche aufgeteilt. Hier alle Felder im Detail:
Branding
// Konferenzname – einfacher Text
name: 'MeineFachtagung',
// Optional: Logo mit farbigem Akzent.
// Das <em>-Tag wird in der Akzentfarbe eingefärbt.
// Weglassen für normalen Text.
nameHtml: 'Meine<em>Fach</em>tagung',
// Kleiner Untertitel neben dem Logo
subtitle: 'Programm',
// Veranstalter-Name (rechts im Header)
organizer: 'Mein Verein e.V.',
// Akzentfarbe als HEX – für Tabs, Highlights und nameHtml-Akzent
accentColor: '#6366f1',
Tage
days: [
{ label: 'Donnerstag', date: '2025-09-11' },
{ label: 'Freitag', date: '2025-09-12' },
// Beliebig viele Tage möglich
],
| Feld | Bedeutung | Beispiel |
|---|
| label | Anzeigename im Tab | 'Tag 1', 'Freitag' |
| date | Datum im Format JJJJ-MM-TT – wird für den Countdown benötigt | '2025-09-11' |
Automatischer Tab-Wechsel: Am Konferenztag selbst wird der richtige Tab automatisch aktiviert, sobald die Seite geöffnet wird.
Räume
rooms: [
{ id: 'saal-a', name: 'Saal A', icon: '🏛', color: '#6366f1' },
{ id: 'saal-b', name: 'Saal B', icon: '🎭', color: '#f59e0b' },
{ id: 'workshop', name: 'Workshop', icon: '🔧', color: '#10b981' },
],
| Feld | Bedeutung | Hinweis |
|---|
| id | Interne Kennung | Nur Buchstaben, Zahlen, Bindestriche – kein Leerzeichen |
| name | Anzeigename | Erscheint als Spaltenüberschrift und in den Session-Karten |
| icon | Emoji | Beliebiges Emoji für die Spaltenüberschrift |
| color | Farbe der Karten | HEX-Code – wird für den farbigen Rand der Session-Karten verwendet |
Folien (slides-Array)
Jeder Eintrag entspricht einer Folie. Auch Cover- und Trennfolien ohne Raumzuordnung können eingetragen werden – sie erscheinen dann nur in der Foliennavigation (Vor/Zurück), nicht im Zeitplan.
slides: [
// Cover-Folie: day:0, room:null, time:null
{ n:'01', day:0, room:null, time:null, title:'MeineFachtagung', speaker:'' },
// Session in einem Raum
{ n:'02', day:1, room:'saal-a', time:'10:00 – 11:30', title:'Keynote: Zukunft gestalten', speaker:'Prof. Maria Müller' },
// Zweiter Tag, anderer Raum
{ n:'07', day:2, room:'saal-b', time:'14:00 – 15:00', title:'Workshop: Neue Methoden', speaker:'Jan Keck' },
],
| Feld | Bedeutung | Pflicht? |
|---|
| n | Foliennummer als Text – muss mit dem Dateinamen übereinstimmen ('03' → slide-03.jpg) | Pflicht |
| day | Konferenztag (1, 2 …) – 0 für Cover/Divider ohne Zeitplan | Pflicht |
| room | Die id eines Raums – oder null für allgemeine Folien | Pflicht |
| time | Zeitfenster im Format 'HH:MM – HH:MM' – oder null | Pflicht |
| title | Titel der Session | Pflicht |
| speaker | Name des Referenten / der Referentin | Optional |
Wichtig: Jede Session im Zeitplan braucht genau die gleiche Raum-ID wie in rooms definiert. Groß-/Kleinschreibung beachten: 'saal-a' ≠ 'Saal-A'.
Gleiche Uhrzeit, verschiedene Räume: Sessions mit derselben Startzeit erscheinen automatisch in der gleichen Zeile des Zeitplans – egal wie viele Räume es gibt.
Eine vollständige config.js für eine fiktive zweitägige Fachtagung mit zwei Räumen:
/**
* config.js – Fachtagung Beispiel
*/
const CONF = {
// Branding
name: 'Fachtagung25',
nameHtml: 'Fach<em>tagung</em>25',
subtitle: 'Programm',
organizer: 'Beispiel e.V.',
accentColor: '#6366f1',
// Tage
days: [
{ label: 'Donnerstag', date: '2025-09-11' },
{ label: 'Freitag', date: '2025-09-12' },
],
// Räume
rooms: [
{ id: 'saal-a', name: 'Saal A', icon: '🏛', color: '#6366f1' },
{ id: 'saal-b', name: 'Saal B', icon: '🎭', color: '#f59e0b' },
],
// Folien
slides: [
// n day room time title speaker
{ n:'01', day:0, room:null, time:null, title:'Fachtagung25', speaker:'' },
{ n:'02', day:1, room:null, time:null, title:'Tag 1', speaker:'' },
{ n:'03', day:1, room:'saal-a', time:'10:00 – 11:30', title:'Keynote: Zukunft gestalten', speaker:'Prof. M. Müller' },
{ n:'04', day:1, room:'saal-b', time:'10:00 – 11:30', title:'Workshop: Neue Methoden', speaker:'Jan Keck' },
{ n:'05', day:1, room:'saal-a', time:'13:00 – 14:30', title:'Panel: Gemeinsam besser', speaker:'A. Schmidt + B. Bauer' },
{ n:'06', day:1, room:'saal-b', time:'13:00 – 14:30', title:'Praxis: Tools für Teams', speaker:'Lisa Meier' },
{ n:'07', day:2, room:null, time:null, title:'Tag 2', speaker:'' },
{ n:'08', day:2, room:'saal-a', time:'09:30 – 11:00', title:'Abschluss-Keynote', speaker:'Prof. M. Müller' },
{ n:'09', day:2, room:'saal-b', time:'09:30 – 11:00', title:'Barcamp: Offene Formate', speaker:'' },
],
};
Die Seite benötigt einen lokalen Webserver, damit die Bilder geladen werden können (Browser-Sicherheitsregeln). Das ist bereits eingerichtet:
- start.command im Konferenz-Ordner doppelklicken
- Ein Terminal-Fenster öffnet sich – dieses im Hintergrund lassen
- Der Browser öffnet sich automatisch auf
http://localhost:8090
Kein Internet nötig: Das Tool läuft vollständig lokal. Internet wird nur für die Schriftart (Google Fonts) benötigt – bei fehlendem Internet wird automatisch eine System-Schrift verwendet.