Skip to content

Commit 1c02668

Browse files
xBournerxBourner
authored
Update experimental.md
1 parent 123c585 commit 1c02668

File tree

1 file changed

+234
-0
lines changed

1 file changed

+234
-0
lines changed

‎pages/configuration/experimental.md

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,237 @@
1+
---
2+
title: Experimental
3+
layout: home
4+
nav_order: 10
5+
parent: Configuration
6+
---
17

8+
# Experimental
9+
10+
Support for having rooms/areas next to the room cards.
11+
Only on big screens. On mobile its hidden and youn are redirected to the default room view.
12+
13+
Its based on many conditional cards with media query.
214

315
![image](https://github.com/xBourner/auto-dash/assets/64064679/ef5d5394-edfd-4587-9c69-7dfe5acc64d3)
16+
17+
18+
Add a input select helper to toggle around the rooms. Add all the room names to that input select.
19+
![image](https://github.com/xBourner/auto-dash/assets/64064679/80de82bc-c672-4ca9-9081-2846f80ac12c)
20+
21+
Add this template to your raw config editor (in the decluttering template section)
22+
23+
```yaml
24+
room_card_all_in_one:
25+
default:
26+
- climate: climate.study
27+
card:
28+
type: custom:room-card
29+
card_mod:
30+
style: |
31+
ha-card {
32+
min-height:160px;
33+
}
34+
.card-header .title{
35+
--mdc-icon-size: 55px;
36+
}
37+
.card-header{
38+
margin-bottom: auto;
39+
}
40+
.entity span {
41+
font-size: 1.125rem !important;
42+
line-height: 1.75rem !important;
43+
font-weight: 600;
44+
font-family: "Open Sans", sans-serif !important;
45+
}
46+
.entities-row .entity {
47+
margin-top:-10px;
48+
margin-right:5px !important;
49+
}
50+
.entity span:last-child {
51+
font-size: 0.875rem !important;
52+
line-height: 1.25rem !important;
53+
color: rgb(155, 155, 155);
54+
font-family: "Open Sans", sans-serif !important;
55+
}
56+
.entities-row:nth-child(3) .entity:nth-child(1):after{
57+
content: " - ";
58+
}
59+
.entities-row:nth-child(4) span:last-child:before {
60+
content: " (";
61+
}
62+
.entities-row:nth-child(4) span:last-child:after {
63+
content: "°C)";
64+
}
65+
.card-header .entities-info-row{
66+
padding: 0px !important;
67+
right: 5px !important;
68+
top: 1px !important;
69+
flex-flow: column !important;
70+
}
71+
.entities-info-row .entity.icon-entity {
72+
margin-bottom: -20px;
73+
}
74+
tap_action:
75+
action: call-service
76+
service: input_select.select_option
77+
target:
78+
entity_id: input_select.room_select
79+
service_data:
80+
option: '[[room]]'
81+
double_tap_action:
82+
action: call-service
83+
service: light.toggle
84+
data: {}
85+
target:
86+
entity_id: '[[light]]'
87+
title: null
88+
entity: null
89+
icon: '[[icon]]'
90+
show_icon: true
91+
info_entities:
92+
- entity: '[[light]]'
93+
show_icon: true
94+
- entity: '[[switch]]'
95+
show_icon: true
96+
icon: mdi:power-plug
97+
hide_if:
98+
conditions:
99+
- condition: equals
100+
entity: '[[switch]]'
101+
value: 'off'
102+
- entity: '[[motion]]'
103+
show_icon: true
104+
hide_if:
105+
conditions:
106+
- condition: equals
107+
entity: '[[motion]]'
108+
value: 'off'
109+
- entity: '[[vacuum]]'
110+
show_icon: true
111+
hide_if:
112+
conditions:
113+
- condition: equals
114+
entity: '[[vacuum]]'
115+
value: idle
116+
- condition: equals
117+
entity: '[[vacuum]]'
118+
value: docked
119+
- entity: '[[media]]'
120+
show_icon: true
121+
icon: mdi:speaker
122+
hide_if:
123+
conditions:
124+
- condition: equals
125+
entity: '[[media]]'
126+
value: idle
127+
- condition: equals
128+
entity: '[[media]]'
129+
value: paused
130+
- entity: '[[media_group]]'
131+
show_icon: true
132+
icon: mdi:speaker
133+
hide_if:
134+
conditions:
135+
- condition: equals
136+
entity: '[[media_group]]'
137+
value: 'off'
138+
- entity: '[[door]]'
139+
show_icon: true
140+
hide_if:
141+
conditions:
142+
- condition: equals
143+
entity: '[[door]]'
144+
value: 'off'
145+
- entity: '[[lock]]'
146+
show_icon: true
147+
- entity: '[[window]]'
148+
show_icon: true
149+
icon:
150+
state_on: mdi:window-open-variant
151+
state_off: mdi:window-closed-variant
152+
rows:
153+
- entities:
154+
- entity: sun.sun
155+
name: '[[room]]'
156+
show_icon: false
157+
show_name: true
158+
tap_action:
159+
action: none
160+
- entities:
161+
- entity: '[[temperature]]'
162+
show_name: false
163+
show_icon: false
164+
show_state: true
165+
- entity: '[[humidity]]'
166+
show_name: false
167+
show_icon: false
168+
show_state: true
169+
- entities:
170+
- entity: '[[climate]]'
171+
attribute: temperature
172+
show_icon: false
173+
show_name: false
174+
show_state: true
175+
hide_if:
176+
conditions:
177+
- condition: equals
178+
entity: '[[climate]]'
179+
attribute: hvac_action
180+
value: idle
181+
- condition: equals
182+
entity: '[[climate]]'
183+
attribute: hvac_action
184+
value: 'off'
185+
```
186+
187+
Then add two condtional cards based on screen size.
188+
The all_in_one template should be used on desktop and the deafult room-card should be used on mobile.
189+
190+
It should look like this:
191+
192+
```yaml
193+
- type: conditional
194+
view_layout:
195+
grid-area: buro
196+
conditions:
197+
- condition: screen
198+
media_query: '(min-width: 1280px)'
199+
card:
200+
type: custom:decluttering-card
201+
template: room_card_all_in_one
202+
variables:
203+
- room: Büro
204+
- path: buro
205+
- light: light.lichtgruppe_buero_2
206+
- icon: fapro:workspace#fullcolor
207+
- motion: binary_sensor.buro_bewegungsmelder_occupancy
208+
- media: media_player.buro
209+
- temperature: sensor.buro_multisensor_temperature
210+
- humidity: sensor.buro_multisensor_humidity
211+
- window: binary_sensor.buro_fenstersensor_contact
212+
- climate: climate.buro_homekit
213+
- vacuum: vacuum.dreame_bot_l10_pro
214+
- switch: switch.buero_pc
215+
- type: conditional
216+
conditions:
217+
- condition: screen
218+
media_query: '(min-width: 0px) and (max-width: 767px)'
219+
card:
220+
type: custom:decluttering-card
221+
template: room_card
222+
variables:
223+
- room: Büro
224+
- path: buro
225+
- light: light.lichtgruppe_buero_2
226+
- icon: fapro:workspace#fullcolor
227+
- motion: binary_sensor.buro_bewegungsmelder_occupancy
228+
- media: media_player.buro
229+
- temperature: sensor.buro_multisensor_temperature
230+
- humidity: sensor.buro_multisensor_humidity
231+
- window: binary_sensor.buro_fenstersensor_contact
232+
- climate: climate.buro_homekit
233+
- vacuum: vacuum.dreame_bot_l10_pro
234+
- switch: switch.buero_pc
235+
view_layout:
236+
grid-area: buro
237+
```

0 commit comments

Comments
 (0)