FTUI version 3

[setstate]

Was hast du gebaut? Ein Swiper in einem popup? Oder was hat den header?

Das funktioniert eigentlich. Wenn man aber noch andere Elemente drin hat, kann sich das schnell verschieben.
Du musst uns schon zeigen, was nicht geht, damit wir es optimieren können.

Ein kleiner Test bei mir hat funktioniert:

Code Auswählen Erweitern


  <ftui-popup id="swiper_popup">
    <header>Swiper in Popup</header>
    <ftui-swiper id="swiper3" dots auto-play interval="3">
      <ftui-image src="https://i.pravatar.cc/100?img=11" width="90px" shape="circle"></ftui-image>
      <ftui-image src="https://i.pravatar.cc/100?img=12" width="90px" shape="circle"></ftui-image>
      <ftui-image src="https://i.pravatar.cc/100?img=13" width="90px" shape="circle"></ftui-image>
      <ftui-image src="https://i.pravatar.cc/100?img=14" width="90px" shape="circle"></ftui-image>
      <ftui-image src="https://i.pravatar.cc/100?img=15" width="90px" shape="circle"></ftui-image>
    </ftui-swiper>
  </ftui-popup>


[meier81]

Hallo setstate,

ja, habe einen Swiper in einem popup. Es geht um yersinia´s DWD Anzeige, hab ich bei mir eingebaut und möchte hier gerne eine "Überschrift" haben. Egal ob ich aber das Ganze als popup definiere oder direkt im GRID lasse, der Sliderbalken wird mit header nicht angezeigt.

Hier mal meine Definitionen:

index.html

Code Auswählen Erweitern

      <ftui-column width="3%">
        <ftui-icon class="size-0" name="_warning" @click="DWDWarnPop.open()"
                   [hidden]="NN_xx_SW_DWD:a_count | step('0:true, 1:false')"></ftui-icon>
        <ftui-badge [text]="NN_xx_SW_DWD:a_count"
                    [hidden]="NN_xx_SW_DWD:a_count | step('0:true, 1:false')" class="size-0">
        </ftui-badge>
      </ftui-column>

  <ftui-popup id="DWDWarnPop" timeout="0">
    <header>DWD Wetterwarnungen</header>
    <ftui-content file="content-dwd_warnung-grid.html"
                  device="NN_xx_SW_DWD"
                  iconspath="icons/weather/wi"
                  dwdinterval="5">
    </ftui-content>
  </ftui-popup>


Die Datei content-dwd_warnung-grid.html:

Code Auswählen Erweitern

