iPod Touch UI

Hallo zusammen,
hab da etwas ganz Interessantes gefunden, mit dem man sein iPod Web Frontend mehr oder weniger im Original-Stil per HTML/CSS/Ajax/php aufbauen kann (hoffe, dass ich nichts allseits Bekanntes berichte, aber ich konnte diesbezüglich nichts im Forum finden).
Ich habe dazu Clancy so genanntes Framework etwas umgestrickt und mit den IPS php Codes kombiniert. Klappt ziemlich gut, auch wenn ich noch ein paar Punkte lösen muss (etwa wie ich nach dem Anklicken eines „action=…“-Links" auf der Seite bleiben kann und nicht wieder zur Startseite zurückkomme).
Wieder einmal ist mit dabei BTW aufgefallen, dass die technische Umsetzung eines Bedienkonzepts (das außer mir auch andere, nicht Eingeweihte verstehen sollen, ich sage z.B. WAF) zwar anspruchsvoll ist, die eigentliche Hautparbeit aber IMHO im Konzeptionellen besteht.
Ich habe mir nun für meinen Bereich eine duale Herangehensweise für die Hauptfunktionen gewählt, nämlich
a) RÄUME (was kann ich alles in einem bestimmten Raum machen oder wissen wollen, z.B. Heizung an, Rolläden runter, Licht dimmen, Wie warm ist es? usw.), und
b) AKTIONEN (raumübergreifend, z.B. LÜFTEN: Alle Rolläden im ganzen Haus in die Lüftungsstellung bringen, z.B. beim Verlassen des Hauses oder wenn es regnet; oder HEIZEN: Alle Heizungsregler in einem Interface, um z.B. Bad - Küche - Esszimer zu beheizen, oder LICHT usw.).
Das bringt zwar Überschneidungen mit sich (Funktionen sind sowohl in der einen als auch in der anderen Sektion verfügbar), aber genau das ist ja gewollt.
Daneben gibt es
c) EINSTELLUNGEN: Bin ich zuhause? Sollen die Rolläden zu einer bestimmten Zeit schließen bzw. öffnen oder mache ich das manuell? Fahre ich in Urlaub? Möchte ich, dass der Regensensor im Regenfall bestimmte Dinge tut oder lieber nicht? usw.

o.k., ich schweife ab. Ist eben nur das Ergebnis langen Nachdenkens, wie man die Möglichkeiten des Frameworks sinnvoll einsetzt.
Ich hänge mal ein paar Screenshots meiner derzeitigen Alpha des iPod-Web Interface an.
Grüße
DocMarten

IMG_0012.PNG

IMG_0006.PNG

IMG_0007.PNG

IMG_0009.PNG

IMG_0008.PNG

IMG_0010.PNG

WooooW, wie geil ist das denn. Bitte weiter machen und für uns zur Verfügung stellen. Das ist genau das, was ich immer gesucht habe!!!

wie siehts mit der Geschwindigkeit aus? Ich hab mit dem Ipod Frontend immer ein bisschen wartezeiten…

Hy@all,
Das sieht ja genial aus!
Wenn es mit der geschwindigkeit funzt ?
Dickes Lob !!!:smiley:

Hallo zusammen,
komme berufsbedingt mangels Zeit und wegen Umzugs meiner IP Symcon Installation auf einen neuen Rechner inkl. Umstieg auf v2 nur schleppend voran.

Die Geschwindigkeit ist IMO absolut ok. Wofür ich noch keine Lösung gefunden habe (was wahrscheinlich daran liegt, dass ich kein Programmierer bin) ist, dass ich nach dem Anklicken eines Befehls (Rolladen hoch, Licht an usw.) auf derselben Seite bleibe. Derzeit wird dann immer die Startseite neu geladen.

Meine Herangehensweise war die, den im ersten Post verlinkten Link zur Demo-Anwendung aufzurufen, lokal zu speichern und dann den Code der index.html Stück für Stück zu ändern, u.a. durch Einfügen des php Codes und Umbenennen in index.php.

Für alle, die schon selbst mal basteln wollen: Das SDK habe ich jetzt erst gefunden, ist etwas versteckt: iPhone and iPod Touch development - WebApp.Net bzw.:

Site iPhone and iPod Touch development - WebApp.Net
Doc WebApp.Net documentation: Installation
Demo http://webapp.net.free.fr/Demo/
Forums WebApp.Net Support Forum

Die index.php zu den Screenshots aus meinem Post sieht (unaufgeräumt und mit teilweise noch funktionslosen Sektionen) so aus:

