Radio- und Musik-Widget mit Button Card

Sauber umsetzen

Bevor du das YAML übernimmst

Nimm den Code als Vorlage, nicht als blind kopierbaren Endzustand. Die entscheidenden Stellen solltest du vor dem Speichern an dein eigenes Setup anpassen.

Voraussetzungen

Laufendes Home Assistant
custom:button-card
Konfigurierter Media Player

Hilft dir bei

Anleitung mit YAML · Fortgeschritten · Eigene Werte anpassen

Bei YAML immer anpassen

Entity-IDs und Bereiche
Pfadnamen, Browser-IDs oder Helfer
Installierte Custom Cards und Integrationen

Bevor Du das Widget einrichtest, konfiguriere zuerst das Radio-Dashboard.

Schwebendes Player-Widget am Bildschirmrand

Was macht diese Karte?

Die Karte erstellt ein schwebendes Mini-Player-Widget, das immer am unteren
rechten Bildschirmrand fixiert ist und folgende Informationen anzeigt:

Quelle (oben) – „📻 Radio“ oder „🎵 Spotify“
Logo (Mitte) – Radio-Logo oder Spotify-Album-Cover
Titel (unten) – Song-/Sendungs-Titel
Künstler (ganz unten) – Interpret-Name

Besonderheit: Bei Klick navigiert es zum Radio-Dashboard (/dashboard-haus/radio)

Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.

- type: custom:button-card
            entity: media_player.kuche_2
            show_name: false
            show_state: false
            show_icon: false
            tap_action:
              action: navigate
              navigation_path: /dashboard-haus/radio
            styles:
              card:
                - height: 220px
                - background: transparent
                - backdrop-filter: blur(15px)
                - border: 0px solid rgba(255, 255, 255, 0.1)
                - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5)
                - border-radius: 20px
                - padding: 20px
                - position: fixed !important
                - bottom: 20px !important
                - right: 20px !important
                - z-index: 999 !important
                - width: 280px !important
              custom_fields:
                source:
                  - position: absolute
                  - top: 15px
                  - left: 50%
                  - transform: translateX(-50%)
                  - font-size: 12px
                  - font-weight: 600
                  - color: rgba(255, 255, 255, 0.6)
                  - text-transform: uppercase
                  - letter-spacing: 1px
                  - text-shadow: 1px 1px 4px rgba(0,0,0,0.8)
                logo:
                  - position: absolute
                  - top: 40px
                  - left: 50%
                  - transform: translateX(-50%)
                  - width: 100px
                  - height: 100px
                title:
                  - position: absolute
                  - bottom: 40px
                  - left: 30px
                  - right: 30px
                  - text-align: center
                  - font-size: 20px
                  - font-weight: 500
                  - color: white
                  - letter-spacing: 0.5px
                  - text-shadow: 2px 2px 8px rgba(0,0,0,0.8)
                artist:
                  - position: absolute
                  - bottom: 15px
                  - left: 30px
                  - right: 30px
                  - text-align: center
                  - font-size: 15px
                  - font-weight: 2
                  - color: rgba(255, 255, 255, 0.9)
                  - text-shadow: 2px 2px 8px rgba(0,0,0,0.8)
            custom_fields:
              source: |
                [[[
                  const mediaContentId = entity.attributes.media_content_id || '';
                  const albumName = entity.attributes.media_album_name || '';
                  
                  if (mediaContentId.includes('spotify:')) {
                    return '🎵 Spotify';
                  }
                  
                  if (albumName.includes('Flashback')) {
                    return '📻 Radio';
                  } else if (albumName.includes('Munot')) {
                    return '📻 Radio';
                  } else if (albumName.includes('Radio 24')) {
                    return '📻 Radio';
                  }
                  
                  return '📻 Radio';
                ]]]
              logo: |
                [[[
                  const albumName = entity.attributes.media_album_name || '';
                  const entityPicture = entity.attributes.entity_picture || '';
                  const mediaContentId = entity.attributes.media_content_id || '';
                  
                  if (mediaContentId.includes('spotify:')) {
                    return `<img src="${entityPicture}">`;
                  }
                  
                  let logoSrc = '/local/radio-logos/flashbackfm.png';
                  
                  if (albumName.includes('Flashback')) {
                    logoSrc = '/local/radio-logos/flashbackfm.png';
                  } else if (albumName.includes('Munot')) {
                    logoSrc = '/local/radio-logos/radiomunot.png';
                  } else if (albumName.includes('Radio 24')) {
                    logoSrc = '/local/radio-logos/radio24.png';
                  }
                  
                  return `<img src="${logoSrc}">`;
                ]]]
              title: |
                [[[
                  return entity.attributes.media_title || 'Kein Titel';
                ]]]
              artist: |
                [[[
                  return entity.attributes.media_artist || '';
                ]]]

