FTUI version 3

[grossmaggul]

Den Segment Button finde ich schick, danke dafür setstate.

[SirMarco]

Soll man das Bild vorgeben können oder ein fixes? Oder nur Text?

Ein fixes Bild wäre Klasse

[moonsorrox]

ich suche immer noch krampfhaft nach etwas mehr Erklärung für einen Slider, den ich als Fortschritts Anzeige nutzen möchte.
Was ich dabei gern hätte wäre win schlichter Slider der von links nach rechts läuft und evtl. rechts oder links die ablaufende Zeit anzeigt, entweder runter zählt oder die verbleibende Zeit zeigt.
Ich bekomme es nur teilweise hin was ich nicht bekomme ist die Zeit, da zeigt er alles mögliche an.
Gibt es schon mehr Informationen zum Slider auf github habe ich nicht soviel gefunden nur die Beispiele senkrecht und waagerecht, aber keine Details

[grossmaggul]

Bei der Fortschrittsanzeige meines Squeezeplayers habe ich das so gelöst.

Code Auswählen Erweitern

<!-- Fortschrittanzeige --> 
            <ftui-row>
                <ftui-column align-items="right" width="20%">
                    <ftui-label [text]="wz.krachnase_air:currentTrackPosition | timeFormat('mm:ss','s')"></ftui-label>
                </ftui-column>
                <ftui-column>
                    <ftui-slider [max]="wz.krachnase_air:duration"
                                 [(value)]="wz.krachnase_air:currentTrackPosition" handle="none">
                </ftui-slider>
                </ftui-column>
               
                <ftui-column align-items="left" width="20%">
                    <ftui-label [text]="wz.krachnase_air:duration | timeFormat('mm:ss','s')"></ftui-label>
                </ftui-column>
            </ftui-row>

Links wird dann die abgelaufene Zeit abgezählt.

Vielleicht hilft's Dir ja weiter.

[SirMarco]

Bei der Fortschrittsanzeige meines Squeezeplayers habe ich das so gelöst.

Code Auswählen Erweitern

<!-- Fortschrittanzeige --> 
            <ftui-row>
                <ftui-column align-items="right" width="20%">
                    <ftui-label [text]="wz.krachnase_air:currentTrackPosition | timeFormat('mm:ss','s')"></ftui-label>
                </ftui-column>
                <ftui-column>
                    <ftui-slider [max]="wz.krachnase_air:duration"
                                 [(value)]="wz.krachnase_air:currentTrackPosition" handle="none">
                </ftui-slider>
                </ftui-column>
               
                <ftui-column align-items="left" width="20%">
                    <ftui-label [text]="wz.krachnase_air:duration | timeFormat('mm:ss','s')"></ftui-label>
                </ftui-column>
            </ftui-row>

Links wird dann die abgelaufene Zeit abgezählt.

Vielleicht hilft's Dir ja weiter.

TOP!!

Magst du mal das List vom wz.krachnase_air posten?

Besten Dank

Grüsse

[SirMarco]

Hallo zusammen

In der Toolbar habe ich ein label eingefügt:

Code Auswählen Erweitern

  <ftui-main>
    <ftui-view-toolbar class="fixed">
      <ftui-menu-button slot="start" align-items="left"></ftui-menu-button>
      <ftui-title  group="default" class="size-5 titleroom" slot="start"></ftui-title>
      <ftui-title slot="end">
        <ftui-tab view="content_klima" title="Klima" color="black">
        <ftui-weather class="size-1" [condition]="Controller_myProPlanta:fc0_weatherDay"></ftui-weather>
        <ftui-label [text]="netatmo_M02_00_00_06_7e_16:temperature" style="padding-left: 10px;" class="size-3"><span slot="end">°C</span></ftui-label>
      </ftui-tab>
      </ftui-title>
    </ftui-view-toolbar>
</ftui-main>


Wenn ich das label auf einer anderen Seite anzeigen lassen möchte, wird es nicht angezeigt - erst wenn ich das label in der Toolbar lösche.

Liegt das daran, das die 2. Seite ein Template ist?

Hier möchte ich es ebenfalls anzeigen lassen:
content_klima.html

Code Auswählen Erweitern

<ftui-page>
    <ftui-column align-items="left" class="tabsection">
        <ftui-title style="padding-left: 10px" class="size-4">Klima</ftui-title>
      </ftui-column>
    <ftui-view-section>                     
        <ftui-content file="template/template_klima_2er.html" name="Lounge" device="netatmo_M02_00_00_06_7e_16"></ftui-content>
    </ftui-view-section>
</ftui-page>

template_klima_2er.html

Code Auswählen Erweitern



<ftui-row>
<ftui-column>
    <ftui-label class="align-left" >{{name}}</ftui-label>
</ftui-column>
<ftui-column>
    <ftui-icon name="bars" class="size-0" popup-target="{{name}}"></ftui-icon>
