FTUI version 3

[juemuc]

Hallo zusammen,

ich benötige noch einmal Eure Hilfe. Bei meiner Wetter-Definition habe ich noch folgende Probleme:

• Das von https://www.svgrepo.com/vectors/equal/ heruntergeladene Gleichheitszeichen lässt sich nicht "einfärben". Es ist immer schwarz.
• Den Zeilenabstand zwischen Wind/Sicht/Druck kann ich nicht vergrößern
• Den Mond bekomme ich auch nicht (minimal) nach unten verschoben. Aktuell ist das Image direkt am obren Rand

Hier mein Coding:

Code Auswählen Erweitern

   <header>Wetter in xxx inkl Mondphase</header>
      <ftui-row>
        <ftui-weather size="6"
          icon-set="kleinklimaFHEM" provider="proplantaICON_LONG"
          [condition]="WetterProplanta:weatherIcon">
        </ftui-weather>
        <div>
          <ftui-row>
            <ftui-cell margin="1">
              <div>
                <ftui-label [text]=WetterProplanta:temperature|fix(1) unit="°C" size="5" [color]="WetterProplanta:temperature | step('-73: violett, -9: blue, 18: green, ,26: orange, 32: red')">
                </ftui-label>
              </div>
              <ftui-row>
                <ftui-icon size="-2"
                      [name]="WetterProplanta:statTemperatureTendency | replace(/1h:\s+(.*?)\s+2h:.*/, '$1') | step('-20:angle-double-down, -1.9:angle-down, 0:equal, 0.1:angle-up, 1.9:angle-double-up')"
                      [color]="WetterProplanta:statTemperatureTendency | replace(/3h:\s+(.*?)\s+6h:.*/, '$1') | step('-20:blue, 0:white, 0.1:red')">
                </ftui-icon>
                <ftui-icon size="-2"
                      [name]="WetterProplanta:statTemperatureTendency | replace(/3h:\s+(.*?)\s+6h:.*/, '$1') | step('-20:angle-double-down, -1.9:angle-down, 0:equal, 0.1:angle-up, 1.9:angle-double-up')"
                      [color]="WetterProplanta:statTemperatureTendency | replace(/3h:\s+(.*?)\s+6h:.*/, '$1') | step('-20:blue, 0:white, 0.1:red')">
                </ftui-icon>
              </ftui-row>
              <div>
                <ftui-label size="2" color="white">Temperatur</ftui-label>
              </div>
            </ftui-cell>
            <ftui-cell margin="1">
              <div>
                <ftui-label [text]=WetterProplanta:humidity unit="%" size="5" [color]="WetterProplanta:humidity | step('0: violett, 20: blue, 40: green, ,60: orange, 80: red')">
                </ftui-label>
              </div>
              <div>
              </div>
              <ftui-row>
                <ftui-icon size="-2"
                      [name]="WetterProplanta:statHumidityTendency | replace(/1h:\s+(.*?)\s+2h:.*/, '$1') | step('-5:angle-double-down, -1.9:angle-down, 0:equal, 0.1:angle-up, 1.9:angle-double-up')"
                      [color]="WetterProplanta:statHumidityTendency | replace(/1h:\s+(.*?)\s+2h:.*/, '$1') | step('-5:blue, 0:white, 0.1:red')">
                </ftui-icon>
                <ftui-icon size="-2"
                      [name]="WetterProplanta:statHumidityTendency | replace(/3h:\s+(.*?)\s+6h:.*/, '$1') | step('-50:angle-double-down, -5:angle-down, 0:equal, 0.1:angle-up, 5:angle-double-up')"
                      [color]="WetterProplanta:statHumidityTendency | replace(/3h:\s+(.*?)\s+6h:.*/, '$1') | step('-0.1:blue, 0:white, 0.1:red')">
                </ftui-icon>
              </ftui-row>
              <div>
                <ftui-label size="2" color="white">Luftfeuchte</ftui-label>
              </div>
            </ftui-cell>
            <ftui-cell align-items="left" margin="1">
              <div>
                <ftui-label size="2" color="white">Wind :</ftui-label>
              </div>
              <div>
                <ftui-label size="2" color="white">Sicht :</ftui-label>
             </div>
             <div>
                <ftui-label size="2" color="white">Druck:</ftui-label>
             </div>
            </ftui-cell>
            </ftui-cell>
            <ftui-cell align-items="left">
              <div>
                <ftui-label [text]="WetterProplanta:wind" unit="km/h" size="2" color="green"></ftui-label>
              </div>
              <div>
                <ftui-label [text]="WetterProplanta:visibility" unit="km" size="2" color="white"></ftui-label>
             </div>
             <div>
                <ftui-label [text]="WetterProplanta:pressure" unit="hPa" size="2" color="orange"></ftui-label>
             </div>
            </ftui-cell>
          </ftui-row>
        </div>
        <ftui-cell>
          <ftui-image margin="-2" border=0 src="https://www.der-mond.de/feature/luna.php?version=5&txue=&zeko=0&rand=0&trans=1&julia=0&daem=3&zefu=0&grmo=2&grmoueber=0&txph=0
                             &txmoal=0&txmoph=0&txmobe=0&txmophti=0&txmost=0&txmostau=0&txze=0&zezo=1&zeso=1&format=0&schgr=7&schriftart=Standard&schriftschnitt=0
                             &grafikausdehnung=0&grafikpx=85&faan=1&scro=45&scgr=45&scbl=45&hiro=240&higr=240&hibl=240&grsoho=0&grsohoueber=0&soep=0&txsost=0&txsostau=0
                             &geolagr=11&geolami=43&geolase=9&geola=O&geobrgr=48&geobrmi=1&geobrse=10&geobr=N&lang=de" alt="Der Mond - Geheimnisvoller Begleiter unserer Erde">
          </ftui-image>
          <div>
            <ftui-label color="white" [text]="Mondphase:MoonPhaseS"></ftui-label>
            <ftui-label color="white" [text]="Mondphase:MoonPhaseN | multiply(100) | fix(2)" unit="%"></ftui-label>
          </div>
        </ftui-cell>
      </ftui-row>
    </ftui-grid-tile>