<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	
		<title>WebApp.Net Demo</title>
		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
		<meta name="apple-mobile-web-app-capable" content="yes">

		<link rel="Stylesheet" href="Index-Dateien/Render.css">
		<link rel="Stylesheet" href="Index-Dateien/Global.css">
		<script type="text/javascript" src="Index-Dateien/Logic.js"></script>

		<script type="text/javascript">
			
			(new Image()).src = "Design/Img/bg-img.png";

			function tabs(s) {
				WA.Header(!s, "tab1");
				return false;
			}

/*
			var a = document.createElement("div");
			a.innerHTML = "<s" + "cript text='text/javascript'> alert('ok') </scr" + "ipt>";

			eval(a.getElementsByTagName("script")[0].firstChild.nodeValue);
*/
		</script>
	</head>
 
  <body -dir="rtl">
     <?php 
 	$Regen = GetValueBoolean("Regenmelder.Status");
	if ($Regen)
  	{
  $Regen = "Es regnet";
  }
  else
  {
  $Regen="Es regnet nicht";
  }
  
  $temp_wco = round(GetValueFloat("wco__temp_actual_state_FHT-response"), 2);
	$temp_az = round(GetValueFloat("az__temp_actual_state_FHT_response"), 2);
	$temp_kueche = round(GetValueFloat("kue__temo_actual_state_FHT-response"), 2);
  $anaus = GetValueBoolean("Licht_Terrasse_unten_Skript");   
 	$downtime_AZ = 15;
    if(isset($action))
    {
      if($action=="Licht_Terrasse_unten_Skript") 
        {
      	SetValueBoolean("Licht_Terrasse_unten_Skript", !GetValueBoolean("Licht_Terrasse_unten_Skript"));
      	//Toggelt ein/aus, indem das Gegenteil des aktuellen Status gesetzt wird. 
        //    <meta name="viewport" content="width=320" />   
        //    <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="ipod.css" type="text/css" />  

        }
      if($action=="Rolladen_Bad_Zu") 
        {    
  	     FS20_SwitchMode(28088, false);
        }
      if($action=="Rolladen_Bad_Auf") 
        {
        FS20_SwitchMode(28088, true);
        }
      if($action=="Rolladen_Bad_Lueften") 
        {
  	    FS20_SwitchMode(28088, false);
  	    sleep($downtime_AZ);
        FS20_SwitchDuration(35105, true, 3);
         }
      if($action=="Rolladen_WZ_Zu") 
        {    
  	     FS20_SwitchMode(35105, false);
        }
      if($action=="Rolladen_WZ_Auf") 
        {
        FS20_SwitchMode(35105, true);
        }
      if($action=="Rolladen_WZ_Lueften") 
        {
  	    FS20_SwitchMode(35105, false);
  	    sleep(35);
        FS20_SwitchDuration(35105, true, 8);
        }
      if($action=="Rolladen_AZ_Zu") 
        {    
  	     FS20_SwitchMode(17393, false);
        }
      if($action=="Rolladen_AZ_Auf") 
        {
        FS20_SwitchMode(17393, true);
        }
      if($action=="Rolladen_AZ_Lueften") 
        {
        FS20_SwitchMode(17393, false);
        sleep($downtime_AZ);
        FS20_SwitchDuration(17393, true, 3);
        }
      if($action=="Rolladen_Kueche_Zu") 
        {
        FS20_SwitchMode(63244, false);
        }
      if($action=="Rolladen_Kueche_Auf") 
        {
        FS20_SwitchMode(63244, true);
        }      
        if($action=="Rolladen_Kueche_Lueften") 
        {
        FS20_SwitchMode(63244, false);
        sleep(25);
        FS20_SwitchDuration(63244, true, 4);
        }
      if($action=="Rolladen_Alle_Auf") 
        {
        FS20_SwitchMode(42687, false);
        }
      if($action=="Rolladen_Alle_Zu") 
        {
        FS20_SwitchMode(42687, true);
        }
      if($action=="Rolladen_Alle_Lueften") 
        {
        FS20_SwitchMode(42687, false);
        sleep(35);
        FS20_SwitchDuration(63244, true, 4);
        // Kche
        FS20_SwitchDuration(17393, true, 3);
        // Arbeitszimmer
        FS20_SwitchDuration(35105, true, 8);
        // Wohnzimmer
        FS20_SwitchDuration(28088, true, 3);
        // Bad
        }
      
      if ($anaus =="TRUE") 
        {
        $status="AN";
        }
      else 
        {
        $status="AUS";
        }
      }
    ?>        


<div style="min-height: 743px;" class="landscape" id="WebApp">
  <div id="iHeader">
    <div style="opacity: 1; display: block;">
	<a style="display: none;" href="#" id="waBackButton">Home</a>
	<a style="display: none;" href="#" id="waHomeButton">Home</a>
	<a href="#" onclick="return WA.HideBar()"><span style="display: block;" id="waHeadTitle"MeinHaus</span></a>
    </div>
  </div>
	
