Hallo allerseits,
bei meiner Anwendung möchte ich gern mehrere Seiten haben, die jeweils das gleiche Menü beinhalten sollen.
Zur Realisierung verfolge ich den Ansatz, der hier beschrieben ist:
http://www.fhemwiki.de/wiki/FHEM_Tablet_UI/FAQ#Wie_baue_ich_ein_Men.C3.BC_mit_dem_Pagetab_Widget_auf.3F (http://www.fhemwiki.de/wiki/FHEM_Tablet_UI/FAQ#Wie_baue_ich_ein_Men.C3.BC_mit_dem_Pagetab_Widget_auf.3F)
Im Unterschied zu diesem Leitfaden möchte ich aber keine pagetab-Widgets verwenden, sondern ich bevorzuge ein Drop-Down-Menü auf Basis des circlemenu-Widgets (vgl. screenshots 1+2). Das Menü wird jeweils über ein include-Konstrukt realisiert, welches (dank Johannes' toller Unterstützung!!) auch definitiv eingebunden wird.
Leider werden aber - mit Ausnahme der Startseite - auf allen anderen Seiten ganz offensichtlich die css-Dateien nicht eingebunden, so dass das Ergebnis nicht besonders beeindruckt (s. screenshot 3)
Zur Minimierung von Rückfragen gebe ich euch in gekürzter Form so viele Infos wie nötig (und bei Bedarf gern auch mehr):
1) Dies hier ist index.ftui.html; meine Startseite [Auszug]:
<!DOCTYPE html>
<html>
<head>
<title>FHEM Tablet-UI</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
....
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
....
<script src="/fhem/tablet/js/fhem-tablet-ui-2.0_beta.js" defer></script>
</head>
<body>
<div class="gridster">
<ul>
<?ftui-inc="menu_std_loader.ftui.part" ?> <!-- dieser Code wird auf [u]jeder[/u] Seite verwendet. -->
</ul>
</div>
</body>
</html>
2) Jetzt kommt menu_std_loader.ftui.part.
<!-- lädt das Menü -->
<li data-row="1" data-col="1"
data-sizex="1" data-sizey="1"
data-template="menu_std.html">
</li>
3) Schließlich noch menu_std.html
<!-- Datum / Uhrzeit -->
<li class="halbTransparent" data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<header class="headerTransparent">Home</header>
<div data-type="clock" data-format="D. d.m" data-shortday-length="2" class="grey medium"></div>
<div data-type="clock" data-format="H:i:s" data-interval="1000" class="orange medium"></div>
<br>
<!-- Auswahlliste als Circle-Menu -->
<div
data-type="circlemenu" data-border="square" data-item-width="120" data-item-height="45"
data-circle-radius="60" data-direction="vertical" class="circlemenu keepopen noshade">
<ul>
<!-- Menü-Symbol -->
<li>
<div data-type="symbol" data-icon="fa-bars" class="big"></div>
</li>
<!-- Untermenü-Punkte zum Rausklappen -->
<li>
<div data-type="link" data-color="white" data-background-color="grey" data-url="blinds.ftui.html">Rollläden</div>
</li>
<li>
<div data-type="link" data-color="white" data-background-color="grey" data-url="#link1.html">Heizung</div>
</li>
<!-- weitere Einträge gekürzt... -->
</ul>
</div>
</li>
Weiß jemand, was ich falsch gemacht habe?
Und würde derjenige mir bitte helfen? ;)
Wie (genau) rufst du die Seite auf?
Also was steht in der Browserzeile bevor du "enter" drückst :)
Ich habe das gefühl da kommt ein sehr altes und oft diskutiertes Problem zum tragen... welches sich bei dir 2.2 noch verstärken wird.
Davon mal ab...
Warum lädst du das Menü über ein data-template und dieses template wiederum über FTUISRV?
Warum lädst du nicht gleich das menü über FTUISRV? Die templates sind nämlich recht instabil was das ladeverhalten angeht.
Das waren erstmal 2 Ideen... dann sehen wir mal weiter :)
Grüße^^
Mit dem Link-Widget und dem Parameter data-url="blinds.ftui.html" öffnest du die kpl. neue Seite blinds.ftui.html
In dieser Seite muss dann auch wieder der komplette Header mit allen CSS vorhanden sein.
Du benutzt keine Technik, die nur Teile der Seite austauschen und dadurch keine neue Referenz-Definition brauchen.
Guten Tag und danke vorab für deine Unterstützung!
Zitat von: roman1528 am 04 Mai 2016, 08:02:01
Wie (genau) rufst du die Seite auf?
Also was steht in der Browserzeile bevor du "enter" drückst :)
Der Aufruf erfolgt so:
http://192.168.178.29:8083/fhem/ftui/ZitatWarum lädst du das Menü über ein data-template?
Nachdem ich nicht weiterkam, bin durch das Wiki auf das
data-template gestoßen.
Von dessen 'Instabilität' wusste ich bislang nichts.
Aber natürlich hast du Recht: Ich hätte auch direkt nur mit FTUISRV inkludieren können, obwohl ich nun Zweifel bekomme, ob dies das Problem lösen wird (vgl. die Antwort von setstate im nachfolgernden post).
Hallo setsate,
danke für deine Antwort!
Zitat von: setstate am 04 Mai 2016, 08:53:26
Mit dem Link-Widget und dem Parameter data-url="blinds.ftui.html" öffnest du die kpl. neue Seite blinds.ftui.html
In dieser Seite muss dann auch wieder der komplette Header mit allen CSS vorhanden sein.
Tja, dein Einwand macht Sinn und du hast sicherlich Recht..
Zitat von: setstate am 04 Mai 2016, 08:53:26
Du benutzt keine Technik, die nur Teile der Seite austauschen und dadurch keine neue Referenz-Definition brauchen.
Dann muss ich das wohl irgendwie anders stricken, aber momentan habe ich noch keine Idee.
Zunächst muss ich mal mein Denk-Chaos beseitigen... :-[
In der 2.2 (eval) Version kennt das Link Widget auch den Parameter data-load
Z.B.
data-load="#content"
Damit kann man sagen: hole mir aus der Sub-Page nur den Teil mit der id "content" und lade diesen in der aktuellen Seite anstelle des jetzigen Inhalts des Teils, der auch die ID "content" hat.
Ach ja...?? Klasse!
Das wäre eine sehr gute Möglichkeit.
Ich probiere es aus.
Danke dir.
Ein Beispiel dazu findet man hier:
https://github.com/knowthelist/fhem-tablet-ui/blob/eval/www/tablet_eval/index_tab_demo.html
In dieser Datei
https://github.com/knowthelist/fhem-tablet-ui/blob/eval/www/tablet_eval/index_tab_demo.html
steht als Kommentar
Zitat
* - copy all files incl. sub folders into /<fhem-path>/www/tablet_eval
Da ich bis dato praktisch noch
nie Github verwendet habe (ja, das gibt's!), muss ich jetzt eine vielleicht peinliche Frage stellen: ::)
Wie kann ich denn das
gesamte Verzeichnis zum Testen von GitHub herunterladen?? :-[ :-[
(Bei der aktuellen Version von Tablet-UI gibt es eine Möglichkeit, ein zipfile zu laden. Aber bei der neuen Testversion finde ich diese Möglichkeit nicht.)
hier https://github.com/knowthelist/fhem-tablet-ui/tree/eval
ist rechts ein Button Download ZIP
Oder du führst diesen Befehl in der FHEM Web Commandline (oben auf der Seite) aus
update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/eval/controls_fhemtabletui_eval.txt
Dann wird alles automatisch von Github geholt und in das richtige Verzeichnis kopiert
Danke dir! Hat geklappt!
... der Download hat geklappt.
Aber ich bekomme die Demo nicht so angezeigt, wie es dem HTML-Quellcode entspricht.
Es sieht so aus, als ob auch hier die Styles nicht zum Einsatz kämen (keine Farben, keine Links, ...).
Internals:
DEF ftui_eval ./www/tablet_eval Tablet-EVAL
NAME TABLETUIEVAL
NR 163
STATE TABLETUIEVAL
TYPE HTTPSRV
Fhem:
directory ./www/tablet_eval
friendlyname Tablet-EVAL
infix ftui_eval
Attributes:
directoryindex index_tab_demo.html
Die Startseite (index_tab_demo.html) wird völlig unformatiert dargestellt; siehe screenshot.
RasPi komplett plattgemacht und neu installiert.
FHEM neu installiert.
Jetzt läuft's. Aber nicht immer reibungslos. Mal ja, mal nein. -> Neuer Thread!!