FTUI version 3

[Det20]

Anscheinend hat sich die Darstellung dank des Styles geändert. Wenn ich es rausnehme, sieht es wieder halbswegs ok für mich aus:

Code Auswählen Erweitern


    ftui-icon {
      stroke-width: 0.5px;
      stroke: black;
      stroke-opacity: 0.5;
      filter: drop-shadow(2px 2px 1px black);
      --color-base: var(--dark-light);
    }



[Medel]

Kann man um die Grid Elemente eine Rahmenlinie machen? Habe dazu bisher nichts gefunden

[mr_petz]

@Medel
Enweder als style:

Code Auswählen Erweitern


style="border: 1px solid gray;"

oder in css Datei:

Code Auswählen Erweitern


ftui-grid-tile {
  border: 1px solid gray;
}

Alles beispielhaft!

LG

[Medel]

Danke funktioniert,
hatte es im ftui-grid versucht aber es muss ja zum ftui-grid-tile

[mr_petz]

@ftui-popup-Nutzer

Mit dem neuesten Update scheint popup-target seine Bedeutung verloren zu haben.

alter Stand ... funktioniert nicht mehr:

Code Auswählen Erweitern


  <ftui-icon name="sitemap" popup-target="pop1"></ftui-icon>


neuer Stand:

Code Auswählen Erweitern


  <ftui-icon name="sitemap" @click="pop1.open()"></ftui-icon>


Weitere Beispiele mit neuer Theorie in examples/popup.html

s.a. https://forum.fhem.de/index.php/topic,115259.msg1246414.html#msg1246414 bzgl. Benamung von Popups

Da habe ich auch noch eine Ergänzung:
Das ftui-popup darf jetzt nicht mehr im ftui-label, ftui-icon usw. drin stehen sonst kann man es nicht mehr manuell schließen!
Mit popup-target ging das!
Bsp:

Code Auswählen Erweitern


<ftui-icon name="trash-o" size="3" color="brown" [class-name]="Müll | step('0:hop,2:')" popup-targets="icon" @click="icon.open()">
  <ftui-badge color="danger" text="1" class="size-0" [class-name]="Müll | step('2:blink,0:')" [hiddens]="Müll | step('1:false,2:true')"></ftui-badge>
  <ftui-popup id="icon" width="200px" height="200px" style="padding:0;">Müllereignis</ftui-popup>
</ftui-icon>

Ich fande das vorher praktisch, da das popup genau mittig über dem ftui-label bzw. über die ftui-componenten erschienen ist...

LG mr_petz

[yersinia]

Vor allem, wer stellt das alles überall von popup-target auf @click*.open() um?

Der changeset und die Änderung, für kurzfrisige Abhilfe, siehe github. Aber mit dem nächsten Update wieder weg wenn kein exclude-from-update gesetzt ist.

[mr_petz]

@yersinia
Da hier immer irgenwas geändert,ergänzt und erweitert wird, müssen wir damit klar kommen.
Es muss nur ordentlich kommuniziert werden!
@setstate wird seine Gründe dafür haben...

LG

[mr_petz]

...Der changeset und die Änderung, für kurzfrisige Abhilfe, siehe github. Aber mit dem nächsten Update wieder weg wenn kein exclude-from-update gesetzt ist.

oder so und man ist unabhängig vom Update.
script:

Code Auswählen Erweitern


<script>
function targetPopup(evt,t) {
  if (!evt.target.overlay) {
   t.style.setProperty('display','unset');
  } else {
   t.style.setProperty('display','none');
  }
}
</script>

und definition im @click:

Code Auswählen Erweitern


@click="targetPopup(event,pop1);"

pop1 ist die id des popup. Es gehen auch mehrere popup mit unterschiedlicher id. Einfach pop1 in der @click function ändern. Somit kann man auch wieder im label, icon etc das popup schließen...
Klar, popup-target gibt es nicht mehr und man muss es auf @click ändern...

LG

Edit:
Bsp:

Code Auswählen Erweitern


<script>
function targetPopup(evt,t) {
  if (!evt.target.overlay) {
   t.style.setProperty('display','unset');
  } else {
   t.style.setProperty('display','none');
  }
}
</script>
<ftui-icon name="magic" @click="targetPopup(event,pop1);">
  <ftui-popup id="pop1" width="200px" height="200px" style="padding:0;">Test1</ftui-popup>
</ftui-icon>
<ftui-icon name="magic" @click="targetPopup(event,pop2);">
  <ftui-popup id="pop2" width="200px" height="200px" style="padding:0;">Test2</ftui-popup>
</ftui-icon>


[HoTi]

Hallo zusammen,

kann mir jemand sagen wie ich die Wochentage die ja Täglich welchseln hier angezeigt bekomme. Als reading bekomme ich nur das Datum von Prolanta.

Vg
Tim

[mr_petz]

Hi Tim,
So sollte es gehen:
Bsp. für Übermorgen:

Code Auswählen Erweitern


<ftui-label class="size-1" [text]="Wetter_ProPlanta:fc2_date | toDate() | format('eeee')"></ftui-label>


LG mr_petz

