Probleme mit Pagebutton

sash.sc · 07 Dezember 2017, 20:47:47

Hallo zusammen.

Ich bin noch am verzweifeln.
Ich hatte eigentlich schon 3 Seiten stehen und haben dann versucht ein Menü mit Pagebutton einzubauen.
Das ist, warum auch immer, in die Hose gegangen.

Habe mich dann an die WIKI gehalten, komme anscheinend damit nicht wirklich klar, was da steht !
Habe die index.html erstell mit den Beispielen aus der WIKI und die Einträge für die 1. Seite angepasst.
Habe auf der 1. Seite dann auch den DIV Container eingesetzt.

Beispiel aus der index.html

Code Auswählen


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

<body>
    <div class="gridster">
        <ul>
           
		<li data-row="1" data-col="1" data-sizex="1" data-sizey="4">
    <div data-type="pagebutton"
         data-url="wz.html"
         data-load="wz"
         data-active-pattern="wz.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="5" data-sizey="4">
    <div class="page" id="wz"></div>
    <div class="page" id="page2"></div>
    <div class="page" id="page3"></div>
</li>   
		   
   
        </ul>
    </div>
</body>

hier ein Auszug aus der 1. Seite

Code Auswählen


<div class="gridster">
<ul>

<!--li data-row="1" data-col="1" data-sizex="1" data-sizey="4">
		<header><font size="+1">Zeit</font></header>
			<div data-type="clock" data-format="H:i:s"
				class="cell big">
			</div>
			<div data-type="clock" data-format="l, j. F Y"
				class="cell">
			</div-->

<div class="page" id="wz">
    <div data-type="label">Wohnzimmer</div>
</div>

  <li data-row="2" data-col="3" data-sizex="1" data-sizey="1">
      <header>Wohnzimmer</header>
	<div class="cell">
    <div data-type="label" 
	data-device="ts01" 
	data-get="temperature" 
	data-limits='[1,15,28]' 
	data-colors='["#6699FF","#e8a945","#bb6242"]' 
	data-unit=" °C" 
	class="large bold"></div>
    <div>Temperatur</div>
    </div>
	<div class="cell">
	<div data-type="label" 
	data-device="ts01" 
	data-fix="0" 
	data-part="4" 
	data-limits='[0,20,80]' 
	data-colors='["#e8e406","green","#8e8eed"]' 
	data-unit=" %" 
	class="large bold"></div>
    <div>Luftfeuchte</div>
    </div>
</li>
  
<li data-row="2" data-col="4" data-sizex="2" data-sizey="1">
	<header>Draussen MultiSens</header>
	
	<div class="cell inline">
	<div data-type="label" 
	data-device="ESPEasy_multisens"
	data-get="Temperature"
	data-limits='[-20,10,23]' 
	data-colors='["#0077ff","#e8a945","#bb6242"]' 
	data-unit=" °C" 
	class="large bold"></div>
    <div>Temperatur</div>
    </div>
    
	<div class="cell inline">
	<div data-type="label" 
	data-device="ESPEasy_multisens_Temp.Ext."
	data-get="Temperature"
	data-limits='[-20,17,26]' 
	data-colors='["#0077ff","#50ff00","#ff7200"]' 
	data-unit=" °C" 
	class="large bold"></div>
    <div>DS18B20</div>
    </div>
	
	<div class="cell inline">
	<div data-type="label" 
	data-device="ESPEasy_multisens" 
	data-get="Humidity" 
	data-limits='[20,45,70]' 
	data-colors='["#e8e406","green","#8e8eed"]' 
	data-unit=" %" 
	class="large bold"></div>
    <div>Feuchte</div>
    </div>
	
	<div class="cell inline">
	<div data-type="label" 
	data-device="ESPEasy_multisens" 
	data-get="Pressure" 
	data-limits='[980,981,1020]' 
	data-colors='["#e8e406","green","#8e8eed"]' 
	data-unit=" hPa" 
	class="large bold"></div>
    <div>Druck</div>
    </div>
	
	<div class="cell inline">
	<div data-type="label" 
	data-device="Licht_aussen" 
	data-get="Lux" 
	data-limits='[980,981,1020]' 
	data-colors='["#e8e406","green","#8e8eed"]' 
	data-unit=" Lux" 
	class="large bold"></div>
    <div>Lumen</div>
	</div>
	
	<div class="cell inline">
	<div data-type="label" 
	data-device="ESPEasy_multisens_UV" 
	data-get="UV" 
	data-limits='[2,3,7]' 
	data-colors='["#e8e406","green","#8e8eed"]' 
	data-unit=" Index" 
	class="large bold"></div>
    <div> UV </div>
	</div>

