From d7c0414399532cc6ae66f8e21f9cb855d4d744de Mon Sep 17 00:00:00 2001 From: kyle Date: Wed, 31 Dec 2025 04:26:15 -0800 Subject: [PATCH] Add INSTALL-DASHBOARD.md --- INSTALL-DASHBOARD.md | 88 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 88 insertions(+) create mode 100644 INSTALL-DASHBOARD.md diff --git a/INSTALL-DASHBOARD.md b/INSTALL-DASHBOARD.md new file mode 100644 index 0000000..f7fa471 --- /dev/null +++ b/INSTALL-DASHBOARD.md @@ -0,0 +1,88 @@ +# Installing the Kiosk Dashboard + +## Step 1: Copy Dashboard YAML + +1. Open Home Assistant +2. Go to **Settings > Dashboards** +3. Click **+ ADD DASHBOARD** +4. Choose **Start with an empty dashboard** +5. Name it: `Kiosk Dashboard` +6. Click the **⋮** (three dots) menu > **Edit Dashboard** +7. Click **⋮** again > **Raw configuration editor** +8. Copy the contents of `dashboard-kiosk-improved.yaml` and paste it +9. Click **SAVE** + +## Step 2: Set Up RSS Feed for Fox News + +### Option A: Using HACS (Recommended) + +1. Install HACS if not already installed +2. Go to HACS > Integrations +3. Search for "RSS Feed" or "Feedparser" +4. Install the integration +5. Restart Home Assistant +6. Add to `configuration.yaml`: + ```yaml + rss_feed_template: + fox_news_breaking: + url: "https://feeds.foxnews.com/foxnews/latest" + scan_interval: 300 + ``` + +### Option B: Manual RSS Feed Setup + +1. Install `feedparser` custom component +2. Add to `configuration.yaml` (see `setup-rss-fox-news.yaml`) +3. Restart Home Assistant + +## Step 3: Enable Auto-Scroll + +### Option A: Install Auto-Scroll Card (Best) + +1. Install via HACS: `auto-scroll-card` +2. Update dashboard YAML to use `type: custom:auto-scroll-card` +3. Configure scroll speed + +### Option B: CSS Injection (Quick) + +Add this to your dashboard's card-mod style or use a custom card: + +```yaml +card_mod: + style: | + ha-card { + animation: scroll 120s linear infinite; + } + @keyframes scroll { + 0% { transform: translateY(0); } + 100% { transform: translateY(-100%); } + } +``` + +### Option C: Browser Console (Temporary) + +Open browser console (F12) and run: +```javascript +setInterval(() => window.scrollBy(0, 1), 50); +``` + +## Step 4: Customize Entities + +Edit the dashboard YAML to: +- Add/remove entities +- Adjust card sizes +- Change colors and fonts +- Add more sections + +## Step 5: Set as Default Dashboard + +1. Go to **Settings > Dashboards** +2. Find "Kiosk Dashboard" +3. Click **⋮** > **Set as default on this device** + +## Troubleshooting + +- **RSS not showing**: Install RSS feed integration first +- **Auto-scroll not working**: Install `auto-scroll-card` or use CSS +- **Cards too small**: Increase font-size in card-mod styles +- **Missing entities**: Check entity IDs match your setup