"Push" Widget & allgemeines Verständnis

[T4fk4D]

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

Code Auswählen Erweitern

<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

Code Auswählen Erweitern

<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???

[xxsteffenxx]

Code Auswählen Erweitern

<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

[T4fk4D]

Besten Dank, es funktioniert.

Zwischenzeitlich hatte ich noch diese Lösung gefunden

Code Auswählen Erweitern

<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 die Aussage von Setstate gelesen,

im 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

[setstate]

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 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.

[T4fk4D]

Ok, verstanden.

Aber wie bekomme ich den grauen Rahmen mit

JS Code aus den data-* Parametern

des Push-Widgets jetzt weg?

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

Code Auswählen Erweitern

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?

[setstate]

Code Auswählen Erweitern


<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


[DocCyber]

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/ 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.

[T4fk4D]

Besten Dank für die Info's.

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