[FHEM-Tablet-UI] User-Demos

[Dominic]

Hallo Dominic,

diese Frage kann ich dir nicht beantworten. Es ist bestimmt durch eine Anpassung über einen User-CSS Eintrag möglich. Hast du schonmal das Forum durchsucht? Falls du nicht fündig wirst, kannst du das Thema in einem separaten Thread adressieren.

Viele Grüße
Andreas

Hi Andreas,
hat sich dann später erledigt. Habe es über die CSS hinbekommen. Danke für die Antwort

[SirMarco]

In Summe sind es über 50 Seiten. Habe ein paar ausgewählte Screenshots gemacht. Falls mehr gewünscht ist, bitte mit dem Seitentitel anfragen. Weiterhin habe ich den gesamten Code anonymisiert und angehängt. Habe auch noch die FHEM.cfg auf Nachfrage angehangen. Dort kann man Nachschauen, wie die FHEM-Devices konfiguriert sind.

PS: Habe das Flex Layout in Kombination mit Templates verwendet, ist somit für jegliche Auflösungen geeignet. Ich nutze es mit iPad, iPhone und Browser. Ein paar Höhen sind für Auflösung des iPads angepasst (1024*768).

Viel Spaß damit
Andreas

Wow! Das sieht mal Klasse aus! Wie viel Zeit hast du darin investiert?

Darf man fragen warum du kein Websocket nutzt?

Liebe Grüsse

[juemuc]

Hallo Jürgen
sehr schön. Gefällt mir.
Würdest du bitte auch dein config und html für die Batterieanzeige zur Verfügung stellen?
Danke und Gruß
Helmut

Hallo Helmut,

anbei meine gesamte html-Datei. Was meinst Du mit "config"?

Viele Grüße
Jürgen

[amenomade]

Wahrscheinlich den relevanten Teil von fhem.cfg

[somansch]

Wow! Das sieht mal Klasse aus! Wie viel Zeit hast du darin investiert?

Darf man fragen warum du kein Websocket nutzt?

Liebe Grüsse

Hallo Marco,
danke für die Blumen  . Ich habe die Stunden nicht gezählt, ist halt ein Hobby seit 4 Jahren...

Ich nutze Websocket, habe die globalen attribute nicht mit veröffentlicht.

VG
Andreas

[Helmi55]

hallo juemuc
amenomade hat es bereits geschrieben. bitte en relevanten Teil einer config Datei
LG
Helmut

[juemuc]

Hallo Helmut,

ich verstehe zwar den Sinn nicht, da ich ja die Readings auslese aber hier mal zwei Devices.

Code Auswählen Erweitern

defmod FBDECT_FB_10971_0203216 FBDECT FB:10971_0203216 actuator,tempSensor
attr FBDECT_FB_10971_0203216 IODev FB
attr FBDECT_FB_10971_0203216 alexaName Heizkörper Esszimmer links
attr FBDECT_FB_10971_0203216 alias Heizkörper Esszimmer links
attr FBDECT_FB_10971_0203216 event-min-interval power:120
attr FBDECT_FB_10971_0203216 event-on-change-reading .*
attr FBDECT_FB_10971_0203216 group DECT Heizung
attr FBDECT_FB_10971_0203216 icon hc_wht_regler
attr FBDECT_FB_10971_0203216 room AVM,Alexa,Statuszentrale,Wohnzimmer
attr FBDECT_FB_10971_0203216 sortby 03

defmod HM_Sec_SCo_OEQ0223456 HMCCUDEV OEQ0223456
attr HM_Sec_SCo_OEQ0223456 IODev HMCCU3
attr HM_Sec_SCo_OEQ0223456 alias HM Türkontakt Flur
attr HM_Sec_SCo_OEQ0223456 devStateStyle style="text-align:right"
attr HM_Sec_SCo_OEQ0223456 genericDeviceType contact
attr HM_Sec_SCo_OEQ0223456 group HM Fenster-/Türkontakte
attr HM_Sec_SCo_OEQ0223456 hmstatevals ERROR!7:sabotage;;SABOTAGE!1:sabotage
attr HM_Sec_SCo_OEQ0223456 icon hm-sec-win@black
attr HM_Sec_SCo_OEQ0223456 stateFormat {"Status: ".ReadingsVal($name,"state" ,"")." / LastOpen: ".ReadingsVal($name,"LastOpen","")}
attr HM_Sec_SCo_OEQ0223456 statedatapoint 1.STATE
attr HM_Sec_SCo_OEQ0223456 substitute STATE!(0|false):closed,(1|true):open
attr HM_Sec_SCo_OEQ0223456 userReadings LastOpen:1.STATE.* {if (ReadingsVal($name,"state","") eq "open") {ReadingsTimestamp($name,"state","") =~ /^(\d+)-(\d+)-(\d+)\s(\d+:\d+:\d+)$/;; return "$3.$2.$1 - $4";;} else {ReadingsVal($name,"LastOpen","")}}


