FHEM 3D Oberfläche

[wseiler]

Hallo,

ich habe mal einen Versuch gemacht, mit Javascript eine 3D Oberfläche für meine Hausautomatisierung zu machen:
https://www.youtube.com/watch?v=-0K778t0a_E
 
Die rumfliegenden Sachen sind nur zur Schleifenüberwachung im Teststadium.

Ich bin leider Rookie. Bisher schaffe ich nur die Daten von FHEM (auf der Fritzbox) über einen Schreibbefehl der Status in Textdateien zu übernehmen.

Die Verlinkung auf die jeweiligen FHEM Seiten, z.B. zur Anzeige von Detail klappt schon perfekt.

Wo finde ich denn eine einfache Beschreibung, wie ich Werte (z.B. "open" / "closed") direkt, quasi ohne Umweg über Datei-Schreiben und -Lesen von FHEM (Perl) nach Javascript übernehmen kann.

Sicherlich schon 1000 mal gefragt, trotzdem Danke für die erneute Starthilfe!!!

VG Wolfram

[rudolfkoenig]

Stichwoerter sind inform (aka longpoll) und XHR.
Man setzt eine Abfrage an FHEMWEB ab in der Form

document.location.pathname+"?XHR=1&inform=type=status;filter=FILTER"

wobei FILTER ein devspec ist. Pro Event bekommt man eine Zeile, die 3 Felder sind mit << getrennt, und beinhalten Name, Status, und darzustellenden Bild/etc. Falls der Name ein - enthaelt, dann ist der Inhalt die zum Geraet gehoerende Readings + Timestamp. Statt type=status kann man type=raw spezifizieren, dann bekommt man die Zeilen wie im Event-Monitor.
Das kann man in www/pgm2/fhemweb.js oder console.js sehen.

Wie erstellt man so ein Modell fuer threejs?

[wseiler]

dankeschön, google ich mal am Wochenende und probier's aus.

Das Modell des Stockwerks wurde mit der Freeware Sweethome3D erstellt und als *.obj exportiert,
wenn man sich mit dem Programm einen Nachmittag angefreundet hat, dauert so ein Grundriss etwa 15 min, incl. einscannen des Papier-Grundrisses, Wände drauf ziehen und für die Fenster ein paar Durchbrüche platzieren.

In Javascript (incl. three.js ) Programm ruf ich das Object auf und platziere in den offenen Fenstern/Tür-Durchbrüchen Mesh Cube Objekte, die Ihre Farben ändern je nachdem  ob auf od. zu ... klar könnte man auch je nachdem offene und geschlossene Festerobj. importieren ... war ja erstmal nur zum Testen.

Ich habe auch schon versucht, die Größen und Koordinaten der zu ladenden Obj. per XML-Datei zu übergeben; dann könnte ich das Ganze für Selbstversuche öffentlich verfügbar machen.
Das klappt, allerdings hab ich noch nicht rausbekommen, wie ich die in einer Funktion generierten Objecte im Programm dann "public" verfügbar mache .. wie schon gesagt, Rookie ;o) !

VG Wolfram

[wseiler]

ok, geb's zu ... hab noch Null Plan 

Die www/pgm2/fhemweb.js oder console.js hab ich mir angeschaut und auch entsprechende "Abfragen" gefunden.

Ich habe eine HTML incl. engebettetem Javascript; außerdem noch eine dazu gehörende Verzeichnis-Struktur zur three.js-Unterstützung mit libs und assets (objects, texturen etc.). Muss ich das ganze Konstrukt auch in www/pgm2 platzieren oder kann ich das auf einen extra Web-Server (Apache) laufen lassen und trotzdem auf die FHEM Daten auf der Fritzbox zugreifen.

Wozu ist eigentlich die fhemweb.js od. die console.js? Wird die im "normalen" Betrieb von FHEM auf der Fritzbox benötigt? Muss ich die ggf. sogar in mein (HTML) Programm einbinden etc. ?

Gibt es irgendwo einen passenden Code-Schnipsel den sogar ich verstehe ?

[rudolfkoenig]

