FTUI version 3

yersinia · 24 März 2021, 13:28:07

Zitat von: Eisix am 24 März 2021, 13:21:12video.js schon probiert?

Wo gibbets die bei ftui3?

Eisix · 24 März 2021, 13:30:57

garnicht

muss man extra dazu packen.

Gruß
Eisix

yersinia · 24 März 2021, 13:36:58

Zitat von: Eisix am 24 März 2021, 13:30:57garnicht

muss man extra dazu packen.

Und bekommt man woher?

EDIT
https://videojs.com?

Eisix · 24 März 2021, 13:52:31

https://videojs.com/getting-started

Mit .mp4 Beispiel.

Gruß
Eisix

Sailor · 24 März 2021, 14:58:49

Zitat von: yersinia am 24 März 2021, 12:44:25
https://www.w3schools.com/tags/att_video_autoplay.asp
Code Auswählen Erweitern
<video width="110" controls autoplay>  <source ftui-binding="src" [src]="{{DbImageUrl}}"> Your browser does not support the video tag. </video>

Naja, da scheint immer noch nicht was mit der Uebergabe durch ftui-binding zu funktionieren...
Wenn ich naemlich

Code Auswählen

<source src="../doorbird/20210324-102602_motionsensor.mp4"> direkt eingebe, funktioniert das Abspielen nämlich...

Gruß
Sailor

Eisix · 24 März 2021, 15:01:19

Hallo,

nutze verschieden Tablets zum anzeigen und wollte wenn möglich den gleichen html code nutzen. Mit viewport komme ich zu keiner vernünftigen Lösung. Also habe ich etwas experimentiert.

index.html

Code Auswählen


<body>
<ftui-grid base-width="1%" base-height="1%" margin="1">
        <ftui-grid-tile row="1" col="1" width="7" style="height: 100%;left: 1px;top: 1px;">
                <ftui-column>
                       <ftui-tab view="Main" active><ftui-icon class="size-2" name="home1"></ftui-icon></ftui-tab>
....

        <ftui-tab-view id="Main" height="100" width="100">
                <ftui-grid-tile row="1" col="8" height="100" width="93" class="">
                        <ftui-content file="1_Main.html"></ftui-content>
                </ftui-grid-tile>
        </ftui-tab-view>

1_Main.html

Code Auswählen


<ftui-grid base-width="1%" base-height="1%" margin="1" class="">
        <ftui-grid-tile row="100" col="1" height="1" width="100" class="">
        </ftui-grid-tile>
        <ftui-grid-tile row="1" col="100" height="100" width="1" class="">
        </ftui-grid-tile>
        <ftui-grid-tile row="1" col="1" height="25" width="24" class="">
                <header>Zuhause</header>
                <ftui-content file="templates/Homestatus.html"></ftui-content>
        </ftui-grid-tile>
        <ftui-grid-tile row="26" col="1" height="13" width="24" class="">
                <header>Abfall</header>
                <ftui-content file="templates/Abfall.html"></ftui-content>
        </ftui-grid-tile>
....

Also ist das Grid 1%.

Die beiden ftui-grid-tile sind nötig sonst passt das Layout nicht.

Code Auswählen


        <ftui-grid-tile row="100" col="1" height="1" width="100" class="">
        </ftui-grid-tile>
        <ftui-grid-tile row="1" col="100" height="100" width="1" class="">
        </ftui-grid-tile>

Generell funktioniert es, aber da gibt es doch bestimmt einen eleganteren Weg, oder?

Gruß
Eisix

yersinia · 24 März 2021, 15:33:19

Bezgl grid kann ich https://css-tricks.com/snippets/css/complete-guide-grid als Einstieg empfehlen - insbesondere der untere Teil bezgl grid auto flow.
Aus SirMarcos Post heraus habe ich auch clamp() gefunden.
Vielleicht hilft dir das, fixe (menu, header, footer; zusammen mit clamp) und flexible grid-items (content) für die verschiedenen displaygrößen anzugeben (siehe auch [1] oder [2]). Dies würde dann aber derzeit stark außerhalb von dem ftui3 standard rauslaufen.

mr_petz · 24 März 2021, 20:26:40

@setstate

Hi, ich weiss nicht ob die Frage schon kam.
Wäre es möglich das du wieder das 'ftui.getGradientColor' wie im thermostat widget mit ins knob Modul rein nimmst?
(siehe Bild)
Also wieder min- und maxcolor?
Das finde ich optisch besser

.
Ich habe es ohne Erfolg versucht.
Danke und Gruß
Thomas

Sailor · 25 März 2021, 11:05:25

Moin zusammen

Wo wir mal gerade beim Thema sind...

Ich habe mir folgenden Knob gebaut:

Code Auswählen


<ftui-knob  [(value)] = "{{RoomPrefix}}_Thermostat_Climate:desired-temp" 
		type    = "scale" 
		min     = "5" 
		max     = "30" 
		unit    = "&deg;C" 
		has-value-text>
