Symbol in Widget in anderes Widget verschoben (mobile Seite)

Begonnen von JanWausH, 16 Mai 2019, 23:11:24

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

JanWausH

16 Mai 2019, 23:11:24
Hallo,

ich bin endlich fertig mit meiner ersten FTUI Umsetzung für kleine und große Endgeräte.

Allerdings habe ich noch ein nerviges Problem das ich nicht nachvollziehen kann. In der mobilen Version habe ich auf dem der Seite mit der ich die Rollläden steuere, das Problem, dass sich die Symbole der Rollläden in das Pagetabmenü verschieben (siehe Anhang). Bei den weiteren Seiten (z.B. Schalter und Thermostate) besteht dieses Problem nicht.

Hier ist der Code den ich nutze:

Subpage für die Rollläden:
Code Auswählen

<html>
<title>Wohnzimmer</title>
<head>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="3" data-template="menu.html"></li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="2">
  <header>EG</header>
    <div data-type="circlemenu" class="cell circlemenu">
                                <ul class="menu">
                                        <li><div data-type="symbol"
                                                        data-device="tahoma_9677906"
                                                        data-get="ClosureState"
                                                        data-states='["0","[1-9]","1[0-9]","2[0-9]","3[0-9]","4[0-9]","5[0-9]","6[0-9]","7[0-9]","8[0-9]","9[0-9]","100"]'
                                                        data-icons='["oa-fts_shutter_up","oa-fts_shutter_10","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40","oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80","oa-fts_shutter_90","oa-fts_shutter_down"]'
                                                        data-colors='["yellow","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","green"]'
                                                ></div></li>
                                        <li><div data-type="switch"
                                                                data-device="tahoma_9677906"
                                                                data-set-on="my"
                                                                data-icon="oa-fts_shutter_automatic"></div></li>
                                        <li><div data-type="push"
                                                                data-device="tahoma_9677906"
                                                                data-set-on="close"
                                                                data-icon="fa-angle-down"></div></li>
                                        <li><div data-type="push"
                                                                data-device="tahoma_9677906"
                                                                data-set-on="stop"
                                                                data-icon="oa-audio_stop"></div></li>
                                        <li><div data-type="push"
                                                                data-device="tahoma_9677906"
                                                                data-set-on="open"
                                                                data-icon="fa-angle-up"></div></li>
                                </ul>
</div>
<div data-type="label">WZ Tür</div>

<div data-type="circlemenu" class="cell circlemenu">
                                <ul class="menu">
                                        <li><div data-type="symbol"
                                                        data-device="tahoma_16368010"
                                                        data-get="ClosureState"
                                                        data-states='["0","[1-9]","1[0-9]","2[0-9]","3[0-9]","4[0-9]","5[0-9]","6[0-9]","7[0-9]","8[0-9]","9[0-9]","100"]'
                                                        data-icons='["oa-fts_shutter_up","oa-fts_shutter_10","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40","oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80","oa-fts_shutter_90","oa-fts_shutter_down"]'
                                                        data-colors='["yellow","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","green"]'
                                                ></div></li>
                                        <li><div data-type="switch"
                                                                data-device="tahoma_16368010"
                                                                data-set-on="my"
                                                                data-icon="oa-fts_shutter_automatic"></div></li>
                                        <li><div data-type="push"
                                                                data-device="tahoma_16368010"
                                                                data-set-on="close"
                                                                data-icon="fa-angle-down"></div></li>
                                        <li><div data-type="push"
                                                                data-device="tahoma_16368010"
                                                                data-set-on="stop"
                                                                data-icon="oa-audio_stop"></div></li>
                                        <li><div data-type="push"
                                                                data-device="tahoma_16368010"
                                                                data-set-on="open"
                                                                data-icon="fa-angle-up"></div></li>
                                </ul>
</div>
<div data-type="label">WZ Fenster</div>

<div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li><div data-type="symbol"
data-device="tahoma_8186668"
data-get="ClosureState"
data-states='["0","[1-9]","1[0-9]","2[0-9]","3[0-9]","4[0-9]","5[0-9]","6[0-9]","7[0-9]","8[0-9]","9[0-9]","100"]'
data-icons='["oa-fts_shutter_up","oa-fts_shutter_10","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40","oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80","oa-fts_shutter_90","oa-fts_shutter_down"]'
data-colors='["yellow","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","green"]'
></div></li>
<li><div data-type="switch"
data-device="tahoma_8186668"
data-set-on="my"
data-icon="oa-fts_shutter_automatic"></div>
<li><div data-type="push"
data-device="tahoma_8186668"
data-set-on="close"
data-icon="fa-angle-down"></div></li>
<li><div data-type="push"
data-device="tahoma_8186668"
data-set-on="stop"
data-icon="oa-audio_stop"></div></li>
<li><div data-type="push"
data-device="tahoma_8186668"
data-set-on="open"
data-icon="fa-angle-up"></div></li>
</ul>
</div>
<div data-type="label">Küche</div>

