Evaluierungsversion 2.2

setstate · 11 August 2016, 07:07:45

Zitat von: Jojo11 am 10 August 2016, 20:01:10
Hallo,

ich habe heute auch seit Langem mal wieder ein update gemacht. Seitdem ist mein vertikales circlemenu von oben rechts nach oben links gewandert. Es scheint so, als würde eine absolute Positionierung nicht mehr funktionieren. Der Code ist:

Auch erscheint beim Ausklappen ein Balken, der bis zur Browserunterkante reicht (in grau). Der war vorher nicht da
Woran könnte das liegen?

schöne Grüße
Jo

Sorry, hatte vergessen die angepasste circlemenu Version mit hochzuladen

Jojo11 · 11 August 2016, 07:22:48

Kein Problem. Ich dachte ich hätte eine notwendige Änderung verpasst

schöne Grüße
Jo

Gesendet von meinem Nokia 8210

olindner · 11 August 2016, 10:29:40

Hallo, seit gestern fehlen mir die "links", werden nicht mehr angezeigt ...

Code Auswählen

	  <div class="cell center">
		<div onclick="$('.dialog-close').trigger('click');" data-type="link" data-width="200" data-height="36"
	  	data-color="white" data-background-color="firebrick" data-icon="fa-refresh"
	  	data-fhem-cmd="shutdown restart" class="round large">FHEM</div>
	  </div>

Hat sich an der def was geändert?

Danke und viele Grüße Olaf

oeiber · 11 August 2016, 13:03:18

hallo zusammen,

Ich verwende ftui 2.2 mit "fixed munue" hauptsächlich auf meinem ios endgerät. funktioniert ansich tadelos aber der seitenaufbau ist ziemlich langsam. gibt es eine möglichkeit alle relevanten js css html offline zu cachen? ich habe ein cache manifest angelegt, das scheint aber ios nicht zu interessieren.

danke!

ulli · 11 August 2016, 18:55:13

Ich habe immer noch das Problem das seit der letzten Änderung mein Menü nicht mehr klickbar ist.
Anbei mal meine index.html.

Es scheint mit dem PageButton und den dazugehörigen <divs zusammen zu hängen.

setstate hast du einen Tip?

setstate · 11 August 2016, 19:26:42

Ich kann die neusten Problemmeldungen noch nicht nachvollziehen. Aber das File zum Testen sollte helfen. Ich melde mich wieder ...

Was ich gefunden habe:
- die class="page" müssen schon in einem Gridster-li sein, sonst kommt das Initialisieren des gesamten Gridster durcheinander.

Code Auswählen

<li data-row="1" data-col="2" data-sizex="5" data-sizey="7" class="halbTransparent">
                                                <div class="page" id="home"></div>
                                                <div class="page" id="wohnzimmer"></div>
                                                <div class="page" id="buero"></div>
                                                <div class="page" id="system"></div>
                                                <div class="page" id="plots"></div>
                                                <div class="page" id="wetter"></div>
                                                <div class="page" id="tvNow"></div>
                                                <div class="page" id="tvPrime"></div>
                     </li>

- die row/col und sizex/sizey müssen genau stimmen, keine Überlagerungen

Demos auf Github sind jetzt alle aktualisiert:
z.B. Pagatab-Demos: index_page_top_demo.html und index_page_left_demo.html

n4rrOx · 12 August 2016, 08:55:52

Zitat von: setstate am 11 August 2016, 19:26:42
Ich kann die neusten Problemmeldungen noch nicht nachvollziehen. Aber das File zum Testen sollte helfen. Ich melde mich wieder ...

Was ich gefunden habe:
- die class="page" müssen schon in einem Gridster-li sein, sonst kommt das Initialisieren des gesamten Gridster durcheinander.
[...]

Hi,

d. h. ich kann pagebutton ohne Gridster (wie bei mir) nicht bzw. nicht richtig verwenden?
Bei mir funktioniert ja das Daten Holen und Anzeigen der Unterseiten....nur wird die Seite mit dann eben nicht scrollbar, wenn mehr Inhalt vorhanden ist als auf einer Seite angezeigt werden kann.
Vorher war hier noch alles normal??

Wie könnte ich bei der "Fehlersuche" unterstützen?

setstate · 12 August 2016, 09:17:50

Dann poste mal die Hauptseite und die betroffene Unterseite.

Andy89 · 12 August 2016, 14:19:37

