circlemenu und Portrait-Mode auf dem Smartphone

Begonnen von ron.burgundy, 21 Januar 2017, 02:24:26

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

ron.burgundy

21 Januar 2017, 02:24:26 Letzte Bearbeitung: 21 Januar 2017, 02:27:14 von ron.burgundy
Hallo,

seit einigen Stunden bereits bastel ich nun an Tablet UI Frontends herum und bin sehr begeistert. Ein ganz großes Dankeschön an den Entwickler, für mich ist es eine große Bereicherung.
Nun bin ich auf ein Problem gestoßen, das ich scheinbar nicht selber gelöst bekomme. Vielleicht weiß einer von euch rat:
Aktuell bastel ich an einem Frontend für mein iPhone und dort habe ich Darstellungsschwierigkeiten mit dem circlemenu, wenn ich das iPhone senkrecht halte. Die circlemenu Buttons verrutschen dann um einen gewissen Abstand nach links und mir ist nicht klar, warum. Halte ich es hingegen waagerecht, wird alles korrekt angezeigt. Beim iPad passiert das ganze nicht und die Darstellung ist senkrecht, wie auch waagerecht, korrekt. Zur Erläuterung habe ich diesem Post Screenshots hinzugefügt.

Vielen Dank schonmal für eure Hilfe

romibaer

#1
21 Januar 2017, 04:56:48
Hallo - kannst du bitte hier deinen Code mal posten?

ron.burgundy

#2
21 Januar 2017, 17:50:40 Letzte Bearbeitung: 21 Januar 2017, 17:54:25 von ron.burgundy
Danke für deine Antwort, romibaer! Das Folgende ist der Code der "ts_schlafzimmer.html"

Code Auswählen

<header class="headerTransparent">Schlafzimmer</header>
<div data-type="thermostat" data-device="HM_TS_Schlafzimmer"
class="cell large narrow top-space"
data-step="0.5"
data-valve="HM-CC-RT-DN_KEQ0508906.4.VALVE_STATE"
data-get="HM-CC-RT-DN_KEQ0508906.4.SET_TEMPERATURE"
data-set="datapoint 4.SET_TEMPERATURE"
data-temp="HM-CC-RT-DN_KEQ0508906.4.ACTUAL_TEMPERATURE"></div>
<div class="row top-narrow-2x">
<div class="col-1-3">
<div data-type="circlemenu" class="" data-circle-radius="50">
<ul class="menu">
  <li><div data-type="push"
     data-device="HM_TS_Schlafzimmer"
     data-icons='["oa-sani_heating_manual","oa-sani_heating_automatic","oa-weather_summer"]'
     data-get="HM-CC-RT-DN_KEQ0508906.4.CONTROL_MODE"
     data-get-on='["MANU","AUTO","PARTY"]'
     data-set-on=""
     data-set-off=""></div></li>
  <li><div data-type="switch" data-device="HM_TS_Schlafzimmer"
   data-set-on="datapoint 4.MANU_MODE 1"
   data-icon="oa-sani_heating_manual"></div></li>
  <li><div data-type="switch" data-device="HM_TS_Schlafzimmer"
   data-set-on="datapoint 4.AUTO_MODE 1"
   data-icon="oa-sani_heating_automatic"></div></li>
  <li><div data-type="switch" data-device="HM_TS_Schlafzimmer"
   data-set=""
   data-icon="oa-weather_summer"></div></li></ul></div></div>
<div class="col-1-3">
<div data-type="switch" data-device="HM_TS_Schlafzimmer" data-icon="fs-sani_heating_boost" class=""
data-get="HM-CC-RT-DN_KEQ0508906.4.CONTROL_MODE" data-get-on="BOOST" data-get-off="!on"
data-set="datapoint 4.BOOST_MODE" data-set-on="1" data-set-off="0"></div></div>
<div class="col-1-3">
<div data-type="circlemenu" class="" data-circle-radius="50">
<ul class="menu">
  <li><div data-type="push"
     data-icons='["fa-power-off","oa-time_eco_mode","fa-smile-o",""]'
     data-device="HM_TS_Schlafzimmer"
     data-get="Level"
     data-get-on='["Off","Eco","Comfort","Else"]'
     data-set-on=""></div></li>
  <li><div data-type="push" data-device="HM_TS_Schlafzimmer"
   data-set-on="datapoint 4.LOWERING_MODE 1"
   data-get="Level"
   data-get-on="Eco"
   data-get-off="!on"
   data-icon="oa-time_eco_mode"></div></li>
  <li><div data-type="push" data-device="HM_TS_Schlafzimmer"
   data-set-on="datapoint 4.COMFORT_MODE 1"
   data-get="Level"
   data-get-on="Comfort"
   data-get-off="!on"
   data-icon="fa-smile-o"></div></li>
  <li><div data-type="push" data-device="HM_TS_Schlafzimmer"
   data-set-on="datapoint 4.SET_TEMPERATURE 4.5"
   data-get="Level"
   data-get-on="Off"
   data-get-off="!on"
   data-icon="fa-power-off"></div></li></ul></div></div></div>



Auf die "ts_schlafzimmer.html" wird in der "index_m.html" verwiesen. Der Code der "index_m.html":

Code Auswählen

<!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)
     *
     * - create a new folder named 'tablet' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet
     * - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     */ -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="widget_base_width" content="35">
    <meta name="widget_base_height" content="19">
    <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="gridster_disable" content="1">
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="2"> <!-- verbose level 1-6 = output to console;0 = not output -->

    <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="/fhem/tablet/lib/openautomation.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.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>



    <!-- Remove this line to enable for usage with WebViewControl -->
    <script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    <script src="../pgm2/cordova-2.3.0.js" defer></script>
    <script src="../pgm2/webviewcontrol.js" defer></script>

    <!-- End for WebViewControl -->

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

<body>

<div class="gridster">
<ul>


<!-- ************************ Uhrzeit ************************ -->

<li data-row="1" data-col="1" data-sizex="7" data-sizey="2" data-template="uhrzeit.html"></li>


<!-- ************************ Menü ************************ -->

<li data-row="3" data-col="1" data-sizex="7" data-sizey="3" data-template="menu_m.html" class=""></li>


<!-- ************************ Harmony Box ************************ -->

<!-- <li data-row="8" data-col="12" data-sizex="9" data-sizey="11" data-template="harmony.html"></li> -->


<!-- ************************ Thermostat Schlafzimmer ************************ -->

<li class="halbTransparent" data-row="10" data-col="2" data-sizex="5" data-sizey="8" data-template="ts_schlafzimmer.html">


<!-- ************************ Thermostat Badezimmer ************************ -->

<li class="halbTransparent" data-row="20" data-col="2" data-sizex="5" data-sizey="8" data-template="ts_badezimmer.html">


<!-- ************************ Thermostat Wohnzimmer ************************ -->

<li class="halbTransparent" data-row="30" data-col="2" data-sizex="5" data-sizey="8" data-template="ts_wohnzimmer.html">


<!-- ************************ Thermostat Kueche ************************ -->

<li class="halbTransparent" data-row="40" data-col="2" data-sizex="5" data-sizey="8" data-template="ts_kueche.html">


</ul>
</div>

</body>

</html>


Sorry, der Code ist sicher nicht besonders gut aufgeräumt - ich bin absoluter Hobbyprogrammierer ;)
Drucken
Nach oben Seiten1
Benutzer-Aktionen