Floorplan anpassen für das Webfront

Bei mir erscheinen die Werte nicht?

Wert einlesen:

$Temp = GetValue(27014 /*[1-EG\Esszimmer\Heizung\HM-CC-TC:1\TEMPERATURE]*/);

$ausgabe.='<div style="position:absolute; left:80px; top:250px; z-index:1";
             <p>'.$Temp.'°</p>  </div>';

Es erscheint aber kein aktueller Wert der Temperatur. Was mache ich falsch?

Danke
Jan

Syntaxfehler:

  1. im Posting nicht in PHP-tags gesetzt,
  2. PHP-Code für String nicht korrekt:

Vorschlag:


$ausgabe.='<div style="position:absolute; left:80px; top:250px; z-index:1"><p>'.$Temp.'°</p> </div>';

oder


$ausgabe.='<div style="position:absolute; left:80px; top:250px; z-index:1">'
                .'<p>'.$Temp.'°</p> </div>';


(nicht getestet ;) )

Hab das „Problem“ gelöst.

$ausgabe.='<div style="width:100x; height:100px; position:absolute; left:450px; top:80px; z-index:1"><span style="color:black; font-weight:bold"><p>'.$EZ_Temperatur.'°C</p></span></div>';

Mein Webfront hat einen weißen Hintergrund. Die Schriftfarbe auf schwarz gesetzt, schon sehe ich den Text. :slight_smile:

Wünsche allen Frohe Weihnachten
Gruß
Jan

Hallo zusammen,

der Thread hat mich auch zu neuen Taten inspiriert und nun wollte ich euch hier mal mein erstes Floorplan Ergebniss zeigen.
Hab mich dabei auch eher an die Devise weniger ist mehr gehalten und so hat man auch noch genügend Platz für das was eventuell noch kommt Steckdosen, Rolladen, Heizung ect.

Da ich noch zu den jenigen gehör die ein Apple Produkt besitzen wollte ich mal nachfragen ob es nicht doch noch eine Möglichkeit gibt, das ganze auch über Ipad per onclick zu steuern?

Gruß Beni

Floorplan.jpg

Hallo Beni,

womit hast Du Deinen Floorplan erstellt?

Joachim

Hallo Joachim,

den Grundriss habe ich mit Architekt Pro 6 gemacht. Aber da mir die Optik noch nicht so gut gefallen hat, habe ich den
entstanden Grundrissplan genommen und mit Paint.NET an meine Optische Vorstellung angepasst. Den Grundrissplan habe ich eine Ebene hinter den zu erstellenden Floorplan gelegt und so mit den normal zu Verfügung stehenden Zeichentools quasi abgepaust.
Ich habe heute nochmal etwas an dem Floorplan gefeilt und noch ein paar Einrichtungsgegenstände mit rein gebracht, die Objekte sind auch aus Architekt Pro 6 und mit Paint.NET bearbeitet um eine gewisse Durchsichtigkeit der Objekte zu bekommen, damit sie nicht zu sehr von dem funktionellen ablenken. Mir gefällt es so mittlerweile echt gut und es passt sich auch der restlichen Webfrontoptik gut an.

Gruß Beni

Grundriss_Webfront.jpg

Sehr gute Idee mit der Halb-Transparenz.
Werde das übernehmen wenn ich darf. - und wieder Lust am WF basteln habe. zzt. ist eher Schifahren angesagt.

gruß
bb

Hi,

da bei uns gerade kein Schnee liegt habe ich mal etwas weiter gemacht an meinem Floorplan :).
Da ich mehrere Chromoflex Empfänger in meiner Wohnung habe wollte ich nun den Status der jeweilligen RGB-Stripes auch auf dem Floorplan wiedergeben, dass Ergebniss sieht jetzt so wie auf dem Bild aus.
Habe dazu auch noch eine gute Seite im I-Net gefunden http://www.colorzilla.com/gradient-editor/ um solche Farbverläufe darzustellen.

