Erstellen unserer Einteilung & Einrichtung oder animierte Plano nach Hause in Heim Assistent

/ / , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , /

In diesem Beitrag werden wir versuchen zu erklären, wie wir einen Plan unseres Hauses machen und integrieren sie in Heim-Assistenten, mit der Absicht, um die Geräte zu integrieren haben wir bereits in hassio und beleben das Flugzeug. Es ist sehr attraktiv und vor allem visuellen, Es ist etwas, das Sie zu Hause zu schätzen wissen, denn mit einem Bild können wir den Zustand unserer Heimat und wir interact mit Geräten dafür sorgen, dass wir hinzufügen.

Dies ist das Beispiel, das wir in der Post machen werden, Wir werden die Karte unseres Hauses mit Informationen in Echtzeit haben, Wir werden die Lichter an sehen, mit ihren Schatten, was wir im Fernsehen sehen, Werte jeder Metrik, die uns interessiert… und wir können sogar mit jedem von ihnen interagieren, Lautsprecher stumm schalten, Jalousien anheben oder absenken, siehe Überwachungskameras, der Zustand unserer Pflanzen, Temperaturen, Luftfeuchtigkeit, Verbrauch, Menschen, wenn wir tragen…

Zunächst einmal, vor dem Start wird es am mühsamsten sein, Wir müssen einen Plan für unser Haus machen, Am einfachsten ist es, ein Tool wie Sweet Home 3D zu verwenden, Ein kostenloses und super intuitives Tool, das wir in diesem Beitrag nicht erklären werden, da mit 5 Minuten, die Sie verbringen Ich bin sicher, Sie werden wissen, wie man es benutzt, und Sie können Ihren Plan machen, Das wird einige Zeit dauern, um es hübsch zu machen, Dies hängt jedoch von der gewünschten Detailgenauigkeit ab. Sie beginnen mit dem Zeichnen der Wände, Dann fügen Sie Ihre Objekte hinzu, die Sie der Realität so nahe wie möglich bringen müssen.

Als Hilfe verlasse ich Sie auf der Website von 3D WareHouse von Sketchup als Bank importierbarer Bilder, dass es eine gute Idee ist, nach den Möbeln zu suchen, die wir haben, Objekte, Sofas, Lampen… Und es hängt auch davon ab, wie gut Sie es belassen möchten, genau wie Sie eine Textur importieren müssen, um es realistischer zu machen, dafür habe ich Gebrauch aufgeschrieben Archivtexturen. Wir werden in der Draufsicht arbeiten und in der unteren Ansicht werden wir die Ergebnisse so sehen, wie sie in 3D sind, Die Idee ist das, Lass es so nah wie möglich bei dir zu Hause. Wenn Sie den Plan mehr oder weniger fertig haben, Die Idee ist, dass wir verschiedene Luftbilder von dem machen müssen, was wir sehen wollen, Ich persönlich empfehle Ihnen, mehrere Fotos mit unterschiedlicher Zeit aufzunehmen, seitdem können wir sie in Home Assistant setzen und dass die allgemeine Ebene I die Schatten der Sonne je nach Zeit geändert hat, oder am Ende des Tages und der Nacht kommt, Nun, das Haus ist dunkel. Es ist wirklich einfach, wirklich, Verbringen Sie ein paar Minuten und Sie werden gesaugt haben. Ein weiterer Tipp, Machen Sie die Bilder mit der höchstmöglichen Qualität, in meinem Fall benutze ich 1920×1080 Auflösungspixel (beide in Dokument- / Planeigenschaften, wie wenn das Foto aufgenommen wird).

