[FHEM-Tablet-UI] User-Demos

[NoPlan12]

Boah peinlich....danke das war es.

[meddie]

kann passieren

[Dominic]

Hallo zusammen,

Nachdem ich vor einigen Monaten versprochen hatte, meinen UI Code zu veröffentlichen, tue ich das hiermit.
Allerdings habe ich inzwischen ein Redesign vorgenommen, basierend auf einem besseren Verständnis der Widgets und User Feedback (meine Frau).

Ich habe versucht, ein Tablet/App artiges Look & Feel zu verwirklichen und nur jeweils wirklich relevante Informationen anzuzeigen. Also exzessiver Gebrauch von data-hide

Desweiteren habe ich die alternativen Funktionen von Pagebutton genutzt, um ZWEI Anzeigefelder zu bespielen. Hier geht der default/return Mechanismus flöten, das stört mich aber nicht groß.

Das Hintergrundbild (ja: Geschmackssache) ist so gewählt, dass weiße Schrift überall zu lesen ist, ohne klobige Hintergrund-Felder anzeigen zu müssen. Die transparenten Felder in den Bereichen 2) und 4) dienen lediglich der optischen Strukturierung.

Hi hsepm, sehr coole Arbeit. Ich verusche gerade die UI auf meinem Raspberry Touchpanel einzurichten.
Könntest du mir eventuell einen Tipp geben, wie ich die größe/Auflösung anpassen kann, so das mir der Inhalt vernüftig auf dem 7 Zoll Display mit 800x480 px angezeigt werden kann?
Vorab schon mal Danke

[NoPlan12]

Hallo,
ich wollte mein TabletUi nun mal auf einem Tablet ausprobieren um mal ein Gefühl dafür zu bekommen, wie sich das denn von einem 20 zoll Monitor auf einem 9 Zoll Tablet so darstellt. Dazu habe ich nach Anleitung die Tasker App, die securesettings App, die Fully Kisok Browser App und den Motion Detector installiert. In der Anleitung sah das wie immer easy aus, nur bei mir klappt es nicht so recht. Wenn ich die Fully App öffne bekomme ich folgende Fehlermeldung  "net::ERR_CONNCTION_RESET" . Wenn ich die Website Adresse in den Chrombrowser eingebe, bekomme ich aber ein Verbindung zu meinem TabletUi. Wie kann ich das lösen? oder wie habt Ihr das umgesetzt.
Hat jemand ein Idee. Danke schon mal.

Gruß Jens

[meddie]

Hallo Jens,
dieser Thread hier dient dazu, dass User ihre TabletUI Variationen vorstellen können, und andere sich wiederum Ideen für Ihre Lösung sammeln können.
Wenn Du ein Problem hast, bitte ein eigenes Thema öffnen, falls Du zu deinem Problem kein anderes Thema findest. (Hier im Forum gibt es zu fast allen ein Thema und eine Lösung)

VG Eddie

[Shojo]

Hallo zusammen,

nachdem ich in einem anderen Thread gebeten wurde den Code von meiner FTUI bereitzustellen, möchte ich das nun hier tun und nicht den anderen Thread dafür missbrauchen.

Moin Olli,

kann Du mir bitte verraten wie du das mit den Counts (z.B. dFenster usw.) umgesetzt hast?!

Gruß
Dennis

[octek0815]

Moin Dennis,

Hier am Beispiel für Fenster und Türen:

du brauchst einen Fenster Dummy...

Code Auswählen Erweitern


defmod dFenster_Gesamtstatus dummy
attr dFenster_Gesamtstatus devStateIcon open:fts_window_1w@red closed:fts_window_1w


und ein Tür Dummy...

Code Auswählen Erweitern


defmod dTueren_Gesamtstatus dummy
attr dTueren_Gesamtstatus devStateIcon closed:fts_door_right open:fts_door_right@red


Dann benötigst du noch etwas was auf die Events reagiert und was auslöst (DOIF oder Notify)

Code Auswählen Erweitern


defmod diWindowDoorOpenCount DOIF ([".*:(open|tilted|closed)$"]) ({WindowDoorOpenCount("$DEVICE", "$EVENT")})
attr diWindowDoorOpenCount do always
attr diWindowDoorOpenCount icon helper_doif


