软路由ikuai的监控UI卡片

jingge

首先安装需要的卡片

1. button-card
2. mini-graph-card


代码如下：

type: custom:button-card
styles:
  card:
    - width: 100%
    - height: 300px
    - padding: 10px
  grid:
    - grid-template-areas: |
        "b1 b1 b1 b1 b1 b1 b1 b1 b1 b1"
        "b2 e  e  e  e  e  b5 s1 s1 b4"
        "b2 e  e  e  e  e  b5 b6 b6 b4"
        "b2 e  e  e  e  e  b5 s2 s2 b4"
        "b2 e  e  e  e  e  b5 b7 b7 b4"
        "b2 e  e  e  e  e  b5 s3 s3 b4"
        "b2 b8 b8 b8 b8 b8 b8 b8 b8 b4"
        "b2 g  g  g  g  g  g  g  g  b4"
        "b2 g  g  g  g  g  g  g  g  b4"
        "b2 g  g  g  g  g  g  g  g  b4"
        "b2 b3 b3 b3 b3 b3 b3 b3 b3 b3"
    - grid-template-columns: repeat(10, minmax(20px, 1fr))
    - grid-template-rows: repeat(11, minmax(20px, 1fr))
custom_fields:
  e:
    card:
      type: custom:button-card
      show_entity_picture: true
      entity_picture: /local/images/icons/router.png
      styles:
        card:
          - width: 200px
          - height: 230px
        entity_picture:
          - width: 200px
          - height: 230px
  s1:
    card:
      type: custom:button-card
      entity: sensor.ikuai_cpu_temperature
      show_icon: false
      show_name: false
      styles:
        grid:
          - grid-template-areas: ""i s""
          - grid-template-columns: 30px 50px
          - grid-template-rows: 50px
        card:
          - width: 60px
          - height: 1fr
      custom_fields:
        i:
          card:
            type: custom:button-card
            show_entity_picture: true
            show_name: true
            entity_picture: /local/images/icons/CPU.png
            styles:
              card:
                - width: 30px
                - height: 30px
                - padding: 0
              name:
                - font-size: 12px
              entity_picture:
                - width: 20px
                - height: 20px
        s:
          card:
            type: custom:button-card
            entity: sensor.ikuai_cpu_temperature
            show_name: false
            show_icon: false
            show_state: true
            styles:
              state:
                - font-size: 12px
              card:
                - width: 30px
  s2:
    card:
      type: custom:button-card
      entity: sensor.ikuai_online_user
      show_icon: false
      show_name: false
      styles:
        grid:
          - grid-template-areas: ""i s""
          - grid-template-columns: 30px 50px
          - grid-template-rows: 50px
        card:
          - width: 60px
          - height: 1fr
      custom_fields:
        i:
          card:
            type: custom:button-card
            show_entity_picture: true
            show_name: true
            entity_picture: /local/images/icons/connect.png
            styles:
              card:
                - width: 30px
                - height: 30px
                - padding: 0
              name:
                - font-size: 12px
              entity_picture:
                - width: 20px
                - height: 20px
        s:
          card:
            type: custom:button-card
            entity: sensor.ikuai_online_user
            show_name: false
            show_icon: false
            show_state: true
            styles:
              state:
                - font-size: 12px
              card:
                - width: 30px
  s3:
    card:
      type: custom:button-card
      entity: sensor.ikuai_memory
      show_icon: false
      show_name: false
      styles:
        grid:
          - grid-template-areas: ""i s""
          - grid-template-columns: 30px 50px
          - grid-template-rows: 50px
        card:
          - width: 60px
          - height: 1fr
      custom_fields:
        i:
          card:
            type: custom:button-card
            show_entity_picture: true
            show_name: true
            entity_picture: /local/images/icons/memory.png
            styles:
              card:
                - width: 30px
                - height: 30px
                - padding: 0
              name:
                - font-size: 12px
              entity_picture:
                - width: 20px
                - height: 20px
        s:
          card:
            type: custom:button-card
            entity: sensor.ikuai_memory
            show_name: false
            show_icon: false
            show_state: true
            styles:
              state:
                - font-size: 12px
              card:
                - width: 30px
  g:
    card:
      type: custom:mini-graph-card
      entities:
        - entity: sensor.ikuai_download
          name: 下行
        - entity: sensor.ikuai_upload
          name: 上行
      animate: true
      update_interval: 5
      show:
        state: false
        name: false
        icon: false
        points: true
      styles:
        card:
          - width: 160px
          - height: 60px

复制代码

附上使用到的图标
图标需要放在www/images/icons文件夹里
实体需要替换成自己的实体

kndo

学到了

                               
登录/注册后可看大图

button card+css grid

kaka0992

感谢分享

dahai2626

开心版能用吗？

2CMOL

貌似这个不止是要这么点插件吧？ 我叫群里面好几个老哥试了下 发现排版都有问题

sy4405

我也出现楼上的问题

[email protected]

