Hass-Panel - 开源智能家居控制面板

文章目录

    • ▎项目介绍：
    • 预览图
    • ▎主要特性
    • 安装部署
      • Docker方式 正式版
      • Home Assistant Addon方式
      • 详细安装方式
        • 1. Home Assistant 插件安装（推荐）
        • 2. Docker 安装
        • 命令功能说明 ：
        • 3. Docker Compose 安装
        • 升级说明
        • Docker Compose 版本升级
    • 功能配置
      • 支持的卡片类型
      • 卡片管理
    • 开发
    • 使用指南
      • 系统概述
        • 1. 初始化
        • 2. 系统首页
        • 3. 系统配置
    • 常见问题
    • 关注我的CDDN博客

▎项目介绍：

一个智能家居控制面板，它使用 Home Assistant 的 Websocket API，并支持作为 Home Assistant 操作系统的插件部署。
丰富的设备支持：灯光控制、空调控制、窗帘控制、传感器监控、摄像头查看、场景控制。

预览图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

▎主要特性

📱 响应式设计，支持移动端和桌面端
🔧 高度可配置，自由拖拽布局
🚀 PWA支持，可安装到桌面
🎨 美观的用户界面：

  • 支持亮色/暗色/跟随系统三种主题模式
  • 毛玻璃效果卡片设计
  • 主题色滚动条
  • 优化的移动端视图

👥 多用户管理系统，支持JWT认证
🔐 安全的密码加密存储
🎥 强大的摄像头支持：

  • WebRTC/ONVIF/RTSP协议支持
  • HLS流自动检测和切换
  • 优化的视频流播放体验

🔌 丰富的设备支持:

  1. 灯光控制
  2. 空调控制
  3. 窗帘控制
  4. 传感器监控
  5. 摄像头查看
  6. 场景控制
  7. 用电量统计
  8. 插座控制
  9. 服务器监控
  10. PVE虚拟机监控
  11. 通用实体卡片（支持自定义配置和分组显示）

安装部署

系统使用 SQLite 数据库进行配置存储
首次使用需要完成系统初始化流程
摄像头功能需要正确配置 ONVIF/RTSP 地址

Docker方式 正式版

docker run \--name hass-panel \--restart unless-stopped \--network host \-v ./data/:/config/hass-panel \-d \ghcr.io/mrtian2016/hass-panel:latest

安装完成后直接打开机器的5123端口即可使用

Home Assistant Addon方式

https://my.home-assistant.io/redirect/supervisor_add_addon_repository/?repository_url=https%3A%2F%2Fkkgithub.com%2Fmrtian2016%2Fhass-panel

或者手动添加：

  1. 在Home Assistant的侧边栏中，点击"配置" -> “加载项” -> “加载项商店”
  2. 点击右上角的三个点，选择"存储库"
  3. 添加存储库地址：https://kkgithub.com/mrtian2016/hass-panel
  4. 点击"添加"并刷新页面
  5. 在加载项商店中找到并安装"Hass Panel"
  6. 启动后即可在侧边栏访问

详细安装方式

1. Home Assistant 插件安装（推荐）
  • 方式一：一键添加（推荐）#
    点击下面的按钮将 Hass-Panel 添加到您的 Home Assistant：

添加到Home Assistant

  • 方式二：手动添加#
    在 Home Assistant 的侧边栏中，点击"配置" -> “加载项” -> “加载项商店”
    点击右上角的三个点，选择"存储库"
    添加存储库地址：https://github.com/mrtian2016/hass-panel
    点击"添加"并刷新页面
    在加载项商店中找到并安装"Hass Panel"
    启动后即可在侧边栏访问
2. Docker 安装

使用以下命令启动 Hass-Panel：

docker run \--name hass-panel \--restart unless-stopped \--network host \-v ./data/:/config/hass-panel \-d \registry.cn-hangzhou.aliyuncs.com/hass-panel/hass-panel:latest
命令功能说明 ：

创建一个名为 hass-panel 的容器
设置容器自动重启
将配置文件保存在主机的 ./data/ 目录
使用最新版本的 Hass-Panel 镜像
访问地址：http://your-docker-host:5123

3. Docker Compose 安装

如果您更喜欢使用 Docker Compose 来管理容器，可以按照以下步骤操作：

创建一个 docker-compose.yml 文件，内容如下：

version: '3'
services:hass-panel:container_name: hass-panelimage: registry.cn-hangzhou.aliyuncs.com/hass-panel/hass-panel:latestrestart: unless-stoppednetwork_mode: hostvolumes:- ./data:/config/hass-panel

在 docker-compose.yml 文件所在目录运行以下命令启动服务：

docker-compose up -d

这将创建并启动 Hass-Panel 容器，配置与 Docker 安装方式相同。

