FTUI version 3

Eisix · 01 Dezember 2020, 11:22:52

Danke für das popup!

https://wiki.fhem.de/wiki/FTUI_Widget_Spinner
Hatte ich in einem post (#186) gestern schon versucht aus Einzelteilen nachzubauen, aber das habe ich nicht hingekriegt, geht vielleicht über mapping.

Gruß
Eisix

octek0815 · 01 Dezember 2020, 14:33:42

Zitat von: setstate am 01 Dezember 2020, 09:40:25
Popup hat jetzt neu

open: false,
trigger: '',
timeout: 10,

Code Auswählen Erweitern
<ftui-popup id="pop2" [trigger]="dummy3:state:time" [open]="dummy2 | map('on: true, off: false')">

Siehe: https://knowthelist.github.io/ftui/examples/popup.html

Super! Vielen Dank. Dann kann ich jetzt komplett umstellen.

Kann es sein das die klasse "blink" noch nicht funktioniert?

Eisix · 01 Dezember 2020, 17:06:48

@Thyraz
Die Zugriffe auf die verschiedenen Log Arten funktionieren wie hier im Beispiel und auch das ConstY:4 klappt.

was mir noch fehlt ist in welchem Format ich startDate und endDate angebe?

Code Auswählen


<ftui-chart title="Schildkr&ouml;ten">
          <ftui-chart-data label="Schildkr&ouml;ten" color="green" log="logdb" file="history" spec="Schildis_Temp:temperature"></ftui-chart-data>
          <ftui-chart-data label="morgen" color="blue" log="lp" spec="FileLog:Schildis_TempMin,offset=60*60*24:4:Wetter.fc1_tempMin::"></ftui-chart-data>
          <ftui-chart-data label="kritisch" color="red" log="lp" file="-" spec="ConstY:4"></ftui-chart-data>
          <ftui-chart-data label="aussen" fill background-color="#d6305650" color="#d63056" log="logdb" file="history" spec="Sensor_aussen:CleanTemp"></ftui-chart-data>
          <ftui-chart-controls units="day, week"></ftui-chart-controls>
</ftui-chart>

Und zu den verschiedenen Line styles die es gibt habe ich auch keine Info gefunden.

Gruß
Eisix

Eisix · 01 Dezember 2020, 17:41:36

Popup mit Trigger geht bei mir nicht auf. Kann mal jemand schauen wo mein Fehler ist?

Code Auswählen


<ftui-row>
        <ftui-cell>
                <ftui-icon class="size-1"
                        [name]="Klingel | map('.*:bell-o')"
                        [color]="Klingel | map('on:green, off:white')"
                        popup-target="popup-Klingel"
                ></ftui-icon>
        <ftui-label>Klingel</ftui-label>
        </ftui-cell>
</ftui-row>
<ftui-popup id="popup-Klingel" [trigger]="Klinge:state" [open]="Klinge:state | map('on: true, off: false')">
        <header>Hof</header>
        <ftui-row>
        <label> Video </label>
        </ftui-row>
</ftui-popup>

Gruß
Eisix

LuGu · 01 Dezember 2020, 17:55:24

@Eisix

Mit "Klingel:state" solle es funktionieren.

Manchmal sind es die kleinen Dinge im Leben, die Probleme bereiten.

setstate · 01 Dezember 2020, 17:56:39

[trigger] oder [open] nicht beides

trigger nimmt man, wenn man durch ein Reading-Update ein Popup öffnen will.

open, wenn man auf direkte Zustände reagieren will: on => geöffnet, off => geschlossen

Kann es sein, dass ein l bei Klingel fehlt?

Eisix · 01 Dezember 2020, 19:14:20

Zitat von: setstate am 01 Dezember 2020, 17:56:39
[trigger] oder [open] nicht beides

trigger nimmt man, wenn man durch ein Reading-Update ein Popup öffnen will.

open, wenn man auf direkte Zustände reagieren will: on => geöffnet, off => geschlossen

Kann es sein, dass ein l bei Klingel fehlt?

Hatte mich bei trigger und open auch schon gewundert, kam mir zu viel vor, ist in deinem Beispiel drin.
Und l hat auch gefehlt. Normale Code-Blindheit nach einer Weile.

So funktioniert es

Code Auswählen


<ftui-row>
        <ftui-cell>
                <ftui-icon class="size-1"
                        [name]="Klingel:state | map('.*:bell-o')"
                        [color]="Klingel:state | map('on:mygreen, off:mywhite')"
                        popup-target="popup-Klingel"
                ></ftui-icon>
        <ftui-label>Klingel</ftui-label>
        </ftui-cell>
</ftui-row>
<ftui-popup id="popup-Klingel" [open]="Klingel:state | map('on: true, off: false')">
        <header>Hof</header>
        <ftui-row>
        <video>
.... 
        </video>
        </ftui-row>
</ftui-popup>

Gruß
Eisix

grossmaggul · 01 Dezember 2020, 19:36:21

Ich versuche mich gerade an einer Chart, ich habe einen Heizkörperthermostaten, den ich gerne grafisch darstellen würde.

Das sieht bei mir so aus:

Code Auswählen

<!-- Heizkörper -->
            <ftui-chart title="Heizkörper" >
                <ftui-chart-data fill
                    label="Ist"
                    log="logdb" 
                    file="history" 
                    spec="wz.heizkoerper:measured-temp"
                    type="lines"
                    color="danger"
                    unit="°C"
                    [update]="wz.heizkoerper:state:time">
                </ftui-chart-data>
                <ftui-chart-data
                    label="Soll"
                    log="logdb" 
                    file="history" 
                    spec="wz.heizkoerper_Clima:desired-temp"
                    type="lines"
                    color="primary"
                    unit="°C"
                    [update]="wz.heizkoerper:state:time">
                </ftui-chart-data>
                <ftui-chart-data
                    label="Ventil"
                    log="logdb" 
                    file="history" 
                    spec="wz.heizkoerper_Clima:ValvePosition"
                    type="lines"
                    color="warning"
                    unit="%"
                    [update]="wz.heizkoerper_Clima:state:time">
                </ftui-chart-data>
                <ftui-chart-controls units="day, week"></ftui-chart-controls>
            </ftui-chart>

Mein Problem, wie bekomme ich die unterschiedlichen Einheiten bzw. Werte unter einen Hut, die Temperatur liegt ja immer so um 20 Grad, während das Ventil von 0-100% annehmen kann?

eppi · 01 Dezember 2020, 20:22:14

Hallo zusammen
Ich versuche gerade mein Sonos in FTUI 3 zu integrieren. Für Die Favoriten benutze ich ein Dropdown-Menu. Bei FTUI 2 sieht das wie folgt aus:

Code Auswählen

<li class="transparent50" data-row="4" data-col="3" data-sizex="3" data-sizey="1">
	<div class="cell">
		<div data-type="label" class="cell">Favoriten</div>
		<div data-type="select" data-device="Sonos_Essen" data-list="FavouritesList" data-alias="FavouritesListAlias" data-delimiter="|" data-quote="/" data-get="currentFavouriteNameMasked"  data-set="StartFavourite" class="narrow small"></div>
	</div>
</li>

Gibt es bei FTUI 3 auch die Möglichkeit für Delimiter und Quotes? Das habe ich in der Beispiel Seite nicht gefunden...
Danke und viele Grüsse Eppi

LuGu · 01 Dezember 2020, 22:55:29

Ist es schon möglich, mit ftui-content in einem freigehaltenen Bereich im Grid html Inhalte einzubinden, die sich an das Grid der index.html halten. Ich bekomme das nicht hin.
Egal was ich versuche, der per ftui-content eingeblendete Inhalt landet nicht da, wo er hin soll, sondern klebt oben am Rand.

Button zum Anzeigen des Inhaltes:

Code Auswählen


	<!--   Menü Links Content -->
    <ftui-grid-tile row="1" col="1" height="20" width="3" shape="round">
      <ftui-column>
		<ftui-tab view="cont1" fill="solid" shape="circle" class="size-5" active>
		<ftui-icon size="large" name="home1"></ftui-icon>
		</ftui-tab>
      </ftui-column>
    </ftui-grid-tile>

Hier soll der Inhalt hin:

Code Auswählen


	<!-- Inhalt Content 	-->
	<ftui-grid-tile row="4" col="4" height="17" width="26" shape="round">
		<ftui-tab-view id="cont1">
		  <ftui-content file="cont1_main.html" room="Main"></ftui-content>
		</ftui-tab-view>
	</ftui-grid-tile>

setstate · 01 Dezember 2020, 23:22:49

Alle Tiles eines Grids müssen immer zugleich vorhanden sein und dürfen nicht per Content-Nachladenen verteilt sein. Wenn FTUI-GRID instanziert wird, müssen alle Tiles da sein. Später Nachkommende werden ignoriert, also nicht ausgerichtet.

LuGu · 02 Dezember 2020, 07:45:56

Zitat von: setstate am 01 Dezember 2020, 23:22:49
Alle Tiles eines Grids müssen immer zugleich vorhanden sein und dürfen nicht per Content-Nachladenen verteilt sein. Wenn FTUI-GRID instanziert wird, müssen alle Tiles da sein. Später Nachkommende werden ignoriert, also nicht ausgerichtet.

Heißt das, dass ich alles in die index.html packen muss?
Ist es möglich, in der content1.html ein neues FTUI-GRID anzulegen, also FTUI-GRID's zu veschachteln, oder darf es nur ein FTUI-GRID geben?

Ich hatte im FTUI2 auf der index.html nur einen Menü-Bereich, einen Kopfbereich und einen leeren Inhaltbereich, in den dann mit pagetab's die verschiedenen inhalt_xy.html nachgeladen wurden.
Ist das jetzt in FTUI3 nicht möglich oder nur noch nicht möglich?

setstate · 02 Dezember 2020, 08:02:11

Grid im Grid geht. Im nachgeladen Teil kann wieder ein neues Grid liegen. Aber immer grid und tiles zusammen.

setstate · 02 Dezember 2020, 14:21:37

Zitat von: SirMarco am 26 November 2020, 13:00:12
Hallo zusammen

Hat jemand Lust mit mir zusammen ein Slideout Navigation Menu in V3 einzubauen?
Finde das Mega, aber bin aber mit dem einbinden noch nicht so weit vom wissen
https://slideout.js.org/

Grüsse

ich versuche das gerade ohne zusätzlich Lib nachzubauen.

octek0815 · 02 Dezember 2020, 14:59:12

Moin,

Wie kann ich in meiner eigene user.css Eigenschaften der popup.component.css überschreiben?
Ich möchte das close X von der Position anpassen, da ich den Header breiter mache.
Des Weiteren möchte ich das die Popups runde ecken bekommen (border-radius).

Kann es sein das die Popups sich nicht zentrieren, zumindest haut das bei mir nicht hin?

VG