Servus,
da ich heute meine Ordnerstruktur bisschen aufgeräumt habe, habe ich mal wieder meine mobile Seite angeschaut und fest gestellt, dass diese nicht mehr scrollbar ist. Deswegen wollte ich mal fragen, woran das liegen könnte?
Habe im Anhang mal eine minimal Konfiguration ohne Devices angelegt, so dass man sich das leicht anschauen kann. Man sieht, dass die Seite nur so viel scrollbar ist, wie die feste Navigationsbar verdeckt.

Danke für deine/eure Hilfe.

Beste Grüße und schönes Weekend
Andy

ulli · 12 August 2016, 16:28:46

Zitat von: setstate am 11 August 2016, 19:26:42
Ich kann die neusten Problemmeldungen noch nicht nachvollziehen. Aber das File zum Testen sollte helfen. Ich melde mich wieder ...

Was ich gefunden habe:
- die class="page" müssen schon in einem Gridster-li sein, sonst kommt das Initialisieren des gesamten Gridster durcheinander.

Code Auswählen Erweitern
<li data-row="1" data-col="2" data-sizex="5" data-sizey="7" class="halbTransparent"> <div class="page" id="home"></div> <div class="page" id="wohnzimmer"></div> <div class="page" id="buero"></div> <div class="page" id="system"></div> <div class="page" id="plots"></div> <div class="page" id="wetter"></div> <div class="page" id="tvNow"></div> <div class="page" id="tvPrime"></div> </li>

- die row/col und sizex/sizey müssen genau stimmen, keine Überlagerungen

Demos auf Github sind jetzt alle aktualisiert:
z.B. Pagatab-Demos: index_page_top_demo.html und index_page_left_demo.html

Die Darstellung hat bis vor dem letzten Update wie oben als index.html angehängt funktioniert.
Meine Besonderheit ist, dass ich die austauschbaren Pages nicht rechteckig reservieren kann.
Im Bild anbei habe ich die Fenster, welche auf der index.html liegen sollen und damit auf jeder Seite angezeigt werden rot umrahmt. Ich hoffe das erklärt mein Problem.

setstate · 12 August 2016, 17:00:12

Da würde ich etwas aufräumen. Links einen Streifen für das Menü, oben ein Streifen für die Uhr und co. und den Rest für die Subs, auf die Haupseite. Wie verteilt dann die Unterseiten sind, ist egal. Das übernimmt dann das Sub-Gridster

ulli · 12 August 2016, 17:08:06

Da verschenke ich ja oben zu viel Platz.
Jede Seite zeigt nämlich dann oben in erster Reihe immer die Klimadaten den Raumnamen,... an.
Lässt sich das nicht mit Pagebutton so realisieren?

Andy89 · 12 August 2016, 17:30:20

Zitat von: ulli am 12 August 2016, 17:08:06
Da verschenke ich ja oben zu viel Platz.
Jede Seite zeigt nämlich dann oben in erster Reihe immer die Klimadaten den Raumnamen,... an.
Lässt sich das nicht mit Pagebutton so realisieren?

ich hab da oben Platz "gespart", indem ich die Uhr auf jeder Unterseite direkt einbinde, da ich auch gerne oben für jeden Raum Temperatur und Co haben wollte... Dadurch wird der Aufbau der Seite wahrscheinlich minimal langsamer, aber das nehme ich in Kauf und ich habe so nur das Menü und ein großes Sub-Gridster

Beste Grüße
Andy

FhemPiUser · 12 August 2016, 20:32:34

Hallo setstate,