Position und Größe der Karte

Im Bereich styles: card: findest du alle Einstellungen:

Karten-Position

Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.

- position: fixed !important      # Fixiert am Bildschirm
- bottom: 20px !important         # 20px vom unteren Rand
- right: 20px !important          # 20px vom rechten Rand
- z-index: 999 !important         # Über anderen Elementen

Position ändern:

Linke Seite statt rechts:

- left: 20px !important           # Links statt right
# right: 20px !important entfernen!

Oben statt unten:

- top: 20px !important            # Oben statt bottom
# bottom: 20px !important entfernen!

Zentriert unten:

Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.

- bottom: 20px !important
- left: 50% !important
- transform: translateX(-50%) !important
# right: 20px !important entfernen!

Karten-Größe

Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.

- height: 220px                   # Höhe der Karte
- width: 280px !important         # Breite der Karte

Größere Karte:

Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.

- height: 260px                   # Höher
- width: 320px !important         # Breiter

Kleinere Karte:

Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.

- height: 180px                   # Kleiner
- width: 240px !important         # Schmaler

Bei Größenänderungen müssen die Element-Positionen angepasst werden!

Karten-Design

Hintergrund und Effekte

Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.

- background: transparent         # Transparenter Hintergrund
- backdrop-filter: blur(15px)     # Blur-Effekt dahinter
- border: 0px solid rgba(255, 255, 255, 0.1)  # Rahmen
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5)   # Schatten
- border-radius: 20px             # Abgerundete Ecken
- padding: 20px                   # Innenabstand

Dunklerer Hintergrund (weniger transparent):

Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.

- background: 'rgba(0, 0, 0, 0.5)'  # Halbtransparentes Schwarz
- backdrop-filter: blur(10px)

Heller Hintergrund:

- background: 'rgba(255, 255, 255, 0.2)'  # Halbtransparentes Weiß

Rahmen hinzufügen:

- border: 2px solid rgba(255, 255, 255, 0.3)  # Weißer Rahmen

Mehr Blur:

- backdrop-filter: blur(25px)     # Stärkerer Blur

Stärkerer Schatten:

- box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8)

Eckigkeit:

Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.

- border-radius: 10px             # Weniger rund
- border-radius: 0px              # Eckig

Quelle (Source) anpassen

Im Bereich custom_fields: source: unter styles:

Position

Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.

source:
  - position: absolute
  - top: 15px                     # Abstand von oben
  - left: 50%                     # Horizontal zentriert
  - transform: translateX(-50%)   # Zentrierung

Nach links verschieben:

  - left: 30px                    # Links ausrichten
  # transform: translateX(-50%) entfernen!

Nach rechts verschieben:

  - right: 30px                   # Rechts ausrichten
  # left und transform entfernen!

Schrift-Design

Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.

  - font-size: 12px               # Schriftgröße
  - font-weight: 600              # Dicke (100-900)
  - color: rgba(255, 255, 255, 0.6)  # Farbe mit Transparenz
  - text-transform: uppercase     # Großbuchstaben
  - letter-spacing: 1px           # Buchstaben-Abstand
  - text-shadow: 1px 1px 4px rgba(0,0,0,0.8)  # Schatten

Größere, fettere Schrift:

Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.

  - font-size: 14px
  - font-weight: 700

Andere Farbe:

Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.

  - color: rgb(0, 161, 136)       # Türkis
  - color: rgba(255, 165, 0, 0.9) # Orange

Kein Uppercase:

  - text-transform: none          # Normal statt UPPERCASE

Quelle-Text ändern

Im Bereich custom_fields: source: | (mit den eckigen Klammern):

if (mediaContentId.includes('spotify:')) {
  return '🎵 Spotify';            // ← Spotify-Text ändern
}

if (albumName.includes('Flashback')) {
  return '📻 Radio';              // ← Radio-Text ändern
}

return '📻 Radio';                // ← Standard-Text

Eigene Texte:

if (mediaContentId.includes('spotify:')) {
  return '🎶 Musik läuft';
}

return '📡 Live Radio';

Logo/Cover anpassen

Im Bereich custom_fields: logo: unter styles:

Position und Größe

Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.

logo:
  - position: absolute
  - top: 40px                     # Abstand von oben
  - left: 50%                     # Horizontal zentriert
  - transform: translateX(-50%)
  - width: 100px                  # Breite
  - height: 100px                 # Höhe

Größeres Logo:

Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.

  - top: 35px                     # Etwas höher (mehr Platz)
  - width: 120px
  - height: 120px

Kleineres Logo:

Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.

  - top: 45px
  - width: 80px
  - height: 80px

Logo nach links:

  - left: 30px
  # transform: translateX(-50%) entfernen!

Logo-Pfade ändern

Im Bereich custom_fields: logo: |:

