schaltbare Eigene Seite / Grundriss / EIB-Switch / Refresh

djtark · 8. Oktober 2011 um 20:21

Hallo zusammen,

ich habe mich endlich an das Thema „eigene Seite“ gewagt.

ZIEL/SOLL:
Auf einem Grundrissplan(siehe Anhang eigeneseite2)
will durch drücken der Pins unterschiedliche Scripte/Schaltvorgänge anstoßen,
Weiter soll der jeweilige Status angezeigt werden.

IST:
Mit 1-2 Beispielen habe ich das teil-erfolgreich versucht umzusetzen.

-Html/php Seite mit Grafiken in verschd. Ebenen
-Status-abhängige Anzeige der jew. Grafik
-Schalten bei Klick/Touch auf Grafik-Map funktioniert

PROBLEME:
Bei jedem Refresh der Seite oder des Webfronts - auch beim Neuladen usw.
wird das Script bzw. der Switch immer ausgeführt.
So zusagen selbständiges Schalten…

Habt Ihr ne Idee wie ich das umgehen kann ?

Siehe Anhang eigeneseite1,
der relevante Code:

</head>

<body background=„test%20png.png“>
<div id=„Layer1“ style=„position:absolute; left:1112px; top:196px; width:37px; height:53px; z-index:1“> <img src=„stecker_<?php $status=GetValueBoolean(16369); echo ($status == „true“)?‚off‘:‚on‘; ?>.png“ alt="<?php echo $status==„true“?‚yes‘:‚no‘; ?>" border=„0“ usemap="#Map" />
<map name=„Map“>
<area shape=„circle“ coords=„15,34,32“ href="<?php EIB_Switch(27381,!GetValueBoolean(16369)); ?>">
</map>
</div>
<div id=„Layer2“ style=„position:absolute; left:1068px; top:342px; width:37px; height:53px; z-index:1“> <img src=„stecker_<?php $status=GetValueBoolean(16369); echo ($status == „true“)?‚off‘:‚on‘; ?>.png“ alt="<?php echo $status==„true“?‚yes‘:‚no‘; ?>" border=„0“ usemap="#MapMap" />
<map name=„MapMap“>
<area shape=„circle“ coords=„15,34,32“ href="<?php EIB_Switch(27381,!GetValueBoolean(16369)); ?>">
</map>
</div>
</body>
</html>

Herzlichen Dank, Gruss

Johann

pleibling · 8. Oktober 2011 um 22:32

Zwar OT, aber ich frage trotzdem mal :).

Verrätst du mir mit welchem Programm du die Grundrisse gemacht hast? Ich habe auch eine GUI gemacht mit Grundriss (jedoch für iPad Blog | leibling.de » iPad GUI erstellt für die Hausautomation) - da sehen die Grundrisse jedoch lange nicht so plastisch aus wie bei dir, sind echt schick :).

djtark · 8. Oktober 2011 um 23:26

…klar, wenn Du mir verrätst wie Du auf Deinen Seiten das mit den Schaltbefehlen gemacht hast !!!

Die Grundrisse basieren auf Autocad-Plänen unseres Architekten, diese habe ich mit Autodesk® 3ds Max® perspektivisches 3D umgebastelt.

p.s. Mit viel (mehr) Zeit, Geduld und Spucke - sowie den richtigen Textur-Libraries oder Kontakten mit solchen Resourcen lassen sich ganz andre Sachen anstellen:

siehe Anhang(copyright: der Kollege B. Solbach - Gruss )… Bis dahin ists noch ein weiter Weg…

pleibling · 9. Oktober 2011 um 00:13

Sieht echt genial aus.

Ich habe mir die GUI selber gebaut (php / JavaScript / Ajax / iPad Framework / mysql), diese basiert auf ipsHomecontrol - wird aber nicht in der alten Version eingepflegt (wird nicht mehr weiter entwickelt von mir, nur noch von Homebrace), sondern nur kommerziell über Homebrace vertrieben.

Ist also so nicht zu nutzen, geht nur mit ipsHomecontrol / MyBrace.

