Update (03.09.2017) - Elemente verschoben

Begonnen von gloob, 03 September 2017, 11:32:26

Vorheriges Thema - Nächstes Thema

gloob

Hallo,

Hat sich zufällig etwas an den TabletUI Daten heute getan? Irgendwie sind bei mir seit heute alle Pagetabs und Items auf der Seite verschoben.
Hab leider nicht auf die Update Liste geschaut.




Edit: ein Wiederherstellen der JS und CSS Ordner bringt wieder die richtige Ansicht. Scheint also wirklich am Update von heute zu liegen.




Edit2: der Change Log zeigt ja auch das die Dateien geändert wurden

fhemtabletui
List of new / modified files since last update:
UPD www/tablet/css/fhem-tablet-ui.css
UPD www/tablet/css/ftui_chart.css
UPD www/tablet/js/fhem-tablet-ui.js
UPD www/tablet/js/fhem-tablet-ui.min.js
UPD www/tablet/js/widget_chart.js
UPD www/tablet/js/widget_classchanger.js
UPD www/tablet/js/widget_famultibutton.js
UPD www/tablet/js/widget_input.js
UPD www/tablet/js/widget_select.js
UPD www/tablet/js/widget_slider.js
UPD www/tablet/js/widget_swiper.js

New entries in the CHANGED file:
FHEM Tablet UI last change:
2017-09-01
- Changed slider/level to allow float values
Raspberry Pi 3 | miniCUL 433MHz | nanoCUL 868 MHz | nanoCUL 433 MHz | MySensors WLAN Gateway | LaCrosse WLAN Gateway | SignalESP 433 MHz | SignalESP 868 MHz | HM-MOD-UART WLAN Gateway | IR - 360 Grad WLAN Gateway

setstate

Wie sah es denn vorher aus?

Zeigst du mir bitte den code für die Unterseite, dann kann ich das besser finden.

gloob

Im Anhang ein Bild wie es eigentlich aussehen sollte.

Index:
<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.2.*
     * 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="75">
    <meta name="widget_base_height" content="50">
<meta name="widget_margin" content="1">
    <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_type" content="longpoll">
    <meta name="debug" content="0"> <!-- verbose level 1-6 = output to console;0 = not output -->
<meta name="toast" content="1">
    <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="lib/font-awesome.min.css" />
    <link rel="stylesheet" href="lib/jquery.toast.min.css" />
<link rel="stylesheet" href="lib/openautomation.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-tablet-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>Pi 1</title>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="14">
<div class="vbox items-space-around">
<div data-type="pagebutton" data-url="#sub1.html" data-load="#sub1" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*index_main_sub_demo.html||.*#sub1.*.html)" data-icon="fa-home"></div>
                <div data-type="pagebutton" data-url="#sub2.html" data-load="#sub2" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#sub2.*.html" data-icon="fa-music"></div>
                <div data-type="pagebutton" data-url="#sub3.html" data-load="#sub3" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#sub3.*.html" data-icon="fa-leaf"></div>
<div data-type="pagebutton" data-url="#sub4.html" data-load="#sub4" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#sub4.*.html" data-icon="fa-battery-half"></div>
                <div data-type="pagebutton" data-url="#sub5.html" data-load="#sub5" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#sub5.*.html" data-icon="fa-line-chart"></div>
<div data-type="pagebutton" data-url="#sub6.html" data-load="#sub6" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#sub6.*.html" data-icon="fa-lightbulb-o"></div>
                <div data-type="pagebutton" data-url="#sub7.html" data-load="#sub7" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#sub7.*.html" data-icon="fa-camera"></div>
<div data-type="pagebutton" data-url="#sub8.html" data-load="#sub8" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#sub8.*.html" data-icon="fa-cloud"></div>
</div>
</li>
<li data-row="1" data-col="2" data-sizex="12" data-sizey="14">
            <div class="page" id="sub1"></div>
            <div class="page" id="sub2"></div>
            <div class="page" id="sub3"></div>
<div class="page" id="sub4"></div>
            <div class="page" id="sub5"></div>
            <div class="page" id="sub6"></div>
<div class="page" id="sub7"></div>
            <div class="page" id="sub8"></div>
          </li>
</ul>
</div>
</body>
</html>


Menu:
<html>
    <body>
        <div class="cell">
            <div data-type="pagetab" data-url="sub1.html"  data-icon="fa-home" class="top-space"></div>
            <div data-type="pagetab" data-url="sub2.html"  data-icon="fa-music" class="top-space"></div>
            <div data-type="pagetab" data-url="sub3.html"  data-icon="fa-leaf" class="top-space"></div>
            <div data-type="pagetab" data-url="sub5.html"  data-icon="fa-line-chart" class="top-space"></div>
<div data-type="pagetab" data-url="sub4.html"  data-icon="fa-battery-half" class="top-space"></div>
<div data-type="pagetab" data-url="sub6.html"  data-icon="fa-lightbulb-o" class="top-space"></div>
<div data-type="pagetab" data-url="sub7.html"  data-icon="fa-camera" class="top-space"></div>
<div data-type="pagetab" data-url="sub8.html"  data-icon="fa-sun-o" class="top-space"></div>
        </div>
    </body>
</html>


Sub1:
<html>
<title>Home, Sweet Home</title>
<head>
</head>
<body>
<div class="page" id="sub1">
<div class="gridster">
<ul>
<!-- ****************************************** -->
<!-- Abfall -->
<!-- ****************************************** -->
<li data-row="1" data-col="1" data-sizex="4" data-sizey="2" class="semitransparent">
<div class="hbox items-space-around">
<div data-type="symbol"
data-device="abfall_Restmuell"
data-get="STATE"
data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]'
data-icons='["fa-trash warn","fa-trash warn fa-spin","fa-trash warn"]'
data-color="grey"
data-background-icon="fa-circle-thin"
data-background-color="#7A7A7A"
class="large"/>

<div data-type="symbol"
data-device="abfall_GelberSack"
data-get="STATE"
data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]'
data-icons='["fa-trash warn","fa-trash warn fa-spin","fa-trash warn"]'
data-color="gold"
data-background-icon="fa-circle-thin"
data-background-color="#7A7A7A" 
class="large"/>

<div data-type="symbol"
data-device="abfall_Biomuell"
data-get="STATE"
data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]'
data-icons='["fa-trash warn","fa-trash warn fa-spin","fa-trash warn"]'
data-color="green"
data-background-icon="fa-circle-thin"
data-background-color="#7A7A7A"
class="large"/>

<div data-type="symbol"
data-device="abfall_Papier"
data-get="STATE"
data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]'
data-icons='["fa-trash warn","fa-trash warn fa-spin","fa-trash warn"]'
data-color="blue"
data-background-icon="fa-circle-thin"
data-background-color="#7A7A7A" 
class="large"/>
</div>
</li>

<!-- ****************************************** -->
<!-- Uptime -->
<!-- ****************************************** -->
<li data-row="1" data-col="4" data-sizex="4" data-sizey="2" class="semitransparent">
<div class="hbox items-space-around">
<div class="vbox">
<div class="hbox items-space-around">
<div>RPi:</div>
<div data-type="label" data-device="sysmon" data-get="uptime_text" data-color="grey"/>
</div>
<div class="hbox items-space-around">
<div>FHEM:</div>
<div data-type="label" data-device="sysmon" data-get="fhemuptime_text" data-color="grey"/>
</div>
</div>
</div>
</li>

