TABLET UI EINRICHTEN

Das Tablet UI ist eine einfache Möglichkeit in FHEM auf Tablets oder Smartphones den Zustand anzuzeigen, oder Schaltaktionen vorzunehmen.
Die Grafik kann dabei individuell gestaltet werden. Dazu sind natürlich HTML Kenntnisse notwendig.

Die Installation:

Im Befehlseingabefeld von FHEM folgendes eingeben:

update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt

Anschliessend FHEM shutdown + reboot und weitere Befehle eingeben:

define TABLETUI HTTPSRV ftui/ ./www/tablet Tablet-UI
update all https://raw.githubusercontent.com/nesges/Widgets-for-fhem-tablet-ui/master/controls_widgets-for-fhem-tablet-ui.txt
Nun über PUTTY auf den Raspberry Pi zugreifen und folgende Befehle eingeben:
cd /opt/fhem/www/tablet
mv index-example.html index.html

Jetzt den gewünschten HTML Code eingeben (Beispiel folgt weiter unten).
sudo chmod 777 index.html
sudo chmod 777 /opt/fhem/www/tablet

Das war es. Die Tablet UI kann nun auch aus FHEM heraus aufgerufen werden.

BEISPIEL CODE:

<!DOCTYPE html> <html> <head>
 <!--
 /* FHEM tablet ui */
 /*
 * Just another dashboard for FHEM by Thomas Krummer
 * Zugriff über http://<fhem-url>:8083/fhem/tablet/
 */
 -->
 <meta name="viewport" content="width=device-width, 
initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 <meta name="widget_base_width" content="116">
 <meta name="widget_base_height" content="131">
 <meta name="mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
 <meta name="debug" content="0"> <!-- 1=output to console;0=no output -->
 <link rel="stylesheet" 
href="/fhem/tablet/lib/jquery.gridster.min.css" />
 <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
 <link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
 <link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
 <!-- define your personal style here, it wont be overwritten -->
 <!-- link rel="stylesheet" href="/fhem/tablet/css/fhem-green-ui.css" / -->
 <link rel="stylesheet" 
href="/fhem/tablet/css/fhem-tablet-ui-user.css" />
 <script src="/fhem/pgm2/jquery.min.js" defer></script>
 <script src="/fhem/tablet/lib/jquery.toast.min.js" defer></script>
 <script src="/fhem/tablet/lib/jquery.gridster.min.js" defer></script>
 <script src="/fhem/tablet/js/fhem-tablet-ui.min.js" defer></script>
 <!-- Remove this line to enable for usage with WebViewControl
 <script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
 <script src="/fhem/pgm2/cordova-2.3.0.js" defer></script>
 <script src="/fhem/pgm2/webviewcontrol.js" defer></script>
 <!-- End for WebViewControl -->
 <title>FHEM-Tablet-UI</title> </head> <body> <div class="gridster"> 
<ul> <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">
 <header>HOMESTATUS</header>
 <div data-type="homestatus" data-device="Alarmfernbedienung" 
data-get-on='["HM_33F334_armInt Short","HM_33F334_armInt 
LongRelease","HM_33F334_armExt LongRelease"]' 
data-alias='["Home","Night","Away","Holiday"]' 
data-icons='["fa-home","fa-bed","fa-car"]' class="" ></div> </li> <li 
data-row="3" data-col="1" data-sizex="1" data-sizey="1">
 <header>ARBEITSZIMMER</header>
 <div data-type="symbol" 
data-device="Fensterkontakt_Arbeitszimmer" class="cell"></div> </li> <li data-row="3" data-col="2" data-sizex="1" data-sizey="1">
 <header>HW-RAUM</header>
 <div data-type="symbol" 
data-device="Fensterkontakt_Hauswirtschaftsraum" class="cell"></div> 
</li> <li data-row="3" data-col="3" data-sizex="1" data-sizey="1">
 <header>WOHNZIMMER</header>
 <div data-type="symbol" 
data-device="Fensterkontakt_Wohnzimmer" class="cell"></div> </li> <li data-row="3" data-col="4" data-sizex="1" data-sizey="1">
 <header>KUECHE</header>
 <div data-type="symbol" 
data-device="Fensterkontakt_Kueche" class="cell"></div> </li> <li data-row="1" data-col="3" data-sizex="1" data-sizey="2">
 <header>WOHNZIMMER</header>
 <div data-type="slider" data-device="Rollo_links" data-min="0" 
data-max="100" cass="cell"></div>
 <div data-type="label" class="cell">"Rollo links"</div> 
</li> <li data-row="1" data-col="4" data-sizex="1" data-sizey="2">
 <header>WOHNZIMMER</header>
 <div data-type="slider" data-device="Rollo_rechts" 
data-min="0" data-max="100" cass="cell"></div>
 <div data-type="label" class="cell">"Rollo rechts"</div> 
</li> <li data-row="1" data-col="5" data-sizex="1" data-sizey="1">
 <header>KUECHE</header>
 <div data-type="switch" data-device="Schalter_2" class="cell"></div>
 <div data-type="label" class="cell">Licht</div> 
</li> <li data-row="2" data-col="5" data-sizex="1" data-sizey="1">
 <header>SCHLAFZIMMER</header>
 <div data-type="switch" data-device="Schalter_1" 
class="cell"></div>
 <div data-type="label" class="cell">Licht</div> 
<li data-row="3" data-col="5" data-sizex="1" data-sizey="1">
 <header>ALARM</header>
 <div data-type="switch" data-device="Alarmsirene_Innen" class="cell"></div>
 <div data-type="label" class="cell">SIRENE</div> 
</body>
</html>