Anfänger im eigenden Tablet ui bauen

Begonnen von Wasserwerk33, 17 März 2019, 00:03:46

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

Wasserwerk33

17 März 2019, 00:03:46
Habe mich im Wiki Tablet ui durchgelesen.
Aber irgendwie klappt das nicht.
Habe mir bis jetzt immer was von anderen Kopiert. Möchte aber nun selber etwas bauen.
Und zwar mit Flexbox

Mein Hauptproblem liegt darin das ich ein Symbole und daneben dann ein label haben möchte/(will)
aber wenn ich "inline" eingebe passiert dieses nicht sondern es steht darunter.
Habe mal einfach ein paar seilen rauskopiert. Vielleicht sagt mir einer wie das geht und kann mir Tipps geben. Danke schon mal im vorraus

Code Auswählen
<div class="vbox bg-lightgray">
        <div class="hbox">
            <div class="card">
                <header></header>
                <div class="vbox">
                    <div data-type="clock" data-format="l, j. F Y" class="big"></div>
                    <div data-type="symbol" data-icon="wi wi-sunrise" data-color="White" class="inline"></div>
<div data-type="label" data-device="Mond" data-get="CustomTwilightMorning" class="inline"></div>
</div>
<div class=""><div data-type="symbol" data-icon="wi wi-sunset" data-color="White"></div> <div class=""><div data-type="label" data-device="Mond" data-get="CivilTwilightEvening"></div>
                </div>
            </div>
    <div class="vbox bg-lightgray">
        <div class="hbox">
            <div class="card"><header>Box 05</header><div data-type="symbol"></div></div>
            <div class="card"><header>Box 06</header><div data-type="symbol"></div></div>
            <div class="card"><header>Box 07</header><div data-type="symbol"></div></div>
            <div class="card"><header>Box 08</header><div data-type="symbol"></div></div>
        </div>

pataya

#1
18 März 2019, 10:51:19
Probier mal:
Code Auswählen

<div class="cell">
  <div data-type="symbol" data-icon="wi wi-sunrise" data-color="White" class=""></div>
  <div data-type="label" data-device="Mond" data-get="CustomTwilightMorning" class=""></div>
</div>


an entsprechender Stelle.

Wasserwerk33

#2
18 März 2019, 22:56:30 Letzte Bearbeitung: 18 März 2019, 23:00:22 von Wasserwerk33
Hi

Ne hat leider nicht geklappt.

Habe es dann mit hbox damit waren sie zumindestens nebeneinander aber nicht mehr untereinander.
Wie bekomme ich das den hin?

