Tablet UI Grundaufbau - Farben und Abstände

Rakete0815 · 06 August 2018, 22:15:13

Hallo,

ich wollte meine Tablet UI etwas moderner gestalten und dabei sind mir nun ein paar Fragen gekommen,
die mich seit ein paar Tagen beschäftigen.

Die gestalterischen Elemente liegen ja hauptsächlich in einer CSS.
Dies gilt dann ja für die gesamte TabletUI, also index.html und alle anderen die man sonst noch so hat.

Ich möchte nun aber mein Layout individuell anpassen können. Zur Verdeutlichung habe ich ein Bild angehängt.

1. Wie kann ich den Abstand zwischen den einzelnen Kästchen ändern? Wie z.B. zwischen "Away" und "Home" und "Night" und nach oben und unten hin.

2. Wie kann ich die Hintergrundfarbe der Kästchen in Abhängigkeit von einem State darstellen, im Idealfall sogar blinken lassen?

Hier noch der Code von einem Kästchen:

Code Auswählen

<li data-row="7" data-col="9" data-sizex="3" data-sizey="3">
    <header>Home</header>
    <div data-type="switch"
         data-device="Home_Status"
         data-set-on="HOME"
         data-set-off="AWAY"
         data-states='["HOME","AWAY","NIGHT"]'
         data-icons='["fa-home", "fa-home", "fa-home"]'
         data-colors='["green", "grey", "grey"]'
         data-background-icon="-"
         data-on-background-color="-"
         style="font-size:400%"></div>
    </li>

Es ist bestimmt wieder ganz einfach aber ich stehe auf dem Schlauch

Vielen Dank schon mal

setstate · 07 August 2018, 07:51:06

1. die Gridster Abstände kann man nur global ändern, nicht pro Element

im HTML Header dies einsetzen:

Code Auswählen

<meta name="gridster_margin" content="4">

2. Die Hintergrundfarbe könnte man mit dem Classchanger setzen lassen

Beispiel

Code Auswählen


            <li data-row="5" data-col="4" data-sizey="3" data-sizex="6">
                <header>EXAMPLE5</header>
                <div data-type="classchanger" data-device="dummy1" data-get="state" data-on-class="bg-red" data-off-class="bg-green">
                    <div class="center bigger">Windalarm</div>
                </div>
            </li>

Rakete0815 · 07 August 2018, 10:28:43

vielen Dank für deine Antwort.

Das hat aber leider nicht geklappt:

Zitat von: setstate am 07 August 2018, 07:51:06
1. die Gridster Abstände kann man nur global ändern, nicht pro Element

im HTML Header dies einsetzen:
Code Auswählen Erweitern
<meta name="gridster_margin" content="4">

Der Abstand verändert sich leider nicht.

Den Classchanger gucke ich mir später mal an

moonsorrox · 07 August 2018, 13:05:22

setze doch mal den gridster_margin auf "1" oder "0" dann ändert der sich auch, weil "4" ist glaube ich die Standard Einstellung

Rakete0815 · 07 August 2018, 13:07:55

Ja das habe ich ja probiert. Habe 0,1 und 5 ausprobiert. Es bleibt aber leider unverändert.

Gesendet von iPhone mit Tapatalk

moonsorrox · 07 August 2018, 13:16:35

evtl. diese beiden nochmal probieren

Code Auswählen

<meta name="widget_margin" content="0">
<meta name="gridster_disable" content="1">

Rakete0815 · 07 August 2018, 13:24:49

Zitat von: moonsorrox am 07 August 2018, 13:16:35
evtl. diese beiden nochmal probieren
Code Auswählen Erweitern
<meta name="widget_margin" content="0">

Damit verschwinden die Abstände zwar aber die einzelnen Kästchen werden auch kleiner, so dass nicht mehr alles angezeigt wird.

Zitat von: moonsorrox am 07 August 2018, 13:16:35
Code Auswählen Erweitern
<meta name="gridster_disable" content="1">

Das habe ich generell drin. Hatte es aber auch testweise mal entfernt.

moonsorrox · 07 August 2018, 13:27:18

dann kannst du mit diesen beiden Werten etwas experimentieren

Code Auswählen

<meta name='gridster_min_width' content='100'>
    <meta name='gridster_min_height' content='100'>

Rakete0815 · 07 August 2018, 13:37:53