<!-- ****************************************** -->
<!-- Uhr -->
<!-- ****************************************** -->
<li data-row="1" data-col="9" data-sizex="4" data-sizey="2" class="semitransparent">
<div class="hbox items-space-around">
<div class="vbox">
<div data-type="clock" data-format="H:i:s" data-color="grey" class="tall thin"/>
</div>
</div>
</li>

<!-- ****************************************** -->
<!-- Wohnzimmer -->
<!-- ****************************************** -->
<li data-row="3" data-col="1" data-sizex="4" data-sizey="4" class="semitransparent">
<header>
<font size="+1">Wohnzimmer</font>
</header>

<div class="container row top-space">
<div class="col-1-2 left">
<div data-type="label"
                                data-device="LaCrosse_WZ" data-get="temperature" data-unit="%B0C%0A" data-fix="1"
                                data-limits='[-20,20,25]' data-colors='["skyblue","green","orangered"]' class="big">
</div>
</div>
<div class="col-1-2 right">
<div data-type="label"
                                data-device="LaCrosse_WZ" data-get="humidity" data-unit="%%0A" data-fix="1"
                                data-limits='[0,40,65]' data-colors='["skyblue","green","orangered"]' class="big">
</div>
</div>
</div>

<div class="container row">
<div class="container top-space">
<div class="col-2-3 left">
<div data-type="thermostat" data-device="HM_WZ_Heizung_Clima" data-valve="ValvePosition" data-step="0.5" data-mode="controlMode" data-off="controlManu off" data-boost="controlMode boost" data-touch-height="large" data-touch-width="large" class="large"/>
</div>
<div class="col-1-3 top-space right">
<div data-type="circlemenu" class="circlemenu">
<ul>
<li><div data-type="symbol" data-device="HM_WZ_Heizung_Clima" data-get="controlMode" data-states='["auto","manual","boost"]' data-icons='["oa-sani_heating_automatic","oa-sani_heating_manual", "oa-sani_heating_boost"]' data-colors='["green","yellow","red"]' data-background-colors='["green","yellow","red"]'></div></li>
<li><div data-type="push" data-device="HM_WZ_Heizung_Clima" data-set="controlMode" data-set-on="boost" data-icon="oa-sani_heating_boost" data-off-background-color="red"></div></li>
<li><div data-type="push" data-device="HM_WZ_Heizung_Clima" data-set="controlMode" data-set-on="auto" data-icon="oa-sani_heating_automatic" data-off-background-color="green"></div></li>
<li><div data-type="push" data-device="HM_WZ_Heizung_Clima" data-set="controlMode" data-set-on="manual" data-icon="oa-sani_heating_manual" data-off-background-color="yellow"></div></li>
</ul>
</div>
<div data-type="circlemenu" data-direction="bottom-half" data-item-diameter="75" data-circle-radius="96" class="circlemenu">
<ul class="menu">
<li><div data-type="symbol" data-icon="oa-fts_shutter_40" data-on-color="green"></div></li>
<li><div class="white medium top-space" data-type="push" data-device="HM_WZ_Rollladen" data-background-icon="" data-icon="" data-set-on="off">zu</div></li>
<li><div class="white medium top-space" data-type="push" data-device="HM_WZ_Rollladen" data-background-icon="" data-icon="" data-set-on="20">20</div></li>
<li><div class="white medium top-space" data-type="push" data-device="HM_WZ_Rollladen" data-background-icon="" data-icon="" data-set-on="40">40</div></li>
<li><div class="white medium top-space" data-type="push" data-device="HM_WZ_Rollladen" data-background-icon="" data-icon="" data-set-on="60">60</div></li>
<li><div class="white medium top-space" data-type="push" data-device="HM_WZ_Rollladen" data-background-icon="" data-icon="" data-set-on="80">80</div></li>
<li><div class="white medium top-space" data-type="push" data-device="HM_WZ_Rollladen" data-background-icon="" data-icon="" data-set-on="on">auf</div></li>
</ul>
</div>
</div>
</div>
</div>
</li>

<!-- ****************************************** -->
<!-- Kinderzimmer -->
<!-- ****************************************** -->
<li data-row="3" data-col="5" data-sizex="4" data-sizey="4" class="semitransparent">
<header>
<font size="+1">Kinderzimmer</font>
</header>
<div class="container row top-space">
<div class="col-1-2 left">
<div data-type="label"
                                data-device="LaCrosse_KZ" data-get="temperature" data-unit="%B0C%0A" data-fix="1"
                                data-limits='[-20,20,25]' data-colors='["skyblue","green","orangered"]' class="big">
</div>
</div>
<div class="col-1-2 right">
<div data-type="label"
                                data-device="LaCrosse_KZ" data-get="humidity" data-unit="%%0A" data-fix="1"
                                data-limits='[0,40,65]' data-colors='["skyblue","green","orangered"]' class="big">
</div>
</div>
</div>

<div class="container row">
<div class="container top-space">
<div class="col-2-3 left">
<div data-type="thermostat" data-device="HM_KZ_Heizung_Clima" data-valve="ValvePosition" data-step="0.5" data-mode="controlMode" data-off="controlManu off" data-boost="controlMode boost" data-touch-height="large" data-touch-width="large" class="large"/>
</div>
<div class="col-1-3 top-space right">
<div data-type="circlemenu" class="circlemenu">
<ul>
<li><div data-type="symbol" data-device="HM_KZ_Heizung_Clima" data-get="controlMode" data-states='["auto","manual","boost"]' data-icons='["oa-sani_heating_automatic","oa-sani_heating_manual", "oa-sani_heating_boost"]' data-colors='["green","yellow","red"]' data-background-colors='["green","yellow","red"]'></div></li>
<li><div data-type="push" data-device="HM_KZ_Heizung_Clima" data-set="controlMode" data-set-on="boost" data-icon="oa-sani_heating_boost" data-off-background-color="red"></div></li>
<li><div data-type="push" data-device="HM_KZ_Heizung_Clima" data-set="controlMode" data-set-on="auto" data-icon="oa-sani_heating_automatic" data-off-background-color="green"></div></li>
<li><div data-type="push" data-device="HM_KZ_Heizung_Clima" data-set="controlMode" data-set-on="manual" data-icon="oa-sani_heating_manual" data-off-background-color="yellow"></div></li>
</ul>
</div>
</div>
</div>
</div>
</li>

<!-- ****************************************** -->
<!-- Schlafzimmer -->
<!-- ****************************************** -->
<li data-row="3" data-col="9" data-sizex="4" data-sizey="4" class="semitransparent">
<header>
<font size="+1">Schlafzimmer</font>
</header>
<div class="container row top-space">
<div class="col-1-2 left">
<div data-type="label"
                                data-device="LaCrosse_SZ" data-get="temperature" data-unit="%B0C%0A" data-fix="1"
                                data-limits='[-20,20,25]' data-colors='["skyblue","green","orangered"]' class="big">
</div>
</div>
<div class="col-1-2 right">
<div data-type="label"
                                data-device="LaCrosse_SZ" data-get="humidity" data-unit="%%0A" data-fix="1"
                                data-limits='[0,40,65]' data-colors='["skyblue","green","orangered"]' class="big">
</div>
</div>
</div>

<div class="container row">
<div class="container top-space">
<div class="col-2-3 left">
<div data-type="thermostat" data-device="HM_SZ_Heizung_Clima" data-valve="ValvePosition" data-step="0.5" data-mode="controlMode" data-off="controlManu off" data-boost="controlMode boost" data-touch-height="large" data-touch-width="large" class="large"/>
</div>

