🔔 Countdown-Widget (ioBroker VIS + MagicMirror)
Dieses Widget zeigt automatisch die zwei nächsten anstehenden Countdowns an (z. B. Weihnachten, Silvester, Urlaub, Touren usw.).
Abgelaufene Countdowns werden automatisch ausgeblendet.
⚠️ WICHTIGE HINWEISE (bitte lesen!)
JEDER Countdown muss im versteckten Subscribe-Block stehen
KEINE Einzeiler mit { … } im JavaScript
Kein Array / kein Objekt-Literal
Code-Formatierung NICHT verändern
Sonst erscheint:
SyntaxError: Unexpected token 'null'
🧩 1. Subscribe-Block (Pflicht!)
Hier meldet VIS alle benötigten Datenpunkte an.
{countdown.0.countdowns.Weihnachten.fullJson}
{countdown.0.countdowns.Silvester.fullJson}
{countdown.0.countdowns.SommerurlaubItalien.fullJson}
👉 Für jeden neuen Countdown MUSS hier eine Zeile ergänzt werden!
🖼️ 2. Anzeige-HTML (2 Slots)
<div id="cd_text_xmas" style="font-size:28px;font-weight:700;line-height:1.15;"> Lade... </div>
<div style="height:18px;"></div>
<div id="cd_text_ny" style="font-size:28px;font-weight:700;line-height:1.15;"> Lade... </div>
Die IDs bleiben absichtlich so – sie sind MagicMirror-erprobt.
🧠 3. JavaScript – Finale Version
⚠️ NICHT kürzen, NICHT umformatieren
<!-- ==========================================================
VIS Subscribe-Block (Pflicht!)
Jede OID, die du unten nutzt, MUSS hier stehen.
========================================================== -->
<div style="display:none;">
{countdown.0.countdowns.Weihnachten.fullJson}
{countdown.0.countdowns.Silvester.fullJson}
{countdown.0.countdowns.SommerurlaubItalien.fullJson}
</div>
<div style="text-align:center;">
<div id="cd_text_xmas" style="font-size:28px;font-weight:700;line-height:1.15;">
Lade...
</div>
<div style="height:18px;"></div>
<div id="cd_text_ny" style="font-size:28px;font-weight:700;line-height:1.15;">
Lade...
</div>
</div>
<script>
(function ()
{
/* ==========================================================
KONFIGURATION
========================================================== */
const EMPTY_TEXT = "…";
// Wenn TRUE: Stunden werden ausgeblendet, sobald days > 1
// (für days === 1 werden Stunden weiterhin angezeigt)
const HIDE_HOURS_IF_MORE_THAN_ONE_DAY = true;
// Wieviele Events sind AKTIV konfiguriert (max 8)
const EVENT_COUNT = 3;
/* ==========================================================
EVENT-DEFINITIONEN
TYPE:
1 = Weihnachten (Speziallogik)
2 = Silvester (Speziallogik)
3 = Generisch (Titel + Emoji)
========================================================== */
// ---------------- Event 1 ----------------
const E1_OID = "countdown.0.countdowns.Weihnachten.fullJson";
const E1_TYPE = 1;
const E1_TITLE = "";
const E1_EMOJI = "";
// ---------------- Event 2 ----------------
const E2_OID = "countdown.0.countdowns.Silvester.fullJson";
const E2_TYPE = 2;
const E2_TITLE = "";
const E2_EMOJI = "";
// ---------------- Event 3 ----------------
const E3_OID = "countdown.0.countdowns.SommerurlaubItalien.fullJson";
const E3_TYPE = 3;
const E3_TITLE = "Sommerurlaub Italien";
const E3_EMOJI = "☀️🇮🇹";
// ---------------- Event 4..8 (Vorlagen) ----------------
const E4_OID = "";
const E4_TYPE = 3;
const E4_TITLE = "";
const E4_EMOJI = "";
const E5_OID = "";
const E5_TYPE = 3;
const E5_TITLE = "";
const E5_EMOJI = "";
const E6_OID = "";
const E6_TYPE = 3;
const E6_TITLE = "";
const E6_EMOJI = "";
const E7_OID = "";
const E7_TYPE = 3;
const E7_TITLE = "";
const E7_EMOJI = "";
const E8_OID = "";
const E8_TYPE = 3;
const E8_TITLE = "";
const E8_EMOJI = "";
/* ==========================================================
HILFSFUNKTIONEN (VIS-safe formatiert)
========================================================== */
function safeNum(x, fallback)
{
const n = Number(x);
if (Number.isFinite(n))
{
return n;
}
return fallback;
}
function parseFullJson(val)
{
if (val === null || val === undefined || val === "")
{
return null;
}
try
{
let t = val;
if (typeof t === "string")
{
t = t.trim();
if (t.startsWith('"') && t.endsWith('"'))
{
t = JSON.parse(t);
}
return JSON.parse(t);
}
return t;
}
catch (e)
{
return null;
}
}
function subline(s)
{
return "<br><span style='font-size:18px;font-weight:400;opacity:.85'>(noch " + s + ")</span>";
}
function dayWord(n)
{
if (n === 1)
{
return "Tag";
}
return "Tagen";
}
function hourWord(n)
{
if (n === 1)
{
return "Stunde";
}
return "Stunden";
}
/* ==========================================================
EVENT-ZUGRIFF (ohne Arrays/Objekte)
========================================================== */
function getOid(i)
{
if (i === 1) return E1_OID;
if (i === 2) return E2_OID;
if (i === 3) return E3_OID;
if (i === 4) return E4_OID;
if (i === 5) return E5_OID;
if (i === 6) return E6_OID;
if (i === 7) return E7_OID;
if (i === 8) return E8_OID;
return "";
}
function getType(i)
{
if (i === 1) return E1_TYPE;
if (i === 2) return E2_TYPE;
if (i === 3) return E3_TYPE;
if (i === 4) return E4_TYPE;
if (i === 5) return E5_TYPE;
if (i === 6) return E6_TYPE;
if (i === 7) return E7_TYPE;
if (i === 8) return E8_TYPE;
return 0;
}
function getTitle(i)
{
if (i === 1) return E1_TITLE;
if (i === 2) return E2_TITLE;
if (i === 3) return E3_TITLE;
if (i === 4) return E4_TITLE;
if (i === 5) return E5_TITLE;
if (i === 6) return E6_TITLE;
if (i === 7) return E7_TITLE;
if (i === 8) return E8_TITLE;
return "";
}
function getEmoji(i)
{
if (i === 1) return E1_EMOJI;
if (i === 2) return E2_EMOJI;
if (i === 3) return E3_EMOJI;
if (i === 4) return E4_EMOJI;
if (i === 5) return E5_EMOJI;
if (i === 6) return E6_EMOJI;
if (i === 7) return E7_EMOJI;
if (i === 8) return E8_EMOJI;
return "";
}
/* ==========================================================
RESTZEIT / ABGELAUFEN
========================================================== */
function remainingSeconds(val)
{
const d = parseFullJson(val);
if (!d)
{
return 999999999;
}
if (d.total && d.total.seconds !== undefined)
{
return safeNum(d.total.seconds, 999999999);
}
const days = safeNum((d.total && d.total.days !== undefined) ? d.total.days : d.days, 0);
const hours = safeNum((d.total && d.total.hours !== undefined) ? d.total.hours : d.hours, 0);
const mins = safeNum((d.total && d.total.minutes !== undefined) ? d.total.minutes : d.minutes, 0);
const secs = safeNum((d.total && d.total.seconds !== undefined) ? d.total.seconds : d.seconds, 0);
return (days * 86400) + (hours * 3600) + (mins * 60) + secs;
}
function isExpired(val)
{
return (remainingSeconds(val) <= 0);
}
/* ==========================================================
FORMATTER: Zeittext mit optionalen Stunden
----------------------------------------------------------
Gibt nur den "Zeitanteil" zurück, z.B.:
- "3 Tagen" (wenn days>1 und hideHours aktiv)
- "1 Tag und 5 Stunden"
========================================================== */
function formatDaysHours(days, hours)
{
// Wenn konfiguriert: Stunden ausblenden sobald days > 1
if (HIDE_HOURS_IF_MORE_THAN_ONE_DAY)
{
if (days > 1)
{
return String(days) + " " + dayWord(days);
}
}
// Standard: Tage + Stunden
return String(days) + " " + dayWord(days) + " und " + String(hours) + " " + hourWord(hours);
}
/* ==========================================================
RENDERER
========================================================== */
function renderWeihnachten(val)
{
const data = parseFullJson(val);
const now = new Date();
if (now.getMonth() === 11 && now.getDate() >= 24 && now.getDate() <= 26)
{
return "🎄 Frohe Weihnachten 🎄<br><span style='font-size:26px;'>🎅🛷🎁</span>";
}
if (!data)
{
return EMPTY_TEXT;
}
const days = safeNum((data.total && data.total.days !== undefined) ? data.total.days : data.days, 0);
const hours = safeNum((data.hours !== undefined) ? data.hours : (data.total ? data.total.hours : undefined), 0);
const words = (data.inWords && data.inWords.long) ? data.inWords.long : "";
if (now.getMonth() === 11 && now.getDate() === 23)
{
return "🎅 Weihnachten morgen" + subline(words);
}
if (days >= 1)
{
return "🎁 Weihnachten in " + formatDaysHours(days, hours);
}
return "🎄 Frohe Weihnachten 🎄";
}
function renderSilvester(val)
{
const data = parseFullJson(val);
const now = new Date();
if (now.getMonth() === 11 && now.getDate() === 31)
{
return "🎇 Silvester heute";
}
if (now.getMonth() === 0 && now.getDate() === 1)
{
return "🥂🎉 Frohes neues Jahr! 🎉🥂";
}
if (!data)
{
return EMPTY_TEXT;
}
const days = safeNum((data.total && data.total.days !== undefined) ? data.total.days : data.days, 0);
const hours = safeNum((data.hours !== undefined) ? data.hours : (data.total ? data.total.hours : undefined), 0);
const words = (data.inWords && data.inWords.long) ? data.inWords.long : "";
if (now.getMonth() === 11 && now.getDate() === 30)
{
return "🎆 Silvester morgen" + subline(words);
}
if (days >= 1)
{
return "🕛 Silvester in " + formatDaysHours(days, hours);
}
return "🎇 Silvester heute" + subline(words);
}
function renderGeneric(val, title, emoji)
{
const data = parseFullJson(val);
if (!data)
{
return EMPTY_TEXT;
}
const days = safeNum((data.total && data.total.days !== undefined) ? data.total.days : data.days, 0);
const hours = safeNum((data.hours !== undefined) ? data.hours : (data.total ? data.total.hours : undefined), 0);
const words = (data.inWords && data.inWords.long) ? data.inWords.long : "";
if (days === 1)
{
return emoji + " " + title + " morgen" + subline(words);
}
if (days >= 1)
{
return emoji + " " + title + " in " + formatDaysHours(days, hours);
}
if (words)
{
return emoji + " " + title + subline(words);
}
return emoji + " " + title + " bald";
}
function renderByIndex(i, val)
{
const t = getType(i);
if (t === 1)
{
return renderWeihnachten(val);
}
if (t === 2)
{
return renderSilvester(val);
}
return renderGeneric(val, getTitle(i), getEmoji(i));
}
/* ==========================================================
AUSWAHL: 2 nächste Events
========================================================== */
function pickTwoUpcoming()
{
let best1_i = -1;
let best1_r = 999999999;
let best2_i = -1;
let best2_r = 999999999;
let i = 1;
while (i <= EVENT_COUNT)
{
const oid = getOid(i);
if (oid)
{
const val = vis.states.attr(oid + ".val");
if (!isExpired(val))
{
const r = remainingSeconds(val);
if (r < best1_r)
{
best2_i = best1_i;
best2_r = best1_r;
best1_i = i;
best1_r = r;
}
else
{
if (r < best2_r)
{
best2_i = i;
best2_r = r;
}
}
}
}
i = i + 1;
}
return String(best1_i) + "|" + String(best2_i);
}
function renderSlot(slotIndex, el)
{
const picks = pickTwoUpcoming().split("|");
let idx = -1;
if (slotIndex === 1)
{
idx = Number(picks[0]);
}
else
{
idx = Number(picks[1]);
}
if (idx < 1)
{
el.innerHTML = EMPTY_TEXT;
return;
}
const oid = getOid(idx);
const val = vis.states.attr(oid + ".val");
el.innerHTML = renderByIndex(idx, val);
}
/* ==========================================================
START & BINDING
========================================================== */
function start()
{
const el1 = document.getElementById("cd_text_xmas");
const el2 = document.getElementById("cd_text_ny");
if (typeof vis !== "undefined" && vis.states && el1 && el2)
{
function updateSlot1()
{
renderSlot(1, el1);
}
function updateSlot2()
{
renderSlot(2, el2);
}
if (E1_OID) vis.states.bind(E1_OID + ".val", updateSlot1);
if (E2_OID) vis.states.bind(E2_OID + ".val", updateSlot1);
if (E3_OID) vis.states.bind(E3_OID + ".val", updateSlot1);
if (E4_OID) vis.states.bind(E4_OID + ".val", updateSlot1);
if (E5_OID) vis.states.bind(E5_OID + ".val", updateSlot1);
if (E6_OID) vis.states.bind(E6_OID + ".val", updateSlot1);
if (E7_OID) vis.states.bind(E7_OID + ".val", updateSlot1);
if (E8_OID) vis.states.bind(E8_OID + ".val", updateSlot1);
if (E1_OID) vis.states.bind(E1_OID + ".val", updateSlot2);
if (E2_OID) vis.states.bind(E2_OID + ".val", updateSlot2);
if (E3_OID) vis.states.bind(E3_OID + ".val", updateSlot2);
if (E4_OID) vis.states.bind(E4_OID + ".val", updateSlot2);
if (E5_OID) vis.states.bind(E5_OID + ".val", updateSlot2);
if (E6_OID) vis.states.bind(E6_OID + ".val", updateSlot2);
if (E7_OID) vis.states.bind(E7_OID + ".val", updateSlot2);
if (E8_OID) vis.states.bind(E8_OID + ".val", updateSlot2);
updateSlot1();
updateSlot2();
}
else
{
setTimeout(start, 300);
}
}
if (document.readyState === "complete")
{
start();
}
else
{
window.addEventListener("load", start);
}
})();
</script>
➕ Neuen Countdown hinzufügen (Checkliste) Beispiel: countdown.0.countdowns.Herbsturlaub.fullJson ✅ Schritt 1 – Subscribe-Block {countdown.0.countdowns.Herbsturlaub.fullJson}
✅ Schritt 2 – OID definieren const OID_4 = „countdown.0.countdowns.Herbsturlaub.fullJson“;
✅ Schritt 3 – Renderfunktion ergänzen if (i === 4) return renderGeneric(val, „Herbsturlaub“, „🍂🧳“);
✅ Schritt 4 – remainingSeconds / pickTwo erweitern
(analog zu Event 3)