habe aber das Problem, dass das Menu angezeigt wird. Rufe ich die 1. Seite auf, verschwindet das Menu und die 1. wird angezeigt, jedoch ohne Menu.

Was läuft hier falsch ??

Könnte mir jemand auch die Sprünge helfen !

Vielen Dank !

Gruß
sascha

Gunther · 08 Dezember 2017, 00:28:08

Muss in die Koje, daher nur ungeprüft eine Vermutung: Fang mal mit der aufzurufenden Seite in der Reihe neben dem Menü an.

Als Beispiel kannst Du Dir mein Pagebuttonbeispiel aus dem Wiki nehmen und da reinschauen. Active-pattern hat mich auch etwas Nerven gekostet. Da auch nochmal Augenmerk drauf legen.

sash.sc · 08 Dezember 2017, 13:40:27

Sorry, aber mit der Aussage kann ich leider nicht viel anfangen. Habe das Beispiel ja aus der WIKI

Standarduser · 09 Dezember 2017, 20:37:47

Zitat von: sash.sc am 08 Dezember 2017, 13:40:27
Sorry, aber mit der Aussage kann ich leider nicht viel anfangen. Habe das Beispiel ja aus der WIKI

Schau dir doch trotzdem nochmal das Beispiel im Wiki genau an.
In deinem ersten Menüpunkt fehlen die # bei url und load, bei den darauf folgenden Menüpunkten sind sie vorhanden.
Im Wiki-Beispiel gibt es diese bei allen Menüpunkten, also auch beim ersten

sash.sc · 09 Dezember 2017, 21:28:02

Welchen Unterschied mache das mit der #? Wofür ist diese überhaupt da?
Wird aus der Wiki nicht ersichtlich.

Gruß Sascha

Gesendet von meinem SM-T560 mit Tapatalk

Standarduser · 09 Dezember 2017, 21:57:01

Die Raute markiert in HTML einen Anker, was im Prinzip einer Sprungmarke entspricht. Lässt du die Raute weg, wird eine Komplett neue Seite aufgerufen. Schreibst du sie hin, dann weiß dein Browser dass er das nicht tun, sondern im aktuellen Dokument zur Sprungmarke scrollen soll. Ist die nicht vorhanden, dann tut er garnichts.
Soweit HTML-Grundlagen.

Das gleiche Prinzip wird hier ähnlich angewendet. Lässt du die # weg, wird der Browser angewiesen, die aktuelle Seite gegen eine komplett neue auszutauschen, statt nur den betroffenen Teil einzublenden. Das könnte ja auch ein gewünschtes Verhalten sein, auch wenn man das vielleicht nicht unbedingt mit einem Pagebutton realisieren würde. Allerdings ist Pagebutton auch nur eine Ableitung von Link, das üblicherweise für sowas verwendet wird. Somit ist dieses Verhalten auch nachvollziehbar.

Dass das im Wiki jetzt nicht gesondert hervorgehoben wird stimmt sicherlich, aber aus dem Gesamtkontext und den vielen Beispielen geht das schon hervor, dass eine Datei vielleicht nur page1.html heißt, aber dennoch mit #page1.html aufgerufen wird.

Das hat bisher auch noch niemand in Frage gestellt, sondern man nimmt das einfach als gegeben hin.

Ich hoffe, das war einigermaßen verständlich. Sonst frag einfach nochmal.

Noch ein Tipp: wenn ich Probleme habe, Beispiele auf meinen Bedarf anzupassen, dann kopiere ich sie 1:1 und passe sie dann nur schrittweise so an, wie ich es gerne hätte. Mit dieser Vorgehensweise findet man Fehler in der Regel schneller.

sash.sc · 09 Dezember 2017, 23:55:26

Danke für deine Ausführung !

Habe jetzt nochmal ein bischen rum probiert mit den WIKI Beispiel und dann angepasst.
Aber so ganz läuft es noch nicht rund. Auf der Seite wz wird zwar das Label angezeigtm, jedoch nicht das Gerät was dort definiert ist.

index1.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>

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

<body>
    <div class="gridster">
        <ul>
           
		
		   
		<li data-row="1" data-col="1" data-sizex="1" data-sizey="4">
			
		<div data-type="pagebutton"
         data-url="#wz1.html"
         data-load="#wz1"
         data-active-pattern=".*#wz.html"
         data-icon="mi-weekend"
         class="default"></div>
    
		</li>
<li data-row="1" data-col="2" data-sizex="5" data-sizey="4">
    <div class="page" id="wz1"></div>
   
</li>

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

</html>

Hier die 1. Seite Wohnzimmer

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>
    <meta name="longpoll" content="1">
    <meta name="debug" content="0">
	<meta name="widget_base_width" content="124">
    <meta name="widget_base_height" content="142">

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

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

