Floorplan - Rolläden visualisieren mit aktuellen Level - Ideen ?

Hallo Gemeinde,

ich stelle wegen des WAF (:)) gerade meine Rolladen-Steuerung um. Das Konstrukt ist ein iframe in welchem bewegliche Rolläden in einem Floorplan direkt angetippt werden können (Touchscreen) und auf deer rechten Seite nur der „aktivierte“ Rolladen „bedient“ werden kann. Das funktioniert im ersten Ansatz soweit ganz gut.

Es soll dann noch oben quer die Auswahl 1. einzelner Rolladen; 2. Selektieren mehrerer Rolläden und 3. alle Rolläden folgen. Weiterhin sind verschiedene Automatiken (Urlaub, Werktags, Wochenende) geplant.

Ich hänge aber beim Visualisieren des Rolladens (rechts unten). Die Vorstellung ist den aktuellen Level in einem iframe angezeigt zu bekommen bzw. darüber auch die Höhe bedienen zu können. Sozusagen wie der Level-Slider nur grafisch.

Ich dachte den Wert direkt in die Position einlesen zu können. Hat da jemand einen Hinweis ?

So funktioniert es nicht:

<body style="width: 400px; height: 300px; top:0px;">

 <img src="images/Window.jpg" id="Window" style="position: absolute; left: 0px; top: 0px; width: 400px; height: 300px;"/>
 <img src="images/Shutter.png" id="Shutter" style="position: absolute; left: 0px; top: "<?(-300)+(300*Getvalue(40445));?>"px; width: 400px; height: 300px;"/>
 
</body>

Viele Grüße

André

Fehlt da nicht ein echo in deinem php style?

… hmmm. Ich komme generell auf dem Weg nicht weiter.

Bin jetzt von PHP herangegangen und habe ein Skript direkt an Level gekoppelt. So zeigt es mir wenigstens den aktuellen Status:

<?

SetValue($_IPS['VARIABLE'], $_IPS['VALUE']);

$top = $_IPS['VALUE'];//GetValue(41400);

HM_WriteValueFloat(40445 /*[Rolläden\Rolladen Arbeitszimmer\Rolladen Arbeitszimmer]*/, "LEVEL", $_IPS['VALUE']);

$HTML = "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
 <html xmlns='http://www.w3.org/1999/xhtml'>
  <head>

	<meta http-Equiv=\"Cache-Control\" Content=\"no-cache\">
	<meta http-Equiv=\"Pragma\" Content=\"no-cache\">
	<meta http-Equiv=\"Expires\" Content=\"0\">

</head>

<body style=\"width: 400px; height: 300px; top:0px;\">

 <img src=\"images/Window.jpg\" id=\"Window\" style=\"position: absolute; left: 0px; top: 0px; width: 400px; height: 300px;\"/>
 <img src=\"images/Shutter.png\" id=\"Shutter\" style=\"position: absolute; left: 0px; top: ".((-300)*$top)."px; width: 400px; height: 300px;\"/>

</body>
</html>";

	$handle = fopen("../webfront/user/Floorplan_013/ShutterStatus.html", "w");
	fwrite($handle, $HTML);
	fclose($handle);
	
	$iframe = '<iframe src="../user/Floorplan_013/ShutterStatus.html" width="400" height="300"  frameborder="no" scrolling="no"></iframe>';
	
	//iFrame auffrischen, damit Änderungen registriert werden
	SetValue(56821, $iframe);
	
?>

Ich bin aber Meilenweit vom Eigentlichen entfernt. Es sollen ein Image (Shutter) nach oben oder unten gegenüber dem dahinterliegenden Bild (Window) bewegt werden und der Wert (aktuelle Position --> top) übergeben werden. Sozusagen ein vertikaler Slider mit 2 Bildern. Hat das schon mal jemand realisiert ?

Viele Grüße

André

mich würde nebenbei mal interessieren, wie Du den Haus- bzw. Floorplan gezeichnet hast?

Ich bin immer noch auf der suche, wo ich gute 3D-Zeichnungen rausbekomme ohne mein Haus in 3D-Max-Studio komplett nachzuzeichnen …

Wenn wir umgezogen sind und ich mich nach dem banalen Kabel verlegen für die Hausautomatisierung dem schönen Teil widmen kann, finde ich die Idee die Rollläden zu visualisieren super …

Hallo,

ich kann da nur Sweet Home 3D empfehlen.

Schöne Grüße
Thomas

@Ernie