</ftui-knob>

und versuchsweise auch diesen

Code Auswählen


<ftui-knob  [value] = "{{RoomPrefix}}_Thermostat_Climate:desired-temp" 
		(value) = "set {{RoomPrefix}}_Thermostat_Climate desired-temp"
		type    = "scale" 
		min     = "5" 
		max     = "30" 
		unit    = "&deg;C" 
		has-value-text>
</ftui-knob>

Bei beiden habe ich das Phänomen, dass ich die Temperatur 2 mal einstellen kann und danach nicht mehr.
Erst nach einem F5 kann ich wieder für 2 mal die Temperatur einstellen.
Das erkenne ich an der Toast - Meldung unten, die nach 2 Einstellungen nicht mehr kommt und an dem Reading "{{RoomPrefix}}_Thermostat_Climate:desired-temp"

Könnt Ihr das Verhalten reproduzieren?

Gruß
Sailor

mr_petz · 25 März 2021, 13:10:49

Zitat von: Sailor am 25 März 2021, 11:05:25
....

Könnt Ihr das Verhalten reproduzieren?

Gruß
Sailor

Ja. War schon hier Thema. Du musst einzeln tippen dann geht es immer. Also nicht "sliden"...
Beim Slider ist es bei mir genauso.
Es gab aber noch kein Statement von setstate.
Hat er vielleicht auch überlesen.

Sailor · 25 März 2021, 17:01:22

Zitat von: mr_petz am 25 März 2021, 13:10:49
Ja. War schon hier Thema. Du musst einzeln tippen dann geht es immer. Also nicht "sliden"...
Beim Slider ist es bei mir genauso.
Es gab aber noch kein Statement von setstate.
Hat er vielleicht auch überlesen.

Das tippen hilft auch nichts. Nach 2 mal tippen ists auch vorbei.
Dies betrifft Slider and Knob gleichermassen.

Also der Bug steht auf meiner Wunschliste "To-be-fixed" ganz oben...

Gruß
Sailor

andies · 25 März 2021, 18:40:08

Bei den buttons https://knowthelist.github.io/ftui/www/ftui/examples/button.html gibt es nur primary, der während des eigentlich Drückens die Farbe wechselt. Die anderen tun das nicht. Kann man das irgendwie bei den anderen dennoch einstellen?

Sailor · 25 März 2021, 19:12:20

Hallo Andies

Zitat von: andies am 25 März 2021, 18:40:08
Bei den buttons https://knowthelist.github.io/ftui/www/ftui/examples/button.html gibt es nur primary, der während des eigentlich Drückens die Farbe wechselt. Die anderen tun das nicht. Kann man das irgendwie bei den anderen dennoch einstellen?

Ich weiß nicht genau was du meinst, aber ich beeinflusse sowohl das Verhalten der Buttons als auch das der darin enthaltenen Icons wie folgt:

Code Auswählen


<ftui-button shape        = "circle"
             [(value)]    = "FhemDevice:Reading" 
             [fill]       = "FhemDevice:Reading         | map('off: outline,            on: solid             ')"
             [class-name] = "FhemDevice:Reading         | map('off: size-3,             on: size-3 blink      ')"
             states       = "off, on">

	<ftui-icon	[name]  = "FhemDevice:Reading   | map('off: lightbulb_dim-000,  on: lightbulb_dim-100 ')"
                        [color] = "FhemDevice:Reading   | map('off: dark,               on: light             ')"
                        class   = "size-2">
	</ftui-icon>

</ftui-button>

Gruß
Sailor

Sailor · 25 März 2021, 19:34:06

Hallo setstate,

Zitat von: setstate am 26 November 2020, 14:38:45
ja

Code Auswählen Erweitern
<ftui-icon name="exclamation-triangle" [hidden]="ftuitest | map('on:false, off:true')"> </ftui-icon>

Das ist schon mal die halbe Miete von dem was ich Suche.

Wie muss ich die Zeile um [hidden] abändern, damit der Wert true ist, wenn das Device bzw. das Reading nicht existiert?
Quasi das Button / Icon verschwinden lassen wenn "ftuitest" nicht existiert.

Gruß
Sailor

andies · 25 März 2021, 19:36:58

Zitat von: Sailor am 25 März 2021, 19:12:20
Ich weiß nicht genau was du meinst, aber ich beeinflusse sowohl das Verhalten der Buttons als auch das der darin enthaltenen Icons wie folgt:

Das passt schon mal fast. Es gibt beim Drücken ja drei Zustände:

Ich gehe mit der Maus über den Button (keine Veränderung der Icons)
Ich drücke die Maustaste nieder (keine Veränderung der Icons)
Ich lasse die Maustaste los (Veränderung der Icons)

Ich hätte gern im zweiten Schritt bereits eine Farbänderung. Wenn man ausschaltet, kommt die auch: Da blitzt der Buttons grün auf. Aber nicht beim einschalten.