Danke für deine wirklich fixen Antworten und deine Geduld.
Leider ändert das auch nix.

Zitat von: moonsorrox am 07 August 2018, 13:27:18
Code Auswählen Erweitern
<meta name='gridster_min_width' content='100'> <meta name='gridster_min_height' content='100'>

Selbst wenn ich da 1000 eintrage passiert nix.

Hier mal meine 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="32">
    <meta name="widget_base_height" content="32">
    <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="widget_margin" content="0">
    <meta name='toast_position' content='top-left'>
    <meta name='toast' content='2'>
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="0"> <!-- verbose level 1-6 = output to console;0 = not output -->
    <meta name='gridster_min_width' content='300'>
    <meta name='gridster_min_height' content='300'>

	<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
	<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/powerange.min.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
    <link rel="stylesheet" href="/fhem/tablet/fonts/roman/style.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 type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>
	<script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>
	
	<!-- Enable this lines for usage with WebViewControl --><!-- -->
	<script type="text/javascript" src="/fhem/pgm2/cordova-2.3.0.js"></script>
	<script type="text/javascript" src="/fhem/js/webviewcontrol.js"></script>
	<script type="text/javascript">var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
	<!-- End for WebViewControl -->
<style type="text/css">
        .wlan-fhem {
            background: url(WLAN.png) no-repeat;
            background-size: contain;
        }
  </style>
<title>Flur</title>
</head>
<body>

<div class="gridster">
<ul>
<!-- ============= 1. Reihe =============== -->
<!-- ====================================== -->
</li>
<li data-row="1" data-col="1" data-sizex="8" data-sizey="5">
    <div data-type="clock" data-format="H:i" class="container" style="font-size:800%"></div>
<div data-type="clock" data-format="l, j. F Y" class="large"></div>
</li>
<li data-row="6" data-col="1" data-sizex="8" data-sizey="8">
<div class="container weather">
<header>HEUTE</header>
	<table width="100%">
		<tr>
			<td rowspan="5" style="text-align:center;vertical-align:top">
				<div class="hbox items-space-around">
                <div data-type="weather"
						data-device="MeinWetter"
						data-get="fc1_condition"
						data-imageset="kleinklima"
						style="width:260px"></div>
                </div>
				<div class="large"><div data-type="label"
					data-device="MeinWetter"
					data-get="condition"
                    class="inline"></div>und <div data-type="label"
					data-device="MeinWetter"
					data-get="temperature"
					data-limits="[-50,-30,40]"
					data-colors='["#9999ff","#aa6900","#ff0000"]'
					data-unit=" °C" 
                                                  class="inline"></div></div>
	<br>			
                <div class="large inline">Heute: <div data-type="label" 
                     data-device="MeinWetter" 
                     data-get="fc1_condition"
                     class="inline">
                </div><br>mit <div data-type="label"
					data-device="MeinWetter"
					data-get="fc1_low_c"
					data-limits="[-50,-30,40]"
					data-colors='["#9999ff","#aa6900","#ff0000"]'
					data-unit=" °C"
					class="inline"></div>bis max. <div data-type="label"
					data-device="MeinWetter"
					data-get="fc1_high_c"
					data-limits="[-50,-30,40]"
					data-colors='["#9999ff","#aa6900","#ff0000"]'
					data-unit=" °C"
					class="inline"></div>
                </div>
                </div>
</li>
			</td>
		</tr>
	</table>
</div>
</li>
    <li data-row="14" data-col="1" data-sizex="8" data-sizey="3">
<header>Abholtermine</header>
<div class="vbox"><div class="container" style="padding-top: 7px;">
                    <div data-type="symbol"
                        data-device="MuellterminDummy"
                        data-get="Wertstoffe"
                        data-icons='["fa-trash warn fa-blink","fa-trash warn"]'
                        data-on-colors='["#F5DA81","#F5DA81"]'
                        data-get-on='["0","2"]'
                        data-background-icon="-"
                        data-on-background-color="-"
                        class="big inline" >
                    </div>                
    
                    <div data-type="symbol"
                        data-device="MuellterminDummy"
                        data-get="Hausmüll"
                        data-icons='["fa-trash warn fa-blink","fa-trash warn"]'
                        data-on-colors='["white","white"]'
                        data-get-on='["0","2"]'
                        data-background-icon="-"
                        data-on-background-color="-"
                        class="big inline" >
                    </div>
    
                    <div data-type="symbol"
                        data-device="MuellterminDummy"
                        data-get="Papiertonne"
                        data-icons='["fa-trash warn fa-blink","fa-trash warn"]'
                        data-on-colors='["blue","blue"]'
                        data-get-on='["0","2"]'
                        data-background-icon="-"
                        data-on-background-color="-"
                        class="big inline" >
                    </div>
    </div></div>
