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

 找回密码
 立即注册
查看: 4286|回复: 17

[UI界面] 分享一下自己用的平板UI

[复制链接]

2

主题

20

帖子

443

积分

中级会员

Rank: 3Rank: 3

积分
443
金钱
423
HASS币
0
发表于 2024-9-8 02:54:20 | 显示全部楼层 |阅读模式
本帖最后由 bugprogrammer 于 2024-10-16 00:27 编辑

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

B站视频链接

hassbian.zip (27.66 KB, 下载次数: 62)
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

前言: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 日历 (记得替换端口)
x86: docker run -d -p XXXX:80 --name calendar-remark --restart="unless-stopped" bugprogrammer/calendar-remark:latest
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  
x86: docker run -d -p xxxx:5000 -v /mnt/诗词.txt:/app/shici.txt --name jinrishici --restart="unless-stopped" bugprogrammer/shici:latest
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)音箱输出)
---
services:
  daapd:
    image: lscr.io/linuxserver/daapd:latest
    container_name: daapd
    network_mode: host
    environment:
      - PUID=1000
      - PGID=1000
      - TZ=Asia/Shanghai
    volumes:
      - /path/to/daapd/data:/config
      - /path/to/music:/music
    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基础环境
apt install python3 python3-venv python3-pip
2 新建用户,新建并进入python虚拟环境
adduser wbx
su - wbx
mkdir -p flaskapp
cd flaskapp
python3 -m venv virtualenv
source virtualenv/bin/activate
3 安装Flask以及gunicorn
pip3 install flask gunicorn
4 在当前目录新建mymonitor作为项目文件夹
mkdir mymonitor
cd mymonitor
5 在当前目录新建app.py以及mymonitor.sh两个文件
app.py(这个文件不要改,直接用)
import subprocess
from subprocess import Popen, PIPE
from subprocess import check_output
from flask import Flask

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

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

app = Flask(__name__)

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

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

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

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

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

[Service]
User=wbx
WorkingDirectory=/home/wbx/flaskapp/mymonitor
ExecStart=/home/wbx/flaskapp/virtualenv/bin/gunicorn -b localhost:5555 app:app
Restart=always

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

四 讲一下Decluttering Card卡片的用法
简单的说,这个卡片就是为了减少代码冗余,把需要改的以参数形式代替,使用时将参数换成具体值
例如:
新建模版:
  decluttering_templates:
  mini_graph_card_template:
    card:
      type: custom:mini-graph-card
      name: '[[name1]]' (参数)
      icon: '[[icon]]'
      tap_action:
        action: none
      entities:
        - entity: '[[entity1]]'
          name: '[[name2]]'
          show_state: true
          color_thresholds:
            - color: '#4dd2ff'
              value: 17
            - color: '#01a4db'
              value: 20
            - color: '#fccd68'
              value: 26
            - color: '#ff1a1a'
              value: 30
        - entity: '[[entity2]]'
          name: '[[name3]]'
          show_state: true
          color_thresholds:
            - color: '#4dd2ff'
              value: 35
            - color: '#01a4db'
              value: 50
            - color: '#fccd68'
              value: 70
            - color: '#ff1a1a'
              value: 80
      update_interval: 600
      show:
        icon: true
        legend: true
        name: true
使用:
   - type: custom:decluttering-card
     template: mini_graph_card_template
     variables:
        - name1: 机房  (替换具体值)
        - name2: 机房温度
        - name3: 机房湿度
        - entity1: sensor.0x00158d000ad9ab76_temperature
        - entity2: sensor.0x00158d000ad9ab76_humidity
        - icon: mdi:home-thermometer-outline
      style:
        left: 15%
        top: 82%
五 附录(见附件)

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



诗词.zip

2.53 KB, 下载次数: 18

hassbian_2024.10.16.zip

33.84 KB, 下载次数: 12

评分

参与人数 1金钱 +16 收起 理由
eric + 16 论坛有你更精彩!

查看全部评分

回复

使用道具 举报

0

主题

137

帖子

1203

积分

金牌会员

Rank: 6Rank: 6

积分
1203
金钱
1066
HASS币
0
发表于 2024-9-8 03:15:46 | 显示全部楼层
大佬牛逼,不会做彩平图,能不能帮忙做一个
回复

使用道具 举报

2

主题

20

帖子

443

积分

中级会员

Rank: 3Rank: 3

积分
443
金钱
423
HASS币
0
 楼主| 发表于 2024-9-8 03:20:45 | 显示全部楼层
taioner 发表于 2024-9-8 03:15
大佬牛逼,不会做彩平图,能不能帮忙做一个

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

使用道具 举报

0

主题

137

帖子

1203

积分

金牌会员

Rank: 6Rank: 6

积分
1203
金钱
1066
HASS币
0
发表于 2024-9-8 09:04:20 | 显示全部楼层
bugprogrammer 发表于 2024-9-8 03:20
我这UI彩平图不是我做的哈哈。我是借鉴的消逝的设计,自己写的。这玩意自己写方便维护,而且每个人需求不 ...

大佬,上面时间里的秒是怎么实现的
回复

使用道具 举报

4

主题

101

帖子

482

积分

中级会员

Rank: 3Rank: 3

积分
482
金钱
381
HASS币
0
发表于 2024-9-8 09:55:28 | 显示全部楼层
果断收藏学习,折腾很久了,感谢分享
回复

使用道具 举报

1

主题

29

帖子

267

积分

中级会员

Rank: 3Rank: 3

积分
267
金钱
238
HASS币
0
发表于 2024-9-8 11:47:04 | 显示全部楼层
强!先收藏了,等学到再来折腾。
回复

使用道具 举报

2

主题

20

帖子

443

积分

中级会员

Rank: 3Rank: 3

积分
443
金钱
423
HASS币
0
 楼主| 发表于 2024-9-8 13:41:02 | 显示全部楼层
本帖最后由 bugprogrammer 于 2024-9-8 13:45 编辑
taioner 发表于 2024-9-8 09:04
大佬,上面时间里的秒是怎么实现的

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





回复

使用道具 举报

0

主题

137

帖子

1203

积分

金牌会员

Rank: 6Rank: 6

积分
1203
金钱
1066
HASS币
0
发表于 2024-9-8 17:01:08 | 显示全部楼层
bugprogrammer 发表于 2024-9-8 13:41
很简单,两个文件(用的时候注意下缩进,论坛编辑器我用不好,本来也想写保姆级教程的哈哈哈,markdown写习 ...

感谢大佬,晚点回去试试
回复

使用道具 举报

0

主题

43

帖子

820

积分

高级会员

Rank: 4

积分
820
金钱
777
HASS币
0
发表于 2024-9-9 08:04:45 | 显示全部楼层
在小红书也刷到过你的帖子
回复

使用道具 举报

2

主题

20

帖子

443

积分

中级会员

Rank: 3Rank: 3

积分
443
金钱
423
HASS币
0
 楼主| 发表于 2024-9-9 17:20:27 | 显示全部楼层
1048346494 发表于 2024-9-9 08:04
在小红书也刷到过你的帖子

哈哈,好多人要教程,我先写了一个着重讲解相对高难度部分的。以后发完整版。
回复

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-12-26 19:04 , Processed in 0.345539 second(s), 35 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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