<style> @import "modules/dwd-warn/dwd-warn.css"; </style>
<div class="dwd-warn">
<!-- no warnings -->
  <div ftui-binding class="dwd-warn-no-warning"
       [style]="{{device}}:a_count | step('0:``, 1:`display:none;`')">
     <font>Aktuell keine Warnmeldungen (Update</font>
     <ftui-label [text]="{{device}}:a_time | toDate() | format('DD.MM. hh:mm')" style="" unit=").">
     </ftui-label>
  </div>
<!-- warnings -->
   <ftui-swiper id="dwd-swiper"
     auto-play
     scrollbar
     interval="{{dwdinterval}}"
     [hidden]="{{device}}:a_count | step('0:true, 1:false')">
  <!-- slides for warnings -->
     <ftui-content id="dwd-swiper_slide_01" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="0" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 1:false')"
                [style]="{{device}}:a_count | step('0:`display: none;`, 1:`margin-right: 0px;`, 2:``')"></ftui-content>
     <ftui-content id="dwd-swiper_slide_02" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="1" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 2:false')"
                [style]="{{device}}:a_count | step('0:`display: none;`, 2:`margin-right: 0px;`, 3:``')"></ftui-content>
     <ftui-content id="dwd-swiper_slide_03" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="2" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 3:false')"
                [style]="{{device}}:a_count | step('0:`display: none;`, 3:`margin-right: 0px;`, 4:``')"></ftui-content>
     <ftui-content id="dwd-swiper_slide_04" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="3" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 4:false')"
                [style]="{{device}}:a_count | step('0:`display: none;`, 4:`margin-right: 0px;`, 5:``')"></ftui-content>
     <ftui-content id="dwd-swiper_slide_05" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="4" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 5:false')"
                [style]="{{device}}:a_count | step('0:`display: none;`, 5:`margin-right: 0px;`, 6:``')"></ftui-content>
     <ftui-content id="dwd-swiper_slide_06" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="5" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 6:false')"
                [style]="{{device}}:a_count | step('0:`display: none;`, 6:`margin-right: 0px;`, 7:``')"></ftui-content>
     <ftui-content id="dwd-swiper_slide_07" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="6" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 7:false')"
                [style]="{{device}}:a_count | step('0:`display: none;`, 7:`margin-right: 0px;`, 8:``')"></ftui-content>
     <ftui-content id="dwd-swiper_slide_08" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="7" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 8:false')"
                [style]="{{device}}:a_count | step('0:`display: none;`, 8:`margin-right: 0px;`, 9:``')"></ftui-content>
     <ftui-content id="dwd-swiper_slide_09" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="8" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 9:false')"
                [style]="{{device}}:a_count | step('0:`display: none;`, 9:`margin-right: 0px;`, 10:``')"></ftui-content>
     <ftui-content id="dwd-swiper_slide_10" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="9" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 10:false')"
                [style]="{{device}}:a_count | step('0:`display: none;`, 10:`margin-right: 0px;`, 11:``')"></ftui-content>
</div> <!-- /dwd-warn -->

Die Datei content-dwd_warnung-slide.html:

Code Auswählen Erweitern

<div class="dwd-warn-slide">
<!-- warning triangle -->
  <div class="dwd-warn-triangle-box">
    <svg viewBox="0 0 500 500" class="dwd-warn-triangle-svg">
      <polygon ftui-binding
    points="70,430 250,70 430,430"
    [class]="{{device}}:a_{{warnnum}}_severity | map('Minor:`dwd-warn-triangle-svg-minor`, Normal:`dwd-warn-triangle-svg-normal`, Moderate:`dwd-warn-triangle-svg-moderate`, Severe:`dwd-warn-triangle-svg-severe`, Extreme:`dwd-warn-triangle-svg-extreme`')"
    [style]="{{device}}:a_{{warnnum}}_areaColor | prepend('stroke: rgb(') | append(');')" />
      <image ftui-binding
    [href]="{{device}}:a_{{warnnum}}_event | getDwdWarnIcon() | prepend('{{iconspath}}/') | append('.svg')"
    x="25%" y="37.5%" width="50%" height="50%" />
    </svg>
  </div> <!-- /triangle-box -->
<!-- warn content -->
   <div ftui-binding
[class]="{{device}}:a_{{warnnum}}_severity | map('Minor:`dwd-warn-content-background-minor`, Normal:`dwd-warn-content-background-normal`, Moderate:`dwd-warn-content-background-moderate`, Severe:`dwd-warn-content-background-severe`, Extreme:`dwd-warn-content-background-extreme`')"
[style]="{{device}}:a_{{warnnum}}_areaColor | prepend('background-color: rgb(') | append(');')">
          <ftui-label [text]="{{device}}:a_{{warnnum}}_eventDesc" class="dwd-warn-content-header"></ftui-label>
          <ftui-label [text]="{{device}}:a_{{warnnum}}_description" class="dwd-warn-content-description"></ftui-label>
          <div class="dwd-warn-content-footer">
           <font>G&uuml;ltig von</font>
           <ftui-label [text]="{{device}}:a_{{warnnum}}_onset | toDate() | format('DD.MM. hh:mm')"></ftui-label>
           <font>bis</font>
           <ftui-label [text]="{{device}}:a_{{warnnum}}_expires  | toDate() | format('DD.MM. hh:mm')"></ftui-label>
           <div class="dwd-warn-content-updatetime">
             <font>(Update:</font>
             <ftui-label [text]="{{device}}:a_time | toDate() | format('DD.MM. hh:mm')" class="" unit=")">
             </ftui-label>
           </div>
         </div>
  </div> <!-- /content -->
</div> <!-- /warn-slide-->

Die Datei dwd-warn.css hängt als Anlage bei.

Gruß Markus

[mr_petz]

Hi Markus,
Du könntest es so in der content-dwd_warnung-slide.html machen:

Code Auswählen Erweitern


<div class="dwd-warn" style="height:80%">


Edit: oder ohne style in der class dwd-warn position: absolute; in position: relative; ändern...

Da hier die class dwd-warn 100% Höhe haben möchte mit 'position: absolute;'...
@yersinia: 'position: relative;' dürfte hier angebrachter sein...

Edit2: und bzgl. popup ohne header müsste man z-index: -1; in der class dwd-warn mitgeben um das popup mittels x schließen zu können. das div legt sich über das x

LG

[mr_petz]

@setstate

Hast du auch nochmal den meter getestet? Ich hatte dir ja hier:
https://forum.fhem.de/index.php/topic,115259.msg1248030.html#msg1248030
eine mögliche Lösung gezeigt.

Mein Anliegen ist aber noch eins zum meter.
Kannst du bitte noch den margin vom .progress benutzerdefiniert machen? Mit margin ist der Abstand sehr groß...
Das scale Feature finde ich gut. Man kann sich dann eine Eigene Scala erstellen...

LG mr_petz

[meier81]

Hi Markus,
Du könntest es so in der content-dwd_warnung-slide.html machen:

Code Auswählen Erweitern


<div class="dwd-warn" style="height:80%">


Edit: oder ohne style in der class dwd-warn position: absolute; in position: relative; ändern...

Da hier die class dwd-warn 100% Höhe haben möchte mit 'position: absolute;'...
@yersinia: 'position: relative;' dürfte hier angebrachter sein...

Edit2: und bzgl. ohne header müsste man z-index: -1; in der class dwd-warn mitgeben um das popup mittels x schließen zu können. das div legt sich über das x

LG

Hallo mr_petz,

vielen Dank, das war´s mit dem ändern von "absolute" in "relative". Inhalt wird weiterhin korrekt angezeigt, aber diesmal auch mit Sliderbalken.

Bezüglich dem "z-index: -1;" habe ich das auch ausprobiert (geht bei mir auch ohne, kann es ja mit dem x vom header einwandfrei schließen), dann habe ich aber wenn ich es nicht als popup sondern als normales GRID definiere ein leeres Feld, wird dann wahrscheinlich hinter das GRID gelegt.

Aber für mich alles gelöst, danke dir vielmals 

Gruß Markus

[mr_petz]

...
Bezüglich dem "z-index: -1;" habe ich das auch ausprobiert (geht bei mir auch ohne, kann es ja mit dem x vom header einwandfrei schließen), dann habe ich aber wenn ich es nicht als popup sondern als normales GRID definiere ein leeres Feld, wird dann wahrscheinlich hinter das GRID gelegt.

Aber für mich alles gelöst, danke dir vielmals 

Gruß Markus

Das war auf keinen header im popup bezogen...

[meier81]

Das war auf keinen header im popup bezogen...

Alles klar 

[bismosa]

Hallo!

Ich bin derzeit dabei meine Thermostatsteuerung nach diesem Beispiel aufzubauen:
https://forum.fhem.de/index.php/topic,115259.msg1113344.html#msg1113344

Hier nutze ich die Vorlage:

nach einem kleinen Umbau geht es jetzt so:

Code Auswählen Erweitern


      <ftui-row class="myspinner">
        <ftui-cell>
          <ftui-button [value]="dummy2"
                       (value)="add(-0.5) | dummy2"
                       states="$value"
                       fill="">
            <ftui-icon class="size-1"
                       name="minus"
                       color="blue"></ftui-icon>
          </ftui-button>
        </ftui-cell>
        <ftui-cell>
          <ftui-label
                      [text]="dummy2"
                      [color]="dummy2 | map('5:blue, 20:mygreen, 23:red')"
                      class="size-4">
          </ftui-label>
        </ftui-cell>
        <ftui-cell>
          <ftui-button [value]="dummy2"
                       (value)="add(0.5) | dummy2"
                       states="$value"
                       fill="">
            <ftui-icon class="size-1"
                       name="plus"
                       color="red"></ftui-icon>
          </ftui-button>
        </ftui-cell>
      </ftui-row>


1.)
Lässt sich das Senden der neuen Temperatur verzögern? Wenn ich nun z.B. von 17°C auf 22°C springe, muss ich 10x tippen. D.h. es werden auch 10x Temperaturen übermittelt. Leider ist das MAX-System ja so in der Nachrichtenanzahl beschränkt, das ich dann schnell mehrere Minuten warten muss, bis alle Nachrichten übertragen sind.

2.) Ändere ich die Temperatur auf eine ganze Zahl, wird kurzzeitig z.B. 20°C angezeigt. Kann man hier auch ein Zwangskomma (20.0 also immer eine Kommastelle) einsetzen?