<div id="iGroup">
	<div style="display: block;" class="iLayer" id="waHome" title="Home">
		
		<div class="iMenu">
			<h3>Haussteuerung</h3>
			<ul class="iArrow">
				<li class=""><a href="#_List_Rooms"><span>Kche, Bad...</span>Rume</a></li>
				<li class=""><a href="#_List_Actions"><span>Lften, Heizen...</span>Aktionen</a></li>
				<li class=""><a href="#_Lists3"><span>Wetter, Temperaturen...</span>Info</a></li>
				<li class=""><a href="#_Media"><span>Video, Audio...</span> Media</a></li>
			</ul>
		</div>
	</div>

  <div style="display: none;" class="iLayer" id="waList_Rooms" title="Rume">
  <a style="display: none;" href="#" rel="action" class="iButton iBClassic" onclick="return tabs(1)"><img src="Index-Dateien/more.png" alt="More"></a>
		<div class="iLoader" id="list-loader" style="margin: 50px 0pt;">
			Loading please wait ...
		</div>
		
    <div style="display: none;" class="iBlock iItem" id="list2"></div>
    		<div class="iMenu">
			<ul class="iArrow">
				<li class=""><a href="#_Living">Wohnzimmer</a></li>
				<li class=""><a href="#_Kitchen">Kche</a></li>
				<li class=""><a href="#_Bathroom">Bad</a></li>
				<li class=""><a href="#_Office">Arbeitszimmer</a></li>
				<li class=""><a href="#_Waterloo">WC oben</a></li>
				<li class=""><a href="#_Terraces">Terrassen</a></li>
			</ul>
			</div>		
	</div>
	
		<div style="display: none;" class="iLayer" id="waList_Actions" title="Aktionen">
  <a style="display: none;" href="#" rel="action" class="iButton iBClassic" onclick="return tabs(1)"><img src="Index-Dateien/more.png" alt="More"></a>
			<div class="iLoader" id="list-loader" style="margin: 50px 0pt;">
			Loading please wait ...
		</div>
		<div style="display: none;" class="iBlock iItem" id="list2"></div>

		<div class="iMenu">
			<ul class="iArrow">
				<li class=""><a href="#_Lueften">Lften</a></li>
				<li class=""><a href="#_Shaders">Rollden</a></li>
				<li class=""><a href="#_Heating">Heizen</a></li>
				<li class=""><a href="#_Light">Licht</a></li>

			</ul>
			<ul>
		</div>		
	</div>

	<div style="display: none;" class="iLayer" id="waLiving" title="Wohnzimmer">
		<div style="min-height: 699px;" class="iList">
			<ul class="iArrow">
				<li class=""><a href="index.php?action=Rolladen_WZ_Zu"><img src="images/down.gif"><em>Rolladen schlieen</em></a></li>
				<li class=""><a href="index.php?action=Rolladen_WZ_Auf" ><img src="images/up.gif"><em>Rolladen ffnen</em></a></li>
				<li class=""><a href="index.php?action=Rolladen_WZ_Lueften" ><img src="images/vent.gif"><em>Rolladen: Lften</em></a></li>
				<li class=""><a href="index.php?action=Licht_Terrasse_unten_Skript" >
 
        <?php $status_Licht_Terrasse_unten = GetValueBoolean("Licht_Terrasse_unten_Skript");
         if ($status_Licht_Terrasse_unten =="TRUE") 
        {
        $linie="<img src=\"images/light_on.gif\" > <em>Terrasse unten ein</em></a></li>";
        }
      else 
        {
        $linie="<img src=\"images/light_off.gif\" > <em>Terrasse unten aus</em></a></li>";
        }
        ?>
        <?php print $linie ?>
        
		<div class="iBlock">
			<p>Raumtemperatur: <?php print $temp_wco ?><sup>o</sup>C <br>
			Am Thermostat eingestellt: <?php print round(GetValueFloat("wz_temp_target_state_IPS-request"), 2)?><sup>o</sup>C
			Ventilposition: <?php print GetValueFloat("wz__position_actual_state_FHT_response")?>&percnt;</p>
			<p>Auentemperatur: <?php print round(GetValueFloat("KS300_Temperatur"), 4) ?><sup>o</sup>C <BR>
			<?php print $Regen ?></p>

		</div>
				
			</ul>
		</div>
	</div>
		<div style="display: none;" class="iLayer" id="waOffice" title="Arbeitszimmer">
		<div style="min-height: 699px;" class="iList">
			<ul class="iArrow">
				<li class=""><a href="index.php?action=Rolladen_AZ_Zu"><img src="images/down.gif"><em>Rolladen schlieen</em></a></li>
				<li class=""><a href="index.php?action=Rolladen_AZ_Auf" ><img src="images/up.gif"><em>Rolladen ffnen</em></a></li>
				<li class=""><a href="index.php?action=Rolladen_AZ_Lueften" ><img src="images/vent.gif"><em>Rolladen: Lften</em></a></li>
			      
		<div class="iBlock">
			<p>Raumtemperatur: <?php print $temp_az ?><sup>o</sup>C <br>
			Am Thermostat eingestellt: <?php print round(GetValueFloat("az_temp_target_state_IPS-request"), 2)?><sup>o</sup>C
			Ventilposition: <?php print GetValueFloat("az__position_actual_state_FHT_response")?>&percnt;</p>
			<p>Auentemperatur: <?php print round(GetValueFloat("KS300_Temperatur"), 4) ?><sup>o</sup>C <BR>
			<?php print $Regen ?></p>

		</div>
				
			</ul>
		</div>
	</div>
			<div style="display: none;" class="iLayer" id="waKitchen" title="Kche">
		<div style="min-height: 699px;" class="iList">
			<ul class="iArrow">
				<li class=""><a href="index.php?action=Rolladen_Kueche_Zu"><img src="images/down.gif"><em>Rolladen schlieen</em></a></li>
				<li class=""><a href="index.php?action=Rolladen_Kueche_Auf" ><img src="images/up.gif"><em>Rolladen ffnen</em></a></li>
				<li class=""><a href="index.php?action=Rolladen_Kueche_Lueften" ><img src="images/vent.gif"><em>Rolladen: Lften</em></a></li>
			      
		<div class="iBlock">
			<p>Raumtemperatur: <?php print $temp_kueche ?><sup>o</sup>C <br>
			Am Thermostat eingestellt: <?php print round(GetValueFloat("az_temp_target_state_IPS-request"), 2)?><sup>o</sup>C
			Ventilposition: <?php print GetValueFloat("az__position_actual_state_FHT_response")?>&percnt;</p>
			<p>Auentemperatur: <?php print round(GetValueFloat("KS300_Temperatur"), 4) ?><sup>o</sup>C <BR>
			<?php print $Regen ?></p>

		</div>
				
			</ul>
		</div>
	</div>
	
  <div style="display: none;" class="iLayer" id="waImage2" title="List with image2">
		<div style="min-height: 699px;" class="iList">
			<ul class="iArrow">
				<li class=""><a href="index.php?action=Rolladen_AZ_Zu"><img src="images/down.gif" height="29"><em>Rolladen zu</em></a></li>
				<li class=""><a href="index.php?action=Rolladen_AZ_Auf"><img src="Index-Dateien/image.png" height="29"><em>Rolladen Auf</em></a></li>
				<li class=""><a href="#_Article" target="_blank"><img src="Index-Dateien/image.png" height="29"><em>List item three</em></a></li>
			</ul>
		</div>
	</div>
	<div class="iLayer" id="waArticle" title="Async Viewer Demo">
		<div class="iBlock">
			<h1>Nothing to Read</h1>
			<p>No article have been loaded yet. Check asynchronous list to load an article.</p>
		</div>
	</div>	
		<div class="iLayer" id="waArticle2" title="Async Viewer Demo">
		<div class="iBlock">
			<h1>Nothing to Read</h1>
			<p>No article have been loaded yet. Check asynchronous list to load an article.</p>
		</div>
	</div>	
	
	<div class="iLayer" id="waMedia" title="Media Sample">
		<div class="iList">
			<ul class="iArrow">
				<li class=""><a href="http://webapp-net.com/Demo/Media/sample.mp3" rev="media"><img src="Index-Dateien/image.png" height="29">MP3 audio file</a></li>
				<li class=""><a href="http://webapp-net.com/Demo/Media/sample_iPod.m4v" rev="media"><img src="Index-Dateien/image.png" height="29">iPod sample video</a></li>
			</ul>
		</div>
	</div>
