[GELÖST!] Stylesheets (.css) bei Menü bleiben unberücksichtigt

Begonnen von DocCyber, 03 Mai 2016, 19:39:50

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

DocCyber

03 Mai 2016, 19:39:50 Letzte Bearbeitung: 19 Mai 2016, 18:38:13 von DocCyber
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
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]:
Code Auswählen
<!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.
Code Auswählen
<!-- 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
Code Auswählen
<!-- 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?  ;)
Behandle die Menschen so, als wären sie, was sie sein sollten. Dadurch hilfst du ihnen zu werden, was sie sein können. (Goethe)


RPi-4B mit HM-CFG-LAN und viele weitere HM Komponenten, diverse Shellys, Tuya-Geräte, SMA und Solis Wechselrichter, Elgris EnergyManager, go-e Wallbox

roman1528

#1
04 Mai 2016, 08:02:01
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^^
i3-10305T 4x3GHz;8GB RAM;250GB & 1TB NVMe:
FHEM 6.2;FTUI;8" Tablet's+Fully;NsPanelPro;HUE;ESPRGBWW;HM(CCU3);Duofern; ASC;MQTT(Tasmota);netatmo;SONOS;eBus;DbLog;XiaomiDevice;NUT;ModbusAttr

RPi3+: FHEM 6.2;I²C;GPIO;RFID;G-Tag;XiaomiBTLESens
RPi3: FHEM 6.2;DIY Relais-Board;I²C;GPIO;RFID;Photovoltaik

setstate

#2
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.
Du benutzt keine Technik, die nur Teile der Seite austauschen und dadurch keine neue Referenz-Definition brauchen.

DocCyber

#3
04 Mai 2016, 10:37:06
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:
Code Auswählen
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).
Behandle die Menschen so, als wären sie, was sie sein sollten. Dadurch hilfst du ihnen zu werden, was sie sein können. (Goethe)


RPi-4B mit HM-CFG-LAN und viele weitere HM Komponenten, diverse Shellys, Tuya-Geräte, SMA und Solis Wechselrichter, Elgris EnergyManager, go-e Wallbox

DocCyber

#4
04 Mai 2016, 10:48:20
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...  :-[
Behandle die Menschen so, als wären sie, was sie sein sollten. Dadurch hilfst du ihnen zu werden, was sie sein können. (Goethe)


RPi-4B mit HM-CFG-LAN und viele weitere HM Komponenten, diverse Shellys, Tuya-Geräte, SMA und Solis Wechselrichter, Elgris EnergyManager, go-e Wallbox

setstate

#5
04 Mai 2016, 15:26:09
In der 2.2 (eval) Version kennt das Link Widget auch den Parameter data-load

Z.B.
Code Auswählen
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.

DocCyber

#6
04 Mai 2016, 18:51:44

Ach ja...?? Klasse!
Das wäre eine sehr gute Möglichkeit.
Ich probiere es aus.
Danke dir.
Behandle die Menschen so, als wären sie, was sie sein sollten. Dadurch hilfst du ihnen zu werden, was sie sein können. (Goethe)


RPi-4B mit HM-CFG-LAN und viele weitere HM Komponenten, diverse Shellys, Tuya-Geräte, SMA und Solis Wechselrichter, Elgris EnergyManager, go-e Wallbox

DocCyber

#8
05 Mai 2016, 11:23:37
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.)

Behandle die Menschen so, als wären sie, was sie sein sollten. Dadurch hilfst du ihnen zu werden, was sie sein können. (Goethe)


RPi-4B mit HM-CFG-LAN und viele weitere HM Komponenten, diverse Shellys, Tuya-Geräte, SMA und Solis Wechselrichter, Elgris EnergyManager, go-e Wallbox

setstate

#9
05 Mai 2016, 14:22:08
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

Code Auswählen
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

DocCyber

#10
05 Mai 2016, 14:40:45
Danke dir! Hat geklappt!
Behandle die Menschen so, als wären sie, was sie sein sollten. Dadurch hilfst du ihnen zu werden, was sie sein können. (Goethe)


RPi-4B mit HM-CFG-LAN und viele weitere HM Komponenten, diverse Shellys, Tuya-Geräte, SMA und Solis Wechselrichter, Elgris EnergyManager, go-e Wallbox

DocCyber

#11
05 Mai 2016, 17:21:38

... 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, ...).

Code Auswählen

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.

Behandle die Menschen so, als wären sie, was sie sein sollten. Dadurch hilfst du ihnen zu werden, was sie sein können. (Goethe)


RPi-4B mit HM-CFG-LAN und viele weitere HM Komponenten, diverse Shellys, Tuya-Geräte, SMA und Solis Wechselrichter, Elgris EnergyManager, go-e Wallbox

DocCyber

#12
19 Mai 2016, 18:37:32

RasPi komplett plattgemacht und neu installiert.
FHEM neu installiert.

Jetzt läuft's. Aber nicht immer reibungslos. Mal ja, mal nein. -> Neuer Thread!!
Behandle die Menschen so, als wären sie, was sie sein sollten. Dadurch hilfst du ihnen zu werden, was sie sein können. (Goethe)


RPi-4B mit HM-CFG-LAN und viele weitere HM Komponenten, diverse Shellys, Tuya-Geräte, SMA und Solis Wechselrichter, Elgris EnergyManager, go-e Wallbox
Drucken
Nach oben Seiten1
Benutzer-Aktionen