Gruß
Bismosa

[megadodopublications]

Nabend.

Ich arbeite viel mit Variablen und ftui-content. Bis vor ein paar Wochen konnte ich Popups mit Variablen definieren, zu diesem Zeitpunkt war die Definition per "popup-target":

Code Auswählen Erweitern


<ftui-icon class="size-3" name="fts_garage_door_manual" popup-target="popup-{{device}}">


und dann

Code Auswählen Erweitern


<ftui-popup
id="popup-{{device}}"     
.....etc.pp.


Die Definition der Popups erfolgt nun laut den Beispielen mit @click -

wenn ich meine bisherigen popup-target Definitionen durch @click ersetze, funktionieren Popups grundsätzlich (gut

Aber: allerdings scheint es nicht mehr möglich zu sein, Popups mit Variablen zu definieren: 

Code Auswählen Erweitern


<ftui-label
class="size-3"
color="light"
@click="pop{{device}}.open()">
{{name}}
</ftui-label>


und dann

Code Auswählen Erweitern


<ftui-popup
id="pop{{device}}"
timeout="120"
position="page"
width="550px"
height="500px"
shape="round">
<ftui-row height="20%">


Die Definition von ftui-label und ftui-popup stecken in einem ftui-content mit Namen "firehd10/tiles/tile-5x2-HUE-CT.html", dieses wird aus einem Grid Tile so aufgerufen:

Code Auswählen Erweitern


<ftui-grid-tile row="5" col="7" height="3" width="6">
<ftui-content file="firehd10/tiles/tile-5x2-HUE-CT.html"
device="hueBridge_EG_HUEDevice7"
name="Spot 4"
icon-on="light_downlight_wall_ru"
icon-off="light_downlight_wall_ru"
preset-1-name="ct 156" preset-2-name="ct 270" preset-3-name="ct 380" preset-4-name="ct 490"
preset-1-set="ct 156" preset-2-set="ct 270" preset-3-set="ct 380" preset-4-set="ct 490">
</ftui-content>
</ftui-grid-tile>


wie geschrieben: ohne die Variable {{device}} bei der Popup Definition ist alles gut.

Was muss ich ändern, damit sinngemäß dieser Code funktioniert? 

Vielen Dank vorab
Ralph.

[setstate]

1.)
Lässt sich das Senden der neuen Temperatur verzögern? Wenn ich nun z.B. von 17°C auf 22°C springe, muss ich 10x tippen. D.h. es werden auch 10x Temperaturen übermittelt. Leider ist das MAX-System ja so in der Nachrichtenanzahl beschränkt, das ich dann schnell mehrere Minuten warten muss, bis alle Nachrichten übertragen sind.

