Nur Text | Text mit Bildern

FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: Kusselin am 20 Februar 2018, 13:47:26

Titel: TabletUI 2.6 - HTML Vorlage akuell mit Menüband linke Seite
Beitrag von: Kusselin am 20 Februar 2018, 13:47:26
Hallo Zusammen,

besteht die Möglichkeit eine TabletUI Vorlage (als HTML-Code) mit einem Menü am linken Rand zu bekommen.

Vielen Dank.

Gruss

Kussel
Titel: Antw:TabletUI 2.6 - HTML Vorlage akuell mit Menüband linke Seite
Beitrag von: drhirn am 20 Februar 2018, 13:52:26
Bittesehr: https://wiki.fhem.de/wiki/FTUI_Widget_Pagebutton#Navigationsleiste
Titel: Antw:TabletUI 2.6 - HTML Vorlage akuell mit Menüband linke Seite
Beitrag von: Kusselin am 20 Februar 2018, 14:02:44
o.k. danke...

vielleicht erbarmt sich ja noch jemand der mir seine fertiges Pagebutton zur Verfügung stellen kann..

Gruss
Titel: Antw:TabletUI 2.6 - HTML Vorlage akuell mit Menüband linke Seite
Beitrag von: drhirn am 20 Februar 2018, 14:07:54
Wofür? Das musst du dann sowieso an deine Umgebung anpassen. Da bist du gleich schnell, wenn du die Vorlage aus dem Wiki nimmst.

Abgesehen davon solltest du endlich anfangen selber zu denken und nicht immer erwarten, dass andere die Arbeit für dich machen.
Titel: Antw:TabletUI 2.6 - HTML Vorlage akuell mit Menüband linke Seite
Beitrag von: Kusselin am 20 Februar 2018, 14:16:38
Den Code für das Pagebuttonmenü...kommt das vor den Gridster Bereich?
Titel: Antw:TabletUI 2.6 - HTML Vorlage akuell mit Menüband linke Seite
Beitrag von: drhirn am 20 Februar 2018, 14:23:33
Nein, danach.
Code Auswählen

<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" ....
Titel: Antw:TabletUI 2.6 - HTML Vorlage akuell mit Menüband linke Seite
Beitrag von: Otto am 20 Februar 2018, 15:23:15
Zitatvielleicht erbarmt sich ja noch jemand der mir seine fertiges Pagebutton zur Verfügung stellen kann..

Schau hier: [FHEM-Tablet-UI] User-Demos
https://forum.fhem.de/index.php/topic,37378.0.html
Titel: Antw:TabletUI 2.6 - HTML Vorlage akuell mit Menüband linke Seite
Beitrag von: Kusselin am 20 Februar 2018, 16:04:24
Ja es passt ja jetzt......

Otto, ich wollte wissen ob der verweis vor dem Gridster kommt oder danach und klar, ein vorgefertigtes ist für mich auch gut...so kann ich dann vergleichen....aber alles gut.

ich muss jetzt zu denken anfangen imd nicht alles vorkauen lassen und deshalb ist alles gut.
Titel: Antw:TabletUI 2.6 - HTML Vorlage akuell mit Menüband linke Seite
Beitrag von: Kusselin am 20 Februar 2018, 19:08:09
Brauch wieder eure Hilfe....,

bin am probieren und probieren und es wird auch besser aber es wird leider nichts angezeigt.

Wäre es vielleicht möglich das Ihr mal über den HTML Code drüberschauen könnt, ich denke das ist nicht zuviel verlangt. ich mache bestimmt wieder einen Denkfehler......

Hier iste meine gebaute index.html:

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/
     */
    -->
    <link rel="icon" href="favicon.ico" type="image/x-icon" />

    <!-- 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" / -->

    <script src="js/fhem-tablet-ui.js" defer></script>


    <!-- Remove this line to enable for usage with WebViewControl
    <script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    <script src="../pgm2/cordova-2.3.0.js" defer></script>
    <script src="../pgm2/webviewcontrol.js" defer></script>
    <!-- End for WebViewControl -->