[meier81]

Hi Jürgen,

zu 1. kann sein das du die svg´s erst "umwandeln" musst, hatte ich auch schonmal machen müssen. Ging meine ich auf der Seite

https://icomoon.io/app/#/select

Dort kannst du dein icon hochladen und dann generate svg ausführen, ich meine dann hat´s funktioniert. Es gibt dort auf der Seite aber auch das Symbol, musst du dort mal nach equal suchen. Die sollten schon standart passen.

Welches Symbol wolltest du denn verwenden, wenn nicht häng´s hier mal an, dann schau ich ob ich es dir umwandeln kann.

Gruß Markus

[juemuc]

Hi Markus,

danke für die Info. Von der neuen Seite konnte ich das "Gleichheitszeichen" herunterladen, welches sich auch farblich anpassen lässt. Ich habe es auch hier für setstate angehängt.

Jetzt hoffe ich noch auf die Hilfe für die Punkte 2. und 3. 

Viele Grüße und schöne Weihnachten
Jürgen

[mr_petz]

Hi Jürgen,

Den Zeilenabstand zwischen Wind/Sicht/Druck kann ich nicht vergrößern

Hier gibt es zwar top als Attribute, aber es wirkt nicht ohne einen Positionseintrag im style Bsp.:

Code Auswählen Erweitern


            <ftui-cell align-items="left">
                <ftui-label size="2" top="-5px" style="position:relative;" color="white">Wind :</ftui-label>
                <ftui-label size="2" color="white">Sicht :</ftui-label>
                <ftui-label size="2" top="5px" style="position:relative;" color="white">Druck:</ftui-label>
            </ftui-cell>
            </ftui-cell>
            <ftui-cell align-items="left">
                <ftui-label [text]="WetterProplanta:wind" unit="km/h" size="2" top="-5px" style="position:relative;" color="green"></ftui-label>
                <ftui-label [text]="WetterProplanta:visibility" unit="km" size="2" color="white"></ftui-label>
                <ftui-label [text]="WetterProplanta:pressure" unit="hPa" top="5px" style="position:relative;" size="2" color="orange"></ftui-label>
            </ftui-cell>

Hier brauchst du auch keine <div> Tags angeben!
@setstate: im ftui-label fehlt eine Positionangabe um top und left zu benutzen ohne style.

Den Mond bekomme ich auch nicht (minimal) nach unten verschoben. Aktuell ist das Image direkt am obren Rand

Hier funktioniert top. Bsp.:

Code Auswählen Erweitern


          <ftui-image top="5px" src="https://www.der-mond.de/feature/luna.php?version=5&txue=&zeko=0&rand=0&trans=1&julia=0&daem=3&zefu=0&grmo=2&grmoueber=0&txph=0
                             &txmoal=0&txmoph=0&txmobe=0&txmophti=0&txmost=0&txmostau=0&txze=0&zezo=1&zeso=1&format=0&schgr=7&schriftart=Standard&schriftschnitt=0
                             &grafikausdehnung=0&grafikpx=85&faan=1&scro=45&scgr=45&scbl=45&hiro=240&higr=240&hibl=240&grsoho=0&grsohoueber=0&soep=0&txsost=0&txsostau=0
                             &geolagr=11&geolami=43&geolase=9&geola=O&geobrgr=48&geobrmi=1&geobrse=10&geobr=N&lang=de" alt="Der Mond - Geheimnisvoller Begleiter unserer Erde">
          </ftui-image>


