Evaluierungsversion 2.2

[Andy89]

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

dann muss ich mal schauen, wieso es bei mir nicht geht. Safari (MacOS, iOS10), Firefox(MacOS), Chrome(Android) und Fully(Android) haben alle das von mir beschriebene Problem.

Der einzige Unterschied den ich bei der hochgeladenen Index habe, ist dass ich über dem <meta name="viewport" .... ein
<meta name="fhemweb_url" content="http:///192.x.x.x:8083/fhem"> eingefügt habe, da FHEM und das FTUI nicht auf dem gleichen Systen laufen....(aber daran liegt es ganz sicher nicht)

Komisch! Trotzdem danke fürs Feedback.

Beste Grüße
Andy

[setstate]

Ich habe mir mal den Demo-Code für die Mobil UI angesehen und mir gedacht, es stellen sich bestimmt einige die Frage, wie die Anordnungen der Elemente zu verbessern geht und warum das right-align nicht funktioniert, der Switch also mittig in seiner Hälfte steht. Es wäre auch schöner, wenn rechts und links etwas mehr Platz zum Rand wäre. Wenn man die vorhandenen Klassen "right-align" oder "left-space" einfach hinzufügt, passiert entweder nix (Switch bleibt mittig) oder alles verschiebt sich (left-space an das Label).

Hinweis: col-1-2, col-2-3 usw. verträgt sich nicht mit Margins (left-space, right-space), da sich dadurch die Gesamtbreite über 100% addiert und damit sich alles verschiebt, durch den daraus resultierenden Zeilenumbruch.

Code1 Bild1

Code Auswählen Erweitern


<section>
<div class="large col-1-2 left-align">Test31</div>
<div data-type="switch"
class="big thin col-1-2 right-align"></div>
<div class="large col-1-2 left-align">Test32</div>
<div data-type="switch"
class="big thin col-1-2 right-align"></div>
<div class="large col-1-2 left-align">Test33</div>
<div data-type="switch"
class="big thin col-1-2 right-align"></div>
</section>


Lösung:

Man arbeitet mit extra Container und verteilt Alignment, Rand usw. nur an das passende Element

Code2

Code Auswählen Erweitern


<section>
                        <div class="col-1-2 left-align">
                            <div class="large left-space">Test01</div>
                        </div>
                        <div class="col-1-2 right-align">
                            <div data-type="switch" class="big thin right-space"></div>
                        </div>
</section>



Alignment Klassen für die äußeren Elemente und Extra-Rand für die inneren Elemente, dadurch erhöht sich nicht die Gesamtbreite und das Alignment wird nicht durch wichtigere Alignments der einzelnen Unterelemente übertrumpft. Bild2-3

[ulli]

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

Hm, das wollte ich eben vermeiden. Komisch das es nur nach dem update jetzt eben nicht mehr geht.
Scheinbar gibt es aber keine andere lösung?

[Spi0n]

Hallo zusammen,

ich habe mir mal die Eval 2.2 auf mein System gesetzt, und bekomme diese leider nicht vernünftig ans laufen. Hier die Fehler:

http://IP/fhem/?cmd=jsonlist2+BadFenster%2CTerrassenTuer%2CKueche...Licht_Sw%2CGalerieLicht%2CPowerAV_Sw%2Cdummy2%2Cdummy1&XHR=1&timeout=60000 404 (Not Found)

Wenn ich nun aber:
http://IP:8083/fhem/?cmd=jsonlist2+BadFenster%2CTerrassenTuer%2CKueche...Licht_Sw%2CGalerieLicht%2CPowerAV_Sw%2Cdummy2%2Cdummy1&XHR=1&timeout=60000 eingebe, klappt alles wunderbar. Selbiges gilt für z.B.
http://IP/fhem/?cmd=set+Licht+on&XHR=1&_=1471127417161 404 (Not Found)
Mit Port funktioniert es wunderbar.

Kann mir da irgendjemand vllt weiter helfen?

[setstate]

Sowas kann nur durch eine falsche Angabe unter "fhemweb_url" in der Index HTML passieren.
Normalerweise ist der Wert nicht gesetzt, also am besten die ganze Zeile löschen.

[SirMarco]

Servus setstate

Darf ich fragen was du für ein Tool nutzt?

Gruss

[setstate]