[HoTi]

Hi Tim,
So sollte es gehen:
Bsp. für Übermorgen:

Code Auswählen Erweitern


<ftui-label class="size-1" [text]="Wetter_ProPlanta:fc2_date | toDate() | format('eeee')"></ftui-label>


LG mr_petz

oh, vielen vielen Dank mr_petz. Da wäre ich gestern Abend fast verzweifelt. Ich versuche mir das alles gerade anhand der Beispiele auf zu bauen und zu Lernen.

[HoTi]

Jetzt muss ich leider noch eine Frage stellen.
Ich möchte die Fenster so darstellen wie im Beispiel, oder sogar mit einem popup muss ich mal sehen wie das geht.

Aber was steckt hinter dem Beispiel für ein "Device"? Ist das ein "Structure". Wäre jemand so freundlich mir auf die Sprünge zu helfen. 

[andreas_r]

@HoTi: Hier ein Beispiel für eine ähnliche Wetter Ansicht (siehe Anhang):



Man braucht keine Struktur, ReadingsGroup oder ähnliches. Es gibt hier nur ein Device in FHEM, nämlich das Proplanta Wetter https://wiki.fhem.de/wiki/PROPLANTA
Den Rest macht das FTUI selber.

Code Auswählen Erweitern


<ftui-grid-tile row="1" col="2" height="2" width="6">
        <header>Wetter</header>
        <ftui-row>
          <ftui-column>
            <ftui-label size="2">Früh</ftui-label>
            <ftui-weather size="4" [condition]="ProPlanta:fc0_weatherMorning"></ftui-weather>
            <ftui-label [text]="ProPlanta:fc0_weatherMorning"></ftui-label>
            <ftui-label [text]="ProPlanta:fc0_temp06" unit="°C"></ftui-label>
          </ftui-column>
          <ftui-column>
            <ftui-label size="2">Mittag</ftui-label>
            <ftui-weather size="4" [condition]="ProPlanta:fc0_weatherDay"></ftui-weather>
            <ftui-label [text]="ProPlanta:fc0_weatherDay"></ftui-label>
            <ftui-label [text]="ProPlanta:fc0_tempMax" unit="°C"></ftui-label>
          </ftui-column>
          <ftui-column>
            <ftui-label size="2">Abend</ftui-label>
            <ftui-weather size="4" [condition]="ProPlanta:fc0_weatherEvening"></ftui-weather>
            <ftui-label [text]="ProPlanta:fc0_weatherEvening"></ftui-label>
            <ftui-label [text]="ProPlanta:fc0_temp18" unit="°C"></ftui-label>
          </ftui-column>
          <ftui-column>
            <ftui-label size="2">Morgen</ftui-label>
            <ftui-weather size="4" [condition]="ProPlanta:fc1_weatherDay"></ftui-weather>
            <ftui-label [text]="ProPlanta:fc1_weatherDay"></ftui-label>
            <ftui-label [text]="ProPlanta:fc1_tempMax" unit="°C"></ftui-label>
          </ftui-column>
          <ftui-column>
            <ftui-label size="2" [text]="ProPlanta:fc2_date | toDate() | format('eeee')"></ftui-label>
            <ftui-weather size="4" [condition]="ProPlanta:fc2_weatherDay"></ftui-weather>
            <ftui-label [text]="ProPlanta:fc2_weatherDay"></ftui-label>
            <ftui-label [text]="ProPlanta:fc2_tempMax" unit="°C"></ftui-label>
          </ftui-column>
          <ftui-column>
            <ftui-label size="2" [text]="ProPlanta:fc3_date | toDate() | format('eeee')"></ftui-label>
            <ftui-weather size="4" [condition]="ProPlanta:fc3_weatherDay"></ftui-weather>
            <ftui-label [text]="ProPlanta:fc3_weatherDay"></ftui-label>
            <ftui-label [text]="ProPlanta:fc3_tempMax" unit="°C"></ftui-label>
          </ftui-column>
        </ftui-row>
      </ftui-grid-tile>


[HoTi]

Wetter und Entsorgung habe ich schon hin bekommen dank der Information von mr_petz.

Ich bin beim nächsten Thema -> Fenster. Wie löst ihr das Problem auf der Startseite mit einem Blick zu sehen ob alle Fenster zu sind?

[andreas_r]

Wie löst ihr das Problem auf der Startseite mit einem Blick zu sehen ob alle Fenster zu sind?

Wenn Du nur eine einzelne Info willst, die anzeigt, ob alle Fenster zu sind, würde ich das wie folgt machen:

1) FHEM Structure (https://wiki.fhem.de/wiki/Structure) anlegen, hier ein Beispiel:

Code Auswählen Erweitern


defmod st_fenster structure allWindows window_map <hier alle fensterkontakte rein>
attr st_fenster clientstate_behavior relative
attr st_fenster clientstate_priority open close <-- hier den status rein, der in Summe Priorität haben soll (ja nachdem, was Deine devices so liefern)


2) den "state" des devices "st_fenster" verwenden, um in FTUI ein Icon oder ein Label entsprechend zu steuern.

VG, Andreas