Tablet UI optimiert für Smartphone Display

[FhemPiUser]

Hallo,
hat mal jemand ein Tablet UI für ein Smartphone Display optimiert? Wie habt ihr das gelöst? Einfach nur data-col 1-2 verwenden?

Soweit ich weiß gibt es die Möglichkeit automatisch zu erkennen, ob es ein Smartphone Display/mobile ist welches eine Webseite aufruft, um dann die Ansicht dafür zu optimieren? Hat das mal jemand mit Tablet UI umgesetzt?

[FhemPiUser]

habs mal mit folgendem Code probiert und es scheint zu klappen, aber nicht überall. Mein Desktop zeigt es nicht-Mobile, mein Iphone zeigt es Mobile, aber mein Android Tablett zeigt es leider auch mobile...

Im Header:

Code Auswählen Erweitern

<script type="text/javascript">
var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
    };
    </script>

Im Body vor jeder "li":

Code Auswählen Erweitern

<script type="text/javascript">
if (isMobile.any()) {
  document.write('<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">');
}
else {
  document.write('<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">');
};
</script>
...
<script type="text/javascript">
if (isMobile.any()) {
  document.write('<li data-row="2" data-col="1" data-sizex="2" data-sizey="1">');
}
else {
  document.write('<li data-row="1" data-col="3" data-sizex="2" data-sizey="1">');
};
</script>
...
<script type="text/javascript">
if (isMobile.any()) {
  document.write('<li data-row="3" data-col="1" data-sizex="2" data-sizey="1">');
}
else {
  document.write('<li data-row="1" data-col="5" data-sizex="2" data-sizey="1">');
};
</script>
...

[setstate]

responsive design wird immer gerne als das non plus ultra genannt, aber ich habe lieber eine von Hand angepasste Extra-Seite nur für mobile Geräte. Siehe das Beispiel: https://github.com/knowthelist/fhem-tablet-ui/blob/master/examples/mobil_2.html

[ChrisK]

Ich hatte vor einiger Zeit mal damit angefangen per css das Ganze auf dem Handy auch vernünftig darzustellen.
Ist nicht ganz perfekt (und für meinen Fall für 6 Spalten optimiert) aber vielleicht ein Ansatz wenn Ihr in diese Richtung was machen wollt.

Hier meine fhem-tablet-ui-user.css:

Code Auswählen Erweitern

.gridster ul li.black {
    background-color:#000000 !important;
    overflow: hidden;
    text-align: center;
}


#screensaver {
  position: absolute;
  width: 100%;
  height:100%;
  left:0px;
  top: 0px;
  display: none;
  z-index:9999;
  background-color:#111111;
}

.screensaver-1-3 {
  width:30%;
  height:100%;
  text-align: center;
  padding-top: 200px;
  font-size: 2.8em;
  float: left;
  color: #666666;
}

.screensaverbig {
  font-size: 66px;
}


.circleborder {
  border-radius: 50% !important;
  border: 2px solid #ffffff;
}

.hidden {
  display: none;
}


