Ich habe mit der BubbleCard eine Kamera-Karte gebaut. In diesem Fall für meine Reolink Trackmix. Falls jemand Interesse hat … nachfolgend der Code:
type: grid
cards:
- type: custom:bubble-card
card_type: button
button_type: name
name: Kamera Garten
show_icon: false
icon: mdi:cctv
styles: |-
.bubble-name {
justify-content: center !important;
text-align: center;
}
rows: "1"
- type: vertical-stack
cards:
- camera_view: live
fit_mode: cover
type: picture-glance
image: https://demo.home-assistant.io/stub_config/kitchen.png
entities: []
camera_image: camera.kamera_garten_standardauflosung_objektiv_0
- camera_view: live
fit_mode: cover
type: picture-glance
image: https://demo.home-assistant.io/stub_config/kitchen.png
entities: []
camera_image: camera.kamera_garten_standardauflosung_objektiv_1
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: switch
entity: camera.kamera_garten_standardausflösung_objektiv_0
show_icon: false
show_name: false
scrolling_effect: false
sub_button:
- entity: light.kamera_garten_scheinwerfer
icon: mdi:spotlight-beam
tap_action:
action: toggle
show_attribute: false
show_state: false
state_background: true
show_background: true
name: Spot on/off
- entity: switch.kamera_garten_audio_aufnehmen
icon: mdi:microphone
tap_action:
action: toggle
show_name: false
show_state: false
name: Audio on/off
- entity: switch.kamera_garten_aufzeichnen
icon: mdi:record-rec
tap_action:
action: toggle
name: Record on/off
- entity: button.kamera_garten_ptz_kalibrieren
name: PTZ calibration
show_name: false
show_attribute: false
show_background: true
state_background: true
icon: mdi:pan
tap_action:
action: perform-action
perform_action: button.press
target:
entity_id: button.kamera_garten_ptz_kalibrieren
- entity: switch.kamera_auffahrt_automatisch_zur_startposition
name: Starting posistion
icon: mdi:crosshairs-gps
tap_action:
action: perform-action
perform_action: button.press
target:
entity_id: button.kamera_garten_gehe_zu_startposition
show_background: true
state_background: false
- entity: switch.kamera_garten_automatisches_tracking
name: Autotracking on/off
icon: mdi:target-account
tap_action:
action: toggle
card_layout: large-sub-buttons-grid
modules: []
styles: |-
.large .bubble-sub-button-container {
position: relative; /* UPDATE HERE*/
display: grid;
grid-template-areas:
'a1 a2 a3'
'b1 b2 b3' !important;
grid-template-columns: 20px 40px 20px;
grid-template-rows: 50px 50px;
justify-content: center;
justify-self: center;
justify-items: center;
align-self: center;
align-items: center;
width: 100%;
gap: 10px;
margin-left: -10px;
}
#.bubble-sub-button {
# background: transparent !important;
#}
.bubble-sub-button-icon {
--mdc-icon-size: 20px !important;
}
.bubble-sub-button-1 {
grid-area: a1;
}
.bubble-sub-button-2 {
grid-area: a2;
}
.bubble-sub-button-3 {
grid-area: a3;
}
.bubble-sub-button-4 {
grid-area: b1;
}
.bubble-sub-button-5 {
grid-area: b2;
}
.bubble-sub-button-6 {
grid-area: b3;
}
rows: "2"
- type: custom:bubble-card
card_type: button
button_type: switch
entity: camera.kamera_garten_standardausflösung_objektiv_0
show_icon: false
show_name: false
scrolling_effect: false
sub_button:
- entity: button.kamera_garten_ptz_links
icon: mdi:chevron-left-circle-outline
tap_action:
action: call-service
service: button.press
service_data: {}
target:
entity_id: button.kamera_garten_ptz_links
- entity: button.kamera_garten_ptz_auf
icon: mdi:chevron-up-circle-outline
tap_action:
action: call-service
service: button.press
service_data: {}
target:
entity_id: button.kamera_garten_ptz_auf
- entity: button.kamera_garten_ptz_ab
icon: mdi:chevron-down-circle-outline
tap_action:
action: call-service
service: button.press
service_data: {}
target:
entity_id: button.kamera_garten_ptz_ab
- entity: button.kamera_garten_ptz_rechts
icon: mdi:chevron-right-circle-outline
tap_action:
action: call-service
service: button.press
service_data: {}
target:
entity_id: button.kamera_garten_ptz_rechts
card_layout: large-sub-buttons-grid
modules: []
styles: |-
.large .bubble-sub-button-container {
position: relative; /* UPDATE HERE*/
display: grid;
grid-template-areas:
'a b c'
'd e f'
'g h i'!important;
grid-template-columns: 10px 70px 10px;
grid-template-rows: 1fr 1fr 1fr;
justify-content: center;
justify-self: start;
justify-items: center;
align-self: center;
align-items: end;
width: 100%;
gap: 0px;
margin-left: -15px;
}
.bubble-sub-button {
background: transparent !important;
}
.bubble-sub-button-icon {
--mdc-icon-size: 40px !important;
}
.bubble-sub-button-1 {
grid-area: d;
}
.bubble-sub-button-2 {
grid-area: b;
}
.bubble-sub-button-3 {
grid-area: h;
}
.bubble-sub-button-4 {
grid-area: f;
}
rows: "2"
- type: custom:bubble-card
card_type: button
button_type: switch
entity: camera.kamera_garten_standardausflösung_objektiv_0
show_icon: false
show_name: false
scrolling_effect: false
sub_button:
- entity: binary_sensor.kamera_garten_bewegung
icon: mdi:motion-sensor
tap_action:
action: none
show_attribute: false
show_state: false
state_background: true
show_background: true
- entity: binary_sensor.kamera_garten_person
icon: mdi:account
tap_action:
action: none
show_name: false
show_state: false
- entity: binary_sensor.kamera_garten_tier
icon: mdi:paw
tap_action:
action: none
- entity: select.kamera_garten_ptz_voreinstellung
name: PTZ
show_name: true
show_attribute: false
show_background: true
state_background: true
card_layout: large-sub-buttons-grid
modules: []
styles: |-
.large .bubble-sub-button-container {
position: relative; /* UPDATE HERE*/
display: grid;
grid-template-areas:
'a a a'
'b1 b2 b3' !important;
grid-template-columns: 20px 40px 20px;
grid-template-rows: 50px 50px;
justify-content: center;
justify-self: center;
justify-items: center;
align-self: center;
align-items: center;
width: 100%;
gap: 10px;
margin-left: -10px;
}
#.bubble-sub-button {
# background: transparent !important;
#}
.bubble-sub-button-icon {
--mdc-icon-size: 20px !important;
}
.bubble-sub-button-1 {
grid-area: b1;
}
.bubble-sub-button-2 {
grid-area: b2;
}
.bubble-sub-button-3 {
grid-area: b3;
}
.bubble-sub-button-4 {
grid-area: a;
}
rows: "2"
- type: custom:bubble-card
card_type: button
button_type: slider
entity: number.kamera_garten_zoom
show_icon: false
show_name: true
scrolling_effect: false
sub_button: []
card_layout: large-sub-buttons-grid
modules: []
styles: |-
.bubble-range-fill-container {
border: 1px solid;
}
.bubble-range-fill {
height: 30%;
align-self: center;
border: 0px solid;
background: linear-gradient(145deg,rgba(7, 189, 223, 0.1) 0%, rgba(0, 158, 3, 0.7) 100%) !important;
}
.bubble-name {
justify-content: center !important;
text-align: center;
}
.bubble-state {
justify-content: center !important;
text-align: center;
}
rows: "1"
slider_live_update: true
min_value: 1000
max_value: 6000
step: 1
show_state: true
name: Zoom
grid_options:
columns: 24
rows: auto
column_span: 1