ich hatte seinerzeit (vor 13 Jahren) selbst die Grundrisse (sozusagen grob) mit TraumhausDesigner (DataBecker) erstellt und konnte diese in eine aktuelle Version (hier Version 14 Premium) einlesen und noch final bearbeiten. Das ist aber sicher bei Neuplanung aufwändig, so dass ThomasD´s Vorschlag bei nicht bereits vorhandenen Grundrissen viel „griffiger“ klingt.

Zu meiner ursprünglichen Frage: Ich habe es jetzt so gelöst, dass ich noch einen Layer mit Buttons, die jeweils den gewünschten Rolladen-Stand darstellen, aufgesetzt habe und so per onclick --> sndreq die Aktion auslöse. Ist für Touchscreens auch besser, da ein Verschieben einer Grafik sonst noch einen „Übergabe“-Button notwendig gemacht hätte.


<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
 <html xmlns='http://www.w3.org/1999/xhtml'>
  <head>

	<meta http-Equiv="Cache-Control" Content="no-cache">
	<meta http-Equiv="Pragma" Content="no-cache">
	<meta http-Equiv="Expires" Content="0">

  <link rel="stylesheet" type="text/css" href="link/main.css"/>

  <!--Variablenuebergabe per XMLHttpRequest / Auslesen per GET in php-->

  <script type="text/JavaScript">

	 function sndReq(url)
	 {
	 var action;
	 action = new XMLHttpRequest;
	 action.open('post', url);
	 action.send(null);
	 <!--alert(url);-->
	 }
  </script>

</head>

<body style="width: 400px; height: 330px; top:0px;">

 <!--Layer1: Window (Hintergrund)-->

 <img src="images/Window.jpg" id="Window" style="position: absolute; left: 0px; top: 30px; width: 420px; height: 270px;"/>

 <!--Layer2: Shutter (beweglicher Vordergrund)-->

 <img src="images/Shutter.png" id="Shutter" style="position: absolute; left: 0px; top: -120px; width: 420px; height: 300px;"/>

 <!--Layer3: Steuer-Buttons aller 10 Prozent mit Rueckmeldung-->

 <input
	type="image"
	name="10Prozent"
	style="position: absolute; left: 0px; top: 0px; width: 420px; height: 30px; z-index:3"
	onclick="sndReq('link/ShutterStatus_Web.php?Level=10');"/>
	
 <input
	type="image"
	name="10Prozent"
	style="position: absolute; left: 0px; top: 30px; width: 420px; height: 30px; z-index:3"
	onclick="sndReq('link/ShutterStatus_Web.php?Level=9');"/>

 <input
	type="image"
	name="20Prozent"
	style="position: absolute; left: 0px; top: 60px; width: 420px; height: 30px; z-index:3"
	onclick="sndReq('link/ShutterStatus_Web.php?Level=8');"/>

 <input
	type="image"
	name="30Prozent"
	style="position: absolute; left: 0px; top: 90px; width: 420px; height: 30px; z-index:3"
	onclick="sndReq('link/ShutterStatus_Web.php?Level=7');"/>

 <input
	type="image"
	name="40Prozent"
	style="position: absolute; left: 0px; top: 120px; width: 420px; height: 30px; z-index:3"
	onclick="sndReq('link/ShutterStatus_Web.php?Level=6');"/>

 <input
	type="image"
	name="50Prozent"
	style="position: absolute; left: 0px; top: 150px; width: 420px; height: 30px; z-index:3"
	onclick="sndReq('link/ShutterStatus_Web.php?Level=5');"/>

 <input
	type="image"
	name="60Prozent"
	style="position: absolute; left: 0px; top: 180px; width: 420px; height: 30px; z-index:3"
	onclick="sndReq('link/ShutterStatus_Web.php?Level=4');"/>

 <input
	type="image"
	name="70Prozent"
	style="position: absolute; left: 0px; top: 210px; width: 420px; height: 30px; z-index:3"
	onclick="sndReq('link/ShutterStatus_Web.php?Level=3');"/>

 <input
	type="image"
	name="80Prozent"
	style="position: absolute; left: 0px; top: 240px; width: 420px; height: 30px; z-index:3"
	onclick="sndReq('link/ShutterStatus_Web.php?Level=2');"/>

 <input
	type="image"
	name="90Prozent"
	style="position: absolute; left: 0px; top: 270px; width: 420px; height: 30px; z-index:3"
	onclick="sndReq('link/ShutterStatus_Web.php?Level=1');"/>

 <input
	type="image"
	name="100Prozent"
	style="position: absolute; left: 0px; top: 300px; width: 420px; height: 30px; z-index:3"
	onclick="sndReq('link/ShutterStatus_Web.php?Level=0');"/>

