New FHEM Tablet UI

[setstate]

Wenn large die Zahlen kleiner macht, dann bringt das Clock Widget schon eine Voreinstellung mit, die größer als 150% ist.

nimm mal "gigantic"
das bringt font-size: 144px 

[Spartacus]

Hallo setstate,
vielen Dank. Es ist zwar jetzt recht groß, aber füllt nicht mal die Hälfte des Displays aus. Irgendwie komme ich damit nicht weiter. Ich müsste auch die Schriftfarbe weiter abdunkeln. Für "class" habe ich nur die Standardfarben "red, green und blue" gefunden. HEX-Code kann man da offenbar nicht übergeben, richtig?

Ich habe es auch noch nicht raus, wie man die Hintergrundfarbe des grauen Kastens, der mit sizex und size y bestimmt wird, ändert. Wie gesagt, die Uhr soll nachts im Schlafraum über das ganze Display gehen und irgendwo vielleicht noch das Datum und die Außentemperatur kleiner und in sehr dunklen Farben anzeigen, damit der Raum nicht zu stark ausgeleuchtet wird.

Ich kann mich nur entschuldigen, aber hast Du ggf. einen Tipp für mich, welche Grundlagen ich hier anpacken muss und wo ich passende Doku dauzu finde, denn ich fürchte ich muss mich erst näher mit HTML beschäftigen um die Sache hier halbwegs zu begreifen...

Spartacus

[setstate]

Wenn die vordefinierten Klassen nicht reichen/passen, muss man mit dem Style-Attribute arbeiten:

Allgemein:
style="property:value;"

Beispiel:
style="color:#333333;font-size:288px;"

Um den Hintergrund zu ändern, kannst du dir eine fhem-tablet-ui-user.css Datei anlegen und mit folgendem Tag in die index.html einbinden:

Code Auswählen Erweitern


    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />

Inhaltlich kann dann dort alles aus der fhem-tablet-ui.css eingetragen werden, was überschrieben werden soll. Zum Beispiel dieser Teil:

Code Auswählen Erweitern


body {
    background-color: #ffffff;
    color: #222222;
}

.gridster ul li {
    background-color:#eee;
    overflow: hidden;
    text-align: center;
}

.gridster li header {
    background: #ffffff;
    color: #222;
    border-bottom: 1px solid #222;
}


[waschbaerbauch]

@Spartacus
Vor vielen Jahren hab ich mal bei SelfHTML reingeschaut.
Vielleicht ist das auch heute noch recht nützlich als Nachschlagewerk.

[Standarduser]

Vielen Dank für diese tolle Oberfläche. Die finde ich echt super und meine Frau ist auch begeistert.

Gerade kämpfe ich jedoch mit einer Sache:
Ich würde gern meine Squeezebox steuern und möchte mittels select-Widget die Playlist auswählbar machen. Leider handelt es sich bei dem Reading für die Playlist nicht um eine :-getrennte Liste. Stattdessen sind die Einträge mit einem Komma getrennt.
Gibt es eine Möglichkeit, das select-Widget trotzdem mit diesem Reading zu befüllen?

[harry66]

Hallo,
mit folgenden userReadings werden die Favoriten und die Playlist von komma in ":" wandeln. wz.SqueezPi musst du natürlich in deine eigenen Namen ändern.

Code Auswählen Erweitern

attr userReadings sb_name {"wz.SqueezPi"},
FAVSTR_FTUI {my $t=InternalVal($name,'FAVSTR','');;$t=~s/,/:/g;;return($t)},
PLAYLIST_FTUI {my $t=InternalVal($name,'SERVERPLAYLISTS','');;$t=~s/,/:/g;;return($t)}

PS: ich weis nur nicht mehr wer das ursprünglich gepostet hatte 

[setstate]

Moin.

Ich habe hier einen Dialog mit zwei Buttons/Links die bewirken, dass entweder FHEM oder der RasPi neustarten.

Wenn ich jetzt einen dieser Buttons/Links klicke wird der Befehl gesendet und anschließend (oder gleichzeitig) soll sich der Dialog schließen.

Bin jetzt schon eine Weile am probieren mit:... <div onclick=".....">