</li>
<!-- ============= 2. Reihe =============== -->
<!-- ====================================== -->
<li data-row="1" data-col="9" data-sizex="9" data-sizey="1">
    <div class="vbox"><div class="large" >Home Status</div></div>
</li>
<li data-row="2" data-col="9" data-sizex="9" data-sizey="3">    
    <div class="vbox"><div data-type="label"
         data-device="Home_Status"
         data-get="state"
         data-states='["ALARM!","HOME","AWAY","NIGHT"]'
         data-colors='["red","green","red","blue"]'
         data-classes='["blink","-","-","-"]'
        style="font-size:500%"
        class="inline"></div></div>
    </li>
<li data-row="7" data-col="9" data-sizex="3" data-sizey="3">
    <header>Home</header>
    <div data-type="switch"
         data-device="Home_Status"
         data-set-on="HOME"
         data-set-off="AWAY"
         data-states='["HOME","AWAY","NIGHT"]'
         data-icons='["fa-home", "fa-home", "fa-home"]'
         data-colors='["green", "grey", "grey"]'
         data-background-icon="-"
         data-on-background-color="-"
         style="font-size:400%"></div>
    </li>
<li data-row="7" data-col="12" data-sizex="3" data-sizey="3">
<header>Away</header>
<div data-type="switch"
         data-device="Home_Status"
         data-set-on="AWAY"
         data-set-off="HOME"
         data-states='["AWAY","HOME","NIGHT"]'
         data-icons='["fa-car","fa-car","fa-car"]'
         data-colors='["red","grey","grey"]'
         data-background-icon="-"
         data-on-background-color="-"
         class="cell bigger"></div>    
</li>
<li data-row="7" data-col="15" data-sizex="3" data-sizey="3">
<header>Night</header>
<div data-type="switch"
         data-device="Home_Status"
         data-set-on="NIGHT"
         data-set-off="HOME"
         data-states='["NIGHT","HOME","AWAY"]'
         data-icons='["fa-bed", "fa-bed", "fa-bed"]'
         data-colors='["blue", "grey", "grey"]'
         data-background-icon="-"
         data-on-background-color="-"
         class="cell bigger" ></div>    
</li>
<li data-row="10" data-col="9" data-sizex="9" data-sizey="3">
    <header>Anwesenheit</header><div class="inline">
      <div data-type="symbol" data-device="iPhone_Kai" 
      data-get-on='["present","absent"]'
      data-icons='["fa-mobile","fa-mobile"]'
      data-on-colors='["blue","grey"]'
      class="bigger inline" ></div>
      <div data-type="symbol" data-device="iPhone_Sam" 
      data-get-on='["present","absent"]'
      data-icons='["fa-mobile","fa-mobile"]'
      data-on-colors='["pink","grey"]'
      class="bigger inline" ></div>
    </div></li>