Im übrigen brauchst du eigentlich keine <div> Tags, nur für Sonderfälle!
Merry XMas

LG mr_petz

[juemuc]

Hallo mr_petz,

super. Vielen Dank. Damit hat es bestens funktioniert. Hast Du noch einen Tipp, wie ich die beiden Zeichen über Temperatur und Luftfeuchte näher zusammenbringe?

Code Auswählen Erweitern

              <ftui-row>
                <ftui-icon size="-2"
                      [name]="WetterProplanta:statTemperatureTendency | replace(/1h:\s+(.*?)\s+2h:.*/, '$1') | step('-20:angle-double-down, -1.9:angle-down, 0:equal, 0.1:angle-up, 1.9:angle-double-up')"
                      [color]="WetterProplanta:statTemperatureTendency | replace(/1h:\s+(.*?)\s+2h:.*/, '$1') | step('-20:blue, -1.9:blue, 0:white, 0.1:red, 1.9:red')">
                </ftui-icon>
                <ftui-icon size="-2"
                      [name]="WetterProplanta:statTemperatureTendency | replace(/3h:\s+(.*?)\s+6h:.*/, '$1') | step('-20:angle-double-down, -1.9:angle-down, 0:equal, 0.1:angle-up, 1.9:angle-double-up')"
                      [color]="WetterProplanta:statTemperatureTendency | replace(/3h:\s+(.*?)\s+6h:.*/, '$1') | step('-20:blue, -1.9:blue, 0:white, 0.1:red, 1.9:red')">
                </ftui-icon>
              </ftui-row>


Auch das replace-Statement passt noch nicht. Ich möchte den Wert nach 3h extrahieren (1h: -0.4 2h: -0.5 3h: -0.3 6h: -1.8 ) .

Viele Grüße und noch frohe Weihnachten
Jürgen

[mr_petz]

Hast Du noch einen Tipp, wie ich die beiden Zeichen über Temperatur und Luftfeuchte näher zusammenbringe?

Da gibst du einfach im row ein width mit. Bsp.:

Code Auswählen Erweitern


<ftui-row width="15%">


Auch das replace-Statement passt noch nicht. Ich möchte den Wert nach 3h extrahieren (1h: -0.4 2h: -0.5 3h: -0.3 6h: -1.8 ) .

Da sollte das ziehen:

Code Auswählen Erweitern


replace(/3h:\s+(.*)\s+6h/, '$1')

oder:

Code Auswählen Erweitern


replace(/3h: (.*) 6h/, '$1')

Edit:
oder mit der Pipe part() solange Leerzeichen drin sind:

Code Auswählen Erweitern


| part(6)

da brauchst du dann den replace() nicht mehr.
Wenn vor 1h noch ein Leerzeichen drin ist, dann part(7).

LG

[juemuc]

Vielen Dank für die  super Hinweise.

Mit dem Pipe "part" habe ich das gewünschte Ergebnis erzielt. Auch die Ergänzung mit "width" war perfekt.

Viele Grüße
Jürgen 

[juemuc]