<meta name='lang' content='de'>
<meta name="longpoll" content="1">
<meta name="widget_base_width" content="116">
<meta name="widget_base_height" content="131">


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

<body>

<div class="gridster">

<ul>

<li data-row="1" data-col="1" data-sizex="1" data-sizey="5">
    <div data-type="pagebutton"
         data-url="#page1.html"
         data-load="#page1"
         data-active-pattern=".*#page1.html"
         data-icon="mi-weekend"
         class="default"></div>
    <div data-type="pagebutton"
         data-url="#page2.html"
         data-load="#page2"
         data-active-pattern=".*#page2.html"
         data-icon="mi-music_video"></div>
    <div data-type="pagebutton"
         data-url="#page3.html"
         data-load="#page3"
         data-active-pattern=".*#page3.html"
         data-icon="mi-tv"></div>
</li>



<li data-row="1" data-col="2" data-sizex="9" data-sizey="5">
    <div class="page" id="page1"></div>
    <div class="page" id="page2"></div>
    <div class="page" id="page3"></div>
</li>

</ul>
</div>
</body>
</html>


dann habe ich die Page1 als beispiel gebaut:

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



<body>

<div class="gridster">

<ul>



<div class="page" id="page1">
    <div data-type="label">Hauptmenü</div>
</div>




<li data-row="1" data-col="3" data-sizex="10" data-sizey="1">

<div class="darker"><header>Wettervorhersage</header></div>


<div class="col-1">
<div data-type="label" class="darker">Aktuell</div>
<div data-type="weather" data-device="MeinWetter" data-get="condition" data-imageset="kleinklima" class="mini"></div>
<div data-type="label" data-device="MeinWetter" data-get="condition" class="darker"></div>
<div data-type="label" data-device="MeinWetter" data-get="temp_c" data-unit="%B0C%0A" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' ></div>
</div>

<div class="col-1">
<div data-type="label" class="darker">Heute</div>
<div data-type="weather" data-device="MeinWetter" data-get="fc1_condition" data-imageset="kleinklima" class="mini"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc1_condition" class="darker"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc1_low_c" data-unit="%B0C%0A" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' class="darker inline"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc1_high_c" data-unit="%B0C%0A" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' class="darker inline"></div>
</div>

<div class="col-1">
<div data-type="label" data-device="MeinWetter" data-get="fc2_day_of_week" class="darker"></div>
<div data-type="weather" data-device="MeinWetter" data-get="fc2_condition" data-imageset="kleinklima" class="mini"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc2_condition" class="darker"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc2_low_c" data-unit="%B0C%0A" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' class="darker inline"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc2_high_c" data-unit="%B0C%0A" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' class="darker inline"></div>
</div>

<div class="col-1">
<div data-type="label" data-device="MeinWetter" data-get="fc3_day_of_week" class="darker"></div>
<div data-type="weather" data-device="MeinWetter" data-get="fc3_condition" data-imageset="kleinklima" class="mini"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc3_condition" class="darker"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc3_low_c" data-unit="%B0C%0A" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' class="darker inline"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc3_high_c" data-unit="%B0C%0A" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' class="darker inline"></div>
</div>

<div class="col-1">
<div data-type="label" data-device="MeinWetter" data-get="fc4_day_of_week" class="darker"></div>
<div data-type="weather" data-device="MeinWetter" data-get="fc4_condition" data-imageset="kleinklima" class="mini"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc4_condition" class="darker"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc4_low_c" data-unit="%B0C%0A" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' class="darker inline"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc4_high_c" data-unit="%B0C%0A" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' class="darker inline"></div>
</div>