<div data-type="circlemenu" class="cell circlemenu">
                                <ul class="menu">
                                        <li><div data-type="symbol"
                                                        data-device="tahoma_13162691"
                                                        data-get="ClosureState"
                                                        data-states='["0","[1-9]","1[0-9]","2[0-9]","3[0-9]","4[0-9]","5[0-9]","6[0-9]","7[0-9]","8[0-9]","9[0-9]","100"]'
                                                        data-icons='["oa-fts_shutter_up","oa-fts_shutter_10","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40","oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80","oa-fts_shutter_90","oa-fts_shutter_down"]'
                                                        data-colors='["yellow","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","green"]'
                                                ></div></li>
                                        <li><div data-type="switch"
                                                                data-device="tahoma_13162691"
                                                                data-set-on="my"
                                                                data-icon="oa-fts_shutter_automatic"></div></li>
                                        <li><div data-type="push"
                                                                data-device="tahoma_13162691"
                                                                data-set-on="close"
                                                                data-icon="fa-angle-down"></div></li>
                                        <li><div data-type="push"
                                                                data-device="tahoma_13162691"
                                                                data-set-on="stop"
                                                                data-icon="oa-audio_stop"></div></li>
                                        <li><div data-type="push"
                                                                data-device="tahoma_13162691"
                                                                data-set-on="open"
                                                                data-icon="fa-angle-up"></div></li>
                                </ul>
                        </div>
                        <div data-type="label">Bad</div>

</li>

<li data-row="1" data-col="3" data-sizex="1" data-sizey="2">
  <header>OG</header>

    <div data-type="circlemenu" class="cell circlemenu">
                                <ul class="menu">
                                        <li><div data-type="symbol"
                                                        data-device="tahoma_1756132"
                                                        data-get="ClosureState"
                                                        data-states='["0","[1-9]","1[0-9]","2[0-9]","3[0-9]","4[0-9]","5[0-9]","6[0-9]","7[0-9]","8[0-9]","9[0-9]","100"]'
                                                        data-icons='["oa-fts_shutter_up","oa-fts_shutter_10","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40","oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80","oa-fts_shutter_90","oa-fts_shutter_down"]'
                                                        data-colors='["yellow","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","green"]'
                                                ></div></li>
                                        <li><div data-type="switch"
                                                                data-device="tahoma_1756132"
                                                                data-set-on="my"
                                                                data-icon="oa-fts_shutter_automatic"></div></li>
                                        <li><div data-type="push"
                                                                data-device="tahoma_1756132"
                                                                data-set-on="close"
                                                                data-icon="fa-angle-down"></div></li>
                                        <li><div data-type="push"
                                                                data-device="tahoma_1756132"
                                                                data-set-on="stop"
                                                                data-icon="oa-audio_stop"></div></li>
                                        <li><div data-type="push"
                                                                data-device="tahoma_1756132"
                                                                data-set-on="open"
                                                                data-icon="fa-angle-up"></div></li>
                                </ul>
</div>
<div data-type="label">Bad</div>

<div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li><div data-type="symbol"
data-device="tahoma_7982867"
data-get="ClosureState"
data-states='["0","[1-9]","1[0-9]","2[0-9]","3[0-9]","4[0-9]","5[0-9]","6[0-9]","7[0-9]","8[0-9]","9[0-9]","100"]'
data-icons='["oa-fts_shutter_up","oa-fts_shutter_10","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40","oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80","oa-fts_shutter_90","oa-fts_shutter_down"]'
data-colors='["yellow","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","green"]'
></div></li>
<li><div data-type="switch"
data-device="tahoma_7982867"
data-set-on="my"
data-icon="oa-fts_shutter_automatic"></div>
<li><div data-type="push"
data-device="tahoma_7982867"
data-set-on="close"
data-icon="fa-angle-down"></div></li>
<li><div data-type="push"
data-device="tahoma_7982867"
data-set-on="stop"
data-icon="oa-audio_stop"></div></li>
<li><div data-type="push"
data-device="tahoma_7982867"
data-set-on="open"
data-icon="fa-angle-up"></div></li>
</ul>
</div>
<div data-type="label">SZ links</div>

