Webfront am Touchdisplay für 80 EUR... MePAD

Mich würde interessieren wie du das WF so schön hin bekommen hast . mit den abständen . . ?

Holger .

Gesendet von meinem GT-I9100 mit Tapatalk 2

nicht negativ gemeint … aber muss der rahmen so dick sein? liegt das am usb kabel oder woran?

liegt am everspring sensor.
mittlerweile habe ich eine wetterstation :wink:

Beta Versions rahmen - kann man kleiner machen - etwas breit ist notwendig, wenn man die stecker verergen will. definiv aber nicht so breit notwendig. - wie gesagt ein test.

Das ist kein Webfront, sondern eine eigene PHP Seite - momentan etwas quick and dirty aber sie funktioniert schön.
Unterverzeichnis in IPS anlegen und neue Webserver Instanz erstellen die dann auf das Unterverzeichnis zeigt.

Dort gibt’s ein paar Dateien.
CSS Buttons
Quick and Dirty index.php für Buttons etc.
ajax.php für befehle und Autorefresh.

Hier die Codes für interssierte zum nachbasteln und weiterbasteln:

buttons.css

.button_green {
	-moz-box-shadow:inset 0px 1px 6px -27px #bee89c;
	-webkit-box-shadow:inset 0px 1px 6px -27px #bee89c;
	box-shadow:inset 0px 1px 6px -27px #bee89c;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #96c22e), color-stop(1, #77992e) );
	background:-moz-linear-gradient( center top, #96c22e 5%, #77992e 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#96c22e', endColorstr='#77992e');
	background-color:#96c22e;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	border:1px solid #83c41a;
	display:inline-block;
	color:#0C1219;
	font-family:arial;
	font-size:15px;
	font-weight:normal;
	padding:4px 24px;
	text-decoration:none;
}.button_green:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77992e), color-stop(1, #96c22e) );
	background:-moz-linear-gradient( center top, #77992e 5%, #96c22e 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77992e', endColorstr='#96c22e');
	background-color:#77992e;
}.button_green:active {
	position:relative;
	top:1px;
}
/* This imageless css button was generated by CSSButtonGenerator.com */

.button_orange {
	-moz-box-shadow:inset 0px 1px 6px -27px #fceaca;
	-webkit-box-shadow:inset 0px 1px 6px -27px #fceaca;
	box-shadow:inset 0px 1px 6px -27px #fceaca;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e3b668), color-stop(1, #c98e28) );
	background:-moz-linear-gradient( center top, #e3b668 5%, #c98e28 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e3b668', endColorstr='#c98e28');
	background-color:#e3b668;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	border:1px solid #eeb44f;
	display:inline-block;
	color:#0C1219;
	font-family:arial;
	font-size:15px;
	font-weight:normal;
	padding:4px 24px;
	text-decoration:none;
}.button_orange:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #c98e28), color-stop(1, #e3b668) );
	background:-moz-linear-gradient( center top, #c98e28 5%, #e3b668 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c98e28', endColorstr='#e3b668');
	background-color:#c98e28;
}.button_orange:active {
	position:relative;
	top:1px;
}

.button_green {
	-moz-box-shadow:inset 0px 1px 6px -27px #caefab;
	-webkit-box-shadow:inset 0px 1px 6px -27px #caefab;
	box-shadow:inset 0px 1px 6px -27px #caefab;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #85c250), color-stop(1, #52911f) );
	background:-moz-linear-gradient( center top, #85c250 5%, #52911f 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#85c250', endColorstr='#52911f');
	background-color:#85c250;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	border:1px solid #268a16;
	display:inline-block;
	color:#0C1219;
	font-family:arial;
	font-size:15px;
	font-weight:normal;
	padding:4px 24px;
	text-decoration:none;
}.button_green:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #52911f), color-stop(1, #85c250) );
	background:-moz-linear-gradient( center top, #52911f 5%, #85c250 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#52911f', endColorstr='#85c250');
	background-color:#52911f;
}.button_green:active {
	position:relative;
	top:1px;
}


.button_red {
	-moz-box-shadow:inset 0px 1px 6px -27px #fab3ad;
	-webkit-box-shadow:inset 0px 1px 6px -27px #fab3ad;
	box-shadow:inset 0px 1px 6px -27px #fab3ad;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fa665a), color-stop(1, #d34639) );
	background:-moz-linear-gradient( center top, #fa665a 5%, #d34639 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fa665a', endColorstr='#d34639');
	background-color:#fa665a;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	border:1px solid #d83526;
	display:inline-block;
	color:#0C1219;
	font-family:arial;
	font-size:15px;
	font-weight:normal;
	padding:4px 24px;
	text-decoration:none;
}.button_red:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d34639), color-stop(1, #fa665a) );
	background:-moz-linear-gradient( center top, #d34639 5%, #fa665a 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d34639', endColorstr='#fa665a');
	background-color:#d34639;
}.button_red:active {
	position:relative;
	top:1px;
}

.button_blue {
	-moz-box-shadow:inset 0px 1px 6px -27px #bbdaf7;
	-webkit-box-shadow:inset 0px 1px 6px -27px #bbdaf7;
	box-shadow:inset 0px 1px 6px -27px #bbdaf7;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2c72b8), color-stop(1, #14477a) );
	background:-moz-linear-gradient( center top, #2c72b8 5%, #14477a 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c72b8', endColorstr='#14477a');
	background-color:#2c72b8;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	border:1px solid #84bbf3;
	display:inline-block;
	color:#FFFFFF;
	font-family:arial;
	font-size:15px;
	font-weight:normal;
	padding:4px 24px;
	text-decoration:none;
}.button_blue:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #14477a), color-stop(1, #2c72b8) );
	background:-moz-linear-gradient( center top, #14477a 5%, #2c72b8 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#14477a', endColorstr='#2c72b8');
	background-color:#14477a;
}.button_blue:active {
	position:relative;
	top:1px;
}
/* This imageless css button was generated by CSSButtonGenerator.com */


.button_green , .button_red , .button_orange , .button_blue{
	font-size:19px;
	min-width: 110px;
	padding: 5px;
	margin: 10px;
	text-align: center;
}



index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <META http-equiv="refresh" content="3600">
  <link href="buttons.css" rel="stylesheet" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
<style type="text/css">
	body {
			background-image: linear-gradient(bottom, rgb(12,18,25) 36%, rgb(39,61,83) 68%);
			background-image: -o-linear-gradient(bottom, rgb(12,18,25) 36%, rgb(39,61,83) 68%);
			background-image: -moz-linear-gradient(bottom, rgb(12,18,25) 36%, rgb(39,61,83) 68%);
			background-image: -webkit-linear-gradient(bottom, rgb(12,18,25) 36%, rgb(39,61,83) 68%);
			background-image: -ms-linear-gradient(bottom, rgb(12,18,25) 36%, rgb(39,61,83) 68%);

			background-image: -webkit-gradient(
				linear,
				left bottom,
				left top,
				color-stop(0.36, rgb(12,18,25)),
				color-stop(0.68, rgb(39,61,83))
			);
	
	}

	#main{
		height: 100%;
	}

	p, body, tr, td {
		font-family:Arial;
		font-size:18px;
		font-weight:normal;
		
		line-height: 130%;
		color: #FFFFFF;
	}

	.group, #navigation {
		width: 100%;
		border-bottom: solid 1px #285686;
		padding: 0px;
		margin-bottom: 10px;
		clear:both;
	}

	.small {
		height: 75px;
		overflow: hidden;		
	}

	.group ul li{
		float:left;
	}

	#navigation ul.right li{
		float: right;
	}
	
	.group ul, #navigation ul{
		list-style-type: none;
		margin: 0px;
		margin-left: -35px;
	}

	.group ul .sep{
		width: 10px;	
	}

	.instance_title{
		min-width: 500px;
		border: solid 1px #FFFFFF;
	}

	body{
		height: 515px;
		margin: 15px;
		
	}
	#main{
		height: 520px;
		overflow: hidden;
		position: relative
	}
	.navigation{
		position: absolute;
		bottom: 0;
	}
	
	.geschoss{
		height: 360px;
		overflow: hidden;
	
	}