<div id="wa__radio" class="iLayer"></div>
</div>

	
</div>
</div>
</body>
</html>

Möglicherweise kommt Ihr ja damit schon etwas weiter.
cu
DocMarten

Zum weitern Ausbau hatte ich mir gewünscht, Zeit-, Datums-, Dimmer- oder Temperatureinstellungen mit dem typischen Spinning Wheel machen zu können, glaubte aber nicht, dass das in einem Webfront machbar sei. Heute habe ich das Ungalubliche gefunden: [updated] Spinning wheel on webkit for iPhone/iPod touch | Cubiq.org
Einfach mal mit dem Touch oder Phone die Testseite ansteuern (geht nicht mit normalen Browsern): Spinning Wheel for iPhone/iPod touch
Wenn mit jetzt noch jemand sagen könnte, wie man das in den obigen Code integriert und Werte an IPS Module übergibt, z.B. an einen S20 Dimmer, dann hätte ich wieder mal ein paar Wochen zu tun…?
Viele Grüße
DocMarten

Hi,

hast Du evtl. mal eine abgespeckte Version Deiner Website. Ich würde gerne etwas rumspielen, wahrscheinlich kann ich Dir auch helfen, aber der Riesencode, da vergeht mir die Lust. Einfach per Cut & Paste ist ja nicht möglich, da dann bei mir nur Fehlermeldungen auftreten werden.

