Hallo Community🫶,
hier der Wochenbeitrag für KW 32 in 2025 über unser aller Smart Home und weitere technische Dinge.
„Neue Woche, neues Update – mal schauen, was diesmal plötzlich nicht mehr funktioniert.“
Ich habe mich am Wochenende endlich abschließend um mein Lichtdashboard kümmern können. Ist jetzt komplett auf bubble-card umgestellt.
Code zum Dashboard / bubble-card
type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding: 10px;
border: none !important;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px
13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset !important;
}
cards:
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
sub_button: []
button_type: switch
entity: light.pc_led_pv_led
card_layout: normal
show_icon: true
show_name: true
show_state: false
tap_action:
action: toggle
hold_action:
action: more-info
button_action: {}
icon: ""
scrolling_effect: false
styles: |
* {
font-size: 12px !important;
}
ha-card {
--bubble-icon-background-color: rgba(55,55,55,0.2) !important;
}
.bubble-button-card-container {
background: rgba(22,22,22,0) !important;
border-radius: 10px;
}
.bubble-button-background {
background-color: ${state === 'on' ? 'orange' : ''} !important;
opacity: 0.7 !important;
border-radius: 10px;
}
card_mod:
style: |
ha-card {
padding-right: 10px;
border-right: 1px solid grey !important;
border-left: none !important;
border-top: none !important;
border-bottom: none !important;
}
- type: custom:bubble-card
card_type: button
sub_button: []
button_type: switch
entity: switch.bildbeleuchtung_2
card_layout: normal
show_icon: true
show_name: true
show_state: false
tap_action:
action: toggle
hold_action:
action: more-info
button_action: {}
icon: mdi:panorama-variant-outline
scrolling_effect: false
styles: |
* {
font-size: 12px !important;
}
ha-card {
--bubble-icon-background-color: rgba(55,55,55,0.2) !important;
--bubble-icon-color: white !important;
}
.bubble-button-card-container {
background: rgba(22,22,22,0) !important;
border-radius: 10px;
}
.bubble-button-background {
background-color: ${state === 'on' ? 'orange' : ''} !important;
opacity: 0.7 !important;
border-radius: 10px;
}
card_mod:
style: |
ha-card {
padding-right: 10px;
border-right: 1px solid grey !important;
border-left: none !important;
border-top: none !important;
border-bottom: none !important;
}
- type: custom:bubble-card
card_type: button
sub_button: []
button_type: switch
entity: switch.lavalampe_steckdose_1
card_layout: normal
show_icon: true
show_name: true
show_state: false
tap_action:
action: toggle
hold_action:
action: more-info
button_action: {}
icon: mdi:lava-lamp
scrolling_effect: false
name: Lavalampe
styles: |
* {
font-size: 12px !important;
}
ha-card {
--bubble-icon-background-color: rgba(55,55,55,0.2) !important;
--bubble-icon-color: white !important;
}
.bubble-button-card-container {
background: rgba(22,22,22,0) !important;
border-radius: 10px;
}
.bubble-button-background {
background-color: ${state === 'on' ? 'orange' : ''} !important;
opacity: 0.7 !important;
border-radius: 10px;
}
- type: custom:mod-card
card_mod:
style: |
ha-card {
height: 1px;
border-bottom: 1px;
background-color: grey !important;
margin: 0px 20px 0px 20px;
}
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
sub_button: []
button_type: switch
entity: switch.licht_terrassetur_sud_deckenlicht_wohnecke_ch1
card_layout: normal
show_icon: true
show_name: true
show_state: false
scrolling_effect: false
tap_action:
action: toggle
hold_action:
action: more-info
button_action: {}
icon: mdi:ceiling-light
name: Wohnzimmer
styles: |
* {
font-size: 12px !important;
}
ha-card {
--bubble-icon-background-color: rgba(55,55,55,0.2) !important;
--bubble-icon-color: white !important;
}
.bubble-button-card-container {
background: rgba(22,22,22,0) !important;
border-radius: 10px;
}
.bubble-button-background {
background-color: ${state === 'on' ? 'orange' : ''} !important;
opacity: 0.7 !important;
border-radius: 10px;
}
card_mod:
style: |
ha-card {
padding-right: 10px;
border-right: 1px solid grey !important;
border-left: none !important;
border-top: none !important;
border-bottom: none !important;
}
- type: custom:bubble-card
card_type: button
sub_button: []
button_type: switch
entity: light.esszimmerlicht
card_layout: normal
show_icon: true
show_name: true
show_state: false
scrolling_effect: false
tap_action:
action: toggle
hold_action:
action: more-info
button_action: {}
icon: mdi:ceiling-light
name: Esszimmer
styles: |
* {
font-size: 12px !important;
}
ha-card {
--bubble-icon-background-color: rgba(55,55,55,0.2) !important;
--bubble-icon-color: white !important;
}
.bubble-button-card-container {
background: rgba(22,22,22,0) !important;
border-radius: 10px;
}
.bubble-button-background {
background-color: ${state === 'on' ? 'orange' : ''} !important;
opacity: 0.7 !important;
border-radius: 10px;
}
card_mod:
style: |
ha-card {
padding-right: 10px;
border-right: 1px solid grey !important;
border-left: none !important;
border-top: none !important;
border-bottom: none !important;
}
- type: custom:bubble-card
card_type: button
sub_button: []
button_type: switch
entity: input_button.button_lichtfarbe_random_andern
card_layout: normal
show_icon: true
show_name: true
show_state: false
tap_action:
action: toggle
hold_action:
action: more-info
button_action: {}
icon: mdi:lightbulb-group
name: Farbe random
styles: |
* {
font-size: 12px !important;
}
ha-card {
--bubble-icon-background-color: rgba(55,55,55,0.2) !important;
--bubble-icon-color: white !important;
}
.bubble-button-card-container {
background: rgba(22,22,22,0) !important;
border-radius: 10px;
}
.bubble-button-background {
background-color: ${state === 'on' ? 'orange' : ''} !important;
opacity: 0.7 !important;
border-radius: 10px;
}
scrolling_effect: false
show_last_changed: false
- type: custom:mod-card
card_mod:
style: |
ha-card {
height: 1px;
border-bottom: 1px;
background-color: grey !important;
margin: 0px 20px 5px 20px;
}
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.wandlicht
name: Wandlicht
show_state: false
max_value: 100
min_value: 0
step: 5
light_transition: true
tap_to_slide: true
light_transition_time: "60"
button_action:
tap_action:
action: toggle
card_layout: normal
allow_light_slider_to_0: true
tap_action:
action: toggle
sub_button:
- entity: automation.abendlicht_lichtfarbe_random_andern
show_name: true
show_icon: false
name: Autom.
- entity: input_button.button_lichtfarbe_random_andern
show_name: true
show_icon: false
name: Farbe
hold_action:
action: more-info
styles: |
* {
font-size: 12px !important;
}
ha-card {
--bubble-icon-background-color: rgba(55,55,55,0.2) !important;
--bubble-icon-color: white !important;
--bubble-accent-color: rgba(55,55,55,0.3);
--bubble-button-border-radius: 3px;
}
.bubble-button-card-container {
background: rgba(22,22,22,0) !important;
border-radius: 10px;
}
.bubble-button-background {
opacity: 0.7 !important;
border-radius: 10px;
}
- type: custom:mod-card
card_mod:
style: |
ha-card {
height: 1px;
border-bottom: 1px;
background-color: grey !important;
margin: 05px 20px 5px 20px;
}
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.couchlicht
name: Couchlicht
show_state: false
max_value: 100
min_value: 0
step: 5
light_transition: true
tap_to_slide: true
light_transition_time: "60"
button_action:
tap_action:
action: toggle
card_layout: normal
allow_light_slider_to_0: true
tap_action:
action: toggle
sub_button: []
hold_action:
action: more-info
styles: |
* {
font-size: 12px !important;
}
ha-card {
--bubble-icon-background-color: rgba(55,55,55,0.2) !important;
--bubble-icon-color: white !important;
--bubble-button-border-radius: 3px;
}
.bubble-button-card-container {
background: rgba(22,22,22,0) !important;
border-radius: 10px;
}
.bubble-button-background {
opacity: 0.7 !important;
border-radius: 10px;
}
card_mod:
style: |
ha-card {
padding-right: 10px;
border-right: 1px solid grey !important;
border-left: none !important;
border-top: none !important;
border-bottom: none !important;
}
icon: mdi:lamp-outline
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.schlafzimmerlicht
name: ""
show_state: false
max_value: 100
min_value: 0
step: 5
light_transition: true
tap_to_slide: true
light_transition_time: "60"
button_action:
tap_action:
action: toggle
card_layout: normal
allow_light_slider_to_0: true
tap_action:
action: toggle
sub_button: []
hold_action:
action: more-info
icon: mdi:lightbulb-variant
styles: |
* {
font-size: 12px !important;
}
ha-card {
--bubble-icon-background-color: rgba(55,55,55,0.2) !important;
--bubble-icon-color: white !important;
--bubble-button-border-radius: 3px;
}
.bubble-button-card-container {
background: rgba(22,22,22,0) !important;
border-radius: 10px;
}
.bubble-button-background {
opacity: 0.7 !important;
border-radius: 10px;
}
- type: custom:mod-card
card_mod:
style: |
ha-card {
height: 1px;
border-bottom: 1px;
background-color: grey !important;
margin: 0px 20px 5px 20px;
}
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
sub_button: []
button_type: switch
entity: switch.modelleisenbahn_licht_tasmota
card_layout: normal
show_icon: true
show_name: true
show_state: false
tap_action:
action: toggle
hold_action:
action: more-info
button_action: {}
icon: mdi:railroad-light
name: Modellbahn Licht
styles: |
* {
font-size: 12px !important;
}
ha-card {
--bubble-icon-background-color: rgba(55,55,55,0.2) !important;
--bubble-icon-color: white !important;
}
.bubble-button-card-container {
background: rgba(22,22,22,0) !important;
border-radius: 10px;
}
.bubble-button-background {
background-color: ${state === 'on' ? 'orange' : ''} !important;
opacity: 0.7 !important;
border-radius: 10px;
}
scrolling_effect: true
card_mod:
style: |
ha-card {
padding-right: 10px;
border-right: 1px solid grey !important;
border-left: none !important;
border-top: none !important;
border-bottom: none !important;
}
- type: custom:bubble-card
card_type: button
sub_button: []
button_type: switch
entity: switch.lok_einschalten_2
card_layout: normal
show_icon: true
show_name: true
show_state: false
tap_action:
action: toggle
hold_action:
action: more-info
button_action: {}
icon: mdi:train
name: Lok
styles: |
* {
font-size: 12px !important;
}
ha-card {
--bubble-icon-background-color: rgba(55,55,55,0.2) !important;
--bubble-icon-color: white !important;
}
.bubble-button-card-container {
background: rgba(22,22,22,0) !important;
border-radius: 10px;
}
.bubble-button-background {
background-color: ${state === 'on' ? 'orange' : ''} !important;
opacity: 0.7 !important;
border-radius: 10px;
}
scrolling_effect: true
- type: custom:mod-card
card_mod:
style: |
ha-card {
height: 1px;
border-bottom: 1px;
background-color: grey !important;
margin: 5px 20px 5px 20px;
}
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
sub_button: []
button_type: switch
entity: switch.3d_drucker_schalter
card_layout: normal
show_icon: true
show_name: true
show_state: false
scrolling_effect: false
tap_action:
action: toggle
hold_action:
action: more-info
button_action: {}
icon: mdi:printer-3d-nozzle
name: Drucker
styles: |
* {
font-size: 12px !important;
}
ha-card {
--bubble-icon-background-color: rgba(55,55,55,0.2) !important;
--bubble-icon-color: white !important;
}
.bubble-button-card-container {
background: rgba(22,22,22,0) !important;
border-radius: 10px;
}
.bubble-button-background {
background-color: ${state === 'on' ? 'blue' : ''} !important;
opacity: 0.7 !important;
border-radius: 10px;
}
card_mod:
style: |
ha-card {
padding-right: 10px;
border-right: 1px solid grey !important;
border-left: none !important;
border-top: none !important;
border-bottom: none !important;
}
- type: custom:bubble-card
card_type: button
sub_button: []
button_type: switch
entity: fan.starkvind_luftreiniger_ventilator
card_layout: normal
show_icon: true
show_name: true
show_state: false
scrolling_effect: false
modules:
- animated_icon
animated_icon:
mode: fan
tap_action:
action: toggle
hold_action:
action: more-info
button_action: {}
icon: mdi:fan
name: Luftreiniger
styles: |
* {
font-size: 12px !important;
}
ha-card {
--bubble-icon-background-color: rgba(55,55,55,0.2) !important;
--bubble-icon-color: white !important;
}
.bubble-button-card-container {
background: rgba(22,22,22,0) !important;
border-radius: 10px;
}
.bubble-button-background {
background-color: ${state === 'on' ? 'steelblue' : ''} !important;
opacity: 0.7 !important;
border-radius: 10px;
}
card_mod:
style: |
ha-card {
padding-right: 10px;
margin-bottom: 5px;
border-right: 1px solid grey !important;
border-left: none !important;
border-top: none !important;
border-bottom: none !important;
}
- type: custom:bubble-card
card_type: button
sub_button: []
button_type: state
entity: sensor.starkvind_luftreiniger_pm2_5
card_layout: normal
show_icon: true
show_name: true
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
button_action: {}
icon: m3of:air
name: PPM
styles: |
* {
font-size: 12px !important;
}
ha-card {
--bubble-icon-background-color: rgba(55,55,55,0.2) !important;
--bubble-icon-color: gray !important;
}
.bubble-button-card-container {
background: rgba(22,22,22,0) !important;
border-radius: 10px;
}
.bubble-button-background {
background-color: ${state > '55' ? 'red' : ''} !important;
opacity: 0.2 !important;
border-radius: 10px;
}
scrolling_effect: true
Dann habe ich mit der Bubble-Card auch noch meine Batterieanzeige realisiert. Wirklich cool gemacht, das Icon zeigt dynamisch den Ladestand an und rechts sehe ich Lade-/ oder Endladeleistung und Spannung. Alle Werte können für Details angeklickt werden.
Code für Batterieanzeige / bubble-card
type: custom:bubble-card
name: Hausspeicher
card_type: button
button_type: state
entity: sensor.batterie_ladezustand
tap_action:
action: navigate
navigation_path: "#batterie"
modules:
- progress_bar
progress_bar:
progress_color: red
min_value: 0
max_value: 100
conditional_colors:
condition_color_1: orange
condition_color_2: green
condition_1:
- condition: numeric_state
entity_id: sensor.batterie_ladezustand
below: 55
condition_2:
- condition: numeric_state
entity_id: sensor.batterie_ladezustand
above: 55
sub_button:
- entity: sensor.acpowerzubatterie_energy_power
show_icon: false
state_background: false
show_background: false
show_state: true
name: ""
show_name: true
visibility:
- condition: state
entity: switch.acpowerzubatterie
state: "on"
- entity: sensor.acpowervonbatterie_energy_power
show_state: true
show_icon: false
state_background: false
show_background: false
visibility:
- condition: state
entity: switch.acpowervonbatterie
state: "on"
name: ""
show_name: true
- entity: sensor.batterie_neo800_spannung_eingang_1
show_icon: false
show_name: false
show_state: true
state_background: false
show_background: false
styles: |
.bubble-button-card-container {
background: linear-gradient(to right, darkorange 15%, orange 25%, yellow 50%, green 100%);
/* opacity: 0.5 !important; */
clip-path: inset(0 calc(100% - var(--bar-percent)) 0 0);
border-radius: 10px !important;
border-radius: 3px !important;
}
.bubble-name-container {
color: #3a3a3a !important;
}
.bubble-sub-button-name-container {
color: #3a3a3a !important;
}
.bubble-action-enabled {
border-radius: 3px !important;
margin: 0 5px 0 0 !important;
}
.bubble-button-background {
/* background: linear-gradient(to right, var(--orange-color), #cd101000); */
}
.bubble-state {
font-size: 14px;
font-weight: bold;
opacity: 1;
}
.bubble-icon {
color: #3a3a3a !important;
}
.type-custom-bubble-card{
margin: 0px 0px 0px 0px !important;
}
rows: "0.75"