求助各路神仙，人员卡片制作方法
请问各路神仙如何制作一个人员信息的卡片？见过一种：小方形卡片，可以显示在家或离家的状态，卡片右上角还有有手机电量以及上次更新状态的时间
请问这种卡片使用button-card可否实现？还是用磁贴+horizontal-stack实现？
现在只能做到丑陋的这个状态{:3_58:}
data:image/png;base64,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
如果可以麻烦给个卡片代码我自己研究也可以，抱拳了
刚才图片没传上去
本帖最后由 relliky 于 2023-6-25 06:08 编辑
这是我的房间卡片，跟你的人员卡片思路是差不多的。用stack-in-card 的上下两分，再把下面的左右分四份，每份放你想要的卡片，我每份都是用template实现的我自己想要的效果，但普通的entity卡片也行。
至于你自己想别的方式怎么排版都可以。
代码在这
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
icon: mdi:youtube-tv
icon_color: blue
layout: horizontal
entity: input_boolean.placeholder
fill_container: true
primary: Living Room
secondary: |-
{% set temperature_sensor = 'sensor.living_room_temperature_sensor' %}
{% set motion_postfix = 'living_room_motion' %}
{{ states(temperature_sensor) }}°C | {{
(as_timestamp(now()) -
as_timestamp(states.group.last_changed)) |
timestamp_custom("%H:%M", false) }}
tap_action:
action: navigate
navigation_path: /living-room/living-room
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
icon: >-
{% set occupancy = 'input_select.living_room_occupancy' %} {% if
is_state(occupancy, 'Outside') %}
mdi:door-closed
{% elif is_state(occupancy, 'Just Entered') %}
mdi:arrow-right-circle
{% elif is_state(occupancy, 'In Sleep') %}
mdi:sleep
{% else %}
mdi:account-multiple
{% endif %}
icon_color: >-
{% set occupancy = 'input_select.living_room_occupancy' %} {% if
is_state(occupancy, 'Outside') %} {% elif is_state(occupancy, 'Just
Entered')%}
green
{% elif is_state(occupancy, 'In Sleep') %}
blue
{% else %}
purple
{% endif %}
layout: horizontal
entity: input_boolean.placeholder
fill_container: true
primary: null
secondary: null
tap_action:
action: navigate
navigation_path: /living-room/living-room
- type: custom:mushroom-template-card
icon: |-
{% set motion = 'group.living_room_motion' %}
{% if is_state(motion, 'on') %}
mdi:run-fast
{% else %}
mdi:shoe-print
{% endif %}
icon_color: |-
{% set motion = 'group.living_room_motion' %}
{% if is_state(motion, 'on') %}
blue
{% endif %}
layout: horizontal
entity: input_boolean.placeholder
fill_container: true
primary: null
secondary: null
tap_action:
action: navigate
navigation_path: /living-room/living-room
- type: custom:mushroom-template-card
icon: |-
{% set thermostat = 'climate.living_room' %}
{% if is_state(thermostat, 'heat') %}
mdi:heating-coil
{% else %}
mdi:snowflake
{% endif %}
icon_color: |
{% set thermostat = 'climate.living_room' %}
{% if is_state(thermostat, 'heat') %}
{% if state_attr(thermostat, 'temperature') > state_attr(thermostat, 'current_temperature') %}
red
{% else %}
blue
{% endif %}
{% endif %}
layout: horizontal
entity: input_boolean.placeholder
fill_container: true
primary: null
secondary: null
tap_action:
action: navigate
navigation_path: /living-room/living-room
- type: custom:mushroom-template-card
icon: |-
{% set light = 'group.living_room_lights_and_tvs' %}
{% if is_state(light, 'on') %}
mdi:floor-lamp
{% else %}
mdi:floor-lamp-outline
{% endif %}
icon_color: |-
{% set light = 'group.living_room_lights_and_tvs' %}
{% if is_state(light, 'on') %}
yellow
{% endif %}
layout: horizontal
entity: input_boolean.placeholder
fill_container: true
primary: null
secondary: null
tap_action:
action: navigate
navigation_path: /living-room/living-room
有不懂的可以问我
relliky 发表于 2023-6-25 05:58
这是我的房间卡片，跟你的人员卡片思路是差不多的。用stack-in-card 的上下两分，再把下面的左右分四份，每 ...
赞一个:victory: 本帖最后由 louis_lee 于 2023-6-25 17:03 编辑
我是照抄HKI作者的风格，直接利用horizontal-stack + picture element将多个家庭成员的卡片置为一排。效果是离家后图片置灰，还可以利用tap_action实现跳转到指定页面或是实现其他操作。
效果图：
以下为picture-elements代码：
type: picture-elements
elements:
- type: image
entity: person.hui
image: /local/images/my/3-1.png
tap_action:
action: none
hold_action:
action: none
style:
left: 50%
top: 50%
width: 100%
heigth: 100%
filter: grayscale(100%)
state_filter:
home: revert
- type: state-label
entity: person.hui
style:
left: 0
bottom: 0
pointer-events: none
font-size: 13px
font-family: var(--font-family)
line-height: 15px
color: AliceBlue
background-color: rgba(0, 0, 0, 0.3)
width: 100%
transform: initial
text-align: left
- type: state-label
entity: sensor.hui_iphone_battery_level
style:
top: 0
left: 0
pointer-events: none
transform: initial
font-size: 12px
font-family: var(--font-family)
color: AliceBlue
line-height: 32px
padding: 0px 28px
- type: icon
icon: mdi:cellphone
style:
top: 0
left: 0
pointer-events: none
transform: scale(0.8)
color: B
line-height: 32px
padding: 7px 7px
font-size: 11px
font-family: var(--font-family)
image: /local/images/my/3-1.png
relliky 发表于 2023-6-25 05:58
这是我的房间卡片，跟你的人员卡片思路是差不多的。用stack-in-card 的上下两分，再把下面的左右分四份，每 ...
感谢大神，我先研究研究 louis_lee 发表于 2023-6-25 16:59
我是照抄HKI作者的风格，直接利用horizontal-stack + picture element将多个家庭成员的卡片置为一排。效果 ...
感谢大神，够精致~ 研究研究
如果不用显示图片,用button-card也是可以实现的. 可以在右上角或任意位置添加custom_fields
页:
[1]