Das ist "nur" der Inspektor aus den Entwicklertools aus dem FF Menü. 
Aber damit kann man schön CSS Eigenschaften live hinzufügen/wegnehmen oder ändern und gleich sehen, wie sich das auswirkt.

[SirMarco]

Kann ich den auch nutzen? Nur wie? 

[setstate]

Die meisten Browser haben in ihrer Desktop-Variante Entwicklertools dabei. Chrome, Safari, Firefox. Schau ins Menü des Browsers.
Es gibt auch Shortcuts dafür: Windows -> F12: MacOS -> alt+cmd+s

https://developer.mozilla.org/de/docs/Tools

[Mpomp]

Hallo setstate,

hast du das schon versucht umzusetzen?

Wenn man bei ftui.config.dir das oberste Verzeichnis angibt und ich das überall beachte

ftui.config.dir + "/js/widget_..."
oder ftui.config.dir + "/lib/..."

sollte es doch funktioneten?

Ist es möglich den  Changelog einzusehen, damit ich weiß wann ich wieder ein Update machen kann.

Danke
LG Mpomp

[Spi0n]

Sowas kann nur durch eine falsche Angabe unter "fhemweb_url" in der Index HTML passieren.
Normalerweise ist der Wert nicht gesetzt, also am besten die ganze Zeile löschen.

Hallo, danke für deine Antwort. Die Zeile habe ich jedoch nicht. Habe nur die Eval aufgesetzt und mir angeschaut. Dann bekam ich schon den Fehler.

[Skusi]

Also nun muß ich doch mal um Hilfe bitten.

Ich habe gestern mal wieder ein Update gemacht, und seit dem ist mein Wandtableau unbedienbar geworden, weil die Circlemenue´s verrückt spielen.

Wenn ich eines der Menues links antippe, klappen sie immer aus dem kleinen Icon oben links auf, und nicht aus ihrer Position. Außerdem habe ich festgestellt das das kleine Icon oben links eine Überlagerung aller letzten Icons aus den Circlemenue´s ist. Die ausgeklappten Icons werden ausserdem nun hinter dem semitransparenten Swiper mit dem Wetter angezeigt, lassen sich aber nicht antippen.

Hat sich da was mit der Syntax geändert, oder liegt der Fehler im Update ?

Hier mal ein bisschen code:

Code Auswählen Erweitern

<div data-type="circlemenu" data-direction="horizontal"
data-circle-radius="100" data-item-diameter=" 78" class="cell circlemenu noshade">
   
<ul class="left left-space top-space-2x">
     <li><div data-type="button" style="font-size:40px;"
data-off-color="#FBFFD9" data-on-color="#FBFFD9" data-on-background-color="#A63800" data-off-background-color="#E80000" data-icon="fa-cogs"></div></li>
     <li><div style="font-size:40px;" data-type="button" data-off-color="#FBFFD9" data-on-color="#FBFFD9"
data-on-background-color="#E80000" data-off-background-color="#A63800" data-url="Funktionen.html" data-icon="fa-check"</div></li>
     <li><div style="font-size:36px;" data-type="button" data-on-color="#FBFFD9" data-on-background-color="#A63800"
data-off-background-color="#A63800" data-url="Heizung.html" data-icon="oa-sani_heating"> </div></li>
</div>

Ich hatte gehofft das es noch jemand so getroffen hat, und es hier bald eine Lösung zu lesen gibt, aber bis auf eine Post wo setstate schreibt das er die geänderte circlemue vergessen hat mit hochzuladen, gabs nichts. Ich denke die Datei ist mittlerweile hochgeladen, da das Posting schon etwas her ist. Also habe ich mit dem gestrigen Update schon alle aktuellen dateien bekommen.

Muß ich nun was am Code ändern, ?

[setstate]

Von meiner Seite aus ist keine akute Baustelle mehr offen. Ich habe gestern auch update all gemacht, eine leere Standard-Seite hergenommen und den Circlemenu Code eingefügt. Sieht gut aus und macht was es soll.
Jetzt kann bei euch nur noch Altlasten im Cache sein -> Browser Cache leeren, oder ihr habt eigene CSS Files eingebunden, die sich nicht vertragen.

[n4rrOx]

Dann poste mal die Hauptseite und die betroffene Unterseite.

Sorry... bin erst jetzt dazu gekommen....anbei die Files.

