# Zmiana koloru kafelki na dashbordzie kiedy pralka zacznie pracować **URL:** \ **Category:** Konfiguracja HA\ **Tags:** lovelace\ **Created:** [26 Marzec 2025 06:24 UTC](https://forum.arturhome.pl/t/zmiana-koloru-kafelki-na-dashbordzie-kiedy-pralka-zacznie-pracowac/14737 "2025-03-26T06:24:31Z")\ **Posts on this page:** 10\ **Page:** 1
**Autor:** ![Conrdelis](https://forum.arturhome.pl/user_avatar/forum.arturhome.pl/conrdelis/32/28009_2.png) [@Conrdelis](https://forum.arturhome.pl/u/Conrdelis)\ **Data wpisu:** [26 Marzec 2025 06:24 UTC](https://forum.arturhome.pl/t/zmiana-koloru-kafelki-na-dashbordzie-kiedy-pralka-zacznie-pracowac/14737/1 "2025-03-26T06:24:31Z")
Dzień dobry, jestem dość świeżym “użytkownikiem” Home Assistant oraz Node-Red. Chciałbym stworzyć sobie ikonę pralki, która będzie zmieniać swój kolor w momencie kiedy gniazdko wykryje zwiększone zużycie prądu. Mniej więcej wyobrażam sobie to tak: Kolor czerwony pralki zużycie \<5W Kolor zielony pralki zużycie \>5W Czy ktoś laikowi jest w stanie wyjaśnić jak zrobić to za pomocą dostępnych kafelek? Pralkę oczywiście mam podpięte pod gniazdko (zigbee), które monitoruje na bieżąco zużycie energii. Pozdrawiam, Konrad. ---
**Autor:** ![boskikak](https://forum.arturhome.pl/letter_avatar_proxy/v4/letter/b/74df32/32.png) [@boskikak](https://forum.arturhome.pl/u/boskikak)\ **Data wpisu:** [26 Marzec 2025 17:08 UTC](https://forum.arturhome.pl/t/zmiana-koloru-kafelki-na-dashbordzie-kiedy-pralka-zacznie-pracowac/14737/2 "2025-03-26T17:08:22Z")
Ja to u siebie mam zrealizowane tak: Utworzyłem template sensor który mi eksponuje 3 stany (pracuje, nie pracuje i odłączone z zasilania). Do tego mam zrobione 3 własne ikony które są dodane jako karta picture. Jakbyś chciał bardziej szczegółowo to mogę Ci udostępnić ---
**Autor:** ![Conrdelis](https://forum.arturhome.pl/user_avatar/forum.arturhome.pl/conrdelis/32/28009_2.png) [@Conrdelis](https://forum.arturhome.pl/u/Conrdelis)\ **Data wpisu:** [26 Marzec 2025 18:00 UTC](https://forum.arturhome.pl/t/zmiana-koloru-kafelki-na-dashbordzie-kiedy-pralka-zacznie-pracowac/14737/3 "2025-03-26T18:00:22Z")
Jeśli mogę Cię prosić, nawet sam zrzut ekranu byłoby super! ---
**Autor:** ![MariuszT](https://forum.arturhome.pl/user_avatar/forum.arturhome.pl/mariuszt/32/8004_2.png) [@MariuszT](https://forum.arturhome.pl/u/MariuszT)\ **Data wpisu:** [26 Marzec 2025 18:10 UTC](https://forum.arturhome.pl/t/zmiana-koloru-kafelki-na-dashbordzie-kiedy-pralka-zacznie-pracowac/14737/4 "2025-03-26T18:10:34Z")
Nie wiem co już masz zainstalowane a co nie więc od początku. Do modyfikacji wyglądu poszczególnych elementów kart home assistanta niezbędna jest integracja card-mod: > **[GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card](https://github.com/thomasloven/lovelace-card-mod)** > > 🔹 Add CSS styles to (almost) any lovelace card Można ją doinstalować do HA korzystając z zasobów HACS (Home Assistant Community Store) > **[HACS](https://www.hacs.xyz/)** > > Manage (Install, track, upgrade) and discover custom elements for Home Assistant directly from the UI. Gdy będziesz to już miał można to zrobić np. tak: ```auto type: tile entity: switch.gniazdko_pralka features_position: bottom name: Pralka vertical: false card_mod: style: | ha-tile-icon { {% set s1 = states('sensor.gniazdko_pralka_moc')|int %} {% if (s1 < 5) %} --tile-color: red {% elif (s1 == 5) %} --tile-color: blue {% elif (s1 > 5) %} --tile-color: green {% endif %} } ``` Efekt jak poniżej w zależności od stanu encji pokazującej moc. ![test](https://forum.arturhome.pl/uploads/default/original/3X/a/9/a9029c9d636f50f0e02ae0bbb47252d6828f1a37.jpeg) Oczywiście musisz dopasować nazwy encji do własnych potrzeb Nie wiem tylko dlaczego dodałeś swój temat w kategorii Node-RED. ---
**Autor:** ![boskikak](https://forum.arturhome.pl/letter_avatar_proxy/v4/letter/b/74df32/32.png) [@boskikak](https://forum.arturhome.pl/u/boskikak)\ **Data wpisu:** [26 Marzec 2025 19:58 UTC](https://forum.arturhome.pl/t/zmiana-koloru-kafelki-na-dashbordzie-kiedy-pralka-zacznie-pracowac/14737/5 "2025-03-26T19:58:50Z")
Tu masz przykładowego template: ```auto ### dzialanie pralki ### - platform: template sensors: work_pralka: friendly_name: "Pranie" icon_template: mdi:washing-machine value_template: > {% if is_state('switch.pralka' ,'off') %} 0 {% elif states('sensor.pralka_power')|int(0) > 3 and (now() - timedelta(seconds=5)) %} on {% else %} off {% endif %} ``` A tutaj kod karty: ```auto type: image entity: sensor.work_pralka state_image: "0": /local/img/ikony/pralka-0.png "on": /local/img/ikony/pralka-ON.png "off": /local/img/ikony/pralka-OFF.png style: top: 50% left: 50% width: 100% tap_action: action: call-service service: switch.toggle target: entity_id: switch.pralka data: {} ``` A ikonki mam własne które są po prostu obrazkami: ![pralka](https://forum.arturhome.pl/uploads/default/original/3X/9/3/93cd173d0a6e20897557b9b082ffb6ab22d5c131.png) ---
**Autor:** ![Conrdelis](https://forum.arturhome.pl/user_avatar/forum.arturhome.pl/conrdelis/32/28009_2.png) [@Conrdelis](https://forum.arturhome.pl/u/Conrdelis)\ **Data wpisu:** [26 Marzec 2025 20:52 UTC](https://forum.arturhome.pl/t/zmiana-koloru-kafelki-na-dashbordzie-kiedy-pralka-zacznie-pracowac/14737/6 "2025-03-26T20:52:45Z")
Czy mógłbyś jeszcze mi wytłumaczyć kwestie jak tworzy się template? 🙂 ---
**Autor:** ![boskikak](https://forum.arturhome.pl/letter_avatar_proxy/v4/letter/b/74df32/32.png) [@boskikak](https://forum.arturhome.pl/u/boskikak)\ **Data wpisu:** [26 Marzec 2025 21:05 UTC](https://forum.arturhome.pl/t/zmiana-koloru-kafelki-na-dashbordzie-kiedy-pralka-zacznie-pracowac/14737/7 "2025-03-26T21:05:11Z")
Mógłbym Ci napisać instrukcję ale lepiej dla Ciebie jak przekieruje Cię do dokumentacji 😉 > **[Template](https://www.home-assistant.io/integrations/template/)** > > Instructions on how to integrate Template Sensors into Home Assistant. ---
**Autor:** ![Conrdelis](https://forum.arturhome.pl/user_avatar/forum.arturhome.pl/conrdelis/32/28009_2.png) [@Conrdelis](https://forum.arturhome.pl/u/Conrdelis)\ **Data wpisu:** [26 Marzec 2025 21:32 UTC](https://forum.arturhome.pl/t/zmiana-koloru-kafelki-na-dashbordzie-kiedy-pralka-zacznie-pracowac/14737/8 "2025-03-26T21:32:54Z")
> [@MariuszT](#): > > Nie wiem tylko dlaczego dodałeś swój temat w kategorii Node-RED. Myślałem, że raczej do tego będzie trzeba wykorzystać node-red, rzeczywiście mój błąd 🙂 ---
**Autor:** ![Conrdelis](https://forum.arturhome.pl/user_avatar/forum.arturhome.pl/conrdelis/32/28009_2.png) [@Conrdelis](https://forum.arturhome.pl/u/Conrdelis)\ **Data wpisu:** [27 Marzec 2025 06:21 UTC](https://forum.arturhome.pl/t/zmiana-koloru-kafelki-na-dashbordzie-kiedy-pralka-zacznie-pracowac/14737/9 "2025-03-27T06:21:22Z")
Rzeczywiście to zadziałało! Działa to naprawdę nieźle, próbowałem to również zaimplementować na większą ikonę - byłoby dla mnie wygodniej i bardziej przejrzyście, ale niestety nie chce mi to zadziałać. Jest defaultowo biała lub żółta, byłbyś w stanie wskazać gdzie robię błąd? Z góry dziękuję 🙂 ![image0](https://forum.arturhome.pl/uploads/default/original/3X/d/5/d5ea8e3454e1e331b33288dcbbd41e72fb085fa0.jpeg) ---
**Autor:** ![MariuszT](https://forum.arturhome.pl/user_avatar/forum.arturhome.pl/mariuszt/32/8004_2.png) [@MariuszT](https://forum.arturhome.pl/u/MariuszT)\ **Data wpisu:** [27 Marzec 2025 07:54 UTC](https://forum.arturhome.pl/t/zmiana-koloru-kafelki-na-dashbordzie-kiedy-pralka-zacznie-pracowac/14737/10 "2025-03-27T07:54:59Z")
Przede wszystkim nie zamieszczaj zrzutów ekranu pokazując kod karty. Nikt nie będzie tego przepisywał z obrazka. Zapoznaj się z instrukcją jak poprawnie zamieszczać kod: > [@Jak prawidłowo zamieszczać YAML, inny kod lub logi w postach na forum](https://forum.arturhome.pl/t/jak-prawidlowo-zamieszczac-yaml-inny-kod-lub-logi-w-postach-na-forum/11455): > > Przede wszystkim NIE należy używać cytowania! [nie cytować 2024-01-23\_22-33] Niestety podstawowy znacznik bloku kodu nie znajduje się w podręcznym menu (obecnie już jest, ale i tak warto znać metody używania tego bez użycia menu - choćby do użytku na githubie) - są to w najprostszym przypadku dwie identyczne osobne linijki - jedna przed blokiem kodu, a druga za nim, w obu wystarczy umieścić po trzy odwrotne apostrofy, to ten znak który na standardowej amerykańskiej klawiaturze (czytaj: “pols… Natomiast co do samej karty, to pytałeś o rozwiązanie dla karty typu Kafelek (Tile) i dla tego typu podałem Ci rozwiązanie. Teraz używasz karty typu Przycisk (Button) i podkładasz do jej kodu modyfikację dla kafelka. To tak nie działa. Każdy typ karty, a przynajmniej większość, wymaga innych modyfikacji, które mają mieć wpływ na jej wygląd. Proponuję trochę poczytać i samemu poeksperymentować. Oczekiwanie na gotowe rozwiązania niczemu dobremu Ci nie posłuży. Dobrym źródłem informacji jak modyfikować poszczególne elementy różnych typów kart jest między innymi ten wątek, zawierający mnóstwo odnośników: > **[🔹 Card-mod - Add css styles to any lovelace card](https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/1396)** > > Here all my posts which may be useful: NOTE: Do not forget to add a "card\_mod:" keyword before "style:" (new in card-mod 3). And also read this important note to create optimized code. In most examples here a code is NOT optimized - just to...