Interaktywne oświetlenie - Widok 3D - Home Assistant

[@jb8160b]

Tyle szukałem, żeby ktoś pokazał to fajnie. Mnóstwo anglojęzycznych, ale to jak pokazujesz to Ty, w prosty sposób jest nie do przebicia, dzięki !

[@HejSmart]

Dziękuję, dzięki temu mam motywację tworzyć nowe poradniki :)

[@Mandi2906]

@@HejSmart a jak ustawić żeby w ciągu dnia mieć rzut w ciągu dnia , a w nocy nocny tryb ?

[@PaffcioStudio]

Ależ to jest genialne w swojej prostocie. Pościągałem masę modeli które u mnie w domu są, pododawałem je na swoje miejsca i normalnie szok jak to pracuje. Pół dnia zajęło mi wymiarowanie mieszkania i jego rysowanie (z meblami to samo) xD Trochę czasu spędzę jeszcze na dodawaniu urządzeń innych niż światło. Tak aby dało się przełączać piekarnik, TV czy regulować roletami. Na prawdę bardzo dobry poradnik, wszystko pięknie wytłumaczone. Aż miło Cię słuchać.

[@HejSmart]

Dziękuję :)

[@marcinziolkowski6117]

Brawo !! Super poradnik i wielki szacun że dzielisz się takimi pomysłami.

[@HejSmart]

Dziękuję:)

[@tuverentetil]

Dzięki za świetny instruktaż, jedna uwaga odnośnie type state-icon i type image. Trochę się nagłowiłem dlaczego tap action toggle nie przełącza tylko pojawia się przełącznik. Otóż type image (wszystkie !) muszą znajdować się przed type state-icon

[@HejSmart]

Tak, racja. Tutaj właśnie chodzi o stos elementów :)

[@vad1mka1000]

Dziękuję

[@OkiemTestera]

Świetnie to wygląda brawo :) Obejrzałem większość Twoich filmów na kanale o sam teraz ogarniam smart home.

[@HejSmart]

Jeżeli choć trochę przydają się moje filmy w ogarniania to jestem szczęśliwy :)

[@OkiemTestera]

@@HejSmart Pewnie że przydają się 🙂 Jeszcze zamierzam coś z ESP podziałać, ale to za jakiś czas.

[@illshapen7010]

Rewelacja! Wygląda to zawodowo, a sam przewodnik jak to osiągnąć jest jasny i przejrzysty, świetna robota! Nie bez znaczenia jest też fakt, że wszystko do ogarnięcia za pomocą darmowego oprogramowania! Wielkie brawa 👏👏👏 Jest to trochę pracochłonne, ale dzięki Twoim wskazówkom wszystko udało mi się dopiąć bez większych problemów. Może jedna drobnostka: na koniec pracy na środku dashboardu kręciło mi się kółko, jakby HA próbował coś załadować. Okazało się, że jedna z encji jest niedostępna, sprawę załatwiło dodanie w sekcji 'state-image' opcji 'unavailable: local/images/floorplan/transparent.png'

[@HejSmart]

dziękuję

[@Sagadyn]

rewelacja, dziekuje

[@Sagadyn]

generalnie, podlinkowalem Twoj film na fb, niech sie rozprzestrzenia

[@itarchitect.online]

świetne - brawo !

[@jacekwitkowski3213]

Fajny poradnik. Miło się słucha. Ogarnąłem projekt domu, gimpa również ale mam problem z HA. Kiedy piszę kod wg Twojego poradnika to pierwsze pomieszczenie działa ale cała karta zachowuje się jak by była encją czyli na całej karcie mam rączkę z chmurką ,,Przytrzymanie. Pokaż więcej informacji: Światło korytarz'' Tak wygląda mój kod: type: picture-elements elements: - type: image entity: switch.swiatlo_korytarz style: top: 50% left: 50% width: 100% mix-blend-mode: lighten state_image: 'on': local/images/floorplan/korytarz.png 'off': local/images/floorplan/transparentny.png - type: state-icon entity: switch.swiatlo_korytarz icon: mdi:wall-sconce-round tap_action: action: toggle style: top: 43% left: 49% Jak dodaje drugie pomieszczenie to to pierwsze przestaje działać. Mógłbyś podpowiedzieć co z tym zrobić?

[@HejSmart]

Dzięki Jacek, za miłe słowo. Dodaj takie 2 linijki (do ostatniej warstwy z obrazkami pomieszczeń warstwy - możesz też dodać do wszystkich, nie zaszkodzi) tap_action: action: none hold_action: action: none Daj znać czy pomogło

[@jacekwitkowski3213]