Index_mobil.html

Code Auswählen Erweitern


<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.2.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/
     */
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="74">
    <meta name="widget_base_height" content="71">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="gridster_disable" content="1">
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="2"> <!-- verbose level 1-6 = output to console;0 = not output -->
    <meta http-equiv="Cache-Control" content="no-store" />

    <link rel="stylesheet" href="lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="css/fhem-mobil-ui.css" />
    <link rel="stylesheet" href="lib/font-awesome.min.css" />
<link rel="stylesheet" href="lib/openautomation.css" />
<link rel="stylesheet" href="lib/fhemSVG.css" />
    <link rel="stylesheet" href="lib/jquery.toast.min.css" />

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
    <link rel="stylesheet" href="css/fhem-mobil-ui-user.css" />

    <script src="../pgm2/jquery.min.js"></script>
    <script src="lib/jquery.toast.min.js"></script>
    <script src="lib/jquery.gridster.min.js"></script>
    <script src="js/fhem-tablet-ui.js" defer></script>

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

<div data-type="loading"
    data-icon="fa-spinner"
    data-color="#85ceb4"
    data-effect="fa-pulse"
    data-shade="true"
    class="bigger"
    style="position:absolute; top:45%; left:45%;">
</div>

    <!-- Demo FTUI 2.1 mobil page with slideout navigation -->

    <nav id="menu">
<div class="big navbesch">Navigation</div>
        <div data-type="link" class="default large top-space-2x left-space-3x"
           data-width="150"
           data-icon-left="fa-home"
           data-color="#7a8388"
           data-text-align="right"
           data-load="#content_main"
           data-url="#content_main.html"
           data-active-color="#ca8473"
           data-active-pattern="(.*index_mobil.html|.*#content_main.html)">Ãœbersicht</div>
        <div data-type="link" class="large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="oa-sani_heating"
            data-color="#7a8388"
            data-text-align="right"
            data-load="#content_heizung"
            data-url="#content_heizung.html"
            data-active-color="#ca8473"
            data-active-pattern=".*#content_heizung.html">Heizung</div>
   <div data-type="link" class="large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="fa-lightbulb-o"
            data-color="#7a8388"
            data-text-align="right"
            data-load="#content_licht"
            data-url="#content_licht.html"
            data-active-color="#ca8473"
            data-active-pattern=".*#content_licht.html">Beleuchtung</div>
   <div data-type="link" class="large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="fa-play-circle"
            data-color="#7a8388"
            data-text-align="right"
            data-load="#content_multimedia"
            data-url="#content_multimedia.html"
            data-active-color="#ca8473"
            data-active-pattern=".*#content_multimedia.html">Multimedia</div>
<div data-type="link" class="large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="fa-calendar"
            data-color="#7a8388"
            data-text-align="right"
            data-load="#content_termine"
            data-url="#content_termine.html"
            data-active-color="#ca8473"
            data-active-pattern=".*#content_termine.html">Termine</div>
        <div data-type="link" class="large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="fa-train"
            data-color="#7a8388"
            data-text-align="right"
            data-load="#content_fahrzeiten"
            data-url="#content_fahrzeiten.html"
            data-active-color="#ca8473"
            data-active-pattern=".*#content_fahrzeiten.html">Fahrzeiten</div>
        <div data-type="link" class="large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="fa-gears"
            data-color="#7a8388"
            data-text-align="right"
            data-load="#content_system"
            data-url="#content_system.html"
            data-active-color="#ca8473"
            data-active-pattern=".*#content_system.html">System</div>
<!--
        <div data-type="link" class=" prefetch oder nocache large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="fa-music"
            data-color="#7a8388"
            data-text-align="right"
            data-load="#content4"
            data-url="#content_sounds.html"
            data-active-color="#ca8473"
            data-active-pattern=".*#content_sounds.html">Sounds</div>
<div class="lightgreen" style="margin-top: 120px;">
<div data-type="clock" class="center-align big"></div>
<div data-type="clock" data-format="l, d.m.Y" class="center-align"></div>
</div>-->
    </nav>

    <main id="panel">
        <header id="header-nav" class="bg-lightgreen row">
         <div data-type="slideout" class="col-1-8 big right-align notouch"></div>
         <div id="linkname" class="col-3-6 big bold center-align middle"></div>
