本帖最后由 DDDear 于 2025-12-11 23:40 编辑
动态天气卡
✨ 特性- 🎨 精美设计：精致的布局和排版，优雅的视觉体验。
- 🎬 动态背景动画：基于 HTML5 Canvas 的高性能动态天气背景（晴天光晕、夜间弯月星空、雨滴、雪花、云层飘动、浮尘等）。
- 🌡️ 细粒度天气支持：支持区分小/中/大/暴雨、小/中/大/暴雪、轻/中/重度雾霾等多种天气状态。
- 🛠️ 可视化编辑器：支持 Home Assistant UI 可视化编辑配置。
- 🖼️ 自定义图标：使用 SVG 文件图标，易于替换和定制。
📸 效果展示
📦 安装HACS 安装（推荐）手动安装- 下载本项目的所有文件。
- 将 dynamic-weather-card 文件夹上传到你的 Home Assistant 配置目录下的 www 文件夹中（即 /config/www/dynamic-weather-card）。
- 在 Home Assistant 中添加资源引用：
- 进入 配置 -> 仪表盘 -> 资源。
- 点击 添加资源。
- URL 输入：/local/dynamic-weather-card/dynamic-weather-card.js
- 资源类型选择：JavaScript Module。
- 刷新浏览器。
⚙️ 配置你可以在仪表盘编辑模式下，点击"添加卡片"，搜索 动态天气卡片 进行可视化配置。 YAML 配置示例
type: custom:dynamic-weather-card
entity: weather.home # 必填，天气实体
show_current: true # 可选，是否显示当前天气，默认 true
show_forecast: true # 可选，是否显示预报，默认 true
forecast_rows: 5 # 可选，预报显示行数，默认 5
forecast_type: daily # 可选，预报类型 'daily' (按天) 或 'hourly' (按小时)，默认 'daily'
secondary_info_attribute: forecast_hourly
📂 文件结构- dynamic-weather-card.js: 核心逻辑代码。
- dynamic-weather-style.js: 样式文件。
- dynamic-weather-const.js: 常量定义、天气映射配置。
- dynamic-weather-editor.js: 可视化编辑器代码。
- dynamic-weather-icons.js: 图标映射文件。
- weatherIcons.js: 内置 SVG 天气图标数据。
📝 注意事项- 推荐使用彩云天气等支持丰富天气状态的集成，以获得最佳视觉体验。
HA天气屏APP
- 上墙平板用的Fully Kiosk Browser, 可以设置屏幕保护app，之前一直用的FikTik 翻页时钟app，效果不错。
发现小米音箱的屏保程序也不错，所以参考了翻页时钟和小米音箱的屏保做了一个集成HA天气的app
✨ 主要特色🎨 多模态显示- 📅 日历模式：优雅地展示农历、日期、时间及天气概览
- ⏰ 翻页时钟：全屏复古翻页时钟，支持秒数显示，极具观赏性
🌦️ 沉浸式天气体验- 动态背景：根据实时天气自动切换背景效果（晴天、雨、雪、雾霾等）
- 智能配色：支持"动态跟随颜色"，UI 主色调随天气背景自动调整
- 节日特效：内置春节、圣诞等多种节日氛围特效 🎉
🔌 灵活的数据接入- 🏠 Home Assistant API：直接连接 HA 获取实时数据
- 📡 MQTT 服务：适用于无法直接连接 HA 的场景，支持数据推送
🎛️ 个性化定制- 🌗 深色/浅色模式：自动或手动切换主题
- 🔧 远程配置：支持通过网页端远程管理设备配置（扫码即可配置）
- 📱 响应式设计：完美适配 iPad、安卓平板及各种嵌入式屏幕
📸 效果展示
下载 Android APP最新的 Android 客户端构建产物可直接在 GitHub Actions 中下载： 🏠 Home Assistant 集成
方式一：API 直连
在设置中配置 HA 地址和长效访问令牌即可。
获取长效访问令牌：
- 登录 Home Assistant
- 点击左下角用户头像
- 滚动到底部"长效访问令牌"
- 点击"创建令牌"
- 复制生成的令牌到应用配置中
- HA配置文件增加
http:
cors_allowed_origins:
- "capacitor://localhost"
- "http://localhost"
方式二：MQTT 数据推送
项目提供了 Home Assistant Blueprint，可一键配置 MQTT 数据推送：
- 在 HA 中导入 `blueprints/ha_weather_screen_mqtt.yaml`
- 创建自动化，选择此 Blueprint
- 配置 MQTT 主题和实体
- 在应用中配置相同的 MQTT 连接信息
项目的灵感来自我在使用 Home Assistant 过程中的真实需求，希望能够让智能家居的信息展示更加美观、直观与实用。
项目的全部代码和功能均由AI辅助生成，并主要面向我的个人使用场景进行适配与优化。 我并非专业开发者，因此无法保证项目在所有环境下都能稳定运行，也无法确保对每个问题都能提供及时支持。
欢迎大家提出使用问题或建议，但请理解我可能无法解决所有问题。
| 
发表于 2025-12-9 16:02:10