</ftui-column>
<ftui-column>
    <ftui-label [text]="{{device}}:temperature" [color]="{{device}}:temperature | map('0=secondary,16=warning,30=danger')" class="size-5"><span slot="end">°C</span></ftui-label>
    <ftui-label [text]="netatmo_M02_00_00_06_7e_16:temperature" style="padding-left: 10px;" class="size-3"><span slot="end">°C</span></ftui-label>

</ftui-column>
<ftui-column>
    <ftui-label [text]="{{device}}:humidity" [color]="{{device}}:humidity | map('0=secondary,50=warning,80=primary')" class="size-5"><span slot="end">%</span></ftui-label>
</ftui-column>
</ftui-row> 
<ftui-popup id="{{name}}" timeout="0" width="400px" height="400px">
            <ftui-row>
                <ftui-chart title="{{name}}" unit="day" prefetch="21600" extend>
                    <ftui-chart-data label="Temperatur" point-radius="0" tension="0.3" fill color="#27ae60" log="DBLogging" file="history" spec="{{device}}:temperature"></ftui-chart-data>
                    <ftui-chart-data label="Luftfeuchtigkeit" point-radius="0" tension="0.3" fill color="#228ace" log="DBLogging" file="history" spec="{{device}}:humidity"></ftui-chart-data>
                    <ftui-chart-controls units="day, week"></ftui-chart-controls>
                  </ftui-chart>                           
            </ftui-row>

</ftui-popup>

Danke 

Grüsse

Hallo zusammen

Könnte das jemand von euch einmal nachbauen und testen?
Oder habe ich einen Gedankenfehler?

Als Workaround lasse ich mir das reading in ein Dummy schreiben und das Dummy an der zweiten Stelle anzeigen.

Grüsse

[grossmaggul]

Code Auswählen Erweitern

Magst du mal das List vom wz.krachnase_air posten?
Ehrlich gesagt nicht, weil das Teil mehrere hundert Zeilen hat.

[moonsorrox]

Bei der Fortschrittsanzeige meines Squeezeplayers habe ich das so gelöst.
Links wird dann die abgelaufene Zeit abgezählt.

Vielleicht hilft's Dir ja weiter.

Das sieht doch sehr gut aus werde ich gleich mal einbauen...! 

[khk123]

Mal 'ne Verständnisfrage zu popup. Wenn ich popup-target bei ftui-row angebe, zeigt der Cursor im Firefox zwar an, dass etwas ausgewähl werden kann. Aber beim Klick darauf passiert nichts. Der Klick auf das Label ruft das popup-Fenster korrekt auf. Geht es bei ftui-row oder ftui-column generell nicht? Es wäre halt schön, wenn das komplette Tile auf den Klick reagieren würde. Oder mache ich etwas falsch? 

Code Auswählen Erweitern


<ftui-row popup-target="wetter">
   <ftui-column>
       <ftui-row>
          <ftui-label popup-target="wetter">Heute</ftui-label>
</ftui-row>
....


[OdfFhem]

@SirMarco, @setstate

Ich habe mal einen kleinen Test gemacht und Folgendes festgestellt:
- Die Hauptseite enthält direkt ein Reading namens XYZ.
- Außerdem enthält die Hauptseite noch als content ein Popup.
- Dieses Popup enthält dasselbe Reading XYZ wie die Hauptseite.

Wird die Seite neu geladen, wird auf der Hauptseite das Reading XYZ angezeigt.
Öffne ich das Popup, wird das gewünschte Reading XYZ dort nicht angezeigt.

Mehrmaliges Öffnen des Popup ändert nichts an diesem Verhalten.

Letztlich habe ich festgestellt, dass eine Wertänderung des fraglichen Readings XYZ das Verhalten ändert.
- Ist das Popup geschlossen und wird nach der Wertänderung von Reading XYZ geöffnet, dann wird der zugehörige Wert angezeigt.
- Ist das Popup bereits geöffnet, dann wird mit der Wertänderung das Reading XYZ unmittelbar angezeigt.


Ich vermute, dass das Verhalten daran liegt, dass das Reading XYZ schon im Rahmen der Hauptseite genutzt und "verteilt" wurde. Anschließend abonniert das Popup das Reading XYZ, so dass der Wert neu geholt wird - es unterscheidet sich aber nicht vom bisherigen Wert und wird entsprechend nicht nochmals "verteilt". Ändert sich der Wert auf der FHEM-Seite, dann wird das Reading neu gesendet und wegen abweichendem Wert neu "verteilt".

Angenommen, die Theorie stimmt halbwegs, dann müsste ein erneutes Abonnieren zum Zurücksetzen des Readings XYZ führen ...

[grossmaggul]

Der Klick auf das Label ruft das popup-Fenster korrekt auf. Geht es bei ftui-row oder ftui-column generell nicht?

Doch das geht.

