请选择 进入手机版 | 继续访问电脑版

『瀚思彼岸』» 智能家居第一站

 找回密码
 立即注册
查看: 1082|回复: 33

[经验分享] lovelace第三方插件介绍及界面大赛相关问题答疑

  [复制链接]

4

主题

405

帖子

1973

积分

金牌会员

Rank: 6Rank: 6

积分
1973
金钱
1558
HASS币
120
发表于 2019-1-5 15:02:53 | 显示全部楼层 |阅读模式
本帖最后由 killadm 于 2019-1-10 13:17 编辑

更新日志

2019-1-10
增加纵向堆叠、横向堆叠使用card-modder的示例代码

2019-1-8
增加背景示例代码


感谢囧大的付出和大家的支持,作为一个入坑一年的资深小白,能拿到第一真的感到很惶恐。论坛里很多前端大神因为种种原因没有出手,比如倾微 qiwe,我是看着他的帖子一步步成长起来的。其他参赛的大神也有很多无论是美观度、创意、功能、设备种类都在我之上,在这里对这些默默付出的大神表示衷心的感谢。

原贴已经上传了lovelace和floorplan的配置,其他配置整理后会发布到github。有什么疑问可以直接在此贴回复,帖中内容难免有错,希望大家积极指正。这是我第一次使用markdown,格式如果有问题也请见谅。

下边对第三方插件和界面中大家感兴趣的部分做个简单介绍。


手动目录

1.lovelace部分

原生插件的用法可以参考咸味土豆的这个帖子分享下官方的 Lovelace card demos,体验一下。

1.1 第三方插件介绍

这个介绍在参赛帖中已经写的差不多了,补充修改一下搬运过来让更多的人看到。我只用过1.1.1-1.1.9,其他的感觉很有用,一直在关注,没用过。

点击标题超链接可以进入项目主页,介绍、用法都有。

1.1.1 tracker-card

必装插件,用来检测lovelace插件和部分homeassistant第三方插件的更新,并可以通过它批量升级插件,依赖custom_updater

1.1.2 compact-custom-header

定制标题栏,移动端的效果可以单独设置,论坛里xieahui做过介绍: 新奇玩法  自定义 Lovelace 标题(缩进标题)!

更新很频繁,注意去github下载最新版本。

1.1.3 mini-graph-card

简洁的传感器图表。

1.1.4 mini-media-player

一个可以高度定制化的播放器,比自带的播放器体积小、功能强。

1.1.5 lovelace-card-modder

自定义每个卡片的 css,可玩性很高,我界面里的半透明/毛玻璃效果就是用这个插件做出来的。

注意:某个版本之后作者把卡片控制部分做成了一个独立插件lovelace-card-tools,所以要使用的话需要同时加载两个插件。

resources:
  - url: /local/card-tools.js
    type: js
  - url: /local/card-modder.js
    type: js

1.1.6 lovelace-slider-entity-row

给灯光添加滑块,custom-ui的替代品。

1.1.7 lovelace-toggle-lock-entity-row

开关加锁,custom-ui的替代品。

1.1.8 lovelace-secondaryinfo-entity-row

定制 secondaryinfo,半成品,目前只能展示主实体的属性,作者说显示其他实体的属性也没多大问题,但是他没想好应该怎么组织配置文件。

可以关注一下,暂时无法替代custom-ui。

1.1.9 vertical-stack-in-card

卡片纵向堆叠,跟官方的纵向堆叠插件的区别是这个插件可以去掉两个插件的边框让两个插件融为一体。可以替代原生界面的组嵌套功能。

1.1.10 lovelace-layout-card

一个可以控制卡片排列的插件,纵向、横向、单列、自定义排列,强迫症的福音
这里只放一张横向排列的图。

1.1.11 lovelace-useful-markdown-card

markdown 卡片,支持插入 ha 实体的状态信息,脑洞够大的话可玩性应该很高。

1.1.12 lovelace-popup-card

用自定义卡片替换实体的弹出信息。