@@HejSmart Dzięki za odpowiedz. Po części pomogło. Rączka znikła:) ale inne ikony nie działają. Problemem jest tutaj chyba to transparentne tło po wycięciu grafiki ze światłem. Robi się z tego obszar wykonawczy. Jest może na to jakiś sposób? W sumie to po części jest. Wyciąć z grafiki światło, usunąć całkowicie tło i wstawić do kodu. Działa. Tylko jest problem. Jeśli w pomieszczeniu są dwie ikony to już nie działa.

[@HejSmart]

​@@jacekwitkowski3213 Zapytam tak, czy ustawiałeś warstwy (od góry kodu) na samej górze warstwa najniższa, czyli: 1. obrazek widoku mieszkania 2. warstwy z elementami pomieszczeń (światła + transprarentne tło) 3. przyciski i encje (to musi być na samym dole skryptu, ponieważ warstwy nakładają z te najniższa znajdują się od góry - jak na stosie)

[@jacekwitkowski3213]

@@HejSmart Dzięki wielkie. Działa. Nie myślałem że to ma takie wielkie znaczenie. W sumie to mój pierwszy kontakt ze skryptami. Jestem elektrykiem nie programistą ;) Zauważyłem również że nie trzeba wcale wycinać tych świateł w gimpie, chyba że to potrzebne do grafiki w dzień. Ja nie będę z niej korzystał(podoba mi sie nocny widok) wiec wykorzystam całe grafiki. Jeszcze raz wielkie dzięki.

[@HejSmart]

@@jacekwitkowski3213 cieszę się, że pomogło. Ja akurat jestem programistą, dlatego jeżeli coś byłoby zbyt mało wyjaśnione to pisz proszę, postaram się bardziej wyjaśnić temat.

[@adsfghjffxgdfafgdfhxdcsdxv325]

Witam. Mam problem ze zdjęciami. Zdjęcia wgrywałem w raspberry pi dokładnie tak samo jak pokazano na filmie. Nie mailem takiego folderu "www" i całej reszty podfolderów więc je stworzyłem i nazwałem tak samo. Po przejściu do kodowania nie miałem podglądu zdjęcia. Czy mógłbym prosić o jakąś pomoc jak mogę rozwiązać swój problem? Wydaje mi się że tu chodzi o ścieżkę ponieważ gdy wszedłem w file editor normalnie był ten plik i zdjęcia.

[@pawelpraczkowski4468]

Hej mam pytanie jak dodać do floorplanu przycisk który przeniesie mnie na dana kartę. Wiem że w tap action muszę użyć navigate . Ale jak dodać przycisk a nie png.

[@nowikp]

Maam pytanie.... dlaczego mam info na karcie konfiguracji "Elementy obrazu" że nie mam edytora wizualnego dla "picture-elements" ?

[@parosLes]

Super. Dzięki. Jedno pytanie - dlaczego stosujesz krycie 55% ? Próbowałem z kryciem 100% i mam wrażenie, że było lepiej... Czy "ciemny" podkład też musi być z kryciem 55% ?

[@HejSmart]

Hej, jakoś tak uznałem że mi się podoba, nie chciałem zrobić pełnego krycia bo tablet mam w stosunkowo ciemnym miejscu i u mnie wygląda dobrze :)

[@janusz1178]

Cześć, liczę na podpowiedź jak fajnie zrobić wizualizację dla domu piętrowego 😊

[@HejSmart]

Najlepiej jak zrobisz 2 zakładki, na jednej rzut parteru a na drugiej rzut 1 piętra. Wtedy zrobiłbym w miejscu schodów przycisk przekierowujący pomiędzy zakładkami :)

[@janusz1178]

@@HejSmart dzieki za sugestie i ogólnie kanał, brakuje mi tematycznych znajomych czy tez miejsc gdzie można by pogadać w 4 oczy wymienić mysli i usłyszeć "stary błądzisz"! Wracając na temat, miiałem też pomysł żeby zrobić rzut piwnicy, parteru, poddasza, i całego domu z oświetleniem zewnątrz na jednej zakładce w czterech ćwiartkach ale na 10 calach mogło by być to mało czytelne.

[@HejSmart]

Mam w planie przygotować poradnik jak zrobić zakładki, które przeładowują treść ale bez przeładowania podstrony. Dzięki temu więcej będziesz mógł wcisnąć w jedną zakładkę

[@siemek8569]

Cześć super film, konkretnie i przystępnie opisane, z opisu zniknęły jednak linki, mógłbyś je podrzucić jeszcze raz?

[@HejSmart]

jutro prześlę nowe linki z pełnymi skryptami.

[@siemek8569]

@@HejSmart dzięki :)

[@HejSmart]

@@siemek8569 tutaj link do skryptu: hejsmart.pl/karta-elementy-obrazu-widok-3d-mieszkania-w-home-assistant/