/*https://github.com/ducksboard/gridster.js/issues/475*/
/*Just add this css for responsive gridster */
.gridster > * {
padding: 0;
width: 100% !important;
}
.gridster .gs-w {
list-style: none;
}
.gridster .gs-w[data-sizex="1"] {
width: 14%;/*8.34091%;*/
}
.gridster .gs-w[data-col="1"] {
left: 0%;
}
.gridster .gs-w[data-sizex="2"] {
width: 28.7%;/*17.43182%;*/
}
.gridster .gs-w[data-col="2"] {
left: 14.7%;/*9.09091%;*/
}
.gridster .gs-w[data-sizex="3"] {
width: 43.4%;/*26.52273%;*/
}
.gridster .gs-w[data-col="3"] {
left: 29.4%;/*18.18182%;*/
}
.gridster .gs-w[data-sizex="4"] {
width: 58.1%;/*35.61364%;*/
}
.gridster .gs-w[data-col="4"] {
left: 44.1%;/*27.27273%;*/
}
.gridster .gs-w[data-sizex="5"] {
width: 72.8%;/*44.70455%;*/
}
.gridster .gs-w[data-col="5"] {
left: 58.8%;/*36.36364%;*/
}
.gridster .gs-w[data-sizex="6"] {
width: 87.5%;/*53.79545%;*/
}
.gridster .gs-w[data-col="6"] {
left: 73.5%;/*45.45455%;*/
}
.gridster .gs-w[data-sizex="7"] {
width: 102.2%;/*62.88636%;*/
}
.gridster .gs-w[data-col="7"] {
left: 88.2%;/*54.54545%;*/
}
.gridster .gs-w[data-sizex="8"] {
width: 100%;/*71.97727%;*/
}
.gridster .gs-w[data-col="8"] {
left: 91.5%;/*63.63636%;*/
}
.gridster .gs-w[data-sizex="9"] {
width: 100%;/*81.06818%;*/
}
.gridster .gs-w[data-col="9"] {
left: 72.72727%;
}
.gridster .gs-w[data-sizex="10"] {
width: 100%;/*90.15909%;*/
}
.gridster .gs-w[data-col="10"] {
left: 81.81818%;
}
.gridster .gs-w[data-sizex="11"] {
width: 100%;/*99.25%;*/
}
.gridster .gs-w[data-col="11"] {
left: 90.90909%;
}
/*
.fa-2x{
  font-size: 3vw;
}
*/


@media screen and (min-width: 1024px) {
  .fa-2x{
    font-size: 2em !important;
  }
  .screensaver-right {
    float: right;
  }
  .screensaver-gigantic {
    font-size: 100px !important;
    font-family: robotothin,sans-serif;
    line-height: 120px;
  }
  .screensaver-bigger {
    font-size: 220% !important;
  }
}
@media screen and (max-width: 1023px) {
  .fa-2x{
    font-size: 3vw !important;
  }
  .circleborder {
    width: 10vw !important;
    height: 10vw !important;
    line-height: 10vw !important;
  }
  .big {
    font-size: 2vw !important;
  }
  .screensaverbig {
    font-size: 8vw !important;
  }
  .screensavermiddle {
    font-size: 4vw !important;
  }
  .screensaver-right {
    float: right;
    padding-left: 140px !important;
  }
  .screensaver-gigantic {
    font-size: 100px !important;
    font-family: robotothin,sans-serif;
    line-height: 120px;
    text-align: right;
    height: 120px;
    width: 250px;
  }
  .screensaver-bigger {
    font-size: 340% !important;
    font-family: robotothin,sans-serif !important;
  }

}



/Work around for devices less than 768px/
@media screen and (max-width: 767px) {
.gridster > * {
padding: 0;
width: 100% !important;
}
.gridster .gs-w {
list-style: none;
}
.gridster .gs-w[data-sizex="1"] {
width: 100%!important;
}
.gridster .gs-w[data-col="1"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="2"] {
width: 100%!important;
}
.gridster .gs-w[data-col="2"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="3"] {
width: 100%!important;
}
.gridster .gs-w[data-col="3"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="4"] {
width: 100%!important;
}
.gridster .gs-w[data-col="4"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="5"] {
width: 100%!important;
}
.gridster .gs-w[data-col="5"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="6"] {
width: 100%!important;
}
.gridster .gs-w[data-col="6"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="7"] {
width: 100%!important;
}
.gridster .gs-w[data-col="7"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="8"] {
width: 100%!important;
}
.gridster .gs-w[data-col="8"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="9"] {
width: 100%!important;
}
.gridster .gs-w[data-col="9"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="10"] {
width: 100%!important;
}
.gridster .gs-w[data-col="10"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="11"] {
width: 100%!important;
}
.gridster .gs-w[data-col="11"] {
left: 0%!important;
}
}

[Pythonf]

responsive design wird immer gerne als das non plus ultra genannt, aber ich habe lieber eine von Hand angepasste Extra-Seite nur für mobile Geräte. Siehe das Beispiel: https://github.com/knowthelist/fhem-tablet-ui/blob/master/examples/mobil_2.html