base.close
base.hide(dialog,elem.data('mode'))
close.on('click',function()
dialog.close
dialog.hide
usw.....

Wie geht es denn nun richtig? Bzw. geht das überhaupt?

Danke im Vorraus.

Grüße^^

Das Popup schließt sich beim Klicken auf den Hintergrundschatten und beim Klick auf das X des Fensters. Also muss man dieses Event beim Drücken auf deinen Button auslösen:
- Close-Element selektieren -> $('.dialog-close')
- Klick Event triggern          -> trigger('click')

Code Auswählen Erweitern

onclick="$('.dialog-close').trigger('click');"

Ein komplettes Beispiel:

Code Auswählen Erweitern

<li data-row="5" data-col="1" data-sizex="3" data-sizey="3">
  <header>EXAMPLE2</header>
  <!-- place your widget here -->
  <div data-type="popup" data-height="400px" data-width="200px">
  <div data-type="link" class="large thin">Show Temperatur</div>
    <div class="dialog">
    <header>DIALOG</header>
    <div class="top-space">
          <div class="newline">
            <div data-type="label" data-device="THSensorWZ" data-get="temperature" data-limits='[-73,19,23]' data-colors='["#6699FF","#aa6900","#bb6242"]' data-unit="%B0C%0A" class="bigger thin"></div>
            <div data-type="label" class="cell">Temperatur</div>
          </div>
          <div class="newline">
            <div data-type="label" data-device="THSensorWZ" data-fix="0" data-part="4" data-limits='[0,40,60]' data-colors='["#bb6242","#aa6900","#bb6242"]' data-unit="%" class="bigger thin"></div>
            <div data-type="label" class="cell">Luftfeuchte</div>
          </div>
          <div data-type="link" class="round top-space-3x left-space-2x"
               data-width="130" data-height="50"
               data-color="white"
               data-background-color="green"
               data-icon="fa-check"
               onclick="$('.dialog-close').trigger('click');">OK</div>
    </div>
    </div>
  </div>
</li>

[JoeALLb]

Hallo,
mit folgenden userReadings werden die Favoriten und die Playlist von komma in ":" wandeln. wz.SqueezPi musst du natürlich in deine eigenen Namen ändern.

Code Auswählen Erweitern

attr userReadings sb_name {"wz.SqueezPi"},
FAVSTR_FTUI {my $t=InternalVal($name,'FAVSTR','');;$t=~s/,/:/g;;return($t)},
PLAYLIST_FTUI {my $t=InternalVal($name,'SERVERPLAYLISTS','');;$t=~s/,/:/g;;return($t)}

PS: ich weis nur nicht mehr wer das ursprünglich gepostet hatte 

Hinweis:

Code Auswählen Erweitern

{my $t=InternalVal($name,'FAVSTR','');;$t=~s/,/:/g;;return($t)},
lässt sich auch übersichtlicher als

Code Auswählen Erweitern

{ return  InternalVal($name,'FAVSTR','') =~ tr/,/:/r  }

Vielleicht hilfts wem

[Achim]

Hallo,

ich bin gerade am "Müllkalender" dran und will die Lösung von roman1528 umsetzen. roman1528 verwendet einen "button", bei der vereinfachten Version von setstate ist es ein "pagebutton".

Was ist der Unterschied zwischen "button" und "pagebutton".

Im FHEMWIKI ist nur die Definition von "button" gefunden. Und in dem Thread von setstate folgende Erklärung:

Einen Pagebutton braucht man nur zu nutzen, wenn man mit data-url auf eine andere Seite springen will und der Button sich automatisch auf ON schalten soll, wenn die hinterlegte Seite gerade der aktuellen Seite entspricht.

Warum verwendet setstate bei den Müllanzeige einen "pagebutton". Da wird noch nur der Status des Buttons gewechselt und nicht die Seite. Und wo gibt es evtl. eine Doku über "pagebutton", wo die möglichen Attribute aufgelistet sind.

Viele Grüße
Achim

[setstate]

Was ist der Unterschied zwischen "button" und "pagebutton".

"button" ist aus dem nesges-Repo, scheint aber nicht mehr kompatibel zu sein, es erscheint immer nur der Background, das Icon fehlt.
"pagebutton" ist dem am ähnlichsten, man kann aber auch das Basis Widget aller Schalter direkt nutzen ->  "famultibutton"

Code Auswählen Erweitern

data-type="famultibutton"

https://github.com/knowthelist/fhem-tablet-ui#pagebutton-widgets

[persching]

Auf voizchat.de gibt es da was:

http://voizchat.de/fhem-tutorial-serie-teil-5-tablet-ui-installieren-und-konfigurieren/

https://www.youtube.com/watch?v=vlJOol0C-Yg

https://www.youtube.com/watch?v=vlJOol0C-Yg

Vielen Dank dafür an Jan! 

Danke, das hab ich gesucht. Das hat mich jetzt mal auf die richtige Spur gebracht. Ich hab jetzt auch mal ein Example als Grundlage gewählt und hab dort meine eigenen Sachen eingebaut.

Aktuell stehe ich jetzt vor einem (hoffentlich) kleinen Problem:
Ich habe im Badezimmer 3 Thermostate die ich in FHEM zu einem Structure zusammen geführt habe. Leider kann ich so ein Thermostat-structure nicht auf das thermostat-widget des Tablet-UI anwenden. Ich beobachte schon länger mit Plots parallel alle drei Thermostate und die valveposition und die gemessene Temperatur sind nahezu identisch. Darum war jetzt meine Idee, dass ich für den "data-get" und "data-set" Befehl die structure verwende (somit werden alle 3 Thermostate gleichzeitig mit dem neuen Wert versorgt), gleichzeitig verwende ich aber einen Thermostat beispielhaft für valveposition und temperature. Geht das irgendwie? Oder müsste da eine Veränderung am Widget erfolgen?

Gruß persching

[Achim]

Hallo setstate,

[EDIT]
einfach alles vergessen was weiter unten steht. Die generellen Attribute sind ganz oben beschreiben.

ich habe mal auf https://github.com/knowthelist/fhem-tablet-ui#pagebutton-widgets nachgesehen. Laut dem Eintrag gibt es für "pagebutton" nur zwei Attribute (nennt man das so?).

Pagebutton widgets
• data-url : URL of the new page to show
• data-active-pattern : RegEx to define active state (default null) all other parameters like switch widget

zu dem Widget "famultibutton" habe ich keine Doku gefunden. Ich habe auch mal in den JS-Code reingesehen, da muss ich aber passen 

Viele Grüße
Achim

[Achim]

Hallo,

kann ich ein Widget irgendwie komplett ausblenden? Hintergrund ist folgender. Bei uns gibt es 6 verschiedene Mülltermine, es sind aber immer nur maximal 2 an einem Tag. Ich habe in FHEM ein Dummy mit 6 Readings, in denen die Anzahl der Tage steht, bis zum nächsten Termin. Ich kann jetzt 6 Widgets für jede Müllart anlegen und auch das Icon "unsichtbar" machen. Damit bleibt aber ein leeres Feld in der Oberfläche. Ich würde da gerne nur Platz für 2 Mülltermine vorsehen und nur die zwei Termine anzeigen, die die kleinste Zahl haben, also am nächsten dran sind.

Hat da jemand eine Lösung/Lösungsansatz?

Viele Grüße
Achim

[kvo1]

Hallo

ich versuche über  push

Code Auswählen Erweitern

<div data-type="push"
            data-set="volumeDown"
            data-icon="fa-volume-off"
            data-background-icon="-"
            data-device="squeezeKueche"
            class="inline narrow"></div>

meinen  Squeezeplayer  dazu zu bewegen, ein    set squeezeKueche volumeDown    auszuführen.
Leider scheitere ich daran !

Habe das zwar mit switch  gelöst

Code Auswählen Erweitern

<div data-type="switch"
data-device="squeezeKueche"
ata-set-on="volumeDown"
data-set-off="volumeDown"
                        data-icon="fa-volume-off"
data-on-background-color="rgba(147, 147, 147, 0)"
data-off-background-color="rgba(147, 147, 147, 0)"
data-on-color="#aa6900"
data-off-color="#aa6900"
            data-background-icon="fa-volume-off"
            class="inline narrow"></div>

aber push müßte doch auch gehen , was mach ich hier falsch ?

Danke

klaus

[roman1528]

Hallo

ich versuche über  push

Code Auswählen Erweitern

<div data-type="push"
            data-set="volumeDown"
            data-icon="fa-volume-off"
            data-background-icon="-"
            data-device="squeezeKueche"
            class="inline narrow"></div>

meinen  Squeezeplayer  dazu zu bewegen, ein    set squeezeKueche volumeDown    auszuführen.
Leider scheitere ich daran !

Habe das zwar mit switch  gelöst

Code Auswählen Erweitern

<div data-type="switch"
data-device="squeezeKueche"
ata-set-on="volumeDown"
data-set-off="volumeDown"
                        data-icon="fa-volume-off"
data-on-background-color="rgba(147, 147, 147, 0)"
data-off-background-color="rgba(147, 147, 147, 0)"
data-on-color="#aa6900"
data-off-color="#aa6900"
            data-background-icon="fa-volume-off"
            class="inline narrow"></div>

aber push müßte doch auch gehen , was mach ich hier falsch ?

Danke

klaus

Code Auswählen Erweitern


<div data-type="push"
data-device="vsx_510"
data-set-on="volumeDown"
data-cmd="set"
data-icon="fa-volume-down"
class="bigger">
</div>

Grüße^^