Add auto-scroll-instructions.txt
This commit is contained in:
43
auto-scroll-instructions.txt
Normal file
43
auto-scroll-instructions.txt
Normal file
@@ -0,0 +1,43 @@
|
||||
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.
|
||||
Reference in New Issue
Block a user