</body>
</html>

Problem ist jetzt noch, dass der Floorplan im IE so aussieht, wie ich es haben will, aber im Firefox (auf den Tabletts) einfach die Checkboxes die falsche Größe haben und immer noch ein Schriftzug mit dem Ereignis (onclick → sndreq’…) angezeigt wird. Hat da jemand einen Rat ? Auch ein „-moz-appearance: none;“ half nichts.

Floorplan.html


<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
 <html xmlns='http://www.w3.org/1999/xhtml'>
  <head>

	<meta http-Equiv="Cache-Control" Content="no-cache">
	<meta http-Equiv="Pragma" Content="no-cache">
	<meta http-Equiv="Expires" Content="0">

  <link rel="stylesheet" type="text/css" href="link/main.css"/>

  <!--Variablenuebergabe per XMLHttpRequest / Auslesen per GET in php-->

  <script type="text/JavaScript">

	 function sndReq(url)
	 {
	 var action;
	 action = new XMLHttpRequest;
	 action.open('post', url);
	 action.send(null);
	 <!--alert(url);-->
	 }
  </script>

</head>

<body style="width: 900px; height: 500px; top:0px;">

 <img src="images/1.png" alt="Hintergrund" style="position: absolute; left: -176px; top: -88px; width: 1076px; height: 674px; z-index:1"/>

<div name="Shutters" style="position: absolute; left: 459px; top: 91px; width: 52px; height: 66px; z-index:2">
 <img src="images/9.png" alt="Arbeitszimmer"/>
</div>

<div name="Shutters" style="position: absolute; left: 476px; top: 202px; width: 38px; height: 91px; z-index:2">
 <img src="images/16.png" alt="Treppenhaus"/>
</div>

<div name="Shutters" style="position: absolute; left: 312px; top: 270px; width: 54px; height: 103px; z-index:2">
 <img src="images/12.png" alt="Kueche Ost"/>
</div>

<div name="Shutters" style="position: absolute; left: 191px; top: 279px; width: 57px; height: 83px; z-index:2">
 <img src="images/11.png" alt="Kueche Süd"/>
</div>

<div name="Shutters" style="position: absolute; left: 82px; top: 256px; width: 64px; height: 41px; z-index:2">
 <img src="images/4.png" alt="Wohnzimmer Süd"/>
</div>

<div name="Shutters" style="position: absolute; left: 45px; top: 168px; width: 46px; height: 112px; z-index:2">
 <img src="images/6.png" alt="Wohnzimmer Terrasse links"/>
</div>

<div name="Shutters" style="position: absolute; left: 73px; top: 116px; width: 46px; height: 130px; z-index:2">
 <img src="images/8.png" alt="Wohnzimmer Terrasse Mitte"/>
</div>

<div name="Shutters" style="position: absolute; left: 102px; top: 68px; width: 40px; height: 125px; z-index:2">
 <img src="images/5.png" alt="Wohnzimmer Terrasse rechts"/>
</div>

<div name="Shutters" style="position: absolute; left: 137px; top: 76px; width: 74px; height: 47px; z-index:2">
 <img src="images/7.png" alt="Wohnzimmer Nord"/>
</div>

<div name="Shutters" style="position: absolute; left: 259px; top: 25px; width: 49px; height: 78px; z-index:2">
 <img src="images/13.png" alt="Wohnzimmer West"/>
</div>

<div name="Shutters" style="position: absolute; left: 398px; top: 50px; width: 52px; height: 66px; z-index:2">
 <img src="images/9.png" alt="Gaeste WC"/>
</div>

<div name="Shutters" style="position: absolute; left: 203px; top: 354px; width: 49px; height: 84px; z-index:2">
 <img src="images/2.png" alt="HWR"/>
</div>

<div name="Shutters" style="position: absolute; left: 108px; top: 339px; width: 60px; height: 40px; z-index:2">
 <img src="images/3.png" alt="Hobby"/>
</div>

<div name="Shutters" style="position: absolute; left: 572px; top: 102px; width: 228px; height: 195px; z-index:2">
 <img src="images/17.png" alt="Garagentor"/>
</div>

 <img src="images/15.png" alt="Vordergrund" style="position: absolute; left: 0px; top: 0px; width: 900px; height: 497px; z-index:4"/>

<input
	type="checkbox"
	name="Rolladen Arbeitszimmer"
	style="position: absolute; left: 462px; top: 104px; width: 50px; height: 50px; z-index:4"
	onclick="sndReq('link/Shutter_Web.php?Shutter=1');"/>