Hallo zusammen,
nachdem ich nun meine Statusleiste fertig habe, möchte ich meine Menü-Leiste noch optimieren.
Bei jedem Menüpunkt übergebe ich einen Wert (der dem Menüpunkt entspricht) an eine FHEM-Variable, wenn ich den Menüpunkt anklicke. Soweit so gut. Wenn ich allerdings die Seite neu aufrufe bzw. mit F5 refreshe, wird die Variable nicht mit dem Wert des aktiven Menupunktes aktuallsiert (es erfolgte ja auch kein "@click". Gibt es ein Art "@active" ? Ich mit @active hat es zumindest nicht funktioniert.

Noch besser wäre, wenn ich den Menüpunkt auf aktiv setzen könnte, dessen Wert in der Fhem-Variablen steht. 

Code Auswählen Erweitern

   <ftui-grid-tile row="1" col="1" height="12" width="2">
      <header>Menü</header>
      <ftui-column>
        <ftui-tab view="View1" direction="vertical" size="large" active>
          <ftui-icon name="home" @click="sendFhem('set FTUI_Seite Home')"></ftui-icon>
          <ftui-label @click="sendFhem('set FTUI_Seite Home')">Home</ftui-label>
        </ftui-tab>
        <ftui-tab view="View2" direction="vertical" size="large">
          <ftui-icon name="cloudy" @click="sendFhem('set FTUI_Seite Wetter')"></ftui-icon>
          <ftui-label @click="sendFhem('set FTUI_Seite Wetter')">Wetter</ftui-label>
        </ftui-tab>
        <ftui-tab view="View3" direction="vertical" size="large">
          <ftui-icon name="cutlery" @click="sendFhem('set FTUI_Seite Küche')"></ftui-icon>
          <ftui-label @click="sendFhem('set FTUI_Seite Küche')">Küche</ftui-label>
        </ftui-tab>
        <ftui-tab view="View4" direction="vertical" size="large">
          <ftui-icon path="../images/openautomation" name="scene_livingroom" @click="sendFhem('set FTUI_Seite Wohnzimmer')"></ftui-icon>
          <ftui-label @click="sendFhem('set FTUI_Seite Wohnzimmer')">Wohnzimmer</ftui-label>
        </ftui-tab>
        <ftui-tab view="View5" direction="vertical" size="large">
          <ftui-icon path="../images/openautomation" name="it_pc" @click="sendFhem('set FTUI_Seite Büro')"></ftui-icon>
          <ftui-label @click="sendFhem('set FTUI_Seite Büro')">Büro</ftui-label>
        </ftui-tab>
        <ftui-tab view="View6" direction="vertical" size="large">
          <ftui-icon name="bath" @click="sendFhem('set FTUI_Seite Bad')"></ftui-icon>
          <ftui-label @click="sendFhem('set FTUI_Seite Bad')">Bad</ftui-label>
        </ftui-tab>
        <ftui-tab view="View7" direction="vertical" size="large">
          <ftui-icon name="bed" @click="sendFhem('set FTUI_Seite Schlafzimmer')"></ftui-icon>
          <ftui-label @click="sendFhem('set FTUI_Seite Schlafzimmer')">Schlafzimmer</ftui-label>
        </ftui-tab>
       <ftui-tab view="View8" direction="vertical" size="large">
          <ftui-icon name="front-door" @click="sendFhem('set FTUI_Seite Flur')"></ftui-icon>
          <ftui-label @click="sendFhem('set FTUI_Seite Flur')">Flur</ftui-label>
        </ftui-tab>
       <ftui-tab view="View9" direction="vertical" size="large">
          <ftui-icon name="archive" @click="sendFhem('set FTUI_Seite Kammer')"></ftui-icon>
          <ftui-label @click="sendFhem('set FTUI_Seite Kammer')">Kammer</ftui-label>
        </ftui-tab>
       <ftui-tab view="View10" direction="vertical" size="large">
          <ftui-icon name="server" @click="sendFhem('set FTUI_Seite System')"></ftui-icon>
          <ftui-label @click="sendFhem('set FTUI_Seite System')">System</ftui-label>
        </ftui-tab>
       <ftui-tab view="View11" direction="vertical" size="large">
          <ftui-icon name="video-camera" @click="sendFhem('set FTUI_Seite Kamera')"></ftui-icon>
          <ftui-label @click="sendFhem('set FTUI_Seite Kamera')">Kameras</ftui-label>
        </ftui-tab>
      </ftui-column>
    </ftui-grid-tile>

Viele Grüße
Jürgen

[mr_petz]

Schau hier:
https://forum.fhem.de/index.php/topic,115259.msg1185574/topicseen.html#msg1185574

LG

[juemuc]

Passt 

Vielen Dank für die schnelle Hilfe.

LG
Jürgen

[juemuc]

Hallo zusammen,

ich möchte mit dem Pipe "map" folgende Zeichenkette "pct 100" ersetzen. map('pct 100:icon-name') bzw. map('`pct 100`:icon-name') oder auch map('`pct 100:icon-name`') funktionieren leider nicht.

Was mache ich falsch?

Viele Grüße
Jürgen

[meier81]

Hallo Jürgen,

hab das bei mir so im Einsatz:

Code Auswählen Erweitern

<ftui-icon [name]="DEVICE | map('zuhause:home, schläft:bed, aufgestanden:child, abwesend:blind, verreist:plane')"></ftui-icon>

Dazu müssen aber die Icons auch im Ordner "ftui/icons" liegen.

Gruß Markus

[juemuc]

Hallo Markus,

wenn die Zeichenkette vor dem ":" ohne Leerzeichen ist, ist es auch kein Problem. Es geht um das Leerzeichen in "pct 100". Es können folgende Werte kommen: "pct 0", "pct 25", "pct 50", "pct 75", "pct 100" und "undefined".

Viele Grüße
Jürgen

[mr_petz]

Setz die mal in accent aigu (APOSTROPH)  oder accent grave (GRAVISZEICHEN)...

Edit:
Zur Not mit replace() die Leerstellen entfernen...

LG

[juemuc]

Hallo zusammen,

jetzt hat es auch so funktioniert. Hatte noch einen anderen Fehler davor. Danke für Eure Tipps.

Viele Grüße
Jürgen