${esc(how)}
+${tr("It opens on the dashboard chosen for that device. Mark buttons as a shortcut to use them from the app icon.")}
+${tr("Open this link or scan the code on another device that is signed in to Home Assistant.")}
+ + + + `, + async (e, close) => { + const x = e.target.closest("[data-x]")?.dataset.x; + if (x === "done") close(null); + if (x === "copy") { + try { await navigator.clipboard.writeText($("#share-url").value); toast(tr("Link copied.")); } + catch { $("#share-url").select(); document.execCommand?.("copy"); toast(tr("Link copied.")); } + } + }); + draw(false); + $("#share-kiosk").onchange = (e) => draw(e.target.checked); + await done; + } + + // ------------------------------------------------------------ import from Home Assistant + // Turns the cards of an existing Home Assistant dashboard into widgets, one tab per view. + const ent = (x) => (typeof x === "string" ? x : x?.entity) || ""; + function convertCard(card, out) { + const t = String(card.type || "").replace(/^custom:/, ""); + const e = card.entity || ""; + const ents = (card.entities || []).map(ent).filter(Boolean); + const add = (type, cfg, w, h) => out.push({ type, cfg, w, h }); + switch (t) { + case "vertical-stack": case "horizontal-stack": case "grid": (card.cards || []).forEach((c) => convertCard(c, out)); return; + case "entities": case "glance": if (ents.length) add("list", { title: card.title || "", entities: ents }, 4, Math.min(6, 1 + ents.length)); return; + case "light": add("light", { entity: e, name: card.name || "" }, 3, 2); return; + case "thermostat": case "climate": add("climate", { entity: e, name: card.name || "" }, 3, 3); return; + case "weather-forecast": add("forecast", { entity: e }, 6, 4); return; + case "media-control": add("media", { entities: [e] }, 4, 3); return; + case "markdown": add("text", { text: String(card.content || "").replace(/^#+\s*/gm, "").replace(/\*\*/g, "") }, 4, 2); return; + case "gauge": add("gauge", { entity: e, name: card.name || "", min: card.min ?? 0, max: card.max ?? 100 }, 3, 3); return; + case "history-graph": case "statistics-graph": case "sensor-graph": if (ents.length || e) add("graph", { title: card.title || "", entities: ents.length ? ents : [e], hours: card.hours_to_show || 24 }, 6, 3); return; + case "sensor": add("value", { entity: e, name: card.name || "" }, 3, 2); return; + case "picture-entity": case "picture-glance": { const cam = card.camera_image || (domainOf(e) === "camera" ? e : ""); if (cam) add("camera", { entity: cam }, 4, 3); return; } + case "calendar": if (ents.length) add("calendar", { entities: ents }, 4, 5); return; + case "todo-list": case "shopping-list": add("todo", { entity: e || "todo.shopping_list" }, 4, 4); return; + case "alarm-panel": add("alarm", { entity: e }, 4, 5); return; + case "area": add("room", { area: card.area || "" }, 4, 3); return; + case "tile": case "button": case "entity": case "mushroom-entity-card": case "mushroom-light-card": + if (domainOf(e) === "light") add("light", { entity: e, name: card.name || "" }, 3, 2); + else if (domainOf(e) === "climate") add("climate", { entity: e, name: card.name || "" }, 3, 3); + else if (e) add("entity", { entity: e, name: card.name || "" }, 3, 2); + return; + default: + if (e) add("entity", { entity: e, name: card.name || "" }, 3, 2); + else if (ents.length) add("list", { title: card.title || "", entities: ents }, 4, Math.min(6, 1 + ents.length)); + else out.skipped = (out.skipped || 0) + 1; + } + } + function convertLovelace(config, name) { + const d = newDashboard(name); + d.tabs = []; + let skipped = 0; + for (const view of config.views || []) { + const tabW = { ...newTab(view.title || tr("Tab {0}", d.tabs.length + 1), String(view.icon || "").replace(/^mdi:/, "")), widgets: [] }; + if (!Icons.has(tabW.icon)) tabW.icon = "tile"; + const cards = [...(view.cards || []), ...(view.sections || []).flatMap((sec) => sec.cards || [])]; + const out = []; + cards.forEach((c) => convertCard(c, out)); + skipped += out.skipped || 0; + for (const o of out) { + if (!Widgets[o.type]) continue; + const wd = makeWidget(o.type); + Object.assign(wd.cfg, o.cfg); + wd.w = o.w; wd.h = o.h; + Object.assign(wd, findSpot(wd.w, wd.h, tabW.widgets, d.grid.cols)); + tabW.widgets.push(wd); + } + d.tabs.push(tabW); + } + if (!d.tabs.length) d.tabs.push(newTab(tr("Overview"))); + d.nav.show = d.tabs.length > 1; + return { d, skipped }; + } + async function lovelaceDialog() { + if (!ha.connected) { toast(tr("Not connected to Home Assistant. Retrying…"), true); return; } + const list = await ha.send({ type: "lovelace/dashboards/list" }).catch(() => []); + const opts = [{ url_path: "", title: tr("Overview") }, ...(list || [])]; + const pick = await openModal(`${tr("Choose one of your Home Assistant dashboards. Its cards become widgets in a new dashboard here; the original stays as it is.")}
+ + `, + (e, close) => { const x = e.target.closest("[data-x]")?.dataset.x; if (x) close(x === "ok" ? { path: $("#ll-pick").value, title: $("#ll-pick").selectedOptions[0].text } : null); }); + if (!pick) return; + let config; + try { config = await ha.send({ type: "lovelace/config", url_path: pick.path || null }); } + catch (e) { toast(tr("Couldn’t load that dashboard: {0}", e.message), true); return; } + if (config?.strategy && !config.views) { toast(tr("That dashboard is generated by Home Assistant and has no cards of its own to import."), true); return; } + const { d, skipped } = convertLovelace(config || {}, pick.title); + store.dashboards.push(d); + scheduleSave(); + setCurrent(d.id); + setEdit(true); + const n = d.tabs.reduce((a, t) => a + t.widgets.length, 0); + toast(skipped ? tr("Imported {0} widgets. {1} cards couldn’t be converted.", n, skipped) : tr("Imported {0} widgets.", n)); + } + + // ------------------------------------------------------------ templates + // Ready-made layouts, filled with whatever matching devices this Home Assistant has. + function templateBuilder(name, { mobile = false } = {}) { + const d = newDashboard(name); + if (mobile) Object.assign(d, { mobile: true, grid: { ...d.grid, cols: 4, maxWidth: 440 } }); + const cols = d.grid.cols, ws = d.tabs[0].widgets; + const ids = Object.keys(ha.states); + const of = (dom, test = () => true) => ids.filter((e) => domainOf(e) === dom && test(ha.states[e])); + const add = (type, w, h, cfg = {}) => { + const wd = makeWidget(type); + Object.assign(wd.cfg, cfg); + wd.w = Math.min(w, cols); wd.h = h; + Object.assign(wd, findSpot(wd.w, wd.h, ws, cols)); + ws.push(wd); + return wd; + }; + const dc = (s, ...c) => c.includes(s.attributes.device_class); + return { d, add, of, dc, ids }; + } + const TEMPLATES = { + wall: { icon: "kiosk", name: "Wall tablet", desc: "Clock, weather, calendar, rooms and cameras for a screen on the wall.", build() { + const { d, add, of } = templateBuilder(tr("Wall tablet")); + Object.assign(d.theme, PRESETS.Dark, { preset: "Dark" }); + d.kiosk.saver = 10; + const weather = of("weather")[0]; + add("clock", 4, 3, { weather: weather || "", date: true }); + if (weather) add("forecast", 8, 3, { entity: weather, show: "both" }); + const cals = of("calendar"); + if (cals.length) add("calendar", 4, 6, { entities: cals }); + for (const a of (ha.reg?.areas || []).slice(0, 4)) add("room", 4, 3, { area: a.area_id }); + const cam = of("camera")[0]; + if (cam) add("camera", 4, 3, { entity: cam }); + const players = of("media_player").slice(0, 4); + if (players.length) add("media", 4, 3, { entities: players }); + return d; + } }, + phone: { icon: "phone", name: "Phone", desc: "A 4-column layout for your phone: people, lights, climate and media.", build() { + const { d, add, of } = templateBuilder(tr("Phone"), { mobile: true }); + add("heading", 4, 1, { text: tr("Home"), subtitle: "", size: 26 }); + const people = of("person"); + if (people.length) add("people", 4, 2, { entities: people.slice(0, 4) }); + for (const e of of("light", (s) => !s.attributes.entity_id).slice(0, 4)) add("entity", 2, 2, { entity: e }); + const clim = of("climate")[0]; + if (clim) add("climate", 4, 3, { entity: clim }); + const weather = of("weather")[0]; + if (weather) add("weather", 4, 2, { entity: weather }); + const garage = of("cover", (s) => /garage|gate|poort|hek/i.test(s.entity_id + friendly(s)))[0]; + if (garage) add("gate", 2, 3, { entity: garage }); + const players = of("media_player").slice(0, 3); + if (players.length) add("media", 4, 3, { entities: players }); + return d; + } }, + energy: { icon: "bolt", name: "Energy", desc: "Power flow, solar forecast, water and gas use and history graphs.", build() { + const { d, add, of, dc } = templateBuilder(tr("Energy")); + add("heading", 12, 1, { text: tr("Energy"), subtitle: "" }); + const power = of("sensor", (s) => dc(s, "power")); + const find = (re) => power.find((e) => re.test(e)); + const solar = find(/solar|pv|zon/i), grid = find(/grid|net|p1/i), battery = find(/battery|accu/i); + if (solar || grid) add("energy", 6, 5, { solar: solar || "", grid: grid || "", battery: battery || "" }); + const today = of("sensor").find((e) => /energy_production_today/.test(e)); + if (today) add("solar", 6, 5, { today, ...W_AUTOFILL("solar", today) }); + for (const e of of("sensor", (s) => dc(s, "water", "gas") && /total/.test(s.attributes.state_class || "")).slice(0, 2)) + add("usage", 4, 3, { entity: e, kind: ha.states[e].attributes.device_class === "gas" ? "gas" : "water" }); + if (power.length) add("graph", 12, 3, { entities: power.slice(0, 3), title: tr("Power, last 24 hours") }); + return d; + } }, + family: { icon: "people", name: "Family", desc: "Who’s home, the family calendar, shopping list, parcels and the weather.", build() { + const { d, add, of } = templateBuilder(tr("Family")); + add("clock", 4, 2, { date: true, weather: of("weather")[0] || "" }); + const people = of("person"); + if (people.length) add("people", 8, 2, { entities: people }); + const cals = of("calendar"); + if (cals.length) add("calendar", 4, 6, { entities: cals }); + const todo = of("todo")[0]; + if (todo) add("todo", 4, 5, { entity: todo }); + const weather = of("weather")[0]; + if (weather) add("forecast", 4, 4, { entity: weather, show: "daily" }); + const parcels = of("sensor", (s) => Object.values(s.attributes).some((v) => Array.isArray(v) && typeof v[0] === "object" && /parcel|delivery|postnl|dhl|pakket/i.test(s.entity_id))); + if (parcels.length) add("parcels", 4, 4, { entities: parcels }); + const waste = of("sensor", (s) => /afvalwijzer/i.test(s.entity_id)); + if (waste.length) add("waste", 4, 3, {}); + add("notifications", 4, 3, {}); + return d; + } }, + }; + const W_AUTOFILL = (type, eid) => Object.fromEntries(Object.entries(Widgets[type].autofill?.fill(eid, ha) || {}).filter(([, v]) => v)); + + /** New dashboard: a name and where to start from. */ + async function templateDialog() { + const opts = [["empty", "tile", "Empty", "Start with a blank grid."], ...Object.entries(TEMPLATES).map(([k, t]) => [k, t.icon, t.name, t.desc]), ["devices", "sparkles", "From my devices", "A mix of your lights, sensors and devices."]]; + return openModal(`${tr("Pick a change to go back to just after it. Redo brings the later ones back.")}
+${tr("These devices aren’t on any of your dashboards. Add one to this tab with the widget that suits it.")}
+${tr("No widgets match “{0}”.", esc(search.value.trim()))}
`; } + + /** A set-up widget saved under a name, to add again on any dashboard. Kept with the dashboards. */ + async function savePreset(id) { + const w = findWidget(id); + if (!w) return; + const name = await askText(tr("Save as preset"), w.cfg.name || w.cfg.title || tr(Widgets[w.type].label), tr("Save")); + if (!name) return; + const { x, y, ...rest } = clone(w); + (store.presets ||= []).push({ id: uid(), name, widget: rest }); + scheduleSave(); + renderPalette(); + toast(tr("Saved “{0}”. You’ll find it at the top of the widget list.", name)); + } + function addPreset(pid) { + const p = (store.presets || []).find((x) => x.id === pid); + if (!p) return; + const wd = { ...clone(p.widget), id: uid() }; + (wd.cfg.children || []).forEach((ch) => (ch.id = uid())); + wd.w = Math.min(wd.w, current.grid.cols); + Object.assign(wd, findSpot(wd.w, wd.h)); + mutate(() => tab().widgets.push(wd)); + select(wd.id); + } $("#palette-search").addEventListener("input", renderPalette); $("#palette-search").addEventListener("keydown", (e) => { if (e.key === "Enter") $("#palette-list .pal-item")?.click(); }); @@ -720,6 +1188,7 @@ function renderInspector() { const el = $("#inspector"); + updateEditBar(); if (multi.size > 1) { const btn = (k, l) => ``; el.innerHTML = `${tr("When Dashboard Studio is installed as an app on Android, long-press its icon to run this widget straight away. Up to four shortcuts.")}
${tr("Drag a widget onto a scroll or swipe card to put it inside.")}
`; fillAlbums(el); return; @@ -764,6 +1237,9 @@${tr("Leave the person empty to follow whoever is signed in on the device. Not used in kiosk mode.")}
` : ""}` : ""}${tr("System follows your device’s light or dark appearance.")}
+ ${t.preset !== "System" && t.preset !== "Custom" ? fieldHTML({ k: "follow", t: "check", l: "Switch to a dark or light version with the device" }, t.follow, "theme") : ""} ${fieldHTML({ k: "surface", t: "seg", l: "Tile style", o: ["cards", "outline", "plain"] }, t.surface, "theme")} ${fieldHTML({ k: "radius", t: "number", l: "Corner radius (px)" }, t.radius, "theme")}${tr("On a wall tablet, open kiosk in a new tab to hide the Home Assistant sidebar too.")}
${tr("A simple screen with only lights and thermostats, for guests or a babysitter.")}
+ ${fieldHTML({ k: "when", t: "seg", l: "Turns on", o: ["manual", "entity", "times"], labels: { manual: tr("With the button"), entity: tr("With an entity"), times: tr("Between times") } }, g.when, "guest")} + ${g.when === "entity" ? fieldHTML({ k: "entity", t: "entity", l: "On while this is on", domains: ["input_boolean", "switch", "schedule", "binary_sensor"] }, g.entity, "guest") : ""} + ${g.when === "times" ? `${tr("Night mode is saved on this device only, and is off while editing.")}
`; +${tr("Night mode is saved on this device only, and is off while editing.")}
+ `; } /** Album pickers load their list from the server after the inspector is drawn. */ @@ -892,6 +1386,15 @@ renderInspector(); } + /** What touching and holding a widget does: its details by default, or a second action. */ + function holdHTML(w) { + if (Widgets[w.type]?.container) return ""; + const h = w.hold || {}; + return `${isVisible(w) ? Icons.svg("eye") + tr("Visible right now") : Icons.svg("eye-off") + tr("Hidden right now")}
` : ""; return `${tr("Show this widget only when the conditions below are met. Leave empty to always show it.")}
+ ${fieldHTML({ k: "screen", t: "seg", l: "Show on", o: ["all", "phone", "large"], labels: { all: tr("All screens"), phone: tr("Phones"), large: tr("Larger screens") } }, vis.screen || "all", "vis")} ${vis.rules.length > 1 ? fieldHTML({ k: "mode", t: "seg", l: "Show when", o: ["all", "any"] }, vis.mode || "all", "vis") : ""} ${rows}${status}${esc(message)}
`, @@ -1890,12 +2492,13 @@ promptOpen = true; const timer = setTimeout(() => modalClose?.(null), PROMPT_MS); const choice = await openModal(`${tr("This closes by itself in a few seconds.")}
- `, + `, (e, close) => { const x = e.target.closest("[data-x]")?.dataset.x; if (x) close(x); }); clearTimeout(timer); promptOpen = false; if (choice === "exit") exitKiosk(); else if (choice === "full") toggleFullscreen(false); + else if (choice === "guest") guestOn ? endGuest() : setGuestManual(true); } function inExitCorner(e) { @@ -1988,6 +2591,129 @@ } $("#doorbell").addEventListener("click", (e) => { if (e.target.closest(".db-close")) closeDoorbell(); }); + // ------------------------------------------------------------ announcements + // An automation fires the event dashboard_studio_announce with a message; open screens show it full screen. + let announceTimer = 0; + ha.onAnnounce = (d) => { + if (!current || editMode || current.kiosk.announce === false || !d.message) return; + const me2 = (store.assign?.devices?.[DEVICE_ID]?.name || "").toLowerCase(); + const targets = [].concat(d.device || d.devices || []).map((x) => String(x).toLowerCase()); + if (targets.length && !targets.includes(me2) && !targets.includes(DEVICE_ID.toLowerCase())) return; + const el = $("#announce"); + hideSaver(); + if (modalClose) modalClose(null); + el.querySelector(".an-title").textContent = d.title || tr("Announcement"); + el.querySelector(".an-msg").textContent = d.message; + el.querySelector(".an-ico").innerHTML = Icons.svg(Icons.has(d.icon) ? d.icon : "megaphone"); + el.querySelector(".an-ok").textContent = tr("OK"); + el.hidden = false; + el.querySelector(".an-ok").focus(); + if (d.sound !== false) { window.HAFmt.beep?.(); setTimeout(() => window.HAFmt.beep?.(), 350); } + clearTimeout(announceTimer); + announceTimer = setTimeout(closeAnnounce, Math.max(5, Number(d.seconds) || 60) * 1000); + }; + function closeAnnounce() { + clearTimeout(announceTimer); + $("#announce").hidden = true; + poke(); + } + $("#announce").addEventListener("click", (e) => { if (e.target.closest(".an-ok") || e.target.id === "announce") closeAnnounce(); }); + + // ------------------------------------------------------------ tab rotation + // In kiosk mode the tabs can take turns; touching the screen pauses that for a minute. + let lastRotate = Date.now(), lastTouch = 0; + document.addEventListener("pointerdown", () => { lastTouch = Date.now(); }, { capture: true, passive: true }); + function rotateTick() { + const secs = Number(current?.kiosk.rotate) || 0; + if (!kiosk || secs <= 0 || current.tabs.length < 2 || (guestOn && !editMode) || modalClose || !$("#saver").hidden) return; + const now = Date.now(); + if (now - lastTouch < 60000 || now - lastRotate < Math.max(5, secs) * 1000) return; + lastRotate = now; + const i = current.tabs.findIndex((t) => t.id === tab().id); + setTab(current.tabs[(i + 1) % current.tabs.length].id); + } + + // ------------------------------------------------------------ away from home + // A dashboard can switch to another tab (garage, alarm, cameras) while you are away, and back when you're home. + let awayState = null, awayFrom = null; + function awayEntity() { + if (!current?.nav?.awayTab) return null; + if (current.nav.awayPerson) return current.nav.awayPerson; + return Object.values(ha.states).find((x) => x.entity_id.startsWith("person.") && me?.id && x.attributes.user_id === me.id)?.entity_id || null; + } + function checkAway() { + const eid = awayEntity(), s = eid && ha.states[eid]; + if (!s || editMode || kiosk || !current.tabs.some((t) => t.id === current.nav.awayTab)) return; + const away = s.state !== "home"; + if (away === awayState) return; + const first = awayState === null; + awayState = away; + if (away && tab().id !== current.nav.awayTab) { awayFrom = tab().id; setTab(current.nav.awayTab); if (!first) toast(tr("You’re away: showing “{0}”.", tab().name)); } + else if (!away && awayFrom && tab().id === current.nav.awayTab) { setTab(awayFrom); awayFrom = null; } + } + + // ------------------------------------------------------------ guest mode + // A plain screen with lights and thermostats. Turned on per device with a button, or for + // everyone by an entity or a time of day. Editing always shows the real dashboard. + let guestOn = false, guestCache = null; + const guestManual = () => !!current && lsGet(`ds.guest.${current.id}`) === "1"; + function setGuestManual(on) { + lsSet(`ds.guest.${current.id}`, on ? "1" : "0"); + checkGuest(true); + toast(on ? tr("Guest mode is on.") : tr("Guest mode is off.")); + } + function checkGuest(force) { + if (!current) return; + const g = current.guest || DEFAULT_GUEST; + const skipped = Date.now() < Number(lsGet(`ds.guestskip.${current.id}`) || 0); // ended early on this device + const on = guestManual() || (g.when === "entity" && !!g.entity && ["on", "home", "true"].includes(ha.states[g.entity]?.state)) + || (g.when === "times" && !skipped && betweenTimes(g.from, g.to)); + if (on === guestOn && !force) return; + guestOn = on; + guestCache = null; + document.body.classList.toggle("guest", on && !editMode); + $("#btn-guest").hidden = !(on && !editMode); + if (!editMode) renderGrid(); + } + function guestTab() { + const g = current.guest || DEFAULT_GUEST, cols = Number(current.grid.cols) || 12; + const pickIds = g.entities?.length ? g.entities : Object.keys(ha.states).filter((e) => (e.startsWith("light.") || e.startsWith("climate.")) && !ha.states[e].attributes.entity_id); + const key = `${pickIds.join(",")}|${cols}|${g.title}`; + if (guestCache?.key === key) return guestCache.tab; + const lights = pickIds.filter((e) => e.startsWith("light.")).sort((a, b) => friendly(ha.states[a] || { entity_id: a }).localeCompare(friendly(ha.states[b] || { entity_id: b }))); + const climates = pickIds.filter((e) => e.startsWith("climate.")); + const widgets = []; + const add = (type, cfg, w, h) => { + const wd = makeWidget(type); + Object.assign(wd.cfg, cfg); + wd.id = `guest-${type}-${cfg.entity || "title"}`; + wd.w = Math.min(w, cols); wd.h = h; + Object.assign(wd, findSpot(wd.w, wd.h, widgets, cols)); + widgets.push(wd); + }; + add("heading", { text: g.title || tr("Welcome"), subtitle: tr("Lights and temperature"), size: 30 }, cols, 1); + const tw = cols >= 12 ? 4 : Math.max(2, Math.floor(cols / 2)); + for (const e of climates) add("climate", { entity: e }, tw, 3); + const lw = cols >= 12 ? 3 : Math.max(2, Math.floor(cols / 2)); + for (const e of lights) add("light", { entity: e, colors: false }, lw, 2); + guestCache = { key, tab: { id: "guest", name: tr("Guest mode"), icon: "person", widgets } }; + return guestCache.tab; + } + /** Ending guest mode undoes whatever turned it on: the button, the entity, or the rest of today's time window. */ + async function endGuest() { + if (!(await confirmAction(tr("End guest mode?"), "", tr("End guest mode")))) return; + const g = current.guest; + if (g.when === "entity" && g.entity && ["input_boolean", "switch"].includes(domainOf(g.entity))) ha.callService(domainOf(g.entity), "turn_off", {}, g.entity); + if (g.when === "times" && betweenTimes(g.from, g.to)) { + const [h, m] = String(g.to || "0:0").split(":").map(Number), end = new Date(); + end.setHours(h || 0, m || 0, 0, 0); + if (end < Date.now()) end.setDate(end.getDate() + 1); + lsSet(`ds.guestskip.${current.id}`, String(end.getTime())); + } + setGuestManual(false); + } + $("#btn-guest").onclick = endGuest; + // ------------------------------------------------------------ night mode // Per device: dim the screen and use the dark theme after sunset or between two times. const DEFAULT_NIGHT = { mode: "off", from: "22:00", to: "07:00", dim: 40, dark: true }; @@ -1995,12 +2721,15 @@ function nightCfg() { try { return { ...DEFAULT_NIGHT, ...JSON.parse(lsGet("ds.night") || "{}") }; } catch { return { ...DEFAULT_NIGHT }; } } + /** Whether the time of day is between two "HH:MM" times, also across midnight. */ + function betweenTimes(fromV, toV) { + const mins = (v) => { const [h, m] = String(v || "0:0").split(":").map(Number); return (h || 0) * 60 + (m || 0); }; + const d = new Date(), now = d.getHours() * 60 + d.getMinutes(), from = mins(fromV), to = mins(toV); + return from <= to ? now >= from && now < to : now >= from || now < to; + } function isNight(n) { if (n.mode === "sunset") return ha.states["sun.sun"]?.state === "below_horizon"; - if (n.mode !== "times") return false; - const mins = (v) => { const [h, m] = String(v || "0:0").split(":").map(Number); return (h || 0) * 60 + (m || 0); }; - const d = new Date(), now = d.getHours() * 60 + d.getMinutes(), from = mins(n.from), to = mins(n.to); - return from <= to ? now >= from && now < to : now >= from || now < to; + return n.mode === "times" && betweenTimes(n.from, n.to); } function applyNight() { if (!current) return; @@ -2011,6 +2740,140 @@ if (dark !== nightDark) { nightDark = dark; applyTheme(); } } + // ------------------------------------------------------------ touch: haptics, swiping tabs, pull to refresh, sheets + const coarse = matchMedia("(pointer: coarse)"); + function haptic() { + if (coarse.matches && lsGet("ds.haptics") !== "0") navigator.vibrate?.(8); + if (kiosk && current?.kiosk.clickSound) clickSound(); + } + /** A short, quiet tick, made on the spot (no sound file), for wall tablets that can't vibrate. */ + let audioCtx = null; + function clickSound() { + try { + audioCtx ||= new (window.AudioContext || window.webkitAudioContext)(); + const t0 = audioCtx.currentTime, o = audioCtx.createOscillator(), g = audioCtx.createGain(); + o.type = "triangle"; o.frequency.setValueAtTime(1800, t0); o.frequency.exponentialRampToValueAtTime(600, t0 + 0.04); + g.gain.setValueAtTime(0.12, t0); g.gain.exponentialRampToValueAtTime(0.001, t0 + 0.05); + o.connect(g).connect(audioCtx.destination); + o.start(t0); o.stop(t0 + 0.06); + } catch { /* no audio */ } + } + + // ------------------------------------------------------------ touch and hold + // Holding a widget for half a second runs its second action; the tap that follows is swallowed. + let holdTimer = 0, holdStart = null; + gridEl.addEventListener("pointerdown", (e) => { + clearTimeout(holdTimer); + if (editMode || e.button !== 0) return; + const el = e.target.closest(".w[data-id]"); + if (!el || e.target.closest("input, textarea, select, .hs-nav, .sw-dot")) return; + holdStart = { x: e.clientX, y: e.clientY }; + holdTimer = setTimeout(() => { + const w = findWidget(el.dataset.id); + if (!w || !runHold(w)) return; + swallowClick = true; + haptic(); + el.animate?.([{ transform: "scale(.97)" }, { transform: "scale(1)" }], 180); + }, 500); + }); + gridEl.addEventListener("pointermove", (e) => { if (holdStart && Math.hypot(e.clientX - holdStart.x, e.clientY - holdStart.y) > 10) { clearTimeout(holdTimer); holdStart = null; } }); + for (const ev of ["pointerup", "pointercancel", "pointerleave"]) gridEl.addEventListener(ev, () => { clearTimeout(holdTimer); holdStart = null; }); + gridEl.addEventListener("contextmenu", (e) => { if (!editMode && coarse.matches && e.target.closest(".w")) e.preventDefault(); }); + + function runHold(w) { + const h = w.hold || {}, eid = w.cfg.entity || (w.cfg.entities || [])[0] || h.entity; + switch (h.action || "details") { + case "none": return false; + case "toggle": if (!eid) return false; defaultAction(eid); return true; + case "service": { + if (!h.service?.includes(".")) return false; + let data = {}; + if (h.data) { try { data = JSON.parse(h.data); } catch { return false; } } + const [d, sv] = h.service.split("."); + ha.callService(d, sv, data, h.entity || undefined); + return true; + } + default: if (!eid || !ha.states[eid]) return false; moreInfo(eid); return true; + } + } + + // Swipe left or right over the dashboard to go to the next or previous tab (not over cards that swipe themselves). + let swipeStart = null; + const SWIPE_OWN = ".hs, .sw, input, textarea, select, .swatches, .todo-list, .f1-tabs, .fc-hours, .sf-bars, .us-bars"; + canvasEl.addEventListener("touchstart", (e) => { + const tch = e.touches[0]; + swipeStart = !editMode && e.touches.length === 1 && current.tabs.length > 1 && !(guestOn) && !e.target.closest(SWIPE_OWN) + ? { x: tch.clientX, y: tch.clientY, t: Date.now() } : null; + }, { passive: true }); + canvasEl.addEventListener("touchend", (e) => { + if (!swipeStart) return; + const tch = e.changedTouches[0], dx = tch.clientX - swipeStart.x, dy = tch.clientY - swipeStart.y, dt = Date.now() - swipeStart.t; + swipeStart = null; + if (Math.abs(dx) < 70 || Math.abs(dy) > Math.abs(dx) * 0.6 || dt > 700) return; + const i = current.tabs.findIndex((t) => t.id === tab().id), j = i + (dx < 0 ? 1 : -1); + if (j < 0 || j >= current.tabs.length) return; + haptic(); + setTab(current.tabs[j].id); + if (!reducedMotion()) gridEl.animate([{ transform: `translateX(${dx < 0 ? 40 : -40}px)`, opacity: 0.4 }, { transform: "none", opacity: 1 }], { duration: 220, easing: "cubic-bezier(.2,.8,.2,1)" }); + }, { passive: true }); + + // Pull down at the top to fetch every state again. + let pull = null; + const ptr = $("#ptr"); + stageEl.addEventListener("touchstart", (e) => { + pull = !editMode && stageEl.scrollTop <= 0 && e.touches.length === 1 && !e.target.closest("input, textarea, select, .hs, .sw") ? { y: e.touches[0].clientY, d: 0 } : null; + }, { passive: true }); + stageEl.addEventListener("touchmove", (e) => { + if (!pull) return; + pull.d = Math.max(0, e.touches[0].clientY - pull.y); + if (stageEl.scrollTop > 0) { pull = null; ptr.hidden = true; return; } + if (pull.d > 10) { + ptr.hidden = false; + const k = Math.min(1, pull.d / 90); + ptr.style.transform = `translate(-50%, ${Math.min(70, pull.d * 0.5)}px) rotate(${k * 270}deg)`; + ptr.style.opacity = String(k); + ptr.classList.toggle("ready", k >= 1); + } + }, { passive: true }); + stageEl.addEventListener("touchend", async () => { + if (!pull) return; + const go = pull.d >= 90; + pull = null; + if (!go) { ptr.hidden = true; return; } + haptic(); + ptr.classList.add("spin"); + try { + if (ha.connected) { + const states = await ha.send({ type: "get_states" }); + ha.states = Object.fromEntries(states.map((x) => [x.entity_id, x])); + onStateChange(null); + } else toast(tr("Not connected to Home Assistant. Retrying…"), true); + } finally { + setTimeout(() => { ptr.classList.remove("spin", "ready"); ptr.hidden = true; }, 400); + } + }); + + // On phones, popups are sheets from the bottom; drag one down to close it. + let sheetDrag = null; + const sheet = $("#modal .modal-card"); + sheet.addEventListener("touchstart", (e) => { + sheetDrag = matchMedia("(max-width: 600px)").matches && sheet.scrollTop <= 0 && !e.target.closest("input, textarea, select, .lp-slider, input[type=range]") ? { y: e.touches[0].clientY, d: 0 } : null; + }, { passive: true }); + sheet.addEventListener("touchmove", (e) => { + if (!sheetDrag) return; + sheetDrag.d = Math.max(0, e.touches[0].clientY - sheetDrag.y); + sheet.style.transition = "none"; + sheet.style.transform = `translateY(${sheetDrag.d}px)`; + }, { passive: true }); + sheet.addEventListener("touchend", () => { + if (!sheetDrag) return; + const close = sheetDrag.d > 110; + sheetDrag = null; + sheet.style.transition = ""; + sheet.style.transform = ""; + if (close) modalClose?.(null); + }); + // ------------------------------------------------------------ phone dashboards // The top bar is hidden; touching and holding an empty spot brings it back for a while. let peekTimer = 0, holdTimer2 = 0; @@ -2035,17 +2898,24 @@ current = store.dashboards.find((d) => d.id === id) || store.dashboards[0]; lsSet("ds.current", current.id); activeTabId = lsGet(`ds.tab.${current.id}`); + guestOn = false; guestCache = null; awayState = null; awayFrom = null; undoStack.length = redoStack.length = 0; { selectedId = null; multi.clear(); } updateUndoButtons(); renderAll(); + checkGuest(true); + checkAway(); } function setEdit(on) { editMode = on; + if (!on) openSheet(null); + else renderPalette(); // the suggestions count needs the states lsSet("ds.edit", on ? "1" : "0"); if (!on) { selectedId = null; multi.clear(); } renderAll(); + checkGuest(true); + checkAway(); } /** Earlier saves of this dashboard, from the server. Restoring one can be undone. */ @@ -2088,9 +2958,10 @@ $("#btn-redo").onclick = redo; $("#dash-select").onchange = (e) => setCurrent(e.target.value); $("#btn-new").onclick = async () => { - const name = await askText(tr("New dashboard"), tr("New dashboard"), tr("Create")); - if (!name) return; - const d = newDashboard(name); + const choice = await templateDialog(); + if (!choice) return; + const d = choice.template === "devices" ? starterDashboard() : TEMPLATES[choice.template]?.build() || newDashboard(choice.name); + d.name = choice.name; store.dashboards.push(d); scheduleSave(); setCurrent(d.id); @@ -2110,6 +2981,16 @@ assignDialog(); } else if (act === "history") { historyDialog(); + } else if (act === "undo-history") { + undoHistoryDialog(); + } else if (act === "share") { + shareDialog(); + } else if (act === "suggest") { + suggestionsDialog(); + } else if (act === "install") { + installDialog(); + } else if (act === "lovelace") { + lovelaceDialog(); } else if (act === "starter") { if (!ha.connected) { toast(tr("Not connected to Home Assistant. Retrying…"), true); return; } const d = starterDashboard(); @@ -2159,9 +3040,19 @@ if (b) setTab(b.dataset.tab); }); - $("#palette-list").addEventListener("click", (e) => { + $("#palette-list").addEventListener("click", async (e) => { const b = e.target.closest("[data-add]"); - if (b) addWidget(b.dataset.add); + if (b) { addWidget(b.dataset.add); return; } + if (e.target.closest("[data-suggest]")) { suggestionsDialog(); return; } + const pa = e.target.closest("[data-preset-add]"); + if (pa) { addPreset(pa.dataset.presetAdd); return; } + const pd = e.target.closest("[data-preset-del]"); + if (pd) { + const p = store.presets.find((x) => x.id === pd.dataset.presetDel); + if (!(await confirmDestructive(tr("Delete preset “{0}”", p.name), tr("Widgets you already added from it stay."), tr("Delete")))) return; + store.presets = store.presets.filter((x) => x !== p); + scheduleSave(); renderPalette(); + } }); const insp = $("#inspector"); @@ -2180,6 +3071,11 @@ renderInspector(); return; } const del = e.target.closest("[data-ent-del]"); + if (del && del.dataset.path === "guest") { + mutate(() => current.guest[del.dataset.k].splice(Number(del.dataset.entDel), 1), null, { rerender: false }); + checkGuest(true); renderInspector(); return; + } + if (e.target.closest("[data-guest-toggle]")) { setGuestManual(!guestManual()); lsSet(`ds.guestskip.${current.id}`, "0"); renderInspector(); return; } if (del) { const w = editTarget(); // may be a card inside a scroll or swipe card mutate(() => (w.cfg[del.dataset.k] || []).splice(Number(del.dataset.entDel), 1), null, { rerender: false }); @@ -2219,7 +3115,8 @@ }); function toolAction(name, ids) { - if (name === "copyto") copyTo(ids); + if (name === "preset") savePreset(ids[0]); + else if (name === "copyto") copyTo(ids); else if (ids.length > 1) name === "dup" ? duplicateMany(ids) : removeMany(ids); else name === "dup" ? duplicate(ids[0]) : remove(ids[0]); } @@ -2270,11 +3167,14 @@ let resizeRaf = 0; window.addEventListener("resize", () => { cancelAnimationFrame(resizeRaf); resizeRaf = requestAnimationFrame(renderGrid); }); matchMedia("(prefers-color-scheme: dark)").addEventListener?.("change", () => renderGrid()); + phoneLandscape.addEventListener?.("change", () => renderGrid()); + phoneScreen.addEventListener?.("change", () => renderGrid()); // widgets shown only on phones or only on larger screens // clocks, screen saver and camera refresh setInterval(() => { gridEl.querySelectorAll("[data-clock]").forEach((el) => { el.innerHTML = clockHTML(el.dataset.h24 === "1", el.dataset.sec === "1", el.dataset.date === "1"); }); if (!$("#saver").hidden) updateSaver(); + rotateTick(); gridEl.querySelectorAll("[data-countdown]").forEach((el) => { const left = Math.max(0, (new Date(el.dataset.countdown) - Date.now()) / 1000), dur = Number(el.dataset.dur) || 1; el.textContent = window.HAFmt.hms(left); @@ -2289,12 +3189,13 @@ }); }, 1000); // keep "x min ago" labels and graph time windows fresh - setInterval(() => applyNight(), 60000); + setInterval(() => { applyNight(); checkGuest(); }, 60000); setInterval(() => { if (!editMode && current) tab().widgets.filter((w) => w.type === "graph" || w.type === "calendar" || w.cfg.showChanged).forEach((w) => renderWidget(w)); }, 60000); // ------------------------------------------------------------ boot function paintChromeIcons() { $("#btn-new").innerHTML = Icons.svg("plus"); + $("#eb-add").insertAdjacentHTML("afterbegin", Icons.svg("plus")); $("#btn-undo").innerHTML = Icons.svg("undo"); $("#btn-redo").innerHTML = Icons.svg("redo"); $("#btn-menu").innerHTML = Icons.svg("more"); @@ -2305,7 +3206,8 @@ ha.onStatus = (ok) => { const c = $("#conn"); c.classList.toggle("ok", ok); - c.textContent = ok ? tr("Connected") : tr("Offline"); + c.textContent = ok ? tr("Connected") : offlineText(); + showOffline(!ok); // An update restarts the app, which drops the connection: check right after reconnecting. if (ok) checkVersion(); }; @@ -2328,7 +3230,7 @@ } setInterval(checkVersion, 5 * 60 * 1000); ha.onChange = onStateChange; - ha.onRegistry = () => { renderGrid(); if (editMode) renderInspector(); }; + ha.onRegistry = () => { renderGrid(); if (editMode) { renderInspector(); renderPalette(); } }; /** Translate the static page: elements marked data-i18n, plus every aria-label and title. */ function translateStatic() { @@ -2340,6 +3242,9 @@ translateStatic(); paintChromeIcons(); renderPalette(); + await keepIngressSession(); + loadCachedStates(); + if ("serviceWorker" in navigator && APP_VERSION !== "dev") navigator.serviceWorker.register(new URL("sw.js", BASE), { scope: BASE.pathname }).catch(() => {}); try { const r = await fetch(new URL("api/dashboards", BASE)); store = await r.json(); @@ -2360,13 +3265,16 @@ save(); } me = await api("api/whoami").catch(() => null); - const hashId = (location.hash.match(/view=([\w-]+)/) || [])[1]; + const shared = sharedParams(); + const hashId = (location.hash.match(/view=([\w-]+)/) || [])[1] || shared.get("ds"); // Which dashboard to open: a link wins, then this device's choice, then this person's, then the last one used here. const dev = store.assign.devices[DEVICE_ID], forUser = me?.id && store.assign.users[me.id]; const exists = (id) => id && store.dashboards.some((d) => d.id === id); setCurrent([hashId, dev?.dashboard, forUser, lsGet("ds.current")].find(exists)); - if (location.hash.includes("kiosk") || (dev?.kiosk && !hashId)) enterKiosk({ fullscreen: false }); + if (location.hash.includes("kiosk") || shared.get("ds_kiosk") === "1" || (dev?.kiosk && !hashId)) enterKiosk({ fullscreen: false }); setTimeout(phoneHint, 1500); + const action = shared.get("ds_action"); + if (action) { history.replaceState(null, "", location.pathname + location.hash); runShortcut(action); } // After an update, point at what changed (once per device). const seen = lsGet("ds.seenVersion"); if (APP_VERSION !== "dev" && seen && seen !== APP_VERSION) setTimeout(() => toast(tr("Updated to {0}. See what’s new under About in the settings.", APP_VERSION)), 2000); diff --git a/dashboard_studio/web/apple-touch-icon.png b/dashboard_studio/web/apple-touch-icon.png new file mode 100644 index 0000000..ef5d5ad Binary files /dev/null and b/dashboard_studio/web/apple-touch-icon.png differ diff --git a/dashboard_studio/web/i18n.js b/dashboard_studio/web/i18n.js index efac4e0..19809cd 100644 --- a/dashboard_studio/web/i18n.js +++ b/dashboard_studio/web/i18n.js @@ -398,6 +398,222 @@ "Unlocked, tap to lock": "Open, tik om op slot te doen", "Location: {0}": "Locatie: {0}", "Inside {0}°": "Binnen {0}°", + "Parcels": "Pakketten", + "Parcel sensors (PostNL, DHL, …)": "Pakketsensoren (PostNL, DHL, …)", + "Show parcels delivered in the last two days": "Pakketten tonen die de afgelopen twee dagen zijn bezorgd", + "a parcel sensor": "een pakketsensor", + "Parcel": "Pakket", + "Delivered": "Bezorgd", + "On the way": "Onderweg", + "parcel on the way": "pakket onderweg", + "parcels on the way": "pakketten onderweg", + "{0} today": "{0} vandaag", + "No parcels on the way.": "Geen pakketten onderweg.", + "Yesterday": "Gisteren", + "Air quality": "Luchtkwaliteit", + "Sensors (leave empty to find CO₂, fine dust and humidity per room)": "Sensoren (laat leeg om CO₂, fijnstof en luchtvochtigheid per ruimte te zoeken)", + "No air quality sensors found. Add CO₂, fine dust or humidity sensors in the inspector.": "Geen luchtkwaliteitssensoren gevonden. Voeg CO₂-, fijnstof- of vochtigheidssensoren toe in de inspector.", + "Good": "Goed", + "Fair": "Matig", + "Poor": "Slecht", + "Open a window": "Zet een raam open", + "Air the room or turn on the purifier": "Lucht de ruimte of zet de luchtreiniger aan", + "Too humid, air the room": "Te vochtig, lucht de ruimte", + "The air is dry": "De lucht is droog", + "Water and gas": "Water en gas", + "Meter (water, gas or energy)": "Meter (water, gas of energie)", + "Type": "Soort", + "water": "Water", + "gas": "Gas", + "electricity": "Stroom", + "Days to show": "Aantal dagen", + "a meter": "een meter", + "No statistics for this meter. It needs a state class (total or total_increasing).": "Geen statistieken voor deze meter. Hij heeft een state class nodig (total of total_increasing).", + "Today so far": "Vandaag tot nu", + "vs yesterday": "t.o.v. gisteren", + "Average": "Gemiddeld", + "{0} days": "{0} dagen", + "Average {0}": "Gemiddeld {0}", + "Solar forecast": "Zonneverwachting", + "Production today (kWh)": "Opbrengst vandaag (kWh)", + "Production tomorrow (kWh)": "Opbrengst morgen (kWh)", + "Power now (W)": "Vermogen nu (W)", + "Hours for the washer or dishwasher": "Uren voor de wasmachine of vaatwasser", + "the production today sensor": "de sensor voor de opbrengst vandaag", + "The hour by hour forecast isn’t available.": "De verwachting per uur is niet beschikbaar.", + "Best time for the washer: {0}": "Beste moment voor de was: {0}", + "Garage and gate": "Garage en poort", + "Garage door, gate or lock": "Garagedeur, poort of slot", + "garage": "Garage", + "gate": "Poort", + "door": "Deur", + "Ask before opening or closing": "Vragen voor openen of sluiten", + "a garage door or gate": "een garagedeur of poort", + "Press": "Indrukken", + "by {0}": "door {0}", + "Open {0}?": "{0} openen?", + "Close {0}?": "{0} sluiten?", + "Lock {0}?": "{0} op slot doen?", + "Unlock {0}?": "{0} ontgrendelen?", + "Stop {0}?": "{0} stoppen?", + "Press {0}?": "{0} indrukken?", + "Sports": "Sport", + "Team (TeamTracker sensor)": "Team (TeamTracker-sensor)", + "Only show on match days": "Alleen tonen op wedstrijddagen", + "Show the venue and TV channel": "Stadion en tv-zender tonen", + "a TeamTracker sensor": "een TeamTracker-sensor", + "No match this round.": "Geen wedstrijd deze speelronde.", + "No match planned.": "Geen wedstrijd gepland.", + "Live": "Live", + "Full time": "Afgelopen", + "Formula One": "Formule 1", + "Next race": "Volgende race", + "Driver standings": "Coureursklassement", + "Constructor standings": "Constructeursklassement", + "Last race results": "Uitslag laatste race", + "Show first": "Eerst tonen", + "drivers": "Coureurs", + "teams": "Teams", + "results": "Uitslag", + "Positions to show": "Aantal posities", + "the next race sensor": "de sensor voor de volgende race", + "in {0} d {1} h": "over {0} d {1} u", + "in {0} h {1} min": "over {0} u {1} min", + "Drivers": "Coureurs", + "Teams": "Teams", + "Last race": "Laatste race", + "{0} wins": "{0} zeges", + "pts": "pnt", + "Round {0}": "Ronde {0}", + "No standings yet.": "Nog geen klassement.", + "Practice 1": "Training 1", + "Practice 2": "Training 2", + "Practice 3": "Training 3", + "Sprint qualifying": "Sprintkwalificatie", + "Sprint": "Sprint", + "Qualifying": "Kwalificatie", + "Race": "Race", + "yesterday {0}": "gisteren {0}", + "Go to the next tab every (seconds)": "Naar het volgende tabblad elke (seconden)", + "Show announcements from Home Assistant": "Mededelingen uit Home Assistant tonen", + "Guest mode": "Gastmodus", + "A simple screen with only lights and thermostats, for guests or a babysitter.": "Een eenvoudig scherm met alleen lampen en thermostaten, voor gasten of de oppas.", + "Turns on": "Gaat aan", + "With the button": "Met de knop", + "With an entity": "Met een entiteit", + "On while this is on": "Aan zolang dit aan staat", + "Welcome text": "Welkomsttekst", + "Welcome": "Welkom", + "Lights and thermostats (leave empty for all)": "Lampen en thermostaten (laat leeg voor alle)", + "End guest mode on this device": "Gastmodus op dit apparaat beëindigen", + "Start guest mode on this device": "Gastmodus op dit apparaat starten", + "Announcement": "Mededeling", + "Guest mode is on.": "Gastmodus staat aan.", + "Guest mode is off.": "Gastmodus staat uit.", + "Lights and temperature": "Lampen en temperatuur", + "End guest mode?": "Gastmodus beëindigen?", + "Guest mode was turned on by a schedule or an entity, and comes back when that says so.": "Gastmodus is aangezet door een tijdschema of entiteit, en komt terug zodra die dat aangeeft.", + "End guest mode": "Gastmodus beëindigen", + "Moved widgets around": "Widgets verplaatst", + "Added {0}": "{0} toegevoegd", + "Added {0} widgets": "{0} widgets toegevoegd", + "Deleted {0}": "{0} verwijderd", + "Deleted {0} widgets": "{0} widgets verwijderd", + "Moved {0}": "{0} verplaatst", + "Moved {0} widgets": "{0} widgets verplaatst", + "Resized {0}": "Formaat van {0} gewijzigd", + "Resized {0} widgets": "Formaat van {0} widgets gewijzigd", + "Edited {0}": "{0} bewerkt", + "Edited {0} widgets": "{0} widgets bewerkt", + "Changed the tabs": "Tabbladen gewijzigd", + "Changed the look": "Uiterlijk gewijzigd", + "Changed the grid": "Raster gewijzigd", + "Changed the kiosk settings": "Kioskinstellingen gewijzigd", + "Changed guest mode": "Gastmodus gewijzigd", + "Renamed the dashboard": "Dashboard hernoemd", + "Changed the dashboard": "Dashboard gewijzigd", + "No changes yet in this session.": "Nog geen wijzigingen in deze sessie.", + "Undo history": "Geschiedenis van wijzigingen", + "Undo history…": "Geschiedenis van wijzigingen…", + "Pick a change to go back to just after it. Redo brings the later ones back.": "Kies een wijziging om terug te gaan naar net daarna. Opnieuw brengt de latere wijzigingen terug.", + "Before your changes": "Voor je wijzigingen", + "Save as preset": "Bewaren als voorinstelling", + "My presets": "Mijn voorinstellingen", + "Delete preset “{0}”": "Voorinstelling “{0}” verwijderen", + "Save": "Bewaren", + "Saved “{0}”. You’ll find it at the top of the widget list.": "“{0}” bewaard. Je vindt hem bovenaan de lijst met widgets.", + "Widgets you already added from it stay.": "Widgets die je er al mee hebt toegevoegd blijven staan.", + "Wall tablet": "Wandtablet", + "Clock, weather, calendar, rooms and cameras for a screen on the wall.": "Klok, weer, agenda, ruimtes en camera’s voor een scherm aan de muur.", + "Phone": "Telefoon", + "A 4-column layout for your phone: people, lights, climate and media.": "Een indeling met 4 kolommen voor je telefoon: personen, lampen, klimaat en media.", + "Power flow, solar forecast, water and gas use and history graphs.": "Energiestromen, zonneverwachting, water- en gasverbruik en grafieken.", + "Power, last 24 hours": "Vermogen, afgelopen 24 uur", + "Family": "Gezin", + "Who’s home, the family calendar, shopping list, parcels and the weather.": "Wie er thuis is, de gezinsagenda, boodschappenlijst, pakketten en het weer.", + "Empty": "Leeg", + "Start with a blank grid.": "Begin met een leeg raster.", + "From my devices": "Vanuit mijn apparaten", + "A mix of your lights, sensors and devices.": "Een mix van je lampen, sensoren en apparaten.", + "Start from": "Beginnen met", + "Switch to a dark or light version with the device": "Wisselen naar een donkere of lichte versie met het apparaat", + "QR code for {0}": "QR-code voor {0}", + "Share “{0}”": "“{0}” delen", + "Open this link or scan the code on another device that is signed in to Home Assistant.": "Open deze link of scan de code op een ander apparaat dat is ingelogd bij Home Assistant.", + "Link": "Link", + "Open in kiosk mode": "Openen in kioskmodus", + "Link copied.": "Link gekopieerd.", + "Share…": "Delen…", + "Import from Home Assistant…": "Importeren uit Home Assistant…", + "Import from Home Assistant": "Importeren uit Home Assistant", + "Choose one of your Home Assistant dashboards. Its cards become widgets in a new dashboard here; the original stays as it is.": "Kies een van je Home Assistant-dashboards. De kaarten worden widgets in een nieuw dashboard hier; het origineel blijft zoals het is.", + "Import": "Importeren", + "Couldn’t load that dashboard: {0}": "Dat dashboard kon niet worden geladen: {0}", + "That dashboard is generated by Home Assistant and has no cards of its own to import.": "Dat dashboard wordt door Home Assistant zelf gemaakt en heeft geen eigen kaarten om te importeren.", + "Imported {0} widgets. {1} cards couldn’t be converted.": "{0} widgets geïmporteerd. {1} kaarten konden niet worden omgezet.", + "Imported {0} widgets.": "{0} widgets geïmporteerd.", + "That shortcut’s widget no longer exists.": "De widget van die snelkoppeling bestaat niet meer.", + "Done: {0}": "Gedaan: {0}", + "Home screen": "Beginscherm", + "Shortcut on the app icon": "Snelkoppeling op het app-pictogram", + "When Dashboard Studio is installed as an app on Android, long-press its icon to run this widget straight away. Up to four shortcuts.": "Als Dashboard Studio als app op Android is geïnstalleerd, houd je het pictogram ingedrukt om deze widget meteen te gebruiken. Maximaal vier snelkoppelingen.", + "Install as an app…": "Installeren als app…", + "Install as an app": "Installeren als app", + "Home Assistant’s page can’t be installed itself. Open Dashboard Studio in its own tab first, then choose Install as an app again there.": "De pagina van Home Assistant zelf kan niet worden geïnstalleerd. Open Dashboard Studio eerst in een eigen tabblad en kies daar opnieuw Installeren als app.", + "In Safari, tap the Share button, then Add to Home Screen.": "Tik in Safari op de deelknop en daarna op Zet op beginscherm.", + "Your browser can install Dashboard Studio as an app with its own icon. It opens full screen, without the browser’s bars.": "Je browser kan Dashboard Studio installeren als app met een eigen pictogram. Hij opent schermvullend, zonder de balken van de browser.", + "In your browser’s menu, choose Install app or Add to Home screen.": "Kies in het menu van je browser App installeren of Toevoegen aan startscherm.", + "It opens on the dashboard chosen for that device. Mark buttons as a shortcut to use them from the app icon.": "Hij opent het dashboard dat voor dat apparaat is gekozen. Markeer knoppen als snelkoppeling om ze vanaf het app-pictogram te gebruiken.", + "Open in its own tab": "Openen in een eigen tabblad", + "Offline · {0}": "Offline · {0}", + "Offline. Showing the states from {0}.": "Offline. De standen van {0} worden getoond.", + "Offline. Reconnecting…": "Offline. Opnieuw verbinden…", + "Show on": "Tonen op", + "All screens": "Alle schermen", + "Phones": "Telefoons", + "Larger screens": "Grotere schermen", + "Vibrate briefly when you press something (phones that support it)": "Kort trillen als je iets indrukt (telefoons die dat kunnen)", + "Edit widget": "Widget bewerken", + "Dashboard settings": "Dashboardinstellingen", + "When you’re away from home, open": "Als je niet thuis bent, openen", + "Nothing special": "Niets bijzonders", + "Away means this person is away": "Weg betekent: deze persoon is weg", + "Leave the person empty to follow whoever is signed in on the device. Not used in kiosk mode.": "Laat de persoon leeg om te volgen wie er op het apparaat is ingelogd. Niet in kioskmodus.", + "You’re away: showing “{0}”.": "Je bent weg: “{0}” wordt getoond.", + "Settings": "Instellingen", + "Touch and hold": "Ingedrukt houden", + "Touch and hold to": "Ingedrukt houden om", + "Show the details": "De details te tonen", + "Switch on or off": "Aan of uit te zetten", + "Run an action": "Een actie uit te voeren", + "Do nothing": "Niets te doen", + "A soft click when something is pressed": "Een zachte klik als er iets wordt ingedrukt", + "Every device is on a dashboard already.": "Elk apparaat staat al op een dashboard.", + "Not on a dashboard yet": "Nog niet op een dashboard", + "These devices aren’t on any of your dashboards. Add one to this tab with the widget that suits it.": "Deze apparaten staan op geen van je dashboards. Voeg er een toe aan dit tabblad met de widget die erbij past.", + "1 device isn’t on a dashboard": "1 apparaat staat niet op een dashboard", + "{0} devices aren’t on a dashboard": "{0} apparaten staan niet op een dashboard", + "Devices not on a dashboard…": "Apparaten die niet op een dashboard staan…", "Today": "Vandaag", "Tomorrow": "Morgen", "All day": "Hele dag", "Busy": "Bezet", }; diff --git a/dashboard_studio/web/icon-192.png b/dashboard_studio/web/icon-192.png new file mode 100644 index 0000000..fa80204 Binary files /dev/null and b/dashboard_studio/web/icon-192.png differ diff --git a/dashboard_studio/web/icon-512.png b/dashboard_studio/web/icon-512.png new file mode 100644 index 0000000..ff08f01 Binary files /dev/null and b/dashboard_studio/web/icon-512.png differ diff --git a/dashboard_studio/web/icons.js b/dashboard_studio/web/icons.js index 7fdca5c..477cb16 100644 --- a/dashboard_studio/web/icons.js +++ b/dashboard_studio/web/icons.js @@ -151,6 +151,18 @@ "arrow-up": "M12 19V5M5 12l7-7 7 7", "arrow-down": "M12 5v14M19 12l-7 7-7-7", "copy-to": "M9 9h11v11H9zM5 15H4V4h11v1M13 14.5h4M15 12.5l2 2-2 2", + package: "M21 8l-9-5-9 5v8l9 5 9-5zM3 8l9 5 9-5M12 13v8M7.5 5.5l9 5", + trophy: "M8 4h8v5a4 4 0 0 1-8 0zM8 6H5a3 3 0 0 0 3 4M16 6h3a3 3 0 0 1-3 4M12 13v4M8 21h8M10 17h4v4h-4z", + flag: "M5 21V4M5 4h11l-2 4 2 4H5", + share: "M12 3v12M8 7l4-4 4 4M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7", + qr: "M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h2v2h-2zM18 14h2M14 18h2M18 18h2v2M17 17h1", + layout: "M4 4h16v6H4zM4 14h7v6H4zM15 14h5v6h-5z", + bookmark: "M6 3h12v18l-6-4-6 4z", + megaphone: "M3 10v4h4l7 5V5L7 10zM17 9a4 4 0 0 1 0 6M19.5 6.5a8 8 0 0 1 0 11", + import: "M12 3v12M8 11l4 4 4-4M5 19h14", + refresh: "M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7", + air: "M3 8h10a3 3 0 1 0-3-3M3 12h15a3 3 0 1 1-3 3M3 16h7", + gate: "M3 21V5M21 21V5M3 9h18M3 15h18M8 9v6M13 9v6M18 9v6", }; const FILLED = new Set(["play", "pause", "next", "prev"]); // Dutch (and some English) words for the icon search, so "keuken" or "slaapkamer" find something. @@ -167,6 +179,8 @@ paw: "huisdier hond kat", bike: "fiets", bulb: "lamp licht", plug: "stopcontact stekker", fan: "ventilator", thermometer: "temperatuur thermostaat", droplet: "water vocht", washer: "wasmachine", dryer: "droger", dishwasher: "vaatwasser", vacuum: "stofzuiger robot", car: "auto", lock: "slot", camera: "camera", speaker: "speaker luidspreker", music: "muziek", door: "deur", window: "raam", timer: "timer kookwekker", people: "personen familie", + package: "pakket pakje post bezorging doos", trophy: "sport wedstrijd beker voetbal", flag: "vlag formule 1 race", air: "lucht luchtkwaliteit co2", + gate: "hek poort oprit", megaphone: "omroep mededeling bericht", share: "delen", qr: "qr code", bookmark: "favoriet bewaren", }; /** Icon names matching a search, by name or by the words above. */ diff --git a/dashboard_studio/web/index.html b/dashboard_studio/web/index.html index 7932635..1cb60fb 100644 --- a/dashboard_studio/web/index.html +++ b/dashboard_studio/web/index.html @@ -9,6 +9,13 @@