<div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li><div data-type="symbol"
data-device="tahoma_4513325"
data-get="ClosureState"
data-states='["0","[1-9]","1[0-9]","2[0-9]","3[0-9]","4[0-9]","5[0-9]","6[0-9]","7[0-9]","8[0-9]","9[0-9]","100"]'
data-icons='["oa-fts_shutter_up","oa-fts_shutter_10","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40","oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80","oa-fts_shutter_90","oa-fts_shutter_down"]'
data-colors='["yellow","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","green"]'
></div></li>
<li><div data-type="switch"
data-device="tahoma_4513325"
data-set-on="my"
data-icon="oa-fts_shutter_automatic"></div>
<li><div data-type="push"
data-device="tahoma_4513325"
data-set-on="close"
data-icon="fa-angle-down"></div></li>
<li><div data-type="push"
data-device="tahoma_4513325"
data-set-on="stop"
data-icon="oa-audio_stop"></div></li>
<li><div data-type="push"
data-device="tahoma_4513325"
data-set-on="open"
data-icon="fa-angle-up"></div></li>
</ul>
</div>
<div data-type="label">SZ rechts</div>

<div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li><div data-type="symbol"
data-device="tahoma_5709609"
data-get="ClosureState"
data-states='["0","[1-9]","1[0-9]","2[0-9]","3[0-9]","4[0-9]","5[0-9]","6[0-9]","7[0-9]","8[0-9]","9[0-9]","100"]'
data-icons='["oa-fts_shutter_up","oa-fts_shutter_10","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40","oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80","oa-fts_shutter_90","oa-fts_shutter_down"]'
data-colors='["yellow","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","green"]'
></div></li>
<li><div data-type="switch"
data-device="tahoma_5709609"
data-set-on="my"
data-icon="oa-fts_shutter_automatic"></div>
<li><div data-type="push"
data-device="tahoma_5709609"
data-set-on="close"
data-icon="fa-angle-down"></div></li>
<li><div data-type="push"
data-device="tahoma_5709609"
data-set-on="stop"
data-icon="oa-audio_stop"></div></li>
<li><div data-type="push"
data-device="tahoma_5709609"
data-set-on="open"
data-icon="fa-angle-up"></div></li>
</ul>
</div>
<div data-type="label">Arbeitszimmer</div>
</li>

<li data-row="1" data-col="4" data-sizex="1" data-sizey="2">
  <header>DG</header>

    <div data-type="circlemenu" class="cell circlemenu">
                                <ul class="menu">
                                        <li><div data-type="symbol"
                                                        data-device="tahoma_12434092"
                                                        data-get="ClosureState"
                                                        data-states='["0","[1-9]","1[0-9]","2[0-9]","3[0-9]","4[0-9]","5[0-9]","6[0-9]","7[0-9]","8[0-9]","9[0-9]","100"]'
                                                        data-icons='["oa-fts_shutter_up","oa-fts_shutter_10","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40","oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80","oa-fts_shutter_90","oa-fts_shutter_down"]'
                                                        data-colors='["yellow","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","green"]'
                                                ></div></li>
                                        <li><div data-type="switch"
                                                                data-device="tahoma_12434092"
                                                                data-set-on="my"
                                                                data-icon="oa-fts_shutter_automatic"></div></li>
                                        <li><div data-type="push"
                                                                data-device="tahoma_12434092"
                                                                data-set-on="close"
                                                                data-icon="fa-angle-down"></div></li>
                                        <li><div data-type="push"
                                                                data-device="tahoma_12434092"
                                                                data-set-on="stop"
                                                                data-icon="oa-audio_stop"></div></li>
                                        <li><div data-type="push"
                                                                data-device="tahoma_12434092"
                                                                data-set-on="open"
                                                                data-icon="fa-angle-up"></div></li>
                                </ul>
</div>
<div data-type="label">Bad</div>

<div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li><div data-type="symbol"
data-device="tahoma_11914139"
data-get="ClosureState"
data-states='["0","[1-9]","1[0-9]","2[0-9]","3[0-9]","4[0-9]","5[0-9]","6[0-9]","7[0-9]","8[0-9]","9[0-9]","100"]'
data-icons='["oa-fts_shutter_up","oa-fts_shutter_10","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40","oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80","oa-fts_shutter_90","oa-fts_shutter_down"]'
data-colors='["yellow","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","green"]'
></div></li>
<li><div data-type="switch"
data-device="tahoma_11914139"
data-set-on="my"
data-icon="oa-fts_shutter_automatic"></div>
<li><div data-type="push"
data-device="tahoma_11914139"
data-set-on="close"
data-icon="fa-angle-down"></div></li>
<li><div data-type="push"
data-device="tahoma_11914139"
data-set-on="stop"
data-icon="oa-audio_stop"></div></li>
<li><div data-type="push"
data-device="tahoma_11914139"
data-set-on="open"
data-icon="fa-angle-up"></div></li>
</ul>
</div>
<div data-type="label">Kinderzimmer</div>

