kyle/ha-kiosk-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dashboard-auto-scroll-js.yaml

Browse Source
This commit is contained in:
kyle
2025-12-31 04:26:31 -08:00
parent aa1435af36
commit 9a2a826200
1 changed files with 203 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
dashboard-auto-scroll-js.yaml Normal file
View File

@@ -0,0 +1,203 @@
title: Kiosk Dashboard
path: dashboard-kiosk
icon: mdi:view-dashboard
panel: false
type: sidebar
views:
- title: Kiosk View
path: default_view
cards:
- type: custom:html-template-card
content: |
<script>
let currentCard = 0;
const cards = document.querySelectorAll('ha-card');
const cardHeight = window.innerHeight;
function scrollToCard(index) {
window.scrollTo({
top: index * cardHeight,
behavior: 'smooth'
});
}
function nextCard() {
currentCard = (currentCard + 1) % cards.length;
scrollToCard(currentCard);
}
// Start auto-scroll after page loads
window.addEventListener('load', () => {
// Make each card full height
cards.forEach(card => {
card.style.minHeight = cardHeight + 'px';
});
// Auto-scroll every 5 seconds
setInterval(nextCard, 5000);
});
</script>
- type: markdown
content: |
# <center>{{ now().strftime('%A, %B %d, %Y') }}</center>
## <center>{{ now().strftime('%I:%M %p') }}</center>
card_mod:
style: |
ha-card {
font-size: 4em !important;
padding: 60px !important;
text-align: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white !important;
min-height: 100vh !important;
}
h1 { font-size: 1.2em !important; margin: 20px 0 !important; }
h2 { font-size: 0.8em !important; margin: 10px 0 !important; }
- type: weather-forecast
entity: weather.forecast_home
name: Current Weather
show_forecast: true
forecast_type: daily
card_mod:
style: |
ha-card {
font-size: 2.5em !important;
padding: 50px !important;
min-height: 100vh !important;
}
.weather-icon { width: 120px !important; height: 120px !important; }
.temp { font-size: 3em !important; }
* { font-size: 1.5em !important; }
- type: entities
title: 🌅 Sun Information
card_mod:
style: |
ha-card {
font-size: 2.5em !important;
padding: 50px !important;
min-height: 100vh !important;
}
.card-content { font-size: 2em !important; }
.entity-row { min-height: 80px !important; padding: 20px 0 !important; }
.entity-row .info { font-size: 1.8em !important; }
.entity-row .secondary { font-size: 1.5em !important; }
entities:
- entity: sun.sun
name: Sun Position
icon: mdi:weather-sunny
- entity: sensor.sun_next_rising
name: Sunrise
icon: mdi:weather-sunset-up
- entity: sensor.sun_next_setting
name: Sunset
icon: mdi:weather-sunset-down
- entity: sensor.sun_next_dawn
name: Dawn
icon: mdi:weather-sunset-up
- entity: sensor.sun_next_dusk
name: Dusk
icon: mdi:weather-sunset-down
- type: entities
title: 🚆 Public Transport
card_mod:
style: |
ha-card {
font-size: 2.5em !important;
padding: 50px !important;
min-height: 100vh !important;
}
.card-content { font-size: 2em !important; }
.entity-row { min-height: 80px !important; padding: 20px 0 !important; }
.entity-row .info { font-size: 1.8em !important; }
.entity-row .secondary { font-size: 1.5em !important; }
entities:
- entity: sensor.roslagsbanan_line_28_to_stockholms_ostra
name: To Stockholm Östra
icon: mdi:train
- entity: sensor.roslagsbanan_line_28_to_akersberga
name: To Åkersberga
icon: mdi:train
- entity: sensor.sl_departure_sensor_9636_bravalavagen
name: SL Departure
icon: mdi:bus
- entity: sensor.next_departure_time
name: Next Departure
icon: mdi:clock-outline
- type: entities
title: 📹 Camera Status
card_mod:
style: |
ha-card {
font-size: 2.5em !important;
padding: 50px !important;
min-height: 100vh !important;
}
.card-content { font-size: 2em !important; }
.entity-row { min-height: 80px !important; padding: 20px 0 !important; }
.entity-row .info { font-size: 1.8em !important; }
.entity-row .secondary { font-size: 1.5em !important; }
entities:
- entity: binary_sensor.backyard_motion
name: Backyard Motion
icon: mdi:motion-sensor
- entity: binary_sensor.frontdoor_motion
name: Front Door Motion
icon: mdi:motion-sensor
- entity: binary_sensor.driveway_motion
name: Driveway Motion
icon: mdi:motion-sensor
- entity: binary_sensor.roofcam_motion
name: Roof Camera Motion
icon: mdi:motion-sensor
- type: entities
title: 👥 Occupancy Summary
card_mod:
style: |
ha-card {
font-size: 2.5em !important;
padding: 50px !important;
min-height: 100vh !important;
}
.card-content { font-size: 2em !important; }
.entity-row { min-height: 80px !important; padding: 20px 0 !important; }
.entity-row .info { font-size: 1.8em !important; }
.entity-row .secondary { font-size: 1.5em !important; }
entities:
- entity: sensor.backyard_person_count
name: Backyard People
icon: mdi:account-group
- entity: sensor.frontdoor_person_count
name: Front Door People
icon: mdi:account-group
- entity: sensor.driveway_person_count
name: Driveway People
icon: mdi:account-group
- entity: sensor.roofcam_person_count
name: Roof Camera People
icon: mdi:account-group
- type: entities
title: 🌐 Network Status
card_mod:
style: |
ha-card {
font-size: 2.5em !important;
padding: 50px !important;
min-height: 100vh !important;
}
.card-content { font-size: 2em !important; }
.entity-row { min-height: 80px !important; padding: 20px 0 !important; }
.entity-row .info { font-size: 1.8em !important; }
.entity-row .secondary { font-size: 1.5em !important; }
entities:
- entity: sensor.xe75_download_speed
name: Download Speed
icon: mdi:download
- entity: sensor.xe75_upload_speed
name: Upload Speed
icon: mdi:upload
- entity: sensor.external_ip
name: External IP
icon: mdi:ip-network
- entity: binary_sensor.xe75_wan_status
name: WAN Status
icon: mdi:router-wireless