漂亮的斐讯DC1卡片

623305170

昨天发了一篇求TC1卡片主题帖好看的TC1卡片@lswq大佬抠图并配合Mushroom、mini-graph-card、card-mod、Stack in Card卡片做出了好看的TC1卡片，并分享了代码。今天我又嫌弃DC1卡片不好看了，自己照着昨天大神代码改的DC1卡片，图是自己抠的，分享给大家
这是ZDC1的HA前端配置卡片。需要在HACS中下载Mushroom、mini-graph-card、card-mod、Stack in Card卡片，把压缩包里头的“dc1.jpg"放到HA目录www/icons目录下，“DC1卡片.yaml”中的“MACMAC”修改成你自己的DC1 MAC地址，然后复制全文，最后到HA前端使用手动模式粘贴代码就行

ps：HACS中的DC1卡片，作者做的很好看，但是我觉得不够大气，还是很感谢作者无私分享

623305170

@郭子漳  ，郭大佬您好，您能利用Mushroom等卡片设计一款好看的斐讯DC1排插卡片吗？您的Mushriom ui设计的非常漂亮

ghostist

我用的就是button card
简单直观就完了
之前还保留了每个插座的名称，后来也删了
第一个文字如果是白色代表LOGO灯亮，灰色代表灭，也可以点击

623305170

ghostist 发表于 2023-9-25 09:11
我用的就是button card
简单直观就完了
之前还保留了每个插座的名称，后来也删了

哇！惊艳！大佬能分享一下代码吗？

ghostist