Also bitte nur ein Gerät schaltbar machen, damit die Anpassung schnell läuft.

Deine Datumsauswahl würde ich nicht über das iPhone-Spezifische Tag erstellen. Du musst dann weitere Seiten für den PC erstellen. Du kannst aber drei Auswahlfelder benutzen, die funktionieren in allen Browsern und das iPhone zeigt die Felder als Spinning Wheel an.

Ich wünsche einen schönen Tag.

Christoph.

Hi Christoph,
anbei Zip mit Minimalversion: ein FS20 SwitchMode. Wenn Du einen hast und die ID in der Index.php anpasst, müsste das klappen. Ansonsten ein anderes Modul nehmen. Ordner mit dem Unterordner unterhalb /webfront entpacken. Aufruf je nach Port: [your IP]:80/webfront/wasi/Index.php

Probleme, die ich sehe:

  1. Nach Abschicken eines Befehls (<a href=„index.php?action=Auf“ >") auf der Seite bleiben und nicht automatisch zu Home zurückkehren (habe mit Frames etc. herumgespielt, klappt aber nicht).
  2. Bestimmte Werte müssten ja dynamisch in bestimmten Zeitabständen aktualisiert werden (Temperaturen, Ventilpositionen usw.). Auto-Reload? Dynamisches Nachladen (in der Original WebApp Demo ist so etwas meine ich vorgesehen).
  3. Spinning Wheel: Ich weiss wohl, dass Select-Felder auf dem iPod zum Spinning Wheel werden. Aber man hätte natürlich gern etwas, bei dem der Dimmer auch schon in dem Moment dimmt, in dem man am Rad dreht, und nicht erst nach Absenden des Befehls.
    Bin gespannt.
    Grüße
    DocMarten

wasi.zip (26.8 KB)

Hi,

ich habe mir mal den Inhalt des Zipfiles angesehen und etwas rumprobiert. Immerhin es funktioniert, man kann damit tatsächlich Geräte schalten und die Titelzeile wird ausgeblendet.

Allerdings macht es eigentlich keinen Sinn das System einzusetzen, es sei denn, man möchte wirklich alles komplett über iPhone/iPod steuern. Die Webseiten funktionieren nämlich im IE nicht (Javascriptfehler) und im FF läufts, sieht aber sehr bescheiden aus.

Anbei mal die geänderten Dateien.
Index.php, ist wie zuvor nur ein paar Sachen sind geändert worden, damit beim Schalten nicht wieder ein Rücksprung zur Startseite erfolgt.
Allerdings ist es natürlich so, dass der Server die Geräte schaltet, also muss eine Seite vom Server geladen werden, damit auch geschaltet werden kann.

Das kann recht störend wirken. Hier helfen dann aber nur Frames. Ich habe mal ein Frameset hinzugefügt. Der Aufruf erfolgt mit frame.htm
Hier kann auch geschaltet werden, das Schalten läuft dann über die Seite schalte.php

Ich habe den Schaltframe rel. groß gemacht (80 Pixel hoch). So lassen sich noch Debugmeldungen ausgeben, solange die Seiten entwickelt werden. Später würde man den Frame 1 Pixel hoch machen, dann ist er nicht zu sehen.

Was im Framebespiel noch stört, ist dass jetzt die Buttons in Blau stehen bleiben. Hier müsste wahrscheinlich das CSS überarbeitet werden.

Ich wünsche einen schönen Tag.

Christoph.

_wasi_change.zip (30.1 KB)

Hi Christoph,
gerade aus dem Urlaub zurück, habe ich Deine Modifikarionen gefunden - super. Werde das ausprobieren und bin sehr gespannt, denn das mit dem Schalten im 1-Px-Frame hatte ich ja auch schon mal als Workaround ausprobiert, allerdings ohne Erfolg (Frames blieben nach Absenden des Schaltbefehls einfach schwarz).

In der Tat ist das eine rein auf iPod Touch/iPhone optimierte Steuerung, und diese Geräte werden bei mir auch die Hauptrolle bei der Steuerung spielen. Sollte dann doch noch mal ein großer Touchscreen mit normalem Browser hinzukommen, könte man sicher durch Verwendung eines anderen Stylesheets eine ordentliche Darstellung hinbekommen.
cu
DocMarten

Hallo Christoph,
endlich darf ich wieder (während des Urlaubs war zuhause der DSL Sync ausgefallen, und 1&1 hat uns, Doppelflat sei Dank, hier 14 Tage (in Worten: vierzehn!) ohne Telefon und Internet belassen).

Ich habe Deine Veränderungen jetzt mal ausprobiert. Das sieht schon mal sehr vileversprechend aus. Das mit den Frames klappt bei mir allerdings nicht so richtig, wie schon zu meinen eigenen vorherigen Frames-Versuchen verschwindet die Adressleite nicht, der Befehl bleibt blau (wie Du auch festgestellt hast) und bei nochmaligem Drücken des Befehls, selbst wenn man vorher in einer anderen Sektion der Seite war, wird alles schwarz.

Die Mods der index.php, die den Rücksprung zur Startseite verhindern, sind super. Du schreibst im Kommentar:

<!--cfcfcfcf Hinter Action angeben welche Liste angezeigt werden soll (hier _Living, aus id="waLiving" wird also #_Living
alternativ könnte der Schaltbefehl auf ein unsichtbares Frame zeigen, damit das Laden vom Server nicht sichtbar ist. 
Achtung unbegingt noch ein Dummyparameter mit angeben in der die Zeit übergeben wird, damit der Browser die Seite auch wirklich lädt!-->  

Letezteres verstehe ich nicht ganz - wie kann ich einen solchen Parameter übergeben? etwa als

<a href="index.php?dummytimer=12&action=Auf#_Living" >

Das bewirkt allerdings, dass dann ein zweites Absenden des Befehls nichts mehr bewirkt. Was mache ich falsch?
Vielen Dank & viele Grüße
DocMarten

Hallo DocMarten,

deshalb soll ja der Dummyparameter mit der Zeit übergeben werden, damit der Browser die Seiten nicht einfach aus dem Cache holt.

Allerdings weiß ich schon nicht mehr, wie das System genau funktionierte. Was ich damals meinte war etwas in dieser Art:

echo "<a href='index.php?dummytimer=".time()."&action=Auf#_Living'>";

Wenn Dein Link funktionierte, dann sollte das so gehen.

Ich wünsche einen schönen Tag.

Christoph.

Hallo Christoph,
ganz herzlichen Dank. Das funktioniert absolut perfekt und rückt den iPod in meinem Fall wieder einen Schritt näher an den Status „Perfektes Bedienerhandteil für IPS“. Nach einem Anführungszeichen-Lernprozess habe ich es so in die Seite integriert:


<?php
print 
"<li class=''> <a href='index.php?dummytimer=".time()."&action=Rolladen_WZ_Zu#_Living' >
[...]

Nach einem weiteren, längeren Lernprozess (in dem ich u.a. erfuhr, dass für php z.B. eine 9 aus einem Formular noch lange nicht gleich 9 ist, sondern dass man ihm erst sagen muss, dass man mit 9 auch wirklich 9 meint ;)), habe ich es hinbekommen, die Temperatureinstellung der FHTs über das Spinning Wheel zu realisieren (s. Anhang). Dazu habe ich folgenden Code in die HTML Seite integriert:

<?php 
$tmp_AZ = round(GetValueFloat(30092));  
$tmax=30;                               
$t=5;                                   
print "<form action=\"heating_az.php\">    
<select name=\"tmp\">";                 
while ($t < $tmp_AZ) 
{
print "<option>" . $t++ . "</option><br>";
}
print "<option selected>" . $t . "</option><br>";

$t = $t + 1;
while ($t <= $tmax)
{
print "<option>" . $t++ . "</option><br>";
}
print "
</select>
<input type=\"submit\" name=\"xyz\" value=\"Los!\" />
</form>";
?>

Bei Aufruf der Seite steht das Spinning Wheel auf der aktuell eingestellten Temperatur. Man kann dann eine neue Temperatur durch Drehen des Rades wählen und schickt diese per Submit an das Script heating_az.php:

<?
$warme = (float) $tmp;
FHT_SetTemperature(32877, $warme);
print "
<html><head>
<meta http-equiv='content-type' content='text/html; charset=ISO-8859-1'>
		<title>WebApp.Net Demo</title>
		<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;''>
		<meta name='apple-mobile-web-app-capable' content='yes'>

		<link rel='Stylesheet' href='Index-Dateien/Render.css'>
		<script type='text/javascript' src='Index-Dateien/Logic.js'></script>

		<script type='text/javascrip'>
			
			(new Image()).src = 'Design/Img/bg-img.png';

			function tabs(s) {
				WA.Header(!s, 'tab1');
				return false;
			}

/*
			var a = document.createElement('div');
			a.innerHTML = \"<s\" + \"cript text='text/javascript'> alert('ok') </scr\" + \"ipt>\";

			eval(a.getElementsByTagName\"script\")[0].firstChild.nodeValue);
*/
		</script>
	</head>
 
  <body -dir='rtl'>

    <div style='display: none;' class='iBlock iItem' id='list2'></div>
    		<div class='iMenu'>
			<ul class='iArrow'>
				<li class=''><a href='index.php#_Office'>$warme Grad eingestellt - >> Zurück</a></li>
			</ul>
			</div>		
	</div>
"
?>

Nach Absenden kommt man also auf eine Seite (s. Anhang), in der die eingestellte Temperatur bestätigt wird und man per „Zurück-Button“ wieder auf die vorherige Seite kommt.

Ist zwar funktional, aber halt doch noch so ein bissl der Schönheitsfehler, denn eigentlich hätt ich natürlich wieder gern, dass man nach Absenden des Temperaturbefehls wieder dorthin zurückkommt, wo man vorher war. Ich weiß aber leider nicht,wie man das bewerkstelligen könnte - könnte man denn die Variable aus dem Formular evtl. per a href… übergeben? Meine ganze Hoffnung ruht auf Christoph :wink:

Insgesamt muss ich sagen, dass ich - nachdem ich in letzter Zeit ein wenig mit dem iFront des Webfront experimentiert habe - meine steuerung nun doch mit diesem SDK machen werde. Das iFront bietet nämlich (zumindest bei mir) eine ziemlich schlechte Performance mit ewigen Ladezeiten, während die selbstgestrickte Alternative ziemlich perfomant in gefühlter Echtzeit agiert (mal abwarten, wenn ich alle Funktionen für alle Räume drinhabe…)
Grüße
DocMarten

fht_spinning_wheel.png

fht_ergebnisseite.png

Hallo DocMarten,

Du könntest Dein Formular nicht auf heating_az.php sondern gleich auf index.php zeigen lassen und dann dort die Temperatur einstellen, oder Du springst per Javascript von heating_az.php direkt wieder zu index.php#_Office.

Also einfach (so ziemlich) alles weglassen und bei onLoad weiterspringen. Ich weiß jetzt nicht auswendig was Du angeben musst (spontan fällt mir document.location.href ein). Bei selfhtml wird es aber stehen.

Ich wünsche einen schönen Tag.

Christoph.

P.S. Das bei Dir iFront langsam läuft dürfte nicht normal sein. Bei mir hat es früher nie funktioniert, aber sein der Version 2.1 klappt es plötzlich. Ich war von der Geschwindigkeit positiv überrascht.

Moin,

bei mir läuft iFront auch sehr langsam - schon an der Grenze zur Benutzbarkeit.
Deshalb bin ich an der hier vorgestellten Lösung von DocMarten sehr interessiert.

Das iFront ist leider recht langsam, vor allem, wenn in einer Liste viele Objekte sind. Apple hat den JavaScript-Interpreter halt etwas vernachlässigt, damit Applikationen lieber für Geld im Appstore landen. Mit http://IP:82/retromobile.php verliert man zwar die sofortige Aktualisierung, aber es ist wenigstens schnell.

Hallo,
danke Christoph, einmal mehr der entscheidene Tipp für einen HTML-/Javascript-Programmier-Laien, der bestenfalls noch rostige HTML-und Perl-Kenntnisse aus den mittleren 90ern hat;
Das Heating-Script sieht nun so aus:

<?
$warme = (float) $tmp;
FHT_SetTemperature(32877, $warme);
print "
<html><head>
<body onLoad=\"document.location.href='index.php?dummytimer=".time()."#_Office'\">
"
?>

Ich habe den Dummy-Timer (aus Christophs Lektion 2 ;)) eingesetzt, da der Pod sonst die alte Seite aus dem Cache fischt.