<div class="col-1-6 right-align" data-type="link" data-url="#content_termine.html" data-load="#content_termine" data-url="#content_termine.html">
<div data-type="symbol"
data-device="Termine_aktuell"
data-get="Summe"
data-icons='["fa-calendar warn fa-blink","fa-calendar warn"]'
data-on-colors='["black","black"]'
data-get-on='["!0","0"]'
data-background-icon="fa-square"
data-on-background-color="#85ceb4"
data-off-background-color="#85ceb4"
class="big black"></div>
</div>
<div class="col-1-6 right-align" data-type="link" data-url="#content_heizung.html" data-load="#content_heizung" data-url="#content_heizung.html">
<div data-type="symbol"
data-device="FensterStatus"
data-get="offen"
data-icons='["oa-fts_window_2w_tilt_l_open_r warn fa-blink","oa-fts_window_2w_tilt_l_open_r warn"]'
data-on-colors='["black","black"]'
data-get-on='["!0","0"]'
data-background-icon="fa-square"
data-on-background-color="#85ceb4"
data-off-background-color="#85ceb4"
class="big black"></div>
</div>
<!-- <div data-type="symbol" data-device="dummy1" data-icon="fa-modx" class="col-1-6 big warn"></div> -->
        </header>
        <div class="page" id="content_main"></div>
        <div class="page" id="content_heizung"></div>
        <div class="page" id="content_licht"></div>
        <div class="page" id="content_multimedia"></div>
        <div class="page" id="content_termine"></div>
        <div class="page" id="content_fahrzeiten"></div>
        <div class="page" id="content_system"></div>
    </main>

</body>
</html>


content_multimedia.html

Code Auswählen Erweitern


<!DOCTYPE html>
<html>
<head></head>
<body>
    <div class="page" id="content_multimedia">
        <section>
            <div class="head">Bad
<div data-type="symbol" data-device="Sonos_Bad"
data-get-on='["appeared","disappeared"]'
data-icons='["fa-circle","fa-circle"]'
data-on-colors='["SeaGreen","IndianRed"]'
style="font-size:16px">
</div>
</div>
<!-- Sonos Bad -->
<div class="inline">
<div data-type="image" data-device="Sonos_Bad" data-get="currentAlbumArtURL" class="inline" style="width:200px"></div>
<div class="inline" style="width:100px">
<div data-type="label" data-device="Sonos_Bad" data-get="infoSummarize2"></div><br />
</div>
<div class="inline">
<div data-type="select" data-device="duSonosFavourites" data-list="Favourites" data-set="Sonos_Bad" class="inline" style="width:180px;"></div>
<br /><br />
</div>
<div class="inline">
<div data-type="spinner"
data-device="Sonos_Bad"
data-get="Volume"
data-set="Volume"
data-icon-left-color="blue"
data-icon-right-color="blue"
data-min="0"
data-max="100"
data-step="5"
data-width="120"
data-height="30"
data-unit=" %"
data-longdelay="2500"
data-background-color="#293134"
class="valueonly small"
style="margin-bottom:6px;">
</div>
<div class="narrow darker small">Lautstärke</div>
</div>
</div>
<div class="container">
<div class="inline">
<div class="inline">
<div data-type="switch" data-device="bad_AMP_Sonos" data-icon="fa-bolt" data-doubleclick="500" class="verticalLine"></div>
<div>Strom<br />Sonos</div>
</div>
<div class="inline">
<div data-type="push" data-device="Sonos_Bad" data-set-on="PREVIOUS" data-icon="fa-fast-backward"></div>
<div>Previous</div><br />
</div>
<div class="inline">
<div data-type="push" data-device="Sonos_Bad" data-set-on="PLAY" data-icon="fa-play"></div>
<div>Play</div><br />
</div>
<div class="inline">
<div data-type="push" data-device="Sonos_Bad" data-set-on="NEXT" data-icon="fa-fast-forward"></div>
<div>Next</div><br />
</div>
<div class="inline">
<div data-type="push" data-device="Sonos_Bad" data-set-on="PAUSE" data-icon="fa-pause"></div>
<div>Pause</div><br />
</div>
</div><br />

