FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: Medel am 09 Dezember 2022, 08:49:01

Titel: gelöst [FTUI3] Scrollabel geht das in V3
Beitrag von: Medel am 09 Dezember 2022, 08:49:01
In der Version2 gab es das "scrolllabel".  Gibt es die Möglichkeit einen Lauftext zu erzeugen auch bei der Version 3? Man kann zwar "scroll" einfügen aber dann werden ggf. nur die Balken angezeigt.
Titel: Antw:[FTUI3] Scrollabel geht das in V3
Beitrag von: grossmaggul am 09 Dezember 2022, 09:05:31
Soweit ich weiß gibt es das noch nicht bei FTUI3.
Titel: Antw:[FTUI3] Scrollabel geht das in V3
Beitrag von: mr_petz am 09 Dezember 2022, 10:20:40
Dafür gibt es die class marquee Bsp.:

<ftui-label text="marquee width 100" unit="%" class="marquee"></ftui-label>

https://github.com/knowthelist/ftui/blob/master/www/ftui/ftui.css#L417
Das ist eine Laufschrift von rechts nach links.
Wenn du eine von oben nach unten möchtest, dann musst du dir eine Eigene class erstellen mit translateY().
scroll bewirkt einen Zeilenumbruch und gibt scrollbalken aus...

LG
Titel: Antw:gelöst [FTUI3] Scrollabel geht das in V3
Beitrag von: grossmaggul am 09 Dezember 2022, 11:37:30
Warum sacht mir denn keiner, daß das geht? :o ;D
Titel: Antw:gelöst [FTUI3] Scrollabel geht das in V3
Beitrag von: mr_petz am 09 Dezember 2022, 11:51:03
Gesagt... 8) ;D

LG
Titel: Antw:gelöst [FTUI3] Scrollabel geht das in V3
Beitrag von: grossmaggul am 09 Dezember 2022, 15:15:52
 ;)

Aber wenn man sowas hat, dann funktioniert das mit marquee nicht, oder mache ich was faslch?

<ftui-label [text]="vbirthdays:t_001_bdate"
                 [class-name]="vbirthdays:t_001_daysleft | map('0:blink,1:')" class="marquee">
</ftui-label>
Titel: Antw:gelöst [FTUI3] Scrollabel geht das in V3
Beitrag von: mr_petz am 09 Dezember 2022, 15:27:55
blink und marquee zusammen in einem ftui-label funktionieren so nicht, weil sie beides animationen sind.
Da musst du einen umweg gehen mit einer cell oder row Bsp.:

<ftui-row class="marquee">
  <ftui-label [text]="vbirthdays:t_001_bdate"
                 [class-name]="vbirthdays:t_001_daysleft | map('0:blink,1:')">
  </ftui-label>
</ftui-row>

so ist bissl besser wenn du noch ein width mitgibst:

<ftui-cell width="50%">
  <ftui-cell class="marquee">
    <ftui-label [text]="vbirthdays:t_001_bdate" width="100%"
                [class-name]="vbirthdays:t_001_daysleft | map('0:blink,1:')">
    </ftui-label>
  </ftui-cell>
</ftui-cell>


LG mr_petz
Titel: Antw:gelöst [FTUI3] Scrollabel geht das in V3
Beitrag von: grossmaggul am 09 Dezember 2022, 15:49:59
Danke, macht Sinn, allerdings läuft das bei mir nicht so, wie bei Deinem angehängten Gif.

Der Text kommt rechts herausgefahren läuft über die gesamte Fläche, "stößt" dann aber an der linken Seite an und kommt rechts wieder zum Vorschein.
Also kein kontinuierliches Durchlaufen, sondern eher ein Springen.
Titel: Antw:gelöst [FTUI3] Scrollabel geht das in V3
Beitrag von: mr_petz am 09 Dezember 2022, 16:00:14
Ja das Verhalten ist so. Das liegt am:

text-indent: 0%;

von hier:
https://github.com/knowthelist/ftui/blob/master/www/ftui/ftui.css#L470

Da müsste man:

  0% {
    text-indent: 100%
  }
  100% {
    text-indent: -100%
  }

angeben...

Mein gif ist nur ein Ausschnitt...
Du kannst dir ja ein eigenes marquee erstellen...

LG
Titel: Antw:gelöst [FTUI3] Scrollabel geht das in V3
Beitrag von: grossmaggul am 09 Dezember 2022, 16:57:40
ZitatDu kannst dir ja ein eigenes marquee erstellen...
Danke für die Aufklärung, habe es eingebaut, läuft.
Falls es jemand gebrauchen kann, folgendes habe ich in meiner user.css ergänzt:

/* Marquee - Lauftext */
.marquee2 {
  width: 100%;
  margin: auto;
  padding: 2px;
  overflow: hidden;
  white-space: nowrap;
  animation: marquee2 10s linear infinite;
}

@keyframes marquee2 {
  0% {
    text-indent: 100%
  }
  100% {
    text-indent: -100%
  }
}


Titel: Antw:gelöst [FTUI3] Scrollabel geht das in V3
Beitrag von: mr_petz am 09 Dezember 2022, 18:39:07
Sehr gut :D
Ich sag dir wieder was  ;D
Es würde auch nur dieser Eintrag in der user.css ausreichen:

@keyframes marquee {
  0% {
    text-indent: 100%
  }
  100% {
    text-indent: -100%
  }
}

und lässt das class="marquee" wie es ist. Der Rest kommt ja schon von der ftui.css.
user.css muss aber nach der ftui.css kommen...

Hier noch ein Beispiel für vertical:

<ftui-cell width="30%" height="10%" style="overflow:hidden;">
  <ftui-cell class="marqueeV">
    <ftui-label text="Das ist ein Text, der in vertical automatisch scrollt..." text-align="center" scroll>
    </ftui-label>
  </ftui-cell>
</ftui-cell>


.marqueeV {
    position: relative;
    animation: marqueeV 4s linear infinite;
}

@keyframes marqueeV {
    0%   { top: 100% }
    100% { top: -100% }
}


LG
Titel: Antw:gelöst [FTUI3] Scrollabel geht das in V3
Beitrag von: grossmaggul am 09 Dezember 2022, 20:57:54
ZitatEs würde auch nur dieser Eintrag in der user.css ausreichen:
O.K., danke, werde ich ändern.
Titel: Antw:gelöst [FTUI3] Scrollabel geht das in V3
Beitrag von: Badflex am 24 Januar 2023, 19:27:27
Hallo!
Danke dafür. Wusste nicht das das geht.
Ich wollte das in meine Übersicht der offenen Fenster einbauen.
Leider erkennt er nicht das der Text manchmal länger und manchmal kürzer ist.
Kann man das irgendwie anpassen das er nur scrollt wenn der Text zu lang für das Feld ist?

Wenn er zu lang ist bzw. mehrere Wörter, weil die ja automatisch eingefügt werden, hört er mitten drinn auf.
Kann man das auch fixen?