{% extends "mobile/base/base.html" %} {% import "mobile/widgets/grid.html" as grid %} {% block content %}

Readme Grid-Layout

Erläuterung des Prinzips

Dieses Grid-Layout wurde speziell für Smartphones und kleine Touchscreens, wie Sie z.B für den Raspberry Pi verfügbar sind, entworfen. Das Grid-Layout arbeitet mit einem festen Raster und quadratischen Widgets. In der Standardkonfiguration besteht dieses Raster aus einer 8 x 4 Anordnung welche für das Querformat optimiert ist (es muss am Anfang eines Projekts entschieden werden, ob das Layout für Hoch- oder Querformat gestaltet werden soll).
Die Position eines Widgets bestimmt die linke obere Ecke, anschließend folgt die Ausdehnung in x und y-Richtung.

Mit diesem Layout-Modell wird eine Beispielimplementierung mitgeliefert aus der die Verwendung deutlich werden sollte.
Zur Bearbeitung der Quelltexte muss ein geeigneter Editor eingesetzt werden, dies kann z. B. unter Microsoft Windows der kostenlose Texteditor „Notepad++“ sein.

Für einen einfacheren Einstieg wird der Aufbau kurz erläutert. Eine ausführliche Anleitung ist als pdf-Dokument im Unterordner "mobile" hinterlegt.

Vorüberlegungen

Das Grid-Layout ist als Ergänzung zu einem Standard-SmartVISU-Layout gedacht, mit einer schon angesprochenen speziellen Ausrichtung auf kleine Touchscreens.
Um das Grid-Layout parallel mit dem Standard-Layout zu Nutzen wird das Projekt in einem Unterordner der eigenen smartVISU-Seite (pages/eigene_Seite/mobile) angelegt. Bei dem vorliegenden Projekt wurde dieser Unterordner „mobile“ genannt und der Name sollte für den Einstieg auch nicht verändert werden, da er an vielen Stellen vorgegeben ist.
Jede Seite im Grid-Layout bekommt eine einzelne HTML-Datei. Um die Übersicht zu behalten wird zur Verwendung von Unterordnern geraten, im Beispiel sind dies „eg“ und „dg“. Auch eine tiefere Verschachtelung ist denkbar, z. B. für jeden Raum einen extra Ordner (z.B. eg/kueche, eg/buero usw.).

Aufbau der Seiten

Alle Seiten sind mit einem einheitlichen Grundschema aufgebaut. Das Grundgerüst enthält immer die Zeilen wie im folgenden dargestellt und kann als Basis für jede neue Seite kopiert werden.

⁄** Change word mobile to the name of your folder *⁄
{% extends "mobile/base/base.html" %}
{% import "mobile/widgets/grid.html" as grid %}
{% block content %}
   <div class="html disable_scroll" data-title="Beispielseite">
     <div class="container">
       <!-- ('id', 'infotext', row, column, size x, size y, ... )-->
       Hier kommen später die einzelnen Widgets hinein
     </div>
   </div>
{% endblock %}
{% block footer %}
   {{ grid.footer ('footer_bsp', 'item.temp.innen', 'item.temp.aussen', '',
    'index.php?page=mobile/haus', 'index.php?page=mobile/eg/kueche', 'visu.time.icon') }}
{% endblock %}

Einfügen der Widgets im Inhaltsbereich

Im Verzeichnis mobile/widgets ist die Datei grid.html gespeichert. In dieser sind alle Verfügbaren Widgets enthalten und die notwendigen und optionalen Parameter kommentiert (erkennbar an den vorangestellten Sternen). Die Widgets arbeiten grundsätzlich mit svg-Icons wobei nur der Name ohne Dateipfad angegeben wird, z. B. light_light.svg.

Die Widgets haben den gleichen prinzipiellen Aufbau, sie beginnen mit zwei geschweiften Klammern gefolgt von dem Namen. Anschließend folgen, eingeschlossen in runde Klammern, die erforderlichen Parameter und abgeschlossen wird jedes Widget durch zwei geschweifte schließende Klammern.

Weitere Hinweise und Informationen


Detailierte Anleitung

Eine Ausführliche Anleitung inkl. einer Erläuterung der meisten Widgets ist im Unterordner "mobile" als pdf-Dokument vorhanden. {% endblock %} {% block footer %} {{ grid.footer ('test_footer', 'eg.kueche.temperatur.luft', 'aussen.nordseite.temperatur', '', 'index.php', 'index.php?page=mobile/eg/kueche') }} {% endblock %}