<div class="col-1-3 top-space right">
<!--
<div data-type="circlemenu" class="circlemenu">
<ul>
<li><div data-type="symbol" data-device="HM_SZ_Heizung_Clima" data-get="controlMode" data-states='["auto","manual","boost"]' data-icons='["oa-sani_heating_automatic","oa-sani_heating_manual", "oa-sani_heating_boost"]' data-colors='["green","yellow","red"]' data-background-colors='["green","yellow","red"]'></div></li>
<li><div data-type="push" data-device="HM_SZ_Heizung_Clima" data-set="controlMode" data-set-on="boost" data-icon="oa-sani_heating_boost" data-off-background-color="red"></div></li>
<li><div data-type="push" data-device="HM_SZ_Heizung_Clima" data-set="controlMode" data-set-on="auto" data-icon="oa-sani_heating_automatic" data-off-background-color="green"></div></li>
<li><div data-type="push" data-device="HM_SZ_Heizung_Clima" data-set="controlMode" data-set-on="manual" data-icon="oa-sani_heating_manual" data-off-background-color="yellow"></div></li>
</ul>
</div>
-->
</div>
</div>
</div>
</li>

<!-- ****************************************** -->
<!-- Küche -->
<!-- ****************************************** -->
<li data-row="8" data-col="1" data-sizex="4" data-sizey="4" class="semitransparent">
<header>
<font size="+1">Küche</font>
</header>
<div class="container row top-space">
<div class="col-1-2 left">
<div data-type="label"
                                data-device="LaCrosse_KU" data-get="temperature" data-unit="%B0C%0A" data-fix="1"
                                data-limits='[-20,20,25]' data-colors='["skyblue","green","orangered"]' class="big">
</div>
</div>
<div class="col-1-2 right">
<div data-type="label"
                                data-device="LaCrosse_KU" data-get="humidity" data-unit="%%0A" data-fix="1"
                                data-limits='[0,40,65]' data-colors='["skyblue","green","orangered"]' class="big">
</div>
</div>
</div>

<div class="container row">
<div class="container top-space">
<div class="col-2-3 left">
<div data-type="thermostat" data-device="HM_KU_Heizung_Clima" data-valve="ValvePosition" data-step="0.5" data-mode="controlMode" data-off="controlManu off" data-boost="controlMode boost" data-touch-height="large" data-touch-width="large" class="large"/>
</div>
<div class="col-1-3 top-space right">
<div data-type="circlemenu" class="circlemenu">
<ul>
<li><div data-type="symbol" data-device="HM_KU_Heizung_Clima" data-get="controlMode" data-states='["auto","manual","boost"]' data-icons='["oa-sani_heating_automatic","oa-sani_heating_manual", "oa-sani_heating_boost"]' data-colors='["green","yellow","red"]' data-background-colors='["green","yellow","red"]'></div></li>
<li><div data-type="push" data-device="HM_KU_Heizung_Clima" data-set="controlMode" data-set-on="boost" data-icon="oa-sani_heating_boost" data-off-background-color="red"></div></li>
<li><div data-type="push" data-device="HM_KU_Heizung_Clima" data-set="controlMode" data-set-on="auto" data-icon="oa-sani_heating_automatic" data-off-background-color="green"></div></li>
<li><div data-type="push" data-device="HM_KU_Heizung_Clima" data-set="controlMode" data-set-on="manual" data-icon="oa-sani_heating_manual" data-off-background-color="yellow"></div></li>
</ul>
</div>
</div>
</div>
</div>
</li>

<!-- ****************************************** -->
<!-- Bad -->
<!-- ****************************************** -->
<li data-row="8" data-col="5" data-sizex="4" data-sizey="4" class="semitransparent">
<header>
<font size="+1">Bad</font>
</header>
<div class="container row top-space">
<div class="col-1-2 left">
<div data-type="label"
                                data-device="LaCrosse_BA" data-get="temperature" data-unit="%B0C%0A" data-fix="1"
                                data-limits='[-20,20,25]' data-colors='["skyblue","green","orangered"]' class="big">
</div>
</div>
<div class="col-1-2 right">
<div data-type="label"
                                data-device="LaCrosse_BA" data-get="humidity" data-unit="%%0A" data-fix="1"
                                data-limits='[0,40,65]' data-colors='["skyblue","green","orangered"]' class="big">
</div>
</div>
</div>

<div class="container row">
<div class="container top-space">
<div class="col-2-3 left">
<div data-type="thermostat" data-device="HM_BA_Heizung_Clima" data-valve="ValvePosition" data-step="0.5" data-mode="controlMode" data-off="controlManu off" data-boost="controlMode boost" data-touch-height="large" data-touch-width="large" class="large"/>
</div>
<div class="col-1-3 top-space right">
<div data-type="circlemenu" class="circlemenu">
<ul>
<li><div data-type="symbol" data-device="HM_BA_Heizung_Clima" data-get="controlMode" data-states='["auto","manual","boost"]' data-icons='["oa-sani_heating_automatic","oa-sani_heating_manual", "oa-sani_heating_boost"]' data-colors='["green","yellow","red"]' data-background-colors='["green","yellow","red"]'></div></li>
<li><div data-type="push" data-device="HM_BA_Heizung_Clima" data-set="controlMode" data-set-on="boost" data-icon="oa-sani_heating_boost" data-off-background-color="red"></div></li>
<li><div data-type="push" data-device="HM_BA_Heizung_Clima" data-set="controlMode" data-set-on="auto" data-icon="oa-sani_heating_automatic" data-off-background-color="green"></div></li>
<li><div data-type="push" data-device="HM_BA_Heizung_Clima" data-set="controlMode" data-set-on="manual" data-icon="oa-sani_heating_manual" data-off-background-color="yellow"></div></li>
</ul>
</div>
</div>
</div>
</div>
</li>

<!-- ****************************************** -->
<!-- Wetter -->
<!-- ****************************************** -->
<li data-row="8" data-col="9" data-sizex="4" data-sizey="4" class="semitransparent">
<header>
<font size="+1">Wetter</font>
</header>

<div class="container row top-space">
<div class="col-1-2 left">
<div data-type="label"
                                data-device="LaCrosse_BK" data-get="temperature" data-unit="%B0C%0A" data-fix="1"
                                data-limits='[-20,20,25]' data-colors='["skyblue","green","orangered"]' class="big">
</div>
</div>
<div class="col-1-2 right">
<div data-type="label"
                                data-device="LaCrosse_BK" data-get="humidity" data-unit="%%0A" data-fix="1"
                                data-limits='[0,40,65]' data-colors='["skyblue","green","orangered"]' class="big">
</div>
</div>
</div>
<div class="container row">
<div class="container top-space">
<div data-type="weather" data-device="AgroWeather" data-get="fc0_weatherDay" class="tall"/>
</div>
</div>
</li>

