44 lines
1.3 KiB
Plaintext
44 lines
1.3 KiB
Plaintext
Auto-Scroll Setup for Kiosk Dashboard
|
|
=====================================
|
|
|
|
The dashboard YAML has been updated with:
|
|
✓ Much larger fonts (2.5-4em) for 5-foot viewing distance
|
|
✓ Bigger card padding and spacing
|
|
✓ Full-height cards for better visibility
|
|
|
|
For auto-scrolling every 5 seconds, you have two options:
|
|
|
|
OPTION 1: Browser Console Injection (Easiest)
|
|
----------------------------------------------
|
|
1. Open the dashboard in Firefox
|
|
2. Press F12 to open Developer Tools
|
|
3. Go to Console tab
|
|
4. Copy and paste the contents of inject-auto-scroll.js
|
|
5. Press Enter
|
|
6. The dashboard will now auto-scroll every 5 seconds
|
|
|
|
To make it permanent, you can:
|
|
- Use a Firefox extension to inject scripts
|
|
- Or add it to the dashboard script to inject on load
|
|
|
|
OPTION 2: Use Custom Card (More Permanent)
|
|
-------------------------------------------
|
|
Install "html-template-card" from HACS and use the
|
|
dashboard-auto-scroll-js.yaml file instead.
|
|
|
|
OPTION 3: CSS Animation (Current)
|
|
-----------------------------------
|
|
The dashboard-kiosk-final.yaml uses CSS animation.
|
|
It should auto-scroll, but if it doesn't work perfectly,
|
|
use Option 1 or 2.
|
|
|
|
FONT SIZES:
|
|
-----------
|
|
- Header: 4em (very large)
|
|
- Card titles: 2.5em
|
|
- Card content: 1.5-2em
|
|
- Entity rows: 1.8em
|
|
|
|
All cards are set to 100vh (full viewport height) for
|
|
maximum readability from 5 feet away.
|