|
Die hier gezeigten Techniken nehmen zwar Bezug
auf das Apple iPhone, können aber durch Anpassung der Anzeigegröße
an die Displayauflösung auch für jedes andere internetfähige
Mobiltelefon umgesetzt werden. Einzige Voraussetzung ist die Unterstützung
von JavaScript und im speziellen von HTTP-Request-Objekten (AJAX-Technik).
Was die Anzeige des iPhone betrifft, gibt
es zwei Varianten:
Um die Erstellung der Webseite einfach zu
halten, sollte man sich für eine Variante entscheiden und die Webseite
entsprechend aufbauen.
Bei vorhandenem WLAN-Zugang funktioniert das gezeigte Beispiel
auch auf allen iPod Touch Modellen! |
Beispiel - Rollade mit dem iPhone steuern
In diesem Beispiel sollen die Schalteingänge
einer elektrischen Rollade über die Outputs eines Web-IO
2xDigital aus dem iPhone bedient werden.
Wie bereits angedeutet, ist es bei Webseiten,
die speziell für das iPhone optimiert sein sollen wichtig, die verwendeten
HTML-Elemente von Größe und Position pixelgenau zu definieren.
Die Zeichnung soll bei der Anordnung der Elemente
und beim Verständnis des folgenden Quelltextes helfen.
|
<user.htm>
<html>
<head>
<title>Aktuelles Klima</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="viewport"
content="width=320" />
<style type="text/css">
<!--
* { font-family:Verdana, Helvetica;
}
.description { position:absolute;
text-align:center;
font-size:18px;
left:0px;
height:25px;
width:320px;
}
.confirm {
position:absolute;
background-color:#99CCFF;
left:0px;
height:160px;
width:320px;
}
.buttons
{ position:absolute;
font-size:50px;
width:280px;
height:120px;
left:20px;
}
-->
</style>
</head> |
|
Der Quelltext beginnt mit dem Web-IO spezifischen Tag <user.htm>,
welches das Web-IO für die interne Zuordnung ins File-System benötigt.
Das <user.htm> Tag wird vom Web-IO
nicht an den Browser weitergegeben.
Dann folgt der normale <head>-Bereich der Webseite. Wichtig ist
die Angabe "viewport". Hiermit
wird das normalerweise vom iPhone praktizierte Auszoomen der Webseite
auf 320 Pixel begrenzt, so dass die Webseite immer komplett und in der
gewünschten Skalierung angezeigt wird.
Im weiteren Verlauf des Quelltextes werden DIV-Elemente zur Beschreibung
und Anzeige angelegt. Für diese Elemente finden sich entsprechende
CSS-Style Informationen im Kopf. Unter anderem um Höhe und
linke Position zu definieren.
|
<body>
<div class="description"
style="top:5px;">Rolladen Steuerung</div>
<div id="go_up"
class="confirm" style="top:30px;"></div>
<input type="button" class="buttons"
onclick="goup();" style="top:50px;"
value="AUF">
<div id="go_dw"
class="confirm" style="top:190px;"></div>
<input type="button" class="buttons"
onclick="godown();" style="top:210px;"
value="ZU">
</body>
</html> |
|
Es folgt der <body>-Bereich der Webseite. Hier werden die im Kopf
definierten CSS-Klassen, so wie die top-Angaben
genutzt, um die einzelnen DIV-Elemente in Position zu bringen. Den DIV-Elementen,
die nach Laden der Webseite noch geändert werden sollen, wird jeweils
eine ID zugeordnet. Den Buttons wird über
onclick zugeordnet, welche JavaScript Funktion
sie aufrufen sollen.
|
<script language="JavaScript" type="text/javascript">
function DataRequest(sendstring)
{ var xmlHttp = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP")
: xmlHttp = new XMLHttpRequest();
if (xmlHttp)
{ xmlHttp.onreadystatechange = function()
{ if (xmlHttp.readyState ==
4)
{ if (xmlHttp.status
== 200)
{ var
ReceiveData = xmlHttp.responseText.split(";");
if
(ReceiveData[1]=='2')
{
document.getElementById('go_up').style.backgroundColor=
'#99CCFF';
}
if
(ReceiveData[1]=='1')
{
document.getElementById('go_dw').style.backgroundColor=
'#99CCFF';
}
xmlHttp=null;
}
}
}
xmlHttp.open("GET",
sendstring, true);
xmlHttp.setRequestHeader("Connection",
"close");
xmlHttp.setRequestHeader("If-Modified-Since",
"Thu, 1 Jan 1970 00:00:00 GMT");
xmlHttp.send(null);
}
}
function godown()
{ DataRequest('outputaccess0?PW=&State=ON&')
document.getElementById('go_dw').style.backgroundColor=
'#CCCCCC';
}
function goup()
{ DataRequest('outputaccess1?PW=&State=ON&')
document.getElementById('go_up').style.backgroundColor=
'#CCCCCC';
}
</script>
|
|
Kernstück der Webseite ist der JavaScript Teil, der im <head>-Bereich
der Webseite untergebracht wird. Die Funktionen
goup() und godown() rufen die DataRequest
Funktion auf, und übergeben als Kommandostring den Web-IO spezifischen
Befehl zum Setzen des gewünschten Output. Mit der Methode document.getElementById
wird außerdem das unter dem Button liegende DIV-Element grau gefärbt,
um dem Nutzer zu signalisieren, dass sein Button-Klick erkannt wurde.
Die in der DataRequest Funktion eingebettete Empfangs-Funktion färbt
das DIV-Element nach empfangener Bestätigung wieder hellblau.
Die Webseite ist damit fertig und muss nur noch in das Web-IO hochgeladen
werden.
Da die Outputs die Rolladensteuerung nur mit einem kurzen Puls ansprechen
sollen, muss für beide Outputs noch eine Pulslänge von 1000ms
vorgegeben werden.
|
