请选择 进入手机版 | 继续访问电脑版

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

 找回密码
 立即注册
查看: 598|回复: 21

[新奇玩法] 【lovelace】触摸操作的lovelace面板:lovelace-card-touchpad

[复制链接]

32

主题

188

帖子

1518

积分

论坛技术达人

积分
1518
金钱
1310
HASS币
20

教程狂人论坛风云人物

发表于 2019-10-7 14:01:46 | 显示全部楼层 |阅读模式
本帖最后由 倾微qiwe 于 2019-10-9 16:39 编辑

lovelace-card-touchpad for homeassistant lovelace UI

用于homeassistant的lovelace的一个触摸板卡片

去年我发布过一个more-info-qinver-tv的自定义详情页,初衷就是为了解决homeassistant不方便触摸操作的问题,因为像很多类似于电视遥控器的控制,如果只能点击按钮,那么在移动设备上的体验是很糟糕的!
现在过去一年多了,几乎我也有一年多没有玩homeassistant了,最近无聊升级了最新的0.99,显而易见,之前的more-info-qinver-tv自定义详情页不能再使用了。
现在homeassistant的前端基本都使用了lovelace UI,确实很方便,自定义空间更大了
这一次,我重新设计了这样的一个功能,整体想法是制作一个触摸面板,在这个面板上,你可以点击、双击,滑动以控制HA的各种设备,用来当作遥控器最合适不过了,当然也不仅仅是遥控器了,或许你能有更好的用处!

GitHub仓库   
今后的更新内容请查看GitHub仓库:lovelace-card-touchpad

本文同步到我的个人博客,欢迎查看  倾微博客-分享科技的乐趣

更新记录
2019年10月7日 首次发布

功能介绍和截图

正如下面截图一样,就是一个面板,你可以在这个面板上面点击、滑动来控制HA的设备,大致的功能和特色如下:
1. 支持的操作:单击、双击、上下左右滑动和上下左右长滑动
2. 每一个操作动作均有动画反馈
3. 触摸板的上方和下方均可以增加额外的按钮
4. 触摸面板可选择是否折叠
5. 配置文件十分简单,几乎所有的配置代码都可以选择性删除


安装以开始使用:
2. 在homeassistant配置文件ui-lovelace.yaml中的对应位置加入以下代码,以加载lovelace-card-touchpad
resources:
  - url: /local/lovelace-card-touchpad.html
    type: html

  3. ui-lovelace.yaml加入对应的以下配置文件代码即可。 完整的配置文件示例代码如下,你需要把相应的ID换成你的就可以了
    cards:
      - type: custom:lovelace-card-touchpad
        ####  以下内容均为可选,不需要的删了那一行就行
        name: 客厅电视遥控器
        icon: mdi:television
        fold: true    #折叠触摸板
        debug: true   #显示调试信息
        touchpad:               #以下是触摸板功能的ID
          tap: script.tap               #单击
          up: script.up                 #上滑
          down: script.down             #下滑
          left: script.left             #左滑
          right: script.right           #右滑
          double_tap: script.double_tap       #双击
          Long_up: script.Long_up             #长上滑
          Long_down: script.Long_down          #长下滑
          Long_left: script.Long_left          #长左滑
          Long_right: script.Long_right        #长右滑
        top_buttons:    ##触摸板 上面的 按钮
          - switch.xxxxxx_1
          - switch.xxxxxx_2
          - switch.xxxxxx_3
        bottom_buttons:    ##触摸板 下面的 按钮
          - switch.xxxxxx_4
          - switch.xxxxxx_5
          - switch.xxxxxx_6

配置文件注意事项:
  • 你可能觉得以上配置文件有点复杂,其实并不是,上面的配置文件的每一行都是可以删除的,比如说你只需要一个触摸板,不需要额外的按钮,那就把按钮部分的代码删了就是了,甚至什么名称、图标的什么的都可以删除,包括触摸板功能,也可以删除的!
  • 配置文件touchpad的触摸功能建议使用script的服务的ID,因为这种不需要状态反馈。top_buttons和bottom_buttons可以随意,但不支持传感器
  • 出现问题,或者更新,请务必先清空浏览器缓存







评分

参与人数 5金钱 +80 HASS币 +20 收起 理由
咸味土豆 + 20 厉害了word楼主!
Lee + 10 大神出品,必属精品!倾微大佬威武!.
xieahui + 20 666 回归
killadm + 10 大神666!
+ 20 + 20 大神666!

查看全部评分

回复

使用道具 举报

3

主题

56

帖子

144

积分

注册会员

Rank: 2

积分
144
金钱
88
HASS币
0
发表于 2019-10-7 14:15:33 | 显示全部楼层
抢个沙发
回复

使用道具 举报

8

主题

256

帖子

912

积分

论坛技术达人

积分
912
金钱
651
HASS币
40
发表于 2019-10-7 14:44:40 | 显示全部楼层
抢二排,留个记号,有空再玩,谢谢
回复

使用道具 举报

6

主题

480

帖子

2391

积分

金牌会员

Rank: 6Rank: 6

积分
2391
金钱
1911
HASS币
30
发表于 2019-10-7 15:38:23 | 显示全部楼层
牛逼大了!
回复

使用道具 举报

1

主题

249

帖子

802

积分

论坛积极会员

积分
802
金钱
553
HASS币
0
发表于 2019-10-7 15:46:29 | 显示全部楼层
玩得好溜
回复

使用道具 举报

0

主题

20

帖子

108

积分

注册会员

Rank: 2

积分
108
金钱
88
HASS币
0
发表于 2019-10-7 16:26:43 | 显示全部楼层
厉害厉害
回复

使用道具 举报

14

主题

376

帖子

926

积分

高级会员

Rank: 4

积分
926
金钱
550
HASS币
10
发表于 2019-10-7 19:58:30 | 显示全部楼层
先收藏了
回复

使用道具 举报

4

主题

50

帖子

333

积分

论坛DIY达人

积分
333
金钱
278
HASS币
20
发表于 2019-10-7 20:19:27 | 显示全部楼层
mark!!!!!!!!
回复

使用道具 举报

7

主题

201

帖子

554

积分

高级会员

Rank: 4

积分
554
金钱
353
HASS币
0
发表于 2019-10-7 20:58:52 | 显示全部楼层
学习学习,谢谢老师
回复

使用道具 举报

9

主题

378

帖子

1142

积分

论坛分享达人

积分
1142
金钱
764
HASS币
20
发表于 2019-10-7 22:06:29 | 显示全部楼层
好久没有大佬来扔砖了,谢谢
回复

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2019-10-23 03:04 , Processed in 0.090988 second(s), 24 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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