New FHEM Tablet UI

[StG (DD)]

Hallo Thorsten, Mario, nesges

mit den userReadings funktionierts prima  .

VG, Stephan

[update71]

Morgen zusammen,

ich versuch mich auch grad am Tablet UI ... scheitere aber, mangels css und html Kenntnissen (ist lange her) am Aufbau des Layouts.
Die Doku ist umfangreich, das Thema hier noch viel umfangreicher ... ich such und les auch schon eine Weile aber finde nix für einen Anfänger wie ich mir ein Layout aufbaue.
Von container, gridster usw. habe ich gelesen ... aber wann brauche ich was?
Es wäre super wenn in den Demos auch mal eine einfache Seite enthalten wäre (2 Räume mit den wichtigsten Dingen wie Licht an/aus, Dimmer, Thermostat) und gut, dann könnte der Noob (wie ich) das vielleicht besser nachvollziehen.
Derzeit ist das alles sooo komplex dass es vermutlich den einen oder anderen pot. Nutzer schnell wieder vertreibt.
Ich versuch mich durchzubeissen

Editiert ihr die index.html mit vi oder habt ihr wysiwyg Editoren im Einsatz?

Grade fürs grundsätzliche Layout würde ich einen Editor bevorzugen der mir direkt zeigt was ich für`n Mist baue ... habt ihr da Empfehlungen?

Danke Thomas ... und weiter so, gute Arbeit!

[M aus B.]

Auch ich bin schwer angetan von dem, was hier passiert. Vielen Dank an alle !

Ich brauche Hilfe bei Jalousien: welche optische Lösung habt Ihr gefunden ?  Ich brauche mindestens drei Zustände: auf, zu, halboffen oder die Darstellung mit 10%-Schritten.  Über entsprechende Beispiele würde ich mich freuen.

Anregung: dieser Thread enthält jetzt fast 100 Seiten und vielen Informationen, manche sind sogar schon überholt. Könnte man einen eigenen Beispiel-Thread schaffen, der alle typischen Lösungen vorstellt?

...Und Ja, die Readme-Datei habe ich gelesen; dort fehlen mir optische Alternativen....

Vielen Dank nochmal


Michael

[StefanD]

Ja ist denn heut scho Weihnachten? Genau das ging mir durch den Kopf, als ich vor einiger Zeit das Projekt entdeckt habe, denn das ist genau das, was ich für ein Tablet meiner FHEM Umgebung gesucht habe. 
Meine Frau wird sich darüber besonders freuen, denn je einfacher das Ganze zu bedienen ist, desto mehr wird sie es annehmen. Ihr kennt das ja...

Deshalb zuerst allen ein riesen großes Dankeschön, die hier so viel Zeit investieren und beständig mit Erweiterungen betragen!

Drei Abende habe ich auf dem Sofa den Thread von Anfang an durchgelesen und dennoch bleibt mir noch eine Frage über, auf die ich keine Antwort gefunden habe.
Mein Tablet ist ein 7" mit einer Auflösung von 1280 x 800, gerootet und erlaubt die Nutzung der vollen Auflösung. Trotzdem finde ich nicht die Lösung, wie ich diese Auflösung quasi vorgeben kann, sprich die Breite und Höhe begrenze, respektive konfiguriere.

Vermutlich ist mein Problem recht banal und hoffe es nicht irgendwo schlicht überlesen zu haben... 

VG Stefan

Edit: Klassiker, kaum fragt man, findet man die Antwort selbst...  "widget_base_width" und "widget_base_height" in der index.html sind meine neuen Freunde.

[Risiko]

Hallo nesges,

multistatebutton funktioniert ganz gut. Danke.
Habe aber den Aufruf von ShowOverlay raus genommen. Funktion gibt es (noch) nicht.

Risiko

[setstate]

Mal als Vorschlag in die Runde:
Was haltet ihr von ganz dezenten CSS-Animations so wie z.B. auf http://tympanus.net/Tutorials/CSS3RotatingWords/index.html Demo1 oder 2 oder etwas von http://codyhouse.co/demo/animated-headlines/index.html? In unserem Fall sind es ja quasi nur einzelne "Buchstaben", die animiert werden müssten. Ich bin eigentlich kein großer Freund von zuviel Bewegung auf einer Seite, aber allein um des Layouts Willen, würde ich hier Mal eine Ausnahme machen. Beträfe ja (zunächst) nur diejenigen Stati, die eben 2 Icons benötigen...

Das Thema hat mich auch etwas beschäftigt und herausgekommen ist das neue Rotor Widget

Damit kann man an einer Stelle zwei oder mehr Widgets unterbringen, die nacheinander angezeigt werden, also rotieren.
Ein Beispiel wäre eine Wettervorhersage für die ganze Woche an nur einer Stelle, jeder Tag für 3 Sekunden.

In der Standardausführung passiert der Wechsel einfach nur Knall auf Fall, da ich feststellen musste, dass mit den wunderschön anzusehenden CSS3 Animationen, die CPU ganz schön zu rechnen hat. Wer sich über den Stromverbrauch oder die Temperaturentwicklung seines Anzeigegerätes nicht kümmern will, kann aber auch eine der zwei vorhandenen Überblend-Animationen aktivieren: 'fade' oder 'rotate'. Wer will, kann im CSS File auch weitere Animationen ergänzen.

Und so einfach legt man in der FTUI index.html solch eine Rotation an:

Code Auswählen Erweitern


    <div data-type="rotor">
        <ul>
            <li>
                <div data-type="symbol" data-device="Eingangstuer" data-icon="ftui-door" class="narrow big"></div>
                <div data-type="label" class="darker">Tür</div>
             </li>
             <li>
                <div data-type="symbol" data-device="TerrassenTuer" data-icon="ftui-door" class="narrow big"></div>
                <div data-type="label" class="darker">Terassentür</div>
            </li>
        </ul>
    </div>


Das ist ein Wechsel zwischen zwei Symbolen ohne Übergangseffekt. Wenn man ein langsames Überblenden haben möchte, muss

Code Auswählen Erweitern

<div data-type="rotor" class="fade"> benutzt werden

Hier ein Beispiel für die Wetteranzeige mit einer Umklapp-Animation:

Code Auswählen Erweitern

<div data-type="rotor" class="rotate">
        <ul>
          <li>
            <div data-type="label" class="darker">Heute</div>
            <div data-type="weather" data-device="AgroWeather" data-get="fc0_weatherDay" class="big"></div>
            <div data-type="label" data-device="AgroWeather" data-get="fc0_weatherDay" class=""></div>
            <div data-type="label" data-device="AgroWeather" data-get="fc0_tempMax" data-unit="%B0C%0A" class="large"></div>
          </li>
          <li>
            <div data-type="label" class="darker">Morgen</div>
            <div data-type="weather" data-device="AgroWeather" data-get="fc1_weatherDay" class="big"></div>
            <div data-type="label" data-device="AgroWeather" data-get="fc1_weatherDay" class=""></div>
            <div data-type="label" data-device="AgroWeather" data-get="fc1_tempMax" data-unit="%B0C%0A" class="large"></div>
          </li>
        </ul>
    </div>


[andreas_r]

@viegener: Herzlichen Dank für Deine Anregung, das ist in etwa das, was ich heute auch schon mache. (Natürlich etwas weniger schön gelöst, als Du das machst)

Bleibt noch eine Frage: Du siehst damit aber auch nicht, welchen aktuellen Zustand Dein Rollo hat, oder?

Mir geht es zB darum, abends am Tablet nochmal zu checken, ob alle Rollos im Haus zu sind, ohne durch das selbige laufen zu müssen.

Viele Grüße,
Andreas

[nesges]

Habe aber den Aufruf von ShowOverlay raus genommen. Funktion gibt es (noch) nicht.

Die Funktion ist aus widget_famultibutton geerbt.

[nesges]

Anregung: dieser Thread enthält jetzt fast 100 Seiten und vielen Informationen, manche sind sogar schon überholt. Könnte man einen eigenen Beispiel-Thread schaffen, der alle typischen Lösungen vorstellt?

"Alle" Lösungen nicht, aber ein paar findest du in der Live-Demo und dem zugehörigen Repository: http://forum.fhem.de/index.php/topic,36063.0.html

[setstate]

@viegener: beim Slider dürfte zur Zeit
data-on='(on|closed|down)' data-off='(open|off)'
leider nicht funktionieren. RegEx versteht der an der Stelle noch nicht.
Würde ich noch nachrüsten.

Edit: was ist eigentlich der Unterschied zwischen deiner Triplebox Class und der doublebox? Die Zahlen sehr gleich aus.

[Wegwerf]

@setstate wäre es möglich ein "symbol+switch/push" Widget einzubauen oder gibt es das bereits?

Hintergrund: So könnte man die Rolladensteuerung in ein Circlemenü verstecken und braucht kein zusätzlichen Knopf zum öffenen des Menüs.
Am besten wäre es wenn das switch/push widget das icon mit dem Attribut data-icons in Abhängigkeit von einem data-get-on Array setzen würde.
Oder ganz kurz und knapp ein drückbares Symbol widget wäre klasse!:)

[setstate]

@setstate wäre es möglich ein "symbol+switch/push" Widget einzubauen oder gibt es das bereits?

Hintergrund: So könnte man die Rolladensteuerung in ein Circlemenü verstecken und braucht kein zusätzlichen Knopf zum öffenen des Menüs.
Am besten wäre es wenn das switch/push widget das icon mit dem Attribut data-icons in Abhängigkeit von einem data-get-on Array setzen würde.
Oder ganz kurz und knapp ein drückbares Symbol widget wäre klasse!:)

Hallo Wegwerf,
diese Widgets basieren auf dem selben Control, nur das Laufzeitverhalten und die Defaults unterscheiden sich. Suche dir ein Widget aus, was deinem benötigten Verhalten entspricht, vom Aussehen her kann man es vielseitig anpassen. Zum Beispiel kann man den Push mit data-background-icon="" wie ein Symbol aussehen lassen. Schaue mal in die Readme, bei den Switch, Push und Symbol Widgets. Die können gleichermaßen angepasst werden (Color, Icon < foreground, background)

[Bapt. Reverend Magersuppe]

Auch ich bin schwer angetan von dem, was hier passiert. Vielen Dank an alle !

Ich brauche Hilfe bei Jalousien: welche optische Lösung habt Ihr gefunden ?  Ich brauche mindestens drei Zustände: auf, zu, halboffen oder die Darstellung mit 10%-Schritten.  Über entsprechende Beispiele würde ich mich freuen.

Hallo Michael!

Ich habe das momentan so gelöst, meine Rollos können 3 Zustände.

Code Auswählen Erweitern


<header>BAD</header>
        <div data-type="switch" data-icon="fa-caret-up" data-device="Jaro_Bad" data-get-off="((?!Rauf).)*" data-get-on="Rauf"     class="mini"></div></br>
        <div data-type="switch" data-icon="fa-bars" data-device="Jaro_Bad" data-get-off="((?!Halb).)*" data-get-on="Halb"     class="mini"></div></br>
        <div data-type="switch" data-icon="fa-caret-down" data-device="Jaro_Bad" data-get-off="((?!Runter).)*" data-get-on="Runter" class="mini"></div>


Das klappt bei mir ganz gut, die Zustände werden richtig angezeigt. Was nicht klappt: Wenn Rollo runter ist und man nochmal drückt dann ist der Knopf wieder aus, also wenn der an ist und man nochmal drückt soll der ja an bleiben. Das kann man sicher auch noch regulieren.

[Wegwerf]

@setstate
gerade habe ich erst herausgefunden, dass man im CircelMenu den "Hauptbutton" nicht zwingend als push- Widget definieren muss, sondern auch mit anderen Widgets geht, sogar mit den normal nicht klickbaren symbol- Widget. Danke! Am besten mein vorherigen Beitrag vergessen

[tomster]

Das Rotor-Widget ist echt prima!

Allerdings dachte ich bei meinem Vorschlag gar nicht so umfangreich. Mir ging es lediglich um den Wechsel von 2 Status-Werten innerhalb eines Symbol-Widgets. Du wechselst ja ganze Widgets aus.

Beispiel: Abfallkalender - wenn an einem Tag 2 verschiedene Müllsorten abgeholt werden.

Normalerweise zeigt es z.B. nur das Tonnensymbol für Restmüll an. Wird nun aber am gleichen Tag auch der "Gelbe Sack" abgeholt, dann sollten die beiden Icons (Restmüll, Gelber Sack) alternieren. Sollte mit "einfachen" fadeOut/ fadeIn's zu bewerkstelligen sein, denke ich. Das kostet verhältnismäßig wenig Rechenleistung (sind ja nur 2 SVG-Icons). Aufrufen könnte man das dann vielleicht so in der Art:

Code Auswählen Erweitern


<div data-type="label" class="">M&uuml;llabfuhr</div>
                <div data-type="symbol"
                        data-device="Abfallkalender"
                        data-icons='["fs-dustbin","fa-dustbin","fa-dustbin","fs-bag warn","fa-thumbs-o-up","alternating fa-dustbin fs-bag"]'
                        data-get-on='["Papier","Restmuell","Biomuell","GelberSack","Nichts","RestmuellGelberSack"]'
                        data-on-colors='["#01A3F5","#A8A8A8","#82550C","#FFFF00","#505050","#A8A8A8:#FFFF00"]'
                        class="narrow small"></div>
</div>


Ich hab zwar noch kein konkret passendes Beispiel gefunden, dachte aber an etwas wie den folgenden Code, nur halt nicht die Div-ID betreffend, sondern eben die "Icon-Class" (oder wie auch immer man dazu sagen soll).

Code Auswählen Erweitern


jQuery(function () {
    var $els = $('div[id^=alternating]'),
        i = 0,
        len = $els.length;

    $els.slice(1).hide();
    setInterval(function () {
        $els.eq(i).fadeOut(function () {
            i = (i + 1) % len
            $els.eq(i).fadeIn();
        })
    }, 2500)
})