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