Beginner - Layoutgestaltung (Menü)

Simon74 · 27 Januar 2017, 20:36:43

Ich sehe mir FTUI soeben das erste mal an.
(Hintergrund: ich habe ein neues Android 6 Tablet bestellt, und möchte die Tablet Oberfläche neu gestalten, bis dato setze ich hier auf Floorplan)

Ich habe gefofft ein paar Beispiele zu finden betreffend Layout- und Menügestaltung, leider scheinen die WIKI Artikel nicht mehr zur aktuellen Version zu passen ?
Mir schwebt ein Layout mit Navigation im Footer Teil vor, so in etwa wie in diesem Beitragsbild.
https://forum.fhem.de/index.php?action=dlattach;topic=65792.0;attach=69168;image

Gibt es "aktuelle" Layout Beispiele wo die Einarbeitung etwas leichter fällt ?

unimatrix · 27 Januar 2017, 21:39:13

Ich habe genau heute mit TabletUI begonnen, war total ratlos, und habe mich dann einfach hier durch ein paar Threads gelesen. Immer wieder sind Beispiele verlinkt. Dann HTML Editor auf, Browser auf, ausprobieren, Reload usw.

Was die Positionierung und Dimensionierung angeht, habe ich mir im Chrome die Web Developer Extension geladen. Da kann man dann unmittelbar auf der geladenen Seite die div-ELemente manipulieren, was die CSS Styles angeht und so damit herumprobieren, man sieht das Ergebnis unmittelbar.

Inzwischen habe ich schon eine ganz vernünftige Seite. Diese Zeitinvestition muss man wohl erstmal machen.

redlav · 27 Januar 2017, 22:13:38

Ich kann nur den Einsatz eines vernünftigen HTML-Editor mit Formatierungsfunktion empfehlen. Sonst sucht man sich
den Wolf, wenn man sich mal in den divs verlaufen hat.

Simon74 · 27 Januar 2017, 22:46:26

Danke für Antwort.

Im Wiki finde ich Infos über Pagetab, wo wiederum im Forum zu lesen ist das dies nicht mehr verwendet werden soll, sondern Pagebutton.
Wenn ich Goolge zu "tablet ui pagebutton layout" befrage finde ich die examples die ich auf den FHEM Server gelegt habe nur anzeigen tun die meisten bei mir nichts sinnvolles.

Mir ist klar das bevor ich beginnen kann das gewünschte Seitenlayout feststehen und funktionieren sollte.
Jedoch reichen meine Kenntnisse in HTML/CSS nicht aus um ohne Beispiel hier weiterzukommen.
Da ich nach 3 Stunden lesen/suchen keinen Schritt bzw. funktionierende Codezeile weiter bin, denke ich ich bleibe vorerst besser beim Floorplan (for dummy) .

Standarduser · 27 Januar 2017, 23:01:48

Hi,

eine funktionierende Navigation hinzubekommen ist echt mega schwer und ohne vernünftiges Beispiel für Anfänger eigentlich unlösbar.
Deshalb hier anbei mein aktuelles Layout. Der Inhalt der Seiten ist für die Tonne, da ich derzeit viele Dinge ausprobiere, aber die Navigation funktioniert - Header, Sandwich-Menü und Footer.
Übrigens genau das, worauf du verlinkt hast.

Simon74 · 28 Januar 2017, 07:05:45

@Standarduser, vielen Dank für das toole Beispiel !
Weitere Fragen werden vielleicht folgen

Simon74 · 28 Januar 2017, 08:50:59

Dinge die mir nicht klar sind:
In der neuen 2.5 index-example.html werden viel weniger metadaten und css geladen/verlinkt, werden diese nicht mehr benötigt ?

Code Auswählen

	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="widget_base_width" content="74">
	<meta name="widget_base_height" content="71">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="gridster_disable" content="1">
	<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
	<meta name="debug" content="0"> <!-- verbose level 1-6 = output to console;0 = not output -->
	<meta http-equiv="Cache-Control" content="no-store" />

Da ich die Sidebar nicht brauche sondern wirklich nur header/content/footer, sieht meine index.html im Moment so aus.
Ich habe im Footer Übersicht auf die index-example.html verlinkt.
Leider bekomme ich aber kein Content angezeigt, was fehlt ?

Code Auswählen

<!DOCTYPE html>
<html>

<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.5.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2017 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 TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     */
    -->
	<meta http-equiv="Cache-Control" content="no-store" />
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
	<link rel="stylesheet" href="styles_common.css" />
    <script src="js/fhem-tablet-ui.js" defer></script>
	
    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
    <!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->

    <title>FHEM-Tablet-UI</title>
</head>

<body>

