玩转lovelace,发几张图瞅瞅。

一、2020-05-17 更新一下

更新内容:删掉没用的废话。


可以抄的作业,这大佬牛逼:

  • 这个是HKI主题配置的卡片:

  • 这个是dwains-theme主题配置的:

二、 来源

2.1 Isa

仓库github:

效果图:

2.2 jimz011

大佬走的homekit的风格,但是比homekit强大而且灵活的多.

  • github地址

已经更新了好多版本了,我一直在看他最早的配置,最新的这个已经大改了,要玩还得琢磨。

这是以前的效果(比较多,好几十张,转个gif瞅瞅):

有条件的可以看看大神的油管视频。

  • 新版本

看起来更好看了:



2.3 dwainscheeren

很好看的一个主题,看起来是模块化的,我没搞成功,看效果图就知道了。

  • github地址:

测试他的主题没有成功之后,我发现我的界面多了一个毛玻璃效果,你是哪儿来的??

三、 我的配置

3.1 前置配置

3.1.1 views

JeL3sP.png

CCH更新之后可以放到底部,特性也多了不少,没空玩的,这样子是HA官方样式。

3.1.2 配置和目录结构

configuration.yaml配置
homeassistant:
  name: 控制台
  latitude: 39.000000
  longitude: 100.0000000
  elevation: 3
  unit_system: metric
  time_zone: Asia/Shanghai
  packages: !include_dir_named packages
lovelace:
  mode: yaml
### HACS和自定义插件的配置,hacsfiles路径的都是HACS支持的,其他不是这个的就是自定义插件了
resources:
    - url: /hacsfiles/button-entity-row/button-entity-row.js
      type: module
    - url: /hacsfiles/mini-media-player/mini-media-player-bundle.js
      type: module
    - url: /hacsfiles/upcoming-media-card/upcoming-media-card.js
      type: js
    - url: /hacsfiles/calendar-card/calendar-card.js
      type: js
    - url: /hacsfiles/button-card/button-card.js
      type: module
    - url: /hacsfiles/vertical-stack-in-card/vertical-stack-in-card.js
      type: js
    - url: /hacsfiles/lovelace-card-mod/card-mod.js
      type: module

# Some dwains theme resources 这个应该就是毛玻璃效果的出处了
    - type: css
      url: 'https://fonts.googleapis.com/css?family=Open+Sans&display=swap'
    - type: css
      url: /local/dwains-theme/style.css
    - type: module
      url: /local/dwains-theme/plugins/dwains-weather-card/dwains-weather-card.js?v=0.0.1
    - type: module
      url: /local/dwains-theme/plugins/dwains-notification-card/dwains-notification-card.js?v=0.0.1
    - type: module
      url: /local/dwains-theme/plugins/dwains-cover-card/dwains-cover-card.js?v=0.0.1
    - type: module
      url: /local/dwains-theme/plugins/dwains-flexbox-card/dwains-flexbox-card.js?v=0.1.0
### 手动安装
    - url: /local/customize/lovelace-weather-card-chart/weather-card-chart.js
      type: module
    - url: /local/customize/lovelace-card-loader/card-loader.js
      type: js
    - url: /local/customize/floorplan-card/floorplan-card.js
      type: js
    - url: /local/customize/slideshow-card/slideshow-card.js
      type: js
### 可替代插件
    - url: /local/customize/thomasloven/popup-card.js   # 被browser_mod插件替代
      type: js
    - url: /local/customize/thomasloven/markdown-mod.js # 原生支持,写法有变
      type: js
### 配置多界面的位置
  dashboards:
    entity-lovelace:
      mode: yaml
      title: 面板1
      show_in_sidebar: true #false
      icon: mdi:information-outline
      filename: entity-lovelace.yaml
    dwains-theme:
      mode: yaml
      title: Dwains
      icon: mdi:alpha-d-box
      show_in_sidebar: true
      filename: dwains-theme-lovelace.yaml

### 其他都和以前差不多

http:
  server_port: 8123
hacs:
  token: !secret github_hacs
recorder:
  db_url: mysql://hass:passwd@10.11116.1020.211117/homeassistant?charset=utf8
  purge_keep_days: 5
logger:
  default: warning
#default_config:

#cloud:
config:
frontend:
  themes: !include_dir_merge_named themes/
  javascript_version: latest
  extra_html_url:
    - /local/custom_ui/hass-bha-icons/hass-bha-icons.html
    - /local/custom_ui/state-card-floorplan.html
history:
logbook:
#map:
mobile_app:
#person: 
#script:
ssdp:
#sun:
system_health:
updater:
zeroconf:
########################################################################
stream:
ffmpeg:
wake_on_lan:
discovery:
#  ignore:
#    - yeelight 
shopping_list:
#conversation:
tts:
  - platform: baidu
    app_id: !secret baidu_tts_app_id
    api_key: !secret baidu_tts_api_key
    secret_key: !secret baidu_tts_secret_key
    speed: 5
    pitch: 5
    volume: 8
    person: 0
