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
Stichwoerter sind inform (aka longpoll) und XHR.
Man setzt eine Abfrage an FHEMWEB ab in der Form
Zitatdocument.location.pathname+"?XHR=1&inform=type=status;filter=FILTER"
wobei FILTER ein devspec (http://fhem.de/commandref.html#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?
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
ok, geb's zu ... hab noch Null Plan :D
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 ?
Deine Dateien muessen nicht auf dem gleichen Rechner wie FHEM gehostet sein, aber dann muessen auf Apache CORS Header (http://de.wikipedia.org/wiki/Cross-Origin_Resource_Sharing) gesetzt werden. Alternativen: FHEM per Proxy (http://fhem.de/HOWTO.html#security) 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 :)
Hallo,
die 3D-Darstellung erinnert mich an Sweet Home 3D...
Zitat von: wseiler am 08 Mai 2014, 23:44:43
ok, geb's zu ... hab noch Null Plan :D
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
@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.
Fuer JavaScript ist mAn jsonlist oder xmllist besser als list. Und statt alert wuerde ich console.log verwenden :)
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.
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
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
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.
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
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
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: :o gast/gast
Danke,
Andy.
Steht doch oben.
Zitat von: Prof. Dr. Peter Henning am 17 September 2014, 09:52:42
(Für die folgenden Beispiele bei Nachfrage bitte als gast/gast einloggen)
Guten Morgen, hallo Professor pah,
hatte ich auch schon drüber nachgedacht ...
Punkt 1) und 3) Gebäudemodellierung für Jedermann und XML:
Ich hatte das mit der XML schon probiert und das Modell aus Koordinaten und Dimensionen einzelner Wände und - zunächst mal - Fenster und Türen aufgebaut. Das klappt, wenn man sich auf einen Maßstab (Streckungsfaktoren) und einen Offset (x,y,z) geeinigt hat.
Allerdings braucht der, der die Koordinaten aus der Zeichnung übernimmt und in eine XML oder eben ein interaktives Tool eingibt trozdem auch etwas räumliches Vorstellungsvermögen um das Ganze zu modellieren.
Ich habe das dann danach mit Sweethome3D für das "Grundmodell" probiert und war (mit automatischer Übernahme der Grundriss-Scans) viel schneller am Ziel. Für die Fenster und Türobjekte habe ich dann die Eigenschaften (wie in der XML schon beschrieben) übernommen ... fertig.
Wenn man das interaktiv für alle - auch ungeübten - User machen will, müsste man m.E. ein 3D Tool mit Drag und Drop zur Verfügung stellen, bei dem die üblich zu monitorenden/ automatisierenden Elemente (Fenster, Türen, Lampen, ... etc.) mit generiert/ ausgewählt und platzieren werden können. Das wäre mit begrenzten Aufwand machbar ... vermutlich geht das sogar mit irgendeinem fertigen Programm (SH3d o. ä.)wenn man die Elementdefinitionen versteht und für seine Belange anpasst.
Mein Hauptspielfeld war allerdings erstmal, mein 3D Modell durch die Übernahme der Daten animiert zu bekommen, das klappt ja schon ganz gut ;o) ...
Textur aus Gebäudefotos wäre auch kein großes Thema (hast Du ja schon realisiert), allerdings habe ich lieber die Wände durchsichtig gemacht (wie man im Beispielfilm sieht) weil damit der Überblick besser ist.
Meinen weißen Rauhputz auf das Modell zu legen hätte keine tieferen Einsichten erzeugt ;)
Ich glaube das Texttur-Thema wird innen interessanter, wenn man (Ambiente-)Szenen mit Simulation des echten Lichteinfalls etc. erzeugen möchte ...
Ich habe mich mal durch die Links geklickt, es allerdings auf die Schnelle noch nicht geschafft, irgendwo ein 3D Gebäudemodell zu finden ... ein youtube-Filmchen - ohne Password - wäre sicherlich für die Interessierten hilfreich um sich Appetit zu holen.
Hat der Professor eh geschrieben oben:
gast / gast
Zitat von: gandy am 31 August 2014, 14:45:54
Hallo Wolfram,
Für die Übergabe von devicestates hänge ich mich an die fhemweb eigene Infrastruktur, muss also keinen zusätzlichen longpoll Kanal öffnen.
(Ich hoffe es geht ok, wenn ich mich an den Thread hänge; das Thema passt ja)
Kann diesen Satz mal jemand näher erläutern?Zum meinem Problem:
Ich bin soweit, dass ich mit einem Architekturprogramm (Arcon) mit dem Umweg über Blender mein Erdgeschoss in eine obj- und mtl-Datei gebracht habe. Diese habe ich via Threejs im Browser rotierend eingebauden. Das Erdgeschoss dreht sich nun. Die HTML-Datei liegt im Verzeichnis ../fhem/www/animation/ und wird im Floorplan via FRAME eingebunden. Soweit schickt...
Jetzt würde ich gern die Schaltzustände (Homematic) via javascript mit abfragen. Bei meiner Suche bin ich auf jsonlist2, xmllist und longpoll gestoßen, weiß aber nicht so recht, wie ich dies kombinieren soll.
Variante 1 (was ich eigenlich nicht will): Via JavaScript baue ich eine Endlosschleife, welche jede Sekunde(?) die gesamt xmllist aller Geräte und ihre Zustände abfragt, parst und die Sichtbarkeit von Objekten im 3D (z.B. Rollo) setzt. Die Lösung scheint mir aber recht Netzwerk intensive, da ja jede Sekunde die Abfrage vom Client zum Server (FHEM) stattfindet.
Variante 2: Wenn ich longpoll richtig verstanden habe, kann ich mich bei FHEM registrieren und bekomme ein Event, wenn sich ein Schaltzustand ändert.
Geht das, wen ja wie?Was ich nun nicht gefunden habe, ob der Schaltzustand und das Gerät bei diesem Gerät mit geliefert werden. Wenn nicht, könnte man dies ja über xmllist herausbekommen.
Danke für eure Hilfe...
Hi, mein Vorhaben ist recht bald eingeschlafen, weil ich mit dem Blendermodell meiner Wohnung nicht so recht weiterkommen bin. was ich aber geschafft hatte, war die beeinflussung einzelner threejs Objekte über javascript in abhängigkeit von Zuständen bestimmter fhem Devices, sogar mit fließenden Bewegungen. An den Code komm ich grade nicht ran, werd aber gern versuchen ihn nochmal rauszukramen.
1 solltet du auf keinen fall machen. nur ein mal beim starten mit xmllist holen was du brauchst. sonst legst du fhem lahm.
2 geht natürlich. ein beispiel findest du z.b. im homekit shim hier: http://forum.fhem.de/index.php/topic,32652.msg317190.html#msg317190
inklusive ein mal jsonlist beim start, holen von readings, registrieren für longpoll, cachen, und callbacks.
gruß
andre
In dem Thread http://forum.fhem.de/index.php/topic,32652.msg317190.html#msg317190 ging um Homebridge, iOS, Siri,... Nur um die Syntax für die Einbindung von longpoll zu erfahren, will nix unnützes installieren. Im Grunde ist ja das was ich brauche im FHEM schon vorhanden.
Zu Blender: Beim Import der 3DS-Datei in Blender habe ich auch versucht, einige Dinge nachzuarbeiten. Blender ist hier aber recht umfangreich und sicher nicht in 5min erlernt. Ich hab ihn daher nur als Konvertierungstool verwendet. Hier im Thread wurde ja schon auf SweetHome3D hingewiesen. Wie geschrieben habe ich mein (zukünftiges) Haus in ArconElco geplant, was (offiziell) nicht ganz günstig ist.
Arcon Eleco verwende ich seit vielen Jahren...
LG
pah
es ging nicht darum etwas unnützes zu installieren sondern um ein ziemlich komplettes beispiel wie man jsonlist und longpoll von node.js aus verwenden kann.
du kannst natürlich gerne auch selber alles zusammen suchen statt zu fragen.
Anbei ein wenig unsortierter Code, um per weblink einen TreeJS-Bereich einzubinden, der ein Modell langsam rotierend anzeigt. Die Verzeichnisse 3d und threejs gehen nach fhem/www. Die Datei 3d/fhem.conf enthält die Konfiguration für zwei Dummies und den ThreeJS-weblink dazu. Der Pfad in letzterem muss entsprechend angepasst werden. Wenn alles funktioniert hat, gibt es einen neuen Raum "ThreeJS", in dem oben die beiden Dummies und darunter das 3D-Modell angezeigt werden. Einer der Dummies (td1) hat verschiedene Werte, die man anklicken kann, woraufhin sich die vertikale Position der grünen Box verändert. Dafür wird die Funktion FW_myThreeJs3DviewUpdateLine() bei FW_widgets registriert. In init() wird dann noch der longpollfilter ein wenig aufgeweitet (.*), damit alle Events ankommen, hier könnte man bestimmt ansetzen wenn optimiert werden soll.
Den Code habe ich aus ThreeJS Demos abgeleitet, er ist sicher nicht schön, aber zumindest ein funktinierendes Demo, aus dem man das ein oder andere vielleicht wiederverwenden kann. Wie man longpoll so nutzt, dass nicht alles explodiert, lässt sich sicher besser aus Andres Tipp ableiten.
Hoffentlich habe ich alle relevanten Dateien erwischt, wenn was fehlen sollte oder nicht funktiert, sag Bescheid.
Usability spielt keine Rolle, oder wie ?
Es gilt immer: Form follows function. Und da muss man klar sagen, dass die Bedienung innerhalb einer Pseudo-3D-Umgebung keinerlei Vorteile gegenüber einer zweidimensionalen Anzeige bietet.
LG
pah
Die Aussage ist sicher richtig, aber stimmt der Kontext? Wer es nicht cool findet oder für sich einen Vorteil darin sieht, seine Wohnung als dynamisches 3D Objekt im Floorplan zu haben, lässt es. Andererseits kommt man beim Spielen mit den Möglichkeiten immer wieder auch auf Sinnvolles. Aber wem sag ich das...
Hallo,
'tschuldigung dass ich mich einmische, aber das war mal mein Post :) :).
Also 3d ist eine schöne Spielerei, deswegen hatte ich das auch angefangen. Allerdings hat das auch einen (bzw. mehrere) sinnvolle Nutzen.
Wenn ich mein Haus verlasse, sehe ich auf einen Blick wo ich noch hinrennen und die Fenster bzw. Türen zumachen muss.
Dass ist in 3d intuitiv(er), weil es halt aussieht wie in echt. Hilft bei der Orientierung und bei der Entscheidung (aha, nur im Obergeschoss Fenster offen, alles gut)
Deswegen verwendet man solche Techniken ja auch um im Ernstfall (z.B. Feuer) Fluchtwege zu zeigen etc.
Klar geht das irgendwie auch in 2d aber halt nur 2.-best :).
Ich lass dass Haus nicht von selbst drehen, sondern drehe oder zoome per Maus wohin ich will.
Im Prinzip reicht die Aktualisierung der "Zustände" beim Aufrufen des Modells, ansonsten kann man z.B. x-minütlich aktualisieren (stört die Netzlast quasi nicht, ist ja nur solange man diesen Screen hat).
Dann war früher noch mal die Frage nach Apples IOS - Devices und threejs. Geht inzwischen alles, getestet am Iphone 4s u. 5 sowie am Ipad 2 u. 3. und auf Android Devices, am PC sowieso !!!
Bei IOS war das etwas langsam, v.a. im Fernzugriff (mit dem Modell aus Sweethome3D), wenn man auf die Details der einzelnen Zimmer verzichten kann und das Haus und Garage nur als Quader in threejs programmiert, dann geht das pfeilschnell auch per VPN / Fernzugriff; schaut halt etwas einfacher aus. Ich habe dann einfach 2 Menuepunkte gemacht, schön und schnell für Heimzugriff, nicht so schön und trotzdem schnell für Fernzugriff.
Wenn Interesse besteht, kann ich wieder mal ein Filmchen einstellen, allerdings bin ich erstmal 2,5 Wo weg.
ich hab's....
folgende js-Datei wird in meiner HTML-Datei, welche die 3D-Objekte erstellt eingebunden. Durch Aufruf der Methode FW_longpoll() wird das Longpoll aktiviert und somit die Methode FW_doUpdate3D() registriert, welche bei jeder Zustandsänderung des Sensors durchlaufen wird (Kurzfassung aus fhemweb.js). Die 3D-Objekt, welche sichtbar/unsichtbar geschaltet werden sollen, befinden sich in einer "Map". Im doUpdate3D() werden sie anhand der ID des Sensor aus der Map gelesen und je nach Schaltzustand ein oder aus geblendet.
/*************** LONGPOLL START **************/
var FW_pollConn;
var FW_curLine; // Number of the next line in FW_pollConn.responseText to parse
var FW_leaving;
var isIE = (navigator.appVersion.indexOf("MSIE") > 0);
var isiOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/);
function
log(txt)
{
if(typeof window.console != "undefined") // IE
console.log(txt);
}
function
addcsrf(arg)
{
var csrf = document.body.getAttribute('fwcsrf');
if(csrf && arg.indexOf('fwcsrf') < 0)
arg += '&fwcsrf='+csrf;
return arg;
}
function
FW_doUpdate3D()
{
if(FW_pollConn.readyState == 4 && !FW_leaving) {
FW_errmsg("Connection lost, trying a reconnect every 5 seconds.", 4900);
setTimeout(FW_longpoll, 5000);
return; // some problem connecting
}
if(FW_pollConn.readyState != 3)
return;
var lines = FW_pollConn.responseText.split("\n");
//Pop the last (maybe empty) line after the last "\n"
//We wait until it is complete, i.e. terminated by "\n"
lines.pop();
var devs = new Array();
for(var i=FW_curLine; i < lines.length; i++) {
var l = lines[i];
var d = l.split("<<", 3); // Complete arg
if(d.length != 3)
continue;
//objectList wird in der HTML-Datei mit den 3D-Objecte gefüllt
//<sensorID> : <3D-Object>
//Bsp: objectList["HMW_LC_Sw2_DR_LEQ0116953_04"] = lampe;
if(objectList[d[0]])
{
if (d[1] == 'on')
objectList[d[0]].visible = false;
if (d[1] == 'off')
objectList[d[0]].visible = true;
}
}
// reset the connection to avoid memory problems
if(FW_pollConn.responseText.length > 300*1024)
FW_longpoll();
}
function
FW_longpoll()
{
log("Connecting...");
FW_curLine = 0;
if(FW_pollConn) {
FW_leaving = 1;
FW_pollConn.abort();
}
FW_pollConn = new XMLHttpRequest();
FW_leaving = 0;
//Wenn die HTML-Datei direkt im Floorplan integriert ist, kann
//der Pfad der Geräte dynamisch aus top.document.location.pathname
//gebildet werden.
//Lesen des Pfades über top.document, falls die JavaScript in einer
//eingebetter Webseite gerufen wird.
var query = top.document.location.pathname+"?XHR=1&inform=type=status;filter=.*;×tamp="+new Date().getTime();
//Fest codiert für den Test, wenn HTML-Seite "standalone"
//query = "/fhem/floorplan/LCARS_EG?XHR=1&inform=type=status;filter=.*;×tamp="+new Date().getTime();
query = addcsrf(query);
FW_pollConn.open("GET", query, true);
//FW_doUpdate3D: JavaScript-Function, welche bei Änderung gerufen wird.
FW_pollConn.onreadystatechange = FW_doUpdate3D;
FW_pollConn.send(null);
}
window.onbeforeunload = function(e)
{
FW_leaving = 1;
return undefined;
}
Zum besseren Verständnis erhält das Script nur das wirklich nötigste. Es ist z.B. nicht möglich, Objekte je nach Schaltzustand auszutauschen, usw.
Achja: Ziel der 3D-Darstellung soll es nicht sein, darin irgendwas zu schalten. Es dient nur der Visualisierung. Das 3D-Model ist ein LCARS-Layout eingebunden.
Funktioniert das auch für mehrere 3D-Views auf einer Seite? Und hast Du einen Screenshot deines LCARS Interface, den Du teilen möchtest (mit 3D-Objekt nicht völlig off-topic)?
Das sollte auch für mehrer 3D-Views funktionieren. Nach meinen bisherigen Verständnis muss man den Java-Script-Code für das Longpoll in jede HTML-Seite einbinden. Was aber sein kann, das FHEM irgendwann an seine Grenzen stößt, wenn zu viele Clients registriert sind - nur eine Vermutung.
Das Aussehn der LCARS-Oberfläche habe ich hier aus dem Forum. Einfach mal nach LCARS suchen. Meine Oberfläche schaltet aktuell nur eine Homematic-Relaise und ist noch sehr leer. Es fehlt noch das reale Haus drumrum. Den gesamten Aufbau (Programmierung) incl. SVG und WebFont findest du unter http://www.fhemwiki.de/wiki/Floorplan_im_LCARS_Design (stammt von mir :-) ).