- theme: Backend-selected
title: Полигон
icon: mdi:ab-testing
layout: {}
type: custom:horizontal-layout
path: polygon
badges: []
cards:
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: state
icon: ''
show_name: true
card_layout: large
show_icon: true
force_icon: false
show_state: false
show_last_changed: false
show_last_updated: true
show_attribute: false
entity: person.mikhail
button_action:
tap_action:
action: more-info
styles: |-
.bubble-button-background {
background-color: ${
{
'home': '#8AD926FF',
'away': '#1982C4FF',
}[state] ?? '#ff0000AA'
};
}
- type: custom:bubble-card
card_type: button
button_type: switch
entity: person.roman
icon: ''
show_name: true
card_layout: large
show_state: false
show_last_changed: false
show_last_updated: true
button_action:
tap_action:
action: more-info
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: switch
icon: mdi:weather-partly-cloudy
show_name: false
card_layout: large
show_icon: true
force_icon: true
show_state: true
show_last_changed: false
show_last_updated: false
show_attribute: true
entity: weather.yandex_weather
button_action:
tap_action:
action: more-info
attribute: temperature
modules:
- get_state_attribute
get_state_attribute:
- entity: weather.yandex_weather
- entity: weather.yandex_weather
attribute: temperature
- entity: weather.yandex_weather
attribute: wind_speed
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.yeelink_strip6_c28f_light
name: Светодиодная лента
icon: mdi:led-strip-variant
card_layout: large
sub_button: []
rows: '1'
slider_live_update: false
read_only_slider: false
use_accent_color: true
allow_light_slider_to_0: false
light_transition: true
- type: custom:bubble-card
card_type: media-player
name: ТВ Приставка
entity: media_player.mibox4
show_state: true
show_last_updated: false
show_attribute: false
card_layout: large
scrolling_effect: true
show_icon: true
force_icon: true
show_name: true
show_last_changed: false
columns: 2
rows: 1
min_volume: 0
max_volume: 100
cover_background: true
hide:
play_pause_button: true
volume_button: false
previous_button: true
next_button: true
power_button: true
sub_button: []
icon: mdi:television
attribute: friendly_name
button_action:
tap_action:
action: more-info
modules:
- conditional_icon
icon_container_color:
color: blue-grey
conditional_icon:
advanced_settings:
color_true: dark-grey
color_false: dark-grey
conditions:
- condition: device
device_id: 4a904b5168cb609dd3e9c788d17a3a34
domain: media_player
entity_id: 31690791dbcacc0190eaf40887eee06d
type: is_idle
- type: custom:bubble-card
card_type: cover
button_type: state
event_action:
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
icon_open: mdi:gate-open
entity: vacuum.dreame_p2009_05bd_robot_cleaner
sub_button: []
card_layout: large
icon_down: mdi:window-shutter
icon_up: mdi:window-shutter-open
force_icon: true
icon_close: mdi:gate
show_icon: true
name: Ворота
show_last_changed: false
show_last_updated: false
show_state: true
show_attribute: false
rows: '1'
button_action: {}
- type: custom:bubble-card
card_type: button
button_type: switch
entity: vacuum.dreame_p2009_05bd_robot_cleaner
force_icon: false
show_last_changed: false
show_state: true
show_attribute: true
attribute: battery_level
sub_button:
- entity: button.dreame_p2009_05bd_start_charge
icon: mdi:home
show_attribute: false
show_last_updated: false
- entity: button.dreame_p2009_05bd_start_sweep
icon: mdi:play
- entity: button.dreame_p2009_05bd_stop_sweeping
icon: mdi:stop
- entity: camera.dreame_p2009_05bd_map
icon: mdi:map-search
card_layout: large
- type: custom:bubble-card
card_type: select
entity: select.dreame_p2009_05bd_mode
force_icon: false
show_icon: true
show_state: true
show_last_changed: false
show_last_updated: false
show_attribute: true
attribute: options
card_layout: large-2-rows
sub_button: []
name: Кнопка выбора
icon: mdi:vacuum
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: switch
entity: light.yeelink_strip6_c28f_light
show_name: true
force_icon: true
sub_button:
- entity: light.yeelink_strip6_c28f_light
show_background: true
state_background: false
- entity: light.yeelink_strip6_c28f_light
state_background: false
light_background: true
- entity: light.yeelink_strip6_c28f_light
state_background: false
show_name: false
show_state: false
show_last_changed: false
show_last_updated: false
button_action:
tap_action:
action: none
card_layout: large
scrolling_effect: true
show_icon: true
use_accent_color: false
show_state: true
rows: '1'
modules:
- conditional_icon
conditional_icon:
advanced_settings:
color_true: dark-grey
color_false: dark-grey
conditions:
- condition: state
entity_id: light.yeelink_strip6_c28f_light
state:
- 'on'
- type: custom:bubble-card
card_type: button
button_type: switch
entity: input_boolean.silent_mode
modules:
- toggle_switch
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.yeelink_strip6_c28f_light
modules:
- conditional_icon
- color_temp_slider
card_layout: large
conditional_icon:
advanced_settings:
color_true: dark-grey
color_false: dark-grey
conditions:
- condition: device
type: is_off
device_id: 29ec80c4fabc681c70620ed9d38b7941
entity_id: 3a98eae887f10ac4498a9060a9672fa3
domain: light
tap_to_slide: false
relative_slide: false
read_only_slider: false
slider_live_update: false
use_accent_color: false
styles: |
.bubble-buttons-container {
--bubble-sub-button-light-background-color: var(--color-theme);
#--icon-primary-color: grey;
}
allow_light_slider_to_0: true
light_transition: false
show_state: true
show_last_changed: false
show_last_updated: false
show_attribute: true
attribute: brightness
- type: custom:bubble-card
card_type: button
button_type: slider
entity: timer.bathroom_timer
modules:
- timer_progress
- conditional_icon
timer_progress:
inverted: false
startColor: disabled
endColor: disabled
timer_entity: timer.bathroom_timer
show_state: true
show_last_changed: false
show_last_updated: false
button_action:
tap_action:
action: perform-action
target:
entity_id: timer.bathroom_timer
perform_action: timer.pause
sub_button:
- entity: timer.bathroom_timer
show_attribute: false
attribute: restore
tap_action:
action: perform-action
target:
entity_id:
- timer.bathroom_timer
perform_action: timer.pause
icon: mdi:pause
show_background: true
state_background: false
- icon: mdi:play
tap_action:
action: call-service
service: timer.start
target:
entity_id:
- timer.bathroom_timer
state_background: false
card_layout: large
show_name: true
show_attribute: true
attribute: duration
icon_container_color:
color: none
conditional_icon:
advanced_settings:
color_true: dark-grey
color_false: dark-grey
conditions:
- condition: state
entity_id: timer.bathroom_timer
state:
- active
- type: custom:bubble-card
card_type: button
button_type: switch
entity: sensor.dreame_p2009_05bd_battery_level
force_icon: false
show_icon: true
scrolling_effect: true
show_state: false
show_last_changed: false
sub_button:
- entity: sensor.dreame_p2009_05bd_battery_level
show_state: true
show_icon: false
state_background: false
show_background: true
modules:
- conditional_icon
- progress_bar
progress_bar:
progress_color: disabled
min_value: 0
max_value: 100
card_layout: large
conditional_icon:
advanced_settings:
color_true: dark-grey
color_false: dark-grey
- type: custom:bubble-card
card_type: cover
button_type: state
event_action:
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
icon_open: mdi:gate-open
entity: vacuum.dreame_p2009_05bd_robot_cleaner
sub_button: []
card_layout: large
icon_down: mdi:arrow-down-bold
icon_up: mdi:arrow-up-bold
force_icon: true
icon_close: mdi:gate
show_icon: true
name: Ворота
show_last_changed: false
show_last_updated: false
show_state: true
show_attribute: false
rows: '1'
styles: |
ha-card {
--bubble-main-background-color: rgba(12,120,50,0.5) !important;
}
ha-card {
--bubble-icon-background-color: rgb(230, 128, 41) !important;
}
.bubble-sub-button {
height: 148px !important;
min-width: 148px !important;
}
.bubble-sub-button-2 {
background-color: blue !important;
}
.bubble-sub-button-icon {
--mdc-icon-size: 126px !important;
}
- type: custom:bubble-card
card_type: button
card_layout: large
button_type: name
show_icon: false
show_name: false
sub_button:
- name: Mute
icon: mdi:volume-off
tap_action:
action: toggle
service: input_boolean.toggle
entity: input_boolean.silent_mode
- name: Covers
entity: cover.all_group
show_background: true
tap_action:
action: navigate
navigation_path: '#cover'
- name: Shopping list
icon: mdi:cart-outline
show_background: true
tap_action:
action: navigate
navigation_path: '#shopping-list'
- name: Security
icon: mdi:video-outline
show_background: true
tap_action:
action: navigate
navigation_path: '#security'
- name: Settings
icon: mdi:cog
show_background: true
tap_action:
action: navigate
navigation_path: '#configuration'
styles: |
.card-content {
width: 100%;
margin: 0 !important;
}
.bubble-button-card-container {
background: none;
border: none;
}
.bubble-sub-button {
height: 46px !important;
width: 46px !important;
}
.bubble-sub-button-container {
display: flex !important;
width: 100%;
justify-content: space-between !important;
}
.bubble-sub-button-icon {
--mdc-icon-size: inherit !important;
}
.bubble-name-container {
margin-right: 0px !important;
}
- type: custom:bubble-card
card_type: button
card_layout: large
button_type: name
show_icon: false
show_name: false
sub_button:
- name: Mute
icon: mdi:volume-off
tap_action:
action: toggle
service: input_boolean.toggle
entity: input_boolean.silent_mode
- name: Covers
entity: cover.all_group
show_background: true
tap_action:
action: navigate
navigation_path: '#cover'
- name: Shopping list
icon: mdi:cart-outline
show_background: true
tap_action:
action: navigate
navigation_path: '#shopping-list'
- name: Security
icon: mdi:video-outline
show_background: true
tap_action:
action: navigate
navigation_path: '#security'
- name: Settings
icon: mdi:cog
show_background: true
tap_action:
action: navigate
navigation_path: '#configuration'
styles: |
.card-content {
width: 100%;
margin: 0 !important;
}
.bubble-sub-button {
height: 43px !important;
width: 45px !important;
}
.bubble-sub-button-container {
display: flex !important;
width: 100%;
justify-content: space-between !important;
}
.bubble-sub-button-icon {
--mdc-icon-size: inherit !important;
}
.bubble-name-container {
margin-right: 0px !important;
}
- type: custom:bubble-card
card_type: button
button_type: state
entity: timer.bathroom_timer
sub_button:
- entity: timer.bathroom_timer
tap_action:
action: call-service
service: timer.start
target:
entity_id: timer.bathroom_timer
icon: mdi:play
- entity: timer.bathroom_timer
icon: mdi:pause
tap_action:
action: call-service
service: timer.pause
target:
entity_id: timer.bathroom_timer
- entity: timer.bathroom_timer
icon: mdi:cancel
tap_action:
action: call-service
target:
entity_id: timer.bathroom_timer
service: timer.cancel
- entity: timer.bathroom_timer
tap_action:
action: call-service
service: timer.finish
target:
entity_id: timer.bathroom_timer
icon: mdi:clock-end
show_attribute: false
show_state: true
show_name: true
{
card.timerEntity = hass.states[entity];
const now = new Date();
const endTime = new Date(card.timerEntity.attributes.finishes_at);
const runningTime = Math.round((endTime - now) / 1000);
const maxtime = Math.round(new Date("1970-01-01 " + card.timerEntity.attributes.duration + " UTC") / 1000);
const remainingTime = Math.round(new Date("1970-01-01 " + card.timerEntity.attributes.remaining + " UTC") / 1000);
var percentage = 0;
if (isNaN(runningTime)) {
percentage = 100 - Math.round( 100.0 * remainingTime / maxtime);
} else {
percentage = 100 - Math.round( 100.0 * runningTime / maxtime);
}
if (isNaN(percentage)) {
return "0%";
} else {
return "" + percentage +"%";
}
})()};
}
.bubble-icon-container {
background: radial-gradient(
var(--card-background-color) 60%,
transparent 0%
), conic-gradient(
var(--circle-color) var(--percentage) 0%,
var(--card-background-color) 0% 100%
) !important;
}
.bubble-icon-container:after {
content: "" !important;
height: 100% !important;
width: 100% !important;
position: absolute !important;
border-radius: 50% !important;
background: (var(--bubble-button-icon-background-color), 0.1) !important;
}
${(() => {
function UpdateState(){
try {
let now = new Date();
let endTime = new Date(card.timerEntity.attributes.finishes_at);
let runningTime = Math.round((endTime - now)/1000);
let hours = Math.floor(runningTime / 3600);
let minutes = Math.floor((runningTime - (hours * 3600)) / 60);
let remainingSeconds = runningTime % 60;
card.querySelector('.bubble-state').innerText =
(hours > 0 ? (hours + ":") : "") +
("0" + minutes).slice(-2) + ":" +
("0" + remainingSeconds).slice(-2);
} catch (error) {
card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.duration;
}
};
if (card.timer == null && card.timerEntity.state === 'active') {
card.timer = setInterval(()=>{UpdateState()}, 500);
}else if (card.timerEntity.state != 'active'){
clearInterval(card.timer);
card.timer = null;
if (card.timerEntity.state !='paused') {
card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.duration;
} else if(card.timerEntity.state==='paused') {
card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.remaining;
}
}
})()}
${(() => {
subButtonIcon[0].setAttribute("icon",card.timerEntity.state != 'active' ?'mdi:play' : 'mdi:replay');
})()}
${(() => {
if (card.timerEntity.state != 'active') {
card.querySelector('.bubble-sub-button-2').classList.add("hidden");
}
})()}
${(() => {
if (card.timerEntity.state === 'idle') {
card.querySelector('.bubble-sub-button-3').classList.add("hidden");
}
})()}
${(() => {
if (card.timerEntity.state === 'idle') {
card.querySelector('.bubble-sub-button-4').classList.add("hidden");
}
})()}
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
card_layout: large
button_type: name
show_icon: false
show_name: false
sub_button:
- name: Mute
icon: mdi:volume-off
tap_action:
action: toggle
service: input_boolean.toggle
entity: input_boolean.silent_mode
- name: Covers
entity: cover.all_group
show_background: true
tap_action:
action: navigate
navigation_path: '#cover'
- name: Shopping list
icon: mdi:cart-outline
show_background: true
tap_action:
action: navigate
navigation_path: '#shopping-list'
- name: Security
icon: mdi:video-outline
show_background: true
tap_action:
action: navigate
navigation_path: '#security'
- name: Settings
icon: mdi:cog
show_background: true
tap_action:
action: navigate
navigation_path: '#configuration'
styles: |
.card-content {
width: 100%;
margin: 0 !important;
}
.bubble-sub-button {
height: 43px !important;
width: 45px !important;
}
.bubble-sub-button-container {
display: flex !important;
width: 100%;
justify-content: space-between !important;
}
.bubble-sub-button-icon {
--mdc-icon-size: inherit !important;
}
.bubble-name-container {
margin-right: 0px !important;
}
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
card_layout: large
button_type: name
show_icon: false
show_name: false
sub_button:
- name: Mute
icon: mdi:volume-off
tap_action:
action: toggle
service: input_boolean.toggle
entity: input_boolean.silent_mode
- name: Covers
entity: cover.all_group
show_background: true
tap_action:
action: navigate
navigation_path: '#cover'
- name: Shopping list
icon: mdi:cart-outline
show_background: true
tap_action:
action: navigate
navigation_path: '#shopping-list'
- name: Security
icon: mdi:video-outline
show_background: true
tap_action:
action: navigate
navigation_path: '#security'
- name: Settings
icon: mdi:cog
show_background: true
tap_action:
action: navigate
navigation_path: '#configuration'
styles: |
.card-content {
width: 100%;
margin: 0 !important;
}
.bubble-sub-button {
height: 43px !important;
width: 45px !important;
}
.bubble-sub-button-container {
display: flex !important;
width: 100%;
justify-content: space-between !important;
}
.bubble-sub-button-icon {
--mdc-icon-size: inherit !important;
}
.bubble-name-container {
margin-right: 0px !important;
}
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
card_layout: large
button_type: name
show_icon: false
show_name: false
sub_button:
- name: Mute
icon: mdi:volume-off
tap_action:
action: toggle
service: input_boolean.toggle
entity: input_boolean.silent_mode
- name: Covers
entity: cover.all_group
show_background: true
tap_action:
action: navigate
navigation_path: '#cover'
- name: Shopping list
icon: mdi:cart-outline
show_background: true
tap_action:
action: navigate
navigation_path: '#shopping-list'
- name: Security
icon: mdi:video-outline
show_background: true
tap_action:
action: navigate
navigation_path: '#security'
- name: Settings
icon: mdi:cog
show_background: true
tap_action:
action: navigate
navigation_path: '#configuration'
styles: |
.card-content {
width: 100%;
margin: 0 !important;
}
.bubble-sub-button {
height: 43px !important;
width: 45px !important;
}
.bubble-sub-button-container {
display: flex !important;
width: 100%;
justify-content: space-between !important;
}
.bubble-sub-button-icon {
--mdc-icon-size: inherit !important;
}
.bubble-name-container {
margin-right: 0px !important;
}
- type: custom:auto-entities
card:
square: false
type: grid
columns: 1
card_param: cards
filter:
template: |-
{%- for state in states.sensor if "battery" in state.entity_id -%}
{{
{
"entity": state.entity_id,
"name": (state.name | regex_replace('(?i)\\s*Battery.*$','') | replace('_',' ') | trim),
"type": "custom:bubble-card",
"card_type": "button",
"button_type": "slider",
"show_last_changed": true,
"show_state": true,
"read_only_slider": true,
"scrolling_effect": true,
"tap_action": { "action": "none" },
"hold_action": { "action": "none" },
"double_tap_action": { "action": "none" },
"name_tap_action": { "action": "none" },
"state_tap_action": { "action": "none" },
"icon_tap_action": { "action": "more-info" },
"styles": ".bubble-range-fill {\n background-color: rgba(${state >= 90 ? '46, 204, 113' /* vibrant green */\n : state >= 75 ? '39, 174, 96' /* green */\n : state >= 60 ? '110, 207, 151' /* light green */\n : state >= 40 ? '241, 196, 15' /* yellow */\n : state >= 25 ? '230, 126, 34' /* orange */\n : state >= 10 ? '231, 76, 60' /* light red */\n : '192, 57, 43' /* dark red */}, 0.45) !important;\n}\n${(() => {\n let date = new Date(hass.states[entity].attributes['battery_last_replaced']);\n let options = { weekday: \"short\", year: \"numeric\", month: \"short\", day: \"numeric\" };\n card.querySelector('.bubble-sub-button-2').innerText = hass.states[entity].attributes['battery_last_replaced'] == null ?\n \"Не заменялась\" : date.toLocaleDateString(undefined, options);\n})()}\n",
"sub_button": [
{
"show_state": false,
"show_icon": false,
"state_background": false,
"show_background": false,
"show_attribute": true,
"attribute": "battery_type_and_quantity",
"tap_action": { "action": "none" }
},
{
"show_name": true,
"show_state": false,
"show_icon": false,
"state_background": false,
"show_background": false,
"tap_action": { "action": "none" }
}
],
"modules": ["default"]
}
}},
{%- endfor -%}
sort:
method: friendly_name
ignore_case: true
reverse: false
show_empty: true
- type: custom:bubble-card
card_type: button
button_type: switch
entity: alarm_control_panel.home_alarm
show_attribute: true
show_state: true
force_icon: false
show_icon: true
scrolling_effect: false
show_name: true
sub_button:
- entity: script.alarm_active_outside_house
icon: mdi:shield-lock
tap_action:
action: toggle
double_tap_action:
action: none
visibility:
- condition: state
entity: alarm_control_panel.home_alarm
state_not: armed_away
- icon: mdi:shield-home
tap_action:
action: toggle
double_tap_action:
action: none
visibility:
- condition: state
entity: alarm_control_panel.home_alarm
state_not: armed_home
entity: script.alarm_active_in_house
- icon: mdi:shield-off
state_background: true
show_background: true
tap_action:
action: toggle
visibility:
- condition: state
entity: alarm_control_panel.home_alarm
state_not: disarmed
entity: script.alarm_inactive
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
modules:
- subbutton_colors
- home-assistant-default
subbutton_colors:
subbutton1:
color: teal
condition:
- condition: state
state: armed_away
entity_id: alarm_control_panel.home_alarm
subbutton2:
color: green
condition:
- condition: state
state: armed_home
entity_id: alarm_control_panel.home_alarm
subbutton3:
color: indigo
condition:
- condition: state
state: disarmed
entity_id: alarm_control_panel.home_alarm
card_layout: large-sub-buttons-grid
button_action:
tap_action:
action: none
hold_action:
action: none
styles: >-
.bubble-icon-container {
animation: ${state === 'arming' ? 'fade-animate 3s ease-in-out infinite' : '' };
background: ${
state == 'disarmed'
? "blue"
: state == 'armed_home'
? "green"
: state == 'armed_away'
? "teal"
: state == 'arming'
? "orange"
: "#FF0000" // Red
} !important;
#border-radius: 25%!important;
color: white!important;
}
@keyframes fade-animate {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
${card.querySelector('.bubble-state').innerText =
state == 'armed_home' ? "Сработала сигнализация (дома)"
: state == 'armed_away' ? "Сработала сигнализация (вне дома)"
: state == 'disarmed' ? "Отключить сигнализацию"
: "Включение сигнализации"
}
${state == 'armed_home' ? icon.setAttribute("icon",
'mdi:shield-home')
: state == 'armed_away' ? icon.setAttribute("icon", 'mdi:shield-lock')
: state == 'disarmed' ? icon.setAttribute("icon", 'mdi:shield-off')
:icon.setAttribute("icon", 'mdi:shield')};
}
name: Сигнализация
- type: vertical-stack
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.system_monitor_processor_use
color_thresholds:
- value: 10
color: '#CCE5FF'
- '#66B2FF'
- '#0080FF'
- '#87c087'
- '#389638'
- '#FF9932'
- '#FF8000'
- value: 27
color: '#ff0000'
hours_to_show: 24
points_per_hour: 1.2
animate: false
update_interval: 120
aggregate_func: avg
line_width: 1
height: 52
group: true
show:
labels: false
fill: true
state: false
name: false
icon: false
card_mod:
style: |
ha-card {
#height: 74px !important;
#position: absolute;
#box-shadow: none;
#background: none;
border-radius: 40px;
#border-color: black;
border-width: 0px;
opacity: 1;
margin-bottom: -65px;
margin-top: 10px;
#margin-left: 0em;
#margin-right: 0em;
#width: 100%;
#left: 0;
#top: 0;
}
- type: custom:bubble-card
card_type: button
scrolling_effect: false
show_name: true
tap_action:
action: more-info
card_layout: large
name: ''
styles: |
.bubble-button-card-container {
background: transparent;
} .bubble-name {
font-weight: bold !important;
}
show_attribute: true
show_state: true
show_icon: true
button_type: state
button_action:
tap_action:
action: navigate
navigation_path: '#office-temp'
entity: weather.yandex_weather
show_last_updated: false
show_last_changed: false
attribute: temperature
modules:
- get_state_attribute
get_state_attribute:
- entity: weather.yandex_weather
- entity: weather.yandex_weather
attribute: temperature
- entity: weather.yandex_weather
attribute: wind_speed
- type: custom:bubble-card
card_type: button
button_type: state
entity: input_number.massimo_assorbimento_auto
show_state: true
name: Corrente massima
scrolling_effect: false
icon: mdi:battery-charging-high
force_icon: false
sub_button:
- entity: input_number.massimo_assorbimento_auto
tap_action:
action: call-service
target:
entity_id: entity
service: input_number.decrement
show_background: true
icon: mdi:minus
state_background: false
- entity: input_number.massimo_assorbimento_auto
tap_action:
action: call-service
target:
entity_id: entity
service: input_number.increment
icon: mdi:plus
state_background: false
card_layout: normal
- type: custom:bubble-card
card_type: button
button_type: switch
entity: sensor.xiaomi_lumi_sen_ill_mgl01
sub_button:
- entity: sensor.xiaomi_lumi_sen_ill_mgl01
show_state: true
show_icon: false
show_last_updated: false
show_last_changed: false
show_attribute: false
state_background: false
show_state: false
modules:
- color_temp_slider
- type: custom:bubble-card
card_type: button
show_attribute: false
show_name: true
show_icon: true
scrolling_effect: true
show_state: false
card_layout: large-2-rows
tap_action:
action: none
button_type: name
name: Гостиная
icon: mdi:sofa
sub_button:
- name: Освещение гостиной
icon: mdi:lightbulb-group
tap_action:
action: navigate
navigation_path: '#rasveta_boravak'
entity: light.yeelink_strip6_c28f_light
- name: Media
icon: mdi:television-off
tap_action:
action: navigate
navigation_path: '#media_boravak'
entity: media_player.mibox4
- name: Media
tap_action:
action: navigate
navigation_path: '#klima_boravak'
entity: input_boolean.automation_off
styles: >-
.bubble-icon-container {
overflow: visible;
}
.bubble-icon {
#color: teal!important;
opacity: .5 !important;
}
.bubble-icon-container {
opacity: 1 !important;
background: var(--icon-Background-Color); !important;
}
.large .bubble-sub-button-container {
position: absolute;
right: 10px; /* fiksna udaljenost od desne ivice */
top: calc((100% - 4 * 36px)/5); /* vertikalni razmak */
display: flex !important;
flex-direction: column;
gap: calc((100% - 4 * 36px)/5) !important;
justify-content: flex-start;
height: 100% !important;
padding-right: 0 !important;
}
.large .bubble-sub-button {
height: 36px !important;
}
.bubble-sub-button {
height: 36px !important;
width: 36px !important;
border-radius: 10px !important;
}
.bubble-sub-button-icon {
--mdc-icon-size: 24px !important;
}
${subButtonIcon[1].setAttribute("icon",
hass.states['media_player.mibox4'].state === 'on' ? 'mdi:television' :
'mdi:television-off')}
${subButtonIcon[2].setAttribute("icon",
hass.states['input_boolean.automation_off'].state === 'heat'
? 'mdi:fire'
: hass.states['input_boolean.automation_off'].state === 'heat_cool'
? 'mdi:sun-snowflake'
: hass.states['input_boolean.automation_off'].state === 'cool'
? 'mdi:snowflake'
: hass.states['input_boolean.automation_off'].state === 'dry'
? 'mdi:water-percent'
: hass.states['input_boolean.automation_off'].state === 'fan_only'
? 'mdi:fan'
: 'mdi:air-conditioner')}
card_mod:
style: |
.bubble-icon::after {
content: "{{states ('sensor.alarm_clock_a332_temperature')}}°C/{{states ('sensor.alarm_clock_a332_humidity')}}%";
position: absolute;
top: -30px;
left: 30px;
color: var(--primary-text-color);
opacity: 1 !important;
font-size: 12px;
}
{% if states('sensor.count_automation_off') | int > 0 %}
.bubble-sub-button-1:after {
content: "{{ states('sensor.count_automation_off') }}";
position: absolute;
top: -5px;
left: 22px;
width: 18px !important;
height: 15px !important;
display: flex;
align-items: center;
justify-content: center;
color: black;
background-color: orange;
border-radius: 20%;
font-size: 10px;
}
{% endif %}
{% if states('input_boolean.automation_off') !='off' %}
.bubble-sub-button-3:after {
content: "{{ state_attr('input_boolean.automation_off', 'temperature') }}";
position: absolute;
top: -5px;
left: 22px;
width: 18px !important;
height: 15px !important;
display: flex;
align-items: center;
justify-content: center;
color: black;
background-color: var(--primary-color);
border-radius: 20%;
font-size: 10px;
}
{% endif %}
grid_options:
columns: 6
rows: 3
modules:
- room_card
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
show_attribute: false
show_name: true
show_icon: true
scrolling_effect: true
show_state: false
card_layout: large-2-rows
tap_action:
action: none
button_type: name
name: Гостиная
icon: mdi:sofa
sub_button:
- name: Освещение гостиной
icon: mdi:lightbulb-group
tap_action:
action: navigate
navigation_path: '#rasveta_boravak'
entity: light.yeelink_strip6_c28f_light
show_background: true
light_background: true
state_background: true
show_name: false
- name: Media
icon: mdi:television-off
tap_action:
action: navigate
navigation_path: '#media_boravak'
entity: media_player.mibox4
- name: Media
tap_action:
action: navigate
navigation_path: '#klima_boravak'
entity: input_boolean.automation_off
styles: >-
.bubble-icon-container {
overflow: visible;
}
.bubble-icon {
#color: teal!important;
opacity: .5 !important;
}
.bubble-icon-container {
opacity: 1 !important;
background: var(--icon-Background-Color); !important;
}
.large .bubble-sub-button-container {
position: absolute;
right: 10px; /* fiksna udaljenost od desne ivice */
top: calc((100% - 4 * 36px)/5); /* vertikalni razmak */
display: flex !important;
flex-direction: column;
gap: calc((100% - 4 * 36px)/5) !important;
justify-content: flex-start;
height: 100% !important;
padding-right: 0 !important;
}
.large .bubble-sub-button {
height: 36px !important;
}
.bubble-sub-button {
height: 36px !important;
width: 36px !important;
border-radius: 10px !important;
}
.bubble-sub-button-icon {
--mdc-icon-size: 24px !important;
}
${subButtonIcon[1].setAttribute("icon",
hass.states['media_player.mibox4'].state === 'on' ?
'mdi:television' : 'mdi:television-off')}
${subButtonIcon[2].setAttribute("icon",
hass.states['input_boolean.automation_off'].state === 'heat'
? 'mdi:fire'
: hass.states['input_boolean.automation_off'].state === 'heat_cool'
? 'mdi:sun-snowflake'
: hass.states['input_boolean.automation_off'].state === 'cool'
? 'mdi:snowflake'
: hass.states['input_boolean.automation_off'].state === 'dry'
? 'mdi:water-percent'
: hass.states['input_boolean.automation_off'].state === 'fan_only'
? 'mdi:fan'
: 'mdi:air-conditioner')}
grid_options:
columns: 6
rows: 3
modules:
- room_card
card_mod:
style: |
.bubble-icon::after {
content: "{{states ('sensor.alarm_clock_a332_temperature)}}°C/{{states ('sensor.alarm_clock_a332_humidity')}}%";
position: absolute;
top: -30px;
left: 30px;
color: var(--primary-text-color);
opacity: 1 !important;
font-size: 12px;
}
{% if states('sensor.count_automation_off') | int > 0 %}
.bubble-sub-button-1:after {
content: "{{ states('sensor.count_automation_off') }}";
position: absolute;
top: -5px;
left: 22px;
width: 18px !important;
height: 15px !important;
display: flex;
align-items: center;
justify-content: center;
color: black;
background-color: orange;
border-radius: 20%;
font-size: 10px;
}
{% endif %}
{% if states('input_boolean.automation_off') !='off' %}
.bubble-sub-button-3:after {
content: "{{ state_attr('input_boolean.automation_off', 'temperature') }}";
position: absolute;
top: -5px;
left: 22px;
width: 18px !important;
height: 15px !important;
display: flex;
align-items: center;
justify-content: center;
color: black;
background-color: var(--primary-color);
border-radius: 20%;
font-size: 10px;
}
{% endif %}
- type: custom:bubble-card
card_type: button
show_attribute: false
show_name: true
show_icon: true
scrolling_effect: true
show_state: false
card_layout: large-2-rows
tap_action:
action: none
button_type: name
name: Гостиная
icon: mdi:sofa
sub_button:
- name: Освещение гостиной
icon: mdi:lightbulb-group
tap_action:
action: navigate
navigation_path: '#rasveta_boravak'
entity: light.yeelink_strip6_c28f_light
- name: Media
icon: mdi:television-off
tap_action:
action: navigate
navigation_path: '#media_boravak'
entity: media_player.mibox4
- name: Media
tap_action:
action: navigate
navigation_path: '#klima_boravak'
entity: input_boolean.automation_off
styles: >-
.bubble-icon-container {
overflow: visible;
}
.bubble-icon {
#color: teal!important;
opacity: .5 !important;
}
.bubble-icon-container {
opacity: 1 !important;
background: var(--icon-Background-Color); !important;
}
.large .bubble-sub-button-container {
position: absolute;
right: 10px; /* fiksna udaljenost od desne ivice */
top: calc((100% - 4 * 36px)/5); /* vertikalni razmak */
display: flex !important;
flex-direction: column;
gap: calc((100% - 4 * 36px)/5) !important;
justify-content: flex-start;
height: 100% !important;
padding-right: 0 !important;
}
.large .bubble-sub-button {
height: 36px !important;
}
.bubble-sub-button {
height: 36px !important;
width: 36px !important;
border-radius: 10px !important;
}
.bubble-sub-button-icon {
--mdc-icon-size: 24px !important;
}
${subButtonIcon[1].setAttribute("icon",
hass.states['media_player.mibox4'].state === 'on' ?
'mdi:television' : 'mdi:television-off')}
${subButtonIcon[2].setAttribute("icon",
hass.states['input_boolean.automation_off'].state === 'heat'
? 'mdi:fire'
: hass.states['input_boolean.automation_off'].state === 'heat_cool'
? 'mdi:sun-snowflake'
: hass.states['input_boolean.automation_off'].state === 'cool'
? 'mdi:snowflake'
: hass.states['input_boolean.automation_off'].state === 'dry'
? 'mdi:water-percent'
: hass.states['input_boolean.automation_off'].state === 'fan_only'
? 'mdi:fan'
: 'mdi:air-conditioner')}
card_mod:
style: |
.bubble-icon::after {
content: "{{states ('sensor.alarm_clock_a332_temperature')}}°C/{{states ('sensor.alarm_clock_a332_humidity')}}%";
position: absolute;
top: -30px;
left: 30px;
color: var(--primary-text-color);
opacity: 1 !important;
font-size: 12px;
}
{% if states('sensor.count_automation_off') | int > 0 %}
.bubble-sub-button-1:after {
content: "{{ states('sensor.count_automation_off') }}";
position: absolute;
top: -5px;
left: 22px;
width: 18px !important;
height: 15px !important;
display: flex;
align-items: center;
justify-content: center;
color: black;
background-color: orange;
border-radius: 20%;
font-size: 10px;
}
{% endif %}
{% if states('input_boolean.automation_off') !='off' %}
.bubble-sub-button-3:after {
content: "{{ state_attr('input_boolean.automation_off', 'temperature') }}";
position: absolute;
top: -5px;
left: 22px;
width: 18px !important;
height: 15px !important;
display: flex;
align-items: center;
justify-content: center;
color: black;
background-color: var(--primary-color);
border-radius: 20%;
font-size: 10px;
}
{% endif %}
grid_options:
columns: 6
rows: 3
modules:
- room_card
- type: custom:bubble-card
card_type: button
button_type: state
entity: sun.sun
show_icon: false
show_state: false
show_name: false
card_layout: large-sub-buttons-grid
grid_options:
columns: 48
rows: 3
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
button_action:
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
sub_button:
- entity: input_number.offene_fenster
icon: mdi:lock
state_background: false
show_state: true
- entity: input_number.eingeschaltete_lampen
icon: mdi:lightbulb
state_background: false
show_state: true
- entity: sun.sun
icon: ''
state_background: false
show_state: true
show_background: false
show_icon: false
show_attribute: false
tap_action:
action: none
- entity: sensor.total_dc_power
icon: m3rf:solar-power
show_icon: true
state_background: false
show_background: true
show_last_changed: false
show_state: true
- entity: sensor.battery_level
state_background: false
show_state: true
- entity: sensor.energy_production_today_remaining
icon: mdi:calendar-month-outline
state_background: false
show_state: true
- entity: sensor.load_power
icon: mdi:home-lightning-bolt
show_background: true
state_background: false
show_state: true
- entity: sensor.meter_active_power_raw
icon: mdi:transmission-tower
state_background: false
show_state: true
styles: >-
ha-card {
--bubble-sub-button-background-color: rgba(46, 43, 56, 0.7); # Add transparency
}
.bubble-button-card-container {
background-image: url("https://www.hessl.at/files/architektenhaus-mit-pool/architektenhaus-kueche-essbereich.jpg");
background-size: cover;
border-radius: 28px;
background-position: center;
}
.bubble-sub-button-container {
width: 100%; # Span the container over the full width
}
.bubble-sub-button-1 ha-icon {
color: #06d8d0;
}
.bubble-sub-button-2 ha-icon {
color: #fcc93d;
}
.bubble-sub-button-3 {
opacity: 0.0; # Hide unused button
}
.bubble-sub-button-6 {
grid-column: span 2; # Larger button over 2 columns
}
# Format text for large sub-button
${card.querySelector('.bubble-sub-button-6
.bubble-sub-button-name-container').innerText = "~" +
Math.round(subButtonState[5]*10)/10 + "kWh Solarertrag verbleibend"}
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
name: Гостиная
icon: mdi:sofa-outline
hash: '#balcony'
button_type: name
close_on_click: true
- type: custom:bubble-card
card_type: separator
name: Освещение (пример)
icon: mdi:lightbulb-outline
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.yeelink_strip6_c28f_light
show_state: true
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.yeelink_strip6_c28f_light
show_state: true
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.yeelink_strip6_c28f_light
show_state: true
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#lights'
name: Главная
icon: mdi:chart-bubble
width_desktop: 500px
margin_top_desktop: 10%
margin_top_mobile: 30vh
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
name: Кухня
icon: mdi:dip-switch
entity: light.kitchen_lights
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.yeelink_strip6_c28f_light
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
name: Гостиная
icon: mdi:dip-switch
entity: light.living_room_lights
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.yeelink_strip6_c28f_light
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
name: Спальня
icon: mdi:dip-switch
entity: light.yeelink_strip6_c28f_light
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.yeelink_strip6_c28f_light
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#bathroom'
button_type: name
name: Ванна
icon: mdi:bathtub
card_layout: normal
styles: ".bubble-button-card-container {\n background: none;\n border: none;\n}\n.bubble-sub-button-icon {\n --mdc-icon-size: 14px;\n}\n.bubble-sub-button {\n\tfont-size: 14px !important;\n padding: 6px;\n}\n"
bg_color: var(--secondary-background-color)
bg_opacity: '50'
auto_close: '4000'
sub_button:
- entity: weather.yandex_weather
show_background: false
show_state: true
- entity: sensor.system_monitor_processor_use
show_background: false
show_state: true
show_header: true
close_on_click: true
hide_backdrop: false
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#hallway'
name: Освещение
icon: mdi:chart-bubble
width_desktop: 500px
margin_top_desktop: 10%
button_type: name
modules: []
more_info_popup:
center: false
window_ani: scale(0.1)
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
name: Кухня
icon: mdi:dip-switch
entity: light.kitchen_lights
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.yeelink_strip6_c28f_light
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
name: Гостиная
icon: mdi:dip-switch
entity: light.living_room_lights
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.yeelink_strip6_c28f_light
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
name: Спальня
icon: mdi:dip-switch
entity: light.yeelink_strip6_c28f_light
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.yeelink_strip6_c28f_light
- type: custom:bubble-card
card_type: horizontal-buttons-stack
auto_order: false
highlight_current_view: true
margin: 0px
width_desktop: 1540px
1_icon: mdi:home-city-outline
1_link: '#lights'
2_icon: mdi:door-open
2_link: '#hallway'
3_icon: mdi:sofa-outline
3_link: '#livingroom'
4_icon: mdi:bed-king-outline
4_link: '#bedroom'
5_icon: mdi:sofa-single-outline
