18k Aufrufe21 Kommentare

in FHEM

FHEM Tablet UI #3: Grundgerüst und Widgets anpassen (Anfänger)

Beitragsbild FHEM Tablet UI im Browser und Atom Texteditor

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:

Inhalt

Vorbereitung

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>

tablet-ui-anpassen-1
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>

tablet-ui-anpassen-2

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.

Gib deine Stimme ab!

160 Likes
Upvote Downvote

Total votes: 165

Upvotes: 159

Upvotes percentage: 96.363636%

Downvotes: 6

Downvotes percentage: 3.636364%

ftuihtmltutorial

Geschrieben von Ben

#Blogger #Designer #RaspeberryFan #Self-Employed #Developer #Javascript
Twitter • Github • Thingiverse

21 Kommentare

Kommentar verfassen

  1. Hallo,
    nach langem Suchen bin ich auf diesen (älteren) Beitrag gestoßen, der mir erste Schritte ermöglicht. Ich bin absoluter Neuling beim Erstellen von Widgets und suche nun nach den weiteren Arbeitsschritten (“Im nächsten Beitrag werde ich näher darauf eingehen, wie du einen Wert von FHEM in der FTUI anzeigst.”), finde den angekündigten Beitrag aber nicht.
    Auch auf die Gefahr hin, dass dieser Thread nicht mehr weitergeführt wird versuche ich doch, eine Lösung zu finden. Kann jemand helfen?

    Antworten

  2. Hallo!
    Wenn ich so ein Widget erstelle, bekomme ich rein dann den Text wie zb “Widget1” auf weissem HIntergrund im Browser angezeigt und nicht so schöne “Kästchen” wie hier.

    Antworten

  3. Bei mir stehen dann nur diese Textzeilen untereinander. Keine schönen 4 eckigen Kästchen die quasi eine Schaltfläche darstellen.

    Antworten

  5. Hallo, bei funktionieren die Push-Widgets auf Android, aber nicht im Safari vom Ipad. Kennt jemand das Problem?

    Antworten

  6. Hi, was mich noch einmal brennend interessieren würde ist, wie ich die einzelnen Aktoren in einem Widget positionieren kann. bisher liegen die bei mir alle nur brav untereinander. Das ist ja aber nicht der Sinn der Sache. Da komme ich mit Gridster derzeit überhaupt nicht klar.

    Antworten

  7. Hi Ben, tolle Anleitung für mich als Anfänger. Allerdings funktioniert bei mir die Sache mit nicht. Egal, welche Zahl ich da einfüge, die Widgets starten alle oben in der ersten Reihe. Die Spaltenangaben funktionieren aber. Hast Du eine Idee, woran das liegen könnte? Viele Grüße, Peter

    Antworten

    • Hallo Peter,
      wenn du ein ein Widget in der Zweiten Zeilen haben willst muss darüber auch ein Widget sein. Leere Flächen über Widgets sind nicht möglich. Sie rutschen dann immer nach oben und füllen die Lücke.

      [code]
      <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <header>Widget 1</header>
      </li>
      <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
      <header>Widget 2</header>
      </li>
      [/code]

      [code]
      <li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
      <header>Widget 1</header>
      </li>
      <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
      <header>Widget 2</header>
      </li>
      [/code]

      In diesem Beispiel rutscht das Widget 2 nach oben, da der Platz leer ist.

      Antworten

      • Danke für die schnelle Antwort. Ich habe 2 Widgets, die ich übereinander anordnen möchte – aber die liegen beide an genau der gleichen Stelle, sodass das zweite Widget auf dem ersten liegt:

        Ich dachte, das erste Widget liegt in Spalte 8, Zeile 1 und das zweite Widget in Spalte 8, Zeile 2 – direkt unter dem ersten Widget. Hab ich da einen Denkfehler?

      • Sorry, der Code kam nicht mit an:
        Widget1

        [code lang=”html”]<li data-row="1" data-col="8" data-sizex="1" data-sizey="2">[/code]

        Widget2

        [code lang=”html”]<li data-row="2" data-col="8" data-sizex="1" data-sizey="2">[/code]

    • Hallo Peter,
      laut deinem Code besetzt
      Widget 1 Zeile 1&2 in Spalte 8
      Widget 2 Zeile 2&3 in Spalte 8
      Das Problem ist das sich beide Widgets in Zeile 2 Spalte 8 überschneiden. Deshalb wird das zweite Widget an die erste freie Stelle verschoben.
      Ich hoffe ich konnte es halbwegs verständlich beschreiben.

      Antworten

      • Hi Ben, danke für die Antwort – jetzt hab ichs auch endlich verstanden ;O) Ich hatte auch noch 2 fehlende TAG-Klammern… Jetzt passt alles. Viele Grüße, Peter

  8. Hallo Ben,

    gibt es auch eine Möglichkeit die Widgets auf ihren Plätzen zu “verankern”? So dass sie sich bei verschiedenen Auflösung nicht verschieben…

    Vielen Dank im Voraus

    Antworten

    • Hallo Anatoli,
      verändere in Zeile 22 folgenden Code

      [code lang=”html”]
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
      [/code]

      Die Zeile besagt das deine Seite so breit wie das Display sein soll. Also auf dem Desktop breiter als auf dem Smartphone (width=device-width). Hier eine Längere Erklärung.
      Du kannst deiner Seite eine feste Breite geben zum Beispiel 768, dann sollte deine Tablet UI auf dem iPad und iPhone gleich aussehen.

      [code lang=”html”]
      <meta name="viewport" content="width=768, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
      [/code]

      Mit user-scalable=yes kannst du noch sagen das man rein und raus zoomen kann. Finde ich aber persönlich störend.

      Antworten

  9. Super Blog. Freue mich schon auf den nächsten Artikel. Muss allerdings erstmal mit dem ganzen HTML-Zeugs durchblicken… Doch komplexer als gedacht.

    Antworten

    • Hallo Christian,
      freut mich das dir die Beiträge gefallen (nicht vergessen auf die Banner 😉 zu klicken ). Wichtig ist das du das Grundgerüst von einer HTML Seite verstehst und weisst welche HTML Element aus nur einem Teil bestehen wie <img>, welche Element aus zwei Teilen bestehen wie <p></p> und welche Element wie ineinander Verschachtelt werden können <ul><li></li><ul>.

      Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.