配置

通过Picture-Element-Card整合相机卡片:

示例配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
type: picture-elements
entity: camera.lakehouse
camera_image: camera.lakehouse
camera_view: live # or auto for snapshot view
elements:
- type: icon
icon: "mdi:arrow-up"
style:
background: "rgba(255, 255, 255, 0.25)"
right: 25px
bottom: 50px
tap_action:
action: call-service
service: amcrest.ptz_control
data:
entity_id: camera.lakehouse
movement: up
- type: icon
icon: "mdi:arrow-down"
style:
background: "rgba(255, 255, 255, 0.25)"
right: 25px
bottom: 0px
tap_action:
action: call-service
service: amcrest.ptz_control
data:
entity_id: camera.lakehouse
movement: down
- type: icon
icon: "mdi:arrow-left"
style:
background: "rgba(255, 255, 255, 0.25)"
right: 50px
bottom: 25px
tap_action:
action: call-service
service: amcrest.ptz_control
data:
entity_id: camera.lakehouse
movement: left
- type: icon
icon: "mdi:arrow-right"
style:
background: "rgba(255, 255, 255, 0.25)"
right: 0px
bottom: 25px
tap_action:
action: call-service
service: amcrest.ptz_control
data:
entity_id: camera.lakehouse
movement: right
- type: icon
icon: "mdi:arrow-top-left"
style:
background: "rgba(255, 255, 255, 0.25)"
right: 50px
bottom: 50px
tap_action:
action: call-service
service: amcrest.ptz_control
data:
entity_id: camera.lakehouse
movement: left_up
- type: icon
icon: "mdi:arrow-top-right"
style:
background: "rgba(255, 255, 255, 0.25)"
right: 0px
bottom: 50px
tap_action:
action: call-service
service: amcrest.ptz_control
data:
entity_id: camera.lakehouse
movement: right_up
- type: icon
icon: "mdi:arrow-bottom-left"
style:
background: "rgba(255, 255, 255, 0.25)"
right: 50px
bottom: 0px
tap_action:
action: call-service
service: amcrest.ptz_control
data:
entity_id: camera.lakehouse
movement: left_down
- type: icon
icon: "mdi:arrow-bottom-right"
style:
background: "rgba(255, 255, 255, 0.25)"
right: 0px
bottom: 0px
tap_action:
action: call-service
service: amcrest.ptz_control
data:
entity_id: camera.lakehouse
movement: right_down
- type: icon
icon: "mdi:magnify"
style:
background: "rgba(255, 255, 255, 0.25)"
bottom: 25px
right: 25px
tap_action:
action: call-service
service: amcrest.ptz_control
data:
entity_id: camera.lakehouse
movement: zoom_in
hold_action:
action: call-service
service: amcrest.ptz_control
data:
entity_id: camera.lakehouse
movement: zoom_out
阅读全文 »

前言

Ha默认的Iframe卡片在使用Picture-Element的卡片中无法使用会出现报错,因此搜索Google发现在论坛中的:iFrame in picture-elements panel view? - Configuration / Frontend - Home Assistant Community (home-assistant.io) 可以解决这个问题

插件地址:GitHub - lukevink/home-assistant-custom-iframe: Custom iFrame card to be used with Picture elements card

安装

在Homeassistant中下载上述的卡片仓库,按照导入说明进行导入即可
在 配置-> 仪表盘 -> 左上角资源(添加上述仓库js文件)-> 重新启动Hass
卡片示例:

1
2
3
4
5
6
7
type: 'custom:custom-iframe'
url: www.google.com
style:
left: 50%
top: 50%
width: 50%
height: 50%
阅读全文 »