访问地址：http://your-docker-host:5123

升级说明

Home Assistant 插件版本升级#
在 Home Assistant 的加载项商店中找到 Hass Panel
点击"更新"按钮
等待更新完成后重启插件
Docker 版本升级#

  • 拉取最新镜像
docker pull registry.cn-hangzhou.aliyuncs.com/hass-panel/hass-panel:latest
  • 停止并删除旧容器
docker stop hass-panel
docker rm hass-panel
  • 使用新镜像重新创建容器
docker run \--name hass-panel \--restart unless-stopped \-v ./data/:/config/hass-panel \-d \registry.cn-hangzhou.aliyuncs.com/hass-panel/hass-panel:latest
Docker Compose 版本升级

在 docker-compose.yml 文件所在目录运行以下命令升级服务：

-拉取最新镜像并重新创建容器

docker-compose pull
docker-compose up -d

功能配置

支持的卡片类型

  1. 时间卡片 (TimeCard)
  2. 天气卡片 (WeatherCard) - 支持AQI国际化和风向指示
  3. 灯光状态卡片 (LightStatusCard)
  4. 房间灯光概览卡片 (LightOverviewCard)
  5. 传感器卡片 (SensorCard)
  6. 媒体播放器卡片 (MediaPlayerCard)
  7. 大型媒体播放器卡片 (MaxPlayerCard)
  8. 窗帘控制卡片 (CurtainCard)
  9. 电量监控卡片 (ElectricityCard) - 优化的电压、电流和功率显示
  10. 路由器监控卡片 (RouterCard) - 支持运行时间显示
  11. NAS监控卡片 (NASCard) - 改进的存储信息显示
  12. 摄像头卡片 (CameraCard) - 支持多种视频流协议
  13. 空调控制卡片 (ClimateCard)
  14. 人体传感器卡片 (MotionCard)
  15. 净水器卡片 (WaterPurifierCard)
  16. 光照传感器卡片 (IlluminanceCard)
  17. 快捷指令面板 (ScriptPanel)
  18. 插座状态卡片 (SocketCard)
  19. 通用实体卡片 (UniversalCard) - 支持自定义实体配置和分组显示
  20. PVE监控卡片 (PVECard) - 虚拟机监控
  21. 服务器监控卡片 (ServerCard)
  22. 每日一言卡片 (DailyQuoteCard)
  23. 家庭人员状态卡片 (FamilyCard)

卡片管理

  • 支持显示/隐藏控制
  • 支持拖拽排序
  • 支持自定义大小(桌面端)
  • 支持添加/编辑/删除卡片（带确认保护）
  • 支持自定义布局
  • 支持响应式布局
  • 支持实体智能搜索和自动补全

开发

# 安装依赖
npm install# 启动开发服务器
npm start# 构建生产版本
npm run build

使用指南

系统概述

本系统是一个基于 Home Assistant 的可视化控制面板，提供了丰富的卡片组件和直观的操作界面，帮助您更便捷地管理智能家居设备。主要功能包括设备状态监控、智能控制、自动化管理等。

1. 初始化

Home Assistant 面板初始化页面，包含管理员账号设置和 Home Assistant 连接配置
在这里插入图片描述

在初始化页面中，您需要填写以下信息：

管理员用户名：设置您的管理员账号用户名
管理员密码：设置一个安全的管理员密码
确认密码：再次输入管理员密码进行确认
HomeAssistant地址：输入您的 Home Assistant 实例地址
格式示例：http://homeassistant.local:8123
请确保地址可以正确访问到您的 Home Assistant 实例
HomeAssistant Token（可选）：
如果您的 Home Assistant 启用了长期访问令牌认证，请在此处输入
如果不输入则登录成功后会自动跳转至 Home Assistant 登录页面获得授权
填写完所有必要信息后，点击"初始化系统"按钮完成设置。系统将使用这些信息创建管理员账号并跳转至登录页面。

2. 系统首页

登录成功后会进入系统首页。

系统首页
在这里插入图片描述

在系统首页的左上角，有六个功能按钮：

**夜间模式切换：**点击可以在明亮模式和夜间模式之间切换，方便夜间使用
**国际化：**切换系统显示语言，支持多语言界面
**配置：**打开系统配置面板，可以进行系统相关设置
**编辑：**进入页面编辑模式，可以调整卡片大小、位置
**切换列数：**调整页面显示的列数，优化布局展示
**全屏：**切换全屏显示模式，获得更大的显示空间

3. 系统配置

在系统配置面板中，您可以进行系统相关设置。
在这里插入图片描述