<!-- ****************************************** -->
<!-- Steckdosen -->
<!-- ****************************************** -->
<li data-row="14" data-col="1" data-sizex="12" data-sizey="4" class="semitransparent">
<div class="hbox items-space-around">
<div class="vbox">
<div data-type="switch" class="big" data-device="Switch_Licht" data-get-on="on|On" data-set-on="on" data-get-off="off"/>
<div class="thin">Wohnzimmer</div>
</div>
<div class="vbox">
<div data-type="switch" class="large" data-device="sonoff0" data-get-on="on|On" data-set-on="on" data-get-off="off"/>
<div class="thin">Rainbow</div>
</div>
<div class="vbox">
<div data-type="switch" class="large" data-device="sonoff1" data-get-on="on|On" data-set-on="on" data-get-off="off"/>
<div class="thin">Good Karma</div>
</div>
<div class="vbox">
<div data-type="switch" class="large" data-device="sonoff4" data-get-on="on" data-get-off="off"/>
<div class="thin">Hell Sinki</div>
</div>
<div class="vbox">
<div data-type="switch" class="large" data-device="sonoff5" data-get-on="on" data-get-off="off"/>
<div class="thin">Flaschen</div>
</div>
<div class="vbox">
<div data-type="switch" class="large" data-device="sonoff8" data-get-on="on" data-get-off="off"/>
<div class="thin">Kugel</div>
</div>
<div class="vbox">
<div data-type="switch" class="big" data-device="sonoff2" data-get-on="on" data-get-off="off"/>
<div class="thin">Kinderzimmer</div>
</div>
<!--
<div class="vbox">
<div data-type="switch" class="large" data-device="HM_WZ_Steckdose_Sw" data-get-on="on" data-get-off="off" data-icon="fa-leaf"></div>
<div class="thin">Pflanzen</div>
</div>
-->
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
Raspberry Pi 3 | miniCUL 433MHz | nanoCUL 868 MHz | nanoCUL 433 MHz | MySensors WLAN Gateway | LaCrosse WLAN Gateway | SignalESP 433 MHz | SignalESP 868 MHz | HM-MOD-UART WLAN Gateway | IR - 360 Grad WLAN Gateway

setstate

Self-Closing Tags sollten bei Elementen mit data-type vermieden werden.

also "></div>" anstatt " />"

gloob

Und das führ dazu, dass seit heute alles verschoben ist?  :o
Raspberry Pi 3 | miniCUL 433MHz | nanoCUL 868 MHz | nanoCUL 433 MHz | MySensors WLAN Gateway | LaCrosse WLAN Gateway | SignalESP 433 MHz | SignalESP 868 MHz | HM-MOD-UART WLAN Gateway | IR - 360 Grad WLAN Gateway

Fixel2012

Fhem 5.8 auf Raspi 3, HMLAN und 868MHz CUL mit einigen Komponenten, Z-Wave Rollladenaktoren, Tablet UI, 433 MHz CUL mit Baumarktsteckdosen und Temp Sensoren, Amazon Echo, Echo Dot, 2x SONOS  play1, 1x SONOS Connect AMP,  presence, HUE, Lightify

setstate

#6
Ich schreibe nur, was mir auffällt ...

nächstes: rows werden jetzt gleichmässig in den verfügbaren Platz verteilt, nicht mehr jede nur mit dem minimalen Platzbedarf.

Jede Reihe bekommt 50% der verfügbaren Höhe

<div>
  <div class="row"></div>
  <div class="row"></div>
</div>


Bei dir soll der Text über dem Thermostat nicht 50% sein, dann muss man die Höhe angeben

z.B.10% -> "row-10"

<div>
  <div class="row-10"></div>
  <div class="row"></div>
</div>

gloob

Sind all diese Änderungen und Anforderungen denn irgendwo nieder geschrieben?
Raspberry Pi 3 | miniCUL 433MHz | nanoCUL 868 MHz | nanoCUL 433 MHz | MySensors WLAN Gateway | LaCrosse WLAN Gateway | SignalESP 433 MHz | SignalESP 868 MHz | HM-MOD-UART WLAN Gateway | IR - 360 Grad WLAN Gateway

fornax76

Ich hatte heute ebenfalls Probleme.
Bei mir waren die <header> nicht mehr oben, sondern in der Kachel, links neben dem Content.
Hab leider kein Screenshot gemacht.

Aufgefallen ist mir, dass es nur dann auftritt, wenn das erste <div die class "vbox" hat.
Mein Workaround ist jetzt erst mal, dass ich ein übergeordnetes div angelegt habe.
Damit verschwindet das Problem

Alt:

<li ...>
<header>text</header>
         <div class="vbox">
                ...
         </div>
</li>


Neu:

<li ...>
<header>text</header>
         <div class="">
                <div class="vbox">
                ...
                </div>
         </div>
</li>

Fixel2012

Zitat von: fornax76 am 03 September 2017, 16:58:21
Ich hatte heute ebenfalls Probleme.
Bei mir waren die <header> nicht mehr oben, sondern in der Kachel, links neben dem Content.
Hab leider kein Screenshot gemacht.

Aufgefallen ist mir, dass es nur dann auftritt, wenn das erste <div die class "vbox" hat.
Mein Workaround ist jetzt erst mal, dass ich ein übergeordnetes div angelegt habe.
Damit verschwindet das Problem

Alt:

<li ...>
<header>text</header>
         <div class="vbox">
                ...
         </div>
</li>


Neu:

<li ...>
<header>text</header>
         <div class="">
                <div class="vbox">
                ...
                </div>
         </div>
</li>

interessant, sah bei mir genauso wie von dir beschrieben aus.

Mal schauen, ob es hilft.
Fhem 5.8 auf Raspi 3, HMLAN und 868MHz CUL mit einigen Komponenten, Z-Wave Rollladenaktoren, Tablet UI, 433 MHz CUL mit Baumarktsteckdosen und Temp Sensoren, Amazon Echo, Echo Dot, 2x SONOS  play1, 1x SONOS Connect AMP,  presence, HUE, Lightify

setstate

Zitat von: fornax76 am 03 September 2017, 16:58:21
Ich hatte heute ebenfalls Probleme.
Bei mir waren die <header> nicht mehr oben, sondern in der Kachel, links neben dem Content.
Hab leider kein Screenshot gemacht.

Aufgefallen ist mir, dass es nur dann auftritt, wenn das erste <div die class "vbox" hat.
Mein Workaround ist jetzt erst mal, dass ich ein übergeordnetes div angelegt habe.
Damit verschwindet das Problem

Alt:

<li ...>
<header>text</header>
         <div class="vbox">
                ...
         </div>
</li>


Neu:

<li ...>
<header>text</header>
         <div class="">
                <div class="vbox">
                ...
                </div>
         </div>
</li>


Das war tatsächlich ein Bug, der aber heute nicht mehr auftreten dürfte

fornax76

Hallo setstate,
danke für die Info.
Ich probiere es gleich mal.


Fixel2012

Zitat von: setstate am 03 September 2017, 17:07:19
Das war tatsächlich ein Bug, der aber heute nicht mehr auftreten dürfte

Was heißt das konkret? Wird es da demnächst nochmals ein Update geben? Oder sollte ich auf das Workaround von fornax67 umsteigen?
Fhem 5.8 auf Raspi 3, HMLAN und 868MHz CUL mit einigen Komponenten, Z-Wave Rollladenaktoren, Tablet UI, 433 MHz CUL mit Baumarktsteckdosen und Temp Sensoren, Amazon Echo, Echo Dot, 2x SONOS  play1, 1x SONOS Connect AMP,  presence, HUE, Lightify

setstate

Die Version, die keinen Workaround braucht, sollte oben sein.

gloob

Zitat von: gloob am 03 September 2017, 16:52:44
Sind all diese Änderungen und Anforderungen denn irgendwo nieder geschrieben?

