So, fast 30 Tage später bin ich etwas schlauer. Eigentlich nur mit viiiieeeelll probieren, nachlesen in Html und anderen Foren. Aber auch die Initialtips von Paresy sind schon sehr hilfreich wenn man die Sache richtig liest und sich gut überlegt. Vorneweg… mein Lösungsansatz ist sicher für viele Javascript/HTML oder sonstige Scripter wohl ein Horror. Ich bin mir sicher, dass es bessere Befehle oder eine einfachere Art und Weise gibt um das von mir Gewollte zu realisieren. Da mir aber niemand etwas Besseres lieferte poste ich hier einfach mal meine Lösung für meine Anforderungen. Wer also das sowieso viiel besser und anders gemacht hätte der hätte sich am besten gemeldet als ich die Frage gestellt hatte oder kann die Verbesserungen gerne auf Nette Art und Weise mir hier aufzeigen.
Meine Anforderung
„Auf dem Floorplan zbsp das Bild einer Leuchte platzieren welche den aktuellen Zustand anzeigt (ein.jpg wenn an, aus.jpg wenn aus) und bei einem Klick darauf den Zustand des Gerätes wechselt“
Um das zu realisieren ist es zuerst einmal wichtig für jede Variable die Ihr updaten möchtet einfach mal entsprechend dem „Label-Beispiel“ von Paresy dies mit der entsprechenden Variablen ID erstellen:
<div ips-variable-id="32505" ips-variable-label="Lampe Badezimmer: " style="top: 105px; left: 400px;" class="variable"></div>
32505 ist dabei bei mir die Objekt-ID für die Statusvariable meiner Badezimmerlampe welche über Möller/Eaton geschaltet wird. Bei euch ist das natürlich eine andere ID. Wichtig entgegen dem Label-Beispiel gibt es keine Beschriftung für diesen Div-Tag, also auf der HTML-Seite ist das Ding durchsichtig und dient nur dazu, dass wir von der Statusvariable über das Script jeweils den aktuellen Zustand erhalten.
Dann fügen wir des Weiteren den Button/Lampenplatzhalter hinzu mit:
<button id="LAEGBL" data-dojo-type="dijit.form.Button" style="top: 400px; left: 410px;" class="button">
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
ips.GetValueBoolean(32505).then(
function(data){
if(data==true)
ips.MXC_SwitchMode(55450, false);
else
ips.MXC_SwitchMode(55450, true);
},
function(err){
alert(err);
}
);
</script>
</button>
Dieser ist dann natürlich auf dem Floorplan ersichtlich und muss mit dem top und left Parameter an den richtigen Ort „gestellt“ werden. Für das Positionieren empfehle ich am Schluss, wenn Ihr das Icon der Lampe seht euch an die richtige Position heranzutasten. (Auch dafür gibt es vermutlich ein Programm womit die Positionierung einfacher zu bewerkstelligen ist) Wichtig ist hier - es wird wieder die Statusvariable geprüft ob das Licht bereits an ist oder nicht und entsprechend der Befehl für das Ein/Ausschalten einer Lampe über eine Möller/Eaton Instanz ausgeführt. Wenn Ihr FS20 oder anderes verwendet gehört hier einfach der entsprechende Befehl hin. (Wie FS20_Switchmode etc.)
So und nun das wichtigste… der Code welcher ausgeführt wird wenn alle 10 Sekunden im Hintergrund die IPS-Daten geladen und im Floorplan angezeigt werden sollen:
if(data != "An" && node.getAttribute("ips-variable-id") == 32505)
dojo.byId("LABZHL").innerHTML = "<img src='../img/Glühbirne Aus_64.png' width='20' height='20' alt='Lampe Badezimmer Ein'>";
else if(data == "An" && node.getAttribute("ips-variable-id") == 32505)
dojo.byId("LABZHL").innerHTML = "<img src='../img/Glühbirne_64.png' width='20' height='20' alt='Lampe Badezimmer Aus'>";
Wenn Ihr den Code oben 1:1 so kopiert und nicht anpasst müsst ihr im Webverzeichnis wo der Floorplan sich befindet ein Verzeichnis mit dem Namen img erstellen und dort ein Lampenbild mit dem Namen „Glühbirne Aus_64.png“ und „Glühbirne_64.png“ reinkopieren damit etwas angezeigt wird.
—> Was habt Ihr nun… auf dem Floorplan, da wo eure Lampe hängt ein Bild einer Lampe welches je nach dem Zustand in oder aus ist. Zudem könnt Ihr auf dieses Bild klicken… und die Lampe schaltet Aus oder Ein.
Ehrlich gesagt es braucht schweine viel Zeit wenn Ihr wirklich viele Lampen auf diese Art und Weise platzieren und steuern wollt. Ich rate euch wenn Ihr mit dem Internetexplorer arbeitet in den Optionen das Anzeigen von Scriptfehler zu aktivieren, da Ihr sonst Fehler in der Seite haben könntet und nichts geht mehr und keiner weiss warum. Der Safari zum Beispiel zeigt von den Fehlern so gut wie nichts.
Je mehr man mit dem Floorplan macht… umso eher wird einem klar, dass dies fast die Beste Übersichtsart für ein Haus ist. Meine Frau will nur noch den Floorplan und auch ich arbeite nur noch mit dem Floorplan. Sind Fenster offen zeigt es mir diese sofort auf dem Floorplan an. Genauso wie ein viereckiger Balken der grün angezeigt wird wenn der Alarm deaktiviert ist oder rot wenn er aktiviert ist. Die Vorteile sind klar, auch ein aussenstehender kommt mit dem Floorplan zurecht. Übersichtlichkeit wie Sie besser nicht sein könnte, man weiss genau wo ein Problem zu suchen ist (Fenster Wohnzimmer ist offen… sagt ja was… aber ich habe zum Beispiel 3 Fenster im Wohnzimmer, auf dem Floorplan sehe ich es genau)
Ich hänge noch ein kleines Illustrationsbild an, einfach nur vom Garagenteil… damit mich niemand besucht und wegen dem schlechten Code verhaut.
Allg. Nachteile? Naja also sicher ist die Aktion „Alarm deaktivieren“ kommt nicht auf den Floorplan… sonst kann ja auch ein Einbrecher auf einfach Art und Weise diesen deaktivieren.
Technisch? Bei den ersten 10 Komponenten hatte ich keine Probleme. Mittlerweilen wächst der Floorplan andauernd. Ich frage aktuell etwa 30 Variablen ab… und hier merkt man es nun - die Sache wird zum einen etwas langsam und mit der Zeit fehlt auch der Platz auf dem Floorplan. Man muss sich also doch etwas beschränken und bei der Performance… da wäre ich um Tips froh… ich habe den Intervall für die Variablenabfrage bereits auf 20s erhöht. Aktuell möchte ich die Anzahl Threads in IPS erhöhen, mal schauen was das bringt. Ich muss zudem erwähnen, der Floorplan wird bei mir als HTML-Box ins Webfront integriert. Somit habe ich alle Vorzüge auf einmal! Vielleicht wird die Sache dadurch aber auch schneller langsam. Es klappt auf jedenfall einwandfrei…
Einfach Cool, man klickt auf ein Kamerasymbol auf dem Floorplan und sofort wird das Bild der Kamera über DHTML angezeigt und wieder ausgeblendet…! Das löst man übrigens ähnlich wie das dynamische Ersetzen vom Lampenbild. Toll daran, das Bild der Kamera wird dabei über den Floorplan gelegt, man braucht also nicht mehr Platz! Sobald man es ausblendet steht der Floorplan wieder zur Verfügung. Bewegung im Wohnzimmer, das Symbol leuchtet auf und verschwindet wieder etc.
