Omówienie
Każde okienko Popup musi mieć unikalny hash (np. „#kuchnia”). Możesz je otwierać za pomocą dowolnej karty, która obsługuje navigation_path lub za pomocą dołączonego elementu horizontal-buttons-stack.
Kolejną ciekawą funkcją jest możliwość stworzenia paska przypiętego do dolnej krawędzi urządzenia, który może posiadać wiele przesuwających się w bok przycisków.
Kiedyś nagrałem film na temat Integracji Mushroom Cards, która wciąż wg. mnie jest jednym z najprostszych sposobów na stworzenie minimalistycznego, mobilnego wyglądu Home Assistant. Link do tamtego filmu umieszczę w opisie oraz tutaj na gorze po prawej stronie. Dodatkowo wykorzystując niestandardową integrację “Auto generating Mushroom dashboard strategy” – gdy zdefiniujemy paramety wtyczka sama stworzy nam zakładki wykorzystując Mushroom Cards.
Wideo-poradnik
Skrypty
Pasek dolny (Horizontal buttons stack)
styles: >
ha-card .card-content {
background: #042940 !important;
mask-image: none !important;
border-radius:50px !important;
margin: 0px -2px !important;
} .horizontal-buttons-stack::before {
background:none !important;
}
.horizontal-buttons-stack-container > .button {
margin:5px !important;
height:40px;
background: transparent;
border:0px;
color: #000000;
}
.horizontal-buttons-stack-container > button:hover,.horizontal-buttons-stack-container > .highlight > .background {
background-color: #9FC131 !important;
color: #042940 !important;
} .horizontal-buttons-stack-container > button:hover ha-icon{
color: #042940 !important;
}Separator
W separatorze możemy zmienić m.in. ikonę (ha-icon), napis (h4) oraz element paska (.separator-container div:last-child)
styles: |
ha-icon{
color: #005C53 !important;
}
h4{
color: #005C53 !important;
}
.separator-container div:last-child {
background-color: #DBF227 !important;
}Przycisk
styles: |
.switch-button {
background-color: ${state === 'on' ? '#DBF227' : '#f4f4f4'} !important;
color: ${state === 'on' ? '#042940' : '#005C53'} !important;
}
.switch-button .icon-container{
background-color: ${state === 'on' ? '#042940' : '#042940'} !important;
}
.switch-button .icon-container ha-icon{
color: ${state === 'on' ? '#DBF227' : '#f4f4f4'} !important;
}Podsumowanie
Podsumowując, uważam że Bubble Card to świetny wybór dla użytkowników Home Assistant, którzy szukają minimalistycznego i efektownego sposobu wyświetlania informacji. Jest łatwy w użyciu, wydajny i stabilny. Wtyczka zawiera również dodatkowe funkcje, takie jak możliwość automatycznego dostosowania kolejności przycisków na podstawie czujników ruchu oraz automatycznego wywoływania PopUpów.
Integracja jest stale rozwijana, dość często pojawiają się nowe aktualizacje. Autor dba o optymalizację i wydajność kodu. Po ostatnich aktualizacjach mocno zmniejszyło się obciążenie procesora. Akurat staram się patrzeć na takie parametry ponieważ zależy mi, na wysokiej wydajności mojego serwera smart home.
Dlatego śmiało mogę polecić tę integrację, nie tylko ze względów wizualnych.