type: custom:button-card
styles:
  card:
    - width: 100%
    - height: 345px
    - padding: 5px
    - display: flex
  grid:
    - grid-template-areas: |
        "b1 b1 b1 b1 b1 b1 b1 b1 b1 bb1"
        "b2 e  e  e  e  e  b5 s1 s1 b4"
        "b2 e  e  e  e  e  b5 b6 b6 b4"
        "b2 e  e  e  e  e  b5 s2 s2 b4"
        "b2 e  e  e  e  e  b5 b7 b7 b4"
        "b2 e  e  e  e  e  b5 s3 s3 b4"
        "b2 e  e  e  e  e  b5 b8 b8 b4"
        "b2 e  e  e  e  e  b5 s4 s4 b4"
        "b2 b9 b9 b9 b9 b9 b9 b9 b9 b4"
        "b2 g  g  g  g  g  g  g  g  b4"
        "b2 g  g  g  g  g  g  g  g  b4"
        "b2 g  g  g  g  g  g  g  g  b4"
        "b2 b3 b3 b3 b3 b3 b3 b3 b3 b3"
    - grid-template-columns: repeat(5.5, minmax(0, 1fr))
    - grid-template-rows: repeat(1, minmax(0, 1fr))
    - align-items: center
    - gap: 3px
custom_fields:
  e:
    card:
      type: custom:button-card
      show_entity_picture: true
      entity_picture: /local/UI/IK1800.png
      styles:
        card:
          - width: 200px
          - height: 200px
        entity_picture:
          - width: 200px
          - height: 200px
  s1:
    card:
      type: custom:button-card
      entity: sensor.ikuai_memory
      show_icon: false
      show_name: false
      styles:
        grid:
          - grid-template-areas: "\"i s\""
          - grid-template-columns: 35px 50px
          - grid-template-rows: 30px
        card:
          - width: 120px
          - height: 40px
      custom_fields:
        i:
          card:
            type: custom:button-card
            show_entity_picture: true
            show_name: true
            entity_picture: /local/UI/CPU.png
            styles:
              card:
                - width: 30px
                - height: 30px
                - padding: 0
              name:
                - font-size: 13px
              entity_picture:
                - width: 20px
                - height: 20px
        s:
          card:
            type: custom:button-card
            entity: sensor.ikuai_cpu
            show_name: false
            show_icon: false
            show_state: true
            styles:
              state:
                - font-size: 12px
              card:
                - width: 78px
  s2:
    card:
      type: custom:button-card
      entity: sensor.ikuai_online_user
      show_icon: false
      show_name: false
      styles:
        grid:
          - grid-template-areas: "\"i s\""
          - grid-template-columns: 35px 50px
          - grid-template-rows: 30px
        card:
          - width: 120px
          - height: 40px
      custom_fields:
        i:
          card:
            type: custom:button-card
            show_entity_picture: true
            show_name: true
            entity_picture: /local/UI/connect.png
            styles:
              card:
                - width: 30px
                - height: 30px
                - padding: 0
              name:
                - font-size: 13px
              entity_picture:
                - width: 20px
                - height: 20px
        s:
          card:
            type: custom:button-card
            entity: sensor.ikuai_online_user
            show_name: false
            show_icon: false
            show_state: true
            styles:
              state:
                - font-size: 12px
              card:
                - width: 78px
  s3:
    card:
      type: custom:button-card
      entity: sensor.ikuai_memory
      show_icon: false
      show_name: false
      styles:
        grid:
          - grid-template-areas: "\"i s\""
          - grid-template-columns: 35px 50px
          - grid-template-rows: 30px
        card:
          - width: 120px
          - height: 40px
      custom_fields:
        i:
          card:
            type: custom:button-card
            show_entity_picture: true
            show_name: true
            entity_picture: /local/UI/memory.png
            styles:
              card:
                - width: 30px
                - height: 30px
                - padding: 0
              name:
                - font-size: 13px
              entity_picture:
                - width: 20px
                - height: 20px
        s:
          card:
            type: custom:button-card
            entity: sensor.ikuai_memory
            show_name: false
            show_icon: false
            show_state: true
            styles:
              state:
                - font-size: 12px
              card:
                - width: 78px
  s4:
    card:
      type: custom:button-card
      entity: sensor.ikuai_memory
      show_icon: false
      show_name: false
      styles:
        grid:
          - grid-template-areas: "\"i s\""
          - grid-template-columns: 35px 50px
          - grid-template-rows: 30px
        card:
          - width: 120px
          - height: 40px
      custom_fields:
        i:
          card:
            type: custom:button-card
            show_entity_picture: true
            show_name: true
            entity_picture: /local/UI/memory.png
            styles:
              card:
                - width: 30px
                - height: 30px
                - padding: 0
              name:
                - font-size: 13px
              entity_picture:
                - width: 20px
                - height: 20px
        s:
          card:
            type: custom:button-card
            entity: sensor.ikuai_memory
            show_name: false
            show_icon: false
            show_state: true
            styles:
              state:
                - font-size: 12px
              card:
                - width: 78px
  g:
    card:
      type: custom:mini-graph-card
      entities:
        - entity: sensor.ikuai_download
          name: 下行
        - entity: sensor.ikuai_upload
          name: 上行
      animate: true
      update_interval: 5
      show:
        state: false
        name: false
        icon: false
        points: true

简单下修复，给有需要的人