Stylizacja karty w aplikacji

faq
1

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:

image
image1519×808 301 KB

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;
}

image
image829×649 105 KB

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

image
image642×555 107 KB

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.

image
image1010×785 260 KB

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

background: #323232cc;

image
image970×152 18.6 KB

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
2

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

Jolka
Jolka1303×597 173 KB

Zrzutekranu_2020-02-22-13-43-17-090
Zrzutekranu_2020-02-22-13-43-17-0901065×1839 638 KB

2 polubienia
3

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.

image
image953×672 47.3 KB

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
4

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
5

Coś mi nie działa

IMG_20201114_144316
IMG_20201114_1443161500×2000 1.49 MB

6

A z innymi rzeczami dziala

IMG_20201114_150326
IMG_20201114_1503261500×2000 1.06 MB

7

IMG_20201114_170211
IMG_20201114_1702111500×2000 987 KB
znajduje kopiuje i nic się nie zmienia
IMG_20201114_170229
IMG_20201114_1702293000×4000 3.59 MB
po odśwież wszystko wraca do normy

8

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

w dom-demo jest przykład stylizacji karty

https://dom-demo.paczka.pro/lovelace-demo/css

image
image1187×458 46.9 KB

1 polubienie
9

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”

10

U mnie chyba coś nie działa

bo po wklejeniu wyświetla błąd

images
images618×689 32.7 KB

ale to poniżej chyba działa bez problemu

ale nie jestem pewien

images
images1219×539 45.1 KB

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