Hallo,
ich habe ein 7 und ein 10 Zoll Tablet. Mit Hilfe von Apache und Server Side Includes (SSI) ist es möglich, in Abhängigkeit von der IP-Adresse des Tablets ein bestimmtes Tablet-UI Layout an den Browser auszuliefern und so die unterschiedlichen Display-Größen optimal auszunutzen. Oder man konfiguriert eine Device abhängige Rastergröße oder ...
Zunächst konfigurieren wir den Apache so, dass er SSIs unterstützt. Als erstes muss das SSI-Modul eingebunden werden:
cd /etc/apache2/mods-enabled
ln -s ../mods-available/include.load include.load
Danach wird der aktive virtuelle Host (normalerweise /etc/apache2/sites-enabled/000-default) um die Option "+Includes" sowie die Direktive "XBitHack" erweitert. Meine 000-default ist unten eingefügt. Sollte auch in anderen FTUI/Apache Umgebungen ähnlich aussehen. Bitte beachten: ich habe den Apache so konfiguriert, dass FTUI über Port 8080 aufgerufen wird, da 80 bei mir schon durch einen anderen Dienst belegt ist:
<VirtualHost *:8080>
ServerAdmin webmaster@localhost
DocumentRoot /opt/fhem/www
<Directory />
Options FollowSymLinks
AllowOverride None
</Directory>
<Directory /opt/fhem/www/>
Options Indexes FollowSymLinks MultiViews +Includes
AllowOverride None
Order allow,deny
allow from all
XBitHack on
</Directory>
# Erspart uns das Umbenennen von Links
Alias /fhem /opt/fhem/www
# Hier kommt noch die CGI Konfiguration
# Hier nicht relevant
ErrorLog ${APACHE_LOG_DIR}/error.log
# Possible values include: debug, info, notice, warn, error, crit,
# alert, emerg.
LogLevel warn
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
Die Direktive XBitHack ermöglich es, durch einfaches Setzen des Execute-Flags bei den HTML-Dateien SSI-Statements zu verwenden. Ohne diese Option müsste man alle HTML Dateien in .shtml umbenennen und noch ein paar weitere Optionen setzen. So ist es jedenfalls einfacher.
chmod +x *html
Nach einem Neustart des Apache Servers können SSI-Befehle in den HTML-Dateien verwendet werden. Im folgenden Beispiel wird ein zusätzliches Widget ausgegeben, wenn die Anfrage von der IP-Adresse 192.168.1.66 kommt (10 Zoll Tablet). Falls nicht, wird das Widget weggelassen (7 Zoll Tablet):
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="5" data-template="inc_menu.html"></li>
<li data-row="1" data-col="2" data-sizex="2" data-sizey="1" data-template="inc_actweather.html"></li>
<li data-row="1" data-col="3" data-sizex="3" data-sizey="1" data-template="inc_cal.html"></li>
<li data-row="1" data-col="7" data-sizex="2" data-sizey="1" data-template="inc_info.html"></li>
<li data-row="2" data-col="2" data-sizex="3" data-sizey="3" data-template="inc_radio.html"></li>
<li data-row="2" data-col="5" data-sizex="4" data-sizey="3" data-template="inc_weather.html"></li>
<li data-row="5" data-col="2" data-sizex="3" data-sizey="1" data-template="inc_trash.html"></li>
<li data-row="5" data-col="5" data-sizex="4" data-sizey="1" data-template="inc_alert.html"></li>
<!--#if expr='"$REMOTE_ADDR" = "192.168.1.66"' -->
<li data-row="6" data-col="2" data-sizex="2" data-sizey="1">
<div class="cell">Mehr Platz auf dem 10 Zoll Tablet</div>
</li>
<!--#endif -->
</ul>
</div>
Die SSI-Befehle beginnen immer mit <!--# und werden wie ein HTML-Kommentar mit --> abgeschlossen.
Natürlich kann man die SSI-Befehle an jeder Stelle einer HTML-Datei einsetzen (auch im Header, um z.B. initialscale in Abhängigkeit vom Device zu setzten oder eine CSS-Datei nur unter bestimmten Bedingungen einzubinden).
Auf der folgender Seite gibt es weitere Informationen zu SSIs:
http://httpd.apache.org/docs/current/mod/mod_include.html
Ach ja: um sicher zu stellen, dass ein Tablet immer die gleiche IP-Adresse hat, kann man normalerweise im DSL- oder WLAN-Router einen Haken bei "diesem Gerät immer die gleiche IP zuweisen" setzen. Alternativ kann man per SSI aber auch z.B. den User-Agent (=verwendeter Browser) oder andere Parameter abfragen. Tipp: Einfach mal folgende Seite erstellen:
<html>
<body>
<!--#printenv -->
</body>
</html>
chmod +x nicht vergessen ;-)