<div class="inline">
<div data-type="switch" data-device="Sonos_Bad_PlayingCheck" class="fs140p"
data-get="wait" data-set="wait" data-cmd="attr"
data-get-on="300" data-get-off="999999" data-icon="fs-general_aus_fuer_zeit"></div>
<div data-type="label" data-device="Sonos_Bad_PlayingCheck" data-get="wait_timer" data-part="1"  class="small"></div>
<div data-type="label" data-device="Sonos_Bad_PlayingCheck" data-get="wait_timer" data-part="2"  class="small"></div>
</div>
<div class="inline">
<div data-type="switch" data-device="Sonos" class="fs140p"
data-get="Groups" data-set="Groups"
data-get-on="[Sonos_Bad, Sonos_Schlafzimmer]" data-get-off="[Sonos_Bad], [Sonos_Kueche], [Sonos_Schlafzimmer]" data-icon="fa-link"></div>
<div class="small">+ SZ</div><br />
</div>
<div class="inline">
<div data-type="switch" data-device="Sonos" class="fs140p"
data-get="Groups" data-set="Groups"
data-get-on="[Sonos_Bad, Sonos_Kueche]" data-get-off="[Sonos_Bad], [Sonos_Kueche], [Sonos_Schlafzimmer]" data-icon="fa-link"></div>
<div class="small">+ Küche</div><br />
</div>
<div class="inline">
<div data-type="switch" data-device="Sonos" class="fs140p"
data-get="Groups" data-set="Groups"
data-get-on="[Sonos_Bad, Sonos_Kueche, Sonos_Schlafzimmer]" data-get-off="[Sonos_Bad], [Sonos_Kueche], [Sonos_Schlafzimmer]" data-icon="fa-link"></div>
<div class="small">+ SZ<br />& Küche</div>
</div>
<div class="inline">
<div data-type="switch" data-device="Sonos_Bad" class="fs140p"
data-get="Repeat" data-set="Repeat"     
data-get-on="1" data-get-off="0" data-icon="fa-refresh"></div>
<div class="small">Repeat</div><br />
</div>
<div class="inline">
<div data-type="switch" data-device="Sonos_Bad" class="fs140p"
data-get="Shuffle" data-set="Shuffle"     
data-get-on="1" data-get-off="0" data-icon="fa-random"></div>
<div class="small">Shuffle</div><br />
</div>
<div class="inline">
<div data-type="switch" data-device="Sonos_Bad" class="fs140p"
data-get="CrossfadeMode" data-set="CrossfadeMode"     
data-get-on="1" data-get-off="0" data-icon="fa-compress"></div>
<div class="small">Crossfade</div><br />
</div>
</div>
<!-- Sonos Bad Ende -->
        </section>

         <section>
            <div class="head">Schlafzimmer
<div data-type="symbol" data-device="Sonos_Schlafzimmer"
data-get-on='["appeared","disappeared"]'
data-icons='["fa-circle","fa-circle"]'
data-on-colors='["SeaGreen","IndianRed"]'
style="font-size:16px">
</div>
</div>
<!-- Sonos Schlafzimmer -->
<div class="inline">
<div data-type="image" data-device="Sonos_Schlafzimmer" data-get="currentAlbumArtURL" class="inline" style="width:200px"></div>
<div class="inline" style="width:100px">
<div data-type="label" data-device="Sonos_Schlafzimmer" data-get="infoSummarize2"></div><br />
</div>
<div class="inline">
<div data-type="select" data-device="duSonosFavourites" data-list="Favourites" data-set="Sonos_Schlafzimmer" class="inline" style="width:180px;"></div>
<br /><br />
</div>
<div class="inline">
<div data-type="spinner"
data-device="Sonos_Schlafzimmer"
data-get="Volume"
data-set="Volume"
data-icon-left-color="blue"
data-icon-right-color="blue"
data-min="0"
data-max="100"
data-step="5"
data-width="120"
data-height="30"
data-unit=" %"
data-longdelay="2500"
data-background-color="#293134"
class="valueonly small"
style="margin-bottom:6px;">
</div>
<div class="narrow darker small">Lautstärke</div>
</div>
</div>
<div class="container">
<div class="inline">
<div class="inline">
<div data-type="switch" data-device="sz_AMP_Sonos" data-icon="fa-bolt" data-doubleclick="500" class="verticalLine"></div>
<div>Strom<br />Sonos</div>
</div>
<div class="inline">
<div data-type="push" data-device="Sonos_Schlafzimmer" data-set-on="PREVIOUS" data-icon="fa-fast-backward"></div>
<div>Previous</div><br />
</div>
<div class="inline">
<div data-type="push" data-device="Sonos_Schlafzimmer" data-set-on="PLAY" data-icon="fa-play"></div>
<div>Play</div><br />
</div>
<div class="inline">
<div data-type="push" data-device="Sonos_Schlafzimmer" data-set-on="NEXT" data-icon="fa-fast-forward"></div>
<div>Next</div><br />
</div>
<div class="inline">
<div data-type="push" data-device="Sonos_Schlafzimmer" data-set-on="PAUSE" data-icon="fa-pause"></div>
<div>Pause</div><br />
</div>
</div><br />

