# 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.