Im Prinzip ist das aber auch so einfach zu bauen. Ich habe im ipsHomecontrol einfach eine getvalue.php mit der ich die Statusmeldungen holen kann. Mit diesen Werten werden alle Sekunde einfach die Platzhaltericons aktualisiert. Beim onklick auf das icon wird dann ein entsprechendes Ereignis ausgeführt.

im Prinzip nicht schwer ;).

paresy · 10. Oktober 2011 um 10:09

Du musst die Befehle per JavaScript im Hintergrund abschicken. Und jemand auf der Gegenseite muss sie auch empfangen. Entweder du baust dir da etwas selber, oder nutzt sowas hier: http://www.ip-symcon.de/forum/f13/ip-symcon-json-rpc-schnittstelle-10537/

paresy

Boui · 10. Oktober 2011 um 11:01

Das ist mal ne feine Arbeit und ehrlich, ich habe selten eine kompaktere Wohnung gesehen. Zum Befüllen der Waschmaschine die Tür offen lassen müssen, ist echt mal ne Alternative.

Respekt.

djtark · 11. Oktober 2011 um 10:29

Ansatz hab ich verstanden, nur hab ich gar keinen Schimmer wie das umzusetzen ist. hast Du ein Codebeispiel in Deiner unerschöpflichen Sammlung ?