ifttt:
  key: !secret ifttt_key
mqtt:
  broker: !secret mqtt_broker
  username: !secret mqtt_username
  password: !secret mqtt_password
  client_id: macmini_debian10
#  discovery: true
panel_custom:
  - name: floorplan
    sidebar_title: 平面图
    sidebar_icon: mdi:developer-board
    url_path: floorplan
    config: !include floorplan.yaml
# panel_iframe:
  logitechmediaserver:
    title: LogitechMediaServer
    icon: mdi:music
    url: 'https://xxxx/'
  daapd:
    title: DAAPD
    icon: mdi:music
    url: 'https://xxxx/#/'
config目录(hassio)

packages目录

config同目录下的文件,比如lovelace文件夹

JeLYdS.png

上面的东西都是通过!include 引用的,它本身很好用,不过最开始没有这个习惯的话就比较麻烦,比如我。

3.2 效果展示


3.2.1 首页

3.2.2 位置追踪

3.2.3 设备控制

3.2.4 环境监测

3.2.5 家庭安防

3.2.6 多媒体控制

  • 红外控制:博联(pro和mini),现在基本都在吃灰

  • harmony:harmony+hub使用体验确实不错,无脑接入。

  • 遥控器也是两个动作,单击开关,长按弹出遥控器界面。

3.2.7 能耗监测

电表计量的准确性没怎么管,我家虽然电费不少,不过也用不了这么多电。

3.2.8 设备监控

四 、我的环境

主机环境:

debian10+docker+hassio,我的配置N1跑不起来。

平台环境:

hassio版本: Home Assistant 0.108.5.

前排支持大佬干货满满

大佬厉害,向大佬学习,虽然学不会

browser_mod的popup多了服务调用 好像是可以无缝迁移的
我现在利用browser_mod的popup服务,在floorplan里点击元素调用,实现了弹窗,展示的还是原来lovelace里的漂亮界面。(原版floorplan教程,只能调用设备默认的more info)
整体来说我现在是“化繁为简”,原先7个view:天气、交通、客厅、卧室、书房、厨房、其他,现在统一成了3个view:floorplan 天气 交通
floorplan集成了原来所有房间内的设施
至于为毛启用floorplan?原因有2:媳妇喜欢这个界面,还帮我完成了初稿图纸;最近上了一些zigbee设备,只需要看状态,不需要控制。综上,floorplan更直观。

目前:
地板显示区域有无人员活动
顶层遮罩显示对应灯是否开启(可控)
水浸传感器触发报警,会1s闪烁,不可控
插排、电视、电表、体脂称、空调、路由和宿主机、摄像头等,点击会弹出菜单,进行操作
门窗根据实际状态开合,有动画
空气净化器有动画
整体温湿度、传感器电量、定时器开关,我单独做了个按钮
人员是否在家,头像背景圈变色

感觉会很费时间。。已然退缩了

你家水浸了~~~水漫金山了~

昨天晚上泼水测试的…测试ios推送和图标闪烁效果
水浸这个昨晚才做的 :crazy_face:

你这个不错,我搞得复杂了

我原先也是 尤其是客厅那一页,设备多了太乱
新加的人体和门磁,我想看一下家里窗有没有关,那要在客厅、卧室、书房3个view下各看一遍…
于是就成了现在这样…
除了直观,最大的收获是媳妇接受我玩这些了 昨天看了效果还吵着要录屏发朋友圈炫耀(不过更可能是因为图是她画的)

有个做设计的媳妇真爽。

lovelace的floorplan不能放大
不然你会看到梳妆台上各种瓶瓶罐罐还有面膜…光这个 大概画了2个小时?(狗头保命)

我也想这么说来这,我媳妇儿基本就不用,一般就是出了故障了会告诉我,按钮不管用啦,灯又犯神经自己开关了……

土豆哥玩的太遛了,感谢分享

吵架不 :smirk:

大作就此诞生了,大佬的专注精神值得我学习

土豆界面溜,不过感觉很耗内存,感觉ghostist的实用性更强



看到大佬的帖子就想跟着贴。。
同样nr不会玩。。。自动化页面都是ha里做的,就不截图了

Floorplan,不配家具不好看,太单调。配了家具太乱。谁有啥好的效果图吗?
另外告诉大家啊,这个Floorplan搞起来并不难。我这小白一天都搞定了,包括自己画房间图。就是看着太乱了

发一个我的Floorplan, 很费时间, 而且我的老平板跑不动, 就一直搁着没进一步深化


扫地机的细节

这个真好看,大佬太秀了。