Deine Dateien muessen nicht auf dem gleichen Rechner wie FHEM gehostet sein, aber dann muessen auf Apache CORS Header gesetzt  werden. Alternativen: FHEM per Proxy in Apache einbinden, oder deine Dateien innerhalb von fhem/www in ein neues Verzeichnis reinpacken.

fhemweb.js regelt die longpoll Aktualisierung und aktiviert widgets wie slider & multiline, console.js ist fuer die "Event Monitor" Anzeige zustaendig. Beides brauchst du nicht, sie werden nur fuer die FHEMWEB Seiten benoetigt. Du musst/kannst auch nichts einbinden (eine Biblithek gibt es nicht) sondern die Aufrufe wie vorher beschrieben selbst nachbauen.

Tutorial oder Doku gibt es (noch?) nicht, nur die Quellen. Bisher wollten hier nur Fortgeschrittene hier andocken, Rookies sind neu

[Dr. Boris Neubert]

Hallo,

die 3D-Darstellung erinnert mich an Sweet Home 3D...

ok, geb's zu ... hab noch Null Plan 

frag doch mal den Autor vom Floorplan Uli Maas, ob er sich mit Dir zusammentut, und Ihr die 3D-Ansicht in den Floorplan integriert, anstatt das x-te Frontend für FHEM alleine zu schreiben.

Viele Grüße
Boris

[wseiler]

@Boris
ja Sweethome3D, wie oben ja schon erwähnt! Das geht auch schöner, wenn man weitere Objekte, Texturen etc. läd! Außerdem kann ich noch "Blender" (auch Freeware) sehr empfehlen,  Mega-Programm aber aufwändiger um ans Ziel zu kommen, dafür "Film-reif"  (kann man sich in Youtube anschauen)!

@Rudolf
danke für die Erläuterung und die Tipps ... war trotzdem nicht ganz so einfach (für mich)  ...

Ich bin mit meinen "Sachen" auf einem Apache-Server auf dem PC geblieben und wollte von da FHEM auf der Fritzbox abfragen.
... also ... CORS Header in Apache hat nichts gebracht, die FHEM Proxy Einbindung in Apache ebenfalls nicht ...

Schlussendlich war's dann digital  ... eine 1 statt einer 0 für CORS in der 01_FHEMWEB.fm  (Google'sei'Dank!)

Danach klappte der Download der Liste aller Geräte incl. Status und testweiser Anzeige mit einem einfachen:

$(document).load("http://fritz.box:8083/fhem?cmd=list&XHR=1", function(msg)
{   alert(msg);   })

Den String zu zerlegen und für die Anzeige der Geräte auszuwerten schaff ich!

Nochmal 1000 Dank!
Ich melde mich wieder, wenn es was zu zeigen gibt ... bin aber die nä. 10 Tage dienstlich unterwegs.

[rudolfkoenig]

Fuer JavaScript ist mAn jsonlist oder xmllist besser als list. Und statt alert wuerde ich console.log verwenden

[gandy]

Hallo Wolfram,

bist du hiermit schon weitergekommen? Bin momentan selbst am Experimentieren und zumindest soweit gekommen, eine threejs Szene im Floorplan integrieren zu können. Für die Übergabe von devicestates hänge ich mich an die fhemweb eigene Infrastruktur, muss also keinen zusätzlichen longpoll Kanal öffnen.

Für die ersten Tests habe ich wie Du ein obj Modell aus SH3D exportiert. Schicker fände ich hier ein hierarchisches Modell, in dem ich ohne viel Nachbereitung zb den Kipp- oder Öffnungswinkel eines Fensters per Parameter einstellen kann. Bisherige Recherchen in die Richtung haben aber noch nichts gebracht.

In deinem Video sieht es so aus, als könntest mit dem Modell interagieren. Ändern sich die Fenster und Türen infolge eines Mouseklicks auf das Modell oder soll der Mauszeiger nur den Blick dahin lenken, wo gleich ein neuer Zustand visualisiert wird?

Viele Grüße,
Andy.

[wseiler]

Hallo Andi,

ja, ich hatte alles gefunden was ich brauchte und hatte dann auch das ganze Haus abgebildet.
Ich bin erst am nä. Wochenende wieder zuhause, dann könnte ich - bei Bedarf - ein neues Filmchen, mehr Details, gerne auch Code-Schnipsel etc. schicken.