Die gefundenen Themen (http://www.ip-symcon.de/forum/f13/man-java-heraus-ip-symcon-variablen-zugreifen-13204/ usw.) hören auch genau an dieser Stelle „Beispiel gesucht“ auf…

Hatte erst gedacht dass ích es mit Links und/oder Hilfsvariablen umgehen kann, dass geschalten wird… Ist das nen Versuch wert ?

Am Rande:
Kannst Du mir interessehalber erklären warum das Schalten sich bei mir so verhält ?

vg
Johann

ernie · 11. Dezember 2011 um 11:02

Hallo,

ich bin auch gerade dabei, über eigene schöne 3D Grafiken nachzudenken …

Eigentlich bin ich ja gegen Cloud / Online-Anwendungen und will alles auf meinem eigenen Rechner haben … Aber kaufen und einarbeiten will ich mich in Autodesk 3D Max so richtig eigentlich auch nicht.

Habt ihr euch schon mal die Autodesk Homestyler - Free Home Design Software and Interior Design Software von Autodesk angeschaut? Komplett umsonst und legal …

Den Screenshot (leider natürlich nicht meine eigene Wohnung habe ich in 3 Minuten aus der Gallery rausgesucht und einfach mal auf 3D Ansicht geklickt …

ernie · 18. Dezember 2011 um 14:05

ich habe noch was interessantes gefunden:

Raumplaner : Apfel(B)log

Da sind u.a. auch einige 3D Planer aufgeführt.

Roomle sah auf Anhieb auch gut aus; habe ich mir aber noch nicht angeschaut …

Gruß,

ernie

Hagbard235 · 18. Dezember 2011 um 20:57

Wäre da nicht vielleicht was mit HTML-Image-Maps zu machen?
SELFHTML: HTML/XHTML / Grafiken / Verweis-sensitive Grafiken (Image Maps)

Hab nicht länger drüber nachgedacht, nur so ne spontane Idee`??

ernie · 19. Dezember 2011 um 15:50

Ist das nicht schon eine Image-MAP ???

djtark · 19. Dezember 2011 um 16:00

doch, das ist bereits eine Image-map bzw. / Mouseover.

…wird Zeit, dass Weihnachten ist und ich viel Zeit für IPS habe

Hagbard235 · 20. Dezember 2011 um 08:45

ja, hab ich übersehen, weil ich nur nach den links überflogen hab

Ich würde das PHP aus den Area-Tags rausnehmen und dafür jeweils zum testen eine eigene HTML/PHP-Datei anlegen, deren Link ich dann da eintragen würde. Da PHP ja SERVERSEITIG ausgewertet wird werden natürlich die Scripte schon beim Aufbauen ausgeführt! Wenn du sie in die eigene Datei auslagerst werden sie aufgerufen, wenn du die neue Seite aufrufst. Wird nicht schön sein, musst etwas spielen mit „in eigenem Tab laden“ oder in Fenster oder sowas, damit dir das Webfront nicht wegfliegt.

Ich würde es im Fenster laden und gleich nach dem Ausführen das Fenster wieder schließen. Ist aber nicht bei jedem Browser erlaubt. ( window.close())

pleibling · 20. Dezember 2011 um 21:25

Kannst ja auch ein JavaScript Ereignis aufrufen, welches eine Funktion aufruft, die im Hintergrund ausgeführt wird. So gibt das kein Refresh der Seite, und am besten die Bilder dann auch direkt aktualisieren.

Am besten dann periodisch die Bilder aktualisieren - vielleicht geht das aber auch noch mit Soap schicker, dann hätte man weniger Traffic/Last auf dem System.

So mache ich das mit meiner iPad Gui (ohne Soap) ;).

Ich habe es so gemacht, das ich ein Hintergrundbild habe und auf dem Bild die Ions positioniere.

Mit CSS kann man dann schick die Statusmeldungen und Bilder im Nachhinein manipulieren.

z.B. <img srv=lampe_on.png id=12345> und wenn du dann das Bild ändern willst, dann einfach z.B. document.getElementbyId(‚12345‘).src=lampe_off.png

Auch Textfelder kann man einfach ändern, z.B. <input type=text id=11111 value=‚Es ist 15°‘> und dann document.getElementbyId(‚11111‘).value=‚Es ist 18°‘.

Zusammen mit CSS3 kann man dann schicke Dinge machen wie z.B. Tabellen mit runden Rahmen und Farbverläufen, darin dann die Werte visualisieren und die Tabellen auf der Seite Positionieren.

Hagbard235 · 20. Dezember 2011 um 22:18

Oh, das ist ja interessant, kannst du dafür mal ein Beispiel geben? Ich habe noch keine Möglichkeit gefunden per Javascript IPS-Funktionen aufzurufen. Wie macht man das? Ich kenne nur Funktionen per PHP.

pleibling · 21. Dezember 2011 um 23:33

PHP läuft Serverseitig, Javascript Clientseitig. Ich habe eine Mischung aus beiden - ich habe meine Geräte alle in einer DB (MySQL), aber du kannst natürlich genauso auch die Geräte aus IPS lesen (z.B. Kategorie Wohnzimmer mit allen Geräte abfragen und per Schleife mit PHP dann ausgeben).

Mit der PHP Schleife baust du dann dein Javascript auf.

Z.B. ich habe z.B. einen Raum 123, dann lasse ich mir 3 existierende Geräte ausgeben und diese werden dann direkt als Schalter verwendet.

Hier ein Beispiel für normales schalten (ohne den Schnickschnack oben, Beispiel für Moellerschalter):

schalten.php:
<?php
MXC_switchMode($id, $value);
?>

Das Javascript in der Webgui, das schaltet sieht dann ungefähr so aus:


<script type="text/JavaScript">
function sndReq(url) {
var action;
action = new XMLHttpRequest;
action.open('get', url);
action.send(null);
}
</script>

Und dann einfach die passenden Links in der Seite, z.B. <onclick=„sndReq(schalten.php?id=12345&value=true);“>
oder
<onclick=„sndReq(schalten.php?id=12345&value=false);“>

Im Prinzip rufst du nur eine Schaltseite auf, die das schalten vornimmt. Jedoch wird nicht auf die Seite weitergeleitet, sondern die Seite einfach danach verworfen.

Dadurch aktualisisert sich die Seite nicht. Das bedeutet aber auch, das nun die Statusmeldungen nicht aktualisiert werden - dies must du dann selber machen (siehe oben mit CSS und Javascript Status manipulieren - z.B. Bilder oder Text). Ist im Prinzip recht einfach, aber viel Fleißarbeit und wenn du es wiederverwendbar machen möchtest, dann noch mehr Fleiß ;).

Das ist natürlich alles nur sehr runtergebrochen, aber damit kann man einiges machen - schau dir z.B. mal die ipsHomecontrol GUIs oder die Ipad GUI an ;).

Hagbard235 · 21. Dezember 2011 um 23:55

na dann schaltest du ja doch per php und nicht per javascript, das war alles was ich wissen wollte

pleibling · 22. Dezember 2011 um 16:40

Genau, aber wenn du die urls vom Webfront nimmst oder Soap Sockets per Funktion verwendest, dann kannst du auch direkt mit dem JS schalten.

Meine Technik ist halt noch aus Zeiten vor dem Webfront und quasi weiterrecycelt ;).

Hatte keime Zeit und Lust das bestehende Rad neu zu erfinden, würde ich nochmal neu entwickeln, würde ich Soap einsetzen.

KrasserMann · 23. Dezember 2011 um 17:37

Hi, würd mich an das Thema gern ranhängen.

Habe versucht die obigen Informationen mal umzusetzten und bei mir scheitert es daran das das Javascript nicht ausgeführt wird wie es mir scheint.

Die OnCklick Sache macht irgendwie gar nix.

Vielleicht sieht jemand von euch warum. JavaScript ist im Browser aktiviert.

Dargestellt wird die Seite einwandfrei und der Quellcode im Browser schaut auch gut aus.

<?php

	print "<html>";
	print "<head>";
	print "<script language=\"JavaScript\">";
	print "<!--";
	print "function sndReq(url) {";
	print "var action;";
	print "action = new XMLHttpRequest;";
	print "action.open('get', url);";
	print "action.send(null);";
	print "}";
	print "//-->";
	print "</script>  ";
	
	print "</head>";




	print "<body style=\"background-image:url(/user/testfront/maki-wz.png); background-repeat:no-repeat;\">";

	


	print "<div id=\"Layer1\" style=\"position:absolute; left:350px; top:200px; width:37px; height:53px; z-index:1\"> ";

	

	$status=GetValueBoolean(14711); 

	if ( $status ) {
		
		print "<button type=\"button\"> <img src=\"lampe_on.png\" onClick=\"sndReq(switch.php?id=33345&value=false);\"> </button>";
		
	} else {

		print "<button type=\"button\"> <img src=\"lampe_off.png\" onClick=\"sndReq(switch.php?id=33345&value=true);\"> </button>";

	}

	print "</DIV>";

	

	print "</body>";
	print "</html>";
?>

<?php
	EIB_switch($id, $value);
?>

Vielen Dank

Gruß Martin

KrasserMann · 25. Dezember 2011 um 13:56

UPDATE:

Der Weihnachtsmann hat mir ein wenig geistige Eingebung gebracht gestern und nun läufts.

Dieser Code ermöglicht es ein Icon auf einem Hintegrund zu plazieren und mit Klick auf das Icon eine IPS Instanz zu Togglen.

Der Refresh des Icons ist nun noch meine Aufgabe. Mal sehen och ich die CSS geschichte da umsetzen kann.

TEST.PHP

<?php

	print "<html>
";
	print "<head>
";
	print "<TITLE>Example of onClick Event Handler</TITLE> 
";
	
	print "<script>";
	
	print "	function sndReq(url) {";
	
	print "		var action;";
	print "		action = new XMLHttpRequest;";
	print "		action.open('get', url);";
	print "		action.send(null);";
	//print "		alert(url);";
	
	print "	}";
	
	print "</script>";
	
	print "</head>
";




	print "<body style=\"background-image:url(/user/testfront/maki-wz.png); background-repeat:no-repeat;\">
";

	

	print "<div id=\"Layer1\" style=\"position:absolute; left:350px; top:200px; width:37px; height:53px; z-index:1\">
";

	

	$status=GetValueBoolean(14711); 

	if ( $status ) {
		
		print "<button type=\"button\" onClick=\"sndReq('toggle.php?id=33345');\"> <img src=\"lampe_on.png\" > </button>
";		

	} else {

		print "<button type=\"button\" onClick=\"sndReq('toggle.php?id=33345');\"> <img src=\"lampe_off.png\" > </button>
";		

	}

	print "</DIV>
";

	

	print "</body>
";
	print "</html>
";
?>

toggle.php

<?php
// print $id;
// print $value;
	EIB_switch((int)$id,  !GetValue(IPS_GetStatusVariableID((int)$id, "Value")));
?>

Soooooo auf ans werk!

Frohes Fest weiterhin!

Martin