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

标题: 分享一下自己用的平板UI [打印本页]
作者: bugprogrammer    时间: 2024-9-8 02:54
标题: 分享一下自己用的平板UI
本帖最后由 bugprogrammer 于 2024-10-16 00:27 编辑

2024.10.16更新，重构部分弹出卡片

B站视频链接

[attach]63308[/attach]
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

前言：UI设计借鉴了论坛小伙伴消逝的作品，彩平图是jenny QQ群中群友摸鱼小能手代做，在此感谢。UI做完将近两个月了，之前在B站发了视频，今天才有空在论坛发帖。
B站视频链接



一 所需集成(与UI有关)
1 版本(HA里直接添加)
2 和风天气
   https://github.com/dscao/qweather
3 browser mod hacs安装
4 chineseholiday
   https://github.com/Crazysiri/chineseholiday
5 Home Assistant Supervisor   HA直接添加
6 IPMI connector
   https://github.com/ateodorescu/home-assistant-ipmi
7 System Monitor   HA直接添加
8 Proxmox VE
   https://github.com/dougiteixeira/proxmoxve
9 kiosk mode  hacs安装
10 owntone  HA直接添加

二 所需UI卡片(按照模块分类，重复的不写)
1 主页
  picture-elements
  button-card
  hui-element
  bar-card
  mini-graph-card
2 设备耗材模块
   Battery State Card
3 安防 功耗 系统 三个模块
   mushroom
4 搜索模块
   search card
5 自动化模块
   auto-entities card
6 音乐模块
   iframe
   mini-media-player
7 服务器监控模块
  Flexible Horseshoe Card for Lovelace
8 其他
  Decluttering Card

三 着重讲一下需要docker或其他方案对接的服务(其他简单的见附件)
1 日历 (记得替换端口)
  1. x86: docker run -d -p XXXX:80 --name calendar-remark --restart="unless-stopped" bugprogrammer/calendar-remark:latest
  2. arm64v8: docker run -d -p XXXX:80 --name calendar-remark --restart="unless-stopped" bugprogrammer/calendar-remark:latest_arm64v8
复制代码
2 本地诗词RESTFul (记得替换端口)
   自建诗词服务的意义：1 实现自己控制诗词内容，格式，如：七言诗，五言诗等。避免诗句过长而引起UI编写的麻烦。2 没有调用次数限制   
   首先准备诗词.txt文件，以便docker映射。格式：题目-朝代-作者-正文1-正文2  
  1. x86: docker run -d -p xxxx:5000 -v /mnt/诗词.txt:/app/shici.txt --name jinrishici --restart="unless-stopped" bugprogrammer/shici:latest
  2. arm64v8: docker run -d -p xxxx:5000 -v /mnt/诗词.txt:/app/shici.txt --name jinrishici --restart="unless-stopped" bugprogrammer/shici:latest_arm64v8
复制代码
3 音乐服务owntone(播放nas中的音乐，从AirPlay(2)音箱输出)
  1. ---
  2. services:
  3.   daapd:
  4.     image: lscr.io/linuxserver/daapd:latest
  5.     container_name: daapd
  6.     network_mode: host
  7.     environment:
  8.       - PUID=1000
  9.       - PGID=1000
  10.       - TZ=Asia/Shanghai
  11.     volumes:
  12.       - /path/to/daapd/data:/config
  13.       - /path/to/music:/music
  14.     restart: unless-stopped
复制代码

4 摄像头接入
   1 onvif接入(目的是调用service做遮蔽等自动化，延迟较高，不引入UI)
   2 搭建zoneminder接入HA(延迟极低，可以存NAS，引入UI)
     搭建方法 https://wiki.zoneminder.com/Debi ... h_Zoneminder_1.37.x
5 服务器监控(两台PVE机器)
  用proxmox ve以及ipmi的集成获取到绝大部分数据，其他的用自建RESTFul的方式完成(弃用mqtt方案的原因：pve默认的邮件提醒策略我没研究，mqtt每次失败，比如我的ha关机维护，mqtt发不过去，就会给我发邮件，不胜其扰。而且，ha自带的刷新实体服务可以随时刷新RESTFul传感器数据)
  RESTFul方案举例讲解，以zfs阵列状态监控为例。注意，系统为基于Debian的Linux发行版，下文提到的三个文件，py文件以及service文件直接抄，sh文件改成自己的，按照需求改。
  因为我们要获取pve主机数据，故不用docker，采用直接搭建的方案，也顺便介绍给大家一个极简的RESTFul制作方案。
  1 安装python3基础环境
  1. apt install python3 python3-venv python3-pip