ja, mit debounce

Code Auswählen Erweitern


    <ftui-grid-tile row="5" col="1" height="1" width="1">
      <header>Temp-Stepper</header>
      <!-- set debounce="400" to gather multiple clicks before sending-->
      <ftui-button [value]="ftuitest:thermo" value="20" (value)="add(0.5) | setreading ftuitest:thermo" states="$value" debounce="400" fill="">
        <ftui-icon size="-2" name="plus"></ftui-icon>
      </ftui-button>
      <ftui-label [text]="ftuitest:thermo | fix(1)" value="20.0" unit=" °C"></ftui-label>
      <ftui-button [value]="ftuitest:thermo" value="20" (value)="add(-0.5) | setreading ftuitest:thermo" states="$value" debounce="400" fill="">
        <ftui-icon size="-2" name="minus"></ftui-icon>
      </ftui-button>
    </ftui-grid-tile>


[mr_petz]

@megadodopublications
Hi Ralph,
ich habe das mal nachgestellt und es funktioniert weiterhin:
grid:

Code Auswählen Erweitern


<ftui-grid-tile row="5" col="7" height="3" width="6">
<ftui-content file="examples/contents/content-components2.html"
device="hueBridge_EG_HUEDevice7"
name="Spot 4"
icon-on="light_downlight_wall_ru"
icon-off="light_downlight_wall_ru"
preset-1-name="ct 156" preset-2-name="ct 270" preset-3-name="ct 380" preset-4-name="ct 490"
preset-1-set="ct 156" preset-2-set="ct 270" preset-3-set="ct 380" preset-4-set="ct 490">
</ftui-content>
</ftui-grid-tile>