<div class="col-1">
<div data-type="label" data-device="MeinWetter" data-get="fc5_day_of_week" class="darker"></div>
<div data-type="weather" data-device="MeinWetter" data-get="fc5_condition" data-imageset="kleinklima" class="mini"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc5_condition" class="darker"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc5_low_c" data-unit="%B0C%0A" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' class="darker inline"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc5_high_c" data-unit="%B0C%0A" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' class="darker inline"></div>
</div>

<div class="col-1">
<div data-type="label" data-device="MeinWetter" data-get="fc6_day_of_week" class="darker"></div>
<div data-type="weather" data-device="MeinWetter" data-get="fc6_condition" data-imageset="kleinklima" class="mini"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc6_condition" class="darker"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc6_low_c" data-unit="%B0C%0A" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' class="darker inline"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc6_high_c" data-unit="%B0C%0A" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' class="darker inline"></div>
</div>
  </li>




 

 
 


 



<li data-row="2" data-col="3" data-sizex="1" data-sizey="3">
     
    <div class="darker"><header>Pollen</header></div>

<p><div class="row">
<div class="col">
<div data-type="label">Heute</div>
<div data-type="symbol" data-device="Pollenflugvorhersage" data-get="fc1_maximum" data-icons='["oa-weather_pollen"]' data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]' data-on-colors='["white","yellow","orange","red"]' class="big"></div>
</div>
<div class="col">
<div data-type="label" data-device="MeinWetter" data-get="fc2_day_of_week" class="darker"></div>
<div data-type="symbol" data-device="Pollenflugvorhersage" data-get="fc2_maximum" data-icons='["oa-weather_pollen"]' data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]' data-on-colors='["white","yellow","orange","red"]' class="big"></div>
</div>
</div>

<div class="row">
<div class="col">
<div data-type="label">Erle</div>
<div data-type="symbol" data-device="Pollenflugvorhersage" data-get="fc1_Erle" data-icons='["oa-weather_pollen"]' data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]' data-on-colors='["white","yellow","orange","red"]' class="big"></div>
</div>
<div class="col">
<div data-type="label" data-device="MeinWetter" data-get="fc3_day_of_week" class="darker"></div>
<div data-type="symbol" data-device="Pollenflugvorhersage" data-get="fc3_maximum" data-icons='["oa-weather_pollen"]' data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]' data-on-colors='["white","yellow","orange","red"]' class="big"></div>
</div>
</div>

<div class="row">
<div class="col">
<div data-type="label" >Gr&auml;ser</div>
<div data-type="symbol" data-device="Pollenflugvorhersage" data-get="fc1_Graeser" data-icons='["oa-weather_pollen"]' data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]' data-on-colors='["white","yellow","orange","red"]' class="big"></div>
</div>
<div class="col">
<div data-type="label" data-device="MeinWetter" data-get="fc4_day_of_week" class="darker"></div>
<div data-type="symbol" data-device="Pollenflugvorhersage" data-get="fc4_maximum" data-icons='["oa-weather_pollen"]' data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]' data-on-colors='["white","yellow","orange","red"]' class="big"></div>
</div>
</div>

<div class="row">
<div class="col">
<div data-type="label" >Roggen</div>
<div data-type="symbol" data-device="Pollenflugvorhersage" data-get="fc1_Roggen" data-icons='["oa-weather_pollen"]' data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]' data-on-colors='["white","yellow","orange","red"]' class="big"></div>
</div>
<div class="col">
<div data-type="label" data-device="MeinWetter" data-get="fc5_day_of_week" class="darker"></div>
<div data-type="symbol" data-device="Pollenflugvorhersage" data-get="fc5_maximum" data-icons='["oa-weather_pollen"]' data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]' data-on-colors='["white","yellow","orange","red"]' class="big"></div>
</div>
</div>

     
  </li>


und hier die Page2:

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



<body>

<div class="gridster">

<ul>



<div class="page" id="page2">
    <div data-type="label">Page 2</div>
