ha-kiosk-dashboard/browser-mod-setup-guide.md

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:

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.