『瀚思彼岸』» 智能家居技术论坛

 找回密码
 立即注册
查看: 2791|回复: 9

[新手导航] 求助各路神仙,人员卡片制作方法

[复制链接]

2

主题

9

帖子

66

积分

注册会员

Rank: 2

积分
66
金钱
57
HASS币
0
发表于 2023-6-25 02:12:28 | 显示全部楼层 |阅读模式
请问各路神仙如何制作一个人员信息的卡片?
见过一种:小方形卡片,可以显示在家或离家的状态,卡片右上角还有有手机电量以及上次更新状态的时间
请问这种卡片使用button-card可否实现?还是用磁贴+horizontal-stack实现?
现在只能做到丑陋的这个状态


                               
登录/注册后可看大图



如果可以麻烦给个卡片代码我自己研究也可以,抱拳了
回复

使用道具 举报

2

主题

9

帖子

66

积分

注册会员

Rank: 2

积分
66
金钱
57
HASS币
0
 楼主| 发表于 2023-6-25 02:19:55 | 显示全部楼层
刚才图片没传上去
未命名1687630763.png
回复

使用道具 举报

32

主题

1065

帖子

4942

积分

论坛元老

Rank: 8Rank: 8

积分
4942
金钱
3862
HASS币
90
发表于 2023-6-25 05:58:57 | 显示全部楼层
本帖最后由 relliky 于 2023-6-25 06:08 编辑

这是我的房间卡片,跟你的人员卡片思路是差不多的。用stack-in-card 的上下两分,再把下面的左右分四份,每份放你想要的卡片,我每份都是用template实现的我自己想要的效果,但普通的entity卡片也行。
至于你自己想别的方式怎么排版都可以。

Screenshot 2023-06-24 at 22.56.49.png

代码在这
  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[motion_postfix].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



有不懂的可以问我

我家全屋智能的HA设置 https://github.com/relliky/Tais_Home_Assistant_Config
回复

使用道具 举报

0

主题

215

帖子

2551

积分

金牌会员

Rank: 6Rank: 6

积分
2551
金钱
2336
HASS币
0
发表于 2023-6-25 09:14:46 | 显示全部楼层
relliky 发表于 2023-6-25 05:58
这是我的房间卡片,跟你的人员卡片思路是差不多的。用stack-in-card 的上下两分,再把下面的左右分四份,每 ...

赞一个
回复

使用道具 举报

18

主题

587

帖子

4283

积分

元老级技术达人

积分
4283
金钱
3661
HASS币
182
发表于 2023-6-25 16:59:24 | 显示全部楼层
本帖最后由 louis_lee 于 2023-6-25 17:03 编辑

我是照抄HKI作者的风格,直接利用horizontal-stack + picture element将多个家庭成员的卡片置为一排。效果是离家后图片置灰,还可以利用tap_action实现跳转到指定页面或是实现其他操作。

效果图:
微信截图_20230625165515.png

以下为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
回复

使用道具 举报

2

主题

9

帖子

66

积分

注册会员

Rank: 2

积分
66
金钱
57
HASS币
0
 楼主| 发表于 2023-6-25 22:20:04 | 显示全部楼层
relliky 发表于 2023-6-25 05:58
这是我的房间卡片,跟你的人员卡片思路是差不多的。用stack-in-card 的上下两分,再把下面的左右分四份,每 ...

感谢大神,我先研究研究
回复

使用道具 举报

2

主题

9

帖子

66

积分

注册会员

Rank: 2

积分
66
金钱
57
HASS币
0
 楼主| 发表于 2023-6-25 22:21:07 | 显示全部楼层
louis_lee 发表于 2023-6-25 16:59
我是照抄HKI作者的风格,直接利用horizontal-stack + picture element将多个家庭成员的卡片置为一排。效果 ...

感谢大神,够精致~
回复

使用道具 举报

0

主题

31

帖子

187

积分

注册会员

Rank: 2

积分
187
金钱
156
HASS币
0
发表于 2023-10-18 22:43:42 | 显示全部楼层
研究研究
回复

使用道具 举报

25

主题

640

帖子

2913

积分

金牌会员

Rank: 6Rank: 6

积分
2913
金钱
2263
HASS币
40
发表于 2023-10-19 00:53:45 | 显示全部楼层
如果不用显示图片,用button-card也是可以实现的. 可以在右上角或任意位置添加custom_fields
回复

使用道具 举报

1

主题

54

帖子

202

积分

中级会员

Rank: 3Rank: 3

积分
202
金钱
148
HASS币
0
发表于 2024-10-23 20:28:20 | 显示全部楼层
louis_lee 发表于 2023-6-25 16:59
我是照抄HKI作者的风格,直接利用horizontal-stack + picture element将多个家庭成员的卡片置为一排。效果 ...

这个代码,离家的用户登录,所有人员卡片都是灰色的。不是单个人员卡片根据自己离家、在家状态显示。不知道怎么调整。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-11-23 16:23 , Processed in 0.078361 second(s), 35 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表