Anpassung von knxweb für iPod

Ausgangslage

knxweb ist von Haus aus nicht für Touch Devices ausgelegt. Das führt dazu, dass ein Bedienelement zweimal berührt werden muss, bevor eine Aktion ausgelöst wird (einmal für mouseover und einmal für onclick). Ein langer Tastendruck im Browser funktioniert gar nicht, weil dann die iOS Funktion "save as image" aufgerufen wird. Zumindest der Doppel-Touch lässt sich vermeiden, mit folgenden Quick-and-Dirty Anpassungen.

1. Zusatzfunktionen zum Abfangen der Device-Eigenschaften

Im File knxweb/js/common.js sind Funktionen abgelegt, welche mehrfach verwendet werden. Das ist der geeignete Ort für Funktionen, welche spezifisch zwischen Mouse-Klicks und Touch-Aktionen unterscheiden. Als geeignetes Verfahren zur Unterscheidung habe ich dafür die Funktion "navigator.platform" gefunden. Die drei neuen Funktionen setActionClick, setActionDown und setActionUp, welche den Code um die Touch-Funktionen erweitern, habe ich am Ende des Files ergänzt.

2. Anpassen einzelner Widget-Codes

Für folgende Widgets habe ich Code-Anpassungen gemacht: knxweb/js/ccamera.js, knxweb/js/cdimmer.js, knxweb/js/cgoto.js, knxweb/js/cmulti.js und knxwweb/js/cswitch.js. Diese drei habe ich auch angepasst aber nicht getestet: knxweb/js/cthermostat.js, knxweb/js/cthermostat2.js und knxweb/js/cvalue.js. Hier können alle Source-Files in einem Tar-File runtergeladen werden.

3. Anpassen der Auflösung auf dem iPod

Damit knxweb im Safari des iPod sinnvoll dargestellt wird, sollte die Auflösung im HTML-Dokument geeignet mitgegeben werden. Diese Anpassung wird im File knxweb/design.html gemacht, dessen erste 5 Zeilen nun so aussehen, wobei der Meta-Tag viewport ausschlaggebend ist:

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta id="viewport" name="viewport" content="width=240;initial-scale=1.0; user-scalable=0;" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />

4. Langen Tastendruck ermöglichen

Ein unerwünschter Effekt tritt auf dem iPod auf, wenn man mit dem Finger zu lange auf einem Bedienelement bleibt, zum Beispiel beim Dimmersymbol. Dann erscheint nämlich das Popupmenu zum Speichern der Graphikdatei. Nach langem Suchen habe ich schliesslich die Lösung gefunden: Das Stylesheet css/style.css muss entsprechend angepasst werden.

Das "body" Element erhält zusätzlich die Zeile "-webkit-touch-callout:none;" und sieht jetzt so aus:

body {
        font-size: 11px;
        font-family: Arial, Helvetica, sans-serif;
        color: #000;
        background: #FFF;
        margin: 0 0 0 0;
        -webkit-touch-callout:none;
}

5. Navigation für iPod

Statt einer flachen Sicht für die Visu-Bedienung wie auf einem PC habe ich für den iPod eine hierarchische Menüführung erstellt. Das sieht dann beispielsweise für drei einzelne Seiten so aus.

Die Icons mit den Buchstaben dienen dabei als Anker für den Aufruf der einzelnen Räume. So kann von jeder Seite direkt auf jede andere Seite gesprungen werden. H steht dabei für Home und Z für Szenen, die anderen für Terrasse, Bad, Dusche, Reduit, Schlafzimmer, Arbeitszimmer, Gästezimmer, Wohnzimmer, Küche, Korridor, Eingang.

othmar(at)truniger.ch
Letzte Änderungen:
04.03.2011: Erstellung des Dokuments
05.05.2001: Anpassung Stylesheet zur Vermeidung des "Save Menu bei langem Tastendruck"