第六章 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 entryfrontend: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_roompath: 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:10below: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
# 将报警面板做为实体 自定义其实体identity: 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:<