Add browser-mod-setup-guide.md

2025-12-31 04:26:21 -08:00
parent 650d8cdc87
commit 4d00a20b0c
1 changed files with 113 additions and 0 deletions
--- a/browser-mod-setup-guide.md
+++ b/browser-mod-setup-guide.md
@@ -0,0 +1,113 @@
+# Browser Mod Auto-Scroll Setup Guide
+
+## Where to Add the JavaScript Code
+
+The JavaScript code goes in **Home Assistant** (on the server), NOT on the client machine. You have two options:
+
+---
+
+## Option 1: Create an Automation (Recommended)
+
+### Step 1: Copy the Automation YAML
+1. Open `browser-mod-automation.yaml` 
+2. Copy the entire contents
+
+### Step 2: Add to Home Assistant
+
+**Method A: Via UI (Easiest)**
+1. Go to **Settings > Automations & Scenes**
+2. Click **"Create Automation"** (bottom right)
+3. Click the three dots (⋮) in top right
+4. Select **"Edit in YAML"**
+5. Paste the automation YAML
+6. Click **"Save"**
+
+**Method B: Via configuration.yaml**
+1. Edit `configuration.yaml` in Home Assistant
+2. Add the automation YAML under the `automation:` section
+3. Restart Home Assistant
+
+### Step 3: Enable the Automation
+- Make sure the automation is **enabled** (toggle switch should be ON)
+- The automation will run when:
+  - Browser Mod browser is turned on
+  - Home Assistant starts
+
+---
+
+## Option 2: Manual Service Call (For Testing)
+
+If you want to test it manually first:
+
+1. Go to **Developer Tools > Services**
+2. Select service: `browser_mod.execute_script`
+3. Under **Target**, select your browser entity (e.g., `browser_mod.browser_kiosk`)
+4. Under **Service Data**, paste this:
+
+```yaml
+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' });
+  })();
+```
+
+5. Click **"Call Service"**
+
+---
+
+## How It Works
+
+1. **Browser Mod** detects when the dashboard loads
+2. **Automation** triggers and waits 3 seconds for page to fully load
+3. **JavaScript** is injected into the browser (runs on the client, but code is stored in HA)
+4. **Auto-scroll** starts: scrolls to next card every 5 seconds
+5. **Loops** through all cards continuously
+
+---
+
+## Troubleshooting
+
+**If auto-scroll doesn't work:**
+
+1. **Check Browser Mod is installed:**
+   - Settings > Add-ons > Browser Mod
+   - Should show as "Running"
+
+2. **Check browser entity exists:**
+   - Developer Tools > States
+   - Search for `browser_mod.browser_kiosk`
+   - Should show state: "on"
+
+3. **Check automation is enabled:**
+   - Settings > Automations & Scenes
+   - Find "Kiosk Dashboard Auto-Scroll"
+   - Toggle should be ON
+
+4. **Check browser console:**
+   - Open dashboard in Firefox
+   - Press F12 > Console tab
+   - Look for "Auto-scroll script starting..." message
+
+5. **Manual test:**
+   - Use Option 2 (Service Call) to test if JavaScript works
+
+---
+
+## Files Reference
+
+- `browser-mod-automation.yaml` - Full automation with JavaScript
+- `dashboard-auto-scroll.js` - Just the JavaScript (for reference)
+- `dashboard-kiosk-with-scroll.yaml` - Dashboard YAML with card-mod styling
+
+---
+
+## Summary
+
+**The JavaScript code goes in Home Assistant as an automation**, not on the client machine. Browser Mod handles injecting it into the browser automatically.