Und könntet ihr mir vielleicht sagen wie ich den Abstand oben recht geringer bekomme? Den eigentlich ist es ja ne Flexbox und müsste sich dann ja an den Platz anpassen. Aber mein Badezimmer wird nach untenhin rausgeschoben. :(


So sieht mein gesamter Code aus.

Code Auswählen
<!DOCTYPE html>
<html>

<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.5.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2017 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/
     */
    -->
    <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" / -->
<link rel="stylesheet" href="fonts/material/style.css" />
<link rel="stylesheet" href="fonts/roman/style.css" />
    <script src="js/fhem-tablet-ui.js" defer></script>
<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />

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

<body>

   <div class="hbox">
    <div class="vbox grow-1">
        <div class="card">
                <header>Heute</header>
                <div class="hbox">
                    <div data-type="clock" data-format="l, j. F Y" class="cell"></div>
<div data-type="weather" data-device="IbbenbuerenProplanta" data-get="fc0_weatherDayIcon" data-imageset="kleinklima" class="cell"></div>

<div data-type="label" data-device="LaCrosse_0C" data-temp="temperature" data-get="temperature" data-unit="%B0C%0A"></div>
<div data-type="label" data-device="IbbenbuerenProplanta" data-get="weather" class="cell"></div>

<div data-type="symbol" data-icon="wi wi-sunrise" data-color="White" class=""></div>
<div data-type="label" data-device="Mond" data-get="CivilTwilightMorning" class="cell"></div>

<div data-type="symbol" data-icon="wi wi-sunset" data-color="White" class="cell"></div>
<div data-type="label" data-device="Mond" data-get="CivilTwilightEvening" class=""></div>
                </div>
</div>
        <div class="card grow-0"><header>Wohnzimmer</header><div data-template="wohnzimmer.html"></div></div>
        <div class="card grow-0"><header>Garten</header><div data-template="garten.html"></div></div>
        <div class="card grow-0"><header>Musik</header><div data-template="musik.html"></div></div>
    </div>

    <div class="vbox">
        <div class="hbox">
            <div class="card"><header>Unwetter</header><div data-template="dwd.html"></div></div>
            <div class="card"><header>Pollenflug</header><div data-template="pollenflug.html"></div></div>
            <div class="card"><header>Gäste WLan</header><div data-template="gwlan.html"></div></div>
<div class="card"><header>Box 08</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 08</header><div data-type="symbol"></div></div>
        </div>

        <div class="hbox">
    <div class="vbox">
        <div class="card grow-0"><header></header><div data-template="eltern.html"></div>
<div class="hbox">

<div data-type="label" class="left-narrow-3x big wider">Elternzimmer</div>

<div data-type="symbol"
data-device="Elternzimmer_Radio"
class="large"
data-background-colors='["transparent","transparent"]'
data-states='["on","off"]'
data-icon="fa-music"
data-colors='["#3CE803","#FF0000"]'></div>

<div data-type="label"
data-device="LaCrosse_1B"
data-get="temperature"
data-limits='[12,15,17,20,20.1,24,26]'
data-colors='["#0000FF","#00FF80","#01DF74","#01DF01","#FFFF00","#FF8000","#FF0000"]'
data-unit="°C"
class="wider bigger"></div>

    <div data-type="label"
         data-device="LaCrosse_1B"
data-get="humidity"
data-limits='[39,40,60]'
data-colors='["#0000FF","#00FF00","#FF0000"]'
data-unit="%"
class="wider bigger"></div>

</div>
</div>
        <div class="card grow-0"><header></header><div data-template="ole.html"></div>

<div class="hbox">
<div data-type="label" class="left-narrow-3x big wider">Ole Zimmer</div>

<div data-type="symbol"
data-device="OLE_Radio"
class="large"
data-background-colors='["transparent","transparent"]'
data-states='["on","off"]'
data-icon="fa-music"
data-colors='["#3CE803","#FF0000"]'></div>

<div data-type="symbol"
data-device="Brennstuhl_C"
class="large"
data-background-color="transparent"
data-states='["on","off"]'
data-icons='["oa-light_light_dim_100","oa-light_light"]'
data-colors='["#F7FE2E","#FFFFFF"]'></div>

<div data-type="label"
data-device="LaCrosse_23"
data-get="temperature"
data-limits='[12,15,17,20,20.1,24,26]'
data-colors='["#0000FF","#00FF80","#01DF74","#01DF01","#FFFF00","#FF8000","#FF0000"]'
data-unit="°C"
class="wider bigger"></div>

<div data-type="label"
    data-device="LaCrosse_23"
data-get="humidity"
data-limits='[39,40,60]'
data-colors='["#0000FF","#00FF00","#FF0000"]'
data-unit="%"
class="wider bigger"></div>
</div>
</div>

        <div class="card grow-0"><header></header><div data-template="til.html"></div>
<div class="hbox">
<div data-type="label" class="left-narrow-3x big wider">Ole Zimmer</div>

<div data-type="label"
data-device="_Radio"
class="large"
data-background-colors='["transparent","transparent"]'
data-states='["on","off"]'
data-icon="fa-music"
data-colors='["#3CE803","#FF0000"]'></div>

<div data-type="label"
data-device="LaCrosse_20"
data-get="temperature"
data-limits='[12,15,17,20,20.1,24,26]'
data-colors='["#0000FF","#00FF80","#01DF74","#01DF01","#FFFF00","#FF8000","#FF0000"]'
data-unit="°C"
class="wider bigger"></div>

    <div data-type="label"
         data-device="LaCrosse_20"
data-get="humidity"
data-limits='[39,40,60]'
data-colors='["#0000FF","#00FF00","#FF0000"]'
data-unit="%"
class="wider bigger"></div>
</div>
</div>

        <div class="card grow-0"><header></header><div data-template="badezimmer.html"></div></div>
<div class="hbox">
<div data-type="label" class="left-narrow-3x big wider">Ole Zimmer</div>

<div data-type="symbol"
data-device="Badezimmer_Radio"
class="large"
data-background-colors='["transparent","transparent"]'
data-states='["on","off"]'
data-icon="fa-music"
data-colors='["#3CE803","#FF0000"]'></div>

<div data-type="label"
data-device="ZWave_THERMOSTAT_9"
data-get="temperature"
data-limits='[12,15,17,20,20.1,24,26]'
data-colors='["#0000FF","#00FF80","#01DF74","#01DF01","#FFFF00","#FF8000","#FF0000"]'
data-unit="°C"
class="wider bigger"></div>
</div>
    </div>


            </li>
        </ul>
    </div>
</body>

</html>

yersinia

#3
18 März 2019, 23:42:36
Für die Wetteranzeige kannst du hbox und vbox mischen, in etwa so:
Code Auswählen
<div class="card">
        <header>Heute</header>
                <div class="hbox">
                    <div data-type="clock" data-format="l, j. F Y" class="cell"></div>
<div data-type="weather" data-device="IbbenbuerenProplanta" data-get="fc0_weatherDayIcon" data-imageset="kleinklima" class="cell"></div>

<div data-type="label" data-device="LaCrosse_0C" data-temp="temperature" data-get="temperature" data-unit="%B0C%0A"></div>
<div data-type="label" data-device="IbbenbuerenProplanta" data-get="weather" class="cell"></div>

<div class="vbox">
<div data-type="symbol" data-icon="wi wi-sunrise" data-color="White" class=""></div>
<div data-type="label" data-device="Mond" data-get="CivilTwilightMorning" class="cell"></div>
</div> <!-- //vbox -->

<div class="vbox>
<div data-type="symbol" data-icon="wi wi-sunset" data-color="White" class="cell"></div>
<div data-type="label" data-device="Mond" data-get="CivilTwilightEvening" class=""></div>
</div> <!-- //vbox -->
</div> <!-- //hbox -->
</div>

Der Abstand oben rechts kommt wahrscheinlich von dieser hbox - du schiebst alles in eine horizontale box.
Code Auswählen
<body>

   <div class="hbox"> <!-- hier zB -->
    <div class="vbox grow-1">
Ohne weitere Angaben werden diese vertikal zentriert. MWn (aber ohne sich mit FlexBox auszukennen) brauchst du die umschließenden hbox/vbox div-container nicht. die card-div container müssten eigentlich reichen.
viele Grüße, yersinia
----
FHEM 6.4 (SVN) on RPi 4B with RasPi OS Bookworm (perl 5.36.0) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl
Drucken
Nach oben Seiten1
Benutzer-Aktionen