<li data-row="13" data-col="9" data-sizex="3" data-sizey="3">
<header>Anrufe</header>
    <div class="inline">
        <div data-type="popup"
     data-height="300px"
     data-width="400px">
    <div><div data-type="symbol" data-device="duVerpassteAnrufe" data-icon="fa-phone warn" class="bigger cell"></div></div>
    <div class="dialog">
        <header>Anrufe</header>
        <div>
    <table width="100%" class="">
        <tr>
            <td>
                <!-- Zuordnung des Status zu entsprechendem Icon -->
                <div class="narrow" data-type="symbol" data-device="CallList"
                     data-get="1-state" data-states='["=>","=> X","=> ((o))","=> [=]","=> O_O"]'
                     data-icons='["oa-phone_call_end_in","oa-phone_missed_in","oa-phone_ring fa-blink","oa-phone_ring_in fa-blink","oa-phone_answersing"]'
                     data-colors='["green","firebrick","firebrick","green","#aa6900"]'></div>
            </td>
            <td>
                <div data-type="label" data-device="CallList" data-get="1-timestamp" data-part="5" class=""></div>
                <div data-type="label" data-device="CallList" data-get="1-timestamp" data-part="1" class="inline"></div>
                <div data-type="label" data-device="CallList" data-get="1-timestamp" data-part="2" class="inline"></div>
                <div data-type="label" data-device="CallList" data-get="1-timestamp" data-part="3" class="inline"></div>
            </td>
            <td>
                <div data-type="label" data-device="CallList" data-get="1-name"></div>
                <div data-type="label" data-device="CallList" data-get="1-number"></div>
            </td>
            <td>
                <div data-type="label" data-device="CallList" data-get="1-duration"></div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="narrow" data-type="symbol" data-device="CallList"
                     data-get="2-state" data-states='["=>","=> X","=> ((o))","=> [=]","=> O_O"]'
                     data-icons='["oa-phone_call_end_in","oa-phone_missed_in","oa-phone_ring fa-blink","oa-phone_ring_in fa-blink","oa-phone_answersing"]'
                     data-colors='["green","firebrick","firebrick","green","#aa6900"]'></div>
            </td>
            <td>
                <div data-type="label" data-device="CallList" data-get="2-timestamp" data-part="5" class=""></div>
                <div data-type="label" data-device="CallList" data-get="2-timestamp" data-part="1" class="inline"></div>
                <div data-type="label" data-device="CallList" data-get="2-timestamp" data-part="2" class="inline"></div>
                <div data-type="label" data-device="CallList" data-get="2-timestamp" data-part="3" class="inline"></div>
            </td>
            <td>
                <div data-type="label" data-device="CallList" data-get="2-name"></div>
                <div data-type="label" data-device="CallList" data-get="2-number"></div>
            </td>
            <td>
                <div data-type="label" data-device="CallList" data-get="2-duration"></div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="narrow" data-type="symbol" data-device="CallList"
                     data-get="3-state" data-states='["=>","=> X","=> ((o))","=> [=]","=> O_O"]'
                     data-icons='["oa-phone_call_end_in","oa-phone_missed_in","oa-phone_ring fa-blink","oa-phone_ring_in fa-blink","oa-phone_answersing"]'
                     data-colors='["green","firebrick","firebrick","green","#aa6900"]'></div>
            </td>
            <td>
                <div data-type="label" data-device="CallList" data-get="3-timestamp" data-part="5" class=""></div>
                <div data-type="label" data-device="CallList" data-get="3-timestamp" data-part="1" class="inline"></div>
                <div data-type="label" data-device="CallList" data-get="3-timestamp" data-part="2" class="inline"></div>
                <div data-type="label" data-device="CallList" data-get="3-timestamp" data-part="3" class="inline"></div>
            </td>
            <td>
                <div data-type="label" data-device="CallList" data-get="3-name"></div>
                <div data-type="label" data-device="CallList" data-get="3-number"></div>
            </td>
            <td>
                <div data-type="label" data-device="CallList" data-get="3-duration"></div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="narrow" data-type="symbol" data-device="CallList"
                     data-get="4-state" data-states='["=>","=> X","=> ((o))","=> [=]","=> O_O"]'
                     data-icons='["oa-phone_call_end_in","oa-phone_missed_in","oa-phone_ring fa-blink","oa-phone_ring_in fa-blink","oa-phone_answersing"]'
                     data-colors='["green","firebrick","firebrick","green","#aa6900"]'></div>
            </td>
            <td>
                <div data-type="label" data-device="CallList" data-get="4-timestamp" data-part="5" class=""></div>
                <div data-type="label" data-device="CallList" data-get="4-timestamp" data-part="1" class="inline"></div>
                <div data-type="label" data-device="CallList" data-get="4-timestamp" data-part="2" class="inline"></div>
                <div data-type="label" data-device="CallList" data-get="4-timestamp" data-part="3" class="inline"></div>
            </td>
            <td>
                <div data-type="label" data-device="CallList" data-get="4-name"></div>
                <div data-type="label" data-device="CallList" data-get="4-number"></div>
            </td>
            <td>
                <div data-type="label" data-device="CallList" data-get="4-duration"></div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="narrow" data-type="symbol" data-device="CallList"
                     data-get="5-state" data-states='["=>","=> X","=> ((o))","=> [=]","=> O_O"]'
                     data-icons='["oa-phone_call_end_in","oa-phone_missed_in","oa-phone_ring fa-blink","oa-phone_ring_in fa-blink","oa-phone_answersing"]'
                     data-colors='["green","firebrick","firebrick","green","#aa6900"]'></div>
            </td>
            <td>
                <div data-type="label" data-device="CallList" data-get="5-timestamp" data-part="5" class=""></div>
                <div data-type="label" data-device="CallList" data-get="5-timestamp" data-part="1" class="inline"></div>
                <div data-type="label" data-device="CallList" data-get="5-timestamp" data-part="2" class="inline"></div>
                <div data-type="label" data-device="CallList" data-get="5-timestamp" data-part="3" class="inline"></div>
            </td>
            <td>
                <div data-type="label" data-device="CallList" data-get="5-name"></div>
                <div data-type="label" data-device="CallList" data-get="5-number"></div>
            </td>
            <td>
                <div data-type="label" data-device="CallList" data-get="5-duration"></div>
            </td>
        </tr>
            </table></div>
    </div>