<input
	type="checkbox"
	name="Rolladen Treppenhaus"
	style="position: absolute; left: 464px; top: 232px; width: 50px; height: 50px; z-index:4"
	onclick="sndReq('link/Shutter_Web.php?Shutter=2');"/>

<input
	type="checkbox"
	name="Rolladen Kueche Ost"
	style="position: absolute; left: 317px; top: 309px; width: 50px; height: 50px; z-index:4"
	onclick="sndReq('link/Shutter_Web.php?Shutter=3');"/>

<input
	type="checkbox"
	name="Rolladen Kueche Sued"
	style="position: absolute; left: 194px; top: 298px; width: 50px; height: 50px; z-index:4"
	onclick="sndReq('link/Shutter_Web.php?Shutter=4');"/>

<input
	type="checkbox"
	name="Rolladen Wohnzimmer Sued"
	style="position: absolute; left: 89px; top: 256px; width: 50px; height: 50px; z-index:4"
	onclick="sndReq('link/Shutter_Web.php?Shutter=5');"/>

<input
	type="checkbox"
	name="Rolladen Wohnzimmer Terrasse links"
	style="position: absolute; left: 54px; top: 202px; width: 50px; height: 50px; z-index:4"
	onclick="sndReq('link/Shutter_Web.php?Shutter=6');"/>

<input
	type="checkbox"
	name="Rolladen Wohnzimmer Terrasse Mitte"
	style="position: absolute; left: 78px; top: 156px; width: 50px; height: 50px; z-index:4"
	onclick="sndReq('link/Shutter_Web.php?Shutter=7');"/>

<input
	type="checkbox"
	name="Rolladen Wohnzimmer Terrasse rechts"
	style="position: absolute; left: 103px; top: 109px; width: 50px; height: 50px; z-index:4"
	onclick="sndReq('link/Shutter_Web.php?Shutter=8');"/>

<input
	type="checkbox"
	name="Rolladen Wohnzimmer Nord"
	style="position: absolute; left: 146px; top: 78px; width: 50px; height: 50px; z-index:4"
	onclick="sndReq('link/Shutter_Web.php?Shutter=9');"/>

<input
	type="checkbox"
	name="Rolladen Wohnzimmer West"
	style="position: absolute; left: 264px; top: 50px; width: 50px; height: 50px; z-index:4"
	onclick="sndReq('link/Shutter_Web.php?Shutter=10');"/>

<input
	type="checkbox"
	name="Rolladen Gaeste WC"
	style="position: absolute; left: 393px; top: 75px; width: 50px; height: 50px; z-index:4"
	onclick="sndReq('link/Shutter_Web.php?Shutter=2');"/>

<input
	type="checkbox"
	name="Rolladen HWR"
	style="position: absolute; left: 208px; top: 385px; width: 50px; height: 50px; z-index:4"
	onclick="sndReq('link/Shutter_Web.php?Shutter=2');"/>

<input
	type="checkbox"
	name="Rolladen Hobby"
	style="position: absolute; left: 114px; top: 340px; width: 50px; height: 50px; z-index:4"
	onclick="sndReq('link/Shutter_Web.php?Shutter=2');"/>

<input
	type="checkbox"
	name="Garagentor"
	style="position: absolute; left: 648px; top: 170px; width: 50px; height: 50px; z-index:4"
	onclick="sndReq('link/Shutter_Web.php?Shutter=11');"/>

</body>
</html>

main.css

/* Site settings */

input[type="checkbox"] {
    width: 50px;
    height: 50px;
    background: white;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px;
}
input[type="checkbox" checked="checked"] {
    width: 50px;
    height: 50px;
    background: red;
}

