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

 找回密码
 立即注册
查看: 7380|回复: 61

[插件集成] 骚年,这么有趣的窗帘卡片不来一发吗?

  [复制链接]

20

主题

550

帖子

3600

积分

元老级技术达人

积分
3600
金钱
3010
HASS币
210

教程狂人突出贡献

发表于 2022-7-1 19:50:48 | 显示全部楼层 |阅读模式
本帖最后由 involute 于 2022-7-11 13:15 编辑

HA中控制窗帘的卡片,要么就是极其简陋,要么就是老外做的只有垂直帘。

我撸了个水平帘的,喜欢的拿走

这不是一个只能拉着玩的沙雕flash动画....., 而是控制你的窗帘电机的。

Curtain Card

hacs_badge Stable

English | 简体中文

Home Assistant Lovelace UI中使用的窗帘卡片, 控制你cover实体的电机。

适用于水平开启的窗帘,可以自定义窗帘打开方向,自定义窗外的景色图片。使用手/或者鼠标拖拽窗帘即可打开或者关闭窗帘,也可以拖拽到指定位置实现打开或者关闭指定的百分比。

安装

最简单的办法是在HACS中作为自定义仓库安装。

如果你不使用HACS,也可以按照以下方法进行手动安装。

dist/curtain-card.js下载并复制到你的HomeAssistant的/config/www/目录中。

将如下配置加入"resources"配置项中,将路径改为你文件所在的具体位置。

  - url: /local/curtain-card.js
    type: module

卡片配置项

配置项 类型 必填 默认值 描述
entity String Yes none entity_id
type String Yes none custom:curtain-card
title String No none 卡片上显示的标题, 不设则不显示
curtainColor String No none 窗帘颜色, 以4通道RGB表示
direction String No 'left' 窗帘拉开方向
sceneImage String No none 窗外场景的图片URL
showStatus Boolean No true 是否在底部显示开闭百分比和打开关闭状态信息
invertPercentage Boolean No false 百分比翻转
size Number No 260 窗帘的显示尺寸

curtainColor 配置项

curtainColor用4通道RGB颜色表示,分别是红绿蓝及Alpha通道,Alpha应设置一定透明度以便显示窗帘的纹理,具体调整,可以根据家里窗帘颜色自己尝试。

sceneImage 配置项

sceneImage图片最好是一个800x680比例的图片,推荐使用400x340分辨率的,可以是PNG/JPEG等,甚至是GIF动图。

size 配置项

取值范围是100到800, 可以根据你的UI风格设置一个合适的值

示例

示例1

向左拉开的窗帘

type: custom:curtain-card
entity: cover.XXXXXXXX_motor
title: 卧室窗帘
curtainColor: rgb(200,60,80,0.3)
direction: right

curtain-1.gif

示例2

自定义窗外景色图片的向右拉开的窗帘

type: custom:curtain-card
entity: cover.xxxxxxxx_motor
title: 客厅窗帘
curtainColor: rgb(26,160,220,0.5)
direction: left
sceneImage: /local/images/2.gif

curtain-2.gif

示例3

设置size值以便卡片可以水平堆叠显示

type: horizontal-stack
cards:
  - type: custom:curtain-card
    entity: cover.xxxxxxxx_motor
    curtainColor: rgb(26,160,220,0.5)
    direction: left
    size: 150
    showStatus: false
  - type: custom:curtain-card
    entity: cover.xxxxxxxx_motor
    curtainColor: rgb(200,60,80,0.3)
    direction: right
    size: 150
    showStatus: false

h-stack.png

GITHUB

https://github.com/georgezhao2010/lovelace-curtain-card

喜欢的点颗星去

文件下载


游客,如果您要查看本帖隐藏内容请回复









评分

参与人数 10金钱 +90 HASS币 +20 收起 理由
mrliu01 + 5 高手,这是高手!
mysteryfuko + 1 找到个修复了手机的 https://github.com/wh.
jjcs + 10 高手,这是高手!
咸味土豆 + 12 感谢楼主分享!
DDDear + 5 高手,这是高手!
eric + 16 高手,这是高手!
sorrypqa + 5 专门注册账号来顶你!
+ 20 + 20 高手,这是高手!
dscao + 6 感谢楼主分享!
gmshiwoge + 10 厉害了word楼主!

查看全部评分

回复

使用道具 举报

8

主题

657

帖子

4187

积分

论坛元老

Rank: 8Rank: 8

积分
4187
金钱
3525
HASS币
0
QQ
发表于 2022-7-1 21:00:45 | 显示全部楼层
够骚气,我喜欢
回复

使用道具 举报

10

主题

661

帖子

5312

积分

论坛元老

Rank: 8Rank: 8

积分
5312
金钱
4646
HASS币
50
发表于 2022-7-1 22:00:25 | 显示全部楼层
骚,收藏了
回复

使用道具 举报

13

主题

181

帖子

2437

积分

金牌会员

Rank: 6Rank: 6

积分
2437
金钱
2256
HASS币
0
发表于 2022-7-1 22:00:41 | 显示全部楼层
大神能否分享下你这个卡片代码啊
231213qfyy020wf37ez2x9.png
回复

使用道具 举报

20

主题

550

帖子

3600

积分

元老级技术达人

积分
3600
金钱
3010
HASS币
210

教程狂人突出贡献

 楼主| 发表于 2022-7-2 02:00:47 | 显示全部楼层
fz雪之汐若 发表于 2022-7-1 22:00
大神能否分享下你这个卡片代码啊

这不就普通的几个垂直堆叠水平堆叠组合一下吗?
回复

使用道具 举报

74

主题

1942

帖子

7885

积分

元老级技术达人

积分
7885
金钱
5893
HASS币
430

活跃会员教程狂人

发表于 2022-7-2 07:08:31 | 显示全部楼层
顶顶,已star,竟然真的是窗帘卡片,两年前求过,卡片如愿了,就是窗帘电机一直在吃灰没有真的用上,哈哈哈哈
所有过往,皆为序章。
回复

使用道具 举报

13

主题

181

帖子

2437

积分

金牌会员

Rank: 6Rank: 6

积分
2437
金钱
2256
HASS币
0
发表于 2022-7-2 08:20:03 | 显示全部楼层
involute 发表于 2022-7-2 02:00
这不就普通的几个垂直堆叠水平堆叠组合一下吗?

我纯小白  真的不会啊  能借鉴下吗?
回复

使用道具 举报

55

主题

620

帖子

3800

积分

论坛元老

Rank: 8Rank: 8

积分
3800
金钱
3175
HASS币
20
发表于 2022-7-2 09:00:15 | 显示全部楼层
大哥可以弄个窗帘是 中间打开的
回复

使用道具 举报

39

主题

477

帖子

2689

积分

金牌会员

Rank: 6Rank: 6

积分
2689
金钱
2212
HASS币
10
发表于 2022-7-2 09:14:13 | 显示全部楼层
确实够骚。
回复

使用道具 举报

41

主题

1286

帖子

5299

积分

论坛元老

Rank: 8Rank: 8

积分
5299
金钱
4008
HASS币
20
发表于 2022-7-2 09:27:19 | 显示全部楼层
咸味土豆 发表于 2022-7-2 07:08
顶顶,已star,竟然真的是窗帘卡片,两年前求过,卡片如愿了,就是窗帘电机一直在吃灰没有真的用上,哈哈哈 ...

土豆你的qun呢
折腾精神永存,感恩感谢论坛每一位愿意分享和帮助过我的大佬,论坛有你更精彩
回复

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-4-25 19:13 , Processed in 0.073444 second(s), 37 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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