Showing Posts From

Ftui

22 Jan, 2016
2 Min. Lesezeit
- Fhem

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>  <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">  <meta name="debug" content="0">  <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" />   <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>  <title>FHEM-Tablet-UI Ben</title> </head> <body><div class="gridster"> <ul>  </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>  <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">  <meta name="debug" content="0">  <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" />   <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>  <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.

10 Dec, 2015
2 Min. Lesezeit
- Fhem

FHEM Tablet UI #2: wie index.html anpassen/bearbeiten

In dem vorherigen Beitrag habe ich gezeigt wie du die FHEM Tablet-UI installierst. Um den Inhalt der Tablet optimierte Oberfläche anzupassen, muss man die index.html im Ordner /opt/fhem/www/tablet/ bearbeiten. In diesem Artikel erkläre ich, wie du die index.html Datei am einfachsten anpassen kannst und welche Programme du davor benötigst. Alle Varianten funktionieren mit Windows, Mac OSX oder Linux. InhaltMethode 1: Terminal/Kommandozeile und Nano Texteditor Methode 2: via SFTP mit Filezilla und Atom TexteditorMethode 1: Terminal/Kommandozeile und Nano Texteditorgeeignet um schnell kleine Änderungen an einer Datei vorzunehmen keine zusätzliche Software erforderlich die Maus kann nicht verwendet werden keine SyntaxhervorhebungMelde dich per SSH an dem Computer an auf dem FHEM läuft. Für Windows kannst du zum Beispiel Putty verwenden und für Mac OSX den Terminal. ssh xxx@zzz.zzzz.zzz.zz Ersetze xxx mit deinem Benutzernamen und zzz.zzzz.zzz.zz mit der IP Adresse. Bei mir sieht der Befehl so aus ssh pi@192.168.178.99Navigiere zum Ordner mit der zu bearbeitenden Datei. cd /opt/fhem/www/tablet/Öffne die Datei mit dem Nano Texteditor und verändere den Inhalt. nano index.htmlMit der Tastenkombinationctrl+o(Mac)/strg+o(Windows) kannst du die Datei Speichern. Mit ctrl+x(Mac)/strg+x(Windows) kannst du den Texteditor beenden und gegebenenfalls speichern. Tablet-UI index.html Datei im Nano Editor (Mac Terminal) geöffnet Methode 2: via SFTP mit Filezilla und Atom Texteditoreinfacheres Bearbeiten da die Maus benutzt werden kann Vorteile des Atom Editor nutzen (Syntaxhervorhebung, Autovervollständigung) zusätzliche Software erforderlichLade dir Filezilla (FTP/SFTP) und Atom (Texteditor) für dein Betriebssystem herunter und installiere sie. Öffne Filezilla und geh in die Einstellungen. Unter Bearbeiten von Dateien, stell den Atom Editor als Standarteditor ein und Immer Standarteditor verwenden(siehe Bild). Stell eine Verbindung mit Filezille her. Ersetze die Daten in den Feldern mit deinen Daten. Der Standart SFTP/SSH Port ist 22. Navigiere zum Tablet-UI Ordner /opt/fhem/www/tablet/ und mach ein Rechtsklick Ansehen/Bearbeiten auf die index.html Datei. Danach Lokale Datei verwerfen, dann Datei neu herunterladen und bearbeiten auswählen. Jetzt sollte sich die Datei im Atom Editor öffnen. Wenn du jetzt die veränderte Datei im Atom Editor speicherst fragt dich Filezille, ob sie zurück auf den Server geladen werden soll. Klick auf Ja. Dies kannst du jetzt so oft wiederholen bis du die Datei im Editor schließt, oder sie lokal an einem anderen Ort speicherst. Tablet-UI index.html Datei im Atom.io Editor geöffnet Es kann sein das du die geänderte index.html Datei nicht speichern kannst, da du nicht die benötigten Benutzerrechte besitzt. Das kannst du ändern indem du dich als Besitzer der Datei einträgst. Navigiere in den Ordner wo sich die index.html befindet cd /opt/fhem/www/tablet und ändere den Besitzer der Datei. Ersetze Mr-T mit deinen Benutzernamen. Der Befehl whoami gibt dir deinen aktuellen Benutzernamen aus. sudo chown Mr-T index.html

14 Jun, 2015
1 Min. Lesezeit
- Fhem

FHEM Tablet UI #1: optimierte Tablet Benutzeroberfläche einrichten

FHEM Tablet UI ist eine optimierte Benutzeroberfläche für FHEM. Es werden keine weiteren Programme benötigt außer eine laufende FHEM Version. [DEMO] Voraussetzung:laufendes FHEM Raspberry muss mit dem Internet verbunden seinUpdate (13.01.16) Punkt 1-3 kannst du überspringen, wenn du folgende Befehle oben in das Befehls-Eingabefeld von FHEM kopierst und mit Enter bestätigst. update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txtPunkt 5 kannst du mit diesem Befehl überspringen. define TABLETUI HTTPSRV ftui/ ./www/tablet Tablet-UIJetzt noch rechts auf Save config klicken.Lade dir die .zip mit den benötigten Dateien von Github herunter.wget https://github.com/knowthelist/fhem-tablet-ui/archive/master.zipEntpacke die .zip Datei und lösche sie danach. unzip master.zip && rm master.zipKopiere den Ordner tablet in den fhem/www Ordner.cp -r ./fhem-tablet-ui-master/www/tablet /opt/fhem/www/Erstelle eine Kopie der index-example.html Datei und benne sie in index.html um.sudo cp /opt/fhem/www/tablet/index-example.html /opt/fhem/www/tablet/index.htmlFüge deiner fhem.cfg Datei folgende Zeile hinzu. Du kannst dies über die Weboberfläche von FHEM tun (Edit files -> fhem.cfg) define TABLETUI HTTPSRV ftui/ ./www/tablet/ Tablet-UI oder per Konsole mit dem Nano Text Editor. nano /opt/fhem/fhem.cfg Beenden kannst du Nano mit ctrl+x und dann y enterRufe jetzt http://ip-des-raspberry:8083/fhem/ftui/ auf deinem Tablet auf. Das Tablet muss sich im selben Netzwerk wie der Raspberry befinden. Weitere Informationen zu FHEM Tablet UI findet ihr hier: FHEM Wiki FAQ FHEM Forum In den nächsten Tagen werden weitere Beiträge folgen, wie du die Tablet UI Oberfläche nach deinen Wünschen anpasst. Bitte Anregungen und Tipps in die Kommentare schreiben.