常见问题

  1. 配置不生效

    • 确认实体 ID 是否正确
    • 刷新页面后重试

  2. 设备显示离线

    • 检查 Home Assistant 连接
    • 验证实体 ID 是否存在
    • 确认设备是否在线

  3. 图标不显示

    • 检查图标名称是否正确
    • 确认使用了支持的图标

💯 👉【我的更新汇总】

关注我的CDDN博客

更多资源可以查看我的CSDN博客

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/81964.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ctfhub技能书http协议

ctfhub技能书http协议

http://challenge-ffe8afcf1a75b867.sandbox.ctfhub.com:10800/index.php curl -v -X CTFHUB http://challenge-ffe8afcf1a75b867.sandbox.ctfhub.com:10800/index.php curl：用于发送 HTTP 请求的命令行工具。 -v（--verbose）：开启…
阅读更多...
Eigen与OpenCV矩阵操作全面对比：最大值、最小值、平均值

Eigen与OpenCV矩阵操作全面对比：最大值、最小值、平均值

功能对比总表 功能Eigen 方法OpenCV 方法主要区别最大值mat.maxCoeff(&row, &col)cv::minMaxLoc(mat, NULL, &maxVal, NULL, &maxLoc)Eigen需要分开调用，OpenCV一次获取最小值mat.minCoeff(&row, &col)cv::minMaxLoc(mat, &minVal, NU…
阅读更多...
结课作业01. 用户空间 MPU6050 体感鼠标驱动程序

结课作业01. 用户空间 MPU6050 体感鼠标驱动程序

目录 一. qt界面实现 二. 虚拟设备模拟模拟鼠标实现体感鼠标 2.1 函数声明 2.2 虚拟鼠标实现 2.2.1 虚拟鼠标创建函数 2.2.2 鼠标移动函数 2.2.3 鼠标点击函数 2.3 mpu6050相关函数实现 2.3.1 i2c设备初始化 2.3.2 mpu6050寄存器写入 2.3.3 mpu6050寄存器读取 2.3.…
阅读更多...
[Docker排查] 镜像拉取/容器启动/网络不通？Docker常见错误与解决方案

[Docker排查] 镜像拉取/容器启动/网络不通？Docker常见错误与解决方案

Docker，这个让无数开发者和运维工程师高呼“真香”的容器化技术，凭借其轻量、快速、可移植的特性，极大地简化了应用的开发、测试和部署流程。但即便是再“香”的技术，也难免有“闹脾气”的时候。你是不是也遇到过这样的“抓狂瞬间…
阅读更多...
Oracle如何解决LATCH:CACHE BUFFERS CHAINS

Oracle如何解决LATCH:CACHE BUFFERS CHAINS

CACHE BUFFERS CHAINS LATCH主要用于保护HASH CHAIN结构。一个CACHE BUFFERS CHAINS LATCH保护着多条HASH CHAIN。可以通过查看隐含参数_db_block_hash_latches的值或者查询vlatch_children视图获得系统中CACHE BUFFER CHAIN LATCH的数量。目前系统中CACHE BUFFER CHAIN LATCH的…
阅读更多...
手搓四人麻将程序

手搓四人麻将程序

一、麻将牌的表示 在麻将游戏中，总共有一百四十四张牌，这些牌被分为多个类别，每个类别又包含了不同的牌型。具体来说，麻将牌主要包括序数牌、字牌和花牌三大类。序数牌中，包含有万子、条子和筒子，每种花色…
阅读更多...
spring cloud config更新配置

spring cloud config更新配置

在开发微服务时，往往需要有开发环境、测试环境和生产环境，手动修改配置环境是一件很麻烦的事情，因此，这里使用spring cloud config管理配置环境。要使用spring cloud config，需要先在GitHub搭建一个仓库。 一、仓库搭…
阅读更多...
MySQL 5.7 实战：JSON 字段提取、Base64 解码与引号问题全解析

MySQL 5.7 实战：JSON 字段提取、Base64 解码与引号问题全解析

一、背景与问题场景 在 MySQL 数据库中，存储 JSON 格式数据（如用户行为日志、配置参数、扩展信息）的场景日益普遍。当需要从 JSON 字段中提取特定键值（如info）并进行 Base64 解码时，常遇到以下问题&#x…
阅读更多...
自研Rise系列之BI简单易用的大屏系统

自研Rise系列之BI简单易用的大屏系统

BI系统是制作可视化大屏报表的常用工具之一，因其具备实时更新、综合分析多来源数据、直观展现分析结果、支持多维自助分析等特点而广受欢迎。在BI系统上设计制作可视化大屏后，只需接入大屏硬件即可，因此BI系统的选择就成了重中之重。 在可视化…
阅读更多...
飞桨paddle import fluid报错【已解决】

飞桨paddle import fluid报错【已解决】

跟着飞桨的安装指南安装了paddle之后 pip install paddlepaddle有一个验证： import paddle.fluid as fluid fluid.install check.run check()报错情况如下，但是我在pip list中，确实看到了paddle安装上了 我import paddle别的包&#xff0c…
阅读更多...
第18天-NumPy + Pandas + Matplotlib多维度直方图

第18天-NumPy + Pandas + Matplotlib多维度直方图

示例1：带样式的柱状图 python 复制 下载 import numpy as np import pandas as pd import matplotlib.pyplot as plt# 生成数据 df = pd.DataFrame(np.random.randint(10, 100, size=(8, 4)),columns=[Spring, Summer, Autumn, Winter],index=[2015, 2016, 2017, 2018, 20…
阅读更多...
关于 Web 安全实践：4. 文件上传功能的风险分析与防护

关于 Web 安全实践：4. 文件上传功能的风险分析与防护

定义：文件上传风险点是指应用程序允许用户上传文件，但没有严格校验上传文件的类型、内容、路径等属性，导致攻击者可以上传并执行恶意代码。 绕过方式： 前端绕过 1. 前端限制的原理 前端限制上传文件类型的常见方式有三种&#…
阅读更多...
升级SpringBoot2到3导致的WebServices升级

升级SpringBoot2到3导致的WebServices升级

背景 WebServices 是基于开放标准（XML、SOAP、HTTP 等）的 Web 应用程序，它们与其他 Web 应 用程序交互以交换数据。WebServices 可以将您现有的应用程序转换为 Web 应用程序。 老代码中有一个19年前的包，由于漏洞原因，…
阅读更多...
Vue3中插槽, pinia的安装和使用(超详细教程)

Vue3中插槽, pinia的安装和使用(超详细教程)

1. 插槽 插槽是指, 将一个组件的代码片段, 引入到另一个组件。 1.1 匿名插槽 通过简单的案例来学习匿名插槽，案例说明，在父组件App.vue中导入了子组件Son1.vue，父组件引用子组件的位置添加了一个片段，比如h2标签，然…
阅读更多...
【Redis】AOF日志

【Redis】AOF日志

目录 1、背景2、工作原理3、核心配置参数4、优缺点5、AOF文件内容 1、背景 AOF（Append Only File）是redis提供的持久化机制之一，它通过记录所有修改数据库状态的写命令来实现数据库持久化。与RDB（快照）方式不同&#…
阅读更多...
【HTTP】connectionRequestTimeout与connectTimeout的本质区别

【HTTP】connectionRequestTimeout与connectTimeout的本质区别

今天发现有的伙伴调用第三方 httpclient 的配置中 connectTimeout 和 connectionRequestTimeout 配置的不到 1 S，问了一下他，知不知道这两个参数的意思，他说不知道。那我们今天就来了解一下这两个参数的区别 一、核心概念解析 1.1 connectT…
阅读更多...
react中运行 npm run dev 报错，提示vite.config.js出现错误 @esbuild/win32-x64

react中运行 npm run dev 报错，提示vite.config.js出现错误 @esbuild/win32-x64

在React项目中运行npm run dev时，如果遇到vite.config.js报错，提示esbuild/win32-x64在另一个平台中被使用，通常是由于依赖冲突或缓存问题导致的。解决方法是删除node_modules文件夹，并重新安装依赖。 如下图： 解决办…
阅读更多...
EMQX开源版安装指南：Linux/Windows全攻略

EMQX开源版安装指南：Linux/Windows全攻略

EMQX开源版安装教程-linux/windows 因最近自己需要使用MQTT，需要搭建一个MQTT服务器，所以想到了很久以前用到的EMQX。但是当时的EMQX使用的是开源版的，在官网可以直接下载。而现在再次打开官网时发现怎么也找不大开源版本了，所以…
阅读更多...
Python：操作Excel按行写入

Python：操作Excel按行写入

Python按行写入Excel数据，5种实用方法大揭秘！ 在日常的数据处理和分析工作中，我们经常需要将数据写入到Excel文件中。Python作为一门强大的编程语言，提供了多种库和方法来实现将数据按行写入Excel文件的功能。本文将详细介绍5种常见的Python按行写入Excel数据的方法，并附上…
阅读更多...
vue3中RouterView配合KeepAlive实现组件缓存

vue3中RouterView配合KeepAlive实现组件缓存

KeepAlive组件缓存 为什么需要组件缓存代码展示缓存效果为什么不用v-if 为什么需要组件缓存 业务需求&#xff1a;一般是列表页面通过路由跳转到详情页&#xff0c;跳转回来时&#xff0c;需要列表页面展示上次展示的内容 代码展示 App.vue入口 <script setup lang"…
阅读更多...
最新文章

Copyright @ 2022~2023