let logoSrc = '/local/radio-logos/flashbackfm.png';  // Standard

if (albumName.includes('Flashback')) {
  logoSrc = '/local/radio-logos/flashbackfm.png';    // ← Pfad ändern
} else if (albumName.includes('Munot')) {
  logoSrc = '/local/radio-logos/radiomunot.png';     // ← Pfad ändern
} else if (albumName.includes('Radio 24')) {
  logoSrc = '/local/radio-logos/radio24.png';        // ← Pfad ändern
}

Neuen Sender hinzufügen:

} else if (albumName.includes('SRF 3')) {
  logoSrc = '/local/radio-logos/srf3.png';
}

Andere Logos verwenden:

logoSrc = '/local/meine-logos/mein-radio.png';

Logo-Style ändern

Im return Statement:

return `<img src="${logoSrc}">`;

Logo als Cover (zuschneiden):

  object-fit: cover;                // Füllt Bereich aus

Runde Logos:

  border-radius: 50%;               // Kreis

Stärkerer Schatten:

  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.9));

Titel anpassen

Im Bereich custom_fields: title: unter styles:

Position

Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.

title:
  - position: absolute
  - bottom: 40px                  # Abstand von unten
  - left: 30px                    # Abstand von links
  - right: 30px                   # Abstand von rechts
  - text-align: center            # Zentriert

Weiter unten:

  - bottom: 30px                  # Näher am Artist

Links ausrichten:

Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.

  - text-align: left
  - left: 20px
  - right: 60px                   # Mehr Platz rechts

Schrift-Design

Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.

  - font-size: 20px               # Größe
  - font-weight: 500              # Dicke
  - color: white                  # Farbe
  - letter-spacing: 0.5px         # Buchstaben-Abstand
  - text-shadow: 2px 2px 8px rgba(0,0,0,0.8)  # Schatten

Größerer Titel:

Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.

  - font-size: 24px
  - font-weight: 600

Andere Farbe:

  - color: rgb(0, 161, 136)       # Türkis

Stärkerer Schatten:

  - text-shadow: 3px 3px 12px rgba(0,0,0,1)

Titel-Text ändern

Im Bereich custom_fields: title: |:

return entity.attributes.media_title || 'Kein Titel';  // ← Text wenn leer

Anderer Platzhalter:

return entity.attributes.media_title || '---';
return entity.attributes.media_title || 'Warte...';

Titel kürzen (max 30 Zeichen):

const title = entity.attributes.media_title || 'Kein Titel';
return title.length > 30 ? title.substring(0, 30) + '...' : title;

Künstler anpassen

Im Bereich custom_fields: artist: unter styles:

Position

Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.

artist:
  - position: absolute
  - bottom: 15px                  # Abstand von unten
  - left: 30px
  - right: 30px
  - text-align: center

Weiter oben (näher am Titel):

  - bottom: 20px

Schrift-Design

Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.

  - font-size: 15px
  - font-weight: 2                # Sehr dünn (sollte 200-300 sein)
  - color: rgba(255, 255, 255, 0.9)
  - text-shadow: 2px 2px 8px rgba(0,0,0,0.8)

Dünnere Schrift (korrigiert):

  - font-weight: 300              # Dünn

Kleinere Schrift:

  - font-size: 13px

Transparenter:

  - color: rgba(255, 255, 255, 0.7)  # Mehr Transparenz

Künstler-Text ändern

Im Bereich custom_fields: artist: |:

return entity.attributes.media_artist || '';  // ← Leer wenn kein Artist

Platzhalter statt leer:

return entity.attributes.media_artist || 'Unbekannt';

Im Bereich tap_action::

Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.

tap_action:
  action: navigate
  navigation_path: /dashboard-haus/radio  # ← Dashboard-Pfad

Zu anderem Dashboard navigieren:

  navigation_path: /dashboard-haus/musik

Keine Navigation (nur Widget anzeigen):

Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.

tap_action:
  action: none

Toggle Player:

Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.

tap_action:
  action: call-service
  service: media_player.media_play_pause
  service_data:
    entity_id: media_player.kuche_2

Entity ändern

Ganz oben:

entity: media_player.kuche_2      # ← Dein Media Player

Bevor du das YAML übernimmst

Schwebendes Player-Widget am Bildschirmrand

Was macht diese Karte?

Position und Größe der Karte

Karten-Position

Karten-Größe

Karten-Design

Hintergrund und Effekte

Quelle (Source) anpassen

Position

Schrift-Design

Quelle-Text ändern

Logo/Cover anpassen

Position und Größe

Logo-Pfade ändern

Logo-Style ändern

Titel anpassen

Position

Schrift-Design

Titel-Text ändern

Künstler anpassen

Position

Schrift-Design

Künstler-Text ändern

Navigation ändern

Entity ändern