Showing Posts From
Front end
- 22 Jan, 2016
- 2 Min. Lesezeit
FHEM Tablet UI #3: Grundgerüst und Widgets anpassen (Anfänger)
Dieser Beitrag ist für die FTUI Anfänger. Ich erkläre den Grundaufbau der FHEM Tablet UI index.html Datei und wie du deine ersten Widgets/Boxen erstellst. Voraussetzung:Grundkenntnisse in HTML (hier findest du einen kurzen Grundkurs). Dieses Buch (HTML und CSS von Kopf bis Fuß) erklärt auch einfach und verständlich die Grundlagen von HTML.InhaltVorbereitung Widget erstellenVorbereitung Bevor du anfängst die index.html Datei an deine Wünsche anzupassen, erstelle eine Kopie. sudo cp /opt/fhem/www/tablet/index.html /opt/fhem/www/tablet/index_$(date +%F-%H:%M).htmlÖffne die index.html Datei in deinem bevorzugtem Editor. Ich verwende den Atom Texteditor von Github. Er ist Open Source, hat Autovervollständigung, ist für Windows, Mac und Linux verfügbar und es gibt ein riesige Auswahl an Erweiterungen. Jetzt lösche alles was zwischen<div class="gridster"> <ul> ...löschen... </ul> </div> </body> </html>Dein Code sollte jetzt ungefähr so aussehen. Dies ist dein Grundgerüst.<!DOCTYPE html> <html> <head> <!-- /* FHEM tablet ui */ /* * Just another dashboard for FHEM * * Version: 1.4.4 * Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast * URL: https://github.com/knowthelist/fhem-tablet-ui * * Copyright (c) 2015 Mario Stephan <mstephan@shared-files.de> * Under MIT License (http://www.opensource.org/licenses/mit-license.php) * * - create a new folder named 'tablet' in /<fhem-path>/www * - copy all files incl. sub folders into /<fhem-path>/www/tablet * - add 'define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg * - Tadaaa! A new fhem ui in 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 Ben</title> </head> <body><div class="gridster"> <ul> <!-- DEIN TEXT --> </ul> </div></body> </html>Widget erstellen Die Oberfläche von fhem-tablet-ui ist in Widgets aufgeteilt. Diese werden in Spalten und Zeilen positioniert. Erstelle dein erstes Widget, indem du diesen Text zwischen <ul> </ul> kopierst.<li data-row="1" data-col="1" data-sizex="1" data-sizey="1"> <header>Widget 1</header> ... </li> Mit den Attributen kannst du die Größe und Position des Widget anpassen.data-row: in welcher Zeile das Widget starten soll data-col: in welcher Spalte das Widget starten soll data-sizex: wieviel Spalten das Widget breit sein soll. data-sizey: wieviel Zeilen das Widget hoch sein soll.Eine data-sizex Einheit ist 116 Pixel breit und eine data-sizey Einheit ist 131 Pixel hoch. Wenn du die Standardwerte ändern willst, suche in der index.html Datei nach widget_base_width oder widget_base_height und verändere die Werte dahinter nach deinen Wünschen. Möchtest du den Abstand zwischen den Widget vergrößern, dann suche nach den Zeilen die mit <meta ... beginnen und füge darunter in einer neuen Zeile diesen Code ein. <meta name="widget_margin" content="4"> Die Zahl ist der Abstand in Pixel. Beispiel mit zwei Widgets und unterschiedlichen Größen und Positionen. Möchtest du ein weiteres Widget, dann fügst du nach dem ersten li Block ein weiteren hinzu.<li data-row="1" data-col="1" data-sizex="3" data-sizey="1"> <header>Widget 1</header> data-row="1" data-col="1" data-sizex="3" data-sizey="1" </li><li data-row="1" data-col="5" data-sizex="1" data-sizey="3"> <header>Widget 2</header> data-row="1" data-col="5" data-sizex="1" data-sizey="3" </li>Am Ende sollte deine index.html wie folgt aussehen.<!DOCTYPE html> <html> <head> <!-- /* FHEM tablet ui */ /* * Just another dashboard for FHEM * * Version: 1.4.4 * Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast * URL: https://github.com/knowthelist/fhem-tablet-ui * * Copyright (c) 2015 Mario Stephan <mstephan@shared-files.de> * Under MIT License (http://www.opensource.org/licenses/mit-license.php) * * - create a new folder named 'tablet' in /<fhem-path>/www * - copy all files incl. sub folders into /<fhem-path>/www/tablet * - add 'define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg * - Tadaaa! A new fhem ui in 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 --> <meta name="widget_margin" content="4"> <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 Ben</title> </head> <body><div class="gridster"> <ul> <li data-row="1" data-col="1" data-sizex="3" data-sizey="1"> <header>Widget 1</header> data-row="1" data-col="1" data-sizex="3" data-sizey="1" </li> <li data-row="1" data-col="5" data-sizex="1" data-sizey="3"> <header>Widget 2</header> data-row="1" data-col="5" data-sizex="1" data-sizey="3" </li></ul> </div> </body> </html>Im nächsten Beitrag werde ich näher darauf eingehen, wie du einen Wert von FHEM in der FTUI anzeigst. Über Tipps und konstruktive Kritik wie ich die Beiträge besser machen kann würde ich mich freuen.