bei mir geht seit der Umstellung auf eval2.2 mit pagebuttons das Javascript-basierte Video der Instar-IPcam auf der pagebutton-Unterseite nicht mehr (http://...ftui_eval/#ipcam_haustuer.html). Die Seite wird angezeigt, aber nicht das Video. Das Video geht auch, wenn ich mit der eval2.2 die gleiche Seite direkt aufrufe (http://...ftui_eval/ipcam_haustuer.html, also ohne "#").

Eine Idee woran das liegen könnte? Darf man kein Javascript auf Unterseiten nutzen? Oder kann es am "<body onload..." liegen?

Code Auswählen

<html>
<title>FHEM</title>
<head>
    <!--  
     /* FHEM tablet ui */
     /*
     * first page
     * -->
	    <style>
        div.mjpeg{
            position: absolute;
            left: 10px; top: 20px;
            			border: solid 1px black;
            width: 1280px; height: 720px;
            z-index: 0;
        }
		div.mycenter{
			margin: 0 auto;
			text-align: center;
	    }
    </style>
	<script>
        var isChrome = false;
        //if (window.chrome) {
        //    isChrome = true;
        //}
        ////////////////////////////////////////////////////////////////////////////////
        // DIESE PARAMETER M†SSEN ENTSPRECHEND AN DIE IHRER KAMERA ANGEPASST WERDEN
        // START KAMERA PARAMETER
        ////////////////////////////////////////////////////////////////////////////////
        var url = '192.168.1.xxxx:80';
        var streamnum = 11; // Videostream user 11 for 1280 x 720 pixel, 12 for 640 x 352 pixel and 13 for 320 x 176 pixel resolution
        var name0 = 'xxx'; // Camera Username
        var password0 = 'xxx'; // Camera Password
        ////////////////////////////////////////////////////////////////////////////////
        // ENDE KAMERA PARAMETER
        ////////////////////////////////////////////////////////////////////////////////
        function body_onload(){
            if (streamnum == 11) {
                document.getElementById('imgDisplay').src = 'http://' + url + '/tmpfs/snap.jpg?usr='+name0+'&pwd='+password0+'&'+(new Date()).getTime();
                w = 1280; h = 720;
            }
            else if (streamnum == 12) {
                document.getElementById('imgDisplay').src = 'http://' + url + '/tmpfs/auto.jpg?usr='+name0+'&pwd='+password0+'&'+(new Date()).getTime();
                w = 640; h = 352;
				document.getElementById('videoMJPEG').style.width  = w + 'px';
                document.getElementById('videoMJPEG').style.height = h + 'px';
            }
            else if (streamnum == 13) {
                document.getElementById('imgDisplay').src = 'http://' + url + '/tmpfs/auto.jpg?usr='+name0+'&pwd='+password0+'&'+(new Date()).getTime();
                w = 320; h = 176;
                document.getElementById('videoMJPEG').style.width  = w + 'px';
                document.getElementById('videoMJPEG').style.height = h + 'px';
            }
        }
        function load_video(){
            window.status=" ";
            setTimeout("reload_image()",40);
        }
        function reload_image(){
            var xx = new Image();
            if (streamnum == 11) {
                xx.src = 'http://' + url + '/tmpfs/snap.jpg?usr='+name0+'&pwd='+password0+'&'+(new Date()).getTime();
            }
            else if (streamnum == 12) {
                xx.src = 'http://' + url + '/tmpfs/auto.jpg?usr='+name0+'&pwd='+password0+'&'+(new Date()).getTime();
            }
            else if (streamnum == 13) {
                xx.src = 'http://' + url + '/tmpfs/auto.jpg?usr='+name0+'&pwd='+password0+'&'+(new Date()).getTime();
            }
            document.getElementById("imgDisplay").src = xx.src;
            window.status=" ";
        }
    </script>

	</head>
<body onload="body_onload()">
  <div class="page" id="ipcam_haustuer">
    <div class="gridster">
      <ul>
<li data-row="1" data-col="1" data-sizex="7" data-sizey="5">
        <header>IPcam Haustür</header>
	<div data-type="label" data-device="BM_Haustuer" data-get="timestamp" style="color: #555555" class="right inline"></div>
	<div data-type="label" style="color: #555555" class="right inline">Last motion detected at </div>	
	<div class="mycenter top-space-2x" id="videoMJPEG">
        <img alt="video" height="522" width="928" id="imgDisplay" name="imgDisplay" onload="load_video()" onerror="load_video()" style="z-index: 10"/>     
	</div>
    
	 
</li>
</ul>
</div>
</div>
</body>
</html>

setstate · 12 August 2016, 23:28:44

Zitat von: Andy89 am 12 August 2016, 14:19:37
Servus,
da ich heute meine Ordnerstruktur bisschen aufgeräumt habe, habe ich mal wieder meine mobile Seite angeschaut und fest gestellt, dass diese nicht mehr scrollbar ist. Deswegen wollte ich mal fragen, woran das liegen könnte?
Habe im Anhang mal eine minimal Konfiguration ohne Devices angelegt, so dass man sich das leicht anschauen kann. Man sieht, dass die Seite nur so viel scrollbar ist, wie die feste Navigationsbar verdeckt.

Danke für deine/eure Hilfe.

Beste Grüße und schönes Weekend
Andy

die Beispiele scrollen beim mir ohne Probleme auf FF (Desktop) und Safari (iOS9)

Evaluierungsversion 2.2

oeiber