FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: AyshaHM am 14 Februar 2023, 17:37:51

Titel: FTUI3 badge
Beitrag von: AyshaHM am 14 Februar 2023, 17:37:51
Hallo zusammen,
kann man den roten Punkt auch ersetzen? ZB mit einer kleinen Glühlame die vom dummy on:off  oder 0:1 geschaltet wird.

Danke im Voraus

lg Aysha
Titel: Antw:FTUI3 badge
Beitrag von: juemuc am 14 Februar 2023, 17:59:34
Hi,
warum dann "badge"? ich habe hier einfach ein Icon platziert 8)

Viele Grüße
Jürgen
Titel: Antw:FTUI3 badge
Beitrag von: AyshaHM am 14 Februar 2023, 18:18:03
hallo juemuc,
danke für deine schnelle Antwort!
Hast du das platzieren mit colum und row gemacht und wie bekommst das Icon so klein?

Gruß
Aysha
Titel: Antw:FTUI3 badge
Beitrag von: juemuc am 14 Februar 2023, 20:55:23
Ich habe das so definiert:
    <ftui-row margin="-2" align-items="center">
      <ftui-icon name="circle" [color]="{{Lampe}}:onoff | map('1:dark,0:medium')" size="7">         
        <ftui-icon [color]="{{Lampe}}:onoff | map('1:yellow,0:black')" size="3" left="25px" top="25px"
              @click="sendFhem('set {{Lampe}} toggle')"
              [name]="{{Lampe}}:onoff | map('1:lightbulb-on, 0:lightbulb')">
        </ftui-icon>
      </ftui-icon>
      <ftui-icon left="100px" top="40px" [rgb]="{{Lampe}}:rgb" 
            name="color_lens" @click="pop_{{pop_lampe}}.open()">
      </ftui-icon>
    </ftui-row>
    <ftui-slider
          [(value)]="{{Lampe}}:pct" min="0" max="100">
    </ftui-slider>
    <ftui-label color="white" size="1" margin="-0.5"
          [text]="{{Lampe}}:pct">
    </ftui-label>


Viele Grüße
Jürgen
Titel: Antw:FTUI3 badge
Beitrag von: AyshaHM am 15 Februar 2023, 11:40:43
Hallo Jürgen,
ich habe das so in meine Index.html übernommen. Leider ist danach einiges abgeschmiert.

1. Das Badge der Mülltonnen haben jetzt nicht mehr die Zahl sondern "0pct"
2. In den CalView's ist kein Text mehr zu sehen. Ich glaube alle lable werden beeinflusst.
3. Die WetterIcons werden nicht mehr angezeigt.
4. Der Code ist nicht das was du gestern gezeigt hast.

Was mach ich falsch!

Bis jetzt habe ich noch keinen Weg gefunden es rückgängig zu machen. Aber dafür hat man ja ein Testsystem. :-)

viele Grüße

Aysha


Titel: Antw:FTUI3 badge
Beitrag von: mr_petz am 15 Februar 2023, 18:35:36
Das geht auch so Bsp.:

<ftui-icon name="refresh" color="brown">
  <ftui-badge color="transparent" text=" "><ftui-icon name="refresh" size="-2" color="white"></ftui-icon></ftui-badge>
</ftui-icon>

hier ist nur wichtig das mindestens eine Leerstelle im text ist oder er gebunden wird...

LG
Titel: Antw:FTUI3 badge
Beitrag von: AyshaHM am 16 Februar 2023, 10:54:36
Hallo mr_peper,
danke für deine Antwort und Code.

Leider hilft mir das nicht weiter. Ich habe mal ein bisschen rumgefummelt.

Das ist dabei rausgekommen.

<ftui-row>
<ftui-button [(value)]="SLHAI13">
        <ftui-icon [name]="SLHAI13 | map('on:lightbulb-on, off:lightbulb')"></ftui-icon>
<ftui-badge [text]="test" color="red" size="2"> </ftui-badge>
      </ftui-button>
</ftui-row>


SLHAI13=SiemensLogo Schalteingang der im Fhem als Taster eingerichtet ist und über den SiemensLogo Ausgang  die Lampe einschaltet.

test= dummy der über den Lampen Status mit einem Doif auf 1 oder 0 gesetzt wird. An=1 Aus=0.

Wenn man jetzt den roten runden Kreis mit der 1 im badge  in ein "lightbulb-on / gelb" ersetzen könnte wäre ich am Ziel.

Vielleicht kannst du mir da behilflich sein.

Vielen Dank im Voraus :-)

Gruß Aysha



Titel: Antw:FTUI3 badge
Beitrag von: mr_petz am 16 Februar 2023, 13:35:29
Zitat von: AyshaHM am 16 Februar 2023, 10:54:36
Hallo mr_peper,
...

Wie jetzt...?

zur Hilfestellung mein Test und animiertes Gif im Anhang:

  <ftui-button [(value)]="SLHAI13">
    <ftui-icon [name]="test999 | map('an:lightbulb-on, aus:lightbulb')"></ftui-icon>
    <ftui-badge text=" " color="transparent" size="2">
      <ftui-icon [name]="test999 | map('aus:lightbulb, an:lightbulb-on')" [color]="test999 | map('aus:red,an:yellow')"></ftui-icon>
    </ftui-badge>
  </ftui-button>

  <ftui-button [(value)]="test999" states="aus,an">


LG
Titel: Antw:FTUI3 badge
Beitrag von: AyshaHM am 16 Februar 2023, 16:58:58
Hallo mr_petz,
ich bin schwer begeistert!! Vielen Dank !!
Ich musste es noch etwas umstellen.

Deine Frage: "Wie jetzt...?" war nicht schlecht.  :D :D

Der Clou an dem code ist das es zwei devices enthält.
Der Schalter schreibt in die Logo (Schalter ein) und die Logo gibt ein lesen wieder aus (Lampe ein). Da die Lampe über den selben Weg mit einem echten Taster im Haus auch geschaltet wird muss der  Fhem Schalter wenn die Lampe an ist wieder ausgehen.
Das heißt der normale Button zeigt mir nicht mehr an das die Lampe an ist. Das macht jetzt aber die badge Funktion. Ich habe es sonst immer mit einem Button und einem Icon gemacht. Jetzt habe ich beide in einem Button.  Cool  8)

Ich hoffe ihr versteht die Erklärung. Ansonsten nachfragen.

Hier nochmal der Code


<ftui-button size="large" [(value)]="Schreiber/Schalter">
    <ftui-icon [name]="Schreiber/Schalter | map('on:lightbulb-on, off:lightbulb')"></ftui-icon>
    <ftui-badge text=" " color="transparent" size="2">
      <ftui-icon [name]="Leser/Lampe | map('off:lightbulb, on:lightbulb-on')" [color]="Leser/Lampe
         | map('off:transparent,on:yellow')"></ftui-icon>
</ftui-button>




viele Grüße

Aysha