114 lines
3.1 KiB
Markdown
114 lines
3.1 KiB
Markdown
# 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.
|