Anzeige Slider Widget Rolladen funktioniert nicht richtig

Begonnen von SirBen, 10 April 2019, 11:57:12

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

SirBen

10 April 2019, 11:57:12
Moin,
ich habe auf meinem Tablet u.a. das Slider Widget mit der Rolladen Optik am Laufen.
Beim ersten Aufruf der Seite wird alles richtig angezeigt (Meldungen wie Longpoll started kommen auch).
Beim erneuten Aufrufen der Seite (z.B. wenn ich auf "Home" drücke und danach wieder auf "Rolläden"), werden alle Slider geschlossen angezeigt und keine weitere Toast Meldung erscheint.
Das gleiche Problem tritt auch auf dem Laptop auf mit Firefox und Chrome jeweils in der aktuellsten Version.
Auf dem Tablet ist Chrome 69 drauf (weil auf der aktuelleren Version die Aktualisierung nicht mehr funktioniert) und Fully 1.29.

Hier der Code von der Index.html:
Code Auswählen
<!DOCTYPE html>
<html>

<!-- FHEM Tablet UI 2.6 -->

<head>
<link rel="icon" href="favicon.ico" type="image/x-icon" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="debug" content="5"> <!-- verbose level 1-6 = output to console;0 = not output -->
<meta name='toast' content='10'> <!-- Ausgabe von Protokollmeldungen -->
<meta name="longpoll" content="1">
<meta name="longpoll_type" content="ajax">
<meta name="longpoll_filter" content=".*">
    <meta name="longpoll_maxage" content="240">

<link rel="stylesheet" href="css/fhem-blue-ui.css" /> <!-- fhem-mobil-ui.css -->
<link rel="stylesheet" href="user-tablet-ui.css" />
<script src="js/fhem-tablet-ui.js" defer></script>

    <title>SmartHome</title>
</head>

<body>
<div class="phone-header"></div>

<nav class="menu">
<div class="menu-trigger"></div>
<header>Menü</header>
        <ul>
<li>
<div data-type="link" data-url="#content_home.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_home"
data-text-align="left"
data-active-pattern="(.*index.html|.*#content_home.html)"
data-icon="fa-home" class="large"><span>Home</span></div>
</li>
<li>
<div data-type="link" data-url="#content_weather.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_weather"
data-text-align="left"
data-active-pattern=".*(#content_weather.html)"
data-icon="wi wi-day-sunny" class="large"><span>Wetter</span></div>
</li>
<li>
<div data-type="link" data-url="#content_heating.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_heating"
data-text-align="left"
data-active-pattern=".*(#content_heating.html)"
data-icon="wi wi-thermometer" class="large"><span>Heizung</span></div>
</li>
<li>
<div data-type="link" data-url="#content_blinds.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_blinds"
data-text-align="left"
data-active-pattern=".*(#content_blinds.html)"
data-icon="oa-fts_shutter" class="large"><span>Rollläden</span></div>
</li>
<li>
<div data-type="link" data-url="#content_settings.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_settings"
data-text-align="left"
data-active-pattern=".*(#content_settings.html)"
data-icon="oa-edit_settings" class="large"><span>Einstellungen</span></div>
</li>
<li>
<div data-type="link"
data-fhem-cmd="SET Klingel on"
data-color="white"
data-active-color="blue"
data-width="115"
data-text-align="left"
data-icon="fa-video" class="large"><span>Kamera</span></div>
</li>
</ul>
</nav>

<div data-type="popup" data-device="KameraURL" data-get="STATE" data-get-on="http://IP/camera/httppreview" data-get-off="0" data-height="730" data-width="1290" data-mode="fade" class="">
<div class="dialog">
<div class="nocache" data-type="image" data-device="KameraURL"></div>
</div>
</div>

<main>
<div class="page nocache" id="content_home"></div>
<div class="page nocache" id="content_heating"></div>
<div class="page nocache" id="content_light"></div>
<div class="page nocache" id="content_contact"></div>
<div class="page nocache" id="content_blinds"></div>
<div class="page nocache" id="content_blinds_detail"></div>
<div class="page nocache" id="content_smoke"></div>
<div class="page nocache" id="content_weather"></div>
<div class="page nocache" id="content_phone"></div>
<div class="page nocache" id="content_cam"></div>
<div class="page nocache" id="content_chart"></div>
<div class="page nocache" id="content_settings"></div>
</main>
</body>
</html>

Hier der Code von content_blinds.html:
Code Auswählen
<!DOCTYPE html>
<html>
<body>
    <div class="page" id="content_blinds">
<div class="vbox">
<div class="hbox">
<div class="card" style="align-items: center; height: 97%;"><header>Arbeitszimmer</header>
<div data-type="slider"
data-handle-diameter="20"
data-touch-diameter="40"
data-device="HM_220301"
data-get="pct"
data-color="#969696"
data-height="220"
class="blind blindview tap" style="width: 62%;">
</div>
<div data-type="circlemenu" data-direction="right-half" class="top-space">
<ul>
<li><div data-type="push" data-icon="fa-bars"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-double-up"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-up"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-minus"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-down"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-double-down"></div></li>
</ul>
</div>
</div>
<div class="card" style="align-items: center; height: 97%;"><header>Kind 2</header>
<div data-type="slider"
data-handle-diameter="20"
data-touch-diameter="40"
data-device="HM_220201"
data-get="pct"
data-color="#969696"
data-height="220"
class="blind blindview tap nocache" style="width: 62%;">
</div>
<div data-type="circlemenu" data-direction="right-half" class="top-space">
<ul>
<li><div data-type="push" data-icon="fa-bars"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-double-up"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-up"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-minus"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-down"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-double-down"></div></li>
</ul>
</div>
</div>
<div class="card" style="align-items: center; height: 97%;"><header>Tobi's Zimmer</header>
<div data-type="slider"
data-handle-diameter="20"
data-touch-diameter="40"
data-device="HM_220301"
data-get="pct"
data-set="pct"
data-color="#969696"
data-height="220"
class="blind blindview tap nocache" style="width: 62%;">
</div>
<div data-type="circlemenu" data-direction="right-half" class="top-space">
<ul>
<li><div data-type="push" data-icon="fa-bars"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-double-up"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-up"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-minus"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-down"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-double-down"></div></li>
</ul>
</div>
</div>
<div class="card" style="align-items: center; height: 97%;"><header>Schlafzimmer</header>
<div data-type="slider"
data-handle-diameter="20"
data-touch-diameter="40"
data-device="HM_220301"
data-get="pct"
data-color="#969696"
data-height="220"
class="blind blindview tap" style="width: 62%;">
</div>
<div data-type="circlemenu" data-direction="right-half" class="top-space">
<ul>
<li><div data-type="push" data-icon="fa-bars"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-double-up"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-up"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-minus"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-down"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-double-down"></div></li>
</ul>
</div>
</div>
</div>

<div class="hbox">
<div class="card grow-2" style="align-items: stretch; height: 97%;"><header>Küche</header>
<div class="hbox">
<div class="card" style="align-items: stretch; height: 100%;">
<div data-type="slider"
data-handle-diameter="20"
data-device="HM_220301"
data-get="pct"
data-color="#969696"
data-height="220"
class="blind blindview tap">
</div>
<div data-type="circlemenu" data-direction="right-half" class="top-space">
<ul>
<li><div data-type="push" data-icon="fa-bars"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-double-up"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-up"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-minus"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-down"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-double-down"></div></li>
</ul>
</div>
</div>
<div class="card" style="align-items: stretch; height: 100%;">
<div data-type="slider"
data-handle-diameter="20"
data-device="HM_220301"
data-get="pct"
data-color="#969696"
data-height="220"
class="blind blindview tap">
</div>
<div data-type="circlemenu" data-direction="right-half" class="top-space">
<ul>
<li><div data-type="push" data-icon="fa-bars"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-double-up"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-up"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-minus"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-down"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-double-down"></div></li>
</ul>
</div>
</div>
</div>
</div>
<div class="card grow-3" style="align-items: stretch; height: 97%;"><header>Wohnzimmer</header>
<div class="hbox">
<div class="card" style="align-items: stretch; height: 100%;">
<div data-type="slider"
data-handle-diameter="20"
data-device="HM_220301"
data-get="pct"
data-color="#969696"
data-height="220"
class="blind blindview tap">
</div>
<div data-type="circlemenu" data-direction="right-half" class="top-space">
<ul>
<li><div data-type="push" data-icon="fa-bars"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-double-up"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-up"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-minus"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-down"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-double-down"></div></li>
</ul>
</div>
</div>
<div class="card" style="align-items: stretch; height: 100%;">
<div data-type="slider"
data-handle-diameter="20"
data-device="HM_220301"
data-get="pct"
data-color="#969696"
data-height="220"
class="blind blindview tap">
</div>
<div data-type="circlemenu" data-direction="right-half" class="top-space">
<ul>
<li><div data-type="push" data-icon="fa-bars"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-double-up"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-up"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-minus"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-down"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-double-down"></div></li>
</ul>
</div>
</div>
<div class="card" style="align-items: stretch; height: 100%;">
<div data-type="slider"
data-handle-diameter="20"
data-device="HM_220301"
data-get="pct"
data-color="#969696"
data-height="220"
class="blind blindview tap">
</div>
<div data-type="circlemenu" data-direction="right-half" class="top-space">
<ul>
<li><div data-type="push" data-icon="fa-bars"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-double-up"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-up"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-minus"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-down"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-double-down"></div></li>
</ul>
</div>
</div>
</div>
</div>
<div class="card" style="align-items: center; height: 97%;"><header>HWR</header>
<div data-type="slider"
data-handle-diameter="20"
data-device="HM_220301"
data-get="pct"
data-color="#969696"
data-height="220"
class="blind blindview tap" style="width: 93%;">
</div>
<div data-type="circlemenu" data-direction="right-half" class="top-space">
<ul>
<li><div data-type="push" data-icon="fa-bars"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-double-up"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-up"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-minus"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-down"></div></li>
<li><div data-type="push" data-device="" data-set-on="" data-icon="fa-angle-double-down"></div></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>

</html>

Hier der Code von der user-tablet-ui.css:
Code Auswählen
/* FHEM Tablet UI 2.6 - eigene Anpassungen */

/* Phone-Header und Phone-Backbutton Definition */
.phone-header {
display: none;
}

.phone-back-btn {
display: none;
}


/* Menübreite und Zeilenabstand der Menüpunkte korrigiert*/
@media screen and (max-width: 900px) and (min-width: 480px) {
.menu {
width: 90px !important;
}
}

/* Menüleiste oben auf Bildschirmbreite angepasst, damit keine Elemente mehr überdeckt werden */
@media screen and (max-width: 480px) {
.menu ~ main > .page {
padding-left: 0px;
padding-top: 40px;
}
.phone-header {
        top: 0px;
        left: 0px;
height: 40px;
width: 100%;
position: absolute;
background: #1D1F20;
z-index: 4;
display: block;
}
.phone-back-btn {
        top: 0px;
        left: 0px;
height: 39px;
width: 39px;
        position: absolute;
        background: #1D1F20;
padding-top: 0.31em;
z-index: 5;
display: block;
}
}

/* Header Hintergrundfarbe und Schriftgröße korrigiert */
.card > header {
    background-color: #303030; /*#e6e6e6*/
font-size: 125%;
color: #ffffff
}
/* .card > section {
background-color: #383838; */
}

/* Weather Iconfarbe korrektur */
.weather:before {
    color: #337ab7;
}

/* Definition for styles to be used for extension of slider widget for display of blinds, awnings etc. */
/* normal lines */

.blind .vertical.range-container {
width: 100%;
margin: 5%;
}

.blind .vertical .range-bar {
    width: 100%;
border-radius: 2px;
background-image: url(Blinds.jpg);
background-position: center bottom;
background-blend-mode: multiply;
background-size: cover;
background-color: rgb(150,150,150) !important;
}

.blind .vertical .range-quantity {
border-radius: 3px;
}

.blind .vertical .range-handle {
margin-left: 50% !important;
}

.blindview .vertical .range-quantity {
border-radius: 2px;
background-image: url(WindowContentSimpleGrey.png);
background-repeat: no-repeat;
background-position: center bottom;
background-size: cover;
background-blend-mode: difference;
background-color: rgb(64,64,64) !important;
}

.awning .vertical.range-container {
width: 100%;
}

.awning .vertical .range-bar {
    width: 70%;
border-radius: 2px;
background-image: url(../images/AwningContentSimpleGrey.png);
background-position: center bottom;
background-blend-mode: difference;
background-size: 100% 100%;
}

.awning .vertical .range-quantity {
border-radius: 3px;
}

.awning .vertical .range-handle {
margin-left: 52% !important;
}

Habe die css Datei wie im Wiki bearbeitet. Allerdings passte damit überhaupt nichts. Daher in meiner css ein paar Modifikationen.

Momentan habe ich nur einen HM Rolladenaktor eingebaut, daher bei fast allen Slidern das gleiche Device. Nicht wundern. ;)

Wäre schön, wenn mir jemand helfen kann.

Vielen Dank schon mal und LG

eki

#1
12 April 2019, 13:59:51
Hast Du dieses Verhalten nur mit den Modifikationen für die Rolladendarstellung (Änderungen im CSS) oder auch wenn Du "normale" Slider verwendest?

SirBen

#2
12 April 2019, 15:38:03
Ja, ich habe die class blind und blindview rausgenommen, leider wird auch der normale slider geschlossen angezeigt nach dem pagewechsel.

SirBen

#3
31 Mai 2019, 14:00:45
Moin,
ich habe noch viel herumgespielt und herausgefunden, dass die Anzeige korrekt funktioniert, wenn
Code Auswählen
data-height="220" rausgenommen wird. Allerdings hätte ich die Höhe gerne so..... Wo liegt das Problem?

Ich habe auch mit
Code Auswählen
data-height="220px"
Code Auswählen
data-height='220' keinen Erfolg.

Wer kann mir helfen?

Danke und Gruß
Ben

eki

#4
01 Juni 2019, 14:50:09
Was passiert denn, wenn Du statt data-height="220" style="height: 220px;" verwendest?

SirBen

#5
01 Juni 2019, 21:48:25 Letzte Bearbeitung: 01 Juni 2019, 21:50:29 von SirBen
Dann wird der Bereich um den angezeigten Rolladen größer, also der div.slider-wrapper hat dann die Größe von 220px.
So der Code:
Code Auswählen
<div data-type="slider"
data-handle-diameter="20"
data-touch-diameter="20"
data-device="HM_220301"
data-get="pct"
data-color="#969696"
class="blind blindview tap" style="height: 220px; width: 62%;">
</div>

SirBen

#6
02 Juni 2019, 13:52:38 Letzte Bearbeitung: 02 Juni 2019, 13:59:18 von SirBen
Ich habe jetzt noch was herausgefunden (mittels Inspektor bei Firefox):
wenn bei <div class="range-container slider_vertical vertical" style="height:220px"> steht, dann ist die Ansicht richtig (siehe Bild).
Wie kann ich nun genau diese "height" ändern? Ich kenne mich da leider zu wenig aus...

Danke schon mal und Gruß
Ben

EDIT: Habe es selber gerade durch zufall gelöst.
Die user-css musste ich noch etwas abändern:
Code Auswählen
.blind .vertical.range-container {
width: 100%;
margin: 5%;
height: 220px !important;
Drucken
Nach oben Seiten1
Benutzer-Aktionen