1.1.13 lovelace-sensor-graphs

可以显示多个传感器的图表插件。

1.1.14 button-card

把实体显示为可定制样式的按钮,可以配合横向纵向堆叠节省空间。

1.1.15 lovelace-state-switch

根据状态切换卡片显示,脑洞大的可以搞出很多玩法。

1.1.16 bar-card

前几天新鲜出炉的进度条展示插件,进度条样式可以定制。

1.1.17 lovelace-weather-card-chart

带图表的天气插件

1.2 插件用法简单介绍

0.84开始,lovelace界面数据默认不再通过ui-lovelace.yaml配置,而是保存到了配置文件夹的.storage/lovelace里边,如果需要跟以前一样通过ui-lovelace.yaml编辑的话,需要编辑configuration.yaml加入下边的代码:

lovelace:
  mode: yaml

如果是没有历史遗留问题,完全新建的话,建议还是通过界面配置,调个卡片顺序什么的还是很方便的。

插件下载完成后,放入到配置文件的www目录,然后配置资源信息,配置完成后才会正常载入。

类似这样,注意区分类型,有的是module,有的是js

resources:
  - type: js
    url: /local/tracker-card.js?v=0.1.5

多个插件的效果

之后配置相应的卡片,项目主页都有介绍,方法都差不多,后边会简单介绍下lovelace-card-modder插件的用法。

1.3 lovelace界面中大家感兴趣的部分

1.3.1 毛玻璃效果

毛玻璃效果是通过lovelace-card-modder插件实现,目前card-modder插件兼容性还有点问题,对横向堆叠,纵向堆叠的兼容性不怎么好(已解决,后边有示例),浏览器的兼容性也有点问题,同样的界面在firefox、chrome、edge、safari下边显示都有差别。

这个效果依赖backdrop-filter属性,可以通过他把滤镜应用于元素后边的区域。这个属性目前还是实验性的,浏览器兼容性如下:

遗憾的是不支持 firefox 和 android webview

chrome默认也不支持,不过可以通过下面的方法开启

打开chrome://flags/#enable-experimental-web-platform-features,选择实验性网络平台,点击启用

毛玻璃特效的原理是通过backdrop-filter属性给卡片后边的区域添加一个模糊滤镜,每个要修改的卡片都需要嵌套在一层card-modder里边。
为了方便理解,我删除掉所有配置只留保留一个卡片

views:
  - title: Home
    cards:
      - type: entities
        title: 环境
        entities:
          - sensor.xiaomi_ap_temp
          - sensor.xiaomi_ap_humid
          - sensor.pressure_158d0001f55914
          - sensor.xiaomi_ap_aqi
          - fan.xiaomi_air_purifier_pro
          - climate.mi_acpartner
          - fan.bathroom
          - group.waterheater
          - cover.hassmart_192_168_123_218

嵌套一层card-modder之后

resources:                                                     #加载插件
  - type: js
    url: /local/card-tools.js
  - type: js
    url: /local/card-modder.js
views:
  - title: Home
    cards:
      - type: 'custom:card-modder'                      #声明该卡片类型为card-modder
        style:                                          #(下边这些颜色最好在主题里定义)
          --paper-card-background-color: rgba(67, 73, 84, 0.5) #修改卡片背景颜色
          --paper-item-icon-color: white                       #修改图标颜色:白色
          --primary-text-color: white                          #修改标题颜色:白色
          -webkit-backdrop-filter: blur(5px)                   #给上一层增加模糊滤镜
          backdrop-filter: blur(5px)                           #给上一层增加模糊滤镜
          color: white                                         #修改文字颜色:白色
        card:
          type: entities
          title: 环境
          entities:
            - sensor.xiaomi_ap_temp
            - sensor.xiaomi_ap_humid
            - sensor.pressure_158d0001f55914
            - sensor.xiaomi_ap_aqi
            - fan.xiaomi_air_purifier_pro
            - climate.mi_acpartner
            - fan.bathroom
            - group.waterheater
            - cover.hassmart_192_168_123_218


