Bubble-Card DWD-Wetterwarnungen bzw. NINA-Integration mit Lauftext

Schwippser · 13. Juni 2026 um 07:19

Bubble-Card für Wetterwarnungen DWD … überarbeitet

wetterwarnungen

type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.stadt_neubukow_aktuelle_warnstufe
styles: |-
  @keyframes scroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-500%); }
  }
  .bubble-name-container {
    top: 10%;
  }
  .bubble-sub-button-1 {
    position: absolute;
    margin-left: -10px !important;
    top: 0%;
    left: 0;
    justify-self: center;
    font-size: clamp(6px, 3vw, 36px);
    line-height: 2;
    background: ${hass.states[entity] === 'off' ? 'rgb(200, 80, 40)' : 'keine Meldungen'} !important;
    color: ${
        hass.states['sensor.stadt_neubukow_aktuelle_warnstufe'].state === '0' ? 'hsl(0 0% 70%)'
      : hass.states['sensor.stadt_neubukow_aktuelle_warnstufe'].state === '1' ? 'gold'
      : hass.states['sensor.stadt_neubukow_aktuelle_warnstufe'].state === '2' ? 'orange'
      : hass.states['sensor.stadt_neubukow_aktuelle_warnstufe'].state === '3' ? 'orangered' : 'mediumpurple'
    } !important;
  }
  .bubble-sub-button-2 {
    position: absolute;
    text-align: center;
    align-self: end;
    left: 0%;
    top: 45%;
    ${card.querySelector('.bubble-sub-button-2').innerText = hass.states[entity].attributes.warning_1_start ? 
        "Start: " + new Date(hass.states[entity].attributes.warning_1_start).toLocaleTimeString([], {day: 'numeric', month: 'numeric', year: '2-digit',hour: '2-digit', minute:'2-digit'}) : 
        ""};
  }
  .bubble-sub-button-3 {
    position: absolute;
    text-align: center;
    align-self: end;
    right: 2%;
    top: 45%;
    ${card.querySelector('.bubble-sub-button-3').innerText = hass.states[entity].attributes.warning_1_end ? 
        "Ende: " + new Date(hass.states[entity].attributes.warning_1_end).toLocaleTimeString([], {day: 'numeric', month: 'numeric',year: '2-digit', hour: '2-digit', minute:'2-digit'}) : 
        ""};
  }
  .bubble-sub-button-4 {
    position: absolute;
    display: block;
    width: 400%;
    transform: translateX(50%);
    top: 25%;
    left: 0;
    justify-self: center;
    font-size: clamp(6px, 3vw, 16px);
    line-height: 2;
    white-space: nowrap !important;
    animation: move 20s linear infinite; 
  }
  .bubble-sub-button-5 {
    position: absolute;
    display: block;
    width: 100%;
    transform: translateX(100%);
    top: 0%;
    left: 0;
    justify-self: center;
    font-size: clamp(6px, 3vw, 24px);
    line-height: 2;
    white-space: nowrap !important;
    animation: move 20s linear infinite; 
    background: ${hass.states[entity] === 'off' ? 'rgb(200, 80, 40)' : 'keine Meldungen'} !important;
    color: ${
        hass.states['sensor.stadt_neubukow_aktuelle_warnstufe'].state === '0' ? 'hsl(0 0% 70%)'
      : hass.states['sensor.stadt_neubukow_aktuelle_warnstufe'].state === '1' ? 'gold'
      : hass.states['sensor.stadt_neubukow_aktuelle_warnstufe'].state === '2' ? 'orange'
      : hass.states['sensor.stadt_neubukow_aktuelle_warnstufe'].state === '3' ? 'orangered' : 'mediumpurple'
    } !important;
    
  }
  @keyframes move {
    to { transform: translateX(-100%); }
  }