</style>
</head>

<body>
<div class="tempout" style="position:absolute;z-index:1;top:380px;left:650px;text-align:right;font-size:50pt;color:#85BBF1;width:300px;">
0,0°C
</div>
<div id="main">
	<div class="group small">
		<div id="messages_temp" class="small" style="float:right;text-align:right">Wohnzimmer: <span id="tempin">0,0°C</span><br>
		                                                             Außen: <span class="tempout">0,0°C</span><br>
																	  rel. Luftfeuchte: <span id="feuchteout"></span>
																	 </div>
		<div id="messages" class="small"></div>
		
	</div>

	<div id="EG" class="geschoss">
		<div class="group">
			Jalousien EG<br>
			<ul>
				<li><a href="#" class="button_orange ips" mode="script" val="" objid="23857" >Alle<br>schräg</a></li>
				<li><a href="#" class="button_green ips"  mode="script" val="" objid="38846">Alle<br>auf</a></li>
				<li><a href="#" class="button_red ips"    mode="script" val="" objid="38292">Alle<br>zu</a></li>
				<li class="sep"> </li>
				<li><a href="#" class="button_orange ips" mode="script" val="16188" objid="42561">Jalousie 1<br>schräg</a></li>
				<li><a href="#" class="button_orange ips" mode="script" val="49172" objid="42561">Jalousie 2<br>schräg</a></li>
				<li><a href="#" class="button_orange ips" mode="script" val="59311" objid="42561">Jalousie 3<br>schräg</a></li>
			</ul>
		</div>
		<div class="group">
			Leuchten<br>
			<ul>
				<li><a href="#" class="button_red" mode="script" val="" objid="20389" >Alle <br>aus</a></li>
				<li class="sep"> </li>
				<li><a href="#" class="button_orange ips" mode="zw_dimset" val="50" objid="47217" >Stehleuchte <br>50%</a></li>
				<li><a href="#" class="button_green ips" mode="zw_dimset" val="100" objid="47217" >Stehleuchte <br>an</a></li>
				<li><a href="#" class="button_red ips" mode="zw_switchmode" val="false" objid="47217" >Stehleuchte <br>aus</a></li>				
				<li class="sep"> </li>
				<li><a href="#" class="button_green ips" mode="script" val="1" objid="14054" >Leuchte vorn <br>an</a></li>
				<li><a href="#" class="button_red ips" mode="script"   val="0" objid="14054" >Leuchte vorn <br>aus</a></li>
				
			</ul>
		</div>
		<div class="group">
			Szenen aktivieren<br>
			<ul>
				<li><a href="#" class="button_blue ips" mode="script" val=""objid="53693" >Gute Nacht Modus</a></li>
				<li><a href="#" class="button_blue ips" mode="script" val=""objid="24265" >Alle Jalousien schräg</a></li>
			</ul>
		</div>
	</div>
	
	<div id="OG" class="geschoss">
		<div class="group">
			Jalousien OG<br>
			<ul>
				<li><a href="#" class="button_orange ips" mode="script" val="" objid="17049" >Alle<br>schräg</a></li>
				<li><a href="#" class="button_green ips"  mode="script" val="" objid="11917">Alle<br>auf</a></li>
				<li><a href="#" class="button_red ips"    mode="script" val="" objid="58344">Alle<br>zu</a></li>
				<li class="sep"> </li>
				<li><a href="#" class="button_orange ips" mode="script" val="16807" objid="42561">Moritz 1<br>schräg</a></li>
				<li><a href="#" class="button_orange ips" mode="script" val="52934" objid="42561">Moritz 2<br>schräg</a></li>
				<li><a href="#" class="button_orange ips" mode="script" val="12400" objid="42561">Ida<br>schräg</a></li>
				<li><a href="#" class="button_orange ips" mode="script" val="32461" objid="42561">Schalfzimmer<br>schräg</a></li>
			</ul>
		</div>
		<div class="group">
			Licht OG<br>
			<ul>
				<li><a href="#" class="button_green ips" mode="zw_switchmode" val="true" objid="58082" >Schlafzimmer<br>an</a></li>
				<li><a href="#" class="button_red ips" mode="zw_switchmode"   val="false" objid="58082" >Schlafzimmer<br>aus</a></li>				
			</ul>
		</div>
		
	</div>
	<div id="WETTER" class="geschoss">
		<div class="group">
			Wetter:<br>
			<span id="wetter">... loading ...</span>
		</div>
	</div>	
	
	<div id="navigation">
		<ul class="right">
			<li><a href="#" class="button_blue switch_geschoss" geschoss="EG" >Erdgeschoss</a></li>
			<li><a href="#" class="button_blue switch_geschoss" geschoss="OG" >Obergeschoss</a></li>
			<li><a href="#" class="button_blue switch_geschoss" geschoss="WETTER" >Wetter</a></li>
		</ul>
	</div>
