Interaktywne oświetlenie - Widok 3D - Home Assistant
Вставка
- Опубліковано 2 сер 2024
- Przygotowałem videoporadnik, w którym zaprezentuję jak przygotować graficzny widok 3D Twojego mieszkania lub domu.
Zobaczysz w jaki sposób stworzyć plan domu, następnie wygenerujesz widok 3D w wysokiej rozdzielczości, przygotujesz pliki oświetlenia a następnie jak w Home Assistant dodasz kartę z widokiem.
Rozdziały:
0:00 Wstęp
0:20 Tworzymy plan w Sweet Home 3D
11:29 Obrabiamy widoki 3D w GIMPie
16:25 Tworzymy zakładkę widoku 3D w Home Assistant
Aplikacje, których użyjemy:
* Sweet Home 3D: www.sweethome3d.com/download.jsp
* GIMP: www.gimp.org/downloads/
Link do pliku transparentnego:
* hejsmart.pl/ha/transparent.png (można taki link bezpośrednio wkleić do skryptu)
Uzupełnienie / Skrypt znajdziesz tutaj:
* hejsmart.pl/karta-elementy-ob... - Наука та технологія
![[HA] Home Assistant - camera integration - motion sensor, doorbell](http://i.ytimg.com/vi/v0Madf-qmqA/mqdefault.jpg)
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 !
Dziękuję, dzięki temu mam motywację tworzyć nowe poradniki :)
świetne - brawo !
Dziękuję
rewelacja, dziekuje
generalnie, podlinkowalem Twoj film na fb, niech sie rozprzestrzenia
Brawo !! Super poradnik i wielki szacun że dzielisz się takimi pomysłami.
Dziękuję:)
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ć.
Dziękuję :)
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'
dziękuję
Świetnie to wygląda brawo :) Obejrzałem większość Twoich filmów na kanale o sam teraz ogarniam smart home.
Jeżeli choć trochę przydają się moje filmy w ogarniania to jestem szczęśliwy :)
@@HejSmart Pewnie że przydają się 🙂 Jeszcze zamierzam coś z ESP podziałać, ale to za jakiś czas.
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
Tak, racja. Tutaj właśnie chodzi o stos elementów :)
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.
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
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:
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ć?
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
@@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.
@@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)
@@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.
@@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.
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.
Maam pytanie....
dlaczego mam info na karcie konfiguracji "Elementy obrazu" że nie mam edytora wizualnego dla "picture-elements" ?
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ść?
Raczej nie mam. Stworzyłem plan specjalnie dla urządzenia na którym jest on wyświetlany, czyli tableta w korytarzu.
Cześć super film, konkretnie i przystępnie opisane, z opisu zniknęły jednak linki, mógłbyś je podrzucić jeszcze raz?
jutro prześlę nowe linki z pełnymi skryptami.
@@HejSmart dzięki :)
@@siemek8569 tutaj link do skryptu: hejsmart.pl/karta-elementy-obrazu-widok-3d-mieszkania-w-home-assistant/
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% ?
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 :)
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ł :)
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.
@@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
@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
@@puterrr Czy dodałeś grupę WszystkieŚwiatła? Wpisz tutaj kod, który odpowiada u Ciebie za włączanie i wyłączanie wszystkich świateł.
@@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.
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!!!
Ikony znajdziesz tutaj: materialdesignicons.com/
@@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
@@Ciqita84Poradnika 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/
@@HejSmart Ja również dziękuje, miałem właśnie o to pytać ;)
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.
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
@@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 :/
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.
Najważniejsze, że działa :)
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.
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
@@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ć.
Cześć, liczę na podpowiedź jak fajnie zrobić wizualizację dla domu piętrowego 😊
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 :)
@@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.
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ę
Po co to wycinanie, skoro style: mix-blend-mode: lighten automatycznie "przepuszcza" światło z niższych warstw?
Przy takim zastosowaniu jest lepszy efekt, jeżeli zostawiłbym nie wycięte elementy to wyglądałoby to źle. Testowałem :)
@@HejSmart Zrobiłem bez wycinania i wszystko wygląda idealnie, nawet kiedy wiele świateł się przenika.
Ooo.. No to super - cały proces tworzenia będzie jeszcze szybszy.
Gdzie link z ikonami?
Tutaj:) hejsmart.pl/ikony-wykorzystywane-w-home-assistant/
Hej, linki zniknęły z opisu ;)
tutaj link do skryptu: hejsmart.pl/karta-elementy-obrazu-widok-3d-mieszkania-w-home-assistant/
Na komputerze wszystko gra gitara... ale przez telefon home asistans nie rozpoznaje obrazu
przez telefon łączysz się poprzez połączenie zdalne (np. duckdns) czy lokalnie?
@@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?
Ok, a powiedz mi jeszcze w jaki sposób z poziomu telefonu się laczysz? Aplikacja czy przeglądarka?
@@HejSmart app
No to w sumie dziwne, nie powinno być takiego problemu.
NIESTETY NIE DZIAŁA JUŻ TO W TAKIEJ FORMIE :/
Ale o czym mówisz?
@@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 :/
@@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?
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.