</div>
    </div>
</li>
<li data-row="13" data-col="12" data-sizex="3" data-sizey="3">
<header>Wifi</header>
    <div class="inline cell">
        <div data-type="popup"
     data-height="300px"
     data-width="400px">
    <div><div data-type="symbol" data-icon="fa-wifi" data-on-color="green" class="bigger"></div></div>
    <div class="dialog">
        <header>Wifi Gastzugang</header>
        <div><div><br><br>#######<br><br><img src="WLAN.png"/><br><br>########</div>
    </div>
</div>
    </div>
</li>
    <li data-row="13" data-col="15" data-sizex="3" data-sizey="3">   
<header>Post</header>
        <div data-type="switch"
         data-device="Alarm_Aktiv"
         data-set-on="armnight"
         data-set-off="disarm"
         data-states='["armnight","disarm"]'
         data-icons='["fa-envelope", "fa-envelope"]'
         data-colors='["grey", "#F5DA81"]'
         data-background-icon="-"
         class="bigger" ></div>    
</li>

<li data-row="16" data-col="9" data-sizex="2" data-sizey="2">
<div data-type="popup"
     data-height="360px"
     data-width="280px">
    <div data-type="button"
     data-icon="fa-train"
     class="big" 
    data-on-color="grey"
    data-background-icon="-"></div>
    <div><div class="dialog">
        <header>Abfahrtszeiten</header>
<div class="vbox">
    <div data-type="departure"
data-device="SBahn"
data-get="Hermsdorf"
data-icon="fa-train"
data-icon-color="white"
data-interval="60"
class="alternate deptime"
style="color: #ffffff">
</div>
        </div>
    </div>
    </div>
</div>
</li>
<li data-row="16" data-col="11" data-sizex="3" data-sizey="2">
<header>Benzin</header>
<div data-type="label"
					data-device="OUT.Spritpreis"
					data-get="SuperE5"
					data-colors="#aa6900"
					data-unit=" €"
					class="container"
                    style="font-size:200%"></div>
</li>
<li data-row="16" data-col="14" data-sizex="3" data-sizey="2">
<header>Diesel</header>
<div data-type="label"
					data-device="OUT.Dieselpreis"
					data-get="Diesel"
					data-colors="#aa6900"
					data-unit=" €"
					class="inline"
                    style="font-size:200%"></div>
</li>
<li data-row="20" data-col="15" data-sizex="2" data-sizey="2">
        <div data-type="button" data-url="flur.html"
     data-icon="fa-home"
     class="big" 
    data-on-color="grey"
    data-background-icon="-"></div>
    </li>
<!-- ============= 3. Reihe =============== -->
<!-- ====================================== -->
<li data-row="1" data-col="18" data-sizex="10" data-sizey="1">
<div class="large" >Alarm Status</div>
    </li>
<li data-row="2" data-col="18" data-sizex="10" data-sizey="3">
    <div data-type="label"
         data-device="Home_Status"
         data-get="state"
         data-states='["ALARM!","HOME","AWAY","NIGHT"]'
         data-colors='["red","green","grey","blue"]'
         data-classes='["blink","-","-","-"]'
         class="big inline"></div>
    </li>
<li data-row="5" data-col="18" data-sizex="10" data-sizey="5">
<header>Eingangsbereich</header>
<div data-type="button" data-url="flur.html"
     data-icon="fa-video-camera"
     class="cell big" ></div>
    </li>
