第六章 Home assistant UI配置

第六章 Home assistant UI配置

在实体卡片上的事件

type: button
tap_action:
  action: toggle
hold_action:
  action: more-info

‍

一、Themes

‍

编写configuration.yml配置文件。

# 指定主题文件存储目录
frontend:
  themes: !include_dir_merge_named themes

在/config目录下创建themes文件夹，里面创建每个主题的文件夹，文件夹内创建主题配置文件，这里以/my_themes/my_themes.yml为例。

# Example configuration.yaml entry
frontend:
  themes:
	# 主题名字
    happy:
	  # 主要颜色
      primary-color: pink
	  # 文本主要颜色
      text-primary-color: purple
    sad:
      primary-color: steelblue
	  # 主题下模式，默认有dark和light两种模式
      modes:
        dark:
		  # 次要颜色
          secondary-text-color: slategray
    day_and_night:
      primary-color: coral
      modes:
        light:
          secondary-text-color: olive
        dark:
          secondary-text-color: slategray

之后可以在设置里面选择主题色。

二、Dashboard

简单来说就是最终展示的页面，开始之前先用一张图简单介绍一下，几个组件之间的关系。

​

• 地图类型

​

• 网页类型
  这个相当于将外部或内部的页面内嵌进来，可以用来访问NAS等管理界面。
  

​

• 概览

家里设备的一些信息，默认页面，当添加设备之后，设备信息也会出现在这个页面上，一般新建的也是这种类型的页面。

​

三、View

（一）布局

ha有四种应用的布局

​

• Panel：只有一张卡片在整个屏幕上，比如一个地图或图片。

该布局，最好使用map、horizontal stack、vertical stack、picture elements、picture glance卡片

type: sidebar
cards:
  - type: entities
    entities:
      - media_player.lounge_room
    view_layout:
      position: sidebar

• Sidebar：只有两列，一个宽的在左边，一个窄的在右边。

该类型不支持徽章！！ 你可以设置卡片在左边main区域或者右边的sidebar区域。

• Masonry：默认的样式，每列卡片平均分配。

该类型的卡片类型，基于卡牌大小，下一张卡片在最小的卡片下面。该卡片可以使用horizontal stack ， vertical stack 或者 grid三个类型的布局卡牌。

​

• Sections（测试中）：平均分配栅格在每一列。

自带栅格，不用使用horizontal stack ， vertical stack布局，直接拖拽进行编辑。

​

（二）创建

​

根据提示，选择自己需要的view类型进行创建就行，这里对创建的几个功能进行说明。

• 可见性，相当于增加用户的可见权限。
• 子视图：若设置为子视图，则不能在导航栏看见标题，多数用于导航跳转页面，配置导航跳转如下：

- type: picture
  image: /local/living_room.png
  tap_action:
    action: navigate
    navigation_path: /lovelace/living_room

• 视图导航路径：一般在view.path：​配置view的导航地址，但是实际需要引用的地址需要在前面加上/lovelace路径。

- title: Living room
  # the final path is /lovelace/living_room
  path: living_room

（三）常用配置说明

views:
   # 标题
 - title: test
   # view类型
   type: panel
   # 对谁可见
   # 主题
   theme: happy
   visible: 
      # 授权用户id
    - user1: 581fca7fdc014b8b894519cc531f9a04
    - user2: 6e690cc4e40242d2ab14cf38f1882ee6
   # 是否是子视图
   subview: false
   # 路径
   path: test
   # 图标 子视图没有，图标库：https://pictogrammers.com/library/mdi/
   icon: mid:home
   # 背景图
   background: /xxxxx
   # 返回路径，只有子视图才能配置
   back_path: /xxx
   # 徽章
   badges:
    - device_tracker.demo_paulus
    - entity: light.ceiling_lights
      name: Ceiling Lights
      icon: mdi:bulb
    - entity: switch.decorative_lights
      image: /local/lights.png
   # 卡片
   cards:
    - type: entities
      entities:
        - sensor.today_avg_price

四、Badges

徽章就是在视图顶端的装饰物。

​

• Entity Badge

主要展示一个实体的状态，该徽章可以增加操作

- type: entity
	# 实体
    entity: climate.qdhkl_ac_0103_air_conditioner
	# 当实体被激活时，比如空调打开，显示的颜色
	# 可以时颜色名称（见下表）或者颜色代码
    color: pink
	# 如果实体有自己的图片，则用其代替图标
    show_entity_picture: true
	# 展示名称
    name: ari-test
	# 实体标签
	icon: xxx
	# 是否展示名字
	show_name: true
	# 是否展示图标
	show_icon: true
	# 是否展示状态
	show_state: true
	# 展示状态的内容，根据实体具体而定
    state_content:
      - state
      - current_temperature
	# 点击事件
    tap_action:
      action: more-info
	# 长按事件
	hold_action:
	  xxx
	# 双击事件
	double_tap_action:
      xxx

颜色名称：

​primary​, accent​, disabled​, red​, pink​, purple​, deep-purple​, indigo​, blue​, light-blue​, cyan​, teal​, green​, light-green​, lime​, yellow​, amber​, orange​, deep-orange​, brown​, grey​, blue-grey​, black​ and white​.

• Entity Filter Badge

定义一组实体，根据设置的状态显示实体，这里如下图，他是分别显示的，而不是何在一起。

​

配置详解

 - type: entity-filter
  # 实体名
   entities:
 	 - climate.qdhkl_ac_0102_air_conditioner
     - climate.qdhkl_ac_0101_air_conditioner
   # 名称
   name: test
   # 图标
   icon: mid:home
   # 条件与state_filter只能留一个
   conditions:
	  # 条件操作符合
	- condition: or/and
	  conditions:

		   # 条件属性
	     - condition: state
		   # 符合状态显示
	       state: 'off'
	 	 - condition: state
		   # 不符合状态显示
	       state_not: 'off'
	       # 数值条件
		 - condition: numeric_state
		   # 数值条件
		   above: 10
		   below: 20 
	       # 屏幕条件
		 - condition: screen
	       # 大于该尺寸显示
	       media_query: "(min-width: 1280px)"
		   # 用户条件，对下列用户显示
	     - condition: user
	       users:
	        - 581fca7fdc014b8b894519cc531f9a04

		   
   # 状态过滤器，与conditions只能留一个
   state_filter:
	   # 逻辑操作符，包括：==, <=, <, >=, >, !=, in, not in, or regex.
	 - operator: '=='
	   # 状态值，在attribute没有时，默认为state的值
	   value: 50
	   # 用实体的属性值代替状态
	   attribute: humidity
	   # 默认和状态为on

	   # 默认state为home
	 - operator: "=="
       value: home

​

五、Card

太多了，有些用官网说明代替吧，如果自己用到，再详细解说。

1. Alarm panel card

锁定或解锁控制实体。

​

type: alarm-panel
name: House Alarm
# 将报警面板做为实体 自定义其实体id
entity: alarm_control_panel.alarm
# 显示哪几种报警状态，arm_home、arm_away是默认的
states:
  - arm_home
  - arm_away
  - arm_night
  - armed_custom_bypass

‍

2.Area

如果配置摄像头在这个区域，那么摄像头图像会代替显示图片

​

type: area
area: bedroom
# 导航路径
navigation_path: my_bedroom
# 是否展示摄像头图像
show_camera: true
# 主题
theme: green
# 长宽比
aspect_ratio: 16:<