Gibt es hierfür noch eine Antwort?  ;)
Raspberry Pi 3 | miniCUL 433MHz | nanoCUL 868 MHz | nanoCUL 433 MHz | MySensors WLAN Gateway | LaCrosse WLAN Gateway | SignalESP 433 MHz | SignalESP 868 MHz | HM-MOD-UART WLAN Gateway | IR - 360 Grad WLAN Gateway

Fixel2012

Zitat von: setstate am 04 September 2017, 09:15:16
Die Version, die keinen Workaround braucht, sollte oben sein.

sorry, aber verstehe nicht was du meinst und wo es sein soll.  :o
Fhem 5.8 auf Raspi 3, HMLAN und 868MHz CUL mit einigen Komponenten, Z-Wave Rollladenaktoren, Tablet UI, 433 MHz CUL mit Baumarktsteckdosen und Temp Sensoren, Amazon Echo, Echo Dot, 2x SONOS  play1, 1x SONOS Connect AMP,  presence, HUE, Lightify

setstate

Nein, gibt es natürlich nicht. Bekomme ich oft erst nachher durch anderen mit, was manche minimalen Änderung an unerwarteten Stellen bewirken.

Ich verfolge immer noch das Ziel, das HTML und die CSS Klassen so simple und minimal wie möglich zu halten. Ohne unnötige explizite Wrapper Container und ohne riesige class Kaskaden. Das Ergebnis sollte aber trotzdem den Erwartungen entsprechen: den vorhanden Platz sinnvoll nutzt und einfach auszurichten sein. Dabei knackt und kracht es bestimmt immer mal wieder oder geht kurzzeitig in die falsche Richtung. Aber ist ja alles zum Glück nicht in Stein gemeißelt ...

setstate

Zitat von: Fixel2012 am 04 September 2017, 09:58:27
sorry, aber verstehe nicht was du meinst und wo es sein soll.  :o

Wenn man jetzt ein Update macht oder gestern Abend gemacht hat, braucht man den Workaround nicht.

Gegenteiliges bitte mit konkretem Beispiel beschreiben

Fixel2012

Zitat von: setstate am 04 September 2017, 10:05:05
Wenn man jetzt ein Update macht oder gestern Abend gemacht hat, braucht man den Workaround nicht.

Gegenteiliges bitte mit konkretem Beispiel beschreiben

Achso, gut, wusste nicht das das schon im offiziellen Update gefixt ist.

Danke dir!
Fhem 5.8 auf Raspi 3, HMLAN und 868MHz CUL mit einigen Komponenten, Z-Wave Rollladenaktoren, Tablet UI, 433 MHz CUL mit Baumarktsteckdosen und Temp Sensoren, Amazon Echo, Echo Dot, 2x SONOS  play1, 1x SONOS Connect AMP,  presence, HUE, Lightify

Standarduser

Zitat von: gloob am 04 September 2017, 09:28:43
Gibt es hierfür noch eine Antwort?  ;)

In der Regel ist es so, dass die Benutzer solche Sachen im Wiki dokumentieren. Das hinkt leider manchmal hinterher, gerade wenn es viele Änderungen gibt.
Aber du darfst dich da gerne dran beteiligen.

setstate

Zitat von: Standarduser am 04 September 2017, 11:46:39
In der Regel ist es so, dass die Benutzer solche Sachen im Wiki dokumentieren. Das hinkt leider manchmal hinterher, gerade wenn es viele Änderungen gibt.
Aber du darfst dich da gerne dran beteiligen.

Diese umgedrehte Art und Weise der Dokumentation ist zwar ziemlich ungewöhnlich, aber kommt mir sehr zu Gute und ich bedanke mich innigst dafür  :)

fhainz

Nur ob die user da besser durchblicken als der autor lass ich mal so stehen :)

Fixel2012

Zitat von: setstate am 04 September 2017, 10:05:05
Wenn man jetzt ein Update macht oder gestern Abend gemacht hat, braucht man den Workaround nicht.

Gegenteiliges bitte mit konkretem Beispiel beschreiben

Die vboxen funktionieren nun wieder ordnungsgemäß, Danke!

Allerdings kann ich von der Rechten vbox (siehe code weiter unten) nur noch das oberste Icon (kamera) clicken. Alle anderen sind nicht mehr click-bar  :o

Die Linke vbox, die vom code eigentlich ähnlich bzw. fast gleich ist, ist bei allen icon click-bar.

Sehr komisch...

Auch Browser Cache leeren hat bei der Sache nichts geholfen.

Hat jemand ähnliche Probleme?

<!-- ============= Menü Links  ============= -->
<!-- ======================================= -->


<li data-row="1" data-col="1" data-sizex="1" data-sizey="10" class="semitransparent3d">
<header  class="semitransparentheader">Menü</header>

<div class="vbox">


<div data-type="pagebutton" data-url="#content_main.html" data-load="#content1" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern="(.*/||.*index.html||.*#content_main.html)" data-icon="fa-home" class="prefetch big shadow"></div>
<div data-type="label" class="small shadow">Home</div>
<div data-type="pagebutton" data-url="#content_Sonos.html" data-load="#content2" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern=".*#content_Sonos.html" data-icon="fa-music" class="big top-space shadow"></div>
<div data-type="label" class="small shadow">Sonos</div>
<div data-type="pagebutton" data-url="#content_wecker.html"    data-load="#content3" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern=".*#content_wecker.html" data-icon="fa-clock-o" class="big top-space shadow"></div>
<div data-type="label" class="small shadow">Wecker</div>
<div data-type="pagebutton" data-url="#content_felix.zimmer.html"     data-load="#content4" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern=".*#content_felix.zimmer.html" data-icon="oa-scene_livingroom" class="big top-space shadow"></div>
<div data-type="label" class="small shadow">Felix Zimmer</div>
<div data-type="pagebutton" data-url="#content_zentrale.html"     data-load="#content5" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern=".*#content_zentrale.html" data-icon="fa-cogs" class="big top-space shadow"></div>
<div data-type="label" class="small shadow">Zentrale</div>

</div>
</li>



<!-- ============= Menü Rechts  ============= -->
<!-- ======================================= -->

<li data-row="1" data-col="14" data-sizex="1" data-sizey="10" class="semitransparent3d">
<header  class="semitransparentheader">Menü</header>
<div class="vbox">
<div data-type="pagebutton" data-url="#content_kameras.html"      data-load="#content6" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern=".*#content_kameras.html" data-icon="oa-it_camera" class="big  shadow"></div>
<div data-type="label" class="small shadow">Kamera</div>
<div data-type="pagebutton" data-url="#content_rolllaeden.html"  data-load="#content7" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern=".*#content_rolllaeden.html" data-icon="oa-fts_shutter_60" class="prefetch big top-space shadow"></div>
<div data-type="label" class="small shadow">Rollläden</div>
<div data-type="pagebutton" data-url="#content_telefon.html"     data-load="#content8" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern=".*#content_telefon.html" data-icon="fa-phone" class="big top-space shadow"></div>
<div data-type="label" class="small shadow">Anrufe</div>
<div data-type="pagebutton" data-url="#content_tanken.html"       data-load="#content9" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern=".*#content_tanken.html" data-icon="fa-car" class="big top-space shadow"></div>
<div data-type="label" class="small shadow">Spritpreise</div>
<div data-type="pagebutton" data-url="#content_garten.html"    data-load="#content10" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern=".*#content_garten.html" data-icon="oa-scene_garden" class="big top-space shadow"></div>
<div data-type="label" class="small shadow">Garten</div>