此时灰突突的不怎么好看,我们再给他加上背景

resources:
  - type: js
    url: /local/card-tools.js
  - type: js
    url: /local/card-modder.js
views:
  - title: Home
    background: center / cover no-repeat url("/local/bg2.jpg") fixed #背景
    cards:
      - type: 'custom:card-modder'
        style:
          --paper-card-background-color: rgba(67, 73, 84, 0.5)
          --paper-item-icon-color: white
          --primary-text-color: white
          -webkit-backdrop-filter: blur(5px)
          backdrop-filter: blur(5px)
          color: white
        card:
          type: entities
          title: 环境
          entities:
            - sensor.xiaomi_ap_temp
            - sensor.xiaomi_ap_humid
            - sensor.pressure_158d0001f55914
            - sensor.xiaomi_ap_aqi
            - fan.xiaomi_air_purifier_pro
            - climate.mi_acpartner
            - fan.bathroom
            - group.waterheater
            - cover.hassmart_192_168_123_218

效果就出来了

还可以再给卡片加个圆角

resources:
  - type: js
    url: /local/card-tools.js
  - type: js
    url: /local/card-modder.js
views:
  - title: Home
    background: center / cover no-repeat url("/local/bg2.jpg") fixed
    cards:
      - type: 'custom:card-modder'
        style:
          --paper-card-background-color: rgba(67, 73, 84, 0.5)
          --paper-item-icon-color: white
          --primary-text-color: white
          -webkit-backdrop-filter: blur(5px)
          backdrop-filter: blur(5px)
          border-radius: 15px                              #圆角
          color: white
        card:
          type: entities
          title: 环境
          entities:
            - sensor.xiaomi_ap_temp
            - sensor.xiaomi_ap_humid
            - sensor.pressure_158d0001f55914
            - sensor.xiaomi_ap_aqi
            - fan.xiaomi_air_purifier_pro
            - climate.mi_acpartner
            - fan.bathroom
            - group.waterheater
            - cover.hassmart_192_168_123_218


发帖的时候对card-modder的理解不够,以为对横向堆叠和纵向堆叠的支持不好,其实是可以的,只是一层层嵌套的有点恶心。

横向堆叠示例:

type: horizontal-stack
cards:
  - type: 'custom:card-modder'
    card:
      type: gauge
      title: CPU
      entity: sensor.processor_use
      severity:
        green: 0
        red: 85
        yellow: 45
    style:
      '--paper-card-background-color': 'rgba(67, 73, 84, 0.5)'
      '-webkit-backdrop-filter': blur(15px)
      backdrop-filter: blur(15px)
      color: white
  - type: 'custom:card-modder'
    card:
      type: gauge
      title: RAM
      entity: sensor.memory_use_percent
      severity:
        green: 0
        red: 85
        yellow: 45
    style:
      '--paper-card-background-color': 'rgba(67, 73, 84, 0.5)'
      '-webkit-backdrop-filter': blur(15px)
      backdrop-filter: blur(15px)
      color: white


横向堆叠+纵向堆叠示例:

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: 'custom:card-modder'
        card:
          type: 'custom:mini-graph-card'
          color: '#e74c3c'
          entity: sensor.xiaomi_ap_aqi
          line_width: 4
        style:
          '--paper-card-background-color': 'rgba(67, 73, 84, 0.5)'
          '-webkit-backdrop-filter': blur(15px)
          backdrop-filter: blur(15px)
          color: white
      - type: 'custom:card-modder'
        card:
          type: 'custom:mini-graph-card'
          color: '#3498db'
          entity: sensor.co2
          line_width: 4
        style:
          '--paper-card-background-color': 'rgba(67, 73, 84, 0.5)'
          '-webkit-backdrop-filter': blur(15px)
          backdrop-filter: blur(15px)
          color: white
  - type: horizontal-stack
    cards:
      - type: 'custom:card-modder'
        card:
          type: 'custom:mini-graph-card'
          color: '#e74c3c'
          entity: sensor.xiaomi_ap_temp
          line_width: 4
        style:
          '--paper-card-background-color': 'rgba(67, 73, 84, 0.5)'
          '-webkit-backdrop-filter': blur(15px)
          backdrop-filter: blur(15px)
          color: white
      - type: 'custom:card-modder'
        card:
          type: 'custom:mini-graph-card'
          color: '#3498db'
          entity: sensor.xiaomi_ap_humid
          line_width: 4
        style:
          '--paper-card-background-color': 'rgba(67, 73, 84, 0.5)'
          '-webkit-backdrop-filter': blur(15px)
          backdrop-filter: blur(15px)
          color: white