</div>




<li data-row="1" data-col="3" data-sizex="10" data-sizey="1">

<div class="darker"><header>Wettervorhersage</header></div>


<div class="col-1">
<div data-type="label" class="darker">Aktuell</div>
<div data-type="weather" data-device="MeinWetter" data-get="condition" data-imageset="kleinklima" class="mini"></div>
<div data-type="label" data-device="MeinWetter" data-get="condition" class="darker"></div>
<div data-type="label" data-device="MeinWetter" data-get="temp_c" data-unit="%B0C%0A" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' ></div>
</div>

<div class="col-1">
<div data-type="label" class="darker">Heute</div>
<div data-type="weather" data-device="MeinWetter" data-get="fc1_condition" data-imageset="kleinklima" class="mini"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc1_condition" class="darker"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc1_low_c" data-unit="%B0C%0A" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' class="darker inline"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc1_high_c" data-unit="%B0C%0A" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' class="darker inline"></div>
</div>

<div class="col-1">
<div data-type="label" data-device="MeinWetter" data-get="fc2_day_of_week" class="darker"></div>
<div data-type="weather" data-device="MeinWetter" data-get="fc2_condition" data-imageset="kleinklima" class="mini"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc2_condition" class="darker"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc2_low_c" data-unit="%B0C%0A" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' class="darker inline"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc2_high_c" data-unit="%B0C%0A" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' class="darker inline"></div>
</div>

<div class="col-1">
<div data-type="label" data-device="MeinWetter" data-get="fc3_day_of_week" class="darker"></div>
<div data-type="weather" data-device="MeinWetter" data-get="fc3_condition" data-imageset="kleinklima" class="mini"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc3_condition" class="darker"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc3_low_c" data-unit="%B0C%0A" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' class="darker inline"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc3_high_c" data-unit="%B0C%0A" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' class="darker inline"></div>
</div>

<div class="col-1">
<div data-type="label" data-device="MeinWetter" data-get="fc4_day_of_week" class="darker"></div>
<div data-type="weather" data-device="MeinWetter" data-get="fc4_condition" data-imageset="kleinklima" class="mini"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc4_condition" class="darker"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc4_low_c" data-unit="%B0C%0A" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' class="darker inline"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc4_high_c" data-unit="%B0C%0A" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' class="darker inline"></div>
</div>


<div class="col-1">
<div data-type="label" data-device="MeinWetter" data-get="fc5_day_of_week" class="darker"></div>
<div data-type="weather" data-device="MeinWetter" data-get="fc5_condition" data-imageset="kleinklima" class="mini"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc5_condition" class="darker"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc5_low_c" data-unit="%B0C%0A" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' class="darker inline"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc5_high_c" data-unit="%B0C%0A" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' class="darker inline"></div>
</div>

<div class="col-1">
<div data-type="label" data-device="MeinWetter" data-get="fc6_day_of_week" class="darker"></div>
<div data-type="weather" data-device="MeinWetter" data-get="fc6_condition" data-imageset="kleinklima" class="mini"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc6_condition" class="darker"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc6_low_c" data-unit="%B0C%0A" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' class="darker inline"></div>
<div data-type="label" data-device="MeinWetter" data-get="fc6_high_c" data-unit="%B0C%0A" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' class="darker inline"></div>
</div>
  </li>

einfach nochmal das Wetter zum Testen....

ich kann im tabletui die seiten anklicken und diese gehen auch auf...nur wird nichts angezeigt.

Jetzt könnt ihr mir in den Codes ev. markieren was ich falsch mache.

Vielen dank
Titel: Antw:TabletUI 2.6 - HTML Vorlage akuell mit Menüband linke Seite
Beitrag von: SirMarco am 20 Februar 2018, 23:07:17
Stimmt der data-device Name?
Titel: TabletUI 2.6 - HTML Vorlage akuell mit Menüband linke Seite
Beitrag von: Kusselin am 21 Februar 2018, 06:06:32
Ja der data-device name stimmt.
Es stimmt was nicht mit dem Pagebutton menü. Hier wollte ich eine information bitte

