From f4bba324079ea32ea1f75158917157319b907f09 Mon Sep 17 00:00:00 2001 From: kyle Date: Wed, 31 Dec 2025 04:26:48 -0800 Subject: [PATCH] Add inject-scroll-via-browser-mod.md --- inject-scroll-via-browser-mod.md | 56 ++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 inject-scroll-via-browser-mod.md diff --git a/inject-scroll-via-browser-mod.md b/inject-scroll-via-browser-mod.md new file mode 100644 index 0000000..4df2ef1 --- /dev/null +++ b/inject-scroll-via-browser-mod.md @@ -0,0 +1,56 @@ +# Auto-Scroll Dashboard Setup Guide + +## Method 1: Using Browser Mod (Recommended) + +If you have **browser_mod** installed: + +1. Add this to your dashboard YAML (already included in `dashboard-kiosk-with-scroll.yaml`) +2. Create an automation in Home Assistant: + +```yaml +automation: + - alias: "Kiosk Auto-Scroll" + trigger: + - platform: state + entity_id: browser_mod.browser_kiosk + to: "on" + action: + - service: browser_mod.execute_script + target: + entity_id: browser_mod.browser_kiosk + data: + command: | + (function() { + const cards = Array.from(document.querySelectorAll('ha-card')); + cards.forEach(card => card.style.minHeight = window.innerHeight + 'px'); + let i = 0; + setInterval(() => { + i = (i + 1) % cards.length; + cards[i].scrollIntoView({ behavior: 'smooth', block: 'start' }); + }, 5000); + window.scrollTo({ top: 0, behavior: 'smooth' }); + })(); +``` + +## Method 2: Manual JavaScript Injection + +1. Open the dashboard in Firefox +2. Press F12 to open Developer Tools +3. Go to Console tab +4. Paste the code from `dashboard-auto-scroll.js` +5. Press Enter + +The script will: +- Make each card full viewport height +- Auto-scroll every 5 seconds +- Loop through all cards + +## Method 3: Using card-mod with CSS Animation (Limited) + +CSS-only scrolling is tricky. The JavaScript method is more reliable. + +## Files Created: + +- `dashboard-kiosk-with-scroll.yaml` - Dashboard with card-mod styling +- `dashboard-auto-scroll.js` - JavaScript for auto-scrolling +- `dashboard-kiosk-cardmod.yaml` - Dashboard with card-mod (no auto-scroll JS)