Hier dann noch der Code für die 99_myUtils.pm

Code Auswählen Erweitern


# - START - Anzahl offener Fenster und Türen Zählen
sub WindowDoorOpenCount($$) {
    #Als Parameter muss der device-Name übergeben werden
    my ($dev,$event)=@_;
   
    #Der dummy der verwendet wird, um die offenen Tueren nachzuhalten
    my $dummyDoor = 'dTueren_Gesamtstatus';
#Der dummy der verwendet wird, um die offenen Fenster nachzuhalten
    my $dummyWindow = 'dFenster_Gesamtstatus';
   
    #Erst mal prüfen, ob das übergebene device überhaupt existiert
    if ($dev =~ /[Tt]uersensor/ && $dev ne 'Wohnzimmer_EG_Terrassentuersensor' && $defs{$dev})
    {
        my $model=AttrVal($dev,'model','');
        if ($model eq 'HM-SEC-SCo' || $model eq 'HM-Sec-SC-2')
        {
            #hole die liste der Fenster, die gerade offen sind
            my $openDoors = ReadingsVal($dummyDoor, 'openDoors', '');
            my @parts;
            @parts = split(/,/, $openDoors) if ($openDoors ne '-');

            # wenn die aktuelle Tuer noch nicht in der liste ist -> hinzufuegen
            if ($event eq 'open') {
                # add element to array if not already there
                push(@parts, $dev) unless grep{$_ eq $dev} @parts;
            }
            elsif ($event eq 'closed') {
                # remove element from array
                @parts = grep {$_ ne $dev} @parts;
            }
           
            # aktualisiere die Readings des dummies
            my $openDoorsCount = scalar(@parts);
            if ($openDoorsCount > 0) { $openDoors = join(',', @parts); }
            else                       { $openDoors = '-';               }
            fhem("setreading $dummyDoor openDoors $openDoors");
            fhem("setreading $dummyDoor openDoorsCount $openDoorsCount");
        }
    } elsif ($dev =~ /[Ff]enstersensor|Terrassentuersensor/ && $defs{$dev})
    {
        my $model=AttrVal($dev,'model','');
        if ($model eq 'HM-SEC-SCo' || $model eq 'HM-SEC-RHS')
        {
            #hole die liste der Fenster, die gerade offen sind
            my $openWindows = ReadingsVal($dummyWindow, 'openWindows', '');
            my @parts;
            @parts = split(/,/, $openWindows) if ($openWindows ne '-');

            # wenn das aktuelle Fenster noch nicht in der liste ist -> hinzufuegen
            if ($event eq 'open' || $event eq 'tilted') {
                # add element to array if not already there
                push(@parts, $dev) unless grep{$_ eq $dev} @parts;
            }
            elsif ($event eq 'closed') {
                # remove element from array
                @parts = grep {$_ ne $dev} @parts;
            }
           
            # aktualisiere die Readings des dummies
            my $openWindowsCount = scalar(@parts);
            if ($openWindowsCount > 0) { $openWindows = join(',', @parts); }
            else                       { $openWindows = '-';               }
            fhem("setreading $dummyWindow openWindows $openWindows");
            fhem("setreading $dummyWindow openWindowsCount $openWindowsCount");
        }
    }
}
# - STOP - Anzahl offener Fenster und Türen Zählen


Den Code für die FTUI von mir hast du ja bereits.

Grüße
Olli

[Shojo]

Ich habe das nun so gelöst..

Code Auswählen Erweitern


defmod Monitoring.DOIF.Fenster DOIF ([#".*\.Sensor\.Fenster":state:"open"] > 0)\
(\
set $SELF openWindowsCount [#".*\.Sensor\.Fenster":state:"open"],\
set $SELF openWindowsState open\
)\
DOELSE\
(\
set $SELF openWindowsCount 0,\
set $SELF openWindowsState closed\
)\

attr Monitoring.DOIF.Fenster do always
attr Monitoring.DOIF.Fenster icon helper_doif
attr Monitoring.DOIF.Fenster readingList openWindowsCount openWindowsState
attr Monitoring.DOIF.Fenster room 2.1_Sensoren,9.2_DOIF
attr Monitoring.DOIF.Fenster stateFormat openWindowsState


[Cruiser79]

Code Auswählen Erweitern

define AbfallkalenderGoogle Calendar ical url https://calendar.google.com/calendar/ical/************.ics 12000
attr AbfallkalenderGoogle room Kalender
define myAbfall ABFALL AbfallkalenderGoogle
attr myAbfall room Kalender
define Calendar_nachladen at *01:00:00 set AbfallkalenderGoogle reload

define GraueTonne dummy
define BrauneTonne dummy
define GelbeTonne dummy
define Resetschalter dummy

define GraueTonne_AT at *02:00:00 set GraueTonne [myAbfall:AbfallkalenderGoogle_GraueTonne_tage]
define BrauneTonne_AT at *02:00:00 set BrauneTonne [myAbfall:AbfallkalenderGoogle_BrauneTonne_tage]
define GelbeTonne_AT at *02:00:00 set GelbeTonne [myAbfall:AbfallkalenderGoogle_GelbeTonne_tage]

define Tonnen_Reset_notify notify Resetschalter:Reset set GraueTonne [myAbfall:AbfallkalenderGoogle_GraueTonne_tage];;set BrauneTonne [myAbfall:AbfallkalenderGoogle_BrauneTonne_tage];;set GelbeTonne [myAbfall:AbfallkalenderGoogle_GelbeTonne_tage]


meinst du den Code?

In FTUI hab ich halt 3 mal einen Switch, der jeweils die Graue,Braune,Gelbe Tonne anzeigt mit der oben geholten Restzeit.
Beim klick auf den jeweilgen Switch wird ein "set GraueTonne OK" abgefeuert.
In der Anzeige habe ich dann per Switch bei:

2-x die jeweiligen Mülltonnensymbole mit der Zahl,
1 eine blinkende Mülltonne
0 eine Müllabfuhr und
"OK" einen grünen harken mit grüner Kreisumrandung.

Durch den kleinen Button im Header kann ich den "Resetschalter" betätigen, dann werden alle Mülltonnenzahlen wieder beschrieben, sprich der Harken würde wieder rausfliegen da "OK" wieder mit dem Wert der Müllabholung  0-x überschrieben wird (z.B. bei Fehlbetätigung). Ansonsten passiert das um 2 Uhr nachts automatisch

Hi Andre0909,

sehr gelungene Umsetzung mit den Mülltonnen. Kannst du nochmal erklären, wie du auf den Switch die Restlaufzeit des Dummys bekommen hast? Am besten dein FTUI Code dafür.

Gruß,
Tim

[BigGB]

Hallo zusammen,

nachdem ich in einem anderen Thread gebeten wurde den Code von meiner FTUI bereitzustellen, möchte ich das nun hier tun und nicht den anderen Thread dafür missbrauchen.

Das Ganze ist optimiert für eine Full-HD Auflösung. Da gibt es sicherlich noch Optimierungspotential und Vorschläge sind gern willkommen. 
Ich bin auch noch nicht mit allen Seiten fertig.

Hier noch eine kleine Auswahl an Screenshots.
Nutzen tue ich folgendes Tablet: https://forum.fhem.de/index.php/topic,51191.msg771571.html#msg771571

Grüße
Olli

Hallo Olli,
mich würden Deine ganzen Statusabfragen, wie z.B. "dBeschattungOnOff", interressieren wie Du die in FHEM gelöst hast. Wäre nett wenn Du den Code zu Verfügung stellen würdest.
Zudem bin ich an einer Lösung interressiert, wie man die Darstellung runterskalieren kann.

Danke und Grüße Gerald

[Caleus]

Hey Leute

nach den vielen anfangs Problemen bin ich nun an dem FTUI dran, und wollte es euch nun mal in einer kleinen vorab Version zeigen. Vieleicht hat der eine oder andere ja dadurch Inspiration.
Wie man sehen kann fehlen aber noch ein Paar seiten.

Caleus

[Octopus180]

Sieht sehr gut aus. [emoji106]
Würdest du uns auch den Code dafür geben, damit man sieht wie du das umgesetzt hast.

Gruß Peter

[Caleus]

Hallo Peter

Sehr gerne, ich habe mir als Vorlage das FTUI_Widget_Pagebutton genommen

https://wiki.fhem.de/wiki/FTUI_Widget_Pagebutton

und habe darauf aufgebaut. Hier mal die HTML von der Index.html

Code Auswählen Erweitern

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="74">
    <meta name="widget_base_height" content="65">
    <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"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="0"> <!-- verbose level 1-6 = output to console;0 = not output -->
    <meta http-equiv="Cache-Control" content="no-store" />


    <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" />
    <link rel="stylesheet" href="css/ftui_chart.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>

    <title>Home</title>
</head>
<body>
<div class="gridster">
        <ul>
                <li data-row="1" data-col="1" data-sizex="2" data-sizey="7" data-template="menu.html" class="halbTransparent"></li>
                <li data-row="1" data-col="1" data-sizex="7" data-sizey="7" ></li>
        </ul>
</div>
</body>
</html>

Das hier ist für die Navigation (menu.html):

Code Auswählen Erweitern

<li data-row="1" data-col="1" data-sizex="1" data-sizey="2" class="halbTransparent,">
<header>Navigation</header>

                <div data-type="pagetab" data-url="wall.html" data-icon="fa-home" class="" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="#FBB117"></div>Home

                <div data-type="pagetab" data-url="wetter.html" data-icon="fas fa-cloud" class="" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="#FBB117"></div>Wetter

                <div data-type="pagetab" data-url="system.html" data-icon="fas fa-desktop" class="" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="#FBB117"></div>System

                <div data-type="pagetab" data-url="Temp.html" data-icon="fas fa-thermometer" class=""></div>Temp

                <div data-type="pagetab" data-url="Termine.html" data-icon="fas fa-calendar" class=""></div>Termine

                <div data-type="pagetab" data-url="licht.html" data-icon="fa-lightbulb-o" class=""></div>Licht

                <div data-type="pagetab" data-url="tanken.html" data-icon="mi-local_gas_station" class=""></div>Tanken


</li>

und das hier ist die Hauptseite, diese wird mit der index.html mit geladen:

Code Auswählen Erweitern

<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="7" data-template="menu.html" class="halbTransparent"></li>
<li  data-row="1" data-col="1" data-sizex="4" data-sizey="2" class="halbTransparent ">
        <header>Datum und Uhrzeit</header>
        <div data-type="clock" data-format="H:i:s" class="great thin"></div>
        <div data-type="clock" data-format="d.m.Y" class="bigger thin"></div>

</li>


<li data-row="1" data-col="2" data-sizex="2" data-sizey="2" class="halbTransparent ">
<header>Wetter</header>
        <div data-type="weather" data-device="MyWeather" data-get="condition" class="large"></div>
        <div data-type="label" data-device="AURIOL_82" data-temp="temperature" data-get="temperature" data-unit="%B0C%0A" class="bigger thin"></div>
        <div data-type="label" data-device="MyWeather" data-get="condition" class="thin"></div>

</li>

<li data-row="1" data-col="3" data-sizex="1" data-sizey="2" class="halbTransparent ">
        <div data-type="weather" data-device="MyWeather" data-get="fc2_condition" class="cell large"></div>
        <div class="inline">
                <div data-type="label" data-device="MyWeather" data-get="fc2_low_c" data-unit="%B0C%0A" class="large"></div>
        </div>
        <div class="inline">
                <div data-type="label" data-device="MyWeather" data-get="fc2_high_c" data-unit="%B0C%0A" class=" large"></div>
        </div>
                <div data-type="label" data-device="MyWeather" data-get="fc2_day_of_week" class="cell bigger thin"></div>

</li>

<li data-row="1" data-col="4" data-sizex="1" data-sizey="2" class="halbTransparent ">
        <div data-type="weather" data-device="MyWeather" data-get="fc3_condition" class="cell large"></div>
        <div class="inline">
                <div data-type="label" data-device="MyWeather" data-get="fc3_low_c" data-unit="%B0C%0A" class="large"></div>
        </div>
        <div class="inline">
                <div data-type="label" data-device="MyWeather" data-get="fc3_high_c" data-unit="%B0C%0A" class=" large"></div>
        </div>
                <div data-type="label" data-device="MyWeather" data-get="fc3_day_of_week"  class="cell bigger thin"></div>

</li>
<li data-row="1" data-col="5" data-sizex="1" data-sizey="2" class="halbTransparent ">
        <div data-type="weather" data-device="MyWeather" data-get="fc4_condition" class="cell large"></div>
        <div class="inline">
                <div data-type="label" data-device="MyWeather" data-get="fc4_low_c" data-unit="%B0C%0A" class="large"></div>
        </div>
        <div class="inline">
                <div data-type="label" data-device="MyWeather" data-get="fc4_high_c" data-unit="%B0C%0A" class="large"></div>
        </div>
                <div data-type="label" data-device="MyWeather" data-get="fc4_day_of_week"  class="cell bigger thin"></div>


</li>
<li data-row="1" data-col="6" data-sizex="1" data-sizey="2" class="halbTransparent ">
        <div data-type="weather" data-device="MyWeather" data-get="fc5_condition" class="cell large"></div>
        <div class="inline">
                <div data-type="label" data-device="MyWeather" data-get="fc5_low_c" data-unit="%B0C%0A" class="large"></div>
        </div>
        <div class="inline">
                <div data-type="label" data-device="MyWeather" data-get="fc5_high_c" data-unit="%B0C%0A" class="large"></div>
        </div>
                <div data-type="label" data-device="MyWeather" data-get="fc5_day_of_week"  class="cell bigger thin"></div>


</li>
<li data-row="1" data-col="7" data-sizex="1" data-sizey="2" class="halbTransparent ">
        <div data-type="weather" data-device="MyWeather" data-get="fc6_condition" class="cell large"></div>
        <div class="inline">
                <div data-type="label" data-device="MyWeather" data-get="fc6_low_c" data-unit="%B0C%0A" class="large"></div>
        </div>
        <div class="inline">
                <div data-type="label" data-device="MyWeather" data-get="fc6_high_c" data-unit="%B0C%0A" class="large"></div>
        </div>
                <div data-type="label" data-device="MyWeather" data-get="fc6_day_of_week"  class="cell bigger thin"></div>


</li>

<li  data-row="3" data-col="2" data-sizex="3" data-sizey="2" class="halbTransparent ">
<header>Wunderlist</header>
    <div class="thin">


     <div class="notransmit" data-type="input" id="sendTask"></div>
         <div class="round center" data-type="link" data-width="80" data-height="40" data-color="white" data-background-color="green" data-icon="fas fa-shopping-cart" data-device="WEB_Wunderlist" data-set="addTask" data-value="#sendTask">OK</div>
     </div>

</li>
<li data-row="3" data-col="5" data-sizex="8" data-sizey="2" class="halbTransparent ">
<header>Licht</header>
        <div class="center">
                <div class="inline">
                        <div data-type="switch" data-device="Licht1" class="large" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="green"></div>
                        <div class="thin">Lounge Licht</div>
                </div>
                <div class="inline left-space-1x">
                        <div data-type="switch" data-device="WohnzimmerTV" class="large" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="green"></div>
                        <div class="thin">TV Wohnzimmer</div>
                </div>
                <div class="inline left-space-1x">
                         <div data-type="switch" data-device="wz.licht.decke" class="large" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="green"></div>
                               <div class="thin">Led Regal Wohnzimmer</div>
                </div>
                <div class="inline left-space-1x">
                        <div data-type="switch" data-device="Funksteckdose.C" class="large" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="green"></div>
                               <div class="thin">Küche</div>
                </div>
                <div class="inline left-space-1x">
                        <div data-type="switch" data-device="SchlafzimmerTV"  class="large" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="green"></div>
                        <div class="thin">TV Schlafzimmer</div>
                </div>
                <div class="inline left-space-1x">
                        <div data-type="switch" data-device="SchlafzimmerLicht"  class="large" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="green"></div>
                        <div class="thin">Licht Schlafzimmer</div>
                </div>
                <div class="inline left-space-1x">
                        <div data-type="switch" data-device="Ventilator.Warm" data-get="state" data-states='["cmd_1","cmd_2"]' data-icons='["oa-vent_ventilation_level_automatic","oa-vent_ventilation"]' class="large" data-on-background-color="transparent" data-off-background-color="transparent" data-colors='["green","grey"]'></div>
                            <div class="thin">Ventilator</div>
                </div>
        </div>
</li>

<li data-row="5" data-col="2" data-sizex="1" data-sizey="3" class="halbTransparent ">
<header>Tür</header>
        <div class="inline top-space">
                  <div data-type="symbol" data-device="NUKIDevice246883369" data-get="battery" data-states='["ok","low"]' data-icons='["fa-battery-4","fa-battery-1 fa-blink"]' data-colors='["green","red"]'></div>
                   <br>
                  <div data-type="switch" data-device="NUKIDevice246883369" data-get="state" data-icons='["ftui-door","ftui-door warn"]' data-states='["locked","unlocked"]' data-set-states='["lock","unlock"]'  data-colors='["green","red"]' data-on-background-color="transparent" data-off-background-color="transparent"></div>
                  <br>
                  <br>
                  <div data-type="label" class="">Tür</div>
        </div>
</li>


<li data-row="5" data-col="4" data-sizex="1" data-sizey="3" class="halbTransparent ">
<header>Aussen</header>
        <div class="inline top-space">
                  <div data-type="symbol" data-device="AURIOL_82" data-get="battery" data-states='["low","ok"]' data-icons='["fa-battery-1","fa-battery-4"]' data-colors='["red","green"]'></div>
                  <div data-type="label" class="">Sensor</div>
                  <br>
                  <br>
                  <div data-type="switch" data-icon="fas fa-tint" data-device="Funksteckdose.out" class="small" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="green" ></div>
                  <div data-type="label" class="">Brunnen</div>
        </div>
</li>

<li data-row="5" data-col="6" data-sizex="6" data-sizey="3" class="halbTransparent ">
<header>Home Status</header>
  <div class="center">
  <div class="inline">
                    <div class="row">
                        <div class="big">
                          <div class="col-1-6">
                          <div data-type="switch" data-device="Home.Status" data-get-on="Home" data-get-off="!on" -set-off="" class="green" data-icon="fa-home" data-background-icon="fa-square" ></div>
                          <div data-type="label" class="inline">Home</div>
                          </div>

                          <div class="col-1-6">
                          <div data-type="switch" data-device="Home.Status" data-get-on="Arbeit" data-get-off="!on" data-set-off="" class="red" data-icon="oa-scene_workshop" data-background-icon="fa-square" ></div>
                          <div data-type="label" class="inline">Arbeit</div>
                          </div>

                          <div class="col-1-6">
                          <div data-type="switch" data-device="Home.Status" data-get-on="Nacht" data-get-off="!on" data-set-off="" class="blue" data-icon="fa-bed" data-background-icon="fa-square" ></div>
                          <div data-type="label" class="inline">Nacht</div>
                          </div>

                          <div class="col-1-6">
                          <div data-type="switch" data-device="Home.Status" data-get-on="Terrasse" data-get-off="!on" data-set-off="" class="orange" data-icon="oa-scene_terrace" data-background-icon="fa-square" ></div>
                          <div data-type="label" class="inline">Terrasse</div>
                          </div>

                          <div class="col-1-6">
                          <div data-type="switch" data-device="Home.Status" data-get-on="Urlaub" data-get-off="!on" data-set-off="" class="white" data-icon="mi-beach_access" data-background-icon="fa-square" ></div>
                          <div data-type="label" class="inline">Urlaub</div>
                          </div>

                          <div class="col-1-6">
                          <div data-type="switch" data-device="Home.Status" data-get-on="Wochenmende" data-get-off="!on" data-set-off="" class="white" data-icon="mi-weekend" data-background-icon="fa-square" ></div>
                          <div data-type="label" class="inline">WE</div>
                          </div>
                        </div>
                    </div>
  </div>
  </div>
</li>

<li data-row="5" data-col="5" data-sizex="1" data-sizey="3" class="halbTransparent ">
<header>Tabletten</header>
      <div class="center">
                  <div data-type="switch" data-device="Tabletten.Status1" data-get="state" data-states='["cmd_1","cmd_2"]' data-set-states='["cmd_2","cmd_1"]' data-icon="fa-thumbs-up" data-colors='["red","green"]' data-on-background-color="transparent" data-off-background-color="transparent"></div>
       </div>
</li>

<li data-row="5" data-col="12" data-sizex="1" data-sizey="3" class="halbTransparent bg-red">
<header>NOT AUS</header>
      <div class="center">
                  <div data-type="push" data-fhem-cmd="set HomeBot send ACHTUNG NOTAUS wurde ausgelöst.;sleep 3;shutdown" data-icon="fa-power-off" data-color="yellow" data-on-background-color="red" data-off-background-color="red"></div>
       </div>
</li>

<li data-row="5" data-col="3" data-sizex="1" data-sizey="3" class="halbTransparent ">
<header>zu Hause</header>
<br/>
<div class="inline top-align">
                      <div class="row">
                           <div class="cell">
                            <div class="small">
                             <div data-type="symbol" data-device="PatrickBT" data-states='["present","absent"]' data-icons='["fas fa-male","far fa-male"]' data-colors='["green","red"]' class="big"></div>
                             <div data-type="label" class="">Patrick</div>
                           <br>
                             <div data-type="symbol" data-device="NalaBT" data-states='["present","absent"]' data-icons='["fas fa-female","far fa-female"]' data-colors='["green","red"]' class="big"></div>
                             <div data-type="label" class="">Nala</div>
                         </div>
                        </div>
                        </div>
                      </div>
                </div>
</li>
</ul>
</div>
</body>
</html>

Das ist die seite für das Wetter:

Code Auswählen Erweitern

<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="7" data-template="menu.html" class="halbTransparent"></li>
<li data-row="1" data-col="2" data-sizex="5" data-sizey="5" class="halbTransparent ">
<header>Regenradar</header>
        <div class="inline">
                  <div data-type="image" data-refresh="900" data-height="335" data-url="https://www.dwd.de/DWD/wetter/radar/radfilm_nrw_akt.gif" class="nocache">
        </div>
</li>
<li data-row="1" data-col="7" data-sizex="3" data-sizey="5" class="halbTransparent ">
<header>Wind</header>
        <div class="inline">
          <div  class="cell big" data-type="wind_direction" data-device="wetter" data-direction="windDir" data-speed="wind" data-calm="~" data-tickstep="22.5" class="mini"></div>
          <div class="cell bigger" data-type="label" data-device="wetter" data-get="wind" data-unit="km/h" data-fix="0"></div>
        </div>
</li>
<li data-row="1" data-col="8" data-sizex="2" data-sizey="7" class="halbTransparent ">
<header>Info`s</header>
        <div class="inline">
          Sichtweite:<br><div class="inline"><div data-type="symbol" data-device="MyWeather" data-get="visibility" class="thin" data-icon="mi-visibility" data-color="White" ></div></div><div class="inline"><div data-type="label" data-device="MyWeather" data-get="visibility" class="thin" data-unit="Km"></div></div><br>
          Luftdruck:<br><div class="inline"><div data-type="symbol" data-device="MyWeather" data-get="pressure" class="thin" data-icon="oa-weather_barometric_pressure" data-color="White" ></div></div><div class="inline"><div data-type="label" data-device="MyWeather" data-get="pressure" class="thin" data-unit="hPa"></div></div><br>
          UV-Index:<br><div class="inline"><div data-type="symbol" data-device="wetter" data-get="fc0_uv" class="thin" data-icon="fa-sun-o" data-color="White" ></div></div><div class="inline"><div data-type="label" data-device="wetter" data-get="fc0_uv" class="thin" data-icon="fa-sun-o" data-color="White" ></div></div><br>
          Feuchte:<br><div class="inline"><div data-type="symbol" data-device="MyWeather" data-get="humidity" class="thin" data-icon="oa-weather_humidity" data-color="White" ></div></div><div class="inline"><div data-type="label" data-device="MyWeather" data-get="humidity" class="thin" data-unit="%"></div></div><br>
          Sonnenaufgang:<br><div class="inline"><div data-type="symbol" data-device="Sonnenaufgang" data-get="STATE" class="thin" data-icon="wi wi-sunrise" data-color="White" ></div></div><div class="inline"><div data-type="label" data-device="Sonnenaufgang" data-get="STATE" class="thin" data-icon="wi wi-sunrise"></div></div><br>
          Sonnenuntergang:<br><div class="inline"><div data-type="symbol" data-device="Sonnenuntergang" data-get="STATE" class="thin" data-icon="wi wi-sunset" data-color="White" ></div></div><div class="inline"><div data-type="label" data-device="Sonnenuntergang" data-get="STATE" class="thin" data-icon="wi wi-sunset"></div></div>
        </div>
</li>
<li data-row="6" data-col="2" data-sizex="2" data-sizey="2" class="halbTransparent ">
<header>Wetter</header>
        <div class="inline">
        <div data-type="weather" data-device="MyWeather" data-get="condition" class="large"></div>
        <div data-type="label" data-device="AURIOL_82" data-temp="temperature" data-get="temperature" data-unit="%B0C%0A" class="bigger thin"></div>
        <div data-type="label" data-device="MyWeather" data-get="condition" class="thin"></div>
        </div>
</li>

<li data-row="6" data-col="4" data-sizex="2" data-sizey="2" class="halbTransparent ">
        <header>Morgens</header>
        <div class="inline">
        <div data-type="weather" data-device="wetter" data-get="fc0_weatherMorning" class="large"></div>
        <div data-type="label" data-device="wetter" data-get="fc0_temp06" data-unit="%B0C%0A" class="large"></div>
        <div class="inline">
                <div data-type="symbol" data-icon="wi wi-raindrops" class="small" data-color="White" ></div>
        </div>
        <div class="inline left-narrow">=</div>
        <div class="inline">
                <div data-type="label" data-device="wetter" data-get="fc0_chOfRain06" data-unit="%" class="large"></div>
        </div>
        </div>
</li>

<li data-row="6" data-col="6" data-sizex="2" data-sizey="2" class="halbTransparent ">
        <header>Mittag</header>
        <div data-type="weather" data-device="wetter" data-get="fc0_weatherDay" class="large"></div>
        <div data-type="label" data-device="wetter" data-get="fc0_temp12" data-unit="%B0C%0A" class="large"></div>
        <div class="inline">
                <div data-type="symbol" data-icon="wi wi-raindrops" class="small" data-color="White" ></div>
        </div>
        <div class="inline left-narrow">=</div>
        <div class="inline">
                <div data-type="label" data-device="wetter" data-get="fc0_chOfRain12" data-unit="%" class="large"></div>
        </div>
</li>
<li data-row="6" data-col="8" data-sizex="2" data-sizey="2" class="halbTransparent ">
        <header>Abends</header>
        <div data-type="weather" data-device="wetter" data-get="fc0_weatherEvening" class="large"></div>
        <div data-type="label" data-device="wetter" data-get="fc0_temp18" data-unit="%B0C%0A" class="large"></div>
        <div class="inline">
                <div data-type="symbol" data-icon="wi wi-raindrops" class="small" data-color="White" ></div>
        </div>
        <div class="inline left-narrow">=</div>
        <div class="inline">
                <div data-type="label" data-device="wetter" data-get="fc0_chOfRain18" data-unit="%" class="large"></div>
        </div>
</li>
     </div>
</body>
</html>

Sollte der ein oder andere Fehler finden last es mich wissen, nur so wird es besser.

Caleus


P.S. zur zeit bekomme ich leider beim seiten auf ruf immer Retry to connect in 10 seconds

[hsepm]

Hallo zusammen,

nachdem ich hier ja vor einiger Zeit mein (fast) vollständiges Tablet-UI gepostet habe, ein kleineres Update, wohin sich das bei mir zwischenzeitlich entwickelt hat.

Im wesentlichen sind das nur Kleinigkeiten, aber falls Interesse besteht, kann ich meine html-Dateien noch mal posten.

1) Layout: Die eingeblendeten Meldungen werden nun unten zentriert und dynamisch gelayoutet.

2) Button-Hintergründe: Sind jetzt echte schattierte Box-Icons

3) Layout: Diverses Feintuning des Flexlayouts der einzelnen pages

4) Hintergrund: Kinooptik

Viele Grüße,
Holger

EDIT:
myftui - neue Version
myFTUI_alt - letzte von mir gepostete Version

[moonsorrox]

die Button die du im ersten Bild darstellst sehen Klasse aus, kannst du sagen wie du sie erstellt hast.?