</div>
</li>
Fhem 5.8 auf Raspi 3, HMLAN und 868MHz CUL mit einigen Komponenten, Z-Wave Rollladenaktoren, Tablet UI, 433 MHz CUL mit Baumarktsteckdosen und Temp Sensoren, Amazon Echo, Echo Dot, 2x SONOS  play1, 1x SONOS Connect AMP,  presence, HUE, Lightify

gloob

#23
Also ich hab jetzt auch alle
/> durch ></div> ersetzt.

nachdem ich die Rowe angepasst habe sieht die Formatierung auf der ersten Seite auch wieder gut aus.

Rufe ich allerdings die 2. oder 3. Unterseite auf über das Menu. Sind die Gridster Elemente alle nach unten verschoben.

SubPage2
<html>
<title>FHEM Sub2</title>
<head>
</head>
<body>
<div class="page" id="sub2">
<div class="gridster">
<ul>
<!-- ****************************************** -->
<!-- Sonos 1 -->
<!-- ****************************************** -->
<li data-row="1" data-col="1" data-sizex="3" data-sizey="4">
<header>
<font size="+1">Sonos Wohnzimmer</font>
</header>
<div data-type="image" data-device="Sonos_Wohnzimmer" data-get="currentAlbumArtURL" data-size="65%" class="top-space"></div>
</li>

<li data-row="5" data-col="1" data-sizex="3" data-sizey="3">
<div class="vbox">
<div data-type="label" class="bigger thin" data-device="Sonos_Wohnzimmer" data-get="transportState"></div>
<div data-type="label" class="thin" data-device="Sonos_Wohnzimmer" data-get="infoSummarize1"></div>
</div>
</li>   

<li data-row="8" data-col="1" data-sizex="3" data-sizey="4">
<div class="vbox">
<div class="hbox">
<div data-type="push" data-device="Sonos_Wohnzimmer" data-icon="fa-step-backward" data-set-on="Previous" class="normal"></div>
<div data-type="push" data-device="Sonos_Wohnzimmer" data-icon="fa-stop" data-set-on="Stop" class="normal"></div>
<div data-type="push" data-device="Sonos_Wohnzimmer" data-icon="fa-play" data-set-on="Play" class="normal"></div>
<div data-type="push" data-device="Sonos_Wohnzimmer" data-icon="fa-step-forward" data-set-on="Next" class="normal"></div>
</div> 
<div class="hbox">
<div data-type="volume" data-device="Sonos_Wohnzimmer" data-get="Volume" data-set="Volume" data-min="0" data-max="30" data-tickstep="10" data-unit="%" class="top-space normal"></div>
</div>
</div>
</li> 

<li data-row="12" data-col="1" data-sizex="3" data-sizey="3">
<div class="vbox">
<div class="hbox items-space-around">
<div data-type="select" data-device="Sonos_Wohnzimmer" data-items='["Schmutzki"]' data-set="startFavourite" class="w3x"></div>
<div>Playlisten</div>
</div>
<div class="hbox items-space-around">
<div data-type="select" data-device="Sonos_Wohnzimmer" data-items='["HR3","JUMP","YOU_FM","House"]' data-set="startFavourite" class="w3x"></div> 
<div>Radio</div>
</div>
</div>
</li>

<!-- ****************************************** -->
<!-- Sonos 2 -->
<!-- ****************************************** -->
<li data-row="1" data-col="4" data-sizex="3" data-sizey="4">
<header>
<font size="+1">Sonos Küche</font>
</header>
<div data-type="image" data-device="Sonos_Kueche" data-get="currentAlbumArtURL" data-size="65%" class="top-space"></div>
</li>

<li data-row="5" data-col="4" data-sizex="3" data-sizey="3">
<div class="vbox">
<div data-type="label" class="bigger thin" data-device="Sonos_Kueche" data-get="transportState"></div>
<div data-type="label" class="thin" data-device="Sonos_Kueche" data-get="infoSummarize1"></div>
</div>
</li>   

<li data-row="8" data-col="4" data-sizex="3" data-sizey="4">
<div class="vbox">
<div class="hbox">
<div data-type="push" data-device="Sonos_Kueche" data-icon="fa-step-backward" data-set-on="Previous" class="normal"></div>
<div data-type="push" data-device="Sonos_Kueche" data-icon="fa-stop" data-set-on="Stop" class="normal"></div>
<div data-type="push" data-device="Sonos_Kueche" data-icon="fa-play" data-set-on="Play" class="normal"></div>
<div data-type="push" data-device="Sonos_Kueche" data-icon="fa-step-forward" data-set-on="Next" class="normal"></div>
</div> 
<div class="hbox">
<div data-type="volume" data-device="Sonos_Kueche" data-get="Volume" data-set="Volume" data-min="0" data-max="30" data-tickstep="10" data-unit="%" class="top-space normal"></div>
</div>
</div>
</li> 

<li data-row="12" data-col="4" data-sizex="3" data-sizey="3">
<div class="vbox">
<div class="hbox items-space-around">
<div data-type="select" data-device="Sonos_Kueche" data-items='["Schmutzki"]' data-set="startFavourite" class="w3x"></div>
<div>Playlisten</div>
</div>
<div class="hbox items-space-around">
<div data-type="select" data-device="Sonos_Kueche" data-items='["HR3","JUMP","YOU_FM","House"]' data-set="startFavourite" class="w3x"></div> 
<div>Radio</div>
</div>
</div>
</li>

<!-- ****************************************** -->
<!-- Sonos 3 -->
<!-- ****************************************** -->
<li data-row="1" data-col="7" data-sizex="3" data-sizey="4">
<header>
<font size="+1">Sonos Keno</font>
</header>
<div data-type="image" data-device="Sonos_Kinderzimmer" data-get="currentAlbumArtURL" data-size="65%" class="top-space"></div>
</li>

<li data-row="5" data-col="7" data-sizex="3" data-sizey="3">
<div class="vbox">
<div data-type="label" class="bigger thin" data-device="Sonos_Kinderzimmer" data-get="transportState"></div>
<div data-type="label" class="thin" data-device="Sonos_Kinderzimmer" data-get="infoSummarize1"></div>
</div>
</li>   

<li data-row="8" data-col="7" data-sizex="3" data-sizey="4">
<div class="vbox">
<div class="hbox">
<div data-type="push" data-device="Sonos_Kinderzimmer" data-icon="fa-step-backward" data-set-on="Previous" class="normal"></div>
<div data-type="push" data-device="Sonos_Kinderzimmer" data-icon="fa-stop" data-set-on="Stop" class="normal"></div>
<div data-type="push" data-device="Sonos_Kinderzimmer" data-icon="fa-play" data-set-on="Play" class="normal"></div>
<div data-type="push" data-device="Sonos_Kinderzimmer" data-icon="fa-step-forward" data-set-on="Next" class="normal"></div>
</div> 
<div class="hbox">
<div data-type="volume" data-device="Sonos_Kinderzimmer" data-get="Volume" data-set="Volume" data-min="0" data-max="30" data-tickstep="10" data-unit="%" class="top-space normal"></div>
</div>
</div>
</li> 

<li data-row="12" data-col="7" data-sizex="3" data-sizey="3">
<div class="vbox">
<div class="hbox items-space-around">
<div data-type="select" data-device="Sonos_Kinderzimmer" data-items='["Schmutzki"]' data-set="startFavourite" class="w3x"></div>
<div>Playlisten</div>
</div>
<div class="hbox items-space-around">
<div data-type="select" data-device="Sonos_Kinderzimmer" data-items='["HR3","JUMP","YOU_FM","House"]' data-set="startFavourite" class="w3x"></div> 
<div>Radio</div>
</div>
</div>
</li>

