FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: T4fk4D am 13 Juni 2016, 22:17:37

Titel: "Push" Widget & allgemeines Verständnis
Beitrag von: T4fk4D am 13 Juni 2016, 22:17:37
Hallo Zusammen,

irgendwie habe ich bei Push ein wenn nicht sogar zwei Brett(er) vorm Kopf, obwohl es vermutlich ziemlich einfach zu lösen ist.

Ich habe einen Dummy definiert (Bild 1), welches über eine Funktion die Anzahl verpasster Anrufe übergeben bekommt.
Das wird im TabletUi über

<div data-type="symbol" data-device="VerpassteAnrufe" data-icons='["fa-phone","fa-phone warn","fa-phone warn"]' data-states='["0","^[01]$","^[1-9][0-9]|[2-9]$"]' data-colors='["#505050","#aa6900","#aa6900"]' class="bigger" style="margin-top:+5px;"></div>

auch richtig angezeigt. (Bild 2)

Die Zahl des Dummys will ich per Push auf 0 zurücksetzen. Versucht habe ich es hiermit
<div data-type="push" data-device="VerpassteAnrufe" data-icon="fa-times" data-set-on="0" class="bigger" style="margin-top:+5px;"></div>

Ich habe schon mehrere Sachen probiert, aber es will einfach nicht klappen.

Das zweite Problem, welches ich habe, sieht man auch im Bild 2.
Das Icon hat einen grauen Rahmen, welchen ich nicht weg bekomme.

Hat jemand von euch eine Idee?

P.S. Gibt es eigentlich auch die Möglichkeit beides miteinander zu kombinieren, so dass zum einen die Anrufe angezeigt werden und zum anderen durch klicken auf das Icon die Zahl auf 0 reseted wird? Also das ganz nicht in zwei verschiedenen, sondern nur mit einem Icon zu realisieren???
Titel: Antw:"Push" Widget
Beitrag von: xxsteffenxx am 14 Juni 2016, 06:36:12
<div data-type="push" data-set="state" data-cmd="setreading" data-device="VerpassteAnrufe" data-icon="fa-times" data-set-on="0" class="bigger" style="margin-top:+5px;"></div>

so kannst ihn zurücksetzten
Titel: Antw:"Push" Widget
Beitrag von: T4fk4D am 14 Juni 2016, 10:14:06
Besten Dank, es funktioniert. :-)

Zwischenzeitlich hatte ich noch diese Lösung gefunden

<div data-type="push" data-device="VerpassteAnrufe" data-icon="fa-times" data-fhem-cmd="set VerpassteAnrufe 0" class="bigger" style="margin-top:+5px;"></div>

Bleibt nur noch die Sache mit dem grauen Rahmen um das Icon, kann mir da jemand weiterhelfen?


Noch eine andere Sache
Ich habe hier https://forum.fhem.de/index.php/topic,36122.msg427837.html#msg427837 (https://forum.fhem.de/index.php/topic,36122.msg427837.html#msg427837) die Aussage von Setstate gelesen,
Zitatim HTML Code keine Style Attribute zu benutzen, da dabei sehr sehr unschöner HTML bei raus kommt. Besser ist es mit class und id zu arbeiten und dann im CSS definieren, welches Style diese Elemente bekommen sollen. Farben und einige andere Eigenschaften von Widgets sind per data-* Attribute änderbar.

Zu meinem Leidwesen muss ich gestehen, dass ich ziemliche Probleme habe, die Zusammenhänge zwischen .css und den .html's zu verstehen. Also wer sorgt für welche Eigenschaft und wie kann ich die wo am besten verändern. So finde ich zum Beispiel in den .css nicht den Bereich der das Push-Widget beschreibt. So geht es mir mit den meisten anderen Widgets auch, ich finde einfach den Bereich in der .css nicht, so dass ich hier im Forum ziemlich oft dumm nachfragen muss.
Kann mir jemand hier weiterhelfen, und wenn es nur ein Link ist, wo ich mich detaillierter in die Sache einlesen kann?

Vielen Dank im Voraus :-)
Titel: Antw:"Push" Widget & allgemeines Verständnis
Beitrag von: setstate am 15 Juni 2016, 00:31:14
ZitatSo finde ich zum Beispiel in den .css nicht den Bereich der das Push-Widget beschreibt. So geht es mir mit den meisten anderen Widgets auch, ich finde einfach den Bereich in der .css nich

Bei FTUI passiert die Farbgebung der Status der Widgets größtenteils nicht über CSS. Das passiert eher "inline" mit JS Code aus den data-* Parametern heraus.
Titel: Antw:"Push" Widget & allgemeines Verständnis
Beitrag von: T4fk4D am 15 Juni 2016, 01:00:23
Ok, verstanden.

Aber wie bekomme ich den grauen Rahmen mit

ZitatJS Code aus den data-* Parametern
des Push-Widgets jetzt weg?

Ich habe hiermit dem Rahmen die selbe Farbe gegeben wie dem Hintergrund

data-off-background-color ="#2A2A2A"

Das Ergebnis seht ihr im Anhang. Der Rahmen überdeckt die Beschriftung, sieht also auch wieder Käse aus.
Ich könnte jetzt als Workaround die Beschriftung nach untern versetzen, aber gibt es denn nicht die Möglichkeit die Rahmendicke auf 0 zu setzen oder einfach den gesamten Rahmen auszublenden?
Titel: Antw:"Push" Widget & allgemeines Verständnis
Beitrag von: setstate am 19 Juni 2016, 14:51:16

<div data-type="push" data-device="VerpassteAnrufe" data-icon="fa-times" data-fhem-cmd="set VerpassteAnrufe 0" class="bigger" style="margin-top:+5px;"></div>
mit bg icon
<div data-type="push" data-device="VerpassteAnrufe" data-icon="fa-times" data-background-icon="none" data-fhem-cmd="set VerpassteAnrufe 0" class="bigger" style="margin-top:+5px;"></div>
ohne bg icon


Titel: Antw:"Push" Widget
Beitrag von: DocCyber am 19 Juni 2016, 18:36:40
Zitat von: T4fk4D am 14 Juni 2016, 10:14:06
Zu meinem Leidwesen muss ich gestehen, dass ich ziemliche Probleme habe, die Zusammenhänge zwischen .css und den .html's zu verstehen.
Kann mir jemand hier weiterhelfen, und wenn es nur ein Link ist, wo ich mich detaillierter in die Sache einlesen kann?

Die grundsätzlicheen Verbindungen zwischen html und css werden m.E. hier https://wiki.selfhtml.org/ (https://wiki.selfhtml.org/) gut beschrieben und an vielen Beispielen erklärt.
Allerdings bleiben die FHEM-Spezifika natürlich unberücksichtigt. Da hilft ein Blick in css/fhem-tablet-ui.css unter Umständen weiter.
Titel: Antw:"Push" Widget & allgemeines Verständnis
Beitrag von: T4fk4D am 21 Juni 2016, 00:20:19
Besten Dank für die Info's.

Der Code-Schnipsel hat natürlich funktioniert und in die Grundlagen les ich mich ein. :-)