[FTUI3] index.html aufteilen (gelöst)

Begonnen von curt, 24 Januar 2022, 10:17:39

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

curt

24 Januar 2022, 10:17:39 Letzte Bearbeitung: 31 Januar 2022, 02:41:51 von curt
Der Bezug aus dem Riesen-Thread:

Zitat von: OdfFhem am 11 Januar 2022, 04:12:50
Zitat von: curt am 11 Januar 2022, 03:02:00
Zitat
Und noch eine ganz allgemeine Frage:
Bei ftui2 konnte man mit Includes arbeiten (die ich immer in Verdacht hatte, dass sie für nicht aktualisierte Daten verantwortlich sind): Also man hatte nicht nur index.html sondern einen Sack weiterer Textdateien - das machte die Sache übersichtlicher. Gibt es sowas auch für FTUI3?

ftui-content
Beispiele im examples-Ordner wie content.html oder tab-content.html oder ... zeigen die Verwendungsweise ...

... oder zeigen sie auch nicht - ich habe das jedenfalls nicht hinbekommen: Ich bin doof.

Zuerst das Ziel der Veranstaltung:
Man kann natürlich alles in genau einer index.html haben. Aber das wird schnell unübersichtlich und schlecht handhabbar. Besser wäre es, Code. Teile auszulagern - sofern gewährleistet ist, dass sie im Sinne eines @include sofort eingelesen werden.
(Es muss insbesondere gewährleistet sein, dass index.html und sämtliche include-Files wie eine einzige index.html verarbeitet werden!)

Ein funktionierendes und leicht nachvollziehbares Beispiel wäre mir (und vielleicht anderen später nachlesenden) hilfreich:

Gegeben sei (Auszug):
Code Auswählen

  <ftui-grid base-width="96" base-height="86" margin="4">

    <ftui-grid-tile row="1" col="1" height="5" width="1" color="black">
      <ftui-column>
        <ftui-tab view="View1" direction="vertical" active>
          <ftui-icon name="circle"></ftui-icon>
          <ftui-label>Home</ftui-label>
        </ftui-tab>
        <ftui-tab view="View2" direction="vertical">
          <ftui-icon name="home1" color="my_yellow"></ftui-icon>
          <ftui-label>Haus</ftui-label>
        </ftui-tab>


Wenn wir uns "View2" genauer ansehen, dann steht in index.html ein riesiger Codeblock, bei mir fängt der so an:
Code Auswählen

<!-- Fenster und Heizung -->
    <ftui-tab-view id="View2">
    <!-- Zeile 1 -->
      <ftui-grid-tile row="1" col="2" height="1" width="1" color="black">
...


Ich möchte also diesen Codeblock der einfacheren Wartung wegen in eine Datei view2.html auslagen - kriege das aber nicht hin.

Für mich, aber wohl auch Millionen anderer künftiger Nutzer wäre ein nachvollziehbares Codebeispiel sehr schön. Darum bitte ich in aller Demut.

P.S: Suchbegriffe ausgelagert auslagern Dateien Files include
RPI 4 - Jeelink HomeMatic Z-Wave

grossmaggul

#1
24 Januar 2022, 11:33:15
Soweit ich mich erinnere kannst Du <grids> nicht auslagern.
Du müsstest das dann so machen(sieht man aber auch in den examples):

Code Auswählen
<ftui-tab-view id="test">
        <ftui-grid-tile row="5" col="2" height="4" width="9" shape="round" class="semitransparent">
        <ftui-content file="content/test.html"></ftui-content>
        </ftui-grid-tile>
</ftui-tab-view>

Und ins content file "test.html" kommt dann das was Du in dem Grid-Tile darstellen möchtest.

Du baust also praktisch das Grid-Gerüst in der index.html und lagerst dann die Inhalte der Tiles aus, so habe ich das zumindest verstanden.
Ist eben ein anderes Konzept, als die includes aus FTUI2.

FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1

Klafhem

#2
26 Januar 2022, 17:43:30
Ich versuche die views auf folgende Art auszulagern.
Ich habe mein grid in 11 Reihen und 14 Kolonnen eingeteilt.
In die index.html kommt nur das Menü und sämtliche ftui-tab-view ids.

Code Auswählen
<!DOCTYPE html>
<html>

<head>
<!--
/* FHEM tablet ui - FTUI */
/**
* UI builder framework for FHEM
*
* Version: 3.0.0
*
* Copyright (c) 2015-2020 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
* https://github.com/knowthelist/ftui
*/
-->
<script src="ftui.js"></script>

<link href="css/ftui.css" rel="stylesheet">
<link href="css/ftui-user.css" rel="stylesheet">
<link href="themes/ftui-theme.css" rel="stylesheet">
<link href="favicon.ico" rel="icon" type="image/x-icon" />

