Guten Morgen,
ich kann es drehen und wenden wie ich will, aber ich kriege eine Navigationsleiste mit Pagebutton nicht hin, so dass diese unten und horizontal an der Seite angezeigt wird.... Meiner Frau würde es viel besser gefallen und das ist ein Argument, dem ich mich nicht widersetzen kann :-)
Hat mir vielleicht jemand ein simples Beispiel, wie das gemacht wird?
PS: Da ich Anfänger bin bin ich auch offen für ein anderes Navigations-Widget.
Danke
Zeig mal deine index.html Datei
hier ist ist:
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* UI builder framework for FHEM
*
* Version: 2.5.0
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015-2016 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* !!!! Evaluation version - run only in a staging enviroment !!!!
*
* - create a new folder named 'tablet_eval' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet_eval
* - add 'define TABLETUIEVAL HTTPSRV ftui_eval ./www/tablet_eval Tablet-EVAL' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet_eval/
*/
-->
<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-tablet-ui-user.css" / -->
<link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />
<script src="js/fhem-tablet-ui.js" defer></script>
<!--
<meta name="gridster_cols" content="10">
<meta name="gridster_rows" content="5">
<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 class="">
<div data-type="pagebutton" data-url="#page_content_home.html" data-load="#content_home"
data-off-background-color="transparent" data-off-color="#606060"
data-on-background-color="#606060" data-on-color="#222222"
data-active-pattern="(.*/||.*index.html||.*#page_content_home.html)"
data-icon="fa-home"
class="default top-space"></div>
<div data-type="pagebutton" data-url="#page_content_wohnzimmer.html" data-load="#content_wohnzimmer"
data-off-background-color="transparent" data-off-color="#606060"
data-on-background-color="#606060" data-on-color="#222222"
data-active-pattern=".*#page_content_wohnzimmer.html"
data-icon="oa-scene_livingroom"
class="prefetch top-space"></div>
<div data-type="pagebutton" data-url="#page_content_kueche.html" data-load="#content_kueche"
data-off-background-color="transparent" data-off-color="#606060"
data-on-background-color="#606060" data-on-color="#222222"
data-active-pattern=".*#page_content_kueche.html"
data-icon="oa-scene_cooking"
class="prefetch top-space"></div>
<div data-type="pagebutton" data-url="#page_content_og.html" data-load="#content_og"
data-off-background-color="transparent" data-off-color="#606060"
data-on-background-color="#606060" data-on-color="#222222"
data-active-pattern=".*#page_content_og.html"
data-icon="oa-control_building_modern_s_okg_og"
class="prefetch top-space"></div>
<div data-type="pagebutton" data-url="#page_content_multimedia.html" data-load="#content_multimedia"
data-off-background-color="transparent" data-off-color="#606060"
data-on-background-color="#606060" data-on-color="#222222"
data-active-pattern=".*#page_content_multimedia.html"
data-icon="fa-music" class="top-space"></div>
<div data-type="pagebutton" data-url="#page_content_setup.html" data-load="#content_setup"
data-off-background-color="transparent" data-off-color="#606060"
data-on-background-color="#606060" data-on-color="#222222"
data-active-pattern=".*#page_content_setup.html"
data-icon="fa-wrench"
class="top-space"></div>
<div data-type="pagebutton" data-url="#page_content_wetter.html" data-load="#content_wetter"
data-off-background-color="transparent" data-off-color="#606060"
data-on-background-color="#606060" data-on-color="#222222"
data-active-pattern=".*#page_content_wetter.html"
data-icon="fa-sun-o"
class="top-space"></div>
</div>
</li>
<li data-row="1" data-col="2" data-sizex="9" data-sizey="5">
<div class="page" id="content_home"></div>
<div class="page" id="content_wohnzimmer"></div>
<div class="page" id="content_kueche"></div>
<div class="page" id="content_og"></div>
<div class="page" id="content_arbeitszimmer"></div>
<div class="page" id="content_multimedia"></div>
<div class="page" id="content_setup"></div>
<div class="page" id="content_wetter"></div>
</li>
</ul>
</div>
</body>
</html>
Also... gridster_rows=5 heisst Du willst 5 Zeilen.
Wenn Du die Buttons in der letzten Zeile haben willst, musst Du die in einem li data-row="5" ...packen.
Dann bleiben für die Unterseiten wie content-home nur noch 4 rows, mit data-row 1 bis 4
Gridster reagiert dynamisch. Z.B.:
- ist deine content-home Subseite komplett leer, rutschen deine Buttons sowieso nach oben.
- Überschreiben sich einige "li", versucht er das zu plazieren wie er kann.
ok.
ich habe jetzt
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="5">
<div class="">
<div data-type="........
getauscht gegen
<div class="gridster">
<ul>
<li data-row="5" data-col="1" data-sizex="5" data-sizey="1">
<div class="">
<div data-type="
getauscht aber jetzt geht gar nichts mehr,
Wärst Du so freundlich und würdest mal meine Ursprungs-index.html so verändern, dass es passt?
Sorry ich bin unverschämt, wenn's zu viel Aufwand macht sag es.
Bin halt echt noch Anfänger, was FTUI betrifft.
Danke im Voraus
<li data-row="5" data-col="1" data-sizex="10" data-sizey="1"> am Anfang, und weiter, bei dem Inhalt:
<li data-row="1" data-col="1" data-sizex="10" data-sizey="4">
<div class="page" id="content_home"></div>
<div class="page" id="content_wohnzimmer"></div>
<div class="page" id="content_kueche"></div> Du hast ja nur noch 4 Zeilen für die Subseiten.
Danke erst mal. Habe es so wie im Beitrag vorher gemacht:
<!--
<meta name="gridster_cols" content="10">
<meta name="gridster_rows" content="5">
<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="5" data-col="1" data-sizex="10" data-sizey="1">
<div class="">
<div data-type="pagebutton" data-url="#page_content_home.html" data-load="#content_home"
data-off-background-color="transparent" data-off-color="#606060"
data-on-background-color="#606060" data-on-color="#222222"
data-active-pattern="(.*/||.*index.html||.*#page_content_home.html)"
data-icon="fa-home"
class="default top-space"></div>
<div data-type="pagebutton" data-url="#page_content_wohnzimmer.html" data-load="#content_wohnzimmer"
data-off-background-color="transparent" data-off-color="#606060"
data-on-background-color="#606060" data-on-color="#222222"
data-active-pattern=".*#page_content_wohnzimmer.html"
data-icon="oa-scene_livingroom"
class="prefetch top-space"></div>
<div data-type="pagebutton" data-url="#page_content_kueche.html" data-load="#content_kueche"
data-off-background-color="transparent" data-off-color="#606060"
data-on-background-color="#606060" data-on-color="#222222"
data-active-pattern=".*#page_content_kueche.html"
data-icon="oa-scene_cooking"
class="prefetch top-space"></div>
</div>
</li>
<li data-row="1" data-col="1" data-sizex="10" data-sizey="4">
<div class="page" id="content_home"></div>
<div class="page" id="content_wohnzimmer"></div>
<div class="page" id="content_kueche"></div>
</li>
</ul>
</div>
</body>
</html>
Ergebnis siehe Screenshot
Zwar hab' ich jetzt zwar eine Leiste unten, aber die Buttons darin sind immer noch senkrecht (statt waagerecht wie erwartet). Kann es sein, dass das Widget PageButton generell nur senkrechte Buttons erzeugt?
Da musst Du wahrscheinlich noch class inline bei den Buttons hinzufügen
class="default top-space inline"></div>
Funktioniert!!!!
Perfekt und Danke!
Hier nochmal die komplette index.html:
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* UI builder framework for FHEM
*
* Version: 2.5.0
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015-2016 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* !!!! Evaluation version - run only in a staging enviroment !!!!
*
* - create a new folder named 'tablet_eval' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet_eval
* - add 'define TABLETUIEVAL HTTPSRV ftui_eval ./www/tablet_eval Tablet-EVAL' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet_eval/
*/
-->
<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-tablet-ui-user.css" / -->
<link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />
<script src="js/fhem-tablet-ui.js" defer></script>
<!--
<meta name="gridster_cols" content="10">
<meta name="gridster_rows" content="5">
<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="5" data-col="1" data-sizex="10" data-sizey="1">
<div class="">
<div data-type="pagebutton" data-url="#page_content_home.html" data-load="#content_home"
data-off-background-color="transparent" data-off-color="#606060"
data-on-background-color="#606060" data-on-color="#222222"
data-active-pattern="(.*/||.*index.html||.*#page_content_home.html)"
data-icon="fa-home"
class="default top-space inline"></div>
<div data-type="pagebutton" data-url="#page_content_wohnzimmer.html" data-load="#content_wohnzimmer"
data-off-background-color="transparent" data-off-color="#606060"
data-on-background-color="#606060" data-on-color="#222222"
data-active-pattern=".*#page_content_wohnzimmer.html"
data-icon="oa-scene_livingroom"
class="prefetch top-space inline"></div>
<div data-type="pagebutton" data-url="#page_content_kueche.html" data-load="#content_kueche"
data-off-background-color="transparent" data-off-color="#606060"
data-on-background-color="#606060" data-on-color="#222222"
data-active-pattern=".*#page_content_kueche.html"
data-icon="oa-scene_cooking"
class="prefetch top-space inline"></div>
</div>
</li>
<li data-row="1" data-col="1" data-sizex="10" data-sizey="4">
<div class="page" id="content_home"></div>
<div class="page" id="content_wohnzimmer"></div>
<div class="page" id="content_kueche"></div>
</li>
</ul>
</div>
</body>
</html>
Thema gelöst!
Zitat von: frankreed am 03 Oktober 2020, 15:22:36
Thema gelöst!
Freut mich
Dann kannst Du bitte dein erstes Post editieren, und [gelöst] vor dem Titel schreiben
Als gelöst markiert