Versuche ein Layout mit Gridster zu erstellen

HoTi · 24 September 2018, 10:42:10

Hallo zusammen,

ich versuche gerade mein erstes nicht kopiertes TabeltUI mit Gridster zu erstellen und schaue mir dazu das Wiki an.

Ich bekomme diese aber nicht in die gewünschte Größe irgenwie muss ich da ein Denkfehler haben. In rot habe ich mal eingezeichnet wie es werden soll, aber wie kann ich die höhe beeinflussen?

So sieht die Datei dazu aus:

Code Auswählen


<!DOCTYPE html>
<html>
<head>
		<title>Haus</title>
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="widget_base_width" content="314">
		<meta name="widget_base_height" content="194">
		<meta name="toast" content='0'/>
		<meta name="fhemweb_url" content="http://localhost:8083/fhem">
		<meta name="toast_position" content="bottom-right"/>

		<meta name="longpoll" content="1">
		<meta name="longpoll_filter" content=".*">
		<meta name="longpoll_type" content="1">
		<meta name="longpoll_maxage" content="240">
		<meta name="shortpoll_interval" content="10">		
		<meta name="debug" content="1"/>
		<!--<meta name="gridster_cols" content="20"/>
		<meta name="gridster_rows" content="10"/>-->
		<meta name="gridster_base_width" content="47">
		<meta name="gridster_base_height" content="26">
		<meta name="gridster_disable" content="1"/>
		<meta name="widget_margin" content="3"/>
		<meta name="gridster_min_width" content="1">
		<meta name="gridster_min_height" content="1">

		<script type="text/javascript" src="../pgm2/jquery.min.js"></script>
		<script type="text/javascript" src="./js/fhem-tablet-ui.js" defer></script>
</head>
<body>
<div class="gridster">
<ul>
    <li data-row="1" data-col="1" data-sizex="4" data-sizey="1">ROW 1 | COL 1 | X 4 | Y 1</li>
	
    <li data-row="2" data-col="1" data-sizex="1" data-sizey="2">ROW 2 | COL 1 | X 1 | Y 2</li>

	<li data-row="2" data-col="2" data-sizex="2" data-sizey="2">ROW 2 | COL 2 | X 2 | Y 2</li>
	
	<li data-row="2" data-col="4" data-sizex="1" data-sizey="2">ROW 2 | COL 4 | X 1 | Y 2</li>
		
    <li data-row="4" data-col="1" data-sizex="4" data-sizey="1">ROW 4 | COL 1 | X 4 | Y 1</li>


</ul>
</div>
</body>
</html>

Hoffe ihr könnt mir helfen, das ich das verstehe.

Viele Grüße
Tim

tomster · 25 September 2018, 10:38:01

Servus Tim,

für ein gridster-Layout gibt es keine allverbindliche Anleitung dass es "genau so" ausschauen soll, weil im Normalfall die tatsächliche Spaltenbreite und -höhe an die Größe des Browserfensters angepasst wird. Dadurch wird das Layout auf jedem Tablet/Browser (unterschiedliche Bildschirmauflösung vorausgesetzt) immer ein bisschen anders aussehen. Vorallem wenn dann auch noch die Widgets im Grid platziert werden.

Ich hab Dein Beispiel einmal grob ausgemessen. Die Kacheln in der 2. Reihe haben ein Breitenverhältnis von ca. 4:3:4. Das macht insgesamt 11 "Breiteneinheiten". Das Höhenverhältnis ist (von oben nach unten) ca. 1:6:1 = 8 Höheneinheiten. Wenn man Gridster die Arbeit machen lässt, dann gibt man nur die Anzahl an Spalten und Reihen an und sagt dann jedem <li>-Element wie große es sein soll. Gridster verteilt dann die Kacheln entsprechend der Auflösung, aber immer im gleichen Verhältnis von Breite und Höhe der Kacheln. Wenn Du das Beispiel unten im Deinem Browser am PC anschaust, und mit der Fenstergröße des Browsers spielst, wirst Du sehen was ich meine:

Code Auswählen


!DOCTYPE html>
<html>

<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.7.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2018 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
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/index_empty.html
     */
    -->
    <link rel="icon" href="favicon.ico" type="image/x-icon" />


    <!-- 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="js/fhem-tablet-ui.min.js" defer></script>

    <meta name="gridster_cols" content="11">
    <meta name="gridster_rows" content=8">
    <title>FHEM-Tablet-UI</title>
</head>

<body>
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizey="1" data-sizex="11">
                <header>EXAMPLE1</header>
                <!-- place your widget here -->
            </li>
            <li data-row="2" data-col="1" data-sizey="6" data-sizex="4">
                <header>EXAMPLE2</header>
                <!-- place your widget here -->
            </li>
            <li data-row="2" data-col="2" data-sizey="6" data-sizex="3">
                <header>EXAMPLE3</header>
                <!-- place your widget here -->
            </li>
            <li data-row="2" data-col="4" data-sizey="6" data-sizex="4">
                <header>EXAMPLE4</header>
                <!-- place your widget here -->
            </li>
            <li data-row="4" data-col="1" data-sizey="1" data-sizex="11">
                <header>EXAMPLE5</header>
                <!-- place your widget here -->
            </li>
</ul>
    </div>
</body>

</html>

Kommt das vom Layout hin für Dich?
Beste Grüße,
Tom

HoTi · 25 September 2018, 20:19:01

Hallo Tom,

Danke dir. Ich habe mein Rechner an der Arbeit gelassen, werde es morgen mal ausprobieren!

Danke dir, melde mich!

Vg Tim

FHEM Forum

Versuche ein Layout mit Gridster zu erstellen

HoTi

tomster

HoTi