<!-- avoid 300ms delay on click-->
<meta name="viewport" content="width=device-width">

<meta name="mobile-web-app-capable" content="yes">
<meta name="toast_position" content="topLeft">

<!-- verbose level 0-4 -->
<meta name="debug" content="0">

</head>

<body>

<ftui-grid rows="11" cols="14" margin="8">

<ftui-grid-tile class="DesignLi" row="1" col="1" height="1" width="2">
<ftui-clock format="hh:mm:ss" class="size-4"></ftui-clock>
<ftui-clock format="ee DD.MM.YYYY" class="size-3"></ftui-clock>
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="2" col="1" height="1" width="2">
<ftui-tab view="Start" direction="vertical" style="z-index:1" active>
<ftui-icon name="home1" class="big"></ftui-icon>
</ftui-tab>
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="3" col="1" height="1" width="2">
<ftui-tab view="Fenster" direction="vertical" style="z-index:1" class="large">Fenster</ftui-tab>
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="4" col="1" height="1" width="2">
<ftui-tab view="Elektrik_1" direction="vertical" style="z-index:1" class="large">Elektrik UG/EG</ftui-tab>
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="5" col="1" height="1" width="2">
<ftui-tab view="Elektrik_2" direction="vertical" style="z-index:1" class="large">Elektrik OG/DG</ftui-tab>
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="6" col="1" height="1" width="2">
<ftui-tab view="Raumklima" direction="vertical" style="z-index:1" class="large">Raumklima</ftui-tab>
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="7" col="1" height="1" width="2">
<ftui-tab view="Automatik" direction="vertical" style="z-index:1" class="large">Automatik</ftui-tab>
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="8" col="1" height="1" width="2">
<ftui-tab view="Wetter" direction="vertical" style="z-index:1" class="large">Wetter</ftui-tab>
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="9" col="1" height="1" width="2">
<ftui-tab view="Daten" direction="vertical" style="z-index:1" class="large">Daten</ftui-tab>
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="10" col="1" height="1" width="2">
<ftui-tab view="Medien" direction="vertical" style="z-index:1" class="large">Medien</ftui-tab>
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="11" col="1" height="1" width="2">
<ftui-tab view="Zimmer" direction="vertical" style="z-index:1" class="large">Zimmer</ftui-tab>
</ftui-grid-tile>

<!-- Views 1. Ebene Beginn -->

<ftui-tab-view id="Start">
<ftui-content file="Pages/p_Start.html"></ftui-content>
</ftui-tab-view>

<ftui-tab-view id="Fenster">
<ftui-content file="Pages/Fenster/p_FE_Start.html"></ftui-content>
</ftui-tab-view>

<ftui-tab-view id="Elektrik_1">
<ftui-content file="Pages/Elektrik/p_E1_Start.html"></ftui-content>
</ftui-tab-view>

<ftui-tab-view id="Elektrik_2">
<ftui-content file="Pages/Elektrik/p_E2_Start.html"></ftui-content>
</ftui-tab-view>

<ftui-tab-view id="Raumklima">
<ftui-content file="Pages/Raumklima/p_RK_Start.html"></ftui-content>
</ftui-tab-view>

<ftui-tab-view id="Automatik">
<ftui-content file="Pages/Automatik/p_AU_Start.html"></ftui-content>
</ftui-tab-view>

<ftui-tab-view id="Wetter">
<ftui-content file="Pages/Wetter/p_WE_Start.html"></ftui-content>
</ftui-tab-view>

<ftui-tab-view id="Daten">
<ftui-content file="Pages/Daten/p_DA_Start.html"></ftui-content>
</ftui-tab-view>

<ftui-tab-view id="Medien">
<ftui-content file="Pages/Medien/p_ME_Start.html"></ftui-content>
</ftui-tab-view>

<ftui-tab-view id="Zimmer">
<ftui-content file="Pages/Zimmer/p_ZI_Start.html"></ftui-content>
</ftui-tab-view>

<!-- Views 1. Ebene Ende -->

<!-- Views 2. Ebene Beginn -->

<!-- Views Fenster Beginn -->


<!-- Views Fenster Ende -->

<!-- Views Elektrik 1 Beginn -->


<!-- Views Elektrik 1 Ende -->

<!-- Views Elektrik 2 Beginn -->


<!-- Views Elektrik 2 Ende -->

<!-- Views Raumklima Beginn -->

<ftui-tab-view id="RK_06_1_Warmwasser">
<ftui-content file="Pages/Raumklima/RK_06_1_Warmwasser.html"></ftui-content>
</ftui-tab-view>


<!-- Views Raumklima Ende -->

<!-- Views Zimmer Beginn -->


<!-- Views Zimmer Ende -->

<!-- Views 2. Ebene Ende -->