tips:大批量应用card-modder会需要进行大量的缩进操作,建议用sublime text批量调整

2.floorplan部分


floorplan已经半年没更新了,lovelace自带的Picture-elements卡片已经能实现floorplan的大部分功能,建议新手不要入坑

2.1 教程

floorplan建议先看倾微 qiwe大神的入门帖

1.【还有这种操作】Floorplan 第一帖,图形化控制你的家居!
2.【还有这种操作】用 Floorplan 制作一个图形化的电视遥控器 UI
3.【Floorplan 教程三】制作自己的 SVG 图片文件

4.【Floorplan 教程四】写 Floorplan.yaml 配置文件和 CSS 主题属性文件

2.2 floorplan中大家感兴趣的部分

2.2.1 配色

配色来源于这个项目,我只是仿造了一个超低配版,没办法,没有大 house (>_<、)

Inkscape打开svg文件,选中想要查看颜色的物体,右边填充和笔刷内就会显示色号。

画图的时候注意分层,比如背景、墙壁、门窗、实体、文字都单独分层,并善用锁定功能,方便维护。floorplan可以控制层的显示和隐藏,因此可以弄出比较复杂的交互逻辑,我没弄过,可以参考上面的项目。

2.2.2 风扇动画

旋转的风扇可以直接从我的svg里边把风扇复制到你创建的项目中,之后缩放到合适尺寸,设置对象属性中的ID为你想要控制的风扇的ID

编辑floorplan.yaml,加入以下代码

  - name: bathroom_fan                  #名称,随便写
    entities:
      - fan.bathroom                    #要控制的实体名称,要和svg里边设置的ID一致
    states:
      - state: 'on'
        class: 'bathroom_fan_on'        #当状态为开时,风扇图标展示的风格
      - state: 'off'
        class: 'bathroom_fan_off'       #当状态为关时,风扇图标展示的风格
    action:
      service: toggle                   #点击之后触发的动作,这里是开关循环

编辑homeassistant配置文件夹下的www/custom_ui/floorplan/floorplan.css,加入以下代码

#fan\.bathroom {                                  /*用反斜杠转义class中的点*/
  transform-origin: center center;                /*设置风扇旋转轴为图标正中*/
}

.bathroom_fan_on {                                /*风扇开启时风扇图标风格*/
  fill: #bdf271 !important;                       /*填充颜色*/
  -webkit-animation: rotation 2s infinite linear; /*把动画应用到风扇图标*/
  transform-box: fill-box;                        /*实验性属性,不加图标会乱飞*/
}

.bathroom_fan_off {                               /*风扇关闭时风扇图标风格*/
  fill: #424242 !important;                       /*填充颜色*/
}

@-webkit-keyframes rotation {                     /*旋转动画*/
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}

2.2.3 开关门动画

门直接自己画一个长方形就可以了,跟上边一样设置好门的对象属性ID

编辑floorplan.yaml,加入以下代码,注释就不加了,含义跟上边一样

  - name: door_sensor_bathroom
    entities:
      - binary_sensor.door_sensor_bathroom
    states:
      - state: 'off'
        class: 'bathroom_door_closed'
      - state: 'on'
        class: 'bathroom_door_open'