<!-- Header -->
	<header id="header-nav" class="fixed row">
		<div data-type="slideout" class="col-1-8 big center-align notouch" data-icon-color="#444444"></div>
		<div id="linkname" 																							class="col-3-6 large bold center-align middle"></div>
		<div data-type="symbol" data-icon="fa-bell" 	data-device="dummy2" data-get-on="on.*" data-get-off="off"	class="col-1-6 right-align black"></div>
		<div data-type="symbol" data-icon="ftui-window" data-device="dummy1" 										class="col-1-6 warn"></div>
	</header>

<!-- Content ??? -->
	
<!-- Footer mit Menü für Unterseiten -->
	<footer>
		<div class="tab-bar">
			<div class="tab-link"><div data-type="link" class="page" data-load="#index-example" data-url="#index-example.html"	data-icon="fa-globe" 		data-color="#555" data-active-color="white" data-active-pattern=".*#index-example.html"	></div><span class="tab-label">Übersicht</span></div>
			<div class="tab-link"><div data-type="link" 				data-load="#content01_02" data-url="#content_01_EG_wz_02_musik.html"		data-icon="fa-music" 		data-color="#555" data-active-color="white" data-active-pattern=".*#content_01_EG_wz_02_musik.html"		></div><span class="tab-label">Media</span></div>
			<div class="tab-link"><div data-type="link" 				data-load="#content01_03" data-url="#content_01_EG_wz_03_licht.html"		data-icon="fa-lightbulb-o" 	data-color="#555" data-active-color="white" data-active-pattern=".*#content_01_EG_wz_03_licht.html"		></div><span class="tab-label">Licht</span></div>
			<div class="tab-link"><div data-type="link" 				data-load="#content01_04" data-url="#content_01_EG_wz_04_funktionen.html"	data-icon="fa-sliders" 		data-color="#555" data-active-color="white" data-active-pattern=".*#content_01_EG_wz_04_funktionen.html"	></div><span class="tab-label">System</span></div>
			<div class="tab-link"><div data-type="link" 				data-load="#content01_05" data-url="#content_01_EG_wz_05_kueche.html"		data-icon="fa-coffee" 		data-color="#555" data-active-color="white" data-active-pattern=".*#content_01_EG_wz_05_kueche.html"		></div><span class="tab-label">Küche</span></div>
		</div>
	</footer>
	
</body>
</html>

Danke für Hilfe

Standarduser · 28 Januar 2017, 11:40:15

Eigentlich sollen benötigte Ressourcen seit 2.5 automatisch geladen werden. Bei mir funktioniert das jedoch nicht richtig, weshalb ich sie trotzdem im Head stehen habe.

Dass Du keinen Content siehst liegt daran, dass Du keinen Bereich definiert hast, in den der Content hinein geladen werden soll.

Mit

Code Auswählen

<div data-type="link" data-load="#content01_02" data-url="#content_01_EG_wz_02_musik.html"...
lädst Du den Inhalt von "content_01_EG_wz_02_musik.html" in das DIV mit der ID "content01_02". Das hast Du aber nicht definiert. Schau hierzu nochmal in die HTML-Dateien, die mit "main.." beginnen.

Du müsstest also unter "" noch folgendes einfügen:

Code Auswählen


<div class="page" id="content01_01"></div>
<div class="page" id="content01_02"></div>
<div class="page" id="content01_03"></div>
<div class="page" id="content01_04"></div>
<div class="page" id="content01_05"></div>

Auf den jeweiligen Unterseiten, die Du lädst, muss sich das dann wiederfinden. Entsprechende HTML-Dateien beginnen wie folgt:

Code Auswählen

<html>
<head>
</head>
<body>
	<div class="page" id="content01_02">

Du brauchst die gleiche ID also 3 mal:
1. Ein DIV der Klasse "page" mit einer eindeutigen ID -> Ziel der Seite
2. Einen Link, der eine HTML-Seite mit dem Parameter "data-load" in das entsprechende DIV lädt
3. Die eigentliche Seite, die den entsprechenden Code an die richtige Stelle einsetzt

Man kann sich das im Prinzip so vorstellen:
Die Definition "<div class="page" id="content01_01"></div>" fungiert wie ein Anker, an den die neu geladene HTML-Datei ihren Inhalt einsetzt. Damit diese Seite den Anker finden kann, muss dieser sich an auch an beiden Stellen wiederfinden. Der Link ist dann der Befehl dazu.

Simon74 · 28 Januar 2017, 20:02:10

@Standarduser, Danke für die Erklärungen.
So nach erstem Frustabbau, lege ich das Navigationsthema zur Seite (komme hier keinen vernüftigen Schritt weiter) und probiere mich etwas an der generellen Anpassung,
werde dazu einen neuen Thread aufmachen.