<div class="gridster">
<ul>

			<div class="page" id="wz1">
			<div data-type="label">Wohnzimmer</div>
			</div>  

  <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <header>Wohnzimmer</header>
	<div class="cell">
    <div data-type="label" 
	data-device="ts01" 
	data-get="temperature" 
	data-limits='[1,15,28]' 
	data-colors='["#6699FF","#e8a945","#bb6242"]' 
	data-unit=" °C" 
	class="large bold"></div>
    <div>Temperatur</div>
    </div>
	<div class="cell">
	<div data-type="label" 
	data-device="ts01" 
	data-fix="0" 
	data-part="4" 
	data-limits='[0,20,80]' 
	data-colors='["#e8e406","green","#8e8eed"]' 
	data-unit=" %" 
	class="large bold"></div>
    <div>Luftfeuchte</div>
    </div>
</li>
  


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

Steige da noch nicht so ganz durch, warum das Gerät nicht angezeigt wird.
Bräuchte da nochmal was an Hilfe.

danke
Sascha

Gunther · 10 Dezember 2017, 00:14:07

Was passiert, wenn Du im Wohnzimmer auf data-col="2" startest?

sash.sc · 10 Dezember 2017, 08:09:11

Nix. habe auch auf der wz1.html mal den ganzen Header entfernt.

Code Auswählen


<!DOCTYPE html>

<div class="gridster">

<ul>
		<div class="page" id="wz1">
			<div data-type="label">Wohnzimmer</div>
		</div> 

		<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
    <header>Wohnzimmer</header>
	<div class="cell">
    <div data-type="label" 
	data-device="ts01" 
	data-get="temperature" 
	data-limits='[1,15,28]' 
	data-colors='["#6699FF","#e8a945","#bb6242"]' 
	data-unit=" °C" 
	class="large bold"></div>
    <div>Temperatur</div>
    </div>
	
	<div class="cell">
	<div data-type="label" 
	data-device="ts01" 
	data-fix="0" 
	data-part="4" 
	data-limits='[0,20,80]' 
	data-colors='["#e8e406","green","#8e8eed"]' 
	data-unit=" %" 
	class="large bold"></div>
    <div>Luftfeuchte</div>
    </div>

  </li>
</ul>
</div>
</html>

Die index1.html sieht immer noch so aus.

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>

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

<body>
    <div class="gridster">
        <ul>
           
		
		   
		<li data-row="1" data-col="1" data-sizex="1" data-sizey="4">
			
		<div data-type="pagebutton"
         data-url="#wz1.html"
         data-load="#wz1"
         data-active-pattern=".*#wz.html"
         data-icon="mi-weekend"
         class="default"></div>
    
		</li>
		
		
<li data-row="1" data-col="2" data-sizex="5" data-sizey="4">
    <div class="page" id="wz1"></div>
   
</li>

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

</html>

Komme da nicht weiter.
Das Label Wohnzimmer wird zwar angezeigt, jedoch nicht das Gerät

Gruß und Danke
Sascha

Gunther · 10 Dezember 2017, 10:31:53

Du hast ja nur Labels definiert.
Kannst Du mal einen Screenshot zeigen und den aktuellen Code.

sash.sc · 10 Dezember 2017, 16:28:30

Code siehe Post #8

Da ist einmal die index1.html (unterer CodeTag), die nur die Menuesteuerung enthalten soll und die wz1.html beinhaltet ein Device, temp.sensor aussen. Den habe ich zu Testzwecken mit eingebaut.

Gruß und Danke
Sascha

Gunther · 10 Dezember 2017, 22:31:12

habe mir Deinen Code nochmal angeschaut.

Zuerst ist mir aufgefallen, dass folgender Fehler drin ist:

Code Auswählen

data-active-pattern=".*#wz.html"
statt

Code Auswählen

data-active-pattern=".*#wz1.html"

Dann: hast Du noch eine index.html?
Oder warum "index1.html"?
Wo sind sonst die ganzen Elemente, die in die index.html reingehören?

Versuch außerdem mal folgendes für die wz1.html

Code Auswählen

</head>
<body>
  <div class="page" id="wz1">
    <div class="gridster">
    <ul>

	<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
	 <header>Wohnzimmer</header> 
	<div class="cell">
    <div data-type="label" 
	data-device="ts01" 
	data-get="temperature" 
	data-limits='[1,15,28]' 
	data-colors='["#6699FF","#e8a945","#bb6242"]' 
	data-unit=" °C" 
	class="large bold"></div>
    <div>Temperatur</div>
    </div>
	
	<div class="cell">
	<div data-type="label" 
	data-device="ts01" 
	data-fix="0" 
	data-part="4" 
	data-limits='[0,20,80]' 
	data-colors='["#e8e406","green","#8e8eed"]' 
	data-unit=" %" 
	class="large bold"></div>
    <div>Luftfeuchte</div>
    </div>
	</li>
    
    </ul>
    </div>
  </div>
