FTUI version 3

[reisner]

Es funktionieren auch die video.cgi und picture.cgi und meine China Cam's - Super.

[mr_petz]

@reisner

Mir lässt so etwas immer keine Ruhe und ich denke ich weis warum bei dir ftui-image nicht will.
Prinzipiell wird auch nur ein img tag erstellt.
Aber wenn nocache oder refresh gesetzt wird, hängt das Modul noch einen Timestamp mit an die URL.
Damit wird vielleicht deine Kamera ein Problem haben.
img sieht dann so aus:

Code Auswählen Erweitern


<img src="http://192.168.x.x:8080/picture.jpg?_=1667054010674">

Kannst ja auch mal so hinten dran hängen im Browser ob deine Kamera dann will!?...
Teste mal so und ich denke es wird gehen:

Code Auswählen Erweitern


<ftui-image base="http://192.168.x.x:8080/" src="picture.jpg" interval="2"></ftui-image>
oder
<ftui-image src="http://192.168.x.x:8080/picture.jpg" interval="2"></ftui-image>
und ohne interval:
<ftui-image src="http://192.168.x.x:8080/picture.jpg"></ftui-image>

Nachteil. Es wird wahrscheinlich immer das gleiche Bild zu sehen sein!?
Oder du lässt deine url im Reading wechseln:
video.cgi -> picture.cgi -> picture.jpg

LG

Edit: Das würde zumindest code 404 (Not Found) Erklären...

@all, @setstate
Hinweis:
Akuvox u.ä. Kameras haben ein Problem mit dem angehängten Timestamp in der url. Im ftui-image darf kein nocache und refresh gesetzt werden, sonst wird kein Bild dargestellt.

[reisner]

@mr_petz

Hab's nun getestet und ja, nocache ist hier das Problem. Der Zähler, dar an die URL ergänzt wir von den Cam's nicht akzeptiert. Interval funktioniert.
Danke für deine Hilfe.

Nun kommt aber auch gleich mein nächstes Prob
In meiner Weather Anzeige werden die Icons in der Breite abgeschnitten dargestellt, daran ändert sich auch nicht bei größeren Sizes.
Folgender Code:

Code Auswählen Erweitern

<ftui-grid-tile row="1" col="14" height="7" width="3" shape="round">
        <header>WEATHER</header>
        <ftui-row>
          <label>Heute</label>
</ftui-row>
<ftui-row>
          <ftui-weather size="4"
  [condition]="Wetter_Proplanta:fc0_weatherDay"
  icon-set="kleinklimaFHEM" provider="proplanta">
  </ftui-weather>
</ftui-row>
<ftui-row>
          <ftui-label [text]="Wetter_Proplanta:fc0_weatherDay"></ftui-label>
          <ftui-label [text]="Wetter_Proplanta:fc0_tempMax" unit="°C"></ftui-label>
        </ftui-row>
        <ftui-row>
          <label>Morgen</label>
</ftui-row>
<ftui-row>
          <ftui-weather size="4"
  [condition]="Wetter_Proplanta:fc1_weatherDay"
  icon-set="kleinklimaFHEM" provider="proplanta">
  </ftui-weather>
</ftui-row>
<ftui-row>
          <ftui-label [text]="Wetter_Proplanta:fc1_weatherDay"></ftui-label>
          <ftui-label [text]="Wetter_Proplanta:fc1_tempMax" unit="°C"></ftui-label>
        </ftui-row>
        <ftui-row>
          <ftui-label [text]="Wetter_Proplanta:fc2_date | toDate() | format('eeee')"></ftui-label>
</ftui-row>
<ftui-row>
          <ftui-weather size="4"
  [condition]="Wetter_Proplanta:fc2_weatherDay"
  icon-set="kleinklimaFHEM" provider="proplanta">
  </ftui-weather>
</ftui-row>
<ftui-row>
          <ftui-label [text]="Wetter_Proplanta:fc2_weatherDay"></ftui-label>
          <ftui-label [text]="Wetter_Proplanta:fc2_tempMax" unit="°C"></ftui-label>
        </ftui-row>
        <ftui-row>
          <ftui-label [text]="Wetter_Proplanta:fc3_date | toDate() | format('eeee')"></ftui-label>
</ftui-row>
<ftui-row>
          <ftui-weather size="4"
  [condition]="Wetter_Proplanta:fc3_weatherDay"
  icon-set="kleinklimaFHEM" provider="proplanta">
  </ftui-weather>
</ftui-row>
<ftui-row>
          <ftui-label [text]="Wetter_Proplanta:fc3_weatherDay"></ftui-label>
          <ftui-label [text]="Wetter_Proplanta:fc3_tempMax" unit="°C"></ftui-label>
        </ftui-row>

Gibt es eine versteckte property, die dieses beeinflusst?

LG

[mr_petz]

@mr_petz

Hab's nun getestet und ja, nocache ist hier das Problem. Der Zähler, dar an die URL ergänzt wir von den Cam's nicht akzeptiert. Interval funktioniert.
Danke für deine Hilfe.
....

Dachte ich mir

Zu deinen kleinklimaIcons gab es hier schon Themen dazu und meist probleme:
https://forum.fhem.de/index.php/topic,115259.msg1208182.html#msg1208182
Hast du auch schon size weggelassen?
Hast du die icons die alle haben? von hier:
https://forum.fhem.de/index.php/topic,96954.msg901188.html#msg901188

LG

Edit: könnte mir noch vorstellen, dass es am row liegt
mal row ein width mitgeben...
row nimmt volle Breite

[reisner]

@mr_petz