</ftui-grid>
</body>

</html>


Die einzelnen views haben die gleiche grid Struktur wie die index.html, der Inhalt beginnt aber immer erst in Kolonne 3.
Durch direction="vertical" und style="z-index:1" in den Menüpunkten bleibt das Menü immer klickbar und die neuen views befinden sich immer rechts des Menüs.
Unter /opt/fhem/www/ftui habe ich die Ordner- und Dateistruktur Pages/.../... erstellt.
Der view für Raumklima sieht so aus:
Code Auswählen

<ftui-grid rows="11" cols="14" margin="8">

<ftui-grid-tile class="DesignLi" row="1" col="3" width="12" height="1">
<ftui-label size="5">Temperaturen / Feuchtigkeit / Heizkörper</ftui-label>
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi border-link" row="2" col="3" width="2" height="1">
<ftui-tab view="RK_06_1_Warmwasser"><ftui-label size="3" color="white">UG Warmwasser</ftui-label></ftui-tab>
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="2" col="5" width="4" height="1">
<ftui-content file="Subs/s_RK_T2_4x1.html"
conDevice="HM_06_WarmWasser" conIcon1="sani_supply_temp" conIcon2="sani_return_temp">
</ftui-content>
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi border-link" row="2" col="9" width="2" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="2" col="11" width="4" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi border-link" row="3" col="3" width="2" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="3" col="5" width="4" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi border-link" row="3" col="9" width="2" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="3" col="11" width="4" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi border-link" row="4" col="3" width="2" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="4" col="5" width="4" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi border-link" row="4" col="9" width="2" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="4" col="11" width="4" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi border-link" row="5" col="3" width="2" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="5" col="5" width="4" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi border-link" row="5" col="9" width="2" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="5" col="11" width="4" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi border-link" row="6" col="3" width="2" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="6" col="5" width="4" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi border-link" row="6" col="9" width="2" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="6" col="11" width="4" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi border-link" row="7" col="3" width="2" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="7" col="5" width="4" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi border-link" row="7" col="9" width="2" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="7" col="11" width="4" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi border-link" row="8" col="3" width="2" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="8" col="5" width="4" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi border-link" row="8" col="9" width="2" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="8" col="11" width="4" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="9" col="3" width="2" height="1"></ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="9" col="5" width="4" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="9" col="9" width="2" height="1"></ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="9" col="11" width="4" height="1"></ftui-grid-tile>

<ftui-grid-tile class="DesignLi border-link" row="10" col="3" width="2" height="1">
<ftui-tab view="RK_26_1_HzkBz"><ftui-label size="3" color="white">OG Badezimmer</ftui-label></ftui-tab>
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="10" col="5" width="4" height="1">
<ftui-content file="Subs/s_RK_TV_4x1.html"
conDevice="HM_26_HZK" conTemp1="ACTUAL_TEMPERATURE" conTemp2="SET_TEMPERATURE" conValve="VALVE_STATE">
</ftui-content>
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="10" col="9" width="2" height="1"></ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="10" col="11" width="4" height="1"></ftui-grid-tile>

<ftui-grid-tile class="DesignLi border-link" row="11" col="3" width="2" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="11" col="5" width="4" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi border-link" row="11" col="9" width="2" height="1">
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="11" col="11" width="4" height="1">
</ftui-grid-tile>

</ftui-grid>


Von dort geht es dann in die nächste Ebene z.B.: Warmwasser:
Code Auswählen

<ftui-grid rows="11" cols="14" margin="8">

<ftui-grid-tile class="DesignLi" row="1" col="3" width="12" height="1">
<ftui-label size="5">Temperaturen / Feuchtigkeit / Heizkörper</ftui-label>
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="2" col="3" width="2" height="1">
<ftui-label size="4">Links</ftui-label>
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="2" col="5" width="5" height="1">
<ftui-label size="5">UG Heizraum Warmwasser</ftui-label>
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="2" col="10" width="5" height="1">
<ftui-content file="Subs/s_RK_T2_4x1.html"
conDevice="HM_06_WarmWasser" conIcon1="sani_supply_temp" conIcon2="sani_return_temp">
</ftui-content>
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi border-link" row="3" col="3" width="2" height="1">
<ftui-tab view="RK_06_1_Heizraum" color="white" class="big">Heizraum&nbsp;Temp</ftui-tab>
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="4" col="3" width="2" height="1"></ftui-grid-tile>

<ftui-grid-tile class="DesignLi border-link" row="5" col="3" width="2" height="1">
<ftui-tab view="p_ZI_06_1_UGHr" color="white" class="big">UG Heizraum</ftui-tab>
</ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="6" col="3" width="2" height="6"></ftui-grid-tile>