dann, mit jedem PhotoShop-Editor, die Inkscape (Open Source) Wir müssen alle Bilder machen, die wir vom Haus brauchen werden. Ich erkläre mein Beispiel, wird haben 3 Bilder des ganzen Flugzeugs, eins mit dem Morgenlicht, ein weiterer am Nachmittag und ein weiterer in der Nacht, machte die Fotos um 12 Uhr, 17h bzw. 22h. Zusätzlich zum Nachtfoto müssen wir ein weiteres Foto machen, aber diesmal mit allen Lichtern an, Ich habe so etwas wie:

  • planta_baja_manana.png 01/08/2020 um 12 Uhr
  • late_plant.png 01/08/2020 um 17 Uhr
  • plant_low_night.png 01/08/2020 bei 21:27h
  • plant_low_night_light.png 01/08/2020 bei 21:27h

Und in der Nacht Bild mit Lichtern, Wir müssen mit diesen Editoren die Bereiche mit Licht schneiden, Zum Beispiel die Küche, el hall, Halle, Zimmer… manchmal ist es notwendig, bei Lampen oder wenn wir mehrere Lichter in einer Kabine haben, ein Gefälle zu machen… Verbleibende Bilder (Ich wiederhole, ist mein Beispiel) im PNG-Format mit Transparentfolien:

  • hall_luz.png
  • lamp_sala_luz.png
  • sala_luz.png
  • kitchen_light.png
  • essing_light.png

gut, wenn wir diesen Teil fertig haben, Wir können mit Home Assistant beginnen, Hier müssen wir eine Ebene erstellen und nach und nach alle Bilder hinzufügen, die wir generiert haben. bevor irgendetwas, Das erste, was wir im Sensorbereich erstellen werden (Sensoren:), ist etwas, das uns den Aufstieg der Sonne sagt, und so können wir es als nächstes verwenden, wenn wir beginnen und dass sich der Hintergrund des Flugzeugs ändert, wenn es Morgen ist, halber Tag, am Nachmittag oder schon in der Nacht, und damit setzen wir verschiedene hintergründe mit den entsprechenden sonnenschattierungen, und das Bild mehr verdunkeln, wenn die Nacht kommt. Wir werden einen Sensor erstellen, dass ich ihn bright_sun nannte, Ich überlasse Ihnen den Code, den wir in unsere configuration.yaml einfügen würden:

Sensor:
...
  - Plattform: Vorlage
    Sensoren:
      hellheit_sun:
        freundlicher_name: "Sonnenschein"
        value_template: >-
          {% wenn state_attr('Sonne Sonne', 'Elevation') > 20  %}
            hell
          {% elif state_attr('Sonne Sonne', 'Elevation') > 9 %}
            Mitte
          {% elif state_attr('Sonne Sonne', 'Elevation') > -3 %}
            dunkel
          {% sonst %}
            schwarz
          {% endif %}
...

Denken Sie daran, Home Assistant neu zu starten, um die gerade vorgenommenen Änderungen neu zu laden (Jedes Mal, wenn wir die Konfigurationsdatei berühren, du weißt schon). schließlich, Wir können mit dem Plan beginnen! wir begonnen!!! In der Lovelace-Benutzeroberfläche können wir bereits eine manuelle Karte erstellen. Ich überlasse Ihnen den folgenden Code: Das, was es tut, ist das, was gesagt wird, wird vom Sensor illo Helligkeit Sonne lesen’ Ihr Zustand und es hängt davon ab, welchen Zustand Sie haben, weil es ein Hintergrundbild oder ein anderes setzen wird. Beispiel unserer ersten Karte:

Elemente:
  - Entität: sensor.brillo_sun
    Bild: /local / ground_floor / ground_floor_black.png
    state_image:
      schwarz: /local / ground_floor / ground_floor_night.png
      hell: /local / ground_floor / ground_floor_mediodia.png
      dunkel: /local / ground_floor / ground_floor_nachmittag.png
      Mitte: /local / ground_plant / ground_plant_manana.png
    Stil:
      links: 50%
      oben: 50%
      Breite: 100%
    tap_action:
      Aktion: keiner
    Art: Bild
Bild: /local / ground_floor / ground_floor_nachmittag.png
Art: Bildelemente