<li data-row="10" data-col="18" data-sizex="10" data-sizey="1">
<div class="large" >Zugänge</div>
</li>
<li data-row="11" data-col="18" data-sizex="2" data-sizey="3">
    <header>Haustür</header>
    <div data-type="symbol"
                        data-device="ESPEasy_Eingang_Door"
                        data-get="Switch"
                        data-icons='["ftui-door fa-blink","ftui-door"]'
                        data-states='["on","off"]'
                        data-colors='["red","grey"]'
                        data-get-on="on"
                        data-get-off="off"
                        data-background-icon="-"
                        data-on-background-color="-"
                        class="big inline">
                    </div>
    </li>
<li data-row="11" data-col="20" data-sizex="2" data-sizey="3">
    <header>Terasse</header>
    <div data-type="symbol"
                        data-device="ESPEasy_Eingang_Door"
                        data-get="Switch"
                        data-icons='["oa-fts_door_open fa-blink","oa-fts_door"]'
                        data-states='["on","off"]'
                        data-colors='["red","grey"]'
                        data-get-on="on"
                        data-get-off="off"
                        data-background-icon="-"
                        data-on-background-color="-"
                        class="big inline" >
                    </div>
</li>
<li data-row="11" data-col="22" data-sizex="2" data-sizey="3">
    <header>Keller</header>
    <div data-type="symbol"
                        data-device="ESPEasy_Eingang_Door"
                        data-get="Switch"
                        data-icons='["ftui-door fa-blink","ftui-door"]'
                        data-states='["on","off"]'
                        data-colors='["red","grey"]'
                        data-get-on="on"
                        data-get-off="off"
                        data-background-icon="-"
                        data-on-background-color="-"
                        class="big inline" >
                    </div>
</li>
<li data-row="11" data-col="24" data-sizex="2" data-sizey="3">
    <header>Garten</header>
    <div data-type="symbol"
                        data-device="ESPEasy_Eingang_Door"
                        data-get="Switch"
                        data-icons='["oa-fts_sliding_gate fa-blink","oa-fts_sliding_gate"]'
                        data-states='["on","off"]'
                        data-colors='["red","grey"]'
                        data-get-on="on"
                        data-get-off="off"
                        data-background-icon="-"
                        data-on-background-color="-"
                        class="big inline" >
                    </div>
</li>
<li data-row="11" data-col="26" data-sizex="2" data-sizey="3">
    <header>Garage</header>
    <div data-type="symbol"
                        data-device="ESPEasy_Eingang_Door"
                        data-get="Switch"
                        data-icons='["oa-fts_garage fa-blink","oa-fts_garage_door_100"]'
                        data-states='["on","off"]'
                        data-colors='["red","grey"]'
                        data-get-on="on"
                        data-get-off="off"
                        data-background-icon="-"
                        data-on-background-color="-"
                        class="big inline" >
                    </div>
</li>
<li data-row="14" data-col="19" data-sizex="3" data-sizey="3">
<header>Alarm</header>
 <div data-type="switch"
         data-device="Alarm_Aktiv"
         data-set-on="disarm"
         data-set-off="armaway"
         data-states='["disarm","armaway","armhome","armnight"]'
         data-icons='["fa-unlock", "fa-lock", "fa-lock", "fa-lock"]'
         data-colors='["white", "white", "white", "white"]'
         data-background-colors='["green", "red", "red", "red"]'
         class="cell big" ></div>   
</li>
<li data-row="14" data-col="22" data-sizex="3" data-sizey="3">   
<header>Türöffner</header>
<div data-type="switch"
         data-device="Alarm_Aktiv"
         data-set-on="armnight"
         data-set-off="disarm"
         data-states='["armnight","disarm"]'
         data-icons='["fa-bell", "fa-bell"]'
         data-colors='["grey", "#F5DA81"]'
         data-background-icon="-"
         class="cell big" ></div>    
</li>
<li data-row="14" data-col="25" data-sizex="3" data-sizey="3">   
<header>Security Cams</header>
<div data-type="button" data-url="lea_cam.html"
     data-icon="oa-it_camera"
     class="cell big" 
    data-on-color="grey"
    data-background-icon="-"></div>    
</li>
</ul>
</div>
<!-- ============== POPUPS ================= -->
<!-- ======================================= -->
<div data-type="popup"
     data-device="Alarm_Aktiv"
     data-get-on="triggered"
     data-get-off="disarm"
     data-height="500px"
     data-width="800px">
    <div class="dialog">