<div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li><div data-type="symbol"
data-device="tahoma_792961"
data-get="ClosureState"
data-states='["0","[1-9]","1[0-9]","2[0-9]","3[0-9]","4[0-9]","5[0-9]","6[0-9]","7[0-9]","8[0-9]","9[0-9]","100"]'
data-icons='["oa-fts_shutter_up","oa-fts_shutter_10","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40","oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80","oa-fts_shutter_90","oa-fts_shutter_down"]'
data-colors='["yellow","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","green"]'
></div></li>
<li><div data-type="switch"
data-device="tahoma_792961"
data-set-on="my"
data-icon="oa-fts_shutter_automatic"></div>
<li><div data-type="push"
data-device="tahoma_792961"
data-set-on="close"
data-icon="fa-angle-down"></div></li>
<li><div data-type="push"
data-device="tahoma_792961"
data-set-on="stop"
data-icon="oa-audio_stop"></div></li>
<li><div data-type="push"
data-device="tahoma_792961"
data-set-on="open"
data-icon="fa-angle-up"></div></li>
</ul>
</div>
<div data-type="label">Gästezimmer</div>

<div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li><div data-type="symbol"
data-device="tahoma_15603530"
data-get="ClosureState"
data-states='["0","[1-9]","1[0-9]","2[0-9]","3[0-9]","4[0-9]","5[0-9]","6[0-9]","7[0-9]","8[0-9]","9[0-9]","100"]'
data-icons='["oa-fts_shutter_up","oa-fts_shutter_10","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40","oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80","oa-fts_shutter_90","oa-fts_shutter_down"]'
data-colors='["yellow","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","green"]'
></div></li>
<li><div data-type="switch"
data-device="tahoma_15603530"
data-set-on="my"
data-icon="oa-fts_shutter_automatic"></div>
<li><div data-type="push"
data-device="tahoma_15603530"
data-set-on="close"
data-icon="fa-angle-down"></div></li>
<li><div data-type="push"
data-device="tahoma_15603530"
data-set-on="stop"
data-icon="oa-audio_stop"></div></li>
<li><div data-type="push"
data-device="tahoma_15603530"
data-set-on="open"
data-icon="fa-angle-up"></div></li>
</ul>
</div>
<div data-type="label">Kreativzimmer</div>
                 
</li>

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


Menü:
Code Auswählen

<!DOCTYPE html>
<html>
<body>
    <header>MENU</header>
    <div class="cell">
        <div data-type="pagetab" data-url="home_mobile.html"  data-icon="fa-home" class="top-space"></div>
        <div data-type="pagetab" data-url="schalter_mobile.html"  data-icon="oa-control_on_off" class="top-space"></div>
        <div data-type="pagetab" data-url="thermostate_mobile.html"  data-icon="oa-sani_heating" class="top-space"></div>
<div data-type="pagetab" data-url="rolllaeden_mobile.html"  data-icon="oa-fts_shutter" class="top-space"></div>
        <div class="bottom bottom-space-2x">
           <div class="cell" data-type="clock" data-format="H:i" class="large"></div>
           <div class="cell" data-type="clock" data-format="d.n.Y" class="small"></div>
        </div>
</div>
</body>
</html>


index:

Code Auswählen

<!DOCTYPE html>
<html>
<head>

    <script src="js/fhem-tablet-ui.js" defer></script>

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="widget_base_width" content="170">
<meta name="widget_base_height" content="130">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="0"> <!-- 1=output to console;0=no output -->
</head>
<body>
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="1" data-sizey="9" data-template="menu_mobile.html"></li>
        </ul>
    </div>
</body>
</html>


Wenn ich mit der Zeile aus dem Index

Code Auswählen

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />


rumspiele (initial-scale) komme ich schon näher an mein Ziel aber es wird niemals das ganze Display genutzt.

Habt ihr das eventuell besser für mobile Geräte gelöst bekommen? Wäre für jeden Tipp dankbar.

Vielen Dank und Grüße,

Jan
Drucken
Nach oben Seiten1
Benutzer-Aktionen