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:
<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ü:
<!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:
<!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
<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