</div>	
</body>

<Script type="text/javascript">
	$(".ips").click(function(){
		var mode = $(this).attr('mode');
		var val = $(this).attr('val');
		var objid = $(this).attr('objid');
		
		// make URL
		var  url = "ajax.php?mode="+mode+"&val="+val+"&objid="+objid;
		$.get(url, function(data){
			if(data != '') alert(data);
		});
		//window.open(url);
	});
	
	// Umschalter Geschoss
	$(".switch_geschoss").click(function(){
		$(".geschoss").hide();
		var show = $(this).attr('geschoss');
		$("#"+show).show();
	});
	// Initial festlegen
		$(".geschoss").hide();
		$("#EG").show();
	
	
	// Variablen aktualisieren
   $("#tempin").load('ajax.php?mode=getvalformatted&objid=39233&'+ Math.random());
   $(".tempout").load('ajax.php?mode=getvalformatted&objid=27750&'+ Math.random());
   $("#feuchteout").load('ajax.php?mode=getvalformatted&objid=22319&'+ Math.random());
   $("#messages").load('ajax.php?mode=getval&objid=50849&'+ Math.random());
   $("#wetter").load('ajax.php?mode=getval&objid=20621&'+ Math.random());
   
	var refreshId = setInterval(function() {
	  $("#tempin").load('ajax.php?mode=getvalformatted&objid=39233&'+ Math.random());
	  $(".tempout").load('ajax.php?mode=getvalformatted&objid=27750&'+ Math.random());
	  $("#feuchteout").load('ajax.php?mode=getvalformatted&objid=22319&'+ Math.random());	
	  $("#messages").load('ajax.php?mode=getval&objid=50849&'+ Math.random());
	  $("#wetter").load('ajax.php?mode=getval&objid=20621&'+ Math.random());
	}, 60000);
	$.ajaxSetup({ cache: false });	
