[Web] Gebäudegrundriss anzeigen / Farbe ändern

[te one]

Nabend liebe Community,

ich sitze vor dem nächsten Projekt: Diesmal möchte ich per Webseite einige Dinge steuern können. Insbesondere Licht und ein paar Steckdosen werden es sein (Steckdosen hauptsächlich für Festplatten der automatischen Datensicherung Nachts).

Die Ansteuerung läuft über einen kleinen Linux-PC auf dem ein Apache läuft. Dann werde ich mir eine PHP-Library schreiben um alle einzelnen Dinge ansteuern und abfragen zu können. Soweit werde ich das wohl alles hinbringen.

Dann kommt es zum Layout der Seite und das ist bei mir immer ein leidiges Thema
Und zwar dachte ich an die Darstellung eines Grundrisses wobei sich der Hintergrund dynmamisch anhand der Sensoren ändern soll (z.B. soll der Raum in gelb dargestellt werden, wenn das Licht an ist). Steckdosen z.B. grün, wenn an ...
Per Klickt auf einen Raum/Steckdose/... könnte man dann umschalten.

Wie handle ich das am besten? Schick wäre es das ganze per Ajax oder so nachzuladen damit man keinen Seitenrefresh braucht. Dann zB das ganze Bild neu zu laden, wäre aber auch wieder Quatsch, es soll sich ja eigentlich nur die Füllung ändern.

Bin mal gespannt welche Ideen ihr so habt. Habe sonst recht wenig mit solche Design-dingen zu tun und deshalb nicht sehr viele Ideen.

Danke schonmal

 

[Lawnmower]

naja die einzelnen Räume z.B. per Div oder Bild darstellen und dann bei diesen die Hintergrundfarbe per Javascript ändern.
Sollten die Räume nicht quadratisch sein könnte man es auch mit einer Grafik lösen die im Div Hintergrund eines Divs liegt und darüber ist ein halbtransparantes Bild (für Licht an/aus), wenns Licht an machst Transparenz z.B. 80% und wenn aus 0%.
Das Geschoss bzw der Umriss dann per Grafik per Hintergrund in einem weiteren Div.

Und sonst gäbe es ja noch die Möglichkeit per SVG und Co.
Edit: Zu langsam die Idee mit SVG

 

[DJND]

Hm... wie wäre es mit Vektorgrafik, die du per SVG erzeugst? Die Änderung von Farben oder ein paar Linien wäre somit dynamisch machbar ohne überhaupt etwas nachzuladen. Raphael ist ein schönes Beispiel.

 

[Daaron]

Jep, ich wäre auch für eine Lösung per SVG in Kombination mit etwas AJAX-Code. Du brauchst eine Hand voll separate PHP-Scripte:
1.) deinen "index.php", der die nackte SVG der Wohnung darstellt. Die rufst du einmalig im Browser auf.
2.) eine "getObjectStatus.php". Die Index ruft dieses Script regelmäßig per AJAX auf. Rückgabewert des Scripts ist dein Objekt-Status als JSON-String. Das Script kannst du natürlich kreativ mit Parametern erweitern. Ohne Parameter wird ein kurzer JSON-String generiert, der alle aktuellen Zustände in Kurzform zurückgibt. du könntest da auch ein ?objectID=1 dran hängen, um den präzisen Status von Objekt 1, meinetwegen einer Lampe, für einen Hover-Tooltip abzufordern.... Lampe 1 brennt und ist auf 35% gedimmt...
3.) evtl. eine setObjectStatus.php, die von einem OnClick-Handler in der SVG aufgerufen wird. Klick eine Steckdose an, und sie schaltet ab... sofern technisch möglich.

Kann man natürlich auch alles in eine PHP-Datei pferchen, aber ich würd das eher unübersichtlich finden.

 

[te one]

Habe mir tatsächlich mal wieder JS/Ajax angetan und es funktioniert
Grafik ist aktuell per SVG eingebunden.

Ich lade mir eben Sweet Home 3D runter um möglichst einfach SVGs erstellen zu können. Bin mal gespannt ob es damit was wird...

edit: Hat sehr gut geklappt. Als SVG exporiert, alle unnötigen Teile entfernt und dann lade ich per JS die Farben und opacitys. Sieht echt schick aus