Zu deinen kleinklimaIcons gab es hier schon Themen dazu und meist probleme:
https://forum.fhem.de/index.php/topic,115259.msg1208182.html#msg1208182
Hast du auch schon size weggelassen?
Hast du die icons die alle haben? von hier:
https://forum.fhem.de/index.php/topic,96954.msg901188.html#msg901188

Ja, meine Icon stammen aus diesem Beitrag.
Ohne Size wird ebenfalls geschnitten, siehe erstes Icon im Bild.
Im Forum wurde, wie Du sagst, genau das Problem schon genannt, dort war es am Ende aber ein Browser Problem. Ich habe Opera und Edge auf Windows probiert und ansonsten nutze ich Fully, alle schneiden ab. Muss bei mir also noch was anderes faul sein.

[mr_petz]

--icon-height scheint bei dir nicht gesetzt zu werden.
style="--icon-height: 1;" mal mit angeben.
zumindest kann ich es nur so nachstellen...

[bismosa]

Hallo!

Ich hatte gerade das gleiche Problem. Da ich fleißig mitlese...Danke dadurch konnte ich die Darstellung korrigieren!
Also einfach mit

Code Auswählen Erweitern

<ftui-weather style="--icon-height: 1;" size="4" icon-set="kleinklimaFHEM" [condition]="myProPlanta:fc2_weatherDay"></ftui-weather>

Gruß
Bismosa

[reisner]

Danke, style="--icon-height: 1;" behebt das Problem bei mir. setstate hatte zu diesen Thema ja geschrieben, dass er ein update getan hat und da ich erst kürzlich V3 installiert habe, sollte ich den fix ja haben. Muss ich mit der user.css arbeiten?

LG

[mr_petz]

Habt ihr irgendeine globale .icon Variable in einer user.css?
die icon.component.css ist hier includiert...

LG

[reisner]

Ich habe bisher keine user.css am Start.

LG

[mr_petz]

Ups...
Das kommt von mir selbst:

Code Auswählen Erweitern


ftui-weather {
  --icon-height: 1;
}

https://forum.fhem.de/index.php/topic,115259.msg1185845.html#msg1185845
es würde auch:

Code Auswählen Erweitern


--icon-height: -;
oder
--icon-height: nichts;
oder
--icon-width: -;
oder
--icon-width: irgendwas;

gehen. Das ganze "Theater" soll einfach eines der beiden "deaktivieren".

Da hat setstate wohl kein professionelles Update gemacht... oder es zunichte....
Kommt vielleicht von den flex Änderungen...
oder hast nur mit der Sonne getestet....

LG

Edit: Das kommt von hier:
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/icon/icon.component.css#L26
@setstate man könnte hier bei diesen Iconset auch

Code Auswählen Erweitern

object-fit: scale-down;

oder

Code Auswählen Erweitern


object-fit: contain;
statt object-fit: cover; nehmen und es wird komplett dargestellt...

[bismosa]

Hallo!

Ich wollte gerade mehrere ftui-label direkt nebeneinander darstellen...
Dabei ist mir aufgefallen, das immer ein Rand nach einem Label vorhanden ist. Kann es sein, das eine nicht vorhandene "unit" immer noch ein "margin-left" hat? Siehe Bild.
(Ich übe noch mit dem debugger in Chrome)

Ist das ein gewolltes verhalten? Bestimmt kann ich das auch "global" für mich in einer user-css deaktivieren?

Gruß
Bismosa

[mr_petz]

Das wurde im letzten Update hinzugefügt.
Kannste es nur hier im label.component.js bearbeiten bzw. entfernen bis setstate das benutzerdefiniert macht:
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/label/label.component.js#L36

Als Übergangslösung könntest du es auch so machen:

Code Auswählen Erweitern


<ftui-label class="size-7 thin" text="11.8"><span class="size-1" slot="unit" style="position:relative;left:-0.75em;">°C</span></ftui-label>

1. mit style
2. ohne style
im Bildanhang

LG

Edit: sorry
global kannst du es erstmal so lösen:

Code Auswählen Erweitern


[slot="unit"] {
position: relative;
left: -0.75em;
}


und wenn dein label dir zu weit links erscheint, dann gibst du ihn auch pos und left mit.

[bismosa]

Hallo!

Danke. Die Übergangslösung funktioniert. Allerdings ist mir eine globale Lösung hier lieber. Ich habe sehr viele Label mit Einheiten (oder eben mehrere Label direkt nacheinander).
Die Lücken stören mich da schon sehr.

Die Globale Variante bekomme ich im <style>-Tag jedoch nicht hin. Ich hatte es auch so gesehen. Aber auch das führt nicht zum Erfolg.

Code Auswählen Erweitern


::slotted([slot="unit"]){
  position: relative;
  left: -0.75em;
}


Hast Du noch einen Tip?

Gruß
Bismosa

[wg25]

Moin zusammen,

erstmal vielen Dank für diese neue Version des FTUI.

Ich konnte bisher alles meiner FTUI2 Version zu FTUI3 umbauen. Nur mit dem folgenden habe ich ein Problem. Und zwar habe ich bisher mit einem Button die folgende Befehlskette aufgerufen:

Code Auswählen Erweitern

<div data-type="push" data-fhem-cmd='{my $number=ReadingsVal("CallList","1-number","");;fhem("telelock $number")}; set CallList removeItem 1'></div>

Telelock ist dabei ein cmdalias, der eine Befehlskette an die Fritzbox übergibt zum Eintragen einer zu sperrenden Telefonnummer. Der benötigt die Telefonnummer, welche aus der CallList entnommen wird.

Es klappte bisher alles ohne Probleme, nur bekomme ich es nicht in die neue Struktur untergebracht.

Danke für Hinweise und Unterstützung.

Gruß Arne