Ich habe mich bisher mit smartVisu beschäfigt und bin jetzt auf TabletUI aufmerksam geworden. Bisher gefällt es mir sehr gut und es läuft m.M. nach um einiges schneller als smartVisu. Was ich allerdings vermisse ist die automatische Anpassung an die Displaygröße. Ein großer Aufwand wäre es aber nicht, für Handydisplays eine eigene Seite zu erstellen. Wenn ich deine Demo mobil_2.html auf meinem Handy aufrufe ist es allerdings leider der Fall, dass die Oberfläche ein klein wenig zu groß für mein Display ist und sich deshalb wenig horizontal verschieben lässt. Wenn ich alle data-col"3" lösche verschiebt sich nichts mehr, aber es ist ein weißer rechter Rand vorhanden, der zuvor nicht da war (Radio Widget hat sich verkleinert). Da ich mich mit HTML nur mäßig auskenne und viel durch copy&paste lerne habe ich hierfür in der schnelle keine Lösung gefunden und ich ging eigentlich davon aus, dass durch "width=device-width" dieses Problem nicht auftreten dürfte?
Hat hier jemand eine Lösung, da ich gerne auch über mein Handy "Tablet"-UI nutzen würde

Beste Grüße
Fabian

[wkarl]

Hallo Fabian,

aktuell arbeite ich an meiner FTUI fürs Tablet. Mein Plan ist ein angepasstes UI fürs iPhone zu erstellen. Damit sich die doppelte Arbeit so klein wie möglich bleibt, nutze ich das template-Modul http://forum.fhem.de/index.php/topic,43110.0.html von Johannes. Vorwiegend habe ich derzeit devices für Heizung und Licht. Beim ersten screenshot siehts Du das tablet-FTUI für ein Geschoß. Der zweite screenshot zeigt eine Kontrolleinheit. Dahinter steckt ein template, das ich parametrisiert einbinde. Diese Einheit ist so gewählt, dass sie gut auf das iPhone passt. D.h. ich nutze das gleich template auch auf dem iPhone-FTUI.

Die Komplexität - d.h. die meiste Arbeit - steckt im template. Damit minimiere ich meinen Aufwand.

'my 2 cents'

ciao Walter

[TWART016]

Hallo setstate,

responsive design wird immer gerne als das non plus ultra genannt, aber ich habe lieber eine von Hand angepasste Extra-Seite nur für mobile Geräte. Siehe das Beispiel: https://github.com/knowthelist/fhem-tablet-ui/blob/master/examples/mobil_2.html

Wie öffnest du die phone Variante. Über einen eigenen Link in FHEM oder wird automatisch erkannt, wenn ein mobiler Browser kommt? Ich habe derzeit schon 2 einträge.

Code Auswählen Erweitern

define TABLETUI HTTPSRV ftui/ ./www/tablet Tablet-UI
define TABLETUIEVAL HTTPSRV ftui_eval/ ./www/tablet_eval Tablet-EVAL

Gruß
TWART016

[freetz]

Hallo Wkarl,

das sieht ziemlich gut aus - wie hast Du das mit dem Menü links gelöst, dass dann im Hauptscreen die entsprechenden Module angezeigt werden? Werden da einfach komplett neue Seiten per Link aufgerufen, die entsprechend angepasst sind oder ist es (was sehr elegant wäre) irgendwie dynamisch gelöst, so dass die entsprechend ausgewählten Widgets ein- und ausgeblendet werden?
Magst Du Dein Template mit uns teilen?

Vielen Dank schon mal und Gruß,

Frederik

[en-trust]

https://github.com/knowthelist/fhem-tablet-ui/blob/master/examples/mobil_2.html

404 Page not found

[TWART016]

Ich verwende diese Basis.

https://github.com/knowthelist/fhem-tablet-ui/blob/master/examples/mobil/index_nav_mobil.html

[andreas_r]

Ich habe hier
https://forum.fhem.de/index.php/topic,66246.msg575211.html#msg575211
mal einen Ansatz vorgestellt, wie man mit einer FTUI Version Tablett und Smartphone abdecken kann.

Viele Grüße,
Andreas