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

 找回密码
 立即注册
查看: 12889|回复: 24

[经验分享] 基于控客pro+5种插件实现的(自认为)比较完美的遥控界面

[复制链接]

40

主题

2176

帖子

8290

积分

元老级技术达人

积分
8290
金钱
6099
HASS币
110
发表于 2019-6-24 14:10:04 | 显示全部楼层 |阅读模式
参考贴:
https://bbs.hassbian.com/thread-6019-1-1.html
https://bbs.hassbian.com/thread-7331-1-1.html
https://bbs.hassbian.com/thread-5391-1-1.html
https://bbs.hassbian.com/thread-7218-1-1.html

效果:
录制_2019_06_24_14_08_36_925.gif

起因:
想把家里所有红外遥控收起来,统一用HA
但在HA里一直没找到什么好办法模拟真实遥控的键位
参考土豆哥的贴,我以前就是这么处理的
然后红外部分无反馈(空调、电视),天猫魔盒倒是可以ping反馈开机,这样用HA的时候怕误触开机
另外好几个遥控在一起很占HA的界面(当你接入的东西多了就会发现是要取舍的,虽然刚开始我也是拼命往里集成,目前ui-lovelace.yaml已经1200+行了)

前置:
控客pro自学码
会使用插件(均给出了项目地址,自行学习)
理解基本语法、缩进

用到的插件:
resources:
  # [url]https://github.com/thomasloven/lovelace-toggle-lock-entity-row[/url]
  - url: /local/custom-lovelace/toggle-lock-entity-row.js?track=true
    type: js
  # [url]https://github.com/thomasloven/lovelace-card-tools[/url]
  - url: /local/custom-lovelace/card-tools.js?track=true
    type: js
  # [url]https://github.com/thomasloven/lovelace-state-switch[/url]
  - url: /local/custom-lovelace/state-switch.js?track=true
    type: js
  # [url]https://github.com/thomasloven/lovelace-card-modder[/url]
  - url: /local/custom-lovelace/card-modder.js?track=true
    type: js
  # [url]https://github.com/custom-cards/vertical-stack-in-card[/url]
  - url: /local/custom-lovelace/vertical-stack-in-card.js?track=true
    type: js
  # [url]https://github.com/custom-cards/button-card[/url]
  - url: /local/custom-lovelace/button-card.js?track=true
    type: module



---------------以下供参考---------------
      - type: 'custom:card-modder'                             #card-modder插件 实现半透明蒙版
        style: 
          --paper-card-background-color: rgba(67, 73, 84, 0.5) #卡片背景颜色
          --paper-item-icon-color: white                       #图标颜色
          --primary-text-color: white                          #实体文字颜色
          -webkit-backdrop-filter: blur(5px)                   #给上一层增加模糊滤镜
          backdrop-filter: blur(5px)                           #给上一层增加模糊滤镜
          color: white                                         #标题文字颜色
          border-radius: 15px                                  #圆角 
        card:
          type: custom:vertical-stack-in-card                  #vertical-stack-in-card插件 以下所有卡片嵌套在一起
          title: "遥控器"
          cards:
            - type: entities
              entities:
                - input_select.remote_livingroom               #自己在其他位置建立这个input_select
            - type: custom:state-switch                        #state-switch插件 根据input_select选择进行显示
              entity: input_select.remote_livingroom           #state-switch 参数
              states:
                空调:
                  type: entities                               #支持中文,但缩进不支持 - (这个人的插件多数缩进不支持 - sensor.xxxx这种写法)
                  show_header_toggle: false
                  entities:
                    - entity: input_boolean.remote_livingroom_ac_lock
                      name: 空调控制锁
                      type: custom:toggle-lock-entity-row      #toggle-lock-entity-row 给开关上锁
                    - entity: input_number.remote_temp_livingroom
                    - entity: input_select.remote_mode_livingroom
                    - entity: input_select.remote_fanspeed_livingroom
                    - entity: script.remote_konke_turnoff_ac
                电视:   
                  type: vertical-stack                       #vertical-stack  垂直分布
                  cards:
######################第1行##########################
                    - type: horizontal-stack                  #horizontal-stack     水平分布
                      cards:
                        - type: "custom:button-card"          #button-card插件
                          color_type: blank-card              #空白卡
                        - type: "custom:button-card" 
                          color_type: blank-card
                        - type: "custom:button-card"
                          color_type: blank-card
                        - type: "custom:button-card"
                          color_type: card
                          color: rgb(255, 20, 20)             
                          icon: mdi:power
                          lock: true                       #给开关额外加一个锁
                          size: 150%
                          styles:
                            card:
                              - height: 40px               #卡高度
                          tap_action:                      #点击后要执行的操作
                            action: call-service
                            service: script.remote_konke_tv_on_off