<!-- ****************************************** -->
<!-- Sonos 4 -->
<!-- ****************************************** -->
<li data-row="1" data-col="10" data-sizex="3" data-sizey="4">
<header>
<font size="+1">Sonos Balkon</font>
</header>
<div data-type="image" data-device="Sonos_Balkon" data-get="currentAlbumArtURL" data-size="65%" class="top-space"></div>
</li>

<li data-row="5" data-col="10" data-sizex="3" data-sizey="3">
<div class="vbox">
<div data-type="label" class="bigger thin" data-device="Sonos_Balkon" data-get="transportState"></div>
<div data-type="label" class="thin" data-device="Sonos_Balkon" data-get="infoSummarize1"></div>
</div>
</li>   

<li data-row="8" data-col="10" data-sizex="3" data-sizey="4">
<div class="vbox">
<div class="hbox">
<div data-type="push" data-device="Sonos_Balkon" data-icon="fa-step-backward" data-set-on="Previous" class="normal"></div>
<div data-type="push" data-device="Sonos_Balkon" data-icon="fa-stop" data-set-on="Stop" class="normal"></div>
<div data-type="push" data-device="Sonos_Balkon" data-icon="fa-play" data-set-on="Play" class="normal"></div>
<div data-type="push" data-device="Sonos_Balkon" data-icon="fa-step-forward" data-set-on="Next" class="normal"></div>
</div> 
<div class="hbox">
<div data-type="volume" data-device="Sonos_Balkon" data-get="Volume" data-set="Volume" data-min="0" data-max="30" data-tickstep="10" data-unit="%" class="top-space normal"></div>
</div>
</div>
</li> 

<li data-row="12" data-col="10" data-sizex="3" data-sizey="3">
<div class="vbox">
<div class="hbox items-space-around">
<div data-type="select" data-device="Sonos_Balkon" data-items='["Schmutzki"]' data-set="startFavourite" class="w3x"></div>
<div>Playlisten</div>
</div>
<div class="hbox items-space-around">
<div data-type="select" data-device="Sonos_Balkon" data-items='["HR3","JUMP","YOU_FM","House"]' data-set="startFavourite" class="w3x"></div> 
<div>Radio</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>





Gibt es denn irgendwo ein aktuelles Beispiel was funktioniert, wo man sich mal die "aktuelle" Struktur mit PageTab angucken kann?
Die Demo bei Git ist ja auch schon 2 Jahre alt.

Und sollte man eher PageTab oder PageButton nutzen?
Raspberry Pi 3 | miniCUL 433MHz | nanoCUL 868 MHz | nanoCUL 433 MHz | MySensors WLAN Gateway | LaCrosse WLAN Gateway | SignalESP 433 MHz | SignalESP 868 MHz | HM-MOD-UART WLAN Gateway | IR - 360 Grad WLAN Gateway

oeiber

Hallo,

bei mir sieht die Seite auch etwas verschoben aus. Ich verwende section:


<main id="panel" class="">
        <div class="page" id="wohnzimmer">
            <section>
                <div class="large col-1-2 left-align">Fernseher und Soundbar</div>
                <div class="col-1-4"></div>
                <div data-type="switch" data-device="STD01" class="col-1-4 small center-align"></div>
            </section>
</main>



Danke schon mal!


setstate

die <section> Parameter habe ich jetzt etwas aufgeräumt, sodass es jetzt egal welche Größe immer passt


<body>
    <main id="panel" class="">
        <div class="">
            <section>
                <div class="col-2">&nbsp;</div>
                <div class="col-40 left-align">Normal Size</div>
                <div class="col-55 right-align" data-type="switch" data-device="dummy1"></div>
            </section>
            <section>
                <div class="col-2">&nbsp;</div>
                <div class="col-40 left-align">Normal Size</div>
                <div class="col-55 right-align" data-type="switch" data-device="dummy1"></div>
            </section>
        </div>
        <div class="xl">
            <section>
                <div class="col-2">&nbsp;</div>
                <div class="col-40 left-align">Big Size</div>
                <div class="col-55 right-align" data-type="switch" data-device="dummy1"></div>
            </section>
            <section>
                <div class="col-2">&nbsp;</div>
                <div class="col-40 left-align">Big Size</div>
                <div class="col-55 right-align" data-type="switch" data-device="dummy1"></div>
            </section>
            <div class="xxl">
                <section>
                    <div class="col-2">&nbsp;</div>
                    <div class="col-40 left-align">Bigger Size</div>
                    <div class="col-55 right-align" data-type="switch" data-device="dummy1"></div>
                </section>
                <section>
                    <div class="col-2">&nbsp;</div>
                    <div class="col-40 left-align">Bigger Size</div>
                    <div class="col-55 right-align" data-type="switch" data-device="dummy1"></div>
                </section>
            </div>
        </div>
    </main>
</body>

Fixel2012

@All

Mein Problem aus #22 hat sich nach dem neusten Update erledigt!

Ich kann nun alle meine Menü Punkte wieder aufrufen.

Danke @setstate!
Fhem 5.8 auf Raspi 3, HMLAN und 868MHz CUL mit einigen Komponenten, Z-Wave Rollladenaktoren, Tablet UI, 433 MHz CUL mit Baumarktsteckdosen und Temp Sensoren, Amazon Echo, Echo Dot, 2x SONOS  play1, 1x SONOS Connect AMP,  presence, HUE, Lightify

oeiber

Hallo setstate,

funktioniert soweit wieder bei mir, danke!
Allerdings habe ich noch ein Problem:

Ich versende leere Spalten als Platzhalter, damit alles schön übereinander ist:
<div class="col-1-4"></div>

Das funktioniert aber seit dem Update leider nicht mehr. Die leeren Spalten werden ausgeblendet.

Hast du eine Idee, wie man das lösen könnte?

Danke schon mal!

setstate

#28
Die Spalte muss mindestens ein Zeichen Inhalt haben. Idealerweise ein Leerzeichen.


<div class="col-1-4">&nbsp;</div>


Ich müsste mal probieren, ob min-height: 1px; auch funktioniert. Dann könnte man sich den Workaround mit dem Leerzeichen sparen.

setstate

Klappt jetzt auch wieder ohne Extra &nbsp;

min-height: 1px; in CSS File hilft

<div class="col-2"></div>

oeiber

Zitat von: setstate am 11 September 2017, 18:18:16
Klappt jetzt auch wieder ohne Extra &nbsp;

min-height: 1px; in CSS File hilft

<div class="col-2"></div>
funktioniert, danke!

mir ist auch noch aufgefallen, dass das select widget etwas komisch aussieht (siehe bild).

gruss

olli

setstate

In welchem Context, also welche DIVs hast du drum herum?

1907

Ich habe auch noch vermutlich einen kleinen Bug seit dem Update gefunden.
Wenn man das Symbolwidget mit dem Attribut "compressed" benutzt werden die Zahlen der Warnmeldung ("data-get-warn") verschoben zu dem roten Kreis angezeigt.
Ohne das Attribut compressed passt es.

Siehe Screenshot

setstate

Ich suche gerne nach einer Lösung, brauche aber dazu etwas Code von euch. Am besten eine minimale Demo, um den Fehler reproduzieren zu können.