复制代码
2 新建用户，新建并进入python虚拟环境
  1. adduser wbx
  2. su - wbx
  3. mkdir -p flaskapp
  4. cd flaskapp
  5. python3 -m venv virtualenv
  6. source virtualenv/bin/activate
复制代码
3 安装Flask以及gunicorn
  1. pip3 install flask gunicorn
复制代码
4 在当前目录新建mymonitor作为项目文件夹
  1. mkdir mymonitor
  2. cd mymonitor
复制代码
5 在当前目录新建app.py以及mymonitor.sh两个文件
app.py(这个文件不要改，直接用)
  1. import subprocess
  2. from subprocess import Popen, PIPE
  3. from subprocess import check_output
  4. from flask import Flask

  6. def get_shell_script_output_using_communicate():
  7.     session = Popen(['./mymonitor.sh'], stdout=PIPE, stderr=PIPE)
  8.     stdout, stderr = session.communicate()
  9.     if stderr:
  10.         raise Exception("Error "+str(stderr))
  11.     return stdout.decode('utf-8')

  13. def get_shell_script_output_using_check_output():
  14.     stdout = check_output(['./mymonitor.sh']).decode('utf-8')
  15.     return stdout

  17. app = Flask(__name__)

  19. @app.route('/',methods=['GET',])
  20. def home():
  21.     return get_shell_script_output_using_check_output()

  23. app.run(host="0.0.0.0")
复制代码
mymonitor.sh (这个文件按照自己的监控需求修改，例如，监控Linux内核版本，即为uname -r)
  1. #!/bin/bash

  3. zfs_free=$(zpool list MyPool | grep MyPool | awk -F' ' '{print $4}' | sed 's/T//g')
  4. zfs_used=$(zpool list MyPool | grep MyPool | awk -F' ' '{print $8}' | sed 's/%//g')

  6. if [ $(zpool status MyPool | grep state | awk -F' ' '{print $NF}') == "ONLINE" ]
  7. then
  8.    zfs_status="在线"
  9. else
  10.    zfs_status="异常"
  11. fi

  13. echo "{"阵列剩余容量": "剩余: $zfs_free", "阵列已用百分比": "$zfs_used", "阵列状态": "状态: $zfs_status"}"
复制代码
6 在/etc/systemd/system/路径下新建mymonitor.service文件(不要改，直接抄)
mymonitor.service
  1. [Unit]
  2. Description=mymonitor
  3. After=network.target

  5. [Service]
  6. User=wbx
  7. WorkingDirectory=/home/wbx/flaskapp/mymonitor
  8. ExecStart=/home/wbx/flaskapp/virtualenv/bin/gunicorn -b localhost:5555 app:app
  9. Restart=always

  11. [Install]
  12. WantedBy=multi-user.target
复制代码
7 收尾
  1. systemctl start mymonitor.service(启动)
  2. systemctl enable mymonitor.service(开机自启动)
复制代码
至此，RestFul数据获取已经完成，写个sensor即可接入

四 讲一下Decluttering Card卡片的用法
简单的说，这个卡片就是为了减少代码冗余，把需要改的以参数形式代替，使用时将参数换成具体值
例如:
新建模版：
  1.   decluttering_templates:
  2.   mini_graph_card_template:
  3.     card:
  4.       type: custom:mini-graph-card
  5.       name: '[[name1]]' (参数)
  6.       icon: '[[icon]]'
  7.       tap_action:
  8.         action: none
  9.       entities:
  10.         - entity: '[[entity1]]'
  11.           name: '[[name2]]'
  12.           show_state: true
  13.           color_thresholds:
  14.             - color: '#4dd2ff'
  15.               value: 17
  16.             - color: '#01a4db'
  17.               value: 20
  18.             - color: '#fccd68'
  19.               value: 26
  20.             - color: '#ff1a1a'
  21.               value: 30
  22.         - entity: '[[entity2]]'
  23.           name: '[[name3]]'
  24.           show_state: true
  25.           color_thresholds:
  26.             - color: '#4dd2ff'
  27.               value: 35
  28.             - color: '#01a4db'
  29.               value: 50
  30.             - color: '#fccd68'
  31.               value: 70
  32.             - color: '#ff1a1a'
  33.               value: 80
  34.       update_interval: 600
  35.       show:
  36.         icon: true
  37.         legend: true
  38.         name: true
复制代码
使用：
  1.    - type: custom:decluttering-card
  2.      template: mini_graph_card_template
  3.      variables:
  4.         - name1: 机房  (替换具体值)
  5.         - name2: 机房温度
  6.         - name3: 机房湿度
  7.         - entity1: sensor.0x00158d000ad9ab76_temperature
  8.         - entity2: sensor.0x00158d000ad9ab76_humidity
  9.         - icon: mdi:home-thermometer-outline
  10.       style:
  11.         left: 15%
  12.         top: 82%
