Floor plan - projekt Twojego domu

Polecam darmowy program do projektowania pomieszczeń Home By Me

Wszystko łatwo daje się wyklikać, np. to jest nasze biuro 2D:

i 3D:

Taki obraz moża przez komponent galeria łatwo umieścić na karcie w aplikacji.

W wersji 0.104 (za kilka tygodni) mamy zaplanowane dodanie do galerii możliwości umieszczania na obrazie 3D sterowalnych urządzeń, dzięki czemu będzie można zaprojektować kartę z elementami obrazu (“picture-elements”) i sterować oświetleniem, odtwarzaczami oraz innymi urządzeniami z poziomu takiego planu :slight_smile:

5 polubień

W wersji 0.104.2b0 do galerii dodaliśmy piewszą wersję narzędzia ułatwiającego generowanie styli CSS dla kart (w celu ich rozmieszczenia na rzucie podłogi.
Można go już wyprubować, w tym celu trzeba:

  1. zaprojektować widok pomieszczeń
  2. przesłać go do galerii

pliki które są wysyłane do galerii optymalizujemy (zmniejszamy) żeby szybciej się wyświetlały na kartach. Ważne, żeby nazwę pliku z rzutem podłogi zacząć od słowa floorplan wtedy go zoptymalizujemy troszkę inaczej niż zdjęcia na karty

  1. dodać nowy widok

  2. zmienić tło dla widoku
    w tym celu musimy przejść do ręcznego edytora konfiguracji
    i dodać ręcznie element background do naszego nowego widoku

po zapisaniu powinniśmy mieć coś takiego

  1. przejść do generatora styli (nowa opcja w galerii)

  2. wybieramy ikonkę odtwarzacza i staramy się umieścić ramkę odtwarzacza w wybranym miejscu

8 . kopujemy wygenerowany kod karty

  1. wracamy do widoku z naszym rzutem pomieszczenia i dodajemy ręcznie kartę ze skopiowanego kodu

  2. ręcznie dostosowujemy style css żeby osiągnąć ostateczny efekt

  1. włączamy radio i :slight_smile:

4 polubienia

@jolka doszedłem do punktu 6 i nie mam genreatora styli, wersja bramki 0.104.3b0
coś robię nie tak ?

Ja u siebie mam ,może zła nazwa pliku. U siebie mam " floorplan_salon.jpg " i działa.
floorplan_salon1

2 polubienia

To pewnie cache w przeglądarce, czasami po aktualizacji przeglądarka nadal korzysta przez jakiś czas ze starej wersji interfejsu. Zrób tak jak opisaliśmy tu:

To nie nazwa pliku, edytor jest dostępny dla każdego img (nazwa jest tylko po to żeby nie zniejszać tego pliku za mocno)

W przyszłości użyjemy tego edytora nie tylko do floorplan, ale też do kart typu elementy obrazu:

hmmm rano nie było, a teraz jest
(rano robiłem na innym komputerze więc tak jak pisze @jolka to wina cache przeglądarki)
1
@mariusz_70 fajny projekt :+1: :clap:
jak zrobiłeś LED na około TV, nie mogę znaleźć
u mnie na razie tak:

2 polubienia

Nie to nie moja praca, projekt był zaadoptowany i przerobiony darmowym programem Sweet Home 3D
A ledy to wycieniowanie kolorystyczne które wykonane było programem Gimp

Lektura - https://www.wybudujmydom.pl/wystroj-wnetrz/3-bezplatne-programy-do-wizualizacji-wnetrz/

ok, dzięki za informacje

A tu instrukcja do Kazaplan:

też utknąłem na tym punkcie co kolega

zrobiłem tak i też nic

gdzie szukać tego generatora ?


oraz nie widzę tego symbolu odtwarzacza z punktu 7

chyba że nie o to chodzi bo jak patrzę na późniejsze kroki to wygląda to inaczej niż u mnie

też mam podobnie jak Akszyn nie widzę edytora

po ponad godzinie przesuwania góra/dół oraz prawo/lewo


udało mi się osiągnąć coś takiego

  - icon: 'mdi:floor-plan'
    title: test
    path: floor
    background: center / cover no-repeat url("/local/img/floorplan.jpeg") fixed
    visible:
      - user: 95338e7b7e2149edb893acd164f12556
    panel: false
    badges: []
    cards:
      - name: radio
        type: button
        entity: input_boolean.radio
        tap_action:
          action: toggle
        show_name: false
        style: |
          ha-card 
          {
            position: absolute;
            width: 29.7%;
            background: transparent;
            transform: translate3d(271px, 29px, 0px);  
          }
      - name: komputer
        type: button
        entity: cover.pc
        tap_action:
          action: toggle
        show_name: false
        style: |
          ha-card 
          {
            position: absolute;
            width: 30%;
            background: transparent;
            transform: translate3d(222px, 54px, 0px);  
          }
      - name: światło
        type: button
        entity: light.the_light
        tap_action:
          action: toggle
        show_name: false
        style: |
          ha-card 
          {
            position: absolute;
            width: 35%;
            background: transparent;
            transform: translate3d(6px, 59px, 0px);  
          }
      - name: telewizor
        type: button
        entity: switch.telewizor_hyundai
        icon: 'mdi:television-classic'
        tap_action:
          action: toggle
        show_name: false
        style: |
          ha-card 
          {
            position: absolute;
            width: 22%;
            background: transparent;
            transform: translate3d(-370px, -15px, 0px);  
          }


Witam, a jak zrobić żeby obraz zmniejszyć? Floorplan nie mieści się w oknie.

Niestety nie można wybrać optymalnego ustawienia widoku. Jeżeli na komputerze wygląda ok, to na komórce brak części mieszkania. I na odwrót.

Bo to się chyba robi widok pod konkretne urządzenie a to raczej się nie skaluje Więc chyba musisz zrobić osobny widok pod każde urządzenie osobno

1 polubienie

Cześć, potrzebuję porady jak zrobić na floor planie zmieniający się kolor encji w zależności od stanu pobieranej bądź oddawanej energi, raz jest minus a raz sama wartość, chodzi o tą żółtą plamkę? Chcę aby gdy jest produkcja z PV to kolor tej encji zmieniał się na zielony . Nie wiem czy do końca składnia jest prawidłowa…

  • type: state-label
    entity: sensor.aktualny_pobor_energi_dom_w
    prefix: null
    style:
    top: 67%
    left: 83%
    border: false
    ‘–iron-icon-stroke-color’: ‘#0a0a0a
    border-radius: 50%
    text-align: center
    color: ‘#000
    font-weight: bold
    background-color: rgba(219, 194, 0, 2)

Jak zmienić strony narożnika (lewy/prawy)?
Jak obrócić układ desek na podłodze?
Czy można zmieniać wymiary wyposażenia które nie mają przycisku Edit?
Czy można dodać elementy wyposażenia spoza bazy programu?

Cześć,
wiecie może czy “type: picture-elements”, może mieć zawartą funkcję “jeżeli” albo coś w tym rodzaju?
Na ten moment mam dwie encje z funkcją “state image” gdzie jest obrazek przy “on” i przy “off”, pierwsza która pokazuje czy światło jest zaświecone a druga czy otwarte są drzwi. No i jeżeli świeci się światło to na floorplanie widzimy światło, a jeżeli są otwarte drzwi to mamy widzimy ze są otwarte. Osobno działąją super ale chciałbym aby działały razem, że w momencie kiedy nastąpi otwarcie drzwi i będzie zaświecone światło to będzie się pokazywał 3 obraz (gdzie światło pada na otwarte drzwi)
Podsumowując, czy da się aktywować 3 render kiedy aktywne są dwa poprzednie.
Dzięki za pomoc :slight_smile: