Stylizacja karty w aplikacji

Ten opis ma na celu pokazanie jak łatwo możemy edytować style kart w interfejsie użytkownika za pomocą CSS

Jak już mamy widok z ładnym tłem :slight_smile:
wykonane wg opisu:

To możemy “uładniać dalej” i dodać styl CSS do naszej karty, zróbmy to na 2 przykładach. Pierwszy przykład to prosta zmiana koloru tła na karcie - tak, żeby zrozumieć, jak to działa. Drugi przykład to przesunięcie karty i jej animacja.

0. Style CSS w przeglądarce Internetowej

Warto poczytać w Internecie, czym są CSS i jak je stosować do elementów HTML, w celu uzyskania odpowiedniego wyglądu strony. Nie będziemy się zagłębiali w te rzeczy i przejdziemy od razu do sedna - dodanie stylu do naszej kary.

W przeglądarce Internetowej na desktopie uruchommy aplikację Asystent domowy, wybierzmy kartę, którą chcemy zmienić, następnie kliknijmy niej prawym przyciskiem myszki (żeby uruchomić narzędzia developerskie w przeglądarce) i wybierzmy opcję Inspect Ctrl + Shift + j.

W efekcie powinniśmy mieć tego typu widok:

Zakładamy, że chcemy zmienić kolor tła karty dlatego interesuje nas element ha-card oraz atrybut background, ustawmy go tak:

ha-card {
 background: #323232cc;
}

i mamy już efekt przeźroczystości w przeglądarce:

Oczywiście to stało się tylko w naszej przeglądarce (po stronie klienta) i jak odświeżymy stronę, to nasze zmiany znikną, bo nie wie o nich sewer (aplikacja Asystent domowy).
Robimy to w przeglądarce, żeby szybko sprawdzić efekt naszych zmian. Żeby zmiany były stałe, trzeba dodać je do Asystenta domowego.

1. Dodanie stylu na stałe do karty

Przechodzimy do konfiguracji interfejsu użytkownika i wybieramy przycisk edycji naszej karty.

i do atrybutów karty dodajemy element ze stylem tła dla karty (to co wcześniej wykonaliśmy w przeglądarce):

background: #323232cc;

to cały kod naszej przykładowej karty wraz ze stylem:

content: "Cześć!"
style: |
  ha-card {
    background: #323232cc;
  }
type: markdown

Po zapisaniu możemy odświeżać przeglądarkę i nasza karta będzie miała już wygląd, który zapisaliśmy w atrybucie style.

3. Zmiana pozycji karty na widoku i jej animacja

Dodajmy nasze logo na dole widoku cdn…

3 polubienia

Całkiem fajnie to wygląda z przezroczystością :slight_smile:

2 polubienia

3. Zmiana pozycji karty na widoku i jej animacja

type: markdown
content: <img src="/static/icons/favicon-50x50.png">
style: |
  ha-card {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: none;
    box-shadow: none;
  }

position: absolute; oraz atrybuty bottom i right pozwala nam na przesunięcie karty na widoku.
Jeżeli karta jest zdjęciem to w ten sposób możemy umieścić je na dole ekranu i wyświetlać jak logo.

możemy też do stylu dodać animacje - dzięki temu zdjęcie będzie się pojawiało, powiększało i znikało.

Cały przykładowy kod poniżej:

content: <img src="/static/icons/favicon-50x50.png">
style: |
      @keyframes animateAisLogo {
        0% {
        opacity:1;
        transform: scale(0.2);
        }
        30% {
        opacity:0.8;
        transform: scale(0.3);
        }
        45% {
        opacity:0.6;
        transform: scale(0.6);
        }
        65% {
        opacity:0.3;
        transform: scale(0.8);
        }
        100% {
        opacity:0;
        transform: scale(1.2);
        }
      }
      ha-card {
        position: absolute;
        bottom: 20px;
        right: 20px;
        background: none;
        box-shadow: none;
      }
      ha-card img {
        animation: animateAisLogo 20s linear infinite;
      }
type: markdown 

W ten sposób można rozmieszczać karty na rzucie podłogi i tworzyć interaktywny “floorplan”. Oczywiście nie jest to wygodny sposób, docelowo udostępnimy edytor który który ułatwi rozmieszczanie kart bez znajomości CSS-a.

Bo CSS is awesome :wink:

image

1 polubienie

Czy jest jakaś inna metoda edycji kary (nie pytam o hacs bo wiem że nie jest to rekomendowane) czy tylko edycja CSS nadal?

Ewentualnie czy coś się zmieniło w tej sprawie ?

1 polubienie

Coś mi nie działa

A z innymi rzeczami dziala

znajduje kopiuje i nic się nie zmienia po odśwież wszystko wraca do normy

bo to zmieniasz w swojej przeglądarce (na kliencie) a nie w Asystencie domowym (na serwerze)

w dom-demo jest przykład stylizacji karty

1 polubienie

Ok sprawdzę ale chyba zmieniłem na kliencie ponieważ wszystkie okienka zrobiły mi się przezroczyste Tylko jedno pozostało nie zmienione “wszystkie przełączniki”

U mnie chyba coś nie działa

bo po wklejeniu wyświetla błąd


ale to poniżej chyba działa bez problemu

ale nie jestem pewien


czy tak ma być bo nie widzę aby to było zbytnio przezroczyste oraz jak zrobić aby nie trzeba było do każdej karty osobno dodawać? Bo jak próbowałem dodać na samej górze to wywala błąd walidacji