[GELÖST] Positionierung der Container klappt nicht

ErzGabriel · 25 September 2016, 10:29:07

Hallo zusammen.
Ich habe ein Problem mit der Positionierung der Container und finde den Fehler nicht.


	<li data-row="3.5" data-col="2" data-sizex="2" data-sizey="2.5">
		<header>Fritzbox</header>
		<div class="top-space inline">
			<div data-type="switch"	data-device="WLAN" data-icon="fa-wifi" data-off-background-color="#eeeeee" data-on-background-color="#088A08" data-get-on="on" data-get-off="off"></div>
			<div data-type="label">WLan</div>
		</div>
		<div class="top-space inline">
			<div data-type="switch"	data-device="WLANGast" data-icon="fa-wifi" data-off-background-color="#eeeeee" data-on-background-color="#088A08" data-get-on="on" data-get-off="off"></div>
			<div data-type="label">G&auml;ste-WLan</div>
		</div><br>
		<div class="top-space inline">
			<div data-type="label" data-color="#aaaddd" class="medium"><font color="#32cd32">Fritzbox-Link</font></div>
			<div data-type="label" data-device="FB_Link"></div>
		</div><br>
		<div class="top-space inline">
			<div data-type="label" class="medium"><font color="#ee0000">Fritzbox-Traffic</font></div>
			<div data-type="label" data-device="FB_Traffic"></div>
		</div>	
	</li>

Obwohl ich sage, es soll in Zeile 3,5 anfangen, steht es immer ganz oben.
Ich habe die Höhe und Breite der Zeilen an meine Bedürfnisse angepasst und die Skalierung auf 0,5 gestellt.
Kann aber auch alles mit der Grundeinstellung probieren und der Fehler ist der gleiche.
System ist ganz neu aufgesetzt und ich beginne gerade erst mit dem Neubau, des Systems.

Weiß jemand Rat? Danke.

setstate · 26 September 2016, 18:32:28

Ich glaube nicht, dass 0.5 er Schritte funktionieren. Es sollten schon Ganzzahlen sein.
Man kann aber die Basiswerte anpassen, um das Gleiche zu erzielen.

Also 35 x 3 anstatt 70 x 1.5

ErzGabriel · 26 September 2016, 20:00:14

Mit Ganzzahlen hat es auch nicht geklappt aber ich glaube, ich bin ein Stück weiter gekommen.
Mir fehlt noch auf dem Raspberry Pi die JQuery. Suche gerade nach einer Anleitung, wie ich die installieren kann aber leider noch nicht fündig geworden.

setstate · 26 September 2016, 20:24:55

JQuery bring FHEM schon mit. Deshalb referenziere ich nur darauf

<script src="../pgm2/jquery.min.js"></script>

ErzGabriel · 26 September 2016, 20:35:14

Okay, dann weiß ich nicht woran es noch liegen könnte.
Habe die Skalierung wieder auf 1 gestellt aber es geht immer noch nicht. Die Kacheln sitzen in der ersten Reihe oder genau unter einer anderen Kachel.
Da bleibt dann wohl nichts anderes über, wie mit leeren Kacheln zu arbeiten und die transparent zu machen, das sollte dann klappen.

Gibt es eigentlich ne Möglichkeit die Symbole oder Textzeilen in einer Kachel vertikal zu zentrieren? Horizontal gibt es ja den centered Befehl.

setstate · 26 September 2016, 21:09:04

und eine originale index_empty.html

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

in eine frische Installation zeigt alles in der ersten Reihe? Das wäre wirklich sehr aussergewöhnlich.

setstate · 26 September 2016, 21:13:32

Zitat von: ErzGabriel am 26 September 2016, 20:35:14

Gibt es eigentlich ne Möglichkeit die Symbole oder Textzeilen in einer Kachel vertikal zu zentrieren? Horizontal gibt es ja den centered Befehl.

Code Auswählen


<li data-row="5" data-col="4" data-sizex="6" data-sizey="3">
  <header>EXAMPLE6</header>
  <!-- place your widget here -->
  <div class="center">
    <div>Text in der Mitte</div>
  </div>
</li>

Peter aus Calw · 13 Oktober 2016, 22:49:17

Hallo setstate,
bin ziemlich frisch an Ftui, komme aber mit der Positionierung nicht klar. Habe Dein Beispiel in meiner index.html angewendet, kann aber die Position "row" und "col" nicht ändern.

EXAMPLE6
Text in der Mitte