<div class="inline">
<div data-type="switch" data-device="Sonos_Schlafzimmer_PlayingCheck" class="fs140p"
data-get="wait" data-set="wait" data-cmd="attr"
data-get-on="300" data-get-off="999999" data-icon="fs-general_aus_fuer_zeit"></div>
<div data-type="label" data-device="Sonos_Schlafzimmer_PlayingCheck" data-get="wait_timer" data-part="1"  class="small"></div>
<div data-type="label" data-device="Sonos_Schlafzimmer_PlayingCheck" data-get="wait_timer" data-part="2"  class="small"></div>
</div>
<div class="inline">
<div data-type="switch" data-device="Sonos" class="fs140p"
data-get="Groups" data-set="Groups"
data-get-on="[Sonos_Schlafzimmer, Sonos_Bad]" data-get-off="[Sonos_Bad], [Sonos_Kueche], [Sonos_Schlafzimmer]" data-icon="fa-link"></div>
<div class="small">+ Bad</div><br />
</div>
<div class="inline">
<div data-type="switch" data-device="Sonos" class="fs140p"
data-get="Groups" data-set="Groups"
data-get-on="[Sonos_Schlafzimmer, Sonos_Kueche]" data-get-off="[Sonos_Bad], [Sonos_Kueche], [Sonos_Schlafzimmer]" data-icon="fa-link"></div>
<div class="small">+ Küche</div><br />
</div>
<div class="inline">
<div data-type="switch" data-device="Sonos" class="fs140p"
data-get="Groups" data-set="Groups"
data-get-on="[Sonos_Schlafzimmer, Sonos_Bad, Sonos_Kueche]" data-get-off="[Sonos_Bad], [Sonos_Kueche], [Sonos_Schlafzimmer]" data-icon="fa-link"></div>
<div class="small">+ Bad<br />& Küche</div>
</div>
<div class="inline">
<div data-type="switch" data-device="Sonos_Schlafzimmer" class="fs140p"
data-get="Repeat" data-set="Repeat"     
data-get-on="1" data-get-off="0" data-icon="fa-refresh"></div>
<div class="small">Repeat</div><br />
</div>
<div class="inline">
<div data-type="switch" data-device="Sonos_Schlafzimmer" class="fs140p"
data-get="Shuffle" data-set="Shuffle"     
data-get-on="1" data-get-off="0" data-icon="fa-random"></div>
<div class="small">Shuffle</div><br />
</div>
<div class="inline">
<div data-type="switch" data-device="Sonos_Schlafzimmer" class="fs140p"
data-get="CrossfadeMode" data-set="CrossfadeMode"     
data-get-on="1" data-get-off="0" data-icon="fa-compress"></div>
<div class="small">Crossfade</div><br />
</div>
</div>
<!-- Sonos Schlafzimmer Ende -->
         </section>

         <section>
            <div class="head">Küche