[@extremetravel]

Super filmik, mam pytanie czy można na takiej wizualizacji tworzyć grupy oświetlenia (żarówek wifi) i po kliknięciu mieć opcje ustawienia natężenia światła i koloru

[@HejSmart]

Tak, można. Wystarczy, że w HA stworzysz grupę oświetleniową np. Salon wszystkie światła i dodasz w kodzie odpowiednie parametry dla tap_action i/lub hold_action:

[@puterrr]

super poradnik :) wielkie dzięki. Nie myślałeś może żeby temat trochę rozwinąć np. o dodanie informacji z czujników temperatury?? Osobiście jakoś udało mi się je dodać ale nie potrafię dostosować ich wielkości przez co nie zbyt ładnie to wygląda. A i czy przy okazji mógłbyś podrzucić link do ikonek od włączania i wyłączania grupy świateł :)

[@HejSmart]

Ikonek zazwyczaj szukam tutaj: www.flaticon.com/ Co do poradnika, to pewnie chciałbym to udoskonalić u mnie w domu, ale niestety nie mam czasu. Na pewno chciałbym ładną kompozycję zrobić dla czujników, oczyszczaczy, klimatyzacji, rolet itd. Jak zrobię to wrzucę efekt + kod do implementacji.

[@puterrr]

@@HejSmart ok z niecierpliwością czekam no rozwój :) Przy okazji pytanie - wszystko udało mi się zrobić i nawet działa. Problem mam tylko z dodanie grupowego włączenia i wyłączenia świateł. dodając wpis jak w twoim poradniku nie pojawia mi się żaden obrazek chociaż ścieżkę podaję właściwą. O co może chodzić. Wpis dodaj po wszystkich obrazkach bezpośrednio przed pierwszym type: state-icon

[@puterrr]

@HejSmart robię zgodnie z Twoim poradnikiem i mogę dodać ikony włączającej i wyłączającej wszystkie światła. Wpisuję wszystko jak u ciebie ale obrazek mi się nie pojawia żadnego błędu też niema. Ponad jak można uzyskać taki efekt żeby obok wyświetlanego planu mieć możliwość przełączania się miedzy dwoma - trzema poziomami?? Oczywiście każdy poziom jest już stworzony. Z góry dzięki za pomoc. Pozdrawiam

[@HejSmart]

@@puterrr Czy dodałeś grupę WszystkieŚwiatła? Wpisz tutaj kod, który odpowiada u Ciebie za włączanie i wyłączanie wszystkich świateł.

[@puterrr]

@@HejSmart problem w tym że u ciebie na filmie w 22.56 po dodaniu do kodu - type: image image: local/images/lightbulb-off.png już w lewym dolnym rogu pojawia się obrazek. U mnie tak się nie dzieje. Oczywiście ścieżki podaję swoje właściwe i żaden błąd nie wyskakuje ale obrazka nie ma.

[@skomram]

Nie masz problemu z responsywnością urządzeń (ikon) na mapie w zależności od wielkości planu na różnych urządzeniach? Czy zachowują one swoją proporcjonalną wielkość?

[@HejSmart]

Raczej nie mam. Stworzyłem plan specjalnie dla urządzenia na którym jest on wyświetlany, czyli tableta w korytarzu.

[@MrSimmetria]

Po co to wycinanie, skoro style: mix-blend-mode: lighten automatycznie "przepuszcza" światło z niższych warstw?

[@HejSmart]

Przy takim zastosowaniu jest lepszy efekt, jeżeli zostawiłbym nie wycięte elementy to wyglądałoby to źle. Testowałem :)

[@MrSimmetria]

@@HejSmart Zrobiłem bez wycinania i wszystko wygląda idealnie, nawet kiedy wiele świateł się przenika.

[@HejSmart]

Ooo.. No to super - cały proces tworzenia będzie jeszcze szybszy.

[@jacekq1154]

Cześć, doskonała robota. Mam tylko jedno pytanie, czy mógłbyś podpowiedzieć co zrobić żeby po naciśnięciu w ikonę światła nie pokazywało się pole przełącznika tylko po prostu działało jak u Ciebie. Wiem, że pewnie przy dodawaniu coś schrzaniłem, ale nie mogę dojść co.

[@HejSmart]

Musisz ustawić opcję: action: call-service, poniżej przesyłam Ci linijkę odpowiedzialną za to działanie (daj znać czy Ci się udało): tap_action: action: toggle entity: switch.xxxxxxx

[@jacekq1154]

@@HejSmart Ustawiłem dokładnie tak: - type: state-icon entity: switch.lampa_salon icon: mdi:ceiling-light name: Salon style: left: 67% top: 70% tap action: action: toggle entity: switch.lampa_salon ale dalej nie działa. Wszystkie encje działają tak jak powinny, tylko po naciśnięciu tej wyświetla mi się przełącznik. Nie mam już pomysłu na to :/

