XDM推荐一张新出的弹出卡片，简洁大方
本帖最后由 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这个是设置按键按下的动作不需要的可以删除
顶一个，还不错的 赞 看起来还不错。mark下。 你这个真好看 楼主出个手摸手教程呗:lol 感谢分享。这个比之前的browser mod配置有好一些，如果可以的话，直接弹出卡片而不带有关闭按钮旁边的实体选项那就更好了。现在测试阶段在编辑过程中会出现页面无响应，要等待恢复。 mrlaogui 发表于 2023-9-27 07:35
感谢分享。这个比之前的browser mod配置有好一些，如果可以的话，直接弹出卡片而不带有关闭按钮旁边的实体 ...
现在是可以下滑关闭就是有bug，需要下拉的足够长才能退出，等作者更新把，流畅了就可以把关闭按键去掉了 sxrcm 发表于 2023-9-26 22:13
楼主出个手摸手教程呗
很简单的，你去他github最下面的代码就是他对应图片的设置，entity state下面的实体改成自己的，我待会儿分享下我的代码
Sparta 发表于 2023-9-27 09:40
现在是可以下滑关闭就是有bug，需要下拉的足够长才能退出，等作者更新把，流畅了就可以把关闭按键去掉了 ...
目前还发现两个点：1、弹窗没有阴影，使得边界看的不是很清楚；2、编辑完成后，弹出的卡片会隐藏，但仍旧占位挤压其他卡片显示，目前还不支持跨视图弹窗。暂时的一个办法就是全部垂直显示，但这样对横屏设备就浪费了。希望对尝鲜的朋友有帮助作用，希望作者更新越来越好，挺好看的卡片