Im Hauptscript habe ich eine klitzekleine Änderung vorgenommen und die FHT „Target Temperatur“ gegen die „Target Temperature Pending“-Variable ausgetauscht, damit direkt nach dem Abschicken und dem Reload der Seite das Spinning Wheel den eingestellten Wert anzeigt - es dauert ja immer ein paar Sekunden, bis „Target Temperatur“ bzw. das FHT80b den eingestellten Wert annimmt.

Damit kommt der iPod nach dem Einstellen der Temperatur via Spinning Wheel und Absenden also in der Tat auf die Seite zurück und zeigt das Spinning Wheel (bzw. zunächst einmal das klassische Dropdown-Feld) mit der gerade eingestellten Temperatur.

Grüße
Martin

Hallo Christoph, Hocky & Horst,

leider habe ich (offensichtlich ebenso wie Hocky und Horst) nicht das Glück, dass das iFront bei mir wirklich benutzbar rund liefe. Beim Ladeprozess bei Aufruf dauert es bis zu 45 sec., bis die Seite vollständig geladen ist. Ich habe keine komplizierte Konfiguration: 5 FHTs, 10 FS20 MS, Funkschalter und Fernbedienungen, KS300, Regensensor. Außerdem holpern bei mir auch doch noch immer wieder mal Funktionalitäten des iFront. Zudem hat es natürlich Charme, mittels des SDK bzw. in meinem Fall durch Brachial-Coding (und Christophs punktuelle, aber entscheidende Hilfe :wink: ) eine 100% auf die eigenen Vortellungen optimierte iPod Oberfläche hinzubekommen. Auch wenn ich sicher bin, dass das iFront in absehbarer Zeit (wenn noch ausgereifter und performanter) konkurrenzlos sein wird, weil es einfacher superbequem ist.