复制代码
五 附录(见附件)

2024.9.8更新
1 重新上传附件(之前有段重复代码)
2 新增百度网盘完整版附件
   链接: https://pan.baidu.com/s/1fiRjYwAlz59k2d0LQMujpA   提取码: bxcv



作者: taioner    时间: 2024-9-8 03:15
大佬牛逼，不会做彩平图，能不能帮忙做一个
作者: bugprogrammer    时间: 2024-9-8 03:20
taioner 发表于 2024-9-8 03:15
大佬牛逼，不会做彩平图，能不能帮忙做一个

我这UI彩平图不是我做的哈哈。我是借鉴的消逝的设计，自己写的。这玩意自己写方便维护，而且每个人需求不同。最新效果就是b站那个8.0适配版本。天气换成ha系统监控那个。我发的代码有完整注释，很容易看懂。帖子主要是讲restful还有一些docker服务接入ha。restful或者mqtt很容易接入自定义内容。比如我的服务器监控。
作者: taioner    时间: 2024-9-8 09:04
bugprogrammer 发表于 2024-9-8 03:20
我这UI彩平图不是我做的哈哈。我是借鉴的消逝的设计，自己写的。这玩意自己写方便维护，而且每个人需求不 ...

大佬，上面时间里的秒是怎么实现的
作者: louwu    时间: 2024-9-8 09:55
果断收藏学习，折腾很久了，感谢分享
作者: Zerolone    时间: 2024-9-8 11:47
强！先收藏了，等学到再来折腾。
作者: bugprogrammer    时间: 2024-9-8 13:41
本帖最后由 bugprogrammer 于 2024-9-8 13:45 编辑
taioner 发表于 2024-9-8 09:04
大佬，上面时间里的秒是怎么实现的

很简单，两个文件(用的时候注意下缩进，论坛编辑器我用不好，本来也想写保姆级教程的哈哈哈，markdown写习惯了。文件在我发的附件里)
time_date.yaml
  1. - trigger:
  2.     - platform: time_pattern
  3.       seconds: "/1"
  4.    sensor:
  5.       - name: Time
  6.         state: "{{ now().strftime('%H:%M:%S') }}"
  7.         icon: "mdi:calendar-clock"
  8.      - name: Date
  9.        state: "{{ now().strftime('%Y-%m-%d') }}"
  10.        icon: "mdi:calendar-clock"
复制代码
configuration.yaml
  1. template: !include time_date.yaml
复制代码





作者: taioner    时间: 2024-9-8 17:01
bugprogrammer 发表于 2024-9-8 13:41
很简单，两个文件(用的时候注意下缩进，论坛编辑器我用不好，本来也想写保姆级教程的哈哈哈，markdown写习 ...

感谢大佬，晚点回去试试
作者: 1048346494    时间: 2024-9-9 08:04
在小红书也刷到过你的帖子
作者: bugprogrammer    时间: 2024-9-9 17:20
1048346494 发表于 2024-9-9 08:04
在小红书也刷到过你的帖子

哈哈，好多人要教程，我先写了一个着重讲解相对高难度部分的。以后发完整版。
作者: MX10085    时间: 2024-9-9 23:23
很漂亮的UI
作者: hxwang    时间: 2024-9-16 09:46
漂亮。想要。但是太懒了。要搞出这样怕是要不少时间。
作者: wkbhll    时间: 2024-10-10 08:27
请教下楼主，mnt/诗词.txt到底是建在docker主机的主目录下（或docker主机的docker目录之下 ），还是HA主机主目录下？docker建立后一直提示找不到该文件。
作者: eric    时间: 2024-10-16 08:39
感谢分享！！给你加分！
作者: usrusr22    时间: 2024-10-16 09:18
大佬牛逼，
作者: yalchina    时间: 2024-11-20 17:31
向大佬学习
作者: ayuan2167    时间: 2024-12-9 11:55
正在学习安装中 遇到了各种问题
作者: yx262514    时间: 2024-12-13 23:33
古诗词的没有懂，不是docker安装的怎么弄古诗词
作者: max_sh    时间: 2025-1-17 11:40
牛逼，果断收藏
作者: kingLightning    时间: 2025-1-18 10:48
怎么收藏呢
作者: gao19970120    时间: 2025-5-11 22:51
楼主优秀！！



欢迎光临 『瀚思彼岸』» 智能家居技术论坛 (https://bbs.hassbian.com/) Powered by Discuz! X3.5