Ich habe ja eine Index.html Datei die aber anders aufgebaut ist und da ich mein fhem neu aufsetze möchte ich auch gleichzeitig eine Standard Index.html Datei verwenden.

Es wird die Leiste links angezeigt mit den drei icons und auch der Name...

Nur wenn ich dann meinen Html.code befülle  in gridster bereich dann wird auf der jeweiligen Page nix angezeigt.

Ich hoffe das ist eine berechtigte Frage und bekomme darauf eine aussagefähige Antwort.
Ich bedanke mich im Voraus.
Titel: Antw:TabletUI 2.6 - HTML Vorlage akuell mit Menüband linke Seite
Beitrag von: setstate am 21 Februar 2018, 07:42:40
Die Unterseite muss sich innerhalb der .page div befinden:

Code Auswählen

<div class="page" id="page1">
<!-- hier die ganze Seite -->
</div>


Bei dir dürfte jetzt nur <div data-type="label">Hauptmenü</div> angezeigt werden
Titel: Antw:TabletUI 2.6 - HTML Vorlage akuell mit Menüband linke Seite
Beitrag von: Kusselin am 21 Februar 2018, 07:50:39
setstate...vielen Dank..ich kann das aber erst heute abend probieren...aber trotzdem danke

ich melde mich wieder
Titel: Antw:TabletUI 2.6 - HTML Vorlage akuell mit Menüband linke Seite
Beitrag von: Kusselin am 21 Februar 2018, 07:53:40
Zitat von: setstate am 21 Februar 2018, 07:42:40
Die Unterseite muss sich innerhalb der .page div befinden:

Code Auswählen

<div class="page" id="page1">
<!-- hier die ganze Seite -->
</div>


Bei dir dürfte jetzt nur <div data-type="label">Hauptmenü</div> angezeigt werden

YOU ARE THE BEST!! :D das wars....dann habe ich nur den Code in den falschen Bereich gesetzt!!
Titel: Antw:TabletUI 2.6 - HTML Vorlage akuell mit Menüband linke Seite
Beitrag von: Kusselin am 21 Februar 2018, 12:42:47
Setstate...woher rührt es noch wenn ich zb. fhem aufrufe und dort dann links im menü auf tablet UI klicke das dann beim umschalten erst kurz noch ein weißer Bildschirm aufleuchtet und dann erst tabletUI selbst?

Die Index.html Datei stimmt aber soweit oder? da bitte ich einen Experten drüberschauen zu lassen.

Ich habe mal gegoogelt, aber eine Index.html Wiki Seite gibt es nicht.

Wäre nett wenn man mir sagen könnte das die Index.HTML datei soweit O.K. ist und die verlinkung auf Page1.

Vielen Dank an Euch.


Titel: Antw:TabletUI 2.6 - HTML Vorlage akuell mit Menüband linke Seite
Beitrag von: setstate am 22 Februar 2018, 09:28:30
Die Seite erscheint erst weiß, weil zu diesem Zeitpunkt noch kein Stylesheet geladen ist. Das wird dynamisch nachgeladen. Wenn dich das stört, musst du die Styles schon in der index.html in den Header eintragen.
Titel: Antw:TabletUI 2.6 - HTML Vorlage akuell mit Menüband linke Seite
Beitrag von: Wolfgang Hochweller am 17 Juni 2018, 13:14:52
Bekomme ich es auch hin, dass das Menueband nicht viel breiter wird als die Icons ?
Also schmaler als eine normale Kachel ?
Oder muss ich dafuer die Anzahl der Spalten erhoehen und nachher entsprechend mehr Spalten fuer die Widgets nehmen ?
Nur Text | Text mit Bildern