『瀚思彼岸』» 智能家居技术论坛

 找回密码
 立即注册
查看: 7640|回复: 31

[UI界面] 分享下自己配置的HA首页

[复制链接]

5

主题

48

帖子

442

积分

论坛分享达人

积分
442
金钱
394
HASS币
20
发表于 2023-2-16 20:14:38 | 显示全部楼层 |阅读模式
本帖最后由 qiangua13 于 2023-2-17 10:20 编辑

分享下自己配置的HA首页
1. 用kiosk-mode去掉了顶部标签页
2. 用油猴写了个脚本,去掉了滚动条
3. 其他若干插件
WX20230216-201218@2x.png


和大佬们的比肯定还差的远,不过也花了不少时间

1. 这里面比较麻烦的是,适配屏幕,各种样式的调整,以顶部的温湿度,person,时间 为例,使用的是lovelace-card-mod插件( https://github.com/thomasloven/lovelace-card-mod), 列一下代码:
type: vertical-stack
cards:
  - square: false
    columns: 5
    type: grid
    cards:
      - type: markdown
        content: >-
          <font color=#00ff00 size=4 face="冬青黑体">**{{
          state_attr('person.chen','friendly_name') }}!{{
          states('sensor.time_period') }}**</font>

          <font color=#f9f73e size=2>***<u>今天是:{{ states('sensor.date')
          }}***</u></font>
        card_mod:
          style: |
            ha-card {
              background-color: transparent;
            }
      - type: markdown
        content: >-
          <font color=#f9f73e size=2>***<u>阳台:温度 {{
          states('sensor.v1_cloud_250a44') }}°C,湿度 {{
          states('sensor.v1_cloud_250a44_humidity') }}%

          室内:温度 {{ states('sensor.t2_cloud_kkeg00') }}°C,湿度 {{
          states('sensor.t2_cloud_kkeg00_humidity' )}}%***</u></font>
        card_mod:
          style: |
            ha-card {
              background-color: transparent;
              margin-left: -55%
            }
      - type: custom:mushroom-person-card
        entity: person.chen
        icon_type: entity-picture
        primary_info: none
        secondary_info: none
        layout: vertical
        card_mod:
          style: |
            ha-card {
              background-color: transparent;
              position: absolute;
              left: 46%;
            }
      - type: custom:mushroom-person-card
        entity: person.nana
        layout: vertical
        primary_info: none
        secondary_info: none
        icon_type: entity-picture
        card_mod:
          style: |
            ha-card {
              background-color: transparent;
              position: absolute;
              left: 50%;
            }
      - type: custom:simple-clock-card
        use_military: true
        hide_seconds: false
        font_size: 4rem
        padding_size: 23px 0px 0px 0px
        card_mod:
          style: |
            ha-card {
              background-color: transparent;
              margin-left: 20%;
              color: #6acd32;
            }



评分

参与人数 5金钱 +58 收起 理由
ciasdmxhxjjpd@c + 10
sorrypqa + 10 感谢楼主分享!
Fable + 8 我来瀚思就为看你!
隔壁的王叔叔 + 10 以为是青铜,原来是王者!
+ 20 大神666!

查看全部评分

回复

使用道具 举报

1

主题

42

帖子

613

积分

高级会员

Rank: 4

积分
613
金钱
571
HASS币
0
发表于 2023-2-16 20:54:26 | 显示全部楼层
大佬牛批   请教一下 那个按钮加锁是怎么弄的
回复

使用道具 举报

1

主题

42

帖子

613

积分

高级会员

Rank: 4

积分
613
金钱
571
HASS币
0
发表于 2023-2-16 21:01:56 | 显示全部楼层
哈哈  找到了  Lovelace Love-Lock-Card
回复

使用道具 举报

7

主题

1067

帖子

3356

积分

论坛元老

Rank: 8Rank: 8

积分
3356
金钱
2289
HASS币
0
发表于 2023-2-16 22:55:10 | 显示全部楼层
大神,代码能分享一下不?这是一部分吗?空调没接进去啊
回复

使用道具 举报

15

主题

226

帖子

1413

积分

金牌会员

Rank: 6Rank: 6

积分
1413
金钱
1187
HASS币
0
发表于 2023-2-17 00:33:05 | 显示全部楼层
zsgcgrs 发表于 2023-2-16 21:01
哈哈  找到了  Lovelace Love-Lock-Card

加入实体错误
回复

使用道具 举报

5

主题

48

帖子

442

积分

论坛分享达人

积分
442
金钱
394
HASS币
20
 楼主| 发表于 2023-2-17 07:09:05 | 显示全部楼层
隔壁的王叔叔 发表于 2023-2-16 22:55
大神,代码能分享一下不?这是一部分吗?空调没接进去啊

空调,因为冬天没怎么用,所以没写里面去,在另外一个空调标签页另外加的
回复

使用道具 举报

1

主题

42

帖子

613

积分

高级会员

Rank: 4

积分
613
金钱
571
HASS币
0
发表于 2023-2-17 08:43:48 | 显示全部楼层
三种模式,密码,确认,超时(第一次点没反应,要等,防止误触),超时和确认就把password去掉
type: custom:love-lock-card
title: 超时timeout - 确认confirm
popup: password
password: 1234
cards:
  - type: entities
    entities:
      - entity: input_boolean.test
  - type: entities
    entities:
      - entity: input_boolean.test
回复

使用道具 举报

5

主题

67

帖子

427

积分

中级会员

Rank: 3Rank: 3

积分
427
金钱
360
HASS币
0
发表于 2023-2-17 09:04:02 | 显示全部楼层
做得蛮不错的!支持一下
回复

使用道具 举报

50

主题

1300

帖子

4884

积分

论坛DIY达人

积分
4884
金钱
3584
HASS币
20
发表于 2023-2-18 23:08:50 | 显示全部楼层
谢谢楼主的分享,设计不错,很漂亮,用的是什么绝招把卡片的宽度弄这么窄的?

SNAG-2023-2-18_00001.png
回复

使用道具 举报

2

主题

59

帖子

838

积分

高级会员

Rank: 4

积分
838
金钱
779
HASS币
0
发表于 2023-2-19 08:01:14 | 显示全部楼层
主要是用mushroom搭的,主页只保留常用的功能
截屏2023-02-19 07.57.33.png
回复

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-4-23 19:06 , Processed in 0.071175 second(s), 35 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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