HOWTO: FTUI, Apache, SSI und Geräte abhängigem Layout

[zap]

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:

Code Auswählen Erweitern


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:

Code Auswählen Erweitern


<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.

Code Auswählen Erweitern


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):

Code Auswählen Erweitern


<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:

Code Auswählen Erweitern


<html>
<body>
<!--#printenv -->
</body>
</html>


chmod +x nicht vergessen