623305170 发表于 2023-9-25 10:22
哇！惊艳！大佬能分享一下代码吗？

    - element: switch.zdc1_plug0_84f3eb9d9f1f
      tap_action:
        action: fire-dom-event
        browser_mod:
          service: browser_mod.popup
          data:
            content:
              type: horizontal-stack
              cards:
                - type: custom:button-card
                  entity: switch.zdc1_logoled_84f3eb9d9f1f
                  tap_action:
                    action: toggle
                  show_name: false
                  styles:
                    card:
                      - color: white
                      - font-size: 8px
                      - text-transform: capitalize
                      - height: 100px
                      - padding: 10%
                    custom_fields:
                      current:
                        - padding-bottom: 1px
                        - padding-left: 3px
                        - justify-self: start
                        - '--text-color-sensor': >-
                            [[[ if
                            (states["switch.zdc1_logoled_84f3eb9d9f1f"].state ==
                            "off") return "grey"; ]]]
                      power:
                        - padding-bottom: 1px
                        - padding-left: 3px
                        - justify-self: start
                        - '--text-color-sensor': >-
                            [[[ if
                            (states["switch.zdc1_logoled_84f3eb9d9f1f"].state ==
                            "off") return "grey"; ]]]
                      voltage:
                        - padding-bottom: 1px
                        - padding-left: 3px
                        - justify-self: start
                        - '--text-color-sensor': >-
                            [[[ if
                            (states["switch.zdc1_logoled_84f3eb9d9f1f"].state ==
                            "off") return "grey"; ]]]
                      today:
                        - padding-bottom: 1px
                        - padding-left: 3px
                        - justify-self: start
                        - '--text-color-sensor': >-
                            [[[ if
                            (states["switch.zdc1_logoled_84f3eb9d9f1f"].state ==
                            "off") return "grey"; ]]]
                      yesterday:
                        - padding-bottom: 1px
                        - padding-left: 3px
                        - justify-self: start
                        - '--text-color-sensor': >-
                            [[[ if
                            (states["switch.zdc1_logoled_84f3eb9d9f1f"].state ==
                            "off") return "grey"; ]]]
                    grid:
                      - grid-template-areas: ' "current current" "voltage voltage" "power power" "today today" "yesterday yesterday"'
                      - grid-template-columns: min-content
                      - grid-template-rows: >-
                          min-content min-content min-content min-content
                          min-content
                    img_cell:
                      - justify-content: start
                      - align-items: start
                      - margin: none
                  custom_fields:
                    current: |
                      [[[
                        return `电流<span>  <span style="color: var(--text-color-sensor);">${states['sensor.zdc1_current_84f3eb9d9f1f'].state}A</span></span>`
                      ]]]
                    power: |
                      [[[
                        return `功率<span>  <span style="color: var(--text-color-sensor);">${states['sensor.zdc1_power_84f3eb9d9f1f'].state}W</span></span>`
                      ]]]          
                    voltage: |
                      [[[
                        return `电压<span>  <span style="color: var(--text-color-sensor);">${states['sensor.zdc1_voltage_84f3eb9d9f1f'].state}V</span></span>`
                      ]]]
                    today: |
                      [[[
                        return `今天<span>  <span style="color: var(--text-color-sensor);">${states['sensor.zdc1_today_84f3eb9d9f1f'].state}度</span></span>`
                      ]]]
                    yesterday: |
                      [[[
                        return `昨天<span>  <span style="color: var(--text-color-sensor);">${states['sensor.zdc1_yesterday_84f3eb9d9f1f'].state}度</span></span>`
                      ]]]
                - type: custom:button-card
                  entity: switch.zdc1_plug0_84f3eb9d9f1f
                  entity_picture: /local/pic/12.png
                  icon: mdi:power
                  show_entity_picture: true
                  show_name: false
                  state:
                    - styles:
                        card:
                          - filter: opacity(80%)
                        icon:
                          - filter: grayscale(100%)
                      value: 'off'
                  styles:
                    card:
                      - height: 100px
                      - padding: 0px
                    entity_picture:
                      - width: 100%
                      - padding-bottom: 0%
                  tap_action:
                    action: toggle
                    confirmation:
                      exemptions: []
                      text: >-
                        [[[ return `确定${(entity.state === "on") ? "关闭" : "打开"}
                        ${entity.attributes.friendly_name}?`]]]
                - type: custom:button-card
                  entity: switch.zdc1_plug1_84f3eb9d9f1f
                  entity_picture: /local/pic/9.png
                  icon: mdi:power
                  show_entity_picture: true
                  show_name: false
                  state:
                    - styles:
                        card:
                          - filter: opacity(80%)
                        icon:
                          - filter: grayscale(100%)
                      value: 'off'
                  styles:
                    card:
                      - height: 100px
                      - padding: 0px
                    entity_picture:
                      - width: 100%
                      - padding-bottom: 0%
                  tap_action:
                    action: toggle
                    confirmation:
                      exemptions: []
                      text: >-
                        [[[ return `确定${(entity.state === "on") ? "关闭" : "打开"}
                        ${entity.attributes.friendly_name}?`]]]
                - type: custom:button-card
                  entity: switch.zdc1_plug2_84f3eb9d9f1f
                  entity_picture: /local/pic/9.png
                  icon: mdi:power
                  show_entity_picture: true
                  show_name: false
                  state:
                    - styles:
                        card:
                          - filter: opacity(80%)
                        icon:
                          - filter: grayscale(100%)
                      value: 'off'
                  styles:
                    card:
                      - height: 100px
                      - padding: 0px
                    entity_picture:
                      - width: 100%
                      - padding-bottom: 0%
                  tap_action:
                    action: toggle
                    confirmation:
                      exemptions: []
                      text: >-
                        [[[ return `确定${(entity.state === "on") ? "关闭" : "打开"}
                        ${entity.attributes.friendly_name}?`]]]
                - type: custom:button-card
                  entity: switch.zdc1_plug3_84f3eb9d9f1f
                  entity_picture: /local/pic/6.png
                  icon: mdi:power
                  show_entity_picture: true
                  show_name: false
                  state:
                    - styles:
                        card:
                          - filter: opacity(80%)
                        icon:
                          - filter: grayscale(100%)
                      value: 'off'
                  styles:
                    card:
                      - height: 100px
                      - padding: 0px
                    entity_picture:
                      - width: 100%
                      - padding-bottom: 0%
                  tap_action:
                    action: toggle
                    confirmation:
                      exemptions: []
                      text: >-
                        [[[ return `确定${(entity.state === "on") ? "关闭" : "打开"}
                        ${entity.attributes.friendly_name}?`]]]

复制代码

UI配置代码大概是这样
固件使用了@情留メ蚊子 大佬的固件，自己魔改的
去除了一些我认为不需要擦写flash的地方（增加寿命），增加了logo灯控制（小孩晚上睡觉不要光），硬改了USB独立控制（大佬github上有说怎么改）

Jays

ghostist 发表于 2023-9-25 09:11
我用的就是button card
简单直观就完了
之前还保留了每个插座的名称，后来也删了

DC1 有电量统计功能吗？

ghostist

Jays 发表于 2023-9-25 20:51
DC1 有电量统计功能吗？

有计量芯片，读取出来的是电流、电压
至于其他都是计算出来的

Jays

ghostist 发表于 2023-9-26 09:58
有计量芯片，读取出来的是电流、电压
至于其他都是计算出来的

有教程 可以参考吗？  我的DC1没刷机也想弄个电量统计

ghostist

Jays 发表于 2023-9-26 15:10
有教程 可以参考吗？  我的DC1没刷机也想弄个电量统计

刷蚊子大佬的固件就有

alanshu

看看 搞定收工。