Hallo, super. Was zeigt die Karte bei Dir, wenn es keine Warnung gibt? Oder hast Du Sichtbarkeit so eingestellt, dass die Karte nur kommt, wenn es eine Warnung gibt?
Ich nutze die NINA-Intergration und habe im Moment auch keine Warnungen … die Karte zeigt dann nichts an.
Ich arbeite gerade dran, dass sie in dem Fall “Keine Meldungen” als Text ausgibt.
Zwischenstand … noch nicht geprüft:
Folgendes oberhalb ".bubble-container " einfugen …
styles: |-
${state === 'on' ? icon.setAttribute("icon", " ") :
state === 'off' ? icon.setAttribute("icon", "mdi:cancel") :
state === 'error' ? icon.setAttribute("icon", "mdi:alert") :
icon.setAttribute("icon", " ")}
.bubble-icon-container {
position: absolute;
background: transparent;
grid-area: n;
justify-self: center;
margin-left: -20px !important;
}
.bubble-icon {
scale: 2;
}
Ergebnis, wenn keine Meldungen vorliegen:
Moin, danke - leider sieht es bei mir so aus:
Code ist wie folgt:
type: custom:bubble-card
card_type: button
button_type: name
entity: sensor.stadt_osnabruck_aktuelle_warnstufe
styles: |-
${state === 'on' ? icon.setAttribute("icon", " ") :
state === 'off' ? icon.setAttribute("icon", "mdi:cancel") :
state === 'error' ? icon.setAttribute("icon", "mdi:alert") :
state === '0' ? icon.setAttribute("icon", "mdi:alert") :
icon.setAttribute("icon", " ")}
.bubble-icon-container {
position: absolute;
background: transparent;
grid-area: n;
justify-self: center;
margin-left: -20px !important;
}
.bubble-icon {
scale: 2;
}
.bubble-container {
--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%);
}
.bubble-button-card {
display: grid;
grid-template-areas:
'i1 i i2'
'n1 n n2'
's1 s s2';
grid-template-columns: auto 90% auto;
grid-template-rows: 1fr 90% 1fr;
justify-items: center;
}
.bubble-icon-container {
grid-area: i;
justify-self: center;
background: transparent;
icon-color: white;
margin-top: -60px;
}
.bubble-name-container {
grid-area: i;
justify-self: center;
align-self: start;
justify-content: center;
align-content: center;
justify-items: center;
width: 90%;
}
.large .bubble-sub-button-container {
max-width: calc(100% - 20px);
max-height: calc(100% - 20px);
grid-area: n;
justify-self: center;
align-self: center;
justify-content: center;
align-content: start;
justify-items: center;
}
.bubble-name {
font-family: roboto;
font-size: calc(1rem + (12 - 10) * ((100vw - 320px) / (1600 - 320)));
font-weight: 300;
justify-content: center !important;
text-align: center;
margin-top: 10px;
}
.bubble-state {
font-family: roboto;
font-size: calc(1rem + (11 - 10) * ((100vw - 320px) / (1600 - 320)));
font-weight: 300;
line-height: 1;
justify-content: center !important;
text-align: center;
align-self: center;
margin-top: 40px;
color: white;
width: 100% !important;
display: inline-block !important;
position: relative !important;
white-space: nowrap !important;
animation: scroll 30s linear infinite ;
}
@keyframes scroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-500%); }
}
.bubble-sub-button-1 {
font-size: calc(1rem + (12 - 10) * ((100vw - 320px) / (1600 - 320)));
font-weight: 600;
margin-top: 15px;
color: ${
hass.states['sensor.stadt_osnabruck_aktuelle_warnstufe'].state === '0' ? 'white'
: hass.states['sensor.stadt_osnabruck_aktuelle_warnstufe'].state === '1' ? 'gold'
: hass.states['sensor.stadt_osnabruck_aktuelle_warnstufe'].state === '2' ? 'orange'
: hass.states['sensor.stadt_osnabruck_aktuelle_warnstufe'].state === '3' ? 'orangered' : 'mediumpurple'
} !important;
}
.bubble-sub-button-2 {
position: absolute;
text-align: center;
align-self: end;
left: -10%;
top: 80%;
}
.bubble-sub-button-3 {
position: absolute;
text-align: center;
align-self: end;
right: -10%;
top: 80%;
}
rows: "2"
card_layout: large-sub-buttons-grid
show_icon: true
scrolling_effect: false
show_state: false
show_name: true
show_attribute: true
attribute: warning_1_description
sub_button:
- entity: sensor.stadt_osnabruck_aktuelle_warnstufe
show_attribute: true
attribute: warning_1_headline
show_icon: false
state_background: false
show_background: false
tap_action:
action: none
- entity: sensor.stadt_osnabruck_aktuelle_warnstufe
show_icon: false
state_background: false
show_background: false
show_attribute: true
attribute: warning_1_start
- entity: sensor.stadt_osnabruck_aktuelle_warnstufe
show_icon: false
state_background: false
show_background: false
show_attribute: true
attribute: warning_1_end
force_icon: false
name: Wetterwarnungen
tap_action:
action: none
button_action:
tap_action:
action: navigate
navigation_path: /lovelace/regen
icon: mdi:home-alert-outline
Du bist auf DWD stimmt’s? Der Code ist für NINA. Du müsstest ihn anpassen auf die Sensor-States vom DWD. Ich habe leider im Moment wenig Zeit. Vielleicht schaffe ich es ja heute Abend.
Zusammenfassung:
yaml-Code für NINA:
type: custom:bubble-card
card_type: button
button_type: state
entity: binary_sensor.nina_warning_neubukow_stadt_rostock_mecklenburg_vorpommern_1
styles: |-
${state === 'on' ? icon.setAttribute("icon", " ") :
state === 'off' ? icon.setAttribute("icon", "mdi:cancel") :
state === 'error' ? icon.setAttribute("icon", "mdi:alert") :
icon.setAttribute("icon", " ")}
.bubble-icon-container {
position: absolute;
background: transparent;
grid-area: n;
justify-self: center;
margin-left: -20px !important;
}
.bubble-icon {
scale: 2;
}
.bubble-button-card {
display: grid;
grid-template-areas:
'i1 i i2'
'n1 n n2'
's1 s s2';
grid-template-columns: auto 90% auto;
grid-template-rows: 1fr 90% 1fr;
justify-items: center;
}
.bubble-name-container {
grid-area: i;
justify-self: center;
align-self: start;
justify-content: center;
align-content: center;
justify-items: center;
width: 90%;
}
.large .bubble-sub-button-container {
max-width: calc(100% - 20px);
max-height: calc(100% - 20px);
grid-area: n;
justify-self: center;
align-self: center;
justify-content: center;
align-content: start;
justify-items: center;
}
.bubble-name {
font-family: roboto;
font-size: calc(1rem + (12 - 10) * ((100vw - 320px) / (1600 - 320)));
font-weight: 300;
justify-content: center !important;
text-align: center;
margin-top: 10px;
}
.bubble-state {
font-family: roboto;
font-size: calc(1rem + (11 - 10) * ((100vw - 320px) / (1600 - 320)));
font-weight: 300;
line-height: 1;
justify-content: center !important;
text-align: center;
align-self: center;
margin-top: 40px;
color: white;
width: 100% !important;
display: inline-block !important;
position: relative !important;
white-space: nowrap !important;
animation: scroll 30s linear infinite ;
}
@keyframes scroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-500%); }
}
.bubble-sub-button-1 {
font-size: calc(1rem + (12 - 10) * ((100vw - 320px) / (1600 - 320)));
font-weight: 600;
margin-top: 15px;
background: ${hass.states[entity] === 'off' ? 'rgb(200, 80, 40)' : 'keine Meldungen'} !important;
color: ${
hass.states[entity].attributes.severity === 'Unknown' ? 'white'
: hass.states[entity].attributes.severity === 'Minor' ? 'gold'
: hass.states[entity].attributes.severity === 'Moderate' ? 'orange'
: hass.states[entity].attributes.severity === 'Severe' ? 'orangered'
: hass.states[entity].attributes.severity === 'Extreme' ? 'red' : 'mediumpurple'
} !important;
}
.bubble-sub-button-2 {
position: absolute;
text-align: center;
align-self: end;
left: -10%;
top: 80%;
}
.bubble-sub-button-3 {
position: absolute;
text-align: center;
align-self: end;
right: -10%;
top: 80%;
}
rows: "2"
card_layout: large-sub-buttons-grid
show_icon: true
scrolling_effect: false
show_state: false
show_name: true
show_attribute: true
attribute: description
sub_button:
- entity: binary_sensor.nina_warning_neubukow_stadt_rostock_mecklenburg_vorpommern_1
show_attribute: true
attribute: headline
show_icon: false
state_background: false
show_background: false
tap_action:
action: none
- entity: binary_sensor.nina_warning_neubukow_stadt_rostock_mecklenburg_vorpommern_1
show_icon: false
state_background: false
show_background: false
show_attribute: true
attribute: start
- entity: binary_sensor.nina_warning_neubukow_stadt_rostock_mecklenburg_vorpommern_1
show_icon: false
state_background: false
show_background: false
show_attribute: true
attribute: expires
force_icon: false
name: Wetterwarnungen
tap_action:
action: none
button_action:
tap_action:
action: none
yaml-Code für DWD:
type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.stadt_neubukow_aktuelle_warnstufe
styles: |-
${state === '0' ? icon.setAttribute("icon", "mdi:cancel") :
state === '1' ? icon.setAttribute("icon", " ") :
state === '2' ? icon.setAttribute("icon", " ") :
state === 'error' ? icon.setAttribute("icon", "mdi:alert") :
icon.setAttribute("icon", " ")}
.bubble-icon-container {
position: absolute;
background: transparent;
grid-area: n;
justify-self: center;
margin-left: -20px !important;
}
.bubble-icon {
scale: 2;
}
.bubble-button-card {
display: grid;
grid-template-areas:
'i1 i i2'
'n1 n n2'
's1 s s2';
grid-template-columns: auto 90% auto;
grid-template-rows: 1fr 90% 1fr;
justify-items: center;
}
.bubble-name-container {
grid-area: i;
justify-self: center;
align-self: start;
justify-content: center;
align-content: center;
justify-items: center;
width: 90%;
}
.large .bubble-sub-button-container {
max-width: calc(100% - 20px);
max-height: calc(100% - 20px);
grid-area: n;
justify-self: center;
align-self: center;
justify-content: center;
align-content: start;
justify-items: center;
}
.bubble-name {
font-family: roboto;
font-size: calc(1rem + (12 - 10) * ((100vw - 320px) / (1600 - 320)));
font-weight: 300;
justify-content: center !important;
text-align: center;
margin-top: 10px;
}
.bubble-state {
font-family: roboto;
font-size: calc(1rem + (11 - 10) * ((100vw - 320px) / (1600 - 320)));
font-weight: 300;
line-height: 1;
justify-content: center !important;
text-align: center;
align-self: center;
margin-top: 40px;
color: white;
width: 100% !important;
display: inline-block !important;
position: relative !important;
white-space: nowrap !important;
animation: scroll 30s linear infinite ;
}
@keyframes scroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-500%); }
}
.bubble-sub-button-1 {
font-size: calc(1rem + (12 - 10) * ((100vw - 320px) / (1600 - 320)));
font-weight: 600;
margin-top: 15px;
background: ${hass.states[entity] === 'off' ? 'rgb(200, 80, 40)' : 'keine Meldungen'} !important;
color: ${
hass.states['sensor.stadt_neubukow_aktuelle_warnstufe'].state === '0' ? 'white'
: 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: -10%;
top: 80%;
}
.bubble-sub-button-3 {
position: absolute;
text-align: center;
align-self: end;
right: -10%;
top: 80%;
}
rows: "2"
card_layout: large-sub-buttons-grid
show_icon: true
scrolling_effect: false
show_state: false
show_name: true
show_attribute: true
attribute: warning_1_description
sub_button:
- 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
- entity: sensor.stadt_neubukow_aktuelle_warnstufe
show_icon: false
state_background: false
show_background: false
show_attribute: true
attribute: warning_1_start
- entity: sensor.stadt_neubukow_aktuelle_warnstufe
show_icon: false
state_background: false
show_background: false
show_attribute: true
attribute: warning_1_end
force_icon: false
name: Wetterwarnungen
tap_action:
action: none
button_action:
tap_action:
action: none
1 „Gefällt mir“
Moin und danke, das hat super funktioniert. Allerdings stehen gerade auf dem Smartphone Start- und Enddatum übereinander - kann man das noch anpassen?
Schau ich mir mal an, wenn ich Zeit habe. Es liegt an der Breite der Datumsanzeige.
Bin gerade erst auf diesen Thread hier gestoßen, vielen Dank erst einmal dafür. Bei mir funktioniert das Ausblenden allerdings nur mit dem numerischen Zustand der Entität (bei Bedingung “größer als 0”), nicht dem Entitätszustand an sich. Vielleicht nur als HInweis.
Datums- u. Zeitformat angepasst …
type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.stadt_neubukow_aktuelle_warnstufe
styles: |-
${state === '0' ? icon.setAttribute("icon", "mdi:cancel") :
state === '1' ? icon.setAttribute("icon", " ") :
state === '2' ? icon.setAttribute("icon", " ") :
state === 'error' ? icon.setAttribute("icon", "mdi:alert") :
icon.setAttribute("icon", " ")}
.bubble-container {
--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%);
}
.bubble-icon-container {
position: absolute;
background: transparent;
grid-area: n;
justify-self: center;
margin-left: -20px !important;
}
.bubble-icon {
scale: 2;
}
.bubble-button-card {
display: grid;
grid-template-areas:
'i1 i i2'
'n1 n n2'
's1 s s2';
grid-template-columns: auto 90% auto;
grid-template-rows: 1fr 90% 1fr;
justify-items: center;
}
.bubble-name-container {
grid-area: i;
justify-self: center;
align-self: start;
justify-content: center;
align-content: center;
justify-items: center;
width: 90%;
}
.large .bubble-sub-button-container {
max-width: calc(100% - 20px);
max-height: calc(100% - 20px);
grid-area: n;
justify-self: center;
align-self: center;
justify-content: center;
align-content: start;
justify-items: center;
}
.bubble-name {
font-family: roboto;
font-size: calc(1rem + (12 - 10) * ((100vw - 320px) / (1600 - 320)));
font-weight: 300;
justify-content: center !important;
text-align: center;
margin-top: 10px;
}
.bubble-state {
font-family: roboto;
font-size: calc(1rem + (11 - 10) * ((100vw - 320px) / (1600 - 320)));
font-weight: 300;
line-height: 1;
justify-content: center !important;
text-align: center;
align-self: center;
margin-top: 40px;
color: white;
width: 100% !important;
display: inline-block !important;
position: relative !important;
white-space: nowrap !important;
animation: scroll 30s linear infinite ;
}
@keyframes scroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-500%); }
}
.bubble-sub-button-1 {
font-size: calc(1rem + (12 - 10) * ((100vw - 320px) / (1600 - 320)));
font-weight: 600;
margin-top: 15px;
background: ${hass.states[entity] === 'off' ? 'rgb(200, 80, 40)' : 'keine Meldungen'} !important;
color: ${
hass.states['sensor.stadt_neubukow_aktuelle_warnstufe'].state === '0' ? 'white'
: 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: -10%;
top: 80%;
${card.querySelector('.bubble-sub-button-2').innerText = hass.states['sensor.stadt_neubukow_aktuelle_warnstufe'].attributes.warning_1_start ?
"Beginn: " + new Date(hass.states['sensor.stadt_neubukow_aktuelle_warnstufe'].attributes.warning_1_start).toLocaleTimeString([], {day: 'numeric', month: 'numeric', hour: '2-digit', minute:'2-digit'}) :
""};
}
.bubble-sub-button-3 {
position: absolute;
text-align: center;
align-self: end;
right: -10%;
top: 80%;
${card.querySelector('.bubble-sub-button-3').innerText = hass.states['sensor.stadt_neubukow_aktuelle_warnstufe'].attributes.warning_1_end ?
"Ende: " + new Date(hass.states['sensor.stadt_neubukow_aktuelle_warnstufe'].attributes.warning_1_end).toLocaleTimeString([], {day: 'numeric', month: 'numeric', hour: '2-digit', minute:'2-digit'}) :
""};
}
rows: "2"
card_layout: large-sub-buttons-grid
show_icon: true
scrolling_effect: false
show_state: false
show_name: true
show_attribute: true
attribute: warning_1_description
sub_button:
- 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
- entity: sensor.stadt_neubukow_aktuelle_warnstufe
show_icon: false
state_background: false
show_background: false
show_attribute: true
attribute: warning_1_start
- entity: sensor.stadt_neubukow_aktuelle_warnstufe
show_icon: false
state_background: false
show_background: false
show_attribute: true
attribute: warning_1_end
force_icon: false
name: Wetterwarnungen DWD
tap_action:
action: none
button_action:
tap_action:
action: none
modules:
- "!default"
3 „Gefällt mir“
Ich würde auch hier nicht mit
${card.querySelector('.bubble-sub-button-3').innerText = hass.states['sensor.stadt_neubukow_aktuelle_warnstufe'].attributes.warning_1_end ?
"Ende: " + new Date(hass.states['sensor.stadt_neubukow_aktuelle_warnstufe'].attributes.warning_1_end).toLocaleTimeString([], {day: 'numeric', month: 'numeric', hour: '2-digit', minute:'2-digit'}) :
""};
arbeiten, sondern mit
${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', hour: '2-digit', minute:'2-digit'}) :
""};
``
1 „Gefällt mir“
jepp … gebe ich dir absolut recht … und hab ich auch so umgesetzt gerade.
Hatte es zum Testen so gebaut und vergessen zu ändern.
habe es noch etwas angepasst:
${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'}) :
""};
${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'}) :
""};
1 „Gefällt mir“
Ja genial! Vielen Dank fürs Teilen! Funktioniert wunderbar.
Habe das noch mit der HACS Karte
und einer bubble-Card vom Typ Pop-Up verknüpft. Liegt als Tap-Action auf dem Sub-Button 1 und dem Icon.
Genauso habe ich es auch gemacht.
Würdest du bitte den Code hier zur Verfügung stellen? Danke im Voraus!
So sieht meine Karte aus
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#dwd"
button_type: name
- type: custom:nina-dwd-card
title: Warnings
max_warnings: 3
hide_when_no_warnings: true
dwd_device: f2563af1763bc7aeb17099b255e7bef2
dwd_map_land: nrw
nina_entity_prefix: binary_sensor.nina_warning_xyz_stadt
grid_options:
columns: full
1 „Gefällt mir“