TabletUI 2.6 - HTML Vorlage akuell mit Menüband linke Seite

Begonnen von Kusselin, 20 Februar 2018, 13:47:26

Vorheriges Thema - Nächstes Thema

Kusselin

Hallo Zusammen,

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

Vielen Dank.

Gruss

Kussel


Kusselin

o.k. danke...

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

Gruss

drhirn

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.

Kusselin

#4
Den Code für das Pagebuttonmenü...kommt das vor den Gridster Bereich?

drhirn

Nein, danach.

<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" ....

Otto

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
Gruss Otto

.oOo.oOo.oOo.oOo.oOo.oOo.oOo.oOo.oOo.oOo.oOo.oOo.oOo.oOo.oOo.

docker - homematic

Kusselin

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.

Kusselin

#8
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:

<!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:

<!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:

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

SirMarco


Kusselin

#10
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.

setstate

Die Unterseite muss sich innerhalb der .page div befinden:


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


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

Kusselin

setstate...vielen Dank..ich kann das aber erst heute abend probieren...aber trotzdem danke

ich melde mich wieder

Kusselin

Zitat von: setstate am 21 Februar 2018, 07:42:40
Die Unterseite muss sich innerhalb der .page div befinden:


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

Kusselin

#14
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.