Rastereinstellung für Tablet nicht veränderbar

Ajuba · 26 November 2016, 22:58:58

Hallo Experten
Als Neueinsteiger scheitere ich schon an der richtigen FTUI Rastereinstellung.
Ich habe ein Point of View Mobii720 tablet mit 7" und 1024 x 600 Auflösung mit WebViewControl als Browser. Aber die Probleme habe ich auch am PC im Chrome Browser.

Gestartet bin ich vom "index_empty.html".
EGAL welche "widget_base_width" ich wähle, ES ÄNDERT SICH NICHTS - Es sieht immer gleich aus.

Auf einer GitHub page habe ich den Hinweis gefunden, dass man (desired_width / number_of_columns) - (margin * 2) rechnen müsste , was logisch klingt.
[/size]Aber wie gesagt, egal was ich eingebe, es ändert sich nichts.

Durch den eher kleinen Bildschirm muss ich die Tasten möglichst groß machen um sie gut zu treffen.
Andererseits muss ich mit den Spaltenbreiten sparen um alles unterzubringen.
Natürlich könnte ich Pagetab 2-spaltig machen aber ich möchte ja Platz sparen.

Code Auswählen


    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="98">
    <meta name="widget_base_height" content="77">
    <meta name="widget_margin" content="10">
    <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" 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" />


    <!-- 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>FHEM-Tablet-UI</title>
</head>
<body>
<div class="gridster">
<ul>


  <li data-row="1" data-col="1" data-sizex="1" data-sizey="7">


  <div class="cell">
   <div data-type="pagetab" data-url="index.html"  data-icon="fa-home" class="bigger" class="cell"><>
   <div data-type="pagetab" data-url="index_2.html" data-icon="fa-sliders" class="bigger" class="cell"><>
   <div data-type="pagetab" data-url="index_3.html" data-icon="fa-music" class="bigger" class="cell"><>
   <div data-type="pagetab" data-url="index_4.html" data-icon="fa-hotel" class="bigger" class="cell"><>
   <div data-type="pagetab" data-url="index_5.html" data-icon="fa-calendar" class="bigger" class="cell"><>
   <div data-type="pagetab" data-url="index_6.html" data-icon="fa-cloud" class="bigger" class="cell"><>
  <>
  </li>

[/size]Übrigens, wenn ich die Icons mit class="centered" zentriere sind sie wieder klein obwohl class="bigger" auch da steht
Für Hilfe wäre ich sehr dankbar.

setstate · 27 November 2016, 00:23:34

dein HTML sieht nicht korrekt aus.

<> ist falsch, die Tag müssen korrekt geschlossen werden </div>

ausserdem die Frage: die <head> der Unterseiten sind alle leer?

Die Namen der Seiten sind auch ungünstig. index.html beinhaltet die Header meta, links, scripts und das Menü. Die Unterseiten sollten anders heißen: index_x.html o.ä.
Siehe Beispiel: https://github.com/knowthelist/fhem-tablet-ui/tree/master/examples/pagetab

Ajuba · 27 November 2016, 01:23:13

Danke für die rasche Antwort

<> hab ich drinnen aber beim Posten werden sie nach drücken der # Taste in der Vorschau in <> umgewandelt obwohl sie unten vorhanden sind.
Was mach ich beim posten was falsch?
Die heads habe ich bewusst alle rausgelöscht weil ich vermeiden wollte, dass die Felder durch irgendwas beeinflusst werden.

OK, das mit dem Menüaufbau hab ich jetzt kapiert. Und dabei ist mir auch der Fehler bewusst geworden.
Index.html ist der Master für alle nachher aufgerufenen Seiten und das Menü wir nur einmal gemacht und von jeder Seite mit aufgerufen.
Hab ich das so richtig verstanden? Steht das irgendwo oder muss man das einfach wissen?

Ich hatte das Menü auf jeder Seite und hatte mich auf einer Unterseite stundenlang abgemüht Werte zu ändern was aber nichts nutzte.
Ich hatte Pagetab direkt vom FhemWiki genommen und das Beispiel nicht gesehen.
Nun habe ich "widget_base_width" im Index geändert und hurra es schlägt auf die Unterseite durch.
Werde nun alles entsprechend umbauen.

Danke

setstate · 27 November 2016, 07:51:43

Zitat von: Ajuba am 27 November 2016, 01:23:13
OK, das mit dem Menüaufbau hab ich jetzt kapiert. Und dabei ist mir auch der Fehler bewusst geworden.
Index.html ist der Master für alle nachher aufgerufenen Seiten und das Menü wir nur einmal gemacht und von jeder Seite mit aufgerufen.
Hab ich das so richtig verstanden? Steht das irgendwo oder muss man das einfach wissen?

Hier findet man etwas dazu: http://www.fhemwiki.de/wiki/FHEM_Tablet_UI/FAQ#Wie_baue_ich_ein_Men.C3.BC_mit_dem_Pagetab_Widget_auf.3F

ZitatWerde nun alles entsprechend umbauen.

Bitte schaue schaue dir vorher erst einmal noch Pagebutton an.

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

Das gibt es das Menü nur im Index.html und die Unterseiten werden nur in den Content-Bereich dazu geladen. Einmal geladene Seiten sind beim nächsten Aufruf sofort wieder da, weil sie beim Umschalten nur ein/ ausgeblendet werden und nicht immer wieder neu geladen. Man kann die Unterseite auch im Hintergrund vorladen -> class="prefetch"

Die Docu für Menüs mit Pagebutton ist zugegeben noch sehr dürftig. Da muss ich noch etwas mehr schreiben

Ajuba · 27 November 2016, 21:58:10

Danke, jetzt funktioniert alles.
Der Tip mit
https://github.com/knowthelist/fhem-tablet-ui/blob/master/examples/pagebutton/index_page_left_demo.html
war sehr hilfreich und tut meinem brustschwachen alten Tablet gut.
Nach einigem Grübeln warum es in dem Beispielverzeichnis 4 Indexdateien gibt habe ich kapiert, dass hier 4 Beispiele zusammengefasst sind.

Folgende letzte Frage bleibt jetzt noch offen:
Die widget_base_width und widget_base_height wird also nur einmal in Index.html festgelegt und gilt für alle aufgerufenen htmls in dem Projekt.
Falls ich nun für eine Seite eine vollkommen andere Platzaufteilung benötige, was soll ich tun?
Eine möglichst kleine widget_base_width und widget_base_height wählen und dann alles über data-sizex und data-sizey lösen?

Bezüglich Docu würden schon die hier genannten Links den Neueinsteigern helfen. Das Hauptproblem für Neueinsteiger ist nämlich die "Verstreutheit" aller Infos. Das soll aber keine Kritik sein sondern nur eine Rückmeldung an die Profis und Entwickler, die mit dem System mitgewachsen sind. Danke für das tolle Produkt.

setstate · 27 November 2016, 22:22:05

Das ist auch meine Empfehlung: widget_base_width und widget_base_height klein halten, dann hat man mehr Flexibilität.

FHEM Forum

Rastereinstellung für Tablet nicht veränderbar

Ajuba

setstate

Ajuba

setstate

Ajuba

setstate