Hier mal einen Codeschnipsel von dem Farbverlauf für den Mozilla:

//Receiver Wohnzimmer 104588 Hex

 $ausgabe.='<div style="width:470px; height:470px; position:absolute; left:70px; top:350px; z-index:1;

background: -moz-radial-gradient(center, ellipse cover, rgba('.$Rot_Wohnz.','.$Gruen_Wohnz .','.$Blau_Wohnz.','.$Dimmer_Wohnz.') 0%, rgba(13,20,27,0.0) 70%); /* FF3.6+ */

onclick="dojo.xhrGet({ url: \'user/buttons.php?ts=\' + (new Date()).getTime() + \'&ScriptID='.$IPS_SELF.'&do=RGB1\' })";>

  </div>';

Der Nachteil an der Sache ist leider der, dass mir der Chromoflex-Empfänger nicht seine momentanen Farbwerte zurückliefert was vorallem bei einer Programmauswahl die Sache schwirig macht, ich lass in dem Fall einfach eine Zufallsfarbe anzeigen.
Aber um etwas Farbe und den Status ob ein Empfänger geradeaktiv ist im Floorplan anzueigen reicht es schonmal ;-)!

Gruß Beni

Hallo zusammen,

ich habe noch ein kleines Update, was die Onclick funktion mit dem Ipad angeht, ich kann nur sagen es funktioniert jetzt man muss nur folgenden code so abändern!

//Ausgabe Schlafz Lampe
$ausgabe.='<div style="width:55px; height:63px; position:absolute; left:448px; top:525px;
                 background-image:url('.$BulpSchlafz.'); background-repeat:no-repeat; background-position:center; z-index:1";
                 ontouchstart="dojo.xhrGet({ url: \'user/buttons.php?ts=\' + (new Date()).getTime() + \'&ScriptID='.$IPS_SELF.'&do=Schlafz\' })";
						onclick="dojo.xhrGet({ url: \'user/buttons.php?ts=\' + (new Date()).getTime() + \'&ScriptID='.$IPS_SELF.'&do=Schlafz\' })";>
                  </div>';

Man muss also nur ontouchstart="dojo.xhrGet schreiben und nicht onclick="dojo.xhrGet bzw. hab ich jetzt aber beides drin gelassen, da es mit dem ontouchstart Befehl wieder nicht mit dem normalen Mausklick funktioniert.

So dann bleibt mir jetzt nur noch einen guten Rutsch ins neue Jahr zu wünschen!

Gruß Beni

Hallo,

ich habe da ein grundlegendes Problem, für das ich jetzt sicher 10 Stunden nach Codeschnipseln gesucht habe, und es trotzdem nicht funktioniert.

Im Code von bbernhard wird ja auf das externe Script zum schalten verwiesen:


