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

标题: 漂亮的斐讯DC1卡片 [打印本页]
作者: 623305170    时间: 2023-9-24 17:12
标题: 漂亮的斐讯DC1卡片
本帖最后由 623305170 于 2023-9-25 13:16 编辑

昨天发了一篇求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    时间: 2023-9-24 20:42
本帖最后由 623305170 于 2023-9-24 20:49 编辑

@郭子漳  ，郭大佬您好，您能利用Mushroom等卡片设计一款好看的斐讯DC1排插卡片吗？您的Mushriom ui设计的非常漂亮
作者: ghostist    时间: 2023-9-25 09:11
[attach]51779[/attach]
[attach]51780[/attach]


我用的就是button card
简单直观就完了
之前还保留了每个插座的名称，后来也删了
第一个文字如果是白色代表LOGO灯亮，灰色代表灭，也可以点击
作者: 623305170    时间: 2023-9-25 10:22
ghostist 发表于 2023-9-25 09:11
我用的就是button card
简单直观就完了
之前还保留了每个插座的名称，后来也删了

哇！惊艳！大佬能分享一下代码吗？
作者: ghostist    时间: 2023-9-25 13:49
623305170 发表于 2023-9-25 10:22
哇！惊艳！大佬能分享一下代码吗？
  1.     - element: switch.zdc1_plug0_84f3eb9d9f1f
  2.       tap_action:
  3.         action: fire-dom-event
  4.         browser_mod:
  5.           service: browser_mod.popup
  6.           data:
  7.             content:
  8.               type: horizontal-stack
  9.               cards:
  10.                 - type: custom:button-card
  11.                   entity: switch.zdc1_logoled_84f3eb9d9f1f
  12.                   tap_action:
  13.                     action: toggle
  14.                   show_name: false
  15.                   styles:
  16.                     card:
  17.                       - color: white
  18.                       - font-size: 8px
  19.                       - text-transform: capitalize
  20.                       - height: 100px
  21.                       - padding: 10%
  22.                     custom_fields:
  23.                       current:
  24.                         - padding-bottom: 1px
  25.                         - padding-left: 3px
  26.                         - justify-self: start
  27.                         - '--text-color-sensor': >-
  28.                             [[[ if
  29.                             (states["switch.zdc1_logoled_84f3eb9d9f1f"].state ==
  30.                             "off") return "grey"; ]]]
  31.                       power:
  32.                         - padding-bottom: 1px
  33.                         - padding-left: 3px
  34.                         - justify-self: start
  35.                         - '--text-color-sensor': >-
  36.                             [[[ if
  37.                             (states["switch.zdc1_logoled_84f3eb9d9f1f"].state ==
  38.                             "off") return "grey"; ]]]
  39.                       voltage:
  40.                         - padding-bottom: 1px
  41.                         - padding-left: 3px
  42.                         - justify-self: start
  43.                         - '--text-color-sensor': >-
  44.                             [[[ if
  45.                             (states["switch.zdc1_logoled_84f3eb9d9f1f"].state ==
  46.                             "off") return "grey"; ]]]
  47.                       today:
  48.                         - padding-bottom: 1px
  49.                         - padding-left: 3px
  50.                         - justify-self: start
  51.                         - '--text-color-sensor': >-
  52.                             [[[ if
  53.                             (states["switch.zdc1_logoled_84f3eb9d9f1f"].state ==
  54.                             "off") return "grey"; ]]]
  55.                       yesterday:
  56.                         - padding-bottom: 1px
  57.                         - padding-left: 3px
  58.                         - justify-self: start
  59.                         - '--text-color-sensor': >-
  60.                             [[[ if
  61.                             (states["switch.zdc1_logoled_84f3eb9d9f1f"].state ==
  62.                             "off") return "grey"; ]]]
  63.                     grid:
  64.                       - grid-template-areas: ' "current current" "voltage voltage" "power power" "today today" "yesterday yesterday"'
  65.                       - grid-template-columns: min-content
  66.                       - grid-template-rows: >-
  67.                           min-content min-content min-content min-content
  68.                           min-content
  69.                     img_cell:
  70.                       - justify-content: start
  71.                       - align-items: start
  72.                       - margin: none
  73.                   custom_fields:
  74.                     current: |
  75.                       [[[
  76.                         return `电流<span>  <span style="color: var(--text-color-sensor);">${states['sensor.zdc1_current_84f3eb9d9f1f'].state}A</span></span>`
  77.                       ]]]
  78.                     power: |
  79.                       [[[
  80.                         return `功率<span>  <span style="color: var(--text-color-sensor);">${states['sensor.zdc1_power_84f3eb9d9f1f'].state}W</span></span>`
  81.                       ]]]         
  82.                     voltage: |
  83.                       [[[
  84.                         return `电压<span>  <span style="color: var(--text-color-sensor);">${states['sensor.zdc1_voltage_84f3eb9d9f1f'].state}V</span></span>`
  85.                       ]]]
  86.                     today: |
  87.                       [[[
  88.                         return `今天<span>  <span style="color: var(--text-color-sensor);">${states['sensor.zdc1_today_84f3eb9d9f1f'].state}度</span></span>`
  89.                       ]]]
  90.                     yesterday: |
  91.                       [[[
  92.                         return `昨天<span>  <span style="color: var(--text-color-sensor);">${states['sensor.zdc1_yesterday_84f3eb9d9f1f'].state}度</span></span>`
  93.                       ]]]
  94.                 - type: custom:button-card
  95.                   entity: switch.zdc1_plug0_84f3eb9d9f1f
  96.                   entity_picture: /local/pic/12.png
  97.                   icon: mdi:power
  98.                   show_entity_picture: true
  99.                   show_name: false
  100.                   state:
  101.                     - styles:
  102.                         card:
  103.                           - filter: opacity(80%)
  104.                         icon:
  105.                           - filter: grayscale(100%)
  106.                       value: 'off'
  107.                   styles:
  108.                     card:
  109.                       - height: 100px
  110.                       - padding: 0px
  111.                     entity_picture:
  112.                       - width: 100%
  113.                       - padding-bottom: 0%
  114.                   tap_action:
  115.                     action: toggle
  116.                     confirmation:
  117.                       exemptions: []
  118.                       text: >-
  119.                         [[[ return `确定${(entity.state === "on") ? "关闭" : "打开"}
  120.                         ${entity.attributes.friendly_name}?`]]]
  121.                 - type: custom:button-card
  122.                   entity: switch.zdc1_plug1_84f3eb9d9f1f
  123.                   entity_picture: /local/pic/9.png
  124.                   icon: mdi:power
  125.                   show_entity_picture: true
  126.                   show_name: false
  127.                   state:
  128.                     - styles:
  129.                         card:
  130.                           - filter: opacity(80%)
  131.                         icon:
  132.                           - filter: grayscale(100%)
  133.                       value: 'off'
  134.                   styles:
  135.                     card:
  136.                       - height: 100px
  137.                       - padding: 0px
  138.                     entity_picture:
  139.                       - width: 100%
  140.                       - padding-bottom: 0%
  141.                   tap_action:
  142.                     action: toggle
  143.                     confirmation:
  144.                       exemptions: []
  145.                       text: >-
  146.                         [[[ return `确定${(entity.state === "on") ? "关闭" : "打开"}
  147.                         ${entity.attributes.friendly_name}?`]]]
  148.                 - type: custom:button-card
  149.                   entity: switch.zdc1_plug2_84f3eb9d9f1f
  150.                   entity_picture: /local/pic/9.png
  151.                   icon: mdi:power
  152.                   show_entity_picture: true
  153.                   show_name: false
  154.                   state:
  155.                     - styles:
  156.                         card:
  157.                           - filter: opacity(80%)
  158.                         icon:
  159.                           - filter: grayscale(100%)
  160.                       value: 'off'
  161.                   styles:
  162.                     card:
  163.                       - height: 100px
  164.                       - padding: 0px
  165.                     entity_picture:
  166.                       - width: 100%
  167.                       - padding-bottom: 0%
  168.                   tap_action:
  169.                     action: toggle
  170.                     confirmation:
  171.                       exemptions: []
  172.                       text: >-
  173.                         [[[ return `确定${(entity.state === "on") ? "关闭" : "打开"}
  174.                         ${entity.attributes.friendly_name}?`]]]
  175.                 - type: custom:button-card
  176.                   entity: switch.zdc1_plug3_84f3eb9d9f1f
  177.                   entity_picture: /local/pic/6.png
  178.                   icon: mdi:power
  179.                   show_entity_picture: true
  180.                   show_name: false
  181.                   state:
  182.                     - styles:
  183.                         card:
  184.                           - filter: opacity(80%)
  185.                         icon:
  186.                           - filter: grayscale(100%)
  187.                       value: 'off'
  188.                   styles:
  189.                     card:
  190.                       - height: 100px
  191.                       - padding: 0px
  192.                     entity_picture:
  193.                       - width: 100%
  194.                       - padding-bottom: 0%
  195.                   tap_action:
  196.                     action: toggle
  197.                     confirmation:
  198.                       exemptions: []
  199.                       text: >-
  200.                         [[[ return `确定${(entity.state === "on") ? "关闭" : "打开"}
  201.                         ${entity.attributes.friendly_name}?`]]]
复制代码


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

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

DC1 有电量统计功能吗？
作者: ghostist    时间: 2023-9-26 09:58
Jays 发表于 2023-9-25 20:51
DC1 有电量统计功能吗？

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

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

刷蚊子大佬的固件就有
作者: alanshu    时间: 2023-9-28 21:43
本帖最后由 alanshu 于 2023-9-29 23:51 编辑

看看 搞定收工。
作者: cason8001    时间: 2025-1-12 18:46
收藏一下，谢谢咯



欢迎光临 『瀚思彼岸』» 智能家居技术论坛 (https://bbs.hassbian.com/) Powered by Discuz! X3.5