Falls jemand Zweifel am Ergebnis hat, Das werden wir erreichen, (in meinem Fall) Sohn 4 Bilder, die folgende, und du siehst die Schatten, wenn sie sich ändern, Tageslicht und letzte Nacht. Wie Sie sehen, Sie müssen jedes PNG-Bild in dem Verzeichnis speichern, das Sie auf Ihrem Hassio-Computer erstellen, In meinem Fall habe ich es in einem Docker-Container, und drinnen haben wir einen Ordner erstellt und zum Beispiel die Bilder dort mit WinSCP kopiert.

gut, Wo machen wir jetzt weiter?? Fügen wir eine Glühbirne hinzu?? Wenn Sie darauf drücken, schalten Sie auch das entsprechende Licht ein, Nein? lassen Sie uns!!! hier und hier Sie haben zwei Bilder, die uns sehr helfen werden, Die Idee ist, sie dort anzubringen, wo wir interessiert sind, In diesem Beispiel werden wir sie in die Mitte der Halle stellen, Mit dem folgenden Code, den wir der vorherigen Lovelace-Karte hinzufügen, haben wir ihn, ja, Jeder muss sich bewegen und die Größe nach seinen Wünschen ändern, und natürlich die Identität auswählen, die dem Hallenlicht entspricht:

- Entität: light.luz_hall
  state_image:
    'aus': /local / planta_baja / liteoff.png
    'auf': /local / planta_baja / lite.png
  Stil:
    links: 45%
    oben: 65%
    Breite: 10%
  tap_action:
    Aktion: Umschalten
  Art: Bild

Und das wäre das Ergebnis, Wir hätten in der Halle, wenn Sie sich eine Glühbirne ansehen, Wenn es ausgeschaltet ist, ist es ein roter Punkt, und wenn wir darauf klicken, gibt es das Licht und auch der Punkt ändert sich in die grüne Farbe und mit einem schönen Weiß um ihn herum. bereit? weiter geht es!

Lassen Sie uns die Kabine beleuchten, in diesem Fall die Halle, und das, wenn die Glühbirne an ist, Ändern Sie das Bild der Halle und kommen Sie beleuchtet heraus. Es ist cool für Lampen, auch verschlechterte Bilder mit Licht nur so weit zu verwenden, wie sie leuchten… dies zu tun, zuerst müssen wir Laden Sie diese Datei herunter und speichern Sie es in unserem Ordner config / config / www / js /’ und dann müssen wir hinzufügen “Konfiguration” > “Lovelace-Bedienfelder” > ” Mittel”:

URL: /local / js / color-lite-card.js
Tipo: js[/Quellcode]

Jetzt ja, Wir können zu unserer Karte zurückkehren, und füttere sie weiter. Wenn wir uns erinnern, Zu Beginn der Post haben wir angegeben, dass jede Kabine mit Licht beschnitten werden muss, Wir würden es mit dem folgenden Code zu unserer Karte hinzufügen:

- Entität: light.luz_hall
  Bild: /local / ground_floor / hall_light.png
  Stil:
    links: 50%
    oben: 50%
    Breite: 100%
  tap_action:
    Aktion: keiner
  Art: 'Benutzerdefiniert:color-lite-card '

Wenn wir einen Streifen LED haben, Wir können die Farbe anzeigen, die Sie gerade verwenden, in meinem Fall erinnern Sie zum x-ten Mal die WLED Sie sind wunderbar, Wir brauchen ein Bild, bei dem der Bereich nur mit roter Farbe beleuchtet und transformiert ist, Wie verlasse ich dich das? mein Beispiel _color umbenannt. Und mit dem folgenden Code können wir beginnen, unseren im Grundriss integrierten LED-Streifen zu visualisieren.

