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