IF ($_IPS['SENDER'] == 'RunScript') {
      switch ($action)
        {
				case 'FlurInnen':
					IPS_RunScriptEx(53579 /*[Programe\Lichtsteuerung\Lichtsteuerung Schalter]*/, Array("WF" => "WF_Flur"));
				break;

Ich schaffe es auch mit Hilfe des „Basis-Scripts“ soweit, das im Floorplan die Glühbirne anzuklicken ist und das Licht in diesem Fall in meiner Küche auch angeht. Nur lässt sie sich dann nicht mehr ausschalten. Dafür muss in das Script wohl eine Switch Funktion, die ich nicht finde und auch nicht so geschrieben bekomme mit meinen dürftigen Programmierkenntnissen.

Es handelt sich um einen normalen Homematic Schalter. Für meine Versuche schalte ich mit

<?
    HM_WriteValueBoolean(23332 /*[Kueche\Licht]*/, "STATE", true);
?>

Kann mir einer auf die Sprünge helfen ?

Danke vorab.

Hallo stehie,

ich würde es spontan mal so probieren:

HM_WriteValueBoolean(23332 /*[Kueche\Licht]*/, "STATE", !(GetValueBoolean(12345)));

12345 ist dabei der aktuelle Status der Beleuchtung, das Ausrufezeichen davor bewirkt das dieser Wert negiert wird…

Joachim

(Ich habe kein HM, deswegen „Blindversuch“:D)

Vielen Vielen Dank !

Eingebaut und funktioniert perfekt ! Hätte ich blos mal früher gefragt :-/

Grüße !

Hallo Leute,

mein Sohn hat mich heute mit einem tollen Grundplan überrascht, den er mit einer iPhone-App erstellt hat. Nun versuche in diesem Thread (bzw. hier im Forum, denn gefühlt beginnt dieser Thread „mittendrin“) irgendwo den Anfang zu finden…:confused:

Ich gehe mal davon aus, dass dieser Thread hier die Basis für Eure ganzen Wunderwerke ist?

Wie beginne ich am Besten? Wie bekomme ich das Kunstwerk ins Webfront (in paresys Beispiel, das ich hier auch installiert habe ist es ja ein eigener Webserver…

Wäre toll, wenn mir jemand mal sagen könnte wie die ersten Schritte sein müssten…:wink:

Joachim

Hallo,

vielleicht kann ich da jetzt helfen.

Also auf Seite 4 erster Beitrag von bbernhard ist der Code und dadrunter die Beschreibung. Das ist eine andere Basis als in dem anderen Thread, und auch wie auf den ersten 1-2 Seiten dieses Themas…

Aber einzurichten ist sie sehr einfach und es funktioniert auch sehr schnell.

Wenn du einen Grundplan hast, musst du diesen in den floorplan Ordner legen, und im Code ggf. die Größe (Breite und Höhe) in Pixel abändern. Zudem ist auch die Bezeichnung der Plan-Datei einzutragen.

Theoretisch müsste es nach der Einrichtung dann schonmal funktionieren, auch wenn die Glühlampe aus dem Beispielcode dann evtl. etwas fehlplatziert ist, was man durch die Positionsangabe aber leicht ändern kann.

Das sind denke ich mal die ersten Schritte !

Grüße Stefan

Hallo Stefan,

vielen Dank für diesen Tipp!!! Seit Stunden war ich in dem anderen Thread zugange…:frowning:

Funktioniert jetzt mit der ersten Lampe auf Anhieb!

Ich habe versucht hier in dieser Zeile die Größe des Grundplans zu ändern:

$ausgabe.= '<div id="floorplan" style=width:200px; height:150px; position:absolute; left:0px; top:0px; z-index:-1;>';

Aber irgendwie passiert da nichts…:confused:

Muss ich das Bild per Grafikprogramm verkleinern?

Joachim

Hallo Leute,

das Skript von bb ist einfach genial! Vielen Dank für die Idee und insbesondere das Du sie mit uns geteilt hast!

Ich habe immer etwas gegen zu viel copy und paste, deswegen habe ich einige Änderungen an dem Skript vorgenommen die ich Euch nicht vorenthalten möchte.

Zunächst einmal habe ich für die Daten ein Array erstellt:

//*************************************************************************************************************
// Informationen zu den Floorplan-Geräten
global $k_FP_DEVICES;
$k_FP_DEVICES = array(
"Technikraum" => array("Typ" => "Light", "Switchlink" => 42689 /*[Garage\Licht\Licht\Technikraum\Technikraumlicht Schalten]*/, "Statuslink" => 59347 /*[Garage\LOGO Steuerung\LOGO Ausgang 02 Technikraum\Value]*/, "Width" => 50, "Height" => 50, "Left" => 100, "Top" => 180, "Icon" => "Bulb"),
"Werkstatt" => array("Typ" => "Light", "Switchlink" => 12687 /*[Garage\Licht\Licht\Werkstatt\Werkstattlicht Schalten]*/, "Statuslink" => 33786 /*[Garage\LOGO Steuerung\LOGO Ausgang 01 Werkstatt\Value]*/ , "Width" => 50, "Height" => 50, "Left" => 245, "Top" => 120, "Icon" => "Bulb"),
"Garage" => array("Typ" => "Light", "Switchlink" => 11885 /*[Garage\Licht\Licht\Garagen\Garagenlicht Schalten]*/, "Statuslink" => 53176 /*[Garage\LOGO Steuerung\LOGO Ausgang 03 Garage\Value]*/, "Width" => 50, "Height" => 50, "Left" => 170, "Top" => 400, "Icon" => "Bulb"),
"Aussenlicht" => array("Typ" => "Light", "Switchlink" => 17101 /*[Garage\Licht\Licht\Außenlicht\Außenlicht Schalten]*/, "Statuslink" => 42289 /*[Garage\LOGO Steuerung\LOGO Ausgang 05 Außenlicht\Value]*/, "Width" => 50, "Height" => 50, "Left" => 100, "Top" => 50, "Icon" => "Bulb"),
"AussenTemp" => array("Typ" => "Temperatur", "Switchlink" => "", "Statuslink" => 21257 /*[Temperaturen\Außentemperatur\Außentemperatur\Außentemperatur (Schatten)]*/, "Width" => 0, "Height" => 0, "Left" => 245, "Top" => 20, "Icon" => "")
);

Dieses bildet den derzeitigen Stand der im Floorplan integrierte Geräte ab (läuft ja erst seit gestern), sollten weitere Anforderungen kommen, kann man einfach ein weiteres Key - Value Paar hinzufügen…

Hier nun das etwas abgewandelte Skript von bb:

Include "Konstanten.ips.php";
/*
* Add a Categorie, name is free of choice
* Add this Script in this categorie, name is your choice
* Add a Variable (string) with profile ~HTMLBox,
* The ID of the Variable need to be put in $id_Floorplan !!
* Create directory in /Webfront/user/Floorplan/ to pt you own icons and floorplan inside
* maintain directory names in case you use different one
*
* Some credits go to user WGreipl and Horst who publishd the technic of this script/
*/
$id_Floorplan = 20900 /*[Floorplan\Floorplan Garage]*/ ;
$ImgFloorplan = '"user\floorplan\Garage_sw_kl.png"';
//________________________________________________________________________________________

IF ($_IPS['SENDER'] == 'RunScript')
{
      If (array_key_exists($action, $k_FP_DEVICES))
			{
			If ($k_FP_DEVICES[$action]["Typ"] == "Light")
			   {
			   IPS_RunScript($k_FP_DEVICES[$action]["Switchlink"]);
			   }

			}
}

IF (($_IPS['SENDER'] == 'Variable') or ($_IPS['SENDER'] == 'Execute')){
	 // Die Daten für den Grundplan hinzufügen
 	 $ausgabe ='<p>';
	 $ausgabe.= '<div id="floorplan" style=width:200px; height:150px; position:absolute; left:0px; top:0px; z-index:-1;>';
	 $ausgabe.='<p><img src='.$ImgFloorplan.'; border="0"></p> </div>';
		// Das Array durchlaufen
		For ($i = 0; $i < count($k_FP_DEVICES); $i++)
		{
			// Werte einlesen, die für alle Typen erforderlich sind
			$name = (array_keys($k_FP_DEVICES)[$i]);
			$width = $k_FP_DEVICES[array_keys($k_FP_DEVICES)[$i]]['Width'];
         $height = $k_FP_DEVICES[array_keys($k_FP_DEVICES)[$i]]['Height'];
         $left = $k_FP_DEVICES[array_keys($k_FP_DEVICES)[$i]]['Left'];
         $top = $k_FP_DEVICES[array_keys($k_FP_DEVICES)[$i]]['Top'];

			// Spezialbehandlung Typ Licht
		   If($k_FP_DEVICES[array_keys($k_FP_DEVICES)[$i]]['Typ'] == "Light")
				{
				$status = GetValueBoolean($k_FP_DEVICES[array_keys($k_FP_DEVICES)[$i]]['Statuslink']);
				$icon = ($k_FP_DEVICES[array_keys($k_FP_DEVICES)[$i]]['Icon']).(int)$status;
            $iconpath = "\user\\floorplan\\$icon.png";
				$ausgabe.='<div style="width:'.$width.'px; height:'.$height.'px; position:absolute; left:'.$left.'px; top:'.$top.'px; z-index:1";
                 onclick="dojo.xhrGet({ url: \'user/buttons.php?ts=\' + (new Date()).getTime() + \'&ScriptID='.$IPS_SELF.'&do='.$name.'\' })";>
             <p><img src='.$iconpath.' width='.$width.' height='.$height.' border=0</p>  </div>';

				}
         // Spezialbehandlung Typ Temperatur
			elseif($k_FP_DEVICES[array_keys($k_FP_DEVICES)[$i]]['Typ'] == "Temperatur")
				{
				$status = Round(GetValueFloat($k_FP_DEVICES[array_keys($k_FP_DEVICES)[$i]]['Statuslink']), 2);

				$ausgabe.='<div style="position:absolute; left:'.$left.'px; top:'.$top.'px; z-index:1";
             <p>'.$status.'°C</p>  </div>';
				}

		}
SetValue($id_Floorplan,$ausgabe);
}

Die Icons für die Glühlampen werden einfach durch den Status ergänzt, die Icons müssen selbstverständlich einmalig angepasst werden.

Kommt jetzt ein neues Gerät hinzu, einfach eine neue Zeile im Array, und das Aktualisierungsereignis der Variable erstellen (könnte man sicherlich auch irgendwie automatisch machen, muss ich mal schauen…).
Ich habe zunächst einmal die Unterscheidung in die Typen „Light“ und „Temperatur“ vorgenommen, es soll aber weiter gehen… :wink:

Joachim

Hallo Joachim,

hast du das Problem mit der Bildgröße mittlerweile lösen können ?

Sitze leider an einem Laptop und habe keinen Überblick, theoretisch ist das aber schon die richtige Zeile gewesen. Natürlich zusätzlich zur Zeile mit der Zuweisung der Bilddatei. Ich habe keine andere Stelle im Code gefunden die direkt mit dem Image zusammenhängt.

Grüße Stefan

Hallo Stefan,

vielen Dank für Deine Antwort.

Da diese Parameter irgendwie keinen sichtbaren Effekt auf die Größe des Hintergrundes hatten, habe ich das Originalimage einfach mit paint.net etwas verkleinert.

Joachim

Hallo Leute,

je mehr Sensoren und Aktoren man einbindet, um so öfters trudelt irgendeine Variablenaktualisierung ein (z.B. die OneWire Sensoren - wenn das Pollen beginnt, kommen im Sekundentakt der Reihe nach alle Messwerte). Die Folge ist ja dann, das das Bild neu „berechnet“ wird und die HTML-Variable im Webfront neu aufgebaut wird.

Dieses ist ja deutlich sichtbar und von daher habe ich mir die Frage gestellt, ob man das nicht irgendwie optimieren kann.
Kann man die Aktualisierung des Browsers für die Zeit des „Neuaufbaus“ irgendwie kurzzeitig „stilllegen“?

Sicherlich kann man es etwas eindämmen, wenn man z.B. nicht jede OneWire-Variablenaktualisierung zum Anlass nimmt eine Neuberechnung des Bildes durchzuführen.

Aber vielleicht gibt es ja noch eine andere Methode?

Joachim

Servus Joachim
ich war etwas abwesend, drum kam meinerseits keine Reaktion.

Ein elegante Lösung wäre zb. wenn die Events welche nicht unbedingt sofort angezeigt werden müssen (1Wire), anstatt an das "Neuaufbau"Script an ein eigenes Dummy Script anhängst.

Dieses Dummy Script kannst dann entweder per Semaphoren oder per Timer so bauen das es egal wie oft es selbst gestartet wird nur maximal 1x pro Minute das „Neuaufbau“ Script triggert.

gruß
bb