Probiere mal so, Du hast übrigens ein </ftui-row> und ein</ftui-column> vergessen:

Code Auswählen Erweitern


<ftui-row>
   <ftui-column>
       <ftui-row popup-target="wetter">
          <ftui-label>Heute</ftui-label>
      </ftui-row>
  </ftui-column>
</ftui-row>

oder wenn die gesamte column als klickbarer Bereich genutzt werden soll, so

Code Auswählen Erweitern


<ftui-row>
   <ftui-column popup-target="wetter">
       <ftui-row>
          <ftui-label>Heute</ftui-label>
      </ftui-row>
  </ftui-column>
</ftui-row>

[SirMarco]

Mal 'ne Verständnisfrage zu popup. Wenn ich popup-target bei ftui-row angebe, zeigt der Cursor im Firefox zwar an, dass etwas ausgewähl werden kann. Aber beim Klick darauf passiert nichts. Der Klick auf das Label ruft das popup-Fenster korrekt auf. Geht es bei ftui-row oder ftui-column generell nicht? Es wäre halt schön, wenn das komplette Tile auf den Klick reagieren würde. Oder mach eich etwas falsch? 

Code Auswählen Erweitern


<ftui-row popup-target="wetter">
   <ftui-column>
       <ftui-row>
          <ftui-label popup-target="wetter">Heute</ftui-label>
</ftui-row>
....


So muss das aussehen:

Code Auswählen Erweitern

<ftui-row popup-target="wetter" height="50px" style="background-color: red;"></ftui-row>

<ftui-popup id="wetter" timeout="0" width="400px" height="400px" shape="round">
  heute
</ftui-popup>

[moonsorrox]

ich habe mit dem Popups auch so meine Probleme, ich habe mir ein Popup erstellt welches "content-multimedia.html" heißt über meine index.html öffne ich das Popup folgendermaßen und das funktioniert auch.

Ich habe Quatsch erzählt ist ja gar kein Popup, ich öffne einfach nur eine Datei, aber das funktioniert eben auch nicht
Die Dateien heißen "content-multimedia.html" und "content-multimedia1.html"

Code Auswählen Erweitern

<ftui-grid-tile row="4" col="18" height="13" width="14" class="semitransparent3d">
<ftui-row>
<ftui-content file="content-multimedia.html"></ftui-content>
</ftui-row>
</ftui-grid-tile>

jetzt habe ich ein zweites Popup welches "content-multimedia1.html" heißt dieses möchte ich gern in meiner index.html so öffnen

Code Auswählen Erweitern

<ftui-grid-tile row="4" col="2" height="13" width="14" class="semitransparent3d">
<!--ftui-row>
<ftui-content file="content-multimedia1.html"></ftui-content>
</ftui-row-->
</ftui-grid-tile>

das funktioniert leider nicht, es öffnet sich das Grid-tile, aber es ist leer
Evtl. ist das das gleiche Problem wie vorher schon geschrieben


Was ich noch habe ich möchte in einem Slider noch die aktuelle Anzeige haben, so wie bei github mit dem Beispiel "invert" das ich scale anders einstellen muss habe ich schon hinbekommen, aber ich bekomme es in den Slider unten nicht rein und die Farben der map funktionieren beim Slider auch nicht.
scale sollte so aussehen wenn er hoch zählt "scale(0,100,0,100)"

Code Auswählen Erweitern

<ftui-slider [(value)]=SB3_DreamSqueezy:volume"
[color]="SB3_DreamSqueezy:volume | map('0:lightgreen, 30:blue, 50:yellow, 70:crimson')"
[text]="SB3_DreamSqueezy:volume" text="0"
max="100" tick="10" wide-tick="50" handle="" has-ruler has-wide-ticks>
</ftui-slider>

[OdfFhem]

@moonsorrox

Code Auswählen Erweitern


<!--ftui-row>
  ... egal, was hier steht ...
</ftui-row-->


"<!--" ... "-->" sorgt dafür, dass der dazwischen stehende Code auskommentiert wird und dementsprechend auch nichts angezeigt wird.

[moonsorrox]

@moonsorrox

Code Auswählen Erweitern


<!--ftui-row>
  ... egal, was hier steht ...
</ftui-row-->


"<!--" ... "-->" sorgt dafür, dass der dazwischen stehende Code auskommentiert wird und dementsprechend auch nichts angezeigt wird.

ja ist klar 

ich hatte das falsche drin, sieht natürlich so aus... 

Code Auswählen Erweitern

<ftui-grid-tile row="4" col="2" height="11" width="14" class="semitransparent3d">
<ftui-row>
<ftui-content file="content-multimedia1.html"></ftui-content>
</ftui-row>
</ftui-grid-tile>


<ftui-grid-tile row="4" col="18" height="11" width="14" class="semitransparent3d">
<ftui-row>
<ftui-content file="content-multimedia.html"></ftui-content>
</ftui-row>
</ftui-grid-tile>