bleibt immer in der ersten freien Zeile und der ersten Spalte stehen.
In der(n) obersten Zeile(n) konnte ich mehrere "Container" mit "col" wie gewünscht plazieren, ein weiterer hat sich automatisch in die erste freie Zeile eingebaut, kann aber hier nicht weiter aufbauen, bleibt immer in der ersten "row" hängen. Hier mal die index.html :

Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.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)
     *
     * !!!! Evaluation version - run only in a staging enviroment !!!!
     *
     * - create a new folder named 'tablet_eval' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet_eval
     * - add 'define TABLETUIEVAL HTTPSRV ftui_eval ./www/tablet_eval Tablet-EVAL' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet_eval/
     */
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="64">
    <meta name="widget_base_height" content="61">
    <meta name="widget_min_cols" content="15">
    <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">
    <meta name="debug" content="1">
    <meta http-equiv="Cache-Control" content="no-store" />
    <meta name="widget_margin" content="2">

    <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>


    <!-- Remove this line to enable for usage with WebViewControl
    <script defer>var wvcDevices = {'123456789: '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-eval</title>
</head>
<body>

<div class="gridster">
<ul>
<li data-row="1" data-col="14" data-sizex="3" data-sizey="5">
        <header><div data-type="label" class="large">Wetter</div></header >
        <div data-type="label" data-device="TH_Aussentemp" data-part="2" data-limits='[-73,10,23]' data-colors='["#6699FF","#AA6900","#FF0000"]' data-unit="%B0C%0A" class="cell bigger thin top-space-2x"></div>
        <div data-type="label" class="cell top-space">Temperatur</div>
        <div data-type="label" class="cell top-space">Heute</div>
        <div data-type="weather" data-device="Wetter" data-get="fc1_day_of_week" class="cell big"></div>
        <div data-type="label" data-device="Wetter" data-get="fc1_day_of_week" class="cell narrow"></div>
        <div data-type="label" data-device="Wetter" data-get="fc1_high_c" data-unit="%B0C%0A" class="cell large"></div>
        <div data-type="label" class="cell darker top-space">Morgen</div>
        <div data-type="weather" data-device="Wetter" data-get="fc2_day_of_week" class="cell big"></div>
        <div data-type="label" data-device="Wetter" data-get="fc2_day_of_week" class="cell narrow"></div>
        <div data-type="label" data-device="Wetter" data-get="fc2_high_c" data-unit="%B0C%0A" class="cell large"></div>
</li>
<li data-row="1" data-col="6" data-sizex="2" data-sizey="5">
        <header><div data-type="label" class="large">Heizung</div></header>
        <div data-type="label" class="cell">HK-Kueche</div>
        <div data-type="thermostat" data-device="HM_HT_Wz1_Clima" data-step="0.5" data-valve="ValvePosition"></div>
        <div data-type="label" class="cell">HK-Klavier</div>
        <div data-type="thermostat" data-device="HM_HT_Wz2_Clima" data-step="0.5" data-valve="ValvePosition"></div>
</li>
<li data-row="1" data-col="4" data-sizex="2" data-sizey="5">
        <header><div data-type="label" class="large">Heizung</div></header>
        <div data-type="label" class="cell">HK-Bad</div>
        <div data-type="thermostat" data-device="HM_HT_Bad_Clima" data-step="0.5" data-valve="ValvePosition"></div>
        <div data-type="label" class="cell">HK-Gaeste-Sz</div>
        <div data-type="thermostat" data-device="HM_HT_Gsz_Clima" data-step="0.5" data-valve="ValvePosition"></div>        
</li>
<li data-row="1" data-col="10" data-sizex="2" data-sizey="5">
        <header><div data-type="label" class="large">Fenster</div></header>
        <div data-type="label" class="small darker top-space">Dachfenster-Bad</div>
	<div data-type="symbol" data-device="HM_FS_Bad" data-get-on="offen" data-get-off="geschlossen" class="narrow small"></div>
        <div data-type="label" class="small darker top-space">Dachfenster-Th</div>
	<div data-type="symbol" data-device="HM_FS_Th" data-get-on="offen" data-get-off="geschlossen" class="narrow small"></div>
        <div data-type="label" class="small darker top-space">Dachfenster-Gsz</div>
	<div data-type="symbol" data-device="HM_FS_Gsz" data-get-on="offen" data-get-off="geschlossen" class="narrow small"></div>
        <div data-type="label" class="small darker top-space">Terrassentuer</div>
	<div data-type="symbol" data-device="HM_FS_Wz" data-get-on="open" data-get-off="closed" class="narrow small"></div>
        <div data-type="label" class="small darker top-space">Fenster-Gaeste-WC</div>
	<div data-type="symbol" data-device="HM_FS_Gwc" data-get-on="offen" data-get-off="geschlossen" class="narrow small"></div>
</li>
<li data-row="1" data-col="8" data-sizex="2" data-sizey="5">
        <header><div data-type="label" class="large">Heizung</div></header>
        <div data-type="label" class="cell">HK-Gaestezi.</div>
        <div data-type="thermostat" data-device="HM_HT_Gzi_Clima" data-step="0.5" data-valve="ValvePosition"></div>
        <div data-type="label" class="cell">HK-Gaeste-WC</div>
        <div data-type="thermostat" data-device="HM_HT_Gsz_Clima" data-step="0.5" data-valve="ValvePosition"></div>
</div>
</li>
<li data-row="1" data-col="1" data-sizex="2" data-sizey="5">
        <header><div data-type="label" class="large">PV-Anlage</div></header>
        <div data-type="label" class="class="small darker top-space">Gesamtleistung</div>
        <div data-type="label" data-device="PV_WR1" data-get="etotal" data-fix="0" class="large"></div>
        <div data-type="label" class="cell">Tagesleistung</div> 
        <div data-type="label" data-device="PV_WR1" data-get="etoday" data-fix="1" class="large"></div>
        <div data-type="label" class="cell">Aktuelle Leistung</div> 
        <div data-type="label" data-device="PV_WR1" data-get="total_pac" data-fix="1" class="cell large"></div>
</li>

<li data-row="10" data-col="2" data-sizex="3" data-sizey="1">
<header><div data-type="label" class="large">Muell-Termine</div></header>
    <div data-type="symbol"
        data-device="myAbfall"
        data-get="Abfall_Bioabfall_tage"
        data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
        data-on-colors='["SaddleBrown","SaddleBrown"]'
        data-get-on='["0","2"]'
        data-background-icon="fa-circle"
        class="bigger inline" ></div> 
    <div     data-type="symbol" 
        data-device="myAbfall"
        data-get="Abfall_GelberSackGelbeTonne_tage"
        data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
        data-on-colors='["yellow","yellow"]'
        data-get-on='["0","2"]'
        data-background-icon="fa-circle"
        class="bigger inline" ></div>   
        <div     data-type="symbol"
        data-device="myAbfall"
        data-get="Abfall_Glas_tage"
        data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
        data-on-colors='["green","green"]'
        data-get-on='["0","2"]'
        data-background-icon="fa-circle"
        class="bigger inline" >
    </div>
    <div     data-type="symbol"
        data-device="myAbfall"
        data-get="Abfall_Papier_tage"
        data-get="Abfall_Papier_text"   
        data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
        data-on-colors='["white","withe"]'
        data-get-on='["0","2"]'
        data-background-icon="fa-circle"
        class="bigger inline" ></div>
    <div     data-type="symbol"
        data-device="myAbfall"
        data-get="Abfall_Restabfall_tage"
        data-get="Abfall_Restabfall_text"   
        data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
        data-on-colors='["black","black"]'
        data-get-on='["0","2"]'
        data-background-icon="fa-circle"
        class="bigger inline" ></div>
    <div     data-type="symbol"
        data-device="myAbfall"
        data-get="Abfall_Schrott_tage"
        data-get="Abfall_Schrott_text"   
        data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
        data-on-colors='["blue","blue"]'
        data-get-on='["0","2"]'
        data-background-icon="fa-circle"
        class="bigger inline" ></div>
</li>
<li data-row="70" data-col="8" data-sizex="6" data-sizey="6" class="halbTransparent">
    <header>Battery Monitor</header>
    <table width="100%">
    <td>
        <tr>
    >div data-row="16" data-col="8" data-sizex="6" data-sizey="6"></div>    
        <div data-type="readingsgroup" data-device="Batteriestatus2" data-max-update="600"></div>
        </tr>
    </td>
    </div>
</li>
<li data-row="8" data-col="12" data-sizex="6" data-sizey="3">
  <header>EXAMPLE6</header>
  <!-- place your widget here -->
  <div class="center">
    <div>Text in der Mitte</div>
  </div>
</li>
</ul>
</div>
</body>
</html>

Wäre für einen Schupps sehr dankbar.
LG Peter

setstate · 13 Oktober 2016, 23:59:03

In Zeile 108 steht ein falsches </div>, das bringt alles durcheinander, sodass du an andere Stelle ändern kannst, wie du willst, ohne das ein nachvollziehbares Ergebnis erziehlt wird.

Ich glaube Gridster füllt die Zeilen automatisch. Selbst wenn du Row=10 sagst, wird es keine Lücke dazwischen geben.

Ansonsten muss man rechnen

data-row="1" + data-sizey="5" ---> data-row="6" für das nächste Element

Peter aus Calw · 14 Oktober 2016, 16:30:39

Hallo Setstate,
kleine Ursache - große Wirkung !
bedanke mich für den Schupps - es hat funktioniert.
LG Peter