######################第2行##########################
                    - type: horizontal-stack
                      cards:
                        - type: "custom:button-card"
                          color_type: card
                          color: rgb(105, 163, 201)
                          icon: mdi:volume-plus
                          size: 100%
                          styles:
                            card:
                              - height: 40px
                          tap_action:
                            action: call-service
                            service: script.remote_konke_tv_vol_add
                        - type: "custom:button-card"
                          color_type: blank-card
                        - type: "custom:button-card"
                          color_type: blank-card
                        - type: "custom:button-card"
                          color_type: blank-card
######################第3行##########################
                    - type: horizontal-stack
                      cards:
                        - type: "custom:button-card"
                          color_type: blank-card
                        - type: "custom:button-card"
                          color_type: card
                          color: rgb(105, 163, 201)
                          icon: mdi:volume-off
                          styles:
                            card:
                              - height: 40px
                          tap_action:
                            action: call-service
                            service: script.remote_konke_tv_vol_mute
                        - type: "custom:button-card"
                          color_type: blank-card
                        - type: "custom:button-card"
                          color_type: card
                          color: rgb(105, 163, 201)
                          icon: mdi:format-list-checks
                          styles:
                            card:
                              - height: 40px
                          tap_action:
                            action: call-service
                            service: script.remote_konke_tv_signal
######################第4行##########################
                    - type: horizontal-stack
                      cards:
                        - type: "custom:button-card"
                          color_type: card
                          color: rgb(105, 163, 201)
                          icon: mdi:volume-minus
                          styles:
                            card:
                              - height: 40px
                          tap_action:
                            action: call-service
                            service: script.remote_konke_tv_vol_sub
                        - type: "custom:button-card"
                          color_type: blank-card
                        - type: "custom:button-card"
                          color_type: blank-card
                        - type: "custom:button-card"
                          color_type: blank-card

                天猫魔盒:      
                  type: vertical-stack
                  cards:
######################第1行##########################
                    - type: horizontal-stack
                      cards:
                        - type: "custom:button-card"
                          color_type: blank-card
                        - type: "custom:button-card"
                          color_type: blank-card
                        - type: "custom:button-card"
                          color_type: blank-card
                        - type: "custom:button-card"
                          color_type: blank-card
                        - type: "custom:button-card"
                          color_type: card
                          color: rgb(255, 20, 20)
                          icon: mdi:power
                          lock: true
                          styles:
                            card:
                              - height: 40px
                          tap_action:
                            action: call-service
                            service: script.remote_konke_tmallbox_on_off
######################第2行##########################
                    - type: horizontal-stack
                      cards:
                        - type: "custom:button-card"
                          color_type: card
                          color: rgb(105, 163, 201)
                          icon: mdi:volume-plus
                          styles:
                            card:
                              - height: 40px
                          tap_action:
                            action: call-service
                            service: script.remote_konke_tmallbox_vol_add
                        - type: "custom:button-card"
                          color_type: blank-card
                        - type: "custom:button-card"
                          color_type: blank-card
                        - type: "custom:button-card"
                          color_type: card
                          color: rgb(105, 163, 201)
                          icon: mdi:arrow-up-box
                          styles:
                            card:
                              - height: 40px
                          tap_action:
                            action: call-service
                            service: script.remote_konke_tmallbox_up
                        - type: "custom:button-card"
                          color_type: blank-card
######################第3行##########################
                    - type: horizontal-stack
                      cards:
                        - type: "custom:button-card"
                          color_type: blank-card
                        - type: "custom:button-card"
                          color_type: blank-card
                        - type: "custom:button-card"
                          color_type: card
                          color: rgb(105, 163, 201)
                          icon: mdi:arrow-left-box
                          styles:
                            card:
                              - height: 40px
                          tap_action:
                            action: call-service
                            service: script.remote_konke_tmallbox_left
                        - type: "custom:button-card"
                          color_type: card
                          color: rgb(105, 163, 201)
                          icon: mdi:circle-slice-8
                          styles:
                            card:
                              - height: 40px
                          tap_action:
                            action: call-service
                            service: script.remote_konke_tmallbox_ok
                        - type: "custom:button-card"
                          color_type: card
                          color: rgb(105, 163, 201)
                          icon: mdi:arrow-right-box
                          styles:
                            card:
                              - height: 40px
                          tap_action:
                            action: call-service
                            service: script.remote_konke_tmallbox_right