</script>

</html>	
	


ajax.php

<?php
	// Ajax handler for frontent calls
	$mode  = @$_GET["mode"];
	$val   = @$_GET["val"];
	$objid = @$_GET["objid"];
	
	$val = ($val == 'false')?false:$val;
	$val = ($val == 'true')?true:$val;
	
	$resp = "";
	$objid = intval($objid);
	switch(strtolower($mode)){
	
		case "zw_switchmode":	ZW_SwitchMode($objid, $val);
								break;
								
		case "zw_shuttermoveup": ZW_ShutterMoveUp($objid);
								break;
								
		case "zw_shuttermovedown": ZW_ShutterMoveDown($objid);
								break;								
		
		case "zw_dimset"  :		ZW_DimSet($objid, intval($val));
								break;

		case "script": 			
								IPS_RunScriptEx($objid, Array("VALUE" => $val));
								break;

		case "getval":			$resp = utf8_encode(GetValue($objid));
								break;

		case "getvalformatted": $resp =  utf8_encode(GetValueFormatted($objid));
								break;
							 
		default:	
						$resp = "ERROR - mode not set";
						break;
	}
	
	echo $resp;
?>

Abgestimmt momentn auf Z-Wave, die AJAX.php kann man aber einfach und leicht entsprechend anpassen.

die index.php. enthätl mehrere „seiten“ die entsprechend eingeblendet werden.
etwas html und php ist allerdings voraussetzung damit man das anpassen kann.

evlt. habe ich irgendwann mal zeit, das etwas besser zu machen und auch zu dokumentieren.
Prinzipiell ist es aber möglich jeglichen Befehl oder script auszuführen und auch jede Variable zu lesen.

Hmmm, solange es keine spezielle Wandhalterung für ein Android Pad gibt, kann man dieses verwenden:
Hama Universal Tablet-Halterung für Geräte mit 20 cm (7 Zoll) bis 26 cm (10 Zoll) schwarz
Ist halt nur nicht besonders hübsch…

Die ist quasi fast hässlich … aber Geschmäcker sind verschieden :wink:

Die ist quasi fast hässlich … aber Geschmäcker sind verschieden :wink:

Wie gesagt:
Ist halt nur nicht besonders hübsch… aber ne Halterung :o

Ich hoffe ja mal, daß trotzdem noch eine Eigenentwicklung zustand kommt… was ich inzwischen aber leider eher bezweifle…

Gibts ja: http://www.ip-symcon.de/forum/threads/19717-Bauvorschlag-für-simple-Wandhalterung