编辑homeassistant配置文件夹下的www/custom_ui/floorplan/floorplan.css,加入以下代码

#binary_sensor\.door_sensor_bathroom {
  transform-origin: top right;          /*设置风扇旋转轴为矩形门的右上角*/
}

.bathroom_door_open {                   /*门开启时门图标风格*/
  fill: #e7376b !important;             /*填充颜色*/
  animation-duration: 2s;               /*动画持续时间*/
  animation-name: rotate-90;            /*把逆时针旋转90度动画应用到门图标*/
  animation-fill-mode: forwards;        /*在动画结束后应用该属性值*/
  transform-box: fill-box;
}

.bathroom_door_closed {                 /*门关闭时门图标风格*/
  fill: #00adee !important;             /*填充颜色*/
  animation-duration: 2s;               /*动画持续时间*/
  animation-name: rotateReset-90;       /*把顺时针旋转90度动画应用到门图标*/
  transform-box: fill-box;
}

@keyframes rotate-90 {                   /*逆时针旋转90度*/
    100% {
        transform: rotate(-90deg);
    }
}

@keyframes rotateReset-90 {              /*顺时针旋转90度*/
    0% {
        transform: rotate(-90deg);
    }
    100% {
        transform: none;
    }
}



评分

参与人数 5金钱 +70 HASS币 +20 收起 理由
windgo + 10 纳尼,还有这种操作?
Jones + 20 + 20 绝对的大神级运用!
huex + 10 厉害了word楼主!
咸味土豆 + 10 大神666!
neroxps + 20 厉害了word楼主!

查看全部评分

回复

使用道具 举报

3

主题

128

帖子

961

积分

高级会员

Rank: 4

积分
961
金钱
828
HASS币
20
发表于 2019-1-5 15:16:14 | 显示全部楼层
请收下我的膝盖
回复

使用道具 举报

5

主题

725

帖子

1982

积分

金牌会员

Rank: 6Rank: 6

积分
1982
金钱
1257
HASS币
145
发表于 2019-1-5 15:53:24 | 显示全部楼层
膝盖有了还缺什么……  小腿给你吧
回复

使用道具 举报

0

主题

14

帖子

64

积分

注册会员

Rank: 2

积分
64
金钱
50
HASS币
0
发表于 2019-1-5 15:59:04 | 显示全部楼层
脑瓜疼,需要慢慢消化
回复

使用道具 举报

8

主题

366

帖子

1462

积分

金牌会员

Rank: 6Rank: 6

积分
1462
金钱
1096
HASS币
0
发表于 2019-1-5 16:31:45 | 显示全部楼层
大佬敲黑板了,我得备好板凳
回复

使用道具 举报

29

主题

1172

帖子

4249

积分

超级版主

Nero

Rank: 8Rank: 8

积分
4249
金钱
3047
HASS币
281
发表于 2019-1-5 17:48:57 | 显示全部楼层
大佬,我的膝盖请收下·······
Nero
回复

使用道具 举报

2

主题

29

帖子

156

积分

论坛分享达人

积分
156
金钱
127
HASS币
0
发表于 2019-1-5 17:52:40 | 显示全部楼层
给大佬递茶了      
回复

使用道具 举报

1

主题

122

帖子

538

积分

高级会员

Rank: 4

积分
538
金钱
416
HASS币
0
发表于 2019-1-5 17:54:41 | 显示全部楼层
先回复再看帖
回复

使用道具 举报

7

主题

143

帖子

1073

积分

论坛技术达人

积分
1073
金钱
930
HASS币
0
发表于 2019-1-5 17:55:07 | 显示全部楼层
支持  支持!必须顶上去
回复

使用道具 举报

1

主题

51

帖子

280

积分

中级会员

Rank: 3Rank: 3

积分
280
金钱
229
HASS币
0
发表于 2019-1-5 17:57:09 | 显示全部楼层
我妈问我为什么老是跪着看电脑
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2019-1-21 09:17 , Processed in 0.233853 second(s), 38 queries .

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表