漂亮的斐讯TC1卡片

623305170 · 发表于 2023-9-23 20:52:59

本帖最后由 623305170 于 2023-9-24 15:29 编辑

这个卡片是几个月前一个群里有大神发出来的，不知道HACS地址，求论坛大神发个github项目地址，我也想用上漂亮的TC1卡片，该卡片支持刷了ZTC1固件的斐讯TC1插座

lswq · 发表于 2023-9-24 13:29:24

本帖最后由 lswq 于 2023-9-24 13:32 编辑

仿造了一个

lswq · 发表于 2023-9-24 15:20:56

本帖最后由 lswq 于 2023-9-24 15:27 编辑

[email protected] 发表于 2023-9-24 14:28
你好代码分享出来下吧

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mod-card
    card:
      type: custom:mushroom-title-card
      title: 三楼电视柜 TC1
    card_mod:
      style:
        mushroom-title-card$: |
          /* Set spacing around greeting */
          .header {
            --title-padding: 20px 0px 10px 20px;
            --title-spacing: 8px;
          }    
  - type: custom:mod-card
    card:
      type: grid
      square: false
      mode: horizontal
      cards:
        - type: custom:mod-card
          card:
            type: picture
            image: /local/image/tc1.png
          card_mod: null
          style: |
            ha-card {
              /* Set padding of card */
              padding: 0px 0px 0px 0px;
              /* Move card up to match header card */
              --ha-card-border-radius: 0px;
              margin-left: 0px;
              margin-right: 40px;
              margin-bottom: 0px;
        - type: custom:mod-card
          card:
            type: custom:mushroom-template-card
            icon: mdi:timer-play
            icon_color: red
            layout: horizontal
            entity: sensor.ztc1_power_wo_shi
            fill_container: true
            primary: 运行时间
            secondary: '{{states(''sensor.ztc1_time_wo_shi'')}}'
            tap_action:
              action: fire-dom-event
          card_mod: null
          style: |
            ha-card {
              /* Move card up to match header card */
              margin-left: -10px;
              margin-right: 20px;
              margin-top: -5px;
              margin-bottom: 0px;
      columns: 2
    style: |
      ha-card {
        /* Set padding of card */
        padding: 0px 0px 0px 0px;
        /* Move card up to match header card */
        margin-left: 28px;
        margin-right: 0px;
        margin-bottom: -8px;
        /* Remove styling from card */
        --ha-card-background: none;
        --ha-card-box-shadow: none;
        --ha-card-border-width: 0;
        padding: 0px !important;
        transition: all 0s;
      }
  - type: custom:mod-card
    card:
      type: horizontal-stack
      cards:
        - type: custom:mod-card
          card:
            type: custom:mushroom-title-card
            subtitle: 功率 Power
          style:
            mushroom-title-card$: |
              /* Style name */
              .subtitle {
                --subtitle-font-size: 18px;
                --subtitle-font-weight: var(--mush-title-font-weight, bold);
                color: var(--secondary-text-color) !important;
              }          
        - type: custom:mod-card
          card:
            type: custom:mushroom-title-card
            alignment: end
            subtitle:    {{states('sensor.ztc1_power_wo_shi')}} W
          style:
            mushroom-title-card$: |
              /* Style name */
              .subtitle {
                --subtitle-font-size: 18px;
                --subtitle-font-weight: var(--mush-title-font-weight, bold);
                color: var(--secondary-text-color) !important;
              }
    style: |
      ha-card { 
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: -40px;
      }   
  - type: custom:mod-card
    card:
      type: custom:mini-graph-card
      name: null
      entities:
        - sensor.ztc1_power_wo_shi
      animate: false
      height: 100
      upper_bound_secondary: 40
      line_color: skyblue
      line_width: 6
      font_size: 80
      font-weight: bold
      show:
        name: false
        icon: false
        state: false
    style: |
      ha-card {
        /* Move card up to match header card */
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 0px;
        /* Remove styling from card */
        --ha-card-background: none;
        --ha-card-box-shadow: none;
        --ha-card-border-width: 0;
        --ha-card-border-radius: 15px;
        padding: 0px !important;
        transition: all 0s;
      }      
  - type: custom:mod-card
    card:
      type: grid
      square: true
      cards:
        - type: custom:mushroom-entity-card
          entity: switch.ztc1_1_d0bae462fe78
          layout: vertical
          icon_color: blue
          tap_action:
            action: toggle
          double_tap_action:
            action: more-info
          card_mod:
            style: |
              ha-card { 
                background: var(--card-background-color);
                width: auto;
                border-radius: 20px;
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 0px;
              }               
        - type: custom:mushroom-entity-card
          entity: switch.ztc1_2_d0bae462fe78
          layout: vertical
          icon_color: purple
          tap_action:
            action: toggle
          double_tap_action:
            action: more-info
          card_mod:
            style: |
              ha-card { 
                background: var(--card-background-color);
                width: auto;
                border-radius: 20px;
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 0px;
              }                
        - type: custom:mushroom-entity-card
          entity: switch.ztc1_3_d0bae462fe78
          layout: vertical
          icon_color: red
          tap_action:
            action: toggle
          double_tap_action:
            action: more-info
          card_mod:
            style: |
              ha-card { 
                background: var(--card-background-color);
                width: auto;
                border-radius: 20px;
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 0px;
              }   
        - type: custom:mushroom-entity-card
          entity: switch.ztc1_4_d0bae462fe78
          name: 扫地充电座
          layout: vertical
          icon_color: green
          tap_action:
            action: toggle
          double_tap_action:
            action: more-info
          card_mod:
            style: |
              ha-card { 
                background: var(--card-background-color);
                width: auto;
                border-radius: 20px;
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 0px;
              }               
        - type: custom:mushroom-entity-card
          entity: switch.ztc1_5_d0bae462fe78
          name: 小米网关
          layout: vertical
          icon_color: orange
          tap_action:
            action: toggle
          double_tap_action:
            action: more-info
          card_mod:
            style: |
              ha-card { 
                background: var(--card-background-color);
                width: auto;
                border-radius: 20px;
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 0px;
              }                
        - type: custom:mushroom-entity-card
          entity: switch.ztc1_6_d0bae462fe78
          layout: vertical
          icon_color: blue
          tap_action:
            action: toggle
          double_tap_action:
            action: more-info
          card_mod:
            style: |
              ha-card { 
                background: var(--card-background-color);
                width: auto;
                border-radius: 20px;
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 0px;
              }               
      columns: 3
    card_mod:
      style: |
        ha-card { 
          margin-top: 20px;
          margin-left: 10px;
          margin-right: 10px;
        }

需要hacs下载相应卡片，和使用主题，如果不想用主题可以自己使用cardmod在里面自己修改背景色和卡片圆角及阴影，主题是我结合Google和minimalist改的，还有抠了背景的图片放在下面压缩包里了

shenmirenQUQ · 发表于 2023-9-23 21:40:36

知道是什么了也告诉我一下

lswq · 发表于 2023-9-23 22:05:57

这也不是啥卡片啊，就是自己diy的吧

lqf1206 · 发表于 2023-9-24 00:58:19

本帖最后由 lqf1206 于 2023-9-24 02:32 编辑

623305170 · 发表于 2023-9-24 11:00:25

lqf1206 发表于 2023-9-24 00:58

大佬能分享一下卡片代码和图片吗？找不到这些好看无水印的图片，大佬好人

lqf1206 · 发表于 2023-9-24 11:25:06

本帖最后由 lqf1206 于 2023-9-24 11:39 编辑

623305170 发表于 2023-9-24 11:00
大佬能分享一下卡片代码和图片吗？找不到这些好看无水印的图片，大佬好人 ...

type: vertical-stack
cards:
  - square: false
    type: grid
    cards:
      - type: picture
        image: /local/icons/TC1.png
        theme: ios-dark-mode-light-green-alternative
        tap_action:
          action: url
          url_path: https://github.com/a2633063/zTC1
      - show_name: false
        show_icon: true
        show_state: true
        type: glance
        entities:
          - entity: switch.ztc1_1_d0bae462f4f4
          - entity: switch.ztc1_2_d0bae462f4f4
          - entity: switch.ztc1_3_d0bae462f4f4
          - entity: switch.ztc1_4_d0bae462f4f4
          - entity: switch.ztc1_5_d0bae462f4f4
          - entity: switch.ztc1_6_d0bae462f4f4
        columns: 3
    columns: 1
  - show_name: true
    show_icon: true
    show_state: true
    type: glance
    entities:
      - entity: sensor.ztc1_power_d0bae462f4f4
      - entity: sensor.ztc1_time_d0bae462f4f4
    columns: 2
- type: history-graph
    entities:
      - entity: sensor.ztc1_power_d0bae462f4f4

623305170 · 发表于 2023-9-24 12:23:16

本帖最后由 623305170 于 2023-9-24 16:57 编辑

lqf1206 发表于 2023-9-24 11:25

我也做出了自己的TC1卡片

参考14楼大佬的代码

623305170 · 发表于 2023-9-24 12:24:41

shenmirenQUQ 发表于 2023-9-23 21:40
知道是什么了也告诉我一下

自取，字数补丁，字数补丁

[email protected] · 发表于 2023-9-24 13:51:39

ZDC1 我也想过这样弄怎么都搞不好

		自动登录	找回密码
密码			立即注册

[UI界面] 漂亮的斐讯TC1卡片

评分

评分

评分

评分