花蟋蟀 发表于 2019-7-14 00:41:55

【Lovelace】界面之斐讯DC1

本帖最后由 花蟋蟀 于 2019-7-16 10:36 编辑

【Lovelace】界面之斐讯DC1

【效果图】



【前置要求】
1、刷了ESPHome的斐讯DC1接入HA（集成里添加很方便）
（教程在这https://bbs.hassbian.com/forum.php?mod=viewthread&tid=6628&highlight=DC1）
2、安装了button-card 插件


【配置UI】
新建右下角MANUAL CARD卡片-复制代码替换所有内容-保存


【配置文件】
单个DC1配置如下
cards:
- cards:
      - cards:
          - type: 'custom:button-card'
            entity: sensor.phicomm_dc1_power
            name: 功率
            color_type: card
            color: 'rgb(223, 150, 97)'
            show_state: true
            show_icon: false
            show_name: true
            show_units: true
            show_label: false
            show_last_changed: false
            styles:
            card:
                - height: 40px
            state:
            - operator: <
                value: 0.1
                color: 'rgb(255, 255, 255)'
                styles:
                  card:
                  - filter: opacity(80%)
                  icon:
                  - filter: grayscale(100%)
          - type: 'custom:button-card'
            entity: sensor.phicomm_dc1_current
            name: 电流
            color_type: card
            color: 'rgb(142, 189, 208)'
            show_state: true
            show_icon: false
            show_name: true
            show_units: true
            show_label: false
            show_last_changed: false
            styles:
            card:
                - height: 40px
            state:
            - operator: <
                value: 0.1
                color: 'rgb(255, 255, 255)'
                styles:
                  card:
                  - filter: opacity(80%)
                  icon:
                  - filter: grayscale(100%)
          - type: 'custom:button-card'
            entity: sensor.phicomm_dc1_voltage
            name: 电压
            color_type: card
            color: 'rgb(106, 180, 197)'
            show_state: true
            show_icon: false
            show_name: true
            show_units: true
            show_label: false
            show_last_changed: false
            styles:
            card:
                - height: 40px
            state:
            - operator: <
                value: 220
                color: 'rgb(255, 255, 255)'
                styles:
                  card:
                  - filter: opacity(80%)
                  icon:
                  - filter: grayscale(100%)
      type: vertical-stack
      - type: 'custom:button-card'
      entity: switch.phicomm_dc1_switch1
      name: 插孔命名1
      icon: 'mdi:power'
      color_type: card
      color: 'rgb(146, 180, 97)'
      show_state: false
      show_icon: true
      show_name: true
      show_units: true
      show_label: false
      show_last_changed: false
      show_entity_picture: false
      entity_picture: /local/image/image5-1.jpg
      lock: false
      styles:
          card:
            - height: 135px
      state:
          - value: 'off'
            styles:
            card:
                - filter: opacity(80%)
            icon:
                - filter: grayscale(100%)
      - type: 'custom:button-card'
      entity: switch.phicomm_dc1_switch2
      name: 插孔命名2
      icon: 'mdi:power'
      color_type: card
      color: 'rgb(146, 140, 150)'
      show_state: false
      show_icon: true
      show_name: true
      show_units: true
      show_label: false
      show_last_changed: false
      show_entity_picture: false
      entity_picture: /local/image/image5-1.jpg
      lock: false
      styles:
          card:
            - height: 135px
      state:
          - value: 'off'
            styles:
            card:
                - filter: opacity(80%)
            icon:
                - filter: grayscale(100%)
      - type: 'custom:button-card'
      entity: switch.phicomm_dc1_switch3
      name: 插孔命名3
      icon: 'mdi:power'
      color_type: card
      color: 'rgb(123, 200, 164)'
      show_state: false
      show_icon: true
      show_name: true
      show_units: true
      show_label: false
      show_last_changed: false
      show_entity_picture: false
      entity_picture: /local/image/image5-1.jpg
      lock: false
      styles:
          card:
            - height: 135px
      state:
          - value: 'off'
            styles:
            card:
                - filter: opacity(80%)
            icon:
                - filter: grayscale(100%)
      - cards:
          - type: 'custom:button-card'
            entity: sensor.phicomm_dc1_wifi_signal
            name: WIFI
            icon: 'mdi:wifi'
            color_type: card
            color: 'rgb(76, 195, 97)'
            show_state: true
            show_icon: true
            show_name: true
            show_units: true
            show_label: false
            show_last_changed: false
            styles:
            card:
                - height: 65px
            state:
            - operator: ''
                value: -86
                styles:
                  card:
                  - filter: opacity(60%)
                  icon:
                  - filter: grayscale(100%)
          - type: 'custom:button-card'
            entity: switch.phicomm_dc1_logo_light
            name: Light
            icon: 'mdi:flare'
            color_type: card
            color: 'rgb(76, 195, 217)'
            show_state: false
            show_icon: true
            show_name: true
            show_units: true
            show_label: false
            show_last_changed: false
            styles:
            card:
                - height: 60px
            state:
            - value: 'off'
                name: Light
                icon: 'mdi:lightbulb-outline'
                styles:
                  card:
                  - filter: opacity(80%)
                  icon:
                  - filter: grayscale(80%)
            - value: 'on'
                name: Light
                icon: 'mdi:lightbulb-on-outline'
      type: vertical-stack
    type: horizontal-stack
- type: 'custom:button-card'
    entity: switch.phicomm_dc1_switch0
    name: 电源总控 | USB电源
    color_type: card
    color: 'rgb(241, 103, 69)'
    show_state: false
    show_icon: false
    show_name: true
    show_units: true
    show_label: false
    show_last_changed: false
    show_entity_picture: false
    entity_picture: /local/image/image5-1.jpg
    lock: true
    styles:
      card:
      - height: 40px
    state:
      - value: 'off'
      styles:
          card:
            - filter: opacity(80%)
          icon:
            - filter: grayscale(100%)
type: vertical-stack


【说明】

电源总控带锁，开关需先点击解锁后控制


缥缈的孤鸿 发表于 2019-7-14 01:04:47

先马再看

MattSmell 发表于 2019-7-14 10:43:58

设计的不错，有意思

情非殇 发表于 2019-7-14 11:24:10

不明觉厉，homekit党路过支持，感谢分享//

mars.z 发表于 2019-7-14 11:51:06

很好看哎感谢分享

33230 发表于 2019-7-14 15:50:05

DC1还在路上 收了！

令狐鸣 发表于 2019-7-15 23:16:31

这个好赞,好看,好用.

zoujian019 发表于 2019-7-21 20:49:29

button-card 插件下载后怎么安装啊？放在哪个目录呢？

zoujian019 发表于 2019-7-22 01:22:25

本帖最后由 zoujian019 于 2019-7-22 02:00 编辑

已经配置好了，感谢！

花蟋蟀 发表于 2019-7-22 06:13:13

zoujian019 发表于 2019-7-21 20:49
button-card 插件下载后怎么安装啊？放在哪个目录呢？

WWW下，在lovelace里添加语句
页: [1] 2 3 4 5 6 7 8
查看完整版本: 【Lovelace】界面之斐讯DC1