[@jacekq1154]

OK, widzę już swój błąd. tap_action, a nie tap action. Sorry za zawracanie głowy. Jeszcze raz moje wyrazy uznania, piękna robota! Oby więcej takich filmów.

[@HejSmart]

Najważniejsze, że działa :)

[@Ciqita84]

Bardzo dobra robota, jestem już na etapie programowania encji na 3d planie domu, tylko nie umieściłeś linku gdzie można znaleźć wygląd ikon, jak byś mógł gdzieś podlinkować. DZIĘKI!!!

[@HejSmart]

Ikony znajdziesz tutaj: materialdesignicons.com/

[@Ciqita84]

@@HejSmart SUPER, dziękuję za szybką odpowiedz. A masz może gdzieś tutorial jak umieścić ikonę kamery na widoku 3D i po kliknięciu w nią wyskakuje okno podglądu? Pozdrawiam

[@HejSmart]

​@@Ciqita84​Poradnika nie mam ale przygotowałem dla Ciebie kod: musisz zmienić odpowiednie wartości na własne: - type: custom:button-card size: 50% icon: mdi:cctv style: width: 20px height: 20px left: 75% top: 12% tap_action: action: navigate navigation_path: /lovelace-planmieszkania/kamera/

[@PaffcioStudio]

@@HejSmart Ja również dziękuje, miałem właśnie o to pytać ;)

[@jacekq1154]

Hej. Mam mały problem z tym dashboardem. Zasadniczo wszystko działa jak należy tylko na środku kręci mi się cały czas loading (to kółko ładowania). Może spotkał się ktoś z tym i wie jak to naprawić. Z góry dzięki.

[@HejSmart]

To znaczy najprawdopodobniej że jakiś element nie może zostać załadowany. Ja zazwyczaj rozwiązuje to w taki sposób że usuwam częściowo kod (zaczynając od większych partii a potem mniejsze usuwam). Sprawdź poprawność url obrazka

[@jacekq1154]

@@HejSmart Znalazłem. Zmieniłem nazwę jednej z encji w type: image i zapomniałem o tym. Switch zmieniłem i działał, ale nie podkładał obrazu. Dzięki Bartek, zawsze można na Ciebie liczyć.

[@rafar1023]

Na komputerze wszystko gra gitara... ale przez telefon home asistans nie rozpoznaje obrazu

[@HejSmart]

przez telefon łączysz się poprzez połączenie zdalne (np. duckdns) czy lokalnie?

[@rafar1023]

@@HejSmart lokalnie... ale zaczynając od początku jestem laikiem. Mam HA na laptopie w virtul boxie żeby sobie poćwiczyć. Nie wiem czy prawidłowo dodałem pliki png. Zrobiłem to przez file edytor w HA i lokalizacja jest http... czy jest możliwość dostania się do lokalizacji i wklejenia plików jak na filmie w wirtual boxie?

[@HejSmart]

Ok, a powiedz mi jeszcze w jaki sposób z poziomu telefonu się laczysz? Aplikacja czy przeglądarka?

[@rafar1023]

@@HejSmart app

[@HejSmart]

No to w sumie dziwne, nie powinno być takiego problemu.

[@xtvga]

Gdzie link z ikonami?

[@HejSmart]

Tutaj:) hejsmart.pl/ikony-wykorzystywane-w-home-assistant/

[@pawekowalski7571]

Hej, linki zniknęły z opisu ;)

[@HejSmart]

tutaj link do skryptu: hejsmart.pl/karta-elementy-obrazu-widok-3d-mieszkania-w-home-assistant/

[@rozowy87]

NIESTETY NIE DZIAŁA JUŻ TO W TAKIEJ FORMIE :/

[@HejSmart]

Ale o czym mówisz?

[@Artur-cz8wz]

@@HejSmart Po kliknięciu na ikonę włączenia światła nie widać rozświetlenia pomieszczenia, próbowałem na kilka sposobów, zmieniałem kolejność i nie działa. Switch zmienia barwę wszystko ok ale rzut 3d nie rozświetla się. Chyba że coś zle wpisuje, raczej nie bo sprawdzałem to setki razy :/

[@rozowy87]

@@HejSmart Właściwie zauważyłem że nakłada rozświetlenie ale gdzieś z lewej strony nie tam gdzie trzeba:/ co jest nie tak?

[@HejSmart]

Ciężko mi powiedzieć, musiałbyś przesłać tutaj kod odpowiedzialny u Ciebie za sekcje. Może jest problem ze składnią, często to powoduje problemy.