Schon mal aus dem Kopf:

Ich habe Floorplan bisher nur überflogen und setzte es noch nicht ein.

Anfangs hatte ich die Threejs-Dateien mit auf der Fritzbox laufen (die brauchen ja auch einen WEB-Server); allerdings war die FB irgendwie überlastet und es kam zu Aussetzern (weiß nicht mehr genau welche, aber ich glaube das war außerhalb FHEM in anderen Funktionen).

Dann habe ich einen WEB-Server auf meinem PC installiert und die Threejs-Sachen dort laufen lassen.
Im Threejs-Programm habe ich eine Abfrage an FHEM in einer Schleife laufen (darum gingen die meisten der hier genannten Fragen), die alle States der Devices ausliest.
Das geht - wenn die Threejs nicht auf dem gleichen WEB-Server wie FHEM läuft (also bei mir) - erst dann, wenn Du das Cors-Thema (s.u. "eine 1 statt einer 0 für CORS in der 01_FHEMWEB.fm") gelöst hast. Die Abfrage ginge quasi fast "realtime"; allerdings ist das gar nicht nötig, ist ja bis dahin erstmal nur Anzeige, also Intervall auf ca. 10 sec. gesetzt. stateabhängig zeige ich dann die Element an.

Ich habe für Fenster und Türen nur die States "offen" oder "zu" und zeige das vereinfacht als rote oder grüne Objekte an, die ich an den richtigen Stellen platziert habe.
Für die Jalousie verändere ich abhängig von den States (x% offen) das Element, so dass in der Ansicht wirklich die Jalousie im richtigen Zustand angezeigt wird.

Interaktion kein Problem! ich habe das so, dass ich Objekte im 3D Raum anklicken kann. Im Youtube-Beispiel verlinke ich z.B. bei Anklicken der Türen/ Fenster auf die entsprechende Deviceadresse im FHEM. Du kannst aber bei Klicken genausogut einen Befehl an FHEM absenden und dadurch aus der 3D-Ansicht direkt interagieren. Der jeweils neue State wir dann nach der nächsten Abfrage (also spät. 10 sec nachdem der Befehl ausgeführt ist angezeigt; auf Wunsch aber auch schnellen  )

Als nächstes habe ich dann über Weblinks meine Threejs-Sichten in die FHEM Oberfläche integriert, damit "alles beinander" ist.
Wenn Du z.B. neben die 3D Sicht eine virtuelle Fernbedienung oder ein selbst programmiertes Buttonfeld platzierst (oder halt in Floorplan), dann kann Du dort klicken und in der 3D Ansicht die Wirkung mitverfolgen. Natürlich könntest Du die Schalter für an und aus auch direkt in der 3D-Ansicht als 3D-Objekte platzieren ... dann wird es ggf. etwas zu verspielt .

Es macht alles, was es soll. Wenn ich das Haus verlasse, schau ich schnell rein und sehe sofort im 3D Haus welches Fenster offen ist. Das ginge auch 2D, macht aber so viel mehr Spass und Du hast sofort ein Gefühl wo Du hinlaufen musst 

Wenn ich mal wieder etwas Langeweile hab, dann möchte ich auch noch Innenszenarien machen. Dann kann ich in Threejs den Lichteinfall von Lampen und geöffneten Fenstern/ Jalousien "simulieren" und die Zimmer "in echt" anzeigen. Das ist ganz einfach ... allerdings etwas Arbeit in SweetHome3D - wie Du ja weißt!

Das Ganze ist - ja  - nur eine Oberfläche, d.h. alle Funktionen, Logik, Logs etc. laufen auf der Fritzbox, das System ist unabhängig, auch wenn der Rechner nicht läuft.

Ich hoffe das hilft?! Wenn Du noch irgendetwas brauchst, gerne!

VG Wolfram

[wseiler]

kurzes Filmchen wie versprochen:
https://www.youtube.com/watch?v=mY9u-HwjJdE&feature=youtu.be

Quick & dirty, nicht der beste Bildausschnitt, nicht immer alles drauf ... tschuldigung!