Viele Grüße
Jürgen

[Nogga]

Hallo zusammen. Ich dachte es wird Zeit Euch mal meine Installation zu zeigen.
Achtung die Bilder zeigen teilweise unterschiedliche Versionsstände... Das ganze ist immer noch work in progress, aber im Moment genau so im Einsatz...

Ein paar Eckpunkte:

- Die Oberfläche läuft auf 2 Tablets, die in den Wänden eingelassen sind
- der WAF ist auf jedenfall gegeben
- Basiert auf FTUI aber mit viel custom-HTML (feste Positionierung, kein FTUI Grid usw.)
- Die Grundrisse sind intelligent. D.h. sie zeigen natürlich die Status der einzelnen Controls an (An/Aus, Offen/Zu) und gleichzeitig signalisieren sie auch kritische Punkte: z.B. offene Fenster mit einem roten Rahmen oder hohe Luftfeuchtigkeit (>70%) mit rotem Hintergrund
- die 2x3 Kacheln sind Makros oder Schnellaktionen...
- Die Tablets schalten sich per MotionDetection (Fully Browser) an und aus

Das Ganze läuft schon ein 1/2 ganz stabil...

[Wasserwerk33]

Hallo Leute

Vielleicht könnt ihr mir ja sagen was ich falsch mache. Und zwar es ist mein erstes Tablet ui mit Flex.

Ich möchte gerne Daten nebeneinander anordnen. Leider klappt das mit inline nicht. Was mache ich falsch??
es geht um das Wetter und den Sonnenaufgang im ersten abschnitt.

Und könnte mir vielleicht auch jemand sagen wie ich den Abstand zwischen UWZ und dem Elternzimmer verkleinern kann??

So sieht mein Code aus.

Danke schon mal für eure Hilfe. 

Code Auswählen Erweitern

<!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" / -->

    <script src="js/fhem-tablet-ui.js" defer></script>


    <!-- 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="vbox">
                    <div data-type="clock" data-format="l, j. F Y" class="big"></div>
<div data-type="weather" data-device="IbbenbuerenProplanta" data-get="fc0_weatherDayIcon" data-imageset="kleinklima"></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"></div>
<div data-type="symbol" data-icon="wi wi-sunrise" data-color="White"></div>
<div data-type="label" data-device="Mond" data-get="CivilTwilightMorning"></div>
<div data-type="symbol" data-icon="wi wi-sunset" data-color="White"></div>
<div data-type="label" data-device="Mond" data-get="CivilTwilightEvening"></div>
                </div>
</div>
        <div class="card grow-0"><header>Box 02</header><div data-type="symbol"></div></div>
        <div class="card grow-0"><header>Box 03</header><div data-type="symbol"></div></div>
        <div class="card grow-0"><header>Box 04</header><div data-type="symbol"></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"><header>Eltern</header><div data-type="symbol"></div></div>
        <div class="card"><header>Ole Schlafzimmer</header><div data-type="symbol"></div></div>
        <div class="card"><header>Til Schlafzimmer</header><div data-type="symbol"></div></div>
        <div class="card"><header>Badezimmer</header><div data-type="symbol"></div></div>
    </div>
    </div>
</div>

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

</html>

[MKeY]

vbox   Definiert das HTML-Element als vertikalen Container. Die Inhalte werden übereinander angeordnet.   flex-direction: column
hbox   Definiert das HTML-Element als horizontalen Container. Die Inhalte werden nebeneinander angeordnet.   flex-direction: row

mach eine hbox draus

[Wasserwerk33]

Danke

ich werde es Probieren.

[Wasserwerk33]

@MKeY
Es hat mir zumindetsne bei meinen Zimmern geholfen. Aber leider nicht bei meinem Ersten oben lings. Die sind dann alle schön nebeneinander aber leider klappt es dann nicht das ich sie untereinander bekommen (die anderen wieder).

[my-engel]

Hallo Nogga,

deine Wandhalterung für das Tablet sieht prima aus,
wo bekommt man so etwas her?

MfG
Uwe

[Nogga]

deine Wandhalterung für das Tablet sieht prima aus,
wo bekommt man so etwas her?

Holger aus dem Homematic-Forum bietet sowas an:
https://homematic-forum.de/forum/viewtopic.php?t=22059

[pnewman]

Hallo Nogga,

vielen Dank für deine Bilder.
Genauso stelle ich mir meine Installation in etwa vor.
Der WAF Hoch, Das Tablet nicht überfüllt!

Welche Tablet benutzt du?
Benutzt du DOORPI?
Oder nur eine Kamera, welche?

Kannst du deine index etc. zur Verfügung stellen?

Würde gerne sehen wie meine Familie darauf reagiert.

Gruß
Ralf