######################第4行##########################
                    - type: horizontal-stack
                      cards:
                        - type: "custom:button-card"
                          color_type: card
                          color: rgb(105, 163, 201)
                          icon: mdi:volume-minus
                          styles:
                            card:
                              - height: 40px
                          tap_action:
                            action: call-service
                            service: script.remote_konke_tmallbox_vol_sub
                        - type: "custom:button-card"
                          color_type: blank-card
                        - type: "custom:button-card"
                          color_type: blank-card
                        - type: "custom:button-card"
                          color_type: card
                          color: rgb(105, 163, 201)
                          icon: mdi:arrow-down-box
                          styles:
                            card:
                              - height: 40px
                          tap_action:
                            action: call-service
                            service: script.remote_konke_tmallbox_down
                        - type: "custom:button-card"
                          color_type: blank-card
######################第5行##########################
                    - type: horizontal-stack
                      cards:
                        - type: "custom:button-card"
                          color_type: card
                          color: rgb(105, 163, 201)
                          icon: mdi:keyboard-return
                          styles:
                            card:
                              - height: 40px
                          tap_action:
                            action: call-service
                            service: script.remote_konke_tmallbox_back
                        - type: "custom:button-card"
                          color_type: card
                          color: rgb(105, 163, 201)
                          icon: mdi:home
                          styles:
                            card:
                              - height: 40px
                          tap_action:
                            action: call-service
                            service: script.remote_konke_tmallbox_home
                        - type: "custom:button-card"
                          color_type: card
                          color: rgb(105, 163, 201)
                          styles:
                            card:
                              - height: 40px
                          icon: mdi:menu
                          tap_action:
                            action: call-service
                            service: script.remote_konke_tmallbox_menu

评分

参与人数 1金钱 +20 HASS币 +10 收起 理由
+ 20 + 10 厉害了word楼主!

查看全部评分

回复

使用道具 举报

123

主题

4661

帖子

1万

积分

管理员

囧死

Rank: 9Rank: 9Rank: 9

积分
16412
金钱
11666
HASS币
45
发表于 2019-6-24 19:00:17 | 显示全部楼层
很酷,谢谢楼主分享!
回复

使用道具 举报

8

主题

2073

帖子

6053

积分

论坛元老

流水无味

Rank: 8Rank: 8

积分
6053
金钱
3980
HASS币
145

灌水之王

发表于 2019-6-25 07:45:02 | 显示全部楼层
其实这种切换风格很喜欢
就是按钮排列位置丑了点
回复

使用道具 举报

1

主题

254

帖子

601

积分

高级会员

Rank: 4

积分
601
金钱
346
HASS币
0
发表于 2019-6-25 07:58:32 来自手机 | 显示全部楼层
谢谢分享!
回复

使用道具 举报

40

主题

3056

帖子

1万

积分

超级版主

Nero

Rank: 8Rank: 8

积分
11149
金钱
8042
HASS币
182
发表于 2019-6-25 08:32:57 | 显示全部楼层
谢谢分享,但我觉得还是用遥控器舒服。
Nero
回复

使用道具 举报

40

主题

2176

帖子

8290

积分

元老级技术达人

积分
8290
金钱
6099
HASS币
110
 楼主| 发表于 2019-6-25 09:53:42 | 显示全部楼层
xieahui 发表于 2019-6-25 07:45
其实这种切换风格很喜欢
就是按钮排列位置丑了点

不行啊 没学过UI  咱这审美只能这样了
回复

使用道具 举报

40

主题

2176

帖子

8290

积分

元老级技术达人

积分
8290
金钱
6099
HASS币
110
 楼主| 发表于 2019-6-25 09:54:49 | 显示全部楼层
neroxps 发表于 2019-6-25 08:32
谢谢分享,但我觉得还是用遥控器舒服。

实体遥控器无可匹敌
这个就是应急的  配合实现一些自动化
回复

使用道具 举报

15

主题

636

帖子

2203

积分

金牌会员

Rank: 6Rank: 6

积分
2203
金钱
1567
HASS币
0
发表于 2019-6-25 14:40:56 | 显示全部楼层
无敌了,楼主。

这样可以实现语音换台吗?
回复

使用道具 举报

40

主题

2176

帖子

8290

积分

元老级技术达人

积分
8290
金钱
6099
HASS币
110
 楼主| 发表于 2019-6-25 15:02:54 | 显示全部楼层
telanx 发表于 2019-6-25 14:40
无敌了,楼主。

这样可以实现语音换台吗?

不能哦 但是有实现的办法 比较麻烦一点
回复

使用道具 举报

73

主题

1165

帖子

6645

积分

论坛元老

Rank: 8Rank: 8

积分
6645
金钱
5475
HASS币
30
发表于 2019-6-25 16:06:04 | 显示全部楼层
本来看电视的时间就很少人,用手机来控制也没有需求,觉得还是用遥控器比较好。ha的方向还是智能自动化为主要方向。
回复

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-11-27 09:47 , Processed in 0.235525 second(s), 36 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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