<ftui-grid-tile class="DesignLi" row="3" col="5" width="10" height="9">
<ftui-chart title="Warmwassertemperatur Heizungsraum"
y-label="Temperaturen"
y1-label="Differemz"
unit="24h"
y-min="-1"
y-max="70"
y1-min="-5"
y1-max="50">
<ftui-chart-data
log="Daten_LOG"
file="history"
spec="HM_06_WarmWasser:1.TEMPERATURE"
[update]="HM_06_WarmWasser:1.TEMPERATURE:time"
extend="true"
label="Vorlauf"
color="Ein">
</ftui-chart-data>
<ftui-chart-data
log="Daten_LOG"
file="history"
spec="HM_06_WarmWasser:2.TEMPERATURE"
[update]="HM_06_WarmWasser:2.TEMPERATURE:time"
extend="true"
label="Rücklauf"
color="blue">
</ftui-chart-data>
<ftui-chart-data
log="Daten_LOG"
file="history"
spec="HM_06_WarmWasser:3.TEMPERATURE"
[update]="HM_06_WarmWasser:3.TEMPERATURE:time"
extend="true"
y-axis-id="y1"
label="Differenz"
color="Aus">
</ftui-chart-data>
<ftui-chart-controls units="hour, day, 24h, week, 30d"></ftui-chart-controls>
</ftui-chart>
</ftui-grid-tile>

</ftui-grid>


Bei vielen Unterseiten wird das Ganze aber zumindest bei mir etwas langsam.
Ich weiß nicht was die Profis dazu sagen, aber bei mir funktioniert es bisher.

grossmaggul

#3
27 Januar 2022, 15:09:46
Wundert mich, daß das funktioniert, bei meinen Versuchen <ftui-grid-tile> in die views auszulagern bin ich kläglich gescheitert.
Hast Du denn in den content Seiten immer den kompletten Header der index.html Seite drin, als <body><header> etc.?
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1

Klafhem

#4
27 Januar 2022, 15:48:55
Der Header befindet sich nur in der Index Seite.
Alle anderen Seiten beginnen bei mir direkt mit: <ftui-grid rows="11" cols="14" margin="8"> , also der gleichen grid Einteilung wie in der Index Seite.
Auf der Index Seite befindet sich links nur das Menü, sonst ist sie leer (abgesehen von den view-tab-ids).
Ich erkläre mir die Sache so:
Die weiteren Seiten überdecken dann die Index Seite, deshalb müssen die einzelnen Elemente der weiteren Seiten auch in der Spalte nach dem Menü beginnen.
Mit style="z-index:1" in den Menüpunkten wird das Menü der Index Seite quasi über die neuen Seiten gehoben und dadurch klickbar.

grossmaggul

#5
27 Januar 2022, 17:18:57
O.K., das kann natürlich sein, da bin ich leider nicht so firm.:-(
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1

curt

#6
31 Januar 2022, 01:59:27
Also erstmal finde ich Deine Idee der Unterverzeichnisse gut, bei FTUI2 hatte ich das alles im Hauptverzeichnis.

Zitat von: Klafhem am 27 Januar 2022, 15:48:55
Mit style="z-index:1" in den Menüpunkten wird das Menü der Index Seite quasi über die neuen Seiten gehoben und dadurch klickbar.

Ok... also das ist als Option in der linken Spalte (des nicht unüblichen Designs) wichtig: Erste Voraussetzung.

Zitat von: Klafhem am 27 Januar 2022, 15:48:55
Alle anderen Seiten beginnen bei mir direkt mit: <ftui-grid rows="11" cols="14" margin="8"> , also der gleichen grid Einteilung wie in der Index Seite.

Habe ich nicht.

Aber ich habe
Code Auswählen

<ftui-grid base-width="96" base-height="86" margin="4">


und kann das ja oben in die Datei mit dem ausgelagerten Code packen: Zweite Voraussetzung.

Hei, das funktioniert.  :)
@Klafhem ich danke Dir sehr!
RPI 4 - Jeelink HomeMatic Z-Wave

curt

#7
31 Januar 2022, 07:20:07
Grrrr, Problem.

Wenn man den Inhalt der -ich sage mal Homepage- also von "active" auslagert, wird die Homepage der rechten Seite beim Reload nicht angezeigt: Die rechte Seite bleibt leer.

Ich bin mir recht sicher, dass @setstate eine Direktive vorgesehen hat, die ein "Vorladen" eines Inhalts vorsieht - und damit wohl genau dieses Problem löst: Ich habe sowas vor einiger Zeit schon gelesen.

Ich suche mir gerade einen Wolf. Ich finde diese Option nicht mehr. Kann mir bitte jemand einen Schubs geben?
RPI 4 - Jeelink HomeMatic Z-Wave
Drucken
Nach oben Seiten1
Benutzer-Aktionen