so, da ich ja faul bin, hab ich mir gleich noch eine Installationsanleitung von der Ki schreiben lassen 
echt genial, ich hab noch ein paar Automationen für Benachrichtigungen per Telegram Bot mit erstellt, konnte aber noch nicht alles test, da ich gerade im Hotel sitz und alles über VPN mach. Die Standortbenachrichtigung scheint schonmal zu gehen.
In den einstellungen der MySkoda app und Profil, kannst du den S-PIN änder, damit du das Fahrzeug steuern kannst, habs aber noch nicht getestet, kannst ja mal berichten 
Du kannst auch Einstellen wie oft das Intervall zum aktualisieren ist, da machmal ein paar werte nicht gleich angezeigt werden.
Viel spass damit, ich hoffe es klappt, wir sicher viel Arbeit.
Was es macht:
-
Standort-Nachricht beim Parken mit Maps-Link
-
Stündliche Warnung bei unverriegeltem Auto
-
Kritische Werte-Alarm (Tank, AdBlue, Service)
-
Premium Dashboard Card mit Auto-Foto
-
Apple Watch optimierte Nachrichten
Voraussetzungen:
-
Škoda Connect Integration (HACS)
-
Telegram Bot (@BotFatherBotFatherBotFatherBotFather)
-
Chat-ID (@userinfobot)
-
Custom Cards: button-card, browser-mod
Installation:
1. Telegram Bot (configuration.yaml):
telegram_bot:
- platform: polling
api_key: "DEIN_BOT_TOKEN_VON_BOTFATHER" # Von @BotFather
allowed_chat_ids:
DEINE_CHAT_ID # Von @userinfobot (nur Zahlen)
2. Template Sensor (configuration.yaml):
template:
- sensor:
- name: "Auto Standort JSON"
state: >
{% if state_attr('device_tracker.DEIN_DEVICE_TRACKER', 'display_name') %}
{{ state_attr('device_tracker.DEIN_DEVICE_TRACKER', 'display_name') }}
{% else %}
Unbekannt
{% endif %}
Automationen:
Mitteling: Auto - Stündliche Warnung unverriegelt
alias: "Auto - Stündliche Warnung unverriegelt"
description: "Warnt jede Stunde wenn das Auto nicht verriegelt ist"
triggers:
- platform: time_pattern
minutes: 0
conditions:
- condition: state
entity_id: binary_sensor.DEIN_FAHRZEUG_verriegelt # Anpassen!
state: "on"
- condition: template
value_template: >
{{ (now() - states.binary_sensor.DEIN_FAHRZEUG_verriegelt.last_changed).total_seconds() > 3600 }}
actions:
- service: telegram_bot.send_message
data:
target: DEINE_CHAT_ID # Anpassen!
message: >
{% set location = states('sensor.auto_standort_json') %}
{% set location_short = location.split(',')[0] if location not in ['unknown', 'unavailable', ''] else 'Unbekannt' %}
{% set duration = relative_time(states.binary_sensor.DEIN_FAHRZEUG_verriegelt.last_changed) %}
⚠️ *Auto unverriegelt*
🔓 Seit `{{ duration }}`
📍 {{ location_short }}
🕒 `{{ now().strftime('%H:%M') }}`
parse_mode: 'Markdown'
mode: single
Mitteilung: Auto - Kritische Werte Warnung
alias: "Auto - Kritische Werte Warnung"
description: "Warnt bei kritischen Werten 30s nach Verriegelung"
triggers:
- platform: state
entity_id: binary_sensor.DEIN_FAHRZEUG_verriegelt # Anpassen!
from: "on"
to: "off"
actions:
- delay:
seconds: 30
- condition: template
value_template: >
{% set tank = states('sensor.DEIN_FAHRZEUG_tank') | float(100) %}
{% set reichweite = states('sensor.DEIN_FAHRZEUG_reichweite') | float(500) %}
{% set adblue = states('sensor.DEIN_FAHRZEUG_adblue') | float(2000) %}
{{ tank < 25 or reichweite < 200 or adblue < 1000 }}
- service: telegram_bot.send_message
data:
target: DEINE_CHAT_ID # Anpassen!
message: >
{% set tank = states('sensor.DEIN_FAHRZEUG_tank') | float(0) %}
{% set reichweite = states('sensor.DEIN_FAHRZEUG_reichweite') | float(0) %}
{% set adblue = states('sensor.DEIN_FAHRZEUG_adblue') | float(0) %}
{% set warnings = [] %}
{% if tank < 25 %}
{% set warnings = warnings + [['⛽', 'Tank', tank|round|string + '%']] %}
{% endif %}
{% if reichweite < 200 %}
{% set warnings = warnings + [['🛣️', 'Reichweite', reichweite|round|string + 'km']] %}
{% endif %}
{% if adblue < 1000 %}
{% set warnings = warnings + [['💧', 'AdBlue', adblue|round|string + 'km']] %}
{% endif %}
{% if warnings|length > 0 %}
🚨 *Auto Warnungen*
{% for warning in warnings -%}
{{ warning[0] }} {{ warning[1] }}: `{{ warning[2] }}`
{% endfor -%}
📍 {{ states('sensor.auto_standort_json').split(',')[0] if states('sensor.auto_standort_json') not in ['unknown', 'unavailable', ''] else 'Geparkt' }}
🕒 `{{ now().strftime('%H:%M') }}`
{% endif %}
parse_mode: 'Markdown'
mode: single
Mitteilung: Auto - Standort beim Parken
alias: "Auto - Standort beim Parken"
description: "Sendet Standort beim Verriegeln"
triggers:
- platform: state
entity_id: binary_sensor.DEIN_FAHRZEUG_verriegelt # Anpassen!
from: "on"
to: "off"
actions:
- delay:
seconds: 5
- service: telegram_bot.send_message
data:
target: DEINE_CHAT_ID # Anpassen!
message: >
🚗 *Auto geparkt*
📍 {{ states('sensor.auto_standort_json').split(',')[0] if states('sensor.auto_standort_json') not in ['unknown', 'unavailable', ''] else 'Unbekannt' }}
🕒 `{{ now().strftime('%H:%M') }}`
[🗺️ Maps](https://maps.google.com/maps?q={{ state_attr('device_tracker.DEIN_DEVICE_TRACKER', 'latitude') }},{{ state_attr('device_tracker.DEIN_DEVICE_TRACKER', 'longitude') }})
parse_mode: 'Markdown'
mode: single
Dashboard Card:
type: vertical-stack
title: MySkoda
cards:
- type: custom:button-card
entity: |
[[[
// ===== KONFIGURATION - HIER DEINE ENTITIES EINTRAGEN =====
const CONFIG = {
// Fahrzeug Info
device_tracker: 'device_tracker.skoda_octavia_combi_standort',
car_name: 'Škoda Octavia RS',
car_image: 'image.skoda_octavia_combi_hauptansicht_des_fahrzeugs',
// Sensoren
range: 'sensor.skoda_octavia_combi_reichweite',
fuel: 'sensor.skoda_octavia_combi_fullstand_tank',
mileage: 'sensor.skoda_octavia_combi_kilometerstand',
temperature: 'sensor.skoda_octavia_combi_aussentemperatur',
last_update: 'sensor.skoda_octavia_combi_letzte_aktualisierung',
adblue: 'sensor.skoda_octavia_combi_adblue_reichweite',
// Service
inspection_days: 'sensor.skoda_octavia_combi_nachste_inspektion',
inspection_km: 'sensor.skoda_octavia_combi_nachste_inspektion_2',
oil_service_days: 'sensor.skoda_octavia_combi_ol_service',
oil_service_km: 'sensor.skoda_octavia_combi_ol_service_2',
// Binary Sensoren
locked: 'binary_sensor.skoda_octavia_combi_fahrzeug_verriegelt',
windows: 'binary_sensor.skoda_octavia_combi_fenster',
parking_light: 'binary_sensor.skoda_octavia_combi_parklicht',
// Türen
trunk: 'binary_sensor.skoda_octavia_combi_kofferraum',
hood: 'binary_sensor.skoda_octavia_combi_motorhaube',
door_fl: 'binary_sensor.skoda_octavia_combi_ture_vorne_links',
door_fr: 'binary_sensor.skoda_octavia_combi_ture_vorne_rechts',
door_rl: 'binary_sensor.skoda_octavia_combi_ture_hinten_links',
door_rr: 'binary_sensor.skoda_octavia_combi_ture_hinten_rechts',
// Fenster
window_fl: 'binary_sensor.skoda_octavia_combi_fenster_vorne_links',
window_fr: 'binary_sensor.skoda_octavia_combi_fenster_vorne_rechts',
window_rl: 'binary_sensor.skoda_octavia_combi_fenster_hinten_links',
window_rr: 'binary_sensor.skoda_octavia_combi_fenster_hinten_rechts',
sunroof: 'binary_sensor.skoda_octavia_combi_schiebedach',
// Aktionen
doors_lock: 'lock.skoda_octavia_combi_turen',
heater: 'climate.skoda_octavia_combi_zuheizer',
flash_lights: 'button.skoda_octavia_combi_blinken',
honk_flash: 'button.skoda_octavia_combi_hupen_und_blinken',
// Standort
location_sensor: 'sensor.auto_standort_json'
};
// Variable für andere Teile des Codes verfügbar machen
window.autoConfig = CONFIG;
return CONFIG.device_tracker;
]]]
name: |
[[[
return window.autoConfig ? window.autoConfig.car_name : 'Škoda Octavia RS';
]]]
show_state: false
show_icon: false
show_name: true
tap_action:
action: call-service
service: browser_mod.popup
service_data:
title: 🔧 Entity Konfiguration
content:
type: vertical-stack
cards:
- type: markdown
content: >
## 🚗 Auto Dashboard - Entity Referenz
**So konfigurierst du deine Entities:**
1. Dashboard bearbeiten
2. Im Code die CONFIG-Variable finden (Zeile ~12)
3. Deine Entity-Namen eintragen
4. Speichern
---
### 📍 **Fahrzeug Grunddaten**
**Zeile ~14:** `device_tracker: 'dein_device_tracker'`
- GPS-Position des Fahrzeugs
- Beispiel: `device_tracker.mein_auto_standort`
**Zeile ~15:** `car_name: 'Dein Autoname'`
- Anzeigename auf dem Dashboard
- Beispiel: `'BMW X3'` oder `'Audi A4'`
**Zeile ~16:** `car_image: 'dein_image_entity'`
- Fahrzeugbild Entity
- Beispiel: `image.mein_auto_bild`
---
### ⛽ **Sensor Daten (Zeile ~18-24)**
**Range:** `range: 'sensor.dein_reichweite_sensor'`
- Verbleibende Reichweite in km
**Fuel:** `fuel: 'sensor.dein_tank_sensor'`
- Tankfüllung in % oder Liter
**Mileage:** `mileage: 'sensor.dein_km_sensor'`
- Kilometerstand des Fahrzeugs
**Temperature:** `temperature: 'sensor.dein_temp_sensor'`
- Außentemperatur
**Last Update:** `last_update: 'sensor.dein_update_sensor'`
- Zeitpunkt der letzten Datenaktualisierung
**AdBlue:** `adblue: 'sensor.dein_adblue_sensor'`
- AdBlue Reichweite (falls vorhanden)
---
### 🔧 **Service Daten (Zeile ~26-30)**
**Inspektion Tage:** `inspection_days: 'sensor.inspektion_tage'`
- Tage bis zur nächsten Inspektion
**Inspektion KM:** `inspection_km: 'sensor.inspektion_km'`
- Kilometer bis zur nächsten Inspektion
**Öl-Service Tage:** `oil_service_days: 'sensor.oel_tage'`
- Tage bis zum nächsten Ölwechsel
**Öl-Service KM:** `oil_service_km: 'sensor.oel_km'`
- Kilometer bis zum nächsten Ölwechsel
---
### 🔒 **Status Sensoren (Zeile ~32-35)**
**Locked:** `locked: 'binary_sensor.fahrzeug_verriegelt'`
- Verriegelungsstatus (on = unverriegelt, off = verriegelt)
**Windows:** `windows: 'binary_sensor.fenster_status'`
- Gesamtstatus aller Fenster
**Parking Light:** `parking_light: 'binary_sensor.parklicht'`
- Status des Parklichts
---
### 🚪 **Türen Sensoren (Zeile ~37-43)**
**Kofferraum:** `trunk: 'binary_sensor.kofferraum'`
**Motorhaube:** `hood: 'binary_sensor.motorhaube'`
**Tür vorne links:** `door_fl: 'binary_sensor.tuer_vl'`
**Tür vorne rechts:** `door_fr: 'binary_sensor.tuer_vr'`
**Tür hinten links:** `door_rl: 'binary_sensor.tuer_hl'`
**Tür hinten rechts:** `door_rr: 'binary_sensor.tuer_hr'`
*Hinweis: on = offen, off = geschlossen*
---
### 🪟 **Fenster Sensoren (Zeile ~45-50)**
**Fenster vorne links:** `window_fl: 'binary_sensor.fenster_vl'`
**Fenster vorne rechts:** `window_fr:
'binary_sensor.fenster_vr'`
**Fenster hinten links:** `window_rl:
'binary_sensor.fenster_hl'`
**Fenster hinten rechts:** `window_rr:
'binary_sensor.fenster_hr'`
**Schiebedach:** `sunroof: 'binary_sensor.schiebedach'`
*Hinweis: on = offen, off = geschlossen*
---
### 🎯 **Aktionen (Zeile ~52-56)**
**Türschloss:** `doors_lock: 'lock.tueren'`
- Entity zum Ver-/Entriegeln
**Heizung:** `heater: 'climate.standheizung'`
- Standheizung/Klimaanlage
**Blinken:** `flash_lights: 'button.blinken'`
- Button zum Blinken aktivieren
**Hupen + Blinken:** `honk_flash: 'button.hupen_blinken'`
- Button für Hupe und Blinker
---
### 📍 **Standort (Zeile ~58)**
**Location Sensor:** `location_sensor: 'sensor.standort_json'`
- Sensor mit Adressdaten (optional)
- Für Stadtanzeige im Standort-Widget
---
## 💡 **Tipps:**
**Entity finden:**
- Entwicklertools → Zustände
- Nach deinem Auto-Namen suchen
- Entity-ID kopieren
**Testen:**
- Eine Entity nach der anderen ändern
- Dashboard speichern und prüfen
- Bei Fehlern: Original-Entity wiederherstellen
**Verschiedene Auto-Marken:**
- BMW: `bmw_connected_drive.`
- Mercedes: `mbapi2020.`
- Audi: `audiconnect.`
- Volkswagen: `volkswagencarnet.`
- MyŠkoda: `myskoda.`
---
🎯 **Nach der Konfiguration sollten alle Widgets deine
Auto-Daten anzeigen!**
- type: entities
title: "📋 Beispiel: MyŠkoda Entities"
entities:
- entity: device_tracker.skoda_octavia_combi_standort
name: GPS Tracker
- entity: sensor.skoda_octavia_combi_reichweite
name: Reichweite Sensor
- entity: sensor.skoda_octavia_combi_fullstand_tank
name: Tank Sensor
- entity: binary_sensor.skoda_octavia_combi_fahrzeug_verriegelt
name: Verriegelung
- entity: lock.skoda_octavia_combi_turen
name: Türschloss
- entity: button.skoda_octavia_combi_blinken
name: Blinken Button
show_header_toggle: false
styles:
card:
- background-image: |
[[[
const imageEntity = window.autoConfig ? window.autoConfig.car_image : 'image.skoda_octavia_combi_hauptansicht_des_fahrzeugs';
return 'url(' + states[imageEntity].attributes.entity_picture + ')';
]]]
- background-size: cover
- background-position: center
- height: 180px
- border-radius: 20px
- box-shadow: 0 4px 20px rgba(0,0,0,0.3)
- position: relative
- overflow: hidden
name:
- position: absolute
- top: 20px
- left: 20px
- color: white
- font-size: 20px
- font-weight: bold
- text-shadow: 0 2px 4px rgba(0,0,0,0.7)
- type: horizontal-stack
cards:
- type: custom:button-card
entity: |
[[[
return window.autoConfig ? window.autoConfig.range : 'sensor.skoda_octavia_combi_reichweite';
]]]
show_name: false
show_state: false
show_icon: false
styles:
card:
- background: rgba(28, 28, 28, 0.9)
- border: 1px solid rgba(255, 255, 255, 0.1)
- border-radius: 10px
- height: 56px
- padding: 12px
- display: flex
- align-items: center
custom_fields:
icon: |
[[[
return '<ha-icon icon="mdi:gas-station" style="color: #4F729A; width: 20px; height: 20px; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);"></ha-icon>';
]]]
content: |
[[[
const value = parseFloat(entity.state);
let textColor = '#4F729A';
if (value >= 400) {
textColor = '#81C784';
} else if (value >= 300) {
textColor = '#FFD54F';
} else if (value >= 200) {
textColor = '#FFB74D';
} else {
textColor = '#EF9A9A';
}
return `
<div style="display: flex; flex-direction: column; justify-content: center; flex: 1; margin-left: 20px; text-align: right;">
<div style="font-size: 12px; color: #9CA3AF; font-weight: 500; line-height: 1.2; margin-bottom: 2px; text-align: right;">Reichweite</div>
<div style="font-size: 11px; font-weight: bold; color: ${textColor}; line-height: 1.2; text-align: right;">${Math.round(value)} km</div>
</div>
`;
]]]
- type: custom:button-card
entity: |
[[[
return window.autoConfig ? window.autoConfig.fuel : 'sensor.skoda_octavia_combi_fullstand_tank';
]]]
show_name: false
show_state: false
show_icon: false
styles:
card:
- background: rgba(28, 28, 28, 0.9)
- border: 1px solid rgba(255, 255, 255, 0.1)
- border-radius: 10px
- height: 56px
- padding: 12px
- display: flex
- align-items: center
custom_fields:
icon: |
[[[
return '<ha-icon icon="mdi:fuel" style="color: #4F729A; width: 20px; height: 20px; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);"></ha-icon>';
]]]
content: |
[[[
const value = parseFloat(entity.state);
let displayValue = entity.state;
let textColor = '#4F729A';
if (!entity.state.includes('%') && !entity.state.includes('unavailable') && !entity.state.includes('unknown')) {
if (!isNaN(value)) {
displayValue = `${value}%`;
}
}
if (value >= 75) {
textColor = '#81C784';
} else if (value >= 50) {
textColor = '#FFD54F';
} else if (value >= 25) {
textColor = '#FFB74D';
} else {
textColor = '#EF9A9A';
}
return `
<div style="display: flex; flex-direction: column; justify-content: center; flex: 1; margin-left: 20px; text-align: right;">
<div style="font-size: 12px; color: #9CA3AF; font-weight: 500; line-height: 1.2; margin-bottom: 2px; text-align: right;">Tank</div>
<div style="font-size: 11px; font-weight: bold; color: ${textColor}; line-height: 1.2; text-align: right;">${displayValue}</div>
</div>
`;
]]]
- type: custom:button-card
entity: |
[[[
return window.autoConfig ? window.autoConfig.mileage : 'sensor.skoda_octavia_combi_kilometerstand';
]]]
show_name: false
show_state: false
show_icon: false
styles:
card:
- background: rgba(28, 28, 28, 0.9)
- border: 1px solid rgba(255, 255, 255, 0.1)
- border-radius: 10px
- height: 56px
- padding: 12px
- display: flex
- align-items: center
custom_fields:
icon: |
[[[
return '<ha-icon icon="mdi:counter" style="color: #4F729A; width: 20px; height: 20px; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);"></ha-icon>';
]]]
content: |
[[[
return `
<div style="display: flex; flex-direction: column; justify-content: center; flex: 1; margin-left: 20px; text-align: right;">
<div style="font-size: 12px; color: #9CA3AF; font-weight: 500; line-height: 1.2; margin-bottom: 2px; text-align: right;">Kilometer</div>
<div style="font-size: 11px; font-weight: bold; color: #4F729A; line-height: 1.2; text-align: right;">${Math.round(parseFloat(entity.state)).toLocaleString()} km</div>
</div>
`;
]]]
- type: horizontal-stack
cards:
- type: custom:button-card
entity: |
[[[
return window.autoConfig ? window.autoConfig.locked : 'binary_sensor.skoda_octavia_combi_fahrzeug_verriegelt';
]]]
show_name: false
show_state: false
show_icon: false
tap_action:
action: call-service
service: browser_mod.popup
service_data:
title: Fahrzeug Verriegelung
content:
type: vertical-stack
cards:
- type: markdown
content: |
[[[
const lockedEntity = window.autoConfig ? window.autoConfig.locked : 'binary_sensor.skoda_octavia_combi_fahrzeug_verriegelt';
const isLocked = states[lockedEntity].state === 'off';
if (isLocked) {
return `
## Aktueller Status:
<div style="text-align: center; padding: 20px;">
<ha-icon icon="mdi:lock" style="font-size: 48px; color: #81C784;"></ha-icon>
<h2 style="color: #81C784; margin: 10px 0;">Verriegelt</h2>
<p style="color: #9CA3AF;">Das Fahrzeug ist sicher verriegelt</p>
</div>
`;
} else {
return `
## Aktueller Status:
<div style="text-align: center; padding: 20px;">
<ha-icon icon="mdi:lock-open" style="font-size: 48px; color: #EF9A9A;"></ha-icon>
<h2 style="color: #EF9A9A; margin: 10px 0;">Unverriegelt</h2>
<p style="color: #9CA3AF;">Das Fahrzeug ist geöffnet</p>
</div>
`;
}
]]]
- type: horizontal-stack
cards:
- type: custom:button-card
entity: |
[[[
return window.autoConfig ? window.autoConfig.doors_lock : 'lock.skoda_octavia_combi_turen';
]]]
show_state: false
show_icon: false
show_name: false
tap_action:
action: call-service
service: lock.lock
service_data:
entity_id: |
[[[
return window.autoConfig ? window.autoConfig.doors_lock : 'lock.skoda_octavia_combi_turen';
]]]
styles:
card:
- background: >-
linear-gradient(145deg, rgba(40, 40, 40, 0.95),
rgba(20, 20, 20, 0.95))
- border: "2px solid #81C784"
- border-radius: 15px
- height: 90px
- box-shadow: >-
0 8px 16px rgba(0,0,0,0.3), inset 0 1px 0
rgba(255,255,255,0.1)
- transition: all 0.2s ease
- cursor: pointer
- position: relative
custom_fields:
content: |
[[[
return `
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px;">
<ha-icon icon="mdi:lock" style="color: rgba(129, 199, 132, 0.7); width: 20px; height: 20px;"></ha-icon>
<span style="font-size: 14px; font-weight: bold; color: white;">Verriegeln</span>
</div>
`;
]]]
- type: custom:button-card
entity: |
[[[
return window.autoConfig ? window.autoConfig.doors_lock : 'lock.skoda_octavia_combi_turen';
]]]
show_state: false
show_icon: false
show_name: false
tap_action:
action: call-service
service: lock.unlock
service_data:
entity_id: |
[[[
return window.autoConfig ? window.autoConfig.doors_lock : 'lock.skoda_octavia_combi_turen';
]]]
styles:
card:
- background: >-
linear-gradient(145deg, rgba(40, 40, 40, 0.95),
rgba(20, 20, 20, 0.95))
- border: "2px solid #EF9A9A"
- border-radius: 15px
- height: 90px
- box-shadow: >-
0 8px 16px rgba(0,0,0,0.3), inset 0 1px 0
rgba(255,255,255,0.1)
- transition: all 0.2s ease
- cursor: pointer
- position: relative
custom_fields:
content: |
[[[
return `
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px;">
<ha-icon icon="mdi:lock-open" style="color: rgba(239, 154, 154, 0.7); width: 20px; height: 20px;"></ha-icon>
<span style="font-size: 14px; font-weight: bold; color: white;">Entriegeln</span>
</div>
`;
]]]
styles:
card:
- background: rgba(28, 28, 28, 0.9)
- border: 1px solid rgba(255, 255, 255, 0.1)
- border-radius: 10px
- height: 56px
- padding: 12px
- display: flex
- align-items: center
custom_fields:
icon: |
[[[
const icon = entity.state === 'off' ? 'mdi:lock' : 'mdi:lock-open';
return `<ha-icon icon="${icon}" style="color: #4F729A; width: 20px; height: 20px; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);"></ha-icon>`;
]]]
content: |
[[[
const text = entity.state === 'off' ? 'Verriegelt' : 'Unverriegelt';
const textColor = entity.state === 'off' ? '#81C784' : '#EF9A9A';
return `
<div style="display: flex; flex-direction: column; justify-content: center; flex: 1; margin-left: 20px; text-align: right;">
<div style="font-size: 12px; color: #9CA3AF; font-weight: 500; line-height: 1.2; margin-bottom: 2px; text-align: right;">Fahrzeug</div>
<div style="font-size: 11px; font-weight: bold; color: ${textColor}; line-height: 1.2; text-align: right;">${text}</div>
</div>
`;
]]]
- type: custom:button-card
name: Türen
show_name: false
show_state: false
show_icon: false
tap_action:
action: call-service
service: browser_mod.popup
service_data:
title: Türen Status
content:
type: entities
entities: |
[[[
const config = window.autoConfig || {};
return [
{
entity: config.trunk || 'binary_sensor.skoda_octavia_combi_kofferraum',
name: 'Kofferraum',
icon: 'mdi:car-back'
},
{
entity: config.hood || 'binary_sensor.skoda_octavia_combi_motorhaube',
name: 'Motorhaube',
icon: 'mdi:car-estate'
},
{
entity: config.door_fl || 'binary_sensor.skoda_octavia_combi_ture_vorne_links',
name: 'Tür vorne links',
icon: 'mdi:car-door'
},
{
entity: config.door_fr || 'binary_sensor.skoda_octavia_combi_ture_vorne_rechts',
name: 'Tür vorne rechts',
icon: 'mdi:car-door'
},
{
entity: config.door_rl || 'binary_sensor.skoda_octavia_combi_ture_hinten_links',
name: 'Tür hinten links',
icon: 'mdi:car-door'
},
{
entity: config.door_rr || 'binary_sensor.skoda_octavia_combi_ture_hinten_rechts',
name: 'Tür hinten rechts',
icon: 'mdi:car-door'
}
];
]]]
show_header_toggle: false
state_color: true
card_mod:
style: |
ha-card {
--state-binary_sensor-on-color: #EF9A9A;
--state-binary_sensor-off-color: #81C784;
}
styles:
card:
- background: rgba(28, 28, 28, 0.9)
- border: 1px solid rgba(255, 255, 255, 0.1)
- border-radius: 10px
- height: 56px
- padding: 12px
- display: flex
- align-items: center
custom_fields:
icon: |
[[[
const config = window.autoConfig || {};
const doors = [
config.trunk || 'binary_sensor.skoda_octavia_combi_kofferraum',
config.hood || 'binary_sensor.skoda_octavia_combi_motorhaube',
config.door_fl || 'binary_sensor.skoda_octavia_combi_ture_vorne_links',
config.door_fr || 'binary_sensor.skoda_octavia_combi_ture_vorne_rechts',
config.door_rl || 'binary_sensor.skoda_octavia_combi_ture_hinten_links',
config.door_rr || 'binary_sensor.skoda_octavia_combi_ture_hinten_rechts'
];
let anyOpen = false;
doors.forEach(door => {
if (states[door] && states[door].state === 'on') {
anyOpen = true;
}
});
const icon = anyOpen ? 'mdi:car-door' : 'mdi:car-door-lock';
return `<ha-icon icon="${icon}" style="color: #4F729A; width: 20px; height: 20px; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);"></ha-icon>`;
]]]
content: |
[[[
const config = window.autoConfig || {};
const doors = [
config.trunk || 'binary_sensor.skoda_octavia_combi_kofferraum',
config.hood || 'binary_sensor.skoda_octavia_combi_motorhaube',
config.door_fl || 'binary_sensor.skoda_octavia_combi_ture_vorne_links',
config.door_fr || 'binary_sensor.skoda_octavia_combi_ture_vorne_rechts',
config.door_rl || 'binary_sensor.skoda_octavia_combi_ture_hinten_links',
config.door_rr || 'binary_sensor.skoda_octavia_combi_ture_hinten_rechts'
];
let anyOpen = false;
doors.forEach(door => {
if (states[door] && states[door].state === 'on') {
anyOpen = true;
}
});
const text = anyOpen ? 'Geöffnet' : 'Geschlossen';
const textColor = anyOpen ? '#EF9A9A' : '#81C784';
return `
<div style="display: flex; flex-direction: column; justify-content: center; flex: 1; margin-left: 20px; text-align: right;">
<div style="font-size: 12px; color: #9CA3AF; font-weight: 500; line-height: 1.2; margin-bottom: 2px; text-align: right;">Türen</div>
<div style="font-size: 11px; font-weight: bold; color: ${textColor}; line-height: 1.2; text-align: right;">${text}</div>
</div>
`;
]]]
- type: custom:button-card
entity: |
[[[
return window.autoConfig ? window.autoConfig.windows : 'binary_sensor.skoda_octavia_combi_fenster';
]]]
show_name: false
show_state: false
show_icon: false
tap_action:
action: call-service
service: browser_mod.popup
service_data:
title: Fenster Status
content:
type: entities
entities: |
[[[
const config = window.autoConfig || {};
return [
{
entity: config.window_rl || 'binary_sensor.skoda_octavia_combi_fenster_hinten_links',
name: 'Fenster hinten links',
icon: 'mdi:car-door'
},
{
entity: config.window_rr || 'binary_sensor.skoda_octavia_combi_fenster_hinten_rechts',
name: 'Fenster hinten rechts',
icon: 'mdi:car-door'
},
{
entity: config.window_fl || 'binary_sensor.skoda_octavia_combi_fenster_vorne_links',
name: 'Fenster vorne links',
icon: 'mdi:car-door'
},
{
entity: config.window_fr || 'binary_sensor.skoda_octavia_combi_fenster_vorne_rechts',
name: 'Fenster vorne rechts',
icon: 'mdi:car-door'
},
{
entity: config.sunroof || 'binary_sensor.skoda_octavia_combi_schiebedach',
name: 'Schiebedach',
icon: 'mdi:car-convertible'
}
];
]]]
show_header_toggle: false
state_color: true
card_mod:
style: |
ha-card {
--state-binary_sensor-on-color: #EF9A9A;
--state-binary_sensor-off-color: #81C784;
}
styles:
card:
- background: rgba(28, 28, 28, 0.9)
- border: 1px solid rgba(255, 255, 255, 0.1)
- border-radius: 10px
- height: 56px
- padding: 12px
- display: flex
- align-items: center
custom_fields:
icon: |
[[[
const icon = entity.state === 'off' ? 'mdi:window-closed' : 'mdi:window-open';
return `<ha-icon icon="${icon}" style="color: #4F729A; width: 20px; height: 20px; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);"></ha-icon>`;
]]]
content: |
[[[
const text = entity.state === 'off' ? 'Geschlossen' : 'Geöffnet';
const textColor = entity.state === 'off' ? '#81C784' : '#EF9A9A';
return `
<div style="display: flex; flex-direction: column; justify-content: center; flex: 1; margin-left: 20px; text-align: right;">
<div style="font-size: 12px; color: #9CA3AF; font-weight: 500; line-height: 1.2; margin-bottom: 2px; text-align: right;">Fenster</div>
<div style="font-size: 11px; font-weight: bold; color: ${textColor}; line-height: 1.2; text-align: right;">${text}</div>
</div>
`;
]]]
- type: horizontal-stack
cards:
- type: custom:button-card
entity: |
[[[
return window.autoConfig ? window.autoConfig.temperature : 'sensor.skoda_octavia_combi_aussentemperatur';
]]]
show_name: false
show_state: false
show_icon: false
styles:
card:
- background: rgba(28, 28, 28, 0.9)
- border: 1px solid rgba(255, 255, 255, 0.1)
- border-radius: 10px
- height: 56px
- padding: 12px
- display: flex
- align-items: center
custom_fields:
icon: |
[[[
return '<ha-icon icon="mdi:thermometer" style="color: #4F729A; width: 20px; height: 20px; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);"></ha-icon>';
]]]
content: |
[[[
const value = parseFloat(entity.state);
let displayValue = entity.state;
let textColor = '#4F729A';
if (!entity.state.includes('°C') && !entity.state.includes('unavailable') && !entity.state.includes('unknown')) {
if (!isNaN(value)) {
displayValue = `${value}°C`;
}
}
if (value <= 25) {
textColor = '#81C784';
} else if (value <= 30) {
textColor = '#FFD54F';
} else if (value <= 35) {
textColor = '#FFB74D';
} else {
textColor = '#EF9A9A';
}
return `
<div style="display: flex; flex-direction: column; justify-content: center; flex: 1; margin-left: 20px; text-align: right;">
<div style="font-size: 12px; color: #9CA3AF; font-weight: 500; line-height: 1.2; margin-bottom: 2px; text-align: right;">Temperatur</div>
<div style="font-size: 11px; font-weight: bold; color: ${textColor}; line-height: 1.2; text-align: right;">${displayValue}</div>
</div>
`;
]]]
- type: custom:button-card
entity: |
[[[
return window.autoConfig ? window.autoConfig.heater : 'climate.skoda_octavia_combi_zuheizer';
]]]
show_name: false
show_state: false
show_icon: false
tap_action:
action: more-info
styles:
card:
- background: rgba(28, 28, 28, 0.9)
- border: 1px solid rgba(255, 255, 255, 0.1)
- border-radius: 10px
- height: 56px
- padding: 12px
- display: flex
- align-items: center
custom_fields:
icon: |
[[[
return '<ha-icon icon="mdi:radiator" style="color: #4F729A; width: 20px; height: 20px; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);"></ha-icon>';
]]]
content: |
[[[
let text = 'Aus';
if (entity.state === 'heat') {
text = 'An';
if (entity.attributes.remaining_time || entity.attributes.timer) {
const timer = entity.attributes.remaining_time || entity.attributes.timer;
text += ` (${timer})`;
}
}
return `
<div style="display: flex; flex-direction: column; justify-content: center; flex: 1; margin-left: 20px; text-align: right;">
<div style="font-size: 12px; color: #9CA3AF; font-weight: 500; line-height: 1.2; margin-bottom: 2px; text-align: right;">Heizung</div>
<div style="font-size: 11px; font-weight: bold; color: #4F729A; line-height: 1.2; text-align: right;">${text}</div>
</div>
`;
]]]
- type: custom:button-card
entity: |
[[[
return window.autoConfig ? window.autoConfig.parking_light : 'binary_sensor.skoda_octavia_combi_parklicht';
]]]
show_name: false
show_state: false
show_icon: false
styles:
card:
- background: rgba(28, 28, 28, 0.9)
- border: 1px solid rgba(255, 255, 255, 0.1)
- border-radius: 10px
- height: 56px
- padding: 12px
- display: flex
- align-items: center
custom_fields:
icon: |
[[[
const icon = entity.state === 'on' ? 'mdi:car-light-dimmed' : 'mdi:car-light-dimmed';
return `<ha-icon icon="${icon}" style="color: #4F729A; width: 20px; height: 20px; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);"></ha-icon>`;
]]]
content: |
[[[
const text = entity.state === 'on' ? 'An' : 'Aus';
const textColor = entity.state === 'on' ? '#FFB74D' : '#81C784';
return `
<div style="display: flex; flex-direction: column; justify-content: center; flex: 1; margin-left: 20px; text-align: right;">
<div style="font-size: 12px; color: #9CA3AF; font-weight: 500; line-height: 1.2; margin-bottom: 2px; text-align: right;">Parklicht</div>
<div style="font-size: 11px; font-weight: bold; color: ${textColor}; line-height: 1.2; text-align: right;">${text}</div>
</div>
`;
]]]
- type: horizontal-stack
cards:
- type: custom:button-card
entity: |
[[[
return window.autoConfig ? window.autoConfig.inspection_days : 'sensor.skoda_octavia_combi_nachste_inspektion';
]]]
show_name: false
show_state: false
show_icon: false
styles:
card:
- background: rgba(28, 28, 28, 0.9)
- border: 1px solid rgba(255, 255, 255, 0.1)
- border-radius: 10px
- height: 56px
- padding: 12px
- display: flex
- align-items: center
custom_fields:
icon: |
[[[
return '<ha-icon icon="mdi:calendar-clock" style="color: #4F729A; width: 20px; height: 20px; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);"></ha-icon>';
]]]
content: |
[[[
const value = parseFloat(entity.state);
let textColor = '#4F729A';
if (value >= 75) {
textColor = '#81C784';
} else if (value >= 50) {
textColor = '#FFD54F';
} else if (value >= 25) {
textColor = '#FFB74D';
} else {
textColor = '#EF9A9A';
}
return `
<div style="display: flex; flex-direction: column; justify-content: center; flex: 1; margin-left: 20px; text-align: right;">
<div style="font-size: 12px; color: #9CA3AF; font-weight: 500; line-height: 1.2; margin-bottom: 2px; text-align: right;">Inspektion</div>
<div style="font-size: 11px; font-weight: bold; color: ${textColor}; line-height: 1.2; text-align: right;">${Math.round(value)} Tage</div>
</div>
`;
]]]
- type: custom:button-card
entity: |
[[[
return window.autoConfig ? window.autoConfig.inspection_km : 'sensor.skoda_octavia_combi_nachste_inspektion_2';
]]]
show_name: false
show_state: false
show_icon: false
styles:
card:
- background: rgba(28, 28, 28, 0.9)
- border: 1px solid rgba(255, 255, 255, 0.1)
- border-radius: 10px
- height: 56px
- padding: 12px
- display: flex
- align-items: center
custom_fields:
icon: |
[[[
return '<ha-icon icon="mdi:wrench" style="color: #4F729A; width: 20px; height: 20px; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);"></ha-icon>';
]]]
content: |
[[[
const value = parseFloat(entity.state);
let textColor = '#4F729A';
if (value >= 5000) {
textColor = '#81C784';
} else if (value >= 3000) {
textColor = '#FFD54F';
} else if (value >= 2000) {
textColor = '#FFB74D';
} else {
textColor = '#EF9A9A';
}
return `
<div style="display: flex; flex-direction: column; justify-content: center; flex: 1; margin-left: 20px; text-align: right;">
<div style="font-size: 12px; color: #9CA3AF; font-weight: 500; line-height: 1.2; margin-bottom: 2px; text-align: right;">Inspektion</div>
<div style="font-size: 11px; font-weight: bold; color: ${textColor}; line-height: 1.2; text-align: right;">${Math.round(value).toLocaleString()} km</div>
</div>
`;
]]]
- type: custom:button-card
entity: |
[[[
return window.autoConfig ? window.autoConfig.oil_service_days : 'sensor.skoda_octavia_combi_ol_service';
]]]
show_name: false
show_state: false
show_icon: false
styles:
card:
- background: rgba(28, 28, 28, 0.9)
- border: 1px solid rgba(255, 255, 255, 0.1)
- border-radius: 10px
- height: 56px
- padding: 12px
- display: flex
- align-items: center
custom_fields:
icon: |
[[[
return '<ha-icon icon="mdi:oil" style="color: #4F729A; width: 20px; height: 20px; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);"></ha-icon>';
]]]
content: |
[[[
const value = parseFloat(entity.state);
let textColor = '#4F729A';
if (value >= 75) {
textColor = '#81C784';
} else if (value >= 50) {
textColor = '#FFD54F';
} else if (value >= 25) {
textColor = '#FFB74D';
} else {
textColor = '#EF9A9A';
}
return `
<div style="display: flex; flex-direction: column; justify-content: center; flex: 1; margin-left: 20px; text-align: right;">
<div style="font-size: 12px; color: #9CA3AF; font-weight: 500; line-height: 1.2; margin-bottom: 2px; text-align: right;">Öl-Service</div>
<div style="font-size: 11px; font-weight: bold; color: ${textColor}; line-height: 1.2; text-align: right;">${Math.round(value)} Tage</div>
</div>
`;
]]]
- type: horizontal-stack
cards:
- type: custom:button-card
entity: |
[[[
return window.autoConfig ? window.autoConfig.oil_service_km : 'sensor.skoda_octavia_combi_ol_service_2';
]]]
show_name: false
show_state: false
show_icon: false
styles:
card:
- background: rgba(28, 28, 28, 0.9)
- border: 1px solid rgba(255, 255, 255, 0.1)
- border-radius: 10px
- height: 56px
- padding: 12px
- display: flex
- align-items: center
custom_fields:
icon: |
[[[
return '<ha-icon icon="mdi:car-wrench" style="color: #4F729A; width: 20px; height: 20px; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);"></ha-icon>';
]]]
content: |
[[[
const value = parseFloat(entity.state);
let textColor = '#4F729A';
if (value >= 5000) {
textColor = '#81C784';
} else if (value >= 3000) {
textColor = '#FFD54F';
} else if (value >= 2000) {
textColor = '#FFB74D';
} else {
textColor = '#EF9A9A';
}
return `
<div style="display: flex; flex-direction: column; justify-content: center; flex: 1; margin-left: 20px; text-align: right;">
<div style="font-size: 12px; color: #9CA3AF; font-weight: 500; line-height: 1.2; margin-bottom: 2px; text-align: right;">Öl-Service</div>
<div style="font-size: 11px; font-weight: bold; color: ${textColor}; line-height: 1.2; text-align: right;">${Math.round(value).toLocaleString()} km</div>
</div>
`;
]]]
- type: custom:button-card
entity: |
[[[
return window.autoConfig ? window.autoConfig.adblue : 'sensor.skoda_octavia_combi_adblue_reichweite';
]]]
show_name: false
show_state: false
show_icon: false
styles:
card:
- background: rgba(28, 28, 28, 0.9)
- border: 1px solid rgba(255, 255, 255, 0.1)
- border-radius: 10px
- height: 56px
- padding: 12px
- display: flex
- align-items: center
custom_fields:
icon: |
[[[
return '<ha-icon icon="mdi:car-coolant-level" style="color: #4F729A; width: 20px; height: 20px; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);"></ha-icon>';
]]]
content: |
[[[
const value = parseFloat(entity.state);
let textColor = '#4F729A';
if (value >= 2000) {
textColor = '#81C784';
} else if (value >= 1500) {
textColor = '#FFD54F';
} else if (value >= 1000) {
textColor = '#FFB74D';
} else {
textColor = '#EF9A9A';
}
return `
<div style="display: flex; flex-direction: column; justify-content: center; flex: 1; margin-left: 20px; text-align: right;">
<div style="font-size: 12px; color: #9CA3AF; font-weight: 500; line-height: 1.2; margin-bottom: 2px; text-align: right;">AdBlue</div>
<div style="font-size: 11px; font-weight: bold; color: ${textColor}; line-height: 1.2; text-align: right;">${Math.round(value)} km</div>
</div>
`;
]]]
- type: custom:button-card
entity: |
[[[
return window.autoConfig ? window.autoConfig.last_update : 'sensor.skoda_octavia_combi_letzte_aktualisierung';
]]]
show_name: false
show_state: false
show_icon: false
styles:
card:
- background: rgba(28, 28, 28, 0.9)
- border: 1px solid rgba(255, 255, 255, 0.1)
- border-radius: 10px
- height: 56px
- padding: 12px
- display: flex
- align-items: center
custom_fields:
icon: |
[[[
return '<ha-icon icon="mdi:update" style="color: #4F729A; width: 20px; height: 20px; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);"></ha-icon>';
]]]
content: |
[[[
let displayTime = entity.state;
if (entity.state && entity.state !== 'unavailable' && entity.state !== 'unknown') {
const date = new Date(entity.state);
if (!isNaN(date.getTime())) {
displayTime = date.toLocaleTimeString('de-DE', {
hour: '2-digit',
minute: '2-digit'
});
}
}
return `
<div style="display: flex; flex-direction: column; justify-content: center; flex: 1; margin-left: 20px; text-align: right;">
<div style="font-size: 12px; color: #9CA3AF; font-weight: 500; line-height: 1.2; margin-bottom: 2px; text-align: right;">Update</div>
<div style="font-size: 11px; font-weight: bold; color: #4F729A; line-height: 1.2; text-align: right;">${displayTime}</div>
</div>
`;
]]]
- type: horizontal-stack
cards:
- type: custom:button-card
entity: |
[[[
return window.autoConfig ? window.autoConfig.flash_lights : 'button.skoda_octavia_combi_blinken';
]]]
show_name: false
show_state: false
show_icon: false
tap_action:
action: call-service
service: browser_mod.popup
service_data:
title: Blinken
content:
type: vertical-stack
cards:
- type: custom:button-card
entity: |
[[[
return window.autoConfig ? window.autoConfig.flash_lights : 'button.skoda_octavia_combi_blinken';
]]]
show_state: false
show_icon: false
show_name: false
tap_action:
action: call-service
service: button.press
service_data:
entity_id: |
[[[
return window.autoConfig ? window.autoConfig.flash_lights : 'button.skoda_octavia_combi_blinken';
]]]
styles:
card:
- background: >-
linear-gradient(145deg, rgba(40, 40, 40, 0.95),
rgba(20, 20, 20, 0.95))
- border: "2px solid #4F729A"
- border-radius: 15px
- height: 90px
- box-shadow: >-
0 8px 16px rgba(0,0,0,0.3), inset 0 1px 0
rgba(255,255,255,0.1)
- transition: all 0.2s ease
- cursor: pointer
- position: relative
custom_fields:
content: |
[[[
return `
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px;">
<ha-icon icon="mdi:car-light-alert" style="color: rgba(79, 114, 154, 0.7); width: 20px; height: 20px;"></ha-icon>
<span style="font-size: 14px; font-weight: bold; color: white;">Blinken aktivieren</span>
</div>
`;
]]]
styles:
card:
- background: rgba(28, 28, 28, 0.9)
- border: 1px solid rgba(255, 255, 255, 0.1)
- border-radius: 10px
- height: 56px
- padding: 12px
- display: flex
- align-items: center
custom_fields:
icon: |
[[[
return '<ha-icon icon="mdi:car-light-alert" style="color: #4F729A; width: 20px; height: 20px; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);"></ha-icon>';
]]]
content: |
[[[
return `
<div style="display: flex; flex-direction: column; justify-content: center; flex: 1; margin-left: 20px; text-align: right;">
<div style="font-size: 12px; color: #9CA3AF; font-weight: 500; line-height: 1.2; margin-bottom: 2px; text-align: right;">Blinken</div>
<div style="font-size: 11px; font-weight: bold; color: #4F729A; line-height: 1.2; text-align: right;">Aktivieren</div>
</div>
`;
]]]
- type: custom:button-card
name: Blinken/Hupen
show_name: false
show_state: false
show_icon: false
tap_action:
action: call-service
service: browser_mod.popup
service_data:
title: Parkposition suchen
content:
type: vertical-stack
cards:
- type: custom:button-card
entity: |
[[[
return window.autoConfig ? window.autoConfig.honk_flash : 'button.skoda_octavia_combi_hupen_und_blinken';
]]]
show_state: false
show_icon: false
show_name: false
tap_action:
action: call-service
service: button.press
service_data:
entity_id: |
[[[
return window.autoConfig ? window.autoConfig.honk_flash : 'button.skoda_octavia_combi_hupen_und_blinken';
]]]
styles:
card:
- background: >-
linear-gradient(145deg, rgba(40, 40, 40, 0.95),
rgba(20, 20, 20, 0.95))
- border: "2px solid #4F729A"
- border-radius: 15px
- height: 90px
- box-shadow: >-
0 8px 16px rgba(0,0,0,0.3), inset 0 1px 0
rgba(255,255,255,0.1)
- transition: all 0.2s ease
- cursor: pointer
- position: relative
custom_fields:
content: |
[[[
return `
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px;">
<ha-icon icon="mdi:bullhorn" style="color: rgba(79, 114, 154, 0.7); width: 20px; height: 20px;"></ha-icon>
<span style="font-size: 14px; font-weight: bold; color: white;">Blinken und Hupen</span>
</div>
`;
]]]
styles:
card:
- background: rgba(28, 28, 28, 0.9)
- border: 1px solid rgba(255, 255, 255, 0.1)
- border-radius: 10px
- height: 56px
- padding: 12px
- display: flex
- align-items: center
custom_fields:
icon: |
[[[
return '<ha-icon icon="mdi:bullhorn" style="color: #4F729A; width: 20px; height: 20px; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);"></ha-icon>';
]]]
content: |
[[[
return `
<div style="display: flex; flex-direction: column; justify-content: center; flex: 1; margin-left: 20px; text-align: right;">
<div style="font-size: 12px; color: #9CA3AF; font-weight: 500; line-height: 1.2; margin-bottom: 1px; text-align: right;">Blinken</div>
<div style="font-size: 12px; color: #9CA3AF; font-weight: 500; line-height: 1.2; text-align: right;">Hupen</div>
</div>
`;
]]]
- type: custom:button-card
entity: |
[[[
return window.autoConfig ? window.autoConfig.device_tracker : 'device_tracker.skoda_octavia_combi_standort';
]]]
show_name: false
show_state: false
show_icon: false
tap_action:
action: call-service
service: browser_mod.popup
service_data:
title: Fahrzeug Standort
content:
type: vertical-stack
cards:
- type: map
entities: |
[[[
const tracker = window.autoConfig ? window.autoConfig.device_tracker : 'device_tracker.skoda_octavia_combi_standort';
return [{ entity: tracker }];
]]]
hours_to_show: 0
default_zoom: 15
- type: markdown
content: |
[[[
const locationSensor = window.autoConfig ? window.autoConfig.location_sensor : 'sensor.auto_standort_json';
const tracker = window.autoConfig ? window.autoConfig.device_tracker : 'device_tracker.skoda_octavia_combi_standort';
let addressText = 'Keine Adresse verfügbar';
if (states[locationSensor] && states[locationSensor].state !== 'unknown' && states[locationSensor].state !== 'unavailable') {
addressText = states[locationSensor].state;
}
let coordsText = 'Keine Koordinaten verfügbar';
if (states[tracker] && states[tracker].attributes.latitude && states[tracker].attributes.longitude) {
const lat = parseFloat(states[tracker].attributes.latitude).toFixed(6);
const lon = parseFloat(states[tracker].attributes.longitude).toFixed(6);
coordsText = `${lat}, ${lon}`;
}
let parkTimeText = 'Unbekannt';
if (states[tracker] && states[tracker].attributes.last_changed) {
const lastChanged = new Date(states[tracker].attributes.last_changed);
const now = new Date();
const diffMinutes = Math.floor((now - lastChanged) / (1000 * 60));
if (diffMinutes < 60) {
parkTimeText = `Seit ${diffMinutes} Minuten`;
} else if (diffMinutes < 1440) {
const hours = Math.floor(diffMinutes / 60);
parkTimeText = `Seit ${hours} Stunden`;
} else {
const days = Math.floor(diffMinutes / 1440);
parkTimeText = `Seit ${days} Tagen`;
}
}
return `
**Vollständige Adresse:**
${addressText}
**GPS-Koordinaten:**
${coordsText}
**Parkzeit:**
${parkTimeText}
`;
]]]
styles:
card:
- background: rgba(28, 28, 28, 0.9)
- border: 1px solid rgba(255, 255, 255, 0.1)
- border-radius: 10px
- height: 56px
- padding: 12px
- display: flex
- align-items: center
custom_fields:
icon: |
[[[
return '<ha-icon icon="mdi:map-marker" style="color: #4F729A; width: 20px; height: 20px; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);"></ha-icon>';
]]]
content: |
[[[
let locationText = 'Unbekannt';
const locationSensor = window.autoConfig ? window.autoConfig.location_sensor : 'sensor.auto_standort_json';
if (states[locationSensor] && states[locationSensor].state &&
states[locationSensor].state !== 'unknown' &&
states[locationSensor].state !== 'unavailable') {
const fullAddress = states[locationSensor].state;
const parts = fullAddress.split(',').map(part => part.trim());
for (let i = 0; i < parts.length; i++) {
const part = parts[i];
const plzCityMatch = part.match(/^\d{5}\s+(.+)$/);
if (plzCityMatch) {
locationText = plzCityMatch[1];
break;
}
if (!part.match(/^\d/) &&
!part.toLowerCase().includes('deutschland') &&
!part.toLowerCase().includes('thüringen') &&
!part.toLowerCase().includes('bayern') &&
!part.toLowerCase().includes('sachsen') &&
!part.toLowerCase().includes('hessen') &&
!part.toLowerCase().includes('kreis') &&
part.length > 2 && part.length < 30) {
locationText = part;
}
}
if (locationText === 'Unbekannt' && parts.length >= 2) {
locationText = parts[parts.length - 2];
}
if (locationText.length > 18) {
locationText = locationText.substring(0, 15) + '...';
}
}
return `
<div style="display: flex; flex-direction: column; justify-content: center; flex: 1; margin-left: 20px; text-align: right; overflow: hidden;">
<div style="font-size: 12px; color: #9CA3AF; font-weight: 500; line-height: 1.2; margin-bottom: 2px; text-align: right;">Standort</div>
<div style="font-size: 10px; font-weight: 500; color: #4F729A; line-height: 1.1; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;">${locationText}</div>
</div>
`;
]]]
wenn du auf das Bald klickst, bekommst du eine Beschreibung welche Entitäten gegebenenfalls geändert werden müssen, ist halt viel Arbeit.
Kannst ja mal Bescheid geben ob du Erfolg hattest.
Möchte es inzwischen nicht mehr missen, ist ein schönes Spielzeug.
Oder du passt das Gaze mit KI an, sollte super klappen.
Nehm den gesamten Quellcode und lass ihn analysieren, dann kopierst du alle Entitäten aus deiner MySkoda app und lässt sie ersetzen, ist ja gut im Quellcode beschrieben welche ersetzt werden müssen. Kann Claude Sonette 4 empfehlen, GPT5 geht sich auch super.
Viel Spaß, bin gespannt
.