content:

Code Auswählen Erweitern


<ftui-label
class="size-3"
color="light"
@click="pop{{device}}.open()">
{{name}}
</ftui-label>
<ftui-popup
id="pop{{device}}"
timeout="120"
position="page"
width="550px"
height="500px"
shape="round">
<ftui-icon name="database"></ftui-icon>
</ftui-popup>


LG mr_petz

[megadodopublications]

@megadodopublications
Hi Ralph,
ich habe das mal nachgestellt und es funktioniert weiterhin:
...
LG mr_petz

Danke dir!
Meine eigenen Analysen haben ergeben, daß die neue @click Variante bei mir an einigen Stellen sehr gut funktioniert, leider aber nicht überall. Ich vermute, dass der Fehler daher etwas tiefer liegt (zB ein hausgemachtes Problem, html Code etc.pp.). Zeitlich muss ich hier aber erstmal einen Break setzen und bin daher auf die popup Variiert "vor @click" zurück - damit es weitergeht und der WAF erhalten bleibt.

@setstate, @mr_petz: an dieser Stelle noch einmal vielen Dank für euren Einsatz und diese tolle Software!

meine im letzten Jahr bzw im April berichteten Probleme haben sich zwischenzeitlich "verflüchtigt"; FTUI startet zwar immer noch recht "behäbig", ist dann aber vollständig; verglichen mit meinen früheren Problemen sind alle Dummies etc da und enthalten die aktuellen Werte. Und nein, ich habe bewusst nichts geändert; ich meine mich zu erinnern, dass das irgendwann im August "funktionierte". Magisch, Sonnenflecken,.. k.A.

Ich sehe das so: für ein "Hobby" und eine "version under construction" ist das echt gut!
Danke
Ralph

[mr_petz]

...
Meine eigenen Analysen haben ergeben, daß die neue @click Variante bei mir an einigen Stellen sehr gut funktioniert, leider aber nicht überall. Ich vermute, dass der Fehler daher etwas tiefer liegt (zB ein hausgemachtes Problem, html Code etc.pp.). Zeitlich muss ich hier aber erstmal einen Break setzen und bin daher auf die popup Variiert "vor @click" zurück - damit es weitergeht und der WAF erhalten bleibt.
...

Aufgeschoben ist nicht aufgehoben... Ich würde dem Verursacher für das Verhalten auf die Spur gehen.....
Wenn du jetzt zurück gehst, dann kannst du auch keine neuen Features/Neuerungen benutzen und irgendwann holt dich das ein...

LG

[bismosa]

Hallo!
Ich kann da nur den Tipp geben:
Alles für die öffentliche Version in ein extra Verzeichnis kopieren. Der Beta Status immer im FTUI Ordner....
Dann kann auch bei einem Update nichts passieren und der WAF bleibt bestehen 
Kurz weil mobil...

Gruß
Bismosa

[bismosa]

Hallo!

Sorry, bin jetzt erst zum ändern gekommen.

ja, mit debounce

Genial!  Alles schon vorhanden. Man muss nur die richtigen Suchbegriffe nutzen. Dann klappt es auch.
Hab die Zeit sogar noch etwas erhöht. Das ist aber Geschmackssache.

2.) Ändere ich die Temperatur auf eine ganze Zahl, wird kurzzeitig z.B. 20°C angezeigt. Kann man hier auch ein Zwangskomma (20.0 also immer eine Kommastelle) einsetzen?

Hätte ich auch selbst drauf kommen müssen. fix(1). Schon mehrfach verwendet...aber manchmal hat man dann einfach ein Loch im Kopp.

Code Auswählen Erweitern

<ftui-label [text]="{{tpl_Device}}:desiredTemperature | fix(1)"

Danke!

Gruß
Bismosa