本帖最后由 Sparta 于 2023-9-27 16:33 编辑
GitHub - Clooos/Bubble-Card: Bubble Card is a minimalist card collection for Home Assistant with a nice pop-up touch.这个卡片厉害的地方下面设置的房间入口你可以关联对应房间所有灯，实现一目了然知道哪个房间灯亮着并且可以按照有人移动的前后时间顺序排列房间顺序，这样设计感觉很棒很智能，mushroom也可以需要自己稍微研究下，这个卡片填入对应房间灯的集合实体跟人体传感器就行了很简单，我是从Mushroom作者youtube看到他推荐的这个新出的卡片，Everything Smart Home这位大牛youtube的频道，他会分享很多不错的主题以及每次homeassistant的更新内容还会教你怎么设置他的mushroom，另外这个卡片还没上架hacs商店需要自定义存储库添加，网络上可能需要点魔法才能添加成功
type: custom:bubble-card
card_type: horizontal-buttons-stack
auto_order: true
1_name: 卧室
1_icon: hue:room-bedroom
1_link: '#1'
1_entity: light.zhu_wo_deng_zu
1_pir_sensor: binary_sensor.0x00158d0002047938_motion
2_name: 书房
2_icon: hue:room-closet
2_link: '#2'
2_entity: light.shu_fang_deng_zu
2_pir_sensor: binary_sensor.50ec50ccd358_motion
3_name: 客厅
3_icon: hue:room-living
3_link: '#3'
3_entity: light.ke_ting_suo_you_deng
3_pir_sensor: binary_sensor.ccb5d1effc4e_occupancy
4_name: 儿童卧室
4_icon: hue:room-nursery
4_link: '#4'
4_entity: light.er_tong_wo_shi_deng
4_pir_sensor: binary_sensor.0x00158d0002375243_motion
这是我房间入口的卡片，里面的灯组跟人体传感器你们改成自己的，里面的link是连接对应房间卡片的，link的房间在下面代码第二个子选项Hash里面设置，Hash里面的名称要对应link的名称
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
picture: ''
entity: binary_sensor.e4aaec6048d4_contact
icon: |-
{% if is_state(entity, 'off') %}
mdi:door-sliding
{% elif is_state(entity, 'on') %}
mdi:door-sliding-open
{% endif %}
content: |-
{% if is_state(entity, 'off') %}
关闭
{% elif is_state(entity, 'on') %}
打开
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
ha-card {
--chip-box-shadow: none;
--chip-background: rgba(var(--rgb-primary-text-color), 0.06);
}
- type: conditional
conditions:
- entity: switch.0x00158d0003450e99_plug
state: 'on'
chip:
type: template
content: '{{ states(''sensor.0x00158d0003450e99_power'') | round(0) }} W'
entity: sensor.0x00158d0003450e99_power
icon: mdi:router-wireless
icon_color: null
double_tap_action:
action: call-service
service: switch.turn_off
data: {}
target:
entity_id: switch.0x00158d0003450e99_plug
tap_action:
action: more-info
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
ha-card {
--chip-box-shadow: none;
--chip-background: rgba(var(--rgb-primary-text-color), 0.06);
}
- type: conditional
conditions:
- entity: switch.0x00158d0003450e0c_plug
state: 'on'
chip:
type: template
content: '{{ states(''sensor.0x00158d0003450e0c_power'') | round(0) }} W'
entity: sensor.0x00158d0003450e0c_power
icon: mdi:sony-playstation
double_tap_action:
action: call-service
service: switch.turn_off
data: {}
target:
entity_id: switch.0x00158d0003450e0c_plug
tap_action:
action: more-info
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
ha-card {
--chip-box-shadow: none;
--chip-background: rgba(var(--rgb-primary-text-color), 0.06);
- type: conditional
conditions:
- entity: switch.0x00158d00028c9936_plug
state: 'on'
chip:
type: template
content: '{{ states(''sensor.0x00158d00028c9936_power'') | round(0) }} W'
entity: sensor.0x00158d00028c9936_power
icon: cil:imac-alternative
double_tap_action:
action: call-service
service: switch.turn_off
data: {}
target:
entity_id: switch.0x00158d00028c9936_plug
tap_action:
action: more-info
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
ha-card {
--chip-box-shadow: none;
--chip-background: rgba(var(--rgb-primary-text-color), 0.06);
- type: conditional
conditions:
- entity: switch.kong_diao
state: 'on'
chip:
type: entity
entity: sensor.lumi_v3_cf85_electric_power
icon: mdi:thermostat
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
ha-card {
--chip-box-shadow: none;
--chip-background: rgba(var(--rgb-primary-text-color), 0.06);
- type: conditional
conditions:
- entity: fan.kong_qi_jing_hua_qi
state: 'on'
chip:
type: entity
entity: sensor.kong_qi_jing_hua_qi_pm2_5
double_tap_action:
action: call-service
service: fan.turn_off
data: {}
target:
entity_id: fan.kong_qi_jing_hua_qi
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
ha-card {
--chip-box-shadow: none;
--chip-background: rgba(var(--rgb-primary-text-color), 0.06);
alignment: start
- type: custom:bubble-card
card_type: pop-up
entity: light.shu_fang_deng_zu
icon: hue:room-closet
name: 书房
hash: '#2'
state: sensor.kong_qi_jing_hua_qi_pm2_5
state_unit: ' µg/m³'
margin_top: 74px
width_desktop: 600px
margin_top_mobile: 18px
margin_top_desktop: 74px
styles: |
#root {
/* This is a fix for older Safari (for my wall mounted iPad) but it won't work on Firefox, this is optional */
display: grid !important;
}
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-entity-card
entity: sensor.582d3411b3eb_temperature
primary_info: state
secondary_info: name
name: 温度
fill_container: false
icon_color: green
layout: horizontal
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
ha-card {
box-shadow: none;
background: rgba(var(--rgb-primary-text-color), 0.06);
}
- type: custom:mushroom-entity-card
entity: sensor.582d3411b3eb_humidity
primary_info: state
secondary_info: name
name: 湿度
icon_color: blue
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
ha-card {
box-shadow: none;
background: rgba(var(--rgb-primary-text-color), 0.06);
}
- type: custom:bubble-card
card_type: separator
icon: mdi:lightbulb
name: 灯
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.yeelink_lamp2_e68f_light
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.yeelink_bslamp2_7300_light
name: 沙发灯
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: switch
entity: light.shu_fang_deng
- type: custom:bubble-card
card_type: button
button_type: switch
entity: light.zou_lang_deng
- type: custom:bubble-card
card_type: separator
name: 设备
icon: mdi:connection
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: switch
entity: switch.0x00158d00028c9936_plug
- type: custom:bubble-card
card_type: button
button_type: switch
entity: fan.xiaomi_smart_fan
name: 风扇
icon: mdi:fan
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: switch
entity: switch.0x00158d0003450e0c_plug
- type: custom:bubble-card
card_type: button
button_type: switch
entity: switch.qmi_v1_8be9_switch
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: switch
entity: fan.kong_qi_jing_hua_qi
- type: custom:bubble-card
card_type: button
button_type: switch
entity: climate.lumi_v3_cf85_air_conditioner
icon: mdi:thermostat
name: 空调
- type: custom:bubble-card
card_type: separator
icon: mdi:playlist-music
name: 音箱
- square: false
type: grid
cards:
- type: custom:mushroom-media-player-card
entity: media_player.homepod_you
use_media_info: true
show_volume_level: true
collapsible_controls: false
media_controls:
- play_pause_stop
- next
- on_off
- previous
volume_controls:
- volume_buttons
- volume_set
- volume_mute
fill_container: false
icon_type: icon
icon: ''
secondary_info: state
tap_action:
action: more-info
card_mod:
style: |
ha-card {
box-shadow:
background: rgba(var(--rgb-primary-text-color), 0.06);
}
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
ha-card {
box-shadow: none;
background: rgba(var(--rgb-primary-text-color), 0.06);
}
columns: 1
- square: false
type: grid
cards:
- type: custom:mushroom-media-player-card
entity: media_player.denon_avr_x3000
use_media_info: true
show_volume_level: true
collapsible_controls: false
media_controls:
- next
- on_off
- previous
volume_controls:
- volume_buttons
fill_container: false
icon_type: icon
icon: ''
secondary_info: state
tap_action:
action: more-info
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
ha-card {
box-shadow: none;
background: rgba(var(--rgb-primary-text-color), 0.06);
}
- type: custom:mushroom-media-player-card
fill_container: false
media_controls:
- next
- previous
volume_controls:
- volume_buttons
collapsible_controls: false
show_volume_level: true
use_media_info: true
tap_action:
action: more-info
entity: media_player.xiaomini_lx04_36d2_play_control
icon: cil:apple-homepod
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
ha-card {
box-shadow: none;
background: rgba(var(--rgb-primary-text-color), 0.06);
}
columns: 2
这是我的弹出卡片书房的代码，进去后就第一个子卡片是mushroom的chip卡片做的没有图形界面（不知道为什么没有可能是我用card_mod加了按键动画），其他的直接在图形界面里面修改成你们自己的实体，当然里面可以加各种卡片，可以发挥你们想象，感觉mushroom的风格比较契合，其他卡片融合进去会看起来杂乱，不排除作者会在后面加上各种自己审美的卡片那是最好的了，我把mushroom的风格跟Bubble Card的风格做了统一去除了卡片轮廓更改了卡片背景颜色具体可以在mushroom卡片下的card_mod里面更改，ha-card:active这个是设置按键按下的动作不需要的可以删除
| 
[复制链接]
发表于 2023-9-26 11:03:08
楼主