From fde02208945a04795d3165c06433d8dbdcb0f084 Mon Sep 17 00:00:00 2001 From: kyle Date: Wed, 31 Dec 2025 04:26:37 -0800 Subject: [PATCH] Add dashboard-kiosk-with-scroll.yaml --- dashboard-kiosk-with-scroll.yaml | 189 +++++++++++++++++++++++++++++++ 1 file changed, 189 insertions(+) create mode 100644 dashboard-kiosk-with-scroll.yaml diff --git a/dashboard-kiosk-with-scroll.yaml b/dashboard-kiosk-with-scroll.yaml new file mode 100644 index 0000000..2645ba4 --- /dev/null +++ b/dashboard-kiosk-with-scroll.yaml @@ -0,0 +1,189 @@ +title: Kiosk Dashboard +path: dashboard-kiosk +icon: mdi:view-dashboard +panel: false +type: sidebar +views: + - title: Kiosk View + path: default_view + # Add auto-scroll JavaScript via card-mod on the view + card_mod: + style: | + :host { + overflow-y: auto; + scroll-behavior: smooth; + } + cards: + - type: markdown + content: | +

{{ now().strftime('%A, %B %d, %Y') }}

+

{{ now().strftime('%I:%M %p') }}

+ card_mod: + style: | + ha-card { + font-size: 4em !important; + padding: 60px !important; + text-align: center; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white !important; + min-height: 100vh !important; + display: flex !important; + flex-direction: column !important; + justify-content: center !important; + scroll-snap-align: start !important; + } + h1 { font-size: 1.2em !important; margin: 20px 0 !important; } + h2 { font-size: 0.8em !important; margin: 10px 0 !important; } + - type: weather-forecast + entity: weather.forecast_home + name: Current Weather + show_forecast: true + forecast_type: daily + card_mod: + style: | + ha-card { + font-size: 2.5em !important; + padding: 40px !important; + min-height: 100vh !important; + display: flex !important; + flex-direction: column !important; + justify-content: center !important; + scroll-snap-align: start !important; + } + .name { font-size: 1.2em !important; } + .state { font-size: 1.5em !important; } + .forecast-item { font-size: 1em !important; } + - type: entities + title: 🌅 Sun Information + entities: + - entity: sun.sun + name: Sun Position + icon: mdi:weather-sunny + - entity: sensor.sun_next_rising + name: Sunrise + icon: mdi:weather-sunset-up + - entity: sensor.sun_next_setting + name: Sunset + icon: mdi:weather-sunset-down + - entity: sensor.sun_next_dawn + name: Dawn + icon: mdi:weather-sunset-up + - entity: sensor.sun_next_dusk + name: Dusk + icon: mdi:weather-sunset-down + card_mod: + style: | + ha-card { + font-size: 2.5em !important; + padding: 40px !important; + min-height: 100vh !important; + display: flex !important; + flex-direction: column !important; + justify-content: center !important; + scroll-snap-align: start !important; + } + .card-content { font-size: 0.8em !important; } + .name { font-size: 1em !important; } + .state { font-size: 1.2em !important; } + - type: entities + title: 🚆 Public Transport + entities: + - entity: sensor.roslagsbanan_line_28_to_stockholms_ostra + name: To Stockholm Östra + icon: mdi:train + - entity: sensor.roslagsbanan_line_28_to_akersberga + name: To Åkersberga + icon: mdi:train + - entity: sensor.sl_departure_sensor_9636_bravalavagen + name: SL Departure + icon: mdi:bus + - entity: sensor.next_departure_time + name: Next Departure + icon: mdi:clock-outline + card_mod: + style: | + ha-card { + font-size: 2.5em !important; + padding: 40px !important; + min-height: 100vh !important; + display: flex !important; + flex-direction: column !important; + justify-content: center !important; + scroll-snap-align: start !important; + } + .card-content { font-size: 0.8em !important; } + .name { font-size: 1em !important; } + .state { font-size: 1.2em !important; } + - type: entities + title: 📹 Camera Status + entities: + - entity: binary_sensor.wyze_cam_front_porch_cam_motion + name: Front Porch Motion + icon: mdi:motion-sensor + - entity: binary_sensor.wyze_cam_garage_camera_motion + name: Garage Camera Motion + icon: mdi:motion-sensor + - entity: binary_sensor.wyze_cam_garage_pan_cam_motion + name: Garage Pan Cam Motion + icon: mdi:motion-sensor + - entity: binary_sensor.wyze_cam_kitchen_cam_motion + name: Kitchen Cam Motion + icon: mdi:motion-sensor + card_mod: + style: | + ha-card { + font-size: 2.5em !important; + padding: 40px !important; + min-height: 100vh !important; + display: flex !important; + flex-direction: column !important; + justify-content: center !important; + scroll-snap-align: start !important; + } + .card-content { font-size: 0.8em !important; } + .name { font-size: 1em !important; } + .state { font-size: 1.2em !important; } + - type: entities + title: 🌐 Network Status + entities: + - entity: sensor.xe75_download_speed + name: Download Speed + icon: mdi:download + - entity: sensor.xe75_upload_speed + name: Upload Speed + icon: mdi:upload + - entity: sensor.external_ip + name: External IP + icon: mdi:ip-network + - entity: binary_sensor.xe75_wan_status + name: WAN Status + icon: mdi:router-wireless + card_mod: + style: | + ha-card { + font-size: 2.5em !important; + padding: 40px !important; + min-height: 100vh !important; + display: flex !important; + flex-direction: column !important; + justify-content: center !important; + scroll-snap-align: start !important; + } + .card-content { font-size: 0.8em !important; } + .name { font-size: 1em !important; } + .state { font-size: 1.2em !important; } + - type: markdown + content: | +
+ card_mod: + style: | + ha-card { + min-height: 100vh !important; + display: flex !important; + flex-direction: column !important; + justify-content: center; + align-items: center; + font-size: 2.5em !important; + padding: 40px !important; + scroll-snap-align: start !important; + }