Aber man sieht, wie ich von außen anfange ... über Anklicken eines Fenster nach FHEM verlinke .. usw.
Die Jalousie steht zu Anfang auf ca. 80%, nach "set Jalousie 60" kann man in der 3D Ansicht mitverfolgen, wenn der Befehl ausgeführt ist ... usw. ....

Melde Dich, wenn Du Hilfe brauchst!

VG
Wolfram

[gandy]

Hallo Wolfram,

Danke für die ausführliche Erklärung und den Clip, genau so etwas in der Richtung stelle ich mir auch vor. Im Moment stecke ich noch in meinen ersten threejs Schwimmübungen, aber langsam wirds... auf dein Angebot ein wenig javascript code auszutauschen komme ich bei Gelegenheit gern zurück!

Womit ich noch gar nicht weitergekommen bin ist, die Szene auch in WebViewControl gerendert zu kriegen. Mein Ziel ist eine Anzeige neben der Haustür,  auf die ich beim rausgehen nochmal kurz einen Blick werfen kann. Aber wie es aussieht, wird webgl zumindest auf meinem Tablet nicht von jedem Browser unterstützt. Was benutzt Du denn für die Anzeige?

Beste Grüße,
Andy.

[wseiler]

Hallo Andi,

bisher lief das leider nicht auf IOS Devices ... aber Abhilfe kommt ...
"WebGL on iOS 8 Safari and WebView!": http://blog.ludei.com/webgl-ios-8-safari-webview/

... angeblich im Herbst: http://www.apple.com/de/ios/ios8/?cid=wwa-de-kwg-features-com

Auf deinen Android Devices müsste das eigentlich schon laufen. Ich habe ein Samsung Pad 10.1 verliehen,
wenn ich das wiederbekomme, dann werde ich das mal für Dich testen.

Dadurch dass ich noch im Bastelstadium bin, habe ich das auf meinen Windows PCs getestet.
Ich habe auch noch einen Raspberry rumliegen, eventuell wäre das auch eine Lösung?!

VG Wolfram

[Prof. Dr. Peter Henning]

Hallo,

3D-Gebäudemodllierung ist eines meiner Forschungsgebiete. Wir haben dazu seit 2006 ein webbasiertes Geoinformationssystem hochgezogen, siehe http://www.wb3-project.de (Für die folgenden Beispiele bei Nachfrage bitte als gast/gast einloggen)

Seit 2010 gibt es ein WebGL-Frontend dazu. Hier ein Beispiel für das Ergebnis:
http://www.wb3-project.de/wb_g_id_webgl.html?db=waldbruecke&id=19029

Für ein 3D-Frontend in FHEM wären davon 3 Aspekte interessant:

• Modellierung: Die Gebäude in dem WB3-Projekt sind nicht von Hand modlliert worden, sondern werden aus wenigen Grundangaben generiert. Das ist deshalb wichtig, weil nur die wenigsten FHEM-User in der Lage sein werden, 3D-Modelle ihres FHEM-Einsatzortes zu erstellen. Beispiel für solche Grunddaten, hier für das o.a. Modell: http://www.wb3-project.de/wb_g_id.html?db=waldbruecke&id=19029&bldg=B_19029
• Texturierung: Im WB3-Projekt gibt es einen Textureditor, mit dem man hochgeladene digitale Fotografien automatisch entzerren und z.B. über Gebäudeseiten legen kann. Das könnte interessant werden, weil auch die Erstellung komplexer Texturen nicht jedermannes Sache ist. Beispiel für eine solche Textur:http://www.wb3-project.de/tex/wb_g_id.html?db=waldbruecke&id=18721&bldg=18721
• XML-basis: Wir arbeiten in dem System immer mit Klartextdaten, nicht mit proprietären Binärformaten

Gerne bringe ich solche Bestandteile in ein 3D-Frontend ein.

LG

pah

[gandy]

Hallo,

klingt interessant, wollte mir das auch gerade anschauen, aber der Link unter (1) mit dem Beispiel für die Basisdaten verlangt nach einer Anmeldung - bietet aber auf den ersten Blick keine Möglichkeit zur Registrierung. Wie kann ich mir die Daten ansehen? Edit: Augen auf hilft: gast/gast

Danke,
Andy.