├── README.md ├── Screenshots ├── media_player组件效果.jpg ├── 保存地址.png ├── 效果图1.png └── 效果图2.png ├── packages └── custom_tv.yaml └── www └── custom_ui └── more-info-qinver-tv.html /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | # 以下内容将不再更新！请使用新版的[lovelace-card-touchpad](https://github.com/Qinver-china/lovelace-card-touchpad) 5 | 6 | ## Homeassistant-Custom_UI_more-info-qinver-tv 7 | homeassistant电视遥控器的自定义详情页。Homeassistant TV remote custom details page. 8 | > homeassistant接入电视之后，能操作的功能不多，但是我们往往又接入了遥控器的全部功能，比如通过博联或者小米红外等。 9 | 但是基于ha的操作方式，几乎不能当遥控器用！ 你想想，每一个按键都是一个开关，操作是很困难的！ 10 | 当然可以使用一些其他的自定义ui，但是都不方便，因为我认为遥控器使用最多的还是在手机上，而手机上的操作只有触控和滑动才是最方便的！ 11 | 因为这样才能一边看电视一边盲操作！ 12 | 所以，我制作了这样的一个UI，可以实现触控滑动来控制你的电视！ 13 | ## 目录 14 | * [更新记录](#更新记录) 15 | * [功能介绍](#功能介绍和截图) 16 | * [安装](#安装以开始使用) 17 | * [配置文件](#编写配置文件) 18 | * [混合使用](#与其他自定义ui一起使用) 19 | * [与media_player组件一起使用](#与media_player组件一起使用) 20 | * [与我联系](#与我联系和反馈) 21 | ## 更新记录 22 | #### 更新Custom_UI文件一定要清除浏览器缓存! 一定要清除浏览器缓存! 23 | 2018年6月14日 24 | 适配media_player组件,可以选择[显示media_player原按钮](#与media_player组件一起使用) 25 | 26 | 2018年6月13日 27 | 1. 增加了滑动时候的反馈动画 28 | 2. 增加长上滑为菜单键按钮 29 | 3. 调整icon获取方式,默认优先获取实体ID的icon 30 | 4. 修复配置文件不齐全可能会导致错误的Bug 31 | 32 | 2018年6月12日 33 | > 首次发布，如有疑问，欢迎与我联系！ 34 | ## 功能介绍和截图 35 | ``` 36 | 你可以在任何一个卡片上使用此自定义电视详情页，当点击卡片之后就会弹出这个遥控器UI 37 | 1. 通过触摸滑动控制遥控器上下左右/返回/主页的功能 38 | 2. 每一个滑动动作均有动画反馈 39 | 3. 可以增加你需要的其他按钮 40 | 4. 可以与其他的自定义卡片UI一起使用 41 | 5. 当然你也不一定非要用于电视遥控器，其他用法自行研究 42 | 6. 与media_player组件一起使用,可选择显示原按钮 43 | ``` 44 | ![效果图](https://github.com/Qinver-china/homeassistant-Custom_UI_more-info-qinver-tv/blob/master/Screenshots/%E6%95%88%E6%9E%9C%E5%9B%BE1.png) 45 | ![效果图](https://github.com/Qinver-china/homeassistant-Custom_UI_more-info-qinver-tv/blob/master/Screenshots/%E6%95%88%E6%9E%9C%E5%9B%BE2.png) 46 | 47 | ## 安装以开始使用 48 | 1. 下载[more-info-qinver-tv.html](https://github.com/Qinver-china/homeassistant-Custom_UI_more-info-qinver-tv/blob/master/www/custom_ui/more-info-qinver-tv.html)文件放入到你homeassistant配置文件目录的`~~/www/custom_ui`文件夹下 49 | 如图所示： 50 | ![](https://github.com/Qinver-china/homeassistant-Custom_UI_more-info-qinver-tv/blob/master/Screenshots/%E4%BF%9D%E5%AD%98%E5%9C%B0%E5%9D%80.png) 51 | 2. 在homeassistant配置文件`configuration.yaml`中的对因位置加入以下代码 52 | ```yaml 53 | frontend: 54 | javascript_version: auto 55 | extra_html_url: 56 | - /local/custom_ui/more-info-qinver-tv.html 57 | extra_html_url_es5: 58 | - /local/custom_ui/more-info-qinver-tv.html 59 | ``` 60 | **就这么简单两步，你就可以开始使用了！** 61 | ## 编写配置文件 62 | ### 同样我写了一个示例: 63 | 里面包含了两个例子，也有详细的注释，你可以下载此文件，放入到你homeassistant配置文件目录的`~~/packages`文件夹下，然后对照修改 64 | 如果你之前从未使用过packages文件夹，那么请在配置文件`configuration.yaml`中加入以下代码: 65 | ```yaml 66 | homeassistant: 67 | packages: !include_dir_named packages 68 | ``` 69 | ### 全部配置文件内容 70 | ```yaml 71 | customize: 72 | input_boolean.boolean_tvceshi1: #假设这是我的电视开关ID 73 | friendly_name: 电视遥控器1 74 | icon: mdi:television-guide 75 | custom_ui_more_info: more-info-qinver-tv ##使用此自定义详情页面 76 | entities: #以下是触控滑动功能的ID 77 | menu: script.bl_cmcc_hezi_menu 78 | home: script.bl_cmcc_hezi_home 79 | back: script.bl_cmcc_hezi_back 80 | up: script.bl_cmcc_hezi_shang 81 | down: script.bl_cmcc_hezi_xia 82 | left: script.bl_cmcc_hezi_zuo 83 | right: script.bl_cmcc_hezi_you 84 | ok: script.bl_cmcc_hezi_ok 85 | buttons: #除了触控区，你还需要增加的按钮。请一起填写icon 86 | - entity: input_boolean.boolean_tvceshi1 87 | icon: mdi:skip-previous-circle-outline 88 | - entity: input_boolean.boolean_tvceshi2 89 | icon: mdi:skip-next-circle-outline 90 | - entity: input_boolean.boolean_tvceshi3 91 | icon: mdi:format-list-bulleted 92 | - entity: input_boolean.boolean_tvceshi4 93 | icon: mdi:backup-restore 94 | ``` 95 | ## 与其他自定义UI一起使用 96 | 这个项目是自定义详情页，也就是点击卡片弹出来的页面，那么它可以与其他任何自定义卡片UI一起使用！ 97 | `以下是一个与我之前制作的[state-card-button](https://github.com/Qinver-china/homeassistant-Custom_UI.state-card-button)（自定义按钮卡片）一起使用的例子： 98 | ```yaml 99 | customize: 100 | input_boolean.boolean_tvceshi2: 101 | friendly_name: 电视遥控器2 102 | icon: mdi:television-guide 103 | custom_ui_state_card: state-card-button #这里使用自定义卡片UI，也可以使用其他的 104 | config: 105 | gap: 10px # 间距（默认为8px） 106 | ha_entity_toggle_display: none # 不显示右边本来的按钮（默认显示） 107 | entities: 108 | - entity: script.bl_cmcc_hezi_home #这是我的home按钮 109 | icon: mdi:home-outline #只要一个图标,其它都默认 110 | - entity: script.bl_cmcc_hezi_voljian #音量- 111 | icon: mdi:volume-minus 112 | - entity: script.bl_cmcc_hezi_voljia #音量+ 113 | icon: mdi:volume-plus 114 | - entity: script.bl_cmcc_hezi_kaiguan #电源开关按钮 115 | icon: mdi:power 116 | color_off: '#E45E65' #电源按钮我把他设为红色 117 | ##上面配置为自定义按钮卡片ui，详情请看项目 118 | ##下面开始遥控器UI配置，同示例一 119 | custom_ui_more_info: more-info-qinver-tv ##使用此自定义详情页面 120 | entities: #以下是触控滑动功能的ID 121 | menu: script.bl_cmcc_hezi_menu 122 | home: script.bl_cmcc_hezi_home 123 | back: script.bl_cmcc_hezi_back 124 | up: script.bl_cmcc_hezi_shang 125 | down: script.bl_cmcc_hezi_xia 126 | left: script.bl_cmcc_hezi_zuo 127 | right: script.bl_cmcc_hezi_you 128 | ok: script.bl_cmcc_hezi_ok 129 | buttons: #除了触控区，你还需要增加的按钮。请一起填写icon 130 | - entity: input_boolean.boolean_tvceshi1 131 | icon: mdi:skip-previous-circle-outline 132 | - entity: input_boolean.boolean_tvceshi2 133 | icon: mdi:skip-next-circle-outline 134 | - entity: input_boolean.boolean_tvceshi3 135 | icon: mdi:format-list-bulleted 136 | - entity: input_boolean.boolean_tvceshi4 137 | icon: mdi:backup-restore 138 | ``` 139 | ## 与media_player组件一起使用 140 | 对于遥控器本来的初衷就是为了控制媒体设备,现在可以与与`media_player`组件完美配合了 141 | 如果你需要显示`media_player`组件详情页中原本的按钮,请在配置文件中加入: 142 | `media_player_display: yes` 143 | 代码示例: 144 | ```yaml 145 | customize: 146 | media_player.kodi: #一个media_player组件 147 | custom_ui_more_info: more-info-qinver-tv ##使用此自定义详情页面 148 | media_player_display: yes #显示media_player的原按钮,仅适用于media_player组件.默认为no,不显示 149 | entities: #以下是触控滑动功能的ID 150 | menu: script.bl_cmcc_hezi_menu 151 | home: script.bl_cmcc_hezi_home 152 | back: script.bl_cmcc_hezi_back 153 | up: script.bl_cmcc_hezi_shang 154 | down: script.bl_cmcc_hezi_xia 155 | left: script.bl_cmcc_hezi_zuo 156 | right: script.bl_cmcc_hezi_you 157 | ok: script.bl_cmcc_hezi_ok 158 | ``` 159 | 注意:仅适用于media_player组件.默认为no,不显示 160 | 效果图: 161 | ![](https://github.com/Qinver-china/homeassistant-Custom_UI_more-info-qinver-tv/blob/master/Screenshots/media_player%E7%BB%84%E4%BB%B6%E6%95%88%E6%9E%9C.jpg) 162 | ## 与我联系和反馈 163 | 欢迎加入[『瀚思彼岸』](https://bbs.hassbian.com)论坛 164 | 我在论坛中的[其它主题](https://bbs.hassbian.com/home.php?mod=space&uid=645&do=thread&view=me&from=space) ,以及联系方式 165 | 如果遇到问题请在[这个帖子](https://bbs.hassbian.com/thread-4024-1-1.html)中提交回复 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | -------------------------------------------------------------------------------- /Screenshots/media_player组件效果.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Qinver-china/homeassistant-Custom_UI_more-info-qinver-tv/1b27fcf00e4a4153c3979b38f09e5920ef047977/Screenshots/media_player组件效果.jpg -------------------------------------------------------------------------------- /Screenshots/保存地址.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Qinver-china/homeassistant-Custom_UI_more-info-qinver-tv/1b27fcf00e4a4153c3979b38f09e5920ef047977/Screenshots/保存地址.png -------------------------------------------------------------------------------- /Screenshots/效果图1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Qinver-china/homeassistant-Custom_UI_more-info-qinver-tv/1b27fcf00e4a4153c3979b38f09e5920ef047977/Screenshots/效果图1.png -------------------------------------------------------------------------------- /Screenshots/效果图2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Qinver-china/homeassistant-Custom_UI_more-info-qinver-tv/1b27fcf00e4a4153c3979b38f09e5920ef047977/Screenshots/效果图2.png -------------------------------------------------------------------------------- /packages/custom_tv.yaml: -------------------------------------------------------------------------------- 1 | #frontend: 2 | # javascript_version: auto 3 | # extra_html_url: 4 | # - /local/custom_ui/more-info-qinver-tv.html 5 | # extra_html_url_es5: 6 | # - /local/custom_ui/more-info-qinver-tv.html 7 | ###以上是将custom_ui的文件加入到HA中的格式!请在对应位置添加！！ 8 | 9 | input_boolean: 10 | boolean_tvceshi1: 11 | boolean_tvceshi2: 12 | boolean_tvceshi3: 13 | boolean_tvceshi4: 14 | 15 | ##上面这部分仅仅用于举例测试用。没有实际功能。 16 | 17 | #下面是一个完整的配置写法 18 | homeassistant: 19 | customize: 20 | input_boolean.boolean_tvceshi2: 21 | friendly_name: 测试遥控器2 22 | icon: mdi:television-guide 23 | custom_ui_more_info: more-info-qinver-tv ##使用此自定义详情页面 24 | entities: #以下是触控滑动功能的ID 25 | menu: script.bl_cmcc_hezi_menu 26 | home: script.bl_cmcc_hezi_home 27 | back: script.bl_cmcc_hezi_back 28 | up: script.bl_cmcc_hezi_shang 29 | down: script.bl_cmcc_hezi_xia 30 | left: script.bl_cmcc_hezi_zuo 31 | right: script.bl_cmcc_hezi_you 32 | ok: script.bl_cmcc_hezi_ok 33 | buttons: #除了触控区，你还需要增加的按钮 34 | - entity: input_boolean.boolean_tvceshi1 35 | icon: mdi:skip-previous-circle-outline #icon可以如果不填则为默认图标 36 | - entity: input_boolean.boolean_tvceshi2 37 | - entity: input_boolean.boolean_tvceshi3 38 | icon: mdi:format-list-bulleted 39 | - entity: input_boolean.boolean_tvceshi4 40 | icon: mdi:backup-restore 41 | 42 | 43 | #这个项目是自定义详情页，也就是点击卡片弹出来的页面，那么它可以与其他任何自定义卡片UI一起使用！ 44 | #以下是一个与我之前制作的state-card-button（自定义按钮卡片）一起使用的例子： 45 | #state-card-button（自定义按钮卡片）项目地址：https://github.com/Qinver-china/homeassistant-Custom_UI.state-card-button 46 | input_boolean.boolean_tvceshi1: 47 | friendly_name: 测试遥控器1 48 | icon: mdi:television-guide 49 | custom_ui_state_card: state-card-button #这里使用自定义卡片UI，也可以使用其他的 50 | config: 51 | gap: 10px # 间距（默认为8px） 52 | ha_entity_toggle_display: none # 不显示右边本来的按钮（默认显示） 53 | entities: 54 | - entity: script.bl_cmcc_hezi_home #这是我的home按钮 55 | icon: mdi:home-outline 56 | - entity: script.bl_cmcc_hezi_voljian #音量- 57 | icon: mdi:volume-minus 58 | - entity: script.bl_cmcc_hezi_voljia #音量+ 59 | icon: mdi:volume-plus 60 | - entity: script.bl_cmcc_hezi_kaiguan #电源开关按钮 61 | icon: mdi:power 62 | color_off: '#E45E65' #电源按钮我把他设为红色 63 | ##上面配置为自定义按钮 卡片ui，详情请看项目 64 | ##下面开始自定义详情页遥控器UI配置，同示例一 65 | custom_ui_more_info: more-info-qinver-tv ##使用此自定义详情页面 66 | entities: #以下是触控滑动功能的ID 67 | menu: script.bl_cmcc_hezi_menu 68 | home: script.bl_cmcc_hezi_home 69 | back: script.bl_cmcc_hezi_back 70 | up: script.bl_cmcc_hezi_shang 71 | down: script.bl_cmcc_hezi_xia 72 | left: script.bl_cmcc_hezi_zuo 73 | right: script.bl_cmcc_hezi_you 74 | ok: script.bl_cmcc_hezi_ok 75 | buttons: #除了触控区，你还需要增加的按钮 76 | - entity: input_boolean.boolean_tvceshi1 77 | icon: mdi:skip-previous-circle-outline #icon可以如果不填则为默认图标 78 | - entity: input_boolean.boolean_tvceshi2 79 | - entity: input_boolean.boolean_tvceshi3 80 | icon: mdi:format-list-bulleted 81 | - entity: input_boolean.boolean_tvceshi4 82 | icon: mdi:backup-restore 83 | ###用于media_player组件的例子! 84 | media_player.kodi: 85 | custom_ui_more_info: more-info-qinver-tv ##使用此自定义详情页面 86 | media_player_display: yes #显示media_player的原按钮,仅适用于media_player组件.默认为no,不显示 87 | entities: #以下是触控滑动功能的ID 88 | menu: script.bl_cmcc_hezi_menu 89 | home: script.bl_cmcc_hezi_home 90 | back: script.bl_cmcc_hezi_back 91 | up: script.bl_cmcc_hezi_shang 92 | down: script.bl_cmcc_hezi_xia 93 | left: script.bl_cmcc_hezi_zuo 94 | right: script.bl_cmcc_hezi_you 95 | ok: script.bl_cmcc_hezi_ok 96 | -------------------------------------------------------------------------------- /www/custom_ui/more-info-qinver-tv.html: -------------------------------------------------------------------------------- 1 | 9 | 157 | --------------------------------------------------------------------------------