Wenns optisch größer wirken soll kannst ja noch entweder eine Unterlage drunter (zb. Zierblech, Farbe) oder einen beliebigen Rahmen drumrum ( Holz, Plexi mit Laubsäge ausgeschnitten) machen.

gruß
bb

Was haltet ihr von dem TREKSTOR SurfTab breeze 7.0 für 69eur?
Bald ist ein Tab günstiger als ein Lichtschalter :slight_smile:

Was haltet ihr von dem TREKSTOR SurfTab breeze 7.0 für 69eur?

Wo kostet es denn soviel?

war in der werbung … media markt oder sowas. habs auch im tv gesehen

Was haltet ihr von dem TREKSTOR SurfTab breeze 7.0 für 69eur?

Bei Amazon gibt’s Rezensionen für eine erste Einschätzung…

Was haltet ihr von dem TREKSTOR SurfTab breeze 7.0 für 69eur?

Ich habe es mir heute im Media Markt angeschaut und das Paderborner Webfront getestet.
Ich habe keinen Vergleich zu anderen Billig PADs aber war eher angenehm überrascht für den Preis…

Was nicht ging was das Scrollen des Webfront im Standardbrowser. Mit dem Delphin Browser ging es, aber total ruckelig.
Wenn man es als einfachen Schalter verwendet braucht man das aber auch nicht.

Was mir sonst noch aufgefallen war, beim Drücken auf manchen Schaltflächen blinkt kurz ein senkrechter Streifen bzw. Quadrat wie bei einer Markierung auf.

Keine Ahnung wie das bei anderen PADs ausschaut. Bei gleichen Browser und Prozessor vermutlich ähnlich?:confused:

also eher nicht so geeignet für das android app mit kompletter haustechnik? denkst du, das könnte ruckeln? suche noch was günstiges für die wand

Du müsstest auf jeden Fall ein Webfront basteln, bei dem du nicht scrollen müsstest.

Wenn ich ein Widerrufsrecht gehabt hätte, hätte ich eins mitgenommen, im Detail kann mans im Laden nicht testen.

Habe mir in den letzten Tagen mal einige Tablest zu gemüte geführt:

  • Billig Sanei 80 EUR Tablet
  • Intenso Touchpad 140 EUR
  • Kindle Fire HD 200 EUR
  • Nexus 7 kommt heute

Folgendes Fazit ziehe ich:
Sanei N77:
Ist Mist, Display-Glas ist bescheiden, Eingaben werden nicht zuverlässig ausgeführt. Es hängt zwar immer noch an der Wand, begeisterung löst es jedoch nicht aus. Manchmal muss man mehrmals klicken…
Webfront sehr langsam.

Inteso Tab 804:
Eigentlich ganz gut, Einiges schneller als das 80 EUR Tab, allerdings auch hier ist der Bildschirm nicht wirklich toll. Reagiert besser - ist aber noch kein Tolles Gefühl. Auch die Auflöung von 800x600 ist eher bescheiden. Für eine günstige Wandsteuerung aber durchaus in Betracht zu ziehen.
Webfront lädt und funktioniert. Vollbild über BOAT Browser
Preis ist hier in den letzten Tagen deutlich gesunken. Kostet grad glaube ich so um die 130 EUR

Kindle Fire HD:
Sehr fein - so muß ein Tablet sein. Tolles Display, gute Auflösung, schnelle CPU.
Ein Nachteil ggf. für eine IPS Lösung: kein Google Play Store und relativ schlecht customisierbar.
Webfront lädt zügig. Vollbild im standard Browser möglich, Scrollen mit Touch geht nicht, sondern nur mit Seiteleiste

Google Nexus 7:
Erwarte ich heute von der gelben Frau.
Mehr Infos demnächst.

Bisheriges Fazit.
Lieber gleich ein paar Euronen mehr ausgeben, dann macht es deutlich mehr Spass!!!

Ich hab mir jetzt mal das Odys Next bei Amazon Warehouse bestellt (82€).
Bei Warehouse ist Garantie, Rücknahme etc. wie bei Amazon und wenn überhaupt nur die Verpackung beschädigt…

vom nexus 7 wirst du begeistert sein. das habe ich seit es rauskam und bereue es bis heute nicht.

mir ist es nur ein wenig zu schade, um es nur an die wand zu hängen. da würde es ein < 100€ gerät auch tun denke ich…

Das hier: „FX-Pad Deutsch“ bei Amaz… für 99€ sieht auch interessant aus. Mit Dual Core Prozessor und guter Rezension.