- color_image: /local / ground_floor / wled_kitchen_color.png
  Entität: light.wled_cocina
  Bild: /local / ground_floor / wled_kitchen_normal.png
  Stil:
    links: 50%
    oben: 50%
    Breite: 100%
  Art: 'Benutzerdefiniert:color-lite-card '

Was noch? Sie verwenden Kodi, um fernzusehen? Nun, es ist auch wichtig, hinzufügen zu können, was Sie sehen, weil im Fernsehen oder an der Wand, wenn Sie einen Projektor haben… so wird es zeigen, was Sie sehen 🙂 Das erste, was sein wird Laden Sie diese Datei herunter und lass es wie zuvor, und "/ config / www / js /". Und wieder von “Konfiguration” > “Lovelace-Bedienfelder” > ” Mittel” wir hinzufügen:

URL: /local / js / now-playing-card.js
Tipo: js[/Quellcode]

Tal, jetzt, um den Fernseher oder die Projektion an der Wand zu formen, wir müssen ein Trapez machen, warum natürlich, Jeder wird in der Perspektive haben, was er sehen möchte, und um es realistischer zu machen, müssen Sie die Figur mit dem machen, was Sie in Kodi sehen. Dafür hat es eine Design-Tool Was Sie sehen werden, ist Bullshit, der es benutzt, Laden Sie es einfach herunter, Öffne das Web, das bringt und spiele, Wir fügen unseren Hintergrund hinzu und nehmen schnell die Messungen vor, die wir zum Drehen oder Verdrehen benötigen. Gesamt, dass wir auf unserer Karte die Entität von Kodi hinzufügen und den Code einfügen, der die Ausgabe dieses wunderbaren Tools generiert hat, wir hätten so etwas wie:

- Entität: media_player.kodi_sala
  Stil:
    links: 64%
    oben: 11%
    verwandeln: >-
      drehen(46.5Sie) drehenX(29Sie) drehen(-38Sie) skewX(10Sie)
      schief(-30Sie)
    Breite: 8%
  Art: 'Benutzerdefiniert:jetzt spielendes Plakat '

Und das wäre das wunderbare Ergebnis, Natürlich, wenn Sie einen Projektor haben, Sie können auch eine animierte GIF-Datei einfügen, die Staub dort simuliert, wo er projiziert wird… etc, etc… Sie können coole Dinge tun. Und wenn Sie die Aktion jedes Objekts ändern, das wir der Karte hinzufügen, können Sie natürlich mit ihnen interagieren.

Gut und zuletzt, Aber Sie können noch viel mehr Dinge tun, eh! Um es auszudrücken, Lassen Sie uns den Wert einer Entität in Home Assistant sehen, zum Beispiel, wenn wir Temperatursensoren haben, gut was es markiert, die Grade, die Sie machen, und es wird in jeden Raum gestellt, in dem wir das Thermometer haben… Das gleiche kann gemacht werden, wenn wir den Verbrauch eines Geräts messen, und so, wenn wir die Karte sehen, denn in Echtzeit werden wir die Temperatur sehen, Luftfeuchtigkeit, Verbrauch… was auch immer! Venga, Wir fügen dies der Karte hinzu, mit der wir arbeiten, Jeder wird seine Entitäten setzen, Ihre Schriftfarbe…:

- Entität: Sensor.0x00158d000444587d_temperature
  Stil:
    Farbe: Orange
    Schriftgröße: 12px
    Schriftgröße: Fett gedruckt
    links: 54%
    oben: 16%
  Art: Staatsbezeichnung

gut, jeder, der die Fantasie gibt, Ich lasse Ihnen hier ein GIF, wie das alles animiert aussehen würde, Ich hoffe es inspiriert und hilft dir, Vielen Dank an alle, die Home Assistant möglich machen, und alle, die ihre Arbeit auf GitHub teilen (unter anderem). Vielen Dank für das Teilen in sozialen Netzwerken!!!

empfohlene Beiträge:

Letzte Artikel von Hector Herrero (Alle anzeigen)