oeiber

Zitat von: setstate am 11 September 2017, 21:18:56
In welchem Context, also welche DIVs hast du drum herum?
hab ,,section" drum herum.

setstate


1907

Zitat von: setstate am 12 September 2017, 20:59:26
Ich suche gerne nach einer Lösung, brauche aber dazu etwas Code von euch. Am besten eine minimale Demo, um den Fehler reproduzieren zu können.

Entschulidigung. Hier natürlich der Code:

header>Klima Keller</header>
     <div data-type="label"
       data-device="Keller_Temp"
       data-get="temperature"
       data-unit="°C"
       data-limits='[5,10]'
       data-colors='["red","white"]'
       class="cell tall inline top-space">
     </div>
     <div data-type="label"
       data-device="Keller_Temp"
       data-get="humidity"
       data-unit="%"
       data-limits='[10,70]'
       data-colors='["white","red"]'
       class="cell tall inline top-space">
     </div>
     <div data-type="label"
       data-device="Keller_Temp"
       data-get="dewpoint"
       data-unit="°C"
       class="cell big inline top-space">
     </div>
     <div data-type="symbol"
       data-device="Keller_Temp"
       data-get="lueften_erlaubt"
       data-warn="dewpoint_differenz_aussen"
       data-icons='["fa-blink oa-fts_window_2w_open_lr","oa-fts_window_2w_open_lr"]'
       data-states='["off","on"]'
       data-colors='["red","green"]'
       class="cell big inline compressed">
     </div>


Wie gesagt, wenn ich das Attribut compressed weg lasse, dann wird wieder alles korrekt angezeigt. Ich benötige dieses, da sonst das Wigdget zu viel Platz braucht und ein Zeilenumbruch erfolgt.

Viele Grüße

Amenophis86

#37
Ich habe auch ein Problem, nachdem ich heute das Update gemacht habe und bekomme es trotz mehrfachem Probieren einfach nicht hin. Ich schätze, dass es irgendwas mit col-1-2 zu tun habe. Aber raffe es nicht. Sry

Im Anhang ein Bild, wie es aussieht und wie es ausgesehen hat. Und hier der aktuelle Code:
<!DOCTYPE html>
<html>
<head></head>
<body>
    <div class="page" id="content1">
<section class="abschnitt">
<div class="large col-1-2 center-align">Anwesenheit</div>
</section>
<section>
            <div class="large col-1-2 center-align">Anja</div>
<div data-template="template/template_anwesenheit.html" data-parameter='{"par01":"rr_Anja"}' class="col-1-2 right-align"></div>
</section>
<section>
<div class="large col-1-2 center-align">Etienne</div>
<div data-template="template/template_anwesenheit.html" data-parameter='{"par01":"rr_Etienne"}' class="col-1-2 right-align"></div>
</section>
<section>
<div class="large col-1-2 center-align">Jutta</div>
<div data-type="switch"
data-device="rg_Jutta"
data-set-on="home"
data-set-off="none"
data-states='["home","absent","none"]'
data-icons='["oa-status_available","oa-status_away_1","oa-control_x"]'
data-colors='["#505050","#000000","#000000"]'
data-background-colors='["#58FA58","#FF0000","#505050"]'
class="col-1-2 right-align big"
></div>
</section>
<section>
<div class="large col-1-2 center-align">Gast</div>
<div data-type="switch"
data-device="rg_Gast"
data-set-on="home"
data-set-off="none"
data-states='["home","absent","none"]'
data-icons='["oa-status_available","oa-status_away_1","oa-control_x"]'
data-colors='["#505050","#000000","#000000"]'
data-background-colors='["#58FA58","#FF0000","#505050"]'
class="col-1-2 right-align big"
></div>
</section>
<section class="abschnitt">
<div class="large col-1-2 center-align">Gesamte Wohnung</div>
</section>
<section>
<div class="large col-1-2 center-align">Alle Heizungen</div>
<div data-template="template/template_combobox.html" data-parameter='{"par01":"WG.HZ.Alle","par02":"\"on\",\"off\",\"5.0\",\"5.5\",\"6.0\",\"6.5\",\"7.0\",\"7.5\",\"8.0\",\"8.5\",\"9.0\",\"9.5\",\"10.0\",\"10.5\",\"11.0\",\"11.5\",\"12.0\",\"12.5\",\"13.0\",\"13.5\",\"14.0\",\"14.5\",\"15.0\",\"15.5\",\"16.0\",\"16.5\",\"17.0\",\"17.5\",\"18.0\",\"18.5\",\"19.0\",\"19.5\",\"20.0\",\"20.5\",\"21.0\",\"21.5\",\"22.0\",\"22.5\",\"23.0\",\"23.5\",\"24.0\",\"24.5\",\"25.0\",\"25.5\",\"26.0\",\"26.5\",\"27.0\",\"27.5\",\"28.0\",\"28.5\",\"29.0\",\"29.5\",\"30.0\",\"30.5\",\"undefined\"","par03":"state","par04":"desired-temp"}' class="col-1-2 right-align"></div>
</section>
<section>
<div class="large col-1-2 center-align">Kontakte geschlossen?</div>
<div data-type="symbol"
data-device="WG.Kontakte.Alle"
data-states='["open","closed","undefined"]'
data-icons='["oa-control_x","oa-message_ok","oa-control_x"]'
data-colors='["#FF0000","#58FA58","#FF0000"]'
class="col-1-2 right-align big"></div>
</section>
    </div>
</body>
</html>


Edit:
Ok, ersten Fehler habe ich gefunden. Die Section über die ganze Seite musste von col-1-2 auf col-1-1 geändert werden. Aber die Höhe der Section stimmt einfach nicht. Finde auch nicht, wo das geändert werden muss, bzw. wer es zu klein werden lässt.
Aktuell dabei unser neues Haus mit KNX am einrichten. Im nächsten Schritt dann KNX mit FHEM verbinden. Allein zwei Dinge sind dabei selten: Zeit und Geld...

1907

Zitat von: 1907 am 13 September 2017, 09:06:12
Entschulidigung. Hier natürlich der Code:

header>Klima Keller</header>
     <div data-type="label"
       data-device="Keller_Temp"
       data-get="temperature"
       data-unit="°C"
       data-limits='[5,10]'
       data-colors='["red","white"]'
       class="cell tall inline top-space">
     </div>
     <div data-type="label"
       data-device="Keller_Temp"
       data-get="humidity"
       data-unit="%"
       data-limits='[10,70]'
       data-colors='["white","red"]'
       class="cell tall inline top-space">
     </div>
     <div data-type="label"
       data-device="Keller_Temp"
       data-get="dewpoint"
       data-unit="°C"
       class="cell big inline top-space">
     </div>
     <div data-type="symbol"
       data-device="Keller_Temp"
       data-get="lueften_erlaubt"
       data-warn="dewpoint_differenz_aussen"
       data-icons='["fa-blink oa-fts_window_2w_open_lr","oa-fts_window_2w_open_lr"]'
       data-states='["off","on"]'
       data-colors='["red","green"]'
       class="cell big inline compressed">
     </div>


Wie gesagt, wenn ich das Attribut compressed weg lasse, dann wird wieder alles korrekt angezeigt. Ich benötige dieses, da sonst das Wigdget zu viel Platz braucht und ein Zeilenumbruch erfolgt.

Viele Grüße

Der Fehler ist nun behoben!
Dankeschön.