In der Zwischenzeit wäre es für mich interessant, ob noch jemand aktiv mit dem Code experimentiert, denn man könnte dann - wenn mal alles läuft, zusammen auch eine schöne Step-by-Step-Anleitung machen, wie man eine individualiserte Webfront für iPhone/iPod Touch hinbekommt.
Grüße
Martin

Moin DocMarten,

leider gehen meine HTML, PHP und allgemeinen Programmierkenntnisse gegen Null. Ich hab das letzte Mal an der Uni C++ programmiert und das ist mittlerweile fast 15 Jahre her.
Momentan reicht es gerade noch, einfach PHP-Scripte für serielle Schaltfolgen für IPS zu programmieren.
Von fürchte ich bin ich wenig hilfreich. Ich wüsste jetzt noch nichtmal wie ich Deine Scripte bei mir zum Rennen kriege.
Wenn Dir aber was einfällt was ich tun kann, dann sag bescheid.

Moyn,
kurzer Zwischenstand meines Projektes. Folgende meiner Wunschfunktionen habe ich mittlerweile umsetzen können:

[ol]
[li]Schalten einzelner Rolläden und Rolladengruppen
[/li][li]Einzelne Rolläden oder -Gruppen in Lüftungsposition (d.h. erst schließen und dann eine definierte Zeit wieder öffnen)
[/li][li]Licht schalten
[/li][li]Licht dimmen - über Spinning Wheel
[/li][li]FHT80b: Raumtemperatur, eingestellte Temperatur, Ventilposition, Modus, Batterie anzeigen
[/li][li]FHT80b: Temperatur über Spinning Wheel einstellen
[/li][li]Tuner einschalten und Eingang auf Aux setzen (über FS20 IR Sender)
[/li][li]Webradio: Sender auf IPS Rechner über Mediaplayer Instanz abspielen
[/li][li]Webradio: Lautstärke der Mediaplayer-Instanz über Spinning Wheel einstellen
[/li][li]Webradio: Dieselben Sender, die für das Abspielen auf dem IPS Rechner angeboten werden, alternativ oder zusätzlich direkt auf dem iPod streamen (cool das, ich bin selbst ganz begeistert)
[/li][/ol]
Insgesamt bin nach einigen Wochen Selbstversuch extrem angetan vom Konzept, den iPod Touch zur Steuerung zu verwenden. Exzellenter WLAN Empfang, schnelles Verbinden nach Einschalten, universale Gestaltungsmöglichkeiten der Steuerung usw. Ich werde demnächst mal ein paar aktualisierte Screenshots posten.
Mangels Zeit und wegen der Tatsache, dass ich für jede neue Idee erst einmal Neues aus der Programmiererwelt lernen muss (dank meiner Webradio-Idee weiß ich jetzt z.B., dass das, was ich dafür suchte, Array heißt ;)) geht all dies in eher kleinen Schritten voran. Bei ein paar Dingen bin ich auch nicht sicher, ob ich die ohne fremde Hilfe hinbekomme - z.B. würde ich Funktionen wie Dimmen oder Lautstärkeeinstellungen per Spinning Wheel gern so mit Ajax lösen, dass die Seite nicht (wie derzeit durch Absenden eines Formulars) neu geladen werden muss, sondern die Funktion praktisch live während des Drehens am Rad ausgeführt wird. Dass das wohl geht, weiß ich, bloß wie…? Tipps und Code werden gern entgegen genommen…
Gürße
Martin