<div data-type="symbol" data-device="Sonos_Kueche"
data-get-on='["appeared","disappeared"]'
data-icons='["fa-circle","fa-circle"]'
data-on-colors='["SeaGreen","IndianRed"]'
style="font-size:16px">
</div>
</div>
<!-- Sonos Kueche -->
<div class="inline">
<div data-type="image" data-device="Sonos_Kueche" data-get="currentAlbumArtURL" class="inline" style="width:200px"></div>
<div class="inline" style="width:100px">
<div data-type="label" data-device="Sonos_Kueche" data-get="infoSummarize2"></div><br />
</div>
<div class="inline">
<div data-type="select" data-device="duSonosFavourites" data-list="Favourites" data-set="Sonos_Kueche" class="inline" style="width:180px;"></div>
<br /><br />
</div>
<div class="inline">
<div data-type="spinner"
data-device="Sonos_Kueche"
data-get="Volume"
data-set="Volume"
data-icon-left-color="blue"
data-icon-right-color="blue"
data-min="0"
data-max="100"
data-step="5"
data-width="120"
data-height="30"
data-unit=" %"
data-longdelay="2500"
data-background-color="#293134"
class="valueonly small"
style="margin-bottom:6px;">
</div>
<div class="narrow darker small">Lautstärke</div>
</div>
</div>
<div class="container">
<div class="inline">
<div class="inline">
<div data-type="switch" data-device="ku_AMP_Sonos" data-icon="fa-bolt" data-doubleclick="500" class="verticalLine"></div>
<div>Strom<br />Sonos</div>
</div>
<div class="inline">
<div data-type="push" data-device="Sonos_Kueche" data-set-on="PREVIOUS" data-icon="fa-fast-backward"></div>
<div>Previous</div><br />
</div>
<div class="inline">
<div data-type="push" data-device="Sonos_Kueche" data-set-on="PLAY" data-icon="fa-play"></div>
<div>Play</div><br />
</div>
<div class="inline">
<div data-type="push" data-device="Sonos_Kueche" data-set-on="NEXT" data-icon="fa-fast-forward"></div>
<div>Next</div><br />
</div>
<div class="inline">
<div data-type="push" data-device="Sonos_Kueche" data-set-on="PAUSE" data-icon="fa-pause"></div>
<div>Pause</div><br />
</div>
</div><br />

<div class="inline">
<div data-type="switch" data-device="Sonos_Kueche_PlayingCheck" class="fs140p"
data-get="wait" data-set="wait" data-cmd="attr"
data-get-on="300" data-get-off="999999" data-icon="fs-general_aus_fuer_zeit"></div>
<div data-type="label" data-device="Sonos_Kueche_PlayingCheck" data-get="wait_timer" data-part="1"  class="small"></div>
<div data-type="label" data-device="Sonos_Kueche_PlayingCheck" data-get="wait_timer" data-part="2"  class="small"></div>
</div>
<div class="inline">
<div data-type="switch" data-device="Sonos" class="fs140p"
data-get="Groups" data-set="Groups"
data-get-on="[Sonos_Kueche, Sonos_Bad]" data-get-off="[Sonos_Bad], [Sonos_Kueche], [Sonos_Schlafzimmer]" data-icon="fa-link"></div>
<div class="small">+ Bad</div><br />
</div>
<div class="inline">
<div data-type="switch" data-device="Sonos" class="fs140p"
data-get="Groups" data-set="Groups"
data-get-on="[Sonos_Kueche, Sonos_Schlafzimmer]" data-get-off="[Sonos_Bad], [Sonos_Kueche], [Sonos_Schlafzimmer]" data-icon="fa-link"></div>
<div class="small">+ SZ</div><br />
</div>
<div class="inline">
<div data-type="switch" data-device="Sonos" class="fs140p"
data-get="Groups" data-set="Groups"
data-get-on="[Sonos_Kueche, Sonos_Bad, Sonos_Schlafzimmer]" data-get-off="[Sonos_Bad], [Sonos_Kueche], [Sonos_Schlafzimmer]" data-icon="fa-link"></div>
<div class="small">+ SZ <br />& Bad</div>
</div>
<div class="inline">
<div data-type="switch" data-device="Sonos_Kueche" class="fs140p"
data-get="Repeat" data-set="Repeat"     
data-get-on="1" data-get-off="0" data-icon="fa-refresh"></div>
<div class="small">Repeat</div><br />
</div>
<div class="inline">
<div data-type="switch" data-device="Sonos_Kueche" class="fs140p"
data-get="Shuffle" data-set="Shuffle"     
data-get-on="1" data-get-off="0" data-icon="fa-random"></div>
<div class="small">Shuffle</div><br />
</div>
<div class="inline">
<div data-type="switch" data-device="Sonos_Kueche" class="fs140p"
data-get="CrossfadeMode" data-set="CrossfadeMode"     
data-get-on="1" data-get-off="0" data-icon="fa-compress"></div>
<div class="small">Crossfade</div><br />
</div>
</div>
<!-- Sonos Kueche Ende -->
         </section>

<section>
            <div class="head">Wohnzimmer</div>
<!-- Sonos Wohnzimmer -->
<div class="inline">
<div data-type="push" data-fhem-cmd="{MeineFavouriten('Sonos_Bad')}" onclick="ftui.toast('Favoriten Bad werden eingelesen...');" data-icon="fa-list"></div>
<div>Favoriten<br />einlesen Bad</div>
</div>
<div class="inline">
<div data-type="push" data-fhem-cmd="{MeineFavouriten('Sonos_Schlafzimmer')}" onclick="ftui.toast('Favoriten Schlafzimmer werden eingelesen...');" data-icon="fa-list"></div>
<div>Fav. einlesen<br />Schlafzimmer</div>
</div>
<div class="inline">
<div data-type="push" data-fhem-cmd="{MeineFavouriten('Sonos_Kueche')}" onclick="ftui.toast('Favoriten Küche werden eingelesen...');" data-icon="fa-list"></div>
<div>Fav. einlesen<br />Küche</div>
</div><br />
<div class="inline">
<div data-type="switch" data-device="n4_NSA325" data-get="status" data-set="" data-doubleclick="500"
data-states='["start","on","shutdown","off"]'
data-set-states='["","off","","on"]'
data-icons='["fa-arrow-up","fa-power-off","fa-arrow-down","fa-power-off"]'
data-on-colors='["#ffffff","#ffffff","#ffffff","#ffffff"]'
data-on-background-colors='["SlateBlue","SeaGreen","SlateBlue","IndianRed"]'>
</div>
<div>NSA325</div>
</div>
<div class="inline">
<div data-type="switch" data-device="n4_HTPC" data-get="status" data-set="" data-doubleclick="500"
data-states='["start","on","shutdown","off"]'
data-set-states='["","off","","on"]'
data-icons='["fa-arrow-up","fa-power-off","fa-arrow-down","fa-power-off"]'
data-on-colors='["#ffffff","#ffffff","#ffffff","#ffffff"]'
data-on-background-colors='["SlateBlue","SeaGreen","SlateBlue","IndianRed"]'>
</div>
<div>HTPC</div>
</div>
<div class="inline">
<div data-type="switch" data-device="n4_notebook" data-get="status" data-set="" data-doubleclick="500"
data-states='["start","on","shutdown","off"]'
data-set-states='["","off","","on"]'
data-icons='["fa-arrow-up","fa-power-off","fa-arrow-down","fa-power-off"]'
data-on-colors='["#ffffff","#ffffff","#ffffff","#ffffff"]'
data-on-background-colors='["SlateBlue","SeaGreen","SlateBlue","IndianRed"]'>
</div>
<div>Notebook</div>
</div>
<!-- Sonos Wohnzimmer Ende -->
        </section>
    </div>
</body>
</html>


.... aber es ist egal welche Unterseite ich laden lasse ....jede Seite die mehr Content hat, als auf die erste "Ansicht passt" lässt sich nicht scrollen.

Btw... könntest du bitte noch dazu was sagen?

Edit:
Wenn ich eh gerade beim Slideout-Template bin...gibt es die Möglichkeit die "Slide-In" Richtung per Attribut mitzugeben?
z. B. right, left, top, bottum ? ... Dann könnte man sich auch "Quick-Settings" zusammenbasteln

Vielen Dank!

Gruß
Mathias

[Andy89]

.... aber es ist egal welche Unterseite ich laden lasse ....jede Seite die mehr Content hat, als auf die erste "Ansicht passt" lässt sich nicht scrollen.

genau das gleiche Problem habe ich auch.
Das komische ist bei mir, dass Seiten, die wenig Content haben, sich genauso viel scrollen lassen wie die "zu vollen" Seiten.... irgendwo ist da bei uns der Wurm drin....

Beste Grüße
Andy

__________________________________________________________________________________
edit1: habe gerade mal die <link rel="stylesheet" href="css/fhem-mobil-ui.css" /> auskommentiert und dann geht das scrollen wieder. Ich such mal woran es liegt ....

__________________________________________________________________________________
edit2: es liegt "overflow: hidden;" im folgenden Block:

Code Auswählen Erweitern

.gridster ul li, main {
    background-color:#eee;
    overflow: hidden;
    text-align: center;
}
wenn das raus ist, dann kann man wieder scrollen