</body>
</html>

Ulm32b · 12 Dezember 2017, 23:58:54

Hallo,
ich habe auch ein (anderes) Problem mit Pagebutton: Bei der Erweiterung meiner hervorragend funktionierenden pagebutton-Navigation auf eine zweite Ebene bin ich auf eine Ungereimtheit gestoßen. Um der Sache auf den Grund zu gehen, habe ich den Code extrem gestutzt. Das Phänomen ist aber weiterhin vorhanden.
Mein Gridster ist auf (x,y) = (10,6) dimensioniert. Die erste Zeile ist in test-index.html für alle Seiten identisch. Der Bereich

Code Auswählen

data-row="2" data-col="1" data-sizex="10" data-sizey="5"
wird dann über pagebutton variiert.
Die Menüstruktur lautet:

Code Auswählen

Startseite   (test-index.html)
-   Home   (test-page_content1.html)
-   Info   (test-page_content6.html)
   o	Info 1   (test-page_content6_1.html)
   o	Info 2   (test-page_content6_2.html)

Die Navigation der zweiten Ebene (=Info) wird im Bereich

Code Auswählen

data-row="2" data-col="1" data-sizex="1" data-sizey="5"
festgelegt. Funktioniert.

Die Inhalte Info 1 und Info 2 befinden sich im Bereich

Code Auswählen

data-row="2" data-col="2" data-sizex="9" data-sizey="5"
Bei Fully und Firefox wird dieser Bereich dann aber beginnend mit der Spalte 3 angezeigt; es entsteht eine Lücke in Spalte 2. Das ist für sich schon unplausibel, denn die erste Ebene der Navigation funktioniert einwandfrei, wenn man durchgehend das Koordinatensystem (row,col) der Hauptseite anwendet.

Nun gut, dachte ich mir. Um die Lücke zu füllen, kann man die Inhalte der zweiten Ebene ja auch auf ein lokales Koordinatensystem beziehen. Für Info 1 und Info 2 habe ich es mit

Code Auswählen

data-row="1" data-col="1" data-sizex="9" data-sizey="5" und
data-row="2" data-col="1" data-sizex="9" data-sizey="5"

probiert. In beiden Fällen wird dann zwar die Spalte 2 wie gewünscht gefüllt. Aber: Es gibt dann plötzlich auch die (leere) Spalte 11, und man kann mit der Maus oder der Hand auf dem Tablet den kompletten Inhalt der Oberfläche um eine Spalte verschieben. Letzteres ist nicht erwünscht und m.E. auch nicht korrekt.
Skizze und Dateien anbei.

sash.sc · 13 Dezember 2017, 06:22:39

Zitat von: Gunther am 10 Dezember 2017, 22:31:12
habe mir Deinen Code nochmal angeschaut.

Zuerst ist mir aufgefallen, dass folgender Fehler drin ist:
Code Auswählen Erweitern
data-active-pattern=".*#wz.html"
statt
Code Auswählen Erweitern
data-active-pattern=".*#wz1.html"

Dann: hast Du noch eine index.html?
Oder warum "index1.html"?
Wo sind sonst die ganzen Elemente, die in die index.html reingehören?

Versuch außerdem mal folgendes für die wz1.html
Code Auswählen Erweitern
</head> <body> <div class="page" id="wz1"> <div class="gridster"> <ul> <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"> <header>Wohnzimmer</header> <div class="cell"> <div data-type="label" data-device="ts01" data-get="temperature" data-limits='[1,15,28]' data-colors='["#6699FF","#e8a945","#bb6242"]' data-unit=" °C" class="large bold"></div> <div>Temperatur</div> </div> <div class="cell"> <div data-type="label" data-device="ts01" data-fix="0" data-part="4" data-limits='[0,20,80]' data-colors='["#e8e406","green","#8e8eed"]' data-unit=" %" class="large bold"></div> <div>Luftfeuchte</div> </div> </li> </ul> </div> </div> </body> </html>

Habe alles nochmal neu aufgebaut. Jetzt funktioniert alles, wie es soll.

Letztendlich waren es Positionierungsfehler von ein paar Definitionen gewesen.

Habe jetzt nur das Problem, dass nach dem Aufbau einer Seite ein reconnect in 10s kommt.

Gruß Sascha

Gesendet von meinem E6653 mit Tapatalk

mr.breil · 17 Dezember 2017, 11:33:34

Das mit dem reconnect habe ich auch, konntest du das lösen?

Gesendet von iPad mit Tapatalk

Probleme mit Pagebutton

mr.breil