<header>ALARMANLAGE</header>
				</div>
    </div>
</div>
</body>
</html>

moonsorrox · 07 August 2018, 13:55:10

ich sehe dort in dem Code das du etwas von Roman nutzt.
Evtl. hast du noch einige Dinge von ihm mit drin, dass wäre dann ein Problem weil Roman kein gridster nutzt....

Hier mal der entscheiden Teil von mir im <head>, denn ich arbeite ohne Abstände zwischen den Kästchen.
Wenn du da von Usern etwas nutzt ist das evtl. ein Problem.
Baue mal meinen Teil ein (kannst ja ein neue index.html erstellen) und versuche es mal, ich nutze ja ein Flex-FTUI welches auf jedem Tablet sich der Größe anpaßt...

Code Auswählen

<head>
	<title>FHEM - Smart - Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <!--meta http-equiv="X-UA-Compatible" content="IE=edge" /-->
    <meta name="widget_margin" content="0">
    <!--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='gridster_min_width' content='100'-->
    <!--meta name='gridster_min_height' content='100'-->

    <meta name="longpoll_type" content="websocket">
    <!--meta name="longpoll_type" content="ajax"-->
    <meta name="longpoll" content="1">
    <!--meta name="longpoll_filter" content=".*"-->
    <meta name="debug" content="1"> <!-- 1=output to console;0=no output -->
    <meta name="toast" content="0"> <!-- 0=Toast off 1=Toast on -->
    <meta name="lang" content="de">
    <!--meta name="longpoll_maxage" content="240"-->
    <meta name="web_device" content="WEB">
    <!--meta name="web_device" content="WEBTABLET1"-->
    <!--meta http-equiv="Cache-Control" content="no-store" /-->
    <!--link rel="icon" href="favicon.ico" type="image/x-icon" /-->
	
	<!-- Style CSS -->
	<link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui-custom.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="lib/font-awesome.min.css" />
	<link rel="stylesheet" href="lib/material-icons.min.css" />
    <link rel="stylesheet" href="lib/jquery.toast.min.css" />
	<link rel="stylesheet" href="lib/fhemSVG.css" />
	<link rel="stylesheet" href="lib/openautomation.css" />
	<link rel="shortcut icon" type="image/x-icon" href="images/home.ico" />
	<link rel="stylesheet" href="lib/font-awesome.min.css" />
	<link rel="stylesheet" href="lib/fhemSVG.css" />
	<link rel="stylesheet" href="lib/openautomation.css" />

	<!-- Custom Fonts -->
	<link rel="stylesheet" type="text/css" href="customfonts/mf1/style.css" />
	<link rel="stylesheet" href="fonts/material/style.css" />

	<!-- Custom CSS -->
    <!--link rel="stylesheet" href="css/fhem-mobil-ui.css" /-->
    <link rel="stylesheet" href="css/fhem-tablet-ui-rene.css" />
	<link rel="stylesheet" type="text/css" href="css/fhem-flur-ui.css" />
			
	<!-- Scripts -->
    <script src="../pgm2/jquery.min.js"></script>
    <script src="lib/jquery.toast.min.js"></script>	
    <script src="js/fhem-tablet-ui.js" defer></script>
    <style>
        

    </style>
</head>

Rakete0815 · 07 August 2018, 17:05:31

So vom Ausflug mit Frau und Kind zurück und gleich mal ausprobiert.
Von Roman hatte ich eigentlich nur die fonts, in dieser html habe ich aber keine davon verwendet.

Wenn ich deinen <head> nutze, dann habe ich keine Abstände, aber es ist alles untereinander

moonsorrox · 07 August 2018, 17:34:51

ja wie schon geschrieben arbeite ich mit dem Flex Layout
Hier wird viel mit vbox, hbox und card gearbeitet, finde ich persönlich sehr gewöhnungsbedürftig weil ich von der html Programmierung eher Tabellen und dergleichen genutzt hatte, aber die Erfolge kommen so langsam bei mir.

Schau dir das mal an so als zukünftiges Projekt.
Wie du das nun mit den Abständen hinbekommst weiß ich auch nicht, evtl. meldet sich setstate dazu er ist ja hier FTUI Maker

oder auch jeder andere... Die Umsetzung ist teils nicht so ganz einfach... $:-\$