input { 
opacity: 0.5;
}
input:link { background-color:#FF0000; z-index:3}
input:visited { background-color:#FF0000; z-index:3}
input:focus { background-color:#FF0000; z-index:3}
input:hover { background-color:#FF0000; z-index:3}
input:active { background-color:#FF0000; z-index:3}

Viele Grüße

André

Blicke gerade nicht ganz durch. Hattes Du nicht auch die Anforderung dass die Position im Webfront auch grafisch angezeigt wird?
Oder ist das mit den geposteten Lösungen auch abgedeckt?

Nein ist es noch nicht. Fehlt einfach im Moment die Zeit …
Müsste aber ganz einfach gehen (Position auslesen und in top schreiben, da die iframes über php erstellt werden).
VG André

Gesendet von meinem GT-N7000 mit Tapatalk

Ich hab da vorhin mal was zusammengeflickt.
Habe es auf einer meiner Homepages unter
http://www.westrich-online.de/diverses/Rolladen/RolladenVisu.html

abgelegt.

Wenn du willst kannst du es Dir ja mal anschauen… (Ist reines Html mit javascript…)

Achso… noch was… Aus irgendeinem Grund funktionieren die Auf/Ab Links erst beim zweiten Betätigen nach dem Laden der seite.
Der Rest ist selbsterklärend…

@IPdet_22

… nice.

Ich habe den Ansatz, dass die beiden Grafiken übereinander lege und auf die Position tippe, wo ich den Unterrand des Rolladen/der Rolläden haben möchte. Geschrieben wird dann Serverseitig über PHP nur die Position (top: …) des Rolladen-Bildes. Auszug aus dem Script:

$HTML_Shutter_Layer ="
<body style=\"width: 400px; height: 330px; top:0px;\">

 <!--Layer1: Window (Hintergrund)-->

 <img src=\"images/Window.jpg\" id=\"Window\" style=\"position: absolute; left: 0px; top: 30px; width: 420px; height: 270px;\"/>

 <!--Layer2: Shutter (beweglicher Vordergrund)-->

 <img src=\"images/Shutter.png\" id=\"Shutter\" style=\"position: absolute; left: 0px; top: ".(30+(-300)*($Level/10))."px; width: 420px; height: 300px;\"/>
";

Dennoch suche ich immer noch eine Lösung für mein Anzeigeproblem (IE --> Firefox)

Viele Grüße

André

Sorry, ich hatte dass nicht ganz kapiert.
Mittlerweile ist aber glaube ich der Groschen gefallen…
Du lässt den Shutter oben aus dem iFrame rauswandern und somit sieht es aus als ob er sich verkürze, oder ?

Zu deinem IE-Firefox Thema.

Ich hab mir deinen Floorplan Code mal in ne HTML Datei gelegt und mit Firefox angeschaut.

Die Checkboxen sind zwar bei mir auch zu klein, aber dein Javacode taucht bei mir nicht auf…

Hier das Bild in Fiirefox (Natürlich nicht schön , da Alternativtexte statt der Bilder…)

Und zum Vergleich IE 11

Gruß Detlef

Korrektur:
Hatte die main.css falsch (nicht in einem Unterordner abgelegt)
Wenn die richtig liegt sieht Firefox so aus:

Sieht doch ganz gut aus?

Kann es sein, dass Deine Floorplan auch die CSS nicht findet?

… war eine gute Idee. Habe alles überprüft. Aber bekomme keinen Select-Button, sondern das Kästchen, welches beim selektieren rot :slight_smile: wird. Beim Anklicken des nächsten Kästchens ist es wieder „blass“, also unselektiert. Ohne CSS kommen die Mini-Kästchen. Ergo, die CSS ist falsch …

Gruß

André

…hmmm. Habe jetzt FF auf meinem Entwicklungslaptop - dort funzt es wie gewünscht:

Aber auf den Androiden-Tablets macht Firefox nur kleine Kästchen. Das Problem scheint dort zu stecken.

Gruß

André

Hmm, müsstest also mal schauen ob diese FF Version überhaupt CSS und wenn ja, welche Version, unter stützt…

Sent from my GT-I8750 using Tapatalk

Leider nichts. Auch Chrome versagt. Werde es mit Icons lösen.

Gruß André

Gesendet von meinem GT-N7000 mit Tapatalk

Wird wohl nichts anderes übrig bleiben…
Aufgrund solcher Erfahrungen habe ich meine beiden Android Tablets schon vor nem Jahr in den Ruhestand geschickt…

Sent from my GT-I8750 using Tapatalk

… tja. Jetzt so … :frowning:

Überlege noch, nur für selektiert einen Haken zu setzen. Wenn nicht selektiert, dann ist nur das Fenster zu sehen.

Hinter dem Layer für das Haus liegen noch einzelne Rolläden, die sich verschieben lassen. Überlege auch, so den groben Öffnungszustand anzuzeigen.

Gruß

André

Sieht schon super aus :slight_smile:
Bin ja fast traurig, dass ich auch in Zukunft nur 2 Rolladen zu steuern haben werde :frowning:

Wobei ich sagen muss, dass mir die weißen schlichten Checkboxen fast besser gefallen haben als die bunten Icons…

Gruß Detlef

… ja. Ich muss mal ein bischen googeln, ob ich bessere finde. Ein schlichter Haken wäre super. Habe mal irgendwo sowas gesehen.

Gruß André

Gesendet von meinem GT-N7000 mit Tapatalk

… besser ? :smiley:

Gruß André