rows: 1
card_layout: large
show_icon: false
scrolling_effect: false
show_state: false
show_name: true
show_attribute: false
attribute: warning_1_description
sub_button:
  main:
    - show_attribute: true
      show_icon: false
      state_background: false
      show_background: false
      tap_action:
        action: none
      show_name: true
      name: Keine Warnungen
      scrolling_effect: false
      visibility:
        - condition: state
          entity: sensor.stadt_neubukow_aktuelle_warnstufe
          state: "0"
    - entity: sensor.stadt_neubukow_aktuelle_warnstufe
      show_icon: false
      state_background: false
      show_background: false
      show_attribute: true
      attribute: warning_1_start
      name: Warnung Start
      visibility:
        - condition: state
          entity: sensor.stadt_neubukow_aktuelle_warnstufe
          state_not: "0"
    - entity: sensor.stadt_neubukow_aktuelle_warnstufe
      show_icon: false
      state_background: false
      show_background: false
      show_attribute: true
      attribute: warning_1_end
      name: Warnung Ende
      visibility:
        - condition: state
          entity: sensor.stadt_neubukow_aktuelle_warnstufe
          state_not: "0"
    - entity: sensor.stadt_neubukow_aktuelle_warnstufe
      icon: ""
      show_attribute: true
      attribute: warning_1_description
      tap_action:
        action: none
      show_icon: false
      show_state: false
      name: Lauftext
      visibility:
        - condition: state
          entity: sensor.stadt_neubukow_aktuelle_warnstufe
          state_not: "0"
      state_background: false
      show_background: false
      scrolling_effect: false
    - entity: sensor.stadt_neubukow_aktuelle_warnstufe
      show_attribute: true
      attribute: warning_1_headline
      show_icon: false
      state_background: false
      show_background: false
      tap_action:
        action: none
      name: Warnung Beschreibung
      visibility:
        - condition: state
          entity: sensor.stadt_neubukow_aktuelle_warnstufe
          state_not: "0"
      hide_when_parent_unavailable: false
      scrolling_effect: false
  bottom: []
force_icon: false
name: Wetterwarnungen DWD
tap_action:
  action: none
button_action:
  tap_action:
    action: none
modules:
  - "!default"
  - Dunkel
grid_options:
  columns: 12
  rows: 2
slider_fill_orientation: left
slider_value_position: right
visibility:
  - condition: screen
    media_query: "(min-width: 768px)"
icon: ""

Eisbaer · 24. Juni 2026 um 10:43

Sieht bei mir leider so aus:

Der Text wandert auch nicht weiter nach links, sondern verschwindet ca. 2 Sekunden später

Wiesbaden_Er · 24. Juni 2026 um 15:39

Bei mir exakt genau so wie bei dir …

Schwippser · 26. Juni 2026 um 09:46

Ich hab’s mir noch einmal angeschaut. Das Problem lag (wie vermutet) an einem fehlenden Modul. D.h. ich hatte die Konfiguration der Karte in einem individuellen Modul hinterlegt. Da dieses bei euch nicht vorhanden ist kommt es zu diesen Formatierungsfehlern.
WICHTIG!!! - alle Module für diese Karte deaktivieren - auch “Default” !!!
Hier nun die überarbeitete Code ohne Module. Falls Probleme - einfach melden!!!

type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.stadt_neubukow_aktuelle_warnstufe
styles: >-
  @import url('https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css');


  .bubble-button-card-container, .bubble-select-card-container,
  .bubble-climate-container, .bubble-media-player-container {
    border-radius: 0rem !important;
    background-color: #000C12;
  }

  .bubble-background {
    background-color: transparent !important;
  }

  .bubble-button-card, .bubble-media-player {
    position: absolute;
    --bubble-border-radius: 0px !important;
    --bubble-backdrop-filter: blur(5.1px);
    -webkit-backdrop-filter: blur(5.1px);
    backdrop-filter: blur(5px);
    overlay-backdrop-opacity: 1;
    overlay-backdrop-background-color: rgba(0, 0, 0, 0.32);
    transition: all 150ms ease-in-out;
    box-shadow: rgba(255, 255, 255, 0.05) 0 0 1px 1px inset;
    background: rgba(7, 189, 223, 0.15);
    background-image: linear-gradient(180deg, rgba(206, 211, 234, 0.07) 0%, transparent 100%);
    transition: all 0.1s;
    height: 100% !important;
    width: 100% !important;
    top: 0;
    z-index: 1000;
    justify-self: center;
    text-align: center !important;
  }

  .bubble-name-container {
    position: absolute;
    background: none !important;
    width: 100%;
    top: 45%;
    left: 0%;
    margin-left: 0px;
    align-items: center !important; 
  }

  .bubble-name {
    font-family: system-ui, sans-serif;
    font-size: clamp(8px, 3vw, 16px);
    color: hsl(0 0% 70%);
  }

  .bubble-state {
    font-family: system-ui, sans-serif;
    font-size: clamp(8px, 3vw, 16px);
    color: hsl(0 0% 70%);
  }

  .bubble-sub-button-container {
    position: absolute !important;
    background-color: transparent !important;
    justify-content: center;
    bottom: -30%;
    left: 2%;
    width: 100%;
    height: 100%;
    z-index: -500 !important;
  }

  .bubble-sub-button-1 {
    top: 0%;
    margin-left: -10px;
    font-family: system-ui, sans-serif;
    font-size: clamp(8px, 3vw, 16px);
    background-color: transparent; 
    color: hsl(0 0% 70%);
  }

  .bubble-sub-button-2 {
    top: -0%;
    margin-left: -10px;
    font-family: system-ui, sans-serif;
    font-size: clamp(8px, 3vw, 16px);
    background-color: transparent; 
    color: hsl(0 0% 70%);
  }

  .bubble-sub-button-3 {
    top: -0%;
    margin-left: -10px;
    font-family: system-ui, sans-serif;
    font-size: clamp(6px, 3vw, 16px);
    background-color: transparent; 
    color: hsl(0 0% 70%);
  }

  .bubble-sub-button-4 {
    top: -0%;
    margin-left: -10px;
    font-family: system-ui, sans-serif;
    font-size: clamp(6px, 3vw, 16px);
    background-color: transparent; 
    color: hsl(0 0% 70%);
  }

  .bubble-sub-button-5 {
    top: -0%;
    margin-left: -10px;
    font-family: system-ui, sans-serif;
    font-size: clamp(6px, 3vw, 16px);
    background-color: transparent; 
    color: hsl(0 0% 70%);
  }

  .bubble-icon-container {
    position: absolute !important;
    background: none !important;
    border-radius: 1rem;
    height: 150% !important;
    width: 100% !important;
    top: -50%;

    margin-left: 0px !important;
  }

  .bubble-icon {
    color: hsl(0 0% 70%) !important;
  }





  @keyframes scroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-500%); }
  }

  .bubble-name-container {
    top: 10%;
  }

  .bubble-sub-button-1 {
    position: absolute;
    margin-left: -10px !important;
    top: 0%;
    left: 0;
    justify-self: center;
    font-size: clamp(6px, 3vw, 36px);
    line-height: 2;
    background: ${hass.states[entity] === 'off' ? 'rgb(200, 80, 40)' : 'keine Meldungen'} !important;
    color: ${
        hass.states['sensor.stadt_neubukow_aktuelle_warnstufe'].state === '0' ? 'hsl(0 0% 70%)'
      : hass.states['sensor.stadt_neubukow_aktuelle_warnstufe'].state === '1' ? 'gold'
      : hass.states['sensor.stadt_neubukow_aktuelle_warnstufe'].state === '2' ? 'orange'
      : hass.states['sensor.stadt_neubukow_aktuelle_warnstufe'].state === '3' ? 'orangered' : 'mediumpurple'
    } !important;
  }

  .bubble-sub-button-2 {
    position: absolute;
    text-align: center;
    align-self: end;
    left: 0%;
    top: 45%;
    ${card.querySelector('.bubble-sub-button-2').innerText = hass.states[entity].attributes.warning_1_start ? 
        "Start: " + new Date(hass.states[entity].attributes.warning_1_start).toLocaleTimeString([], {day: 'numeric', month: 'numeric', year: '2-digit',hour: '2-digit', minute:'2-digit'}) : 
        ""};
  }

  .bubble-sub-button-3 {
    position: absolute;
    text-align: center;
    align-self: end;
    right: 2%;
    top: 45%;
    ${card.querySelector('.bubble-sub-button-3').innerText = hass.states[entity].attributes.warning_1_end ? 
        "Ende: " + new Date(hass.states[entity].attributes.warning_1_end).toLocaleTimeString([], {day: 'numeric', month: 'numeric',year: '2-digit', hour: '2-digit', minute:'2-digit'}) : 
        ""};
  }

  .bubble-sub-button-4 {
    position: absolute;
    display: block;
    width: 400%;
    transform: translateX(50%);
    top: 25%;
    left: 0;
    justify-self: center;
    font-size: clamp(4px, 2vw, 14px);
    line-height: 2;
    white-space: nowrap !important;
    animation: move 20s linear infinite; 
  }

  .bubble-sub-button-5 {
    position: absolute;
    display: block;
    width: 100%;
    transform: translateX(100%);
    top: 0%;
    left: 0;
    justify-self: center;
    font-size: clamp(6px, 3vw, 20px);
    line-height: 2;
    white-space: nowrap !important;
    animation: move 20s linear infinite; 
    background: ${hass.states[entity] === 'off' ? 'rgb(200, 80, 40)' : 'keine Meldungen'} !important;
    color: ${
        hass.states['sensor.stadt_neubukow_aktuelle_warnstufe'].state === '0' ? 'hsl(0 0% 70%)'
      : hass.states['sensor.stadt_neubukow_aktuelle_warnstufe'].state === '1' ? 'gold'
      : hass.states['sensor.stadt_neubukow_aktuelle_warnstufe'].state === '2' ? 'orange'
      : hass.states['sensor.stadt_neubukow_aktuelle_warnstufe'].state === '3' ? 'orangered' : 'mediumpurple'
    } !important;
    
  }

  @keyframes move {
    to { transform: translateX(-100%); }
  }
rows: 1
card_layout: large
show_icon: false
scrolling_effect: false
show_state: false
show_name: true
show_attribute: false
attribute: warning_1_description
sub_button:
  main:
    - show_attribute: true
      show_icon: false
      state_background: false
      show_background: false
      tap_action:
        action: none
      show_name: true
      name: Keine Warnungen
      scrolling_effect: false
      visibility:
        - condition: state
          entity: sensor.stadt_neubukow_aktuelle_warnstufe
          state: "0"
    - entity: sensor.stadt_neubukow_aktuelle_warnstufe
      show_icon: false
      state_background: false
      show_background: false
      show_attribute: true
      attribute: warning_1_start
      name: Warnung Start
      visibility:
        - condition: state
          entity: sensor.stadt_neubukow_aktuelle_warnstufe
          state_not: "0"
    - entity: sensor.stadt_neubukow_aktuelle_warnstufe
      show_icon: false
      state_background: false
      show_background: false
      show_attribute: true
      attribute: warning_1_end
      name: Warnung Ende
      visibility:
        - condition: state
          entity: sensor.stadt_neubukow_aktuelle_warnstufe
          state_not: "0"
    - entity: sensor.stadt_neubukow_aktuelle_warnstufe
      icon: ""
      show_attribute: true
      attribute: warning_1_description
      tap_action:
        action: none
      show_icon: false
      show_state: false
      name: Lauftext
      visibility:
        - condition: state
          entity: sensor.stadt_neubukow_aktuelle_warnstufe
          state_not: "0"
      state_background: false
      show_background: false
      scrolling_effect: false
    - entity: sensor.stadt_neubukow_aktuelle_warnstufe
      show_attribute: true
      attribute: warning_1_headline
      show_icon: false
      state_background: false
      show_background: false
      tap_action:
        action: none
      name: Warnung Beschreibung
      visibility:
        - condition: state
          entity: sensor.stadt_neubukow_aktuelle_warnstufe
          state_not: "0"
      hide_when_parent_unavailable: false
      scrolling_effect: false
  bottom: []
force_icon: false
name: Wetterwarnungen DWD
tap_action:
  action: none
button_action:
  tap_action:
    action: none
modules:
  - "!default"
grid_options:
  columns: 12
  rows: 2
slider_fill_orientation: left
slider_value_position: right
visibility:
  - condition: screen
    media_query: "(min-width: 768px)"
icon: ""

Eisbaer · 26. Juni 2026 um 10:06

Danke, damit klappt es

Wiesbaden_Er · 26. Juni 2026 um 10:34

Funktioniert …
Allerdings ist der Text .. zu lang, so dass es einen Zeilenumbruch gibt. Unschön zu lesen

Frage: kann ich den Orange-roten Text auch „nicht scrollen“ ?

Schwippser · 26. Juni 2026 um 10:42

ja … leider habe ich keinen Einfluss auf die Länge der Warnmeldungen. Aber du kannst ein wenig rumspielen.

.bubble-sub-button-4 {
  position: absolute;
  display: block;
  width: 400%;
  transform: translateX(50%);
  top: 25%;
  left: 0;
  justify-self: center;
  font-size: clamp(4px, 2vw, 14px);
  line-height: 2;
  white-space: nowrap !important;
  animation: move 20s linear infinite; 
}

ändere mal die Werte bei

  width: 100%;
  transform: translateX(100%);

bis es passt … transform: translateX(100%) sollte evtl. schon Abhilfe schaffen

Thema		Antworten	Aufrufe
Bubble Card und DWD Wetter Warnungen Dashboard/Cards/Frontend templating , yaml	2	312	3. Oktober 2025
Bubble-Card Climate - Layoutanpassung Showroom templating , yaml , bubble-card	3	284	17. Mai 2026
Bubble-Card: Cover als Slider selbst aufbauen Dashboard/Cards/Frontend cover , bubble-card , slider , how-to	10	1283	5. Juli 2026
BubbleCard - als Kamera-Karte Dashboard/Cards/Frontend kamera , bewegungsmelder , templating , yaml , smart-garden	0	570	14. September 2025
Farbe einer Temperatur Sensor Karte in Abhängigkeit eines anderen Sensors Dashboard/Cards/Frontend heizung	7	119	27. Juni 2026

Bubble-Card DWD-Wetterwarnungen bzw. NINA-Integration mit Lauftext

Verwandte Themen