FTUI3 badge

[AyshaHM]

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

[juemuc]

Hi,
warum dann "badge"? ich habe hier einfach ein Icon platziert

Viele Grüße
Jürgen

[AyshaHM]

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

[juemuc]

Ich habe das so definiert:

Code Auswählen Erweitern

    <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

[AyshaHM]

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

[mr_petz]

Das geht auch so Bsp.:

Code Auswählen Erweitern


<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

[AyshaHM]

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.

Code Auswählen Erweitern

<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

[mr_petz]

Hallo mr_peper,
...

Wie jetzt...?

zur Hilfestellung mein Test und animiertes Gif im Anhang:

Code Auswählen Erweitern


  <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

[AyshaHM]

Hallo mr_petz,
ich bin schwer begeistert!! Vielen Dank !!
Ich musste es noch etwas umstellen.

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

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 

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

Hier nochmal der Code

Code Auswählen Erweitern


<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