Dankjewel

. Je moet zeker inspringen! Dat is ook een van de redenen dat ik mijn spulletjes hier mondjesmaat deel. Mocht er iemand interesse in hebben, verwacht ik daar een reactie op. Het is niet dat mijn dashboard een geheim is

.
Misschien dat je de uiteindelijke code met een foto kan delen ?
Ik zal de voorlopige code sowieso even delen. Het ziet er nu zo uit:
Zoals je ziet heb ik ook nog twee Plex playlists toegevoegd.
YAML:
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
| type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#sonos'
name: Sonos
show_icon: true
show_name: true
styles: |-
.bubble-button-card-container {
--background-color: transparent;
}
.bubble-icon-container {
--card-background-color: transparent;
}
.bubble-name {
font-size: 20px!important;
font-weight: normal;
line-height: 24px;
}
.name-without-icon {
margin-left: 12px;
}
icon: mdi:radio
shadow_opacity: '10'
bg_blur: '5'
- type: custom:mini-media-player
entity: media_player.symfonisk_livingroom
hide:
power: true
icon: true
source: true
name: true
group: true
speaker_group:
platform: sonos
entities:
- entity_id: media_player.symfonisk_kitchen
name: Keuken
card_mod:
style: |
.entity__info__media {
--secondary-text-color: var(--primary-text-color);
}
- type: custom:mushroom-title-card
title: ''
subtitle: Radio
card_mod:
style: |
ha-card {
--title-padding: var(--mush-title-padding, 0px 12px 0px 8px);
transition: none;
}
- square: false
type: grid
cards:
- type: picture
image: /local/radio/hetehits.webp
alt_text: Hete Hits
tap_action:
action: perform-action
perform_action: media_player.play_media
target:
entity_id: media_player.symfonisk_livingroom
data:
media_content_id: x-rincon-mp3radio://https://mcp-2.mm-stream.nl:8000/stream
media_content_type: music
hold_action:
action: none
- type: picture
image: /local/radio/qmusic.jpg
alt_text: Q-Music
tap_action:
action: perform-action
perform_action: media_player.play_media
target:
entity_id: media_player.symfonisk_livingroom
data:
media_content_id: >-
x-rincon-mp3radio://https://icecast-qmusicnl-cdp.triple-it.nl/Qmusic_nl_live.mp3
media_content_type: music
hold_action:
action: none
- type: picture
image: /local/radio/qmusic-90s-00s.webp
alt_text: Q-Music 90s & 00s
tap_action:
action: perform-action
perform_action: media_player.play_media
target:
entity_id: media_player.symfonisk_livingroom
data:
media_content_id: >-
aac://https://icecast-qmusicnl-cdp.triple-it.nl/Qmusic_nl_thema_high.aac?
media_content_type: music
hold_action:
action: none
- type: picture
image: /local/radio/qmusic-foute-uur.jpg
alt_text: Q-Music Foute Uur
tap_action:
action: perform-action
perform_action: media_player.play_media
target:
entity_id: media_player.symfonisk_livingroom
data:
media_content_id: >-
aac://https://icecast-qmusicnl-cdp.triple-it.nl/Qmusic_nl_fouteuur_high.aac?
media_content_type: music
hold_action:
action: none
- type: picture
image: /local/radio/qmusic-nonstop.png
alt_text: Q-Music Non-Stop
tap_action:
action: perform-action
perform_action: media_player.play_media
target:
entity_id: media_player.symfonisk_livingroom
data:
media_content_id: >-
aac://https://icecast-qmusicnl-cdp.triple-it.nl/Qmusic_nl_nonstop_high.aac?aw_0_1st.playerid=tunein
media_content_type: music
hold_action:
action: none
columns: 4
- type: custom:mushroom-title-card
title: ''
subtitle: Plex
card_mod:
style: |
ha-card {
--title-padding: var(--mush-title-padding, 0px 12px 0px 8px);
transition: none;
}
- square: false
type: grid
cards:
- type: picture
image: /local/plex/love.png
tap_action:
action: perform-action
perform_action: media_player.play_media
target:
entity_id: media_player.symfonisk_livingroom
data:
media_content_id: 'plex://{"playlist_name": "❤️ Tracks", "shuffle": 1}'
media_content_type: playlist
hold_action:
action: none
- type: picture
image: /local/plex/heart.png
tap_action:
action: perform-action
perform_action: media_player.play_media
target:
entity_id: media_player.symfonisk_livingroom
data:
media_content_id: 'plex://{"playlist_name": "🤩 Tracks", "shuffle": 1}'
media_content_type: playlist
hold_action:
action: none
columns: 4
layout_options:
grid_columns: 4
grid_rows: auto |
Dit is dus een
Bubble-card pop-up die ik heb gestyled zodat deze wat beter overeenkomt met mijn layout style, die ik met name clean wil laten ogen. Daarin zit dus een
mini-media-player zonder achtergrond of rand. Daaronder heb ik dan twee keer een
Mushroom title card met daaronder een grid van acties. De acties zijn standaard
picture cards met een tap action om een radiostation te starten. Ik heb de Mushroom title's uitgelijnd met de mini-media-player daarboven. Dit past niet helemaal bij de padding in het grid, maar soit. Dat is iets waar ik mee kan leven. Voor een eerste versie is dit even enorm functioneel. Het moet bij mij thuis ook een bepaalde
WAF hebben.
De popup kun je dan openen door een
navigate actie te doen:
YAML:
1
2
3
4
5
6
7
| type: tile
entity: media_player.symfonisk_livingroom
name: Sonos
color: blue
tap_action:
action: navigate
navigation_path: '#sonos' |
Uiteindelijk is mijn doel om de layout iets om te gooien en een vergelijkbare layout te maken zoals menig muziekapp eruit ziet. Dus met 'hoes' van wat er nu speelt, grote playback knoppen, een volume slider én dan nog wat presets.
Overigens gebruik ik de pop-ups binnen sections:
Hierdoor heb ik ook geen enorme layout shift bij het laden van de popup of problemen met een single column layout wanneer ik de popups vooraan zet.