[FTUI3] Scrolllabel

[stefan-dd]

Gibt es so etwas auch in FTUI3 ?

Code Auswählen Erweitern

        <div data-type="scrolllabel"
             data-device="Wetter_DD_Proplanta"
             data-get="weather"
             data-orientation="horizontal" style="width:170px; position: absolute"
             class="cell height-narrow left"></div>

In FTUI3 habe ich es so gelöst:

Code Auswählen Erweitern

          <div style="width:80px" class="marquee"><span><ftui-label size="0" class="size-2" [text]="Wetter_DD_Proplanta:fc0_weatherDay"></span></div>

Code Auswählen Erweitern

.marquee {
  white-space: nowrap;
  overflow: hidden;
}

.marquee span {
  display: inline-block;
  padding-left: 105%;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

Dies ist aber eine richtige Krücke. Der Lauftext läuft immer, auch wenn der Inhalt kurz ist und das Feld wird im Textdurchlauf nach links verschoben.
Besser als nichts, aber nicht schön.
Hat jemand noch eine bessere Variante?

[mr_petz]

Das geht denke ich nur mit js:
https://jsfiddle.net/ppajer/zeuzzguk/
LG

[stefan-dd]

Danke, leider bekomme ich den Code noch nicht zum laufen.
Der Text wird angezeigt, dass css reagiert auch. So habe ich den Code in den Header eingefügt. Habe es auch mit einer extra js Datei probiert. Es will nicht.

Code Auswählen Erweitern


<script language="javascript" type="text/javascript">
function isElementOverflowing(element) {
  var overflowX = element.offsetWidth < element.scrollWidth,
    overflowY = element.offsetHeight < element.scrollHeight;

  return (overflowX || overflowY);
}

function wrapContentsInMarquee(element) {
  var marquee = document.createElement('marquee'),
    contents = element.innerText;

  marquee.innerText = contents;
  element.innerHTML = '';
  element.appendChild(marquee);
}

var element = document.getElementById('overflow');

if (isElementOverflowing(element)) {
  wrapContentsInMarquee(element);
}
</script>


[mr_petz]

Ok. stefan aus dd
Hier ein möglicher Weg (ist mein Test):
Edit: code entfernt
jetzt hier:
https://forum.fhem.de/index.php/topic,128929.msg1233022.html#msg1233022

LG mr_petz

[stefan-dd]

Super, danke!
Zwei kleine Sachen habe ich noch, um es perfekt zu machen.
Wie kann man die Durchlaufgeschwindigkeit anpassen?
Wenn der Inhalt in das Feld passt, kann man die Funktion auch aussetzen lassen?
Danke schon mal.

[mr_petz]

Code Auswählen Erweitern


'<marquee scrollamount="4">' + t + '</marquee>'


Die Funktion sieht ob es ins div passt...
LG

[stefan-dd]

Die Zeiteinstellung passt nun.

Aber das größte Problem ist noch, das bei mehrerer Verwendung der Funktion, alles in das erste Feld geschrieben wird. Die Berechnung ob es ins div passt klappt noch nicht.

[mr_petz]

ja ist klar. ist ja auch nur für ein ftui-label...
Da müsstest du entweder eine Schleife oder mehrere id#s erstellen.

[mr_petz]

Ok. kleines Update. War doch was nicht ganz korrekt:

Code Auswählen Erweitern


<ftui-button (value)="text1" states="Yadda yadda overflowing text this line is too long oh noes!,zu kurz,0123456789101112131415161718"></ftui-button>
<div id="box" style="height:18px;width:200px;white-space:nowrap;overflow:hidden;">
  <ftui-label id="overflow" [text]="text1 | t=>marquee(t)"></ftui-label>
</div>
<script language="javascript" type="text/javascript">
function marquee(t){
const box = document.querySelector("#box");
const box_width = box.offsetWidth;
const elem = document.querySelector("#overflow");
elem.mainSlotElement.innerHTML = t;
const label_width = elem.offsetWidth;
  if (label_width > box_width) {
   elem.mainSlotElement.innerHTML = '<marquee scrollamount="4">' + t + '</marquee>';
  } else {
   elem.mainSlotElement.innerHTML = t;
  }
}
</script>


Wie gesagt, das ist nur für ein ftui-label!

LG mr_petz

[stefan-dd]

Danke,
ich habe nun mehrere id#s erstellt und es funktioniert so wie es soll.
Der ideale und einfachere Weg wäre natürlich über eine Schleife.

[mr_petz]

Ich weis ja nicht wieviel du brauchst.
Hier noch ein einfaches Beispiel für 2 Label:

Code Auswählen Erweitern


<ftui-button (value)="text1" states="Yadda yadda overflowing text this line is too long oh noes!,zu kurz,0123456789101112131415161718"></ftui-button>
<ftui-button (value)="text2" states="0123456789101112131415161718,Yadda yadda overflowing text this line is too long oh noes!,zu kurz"></ftui-button>
<div id="box" style="height:18px;width:200px;white-space:nowrap;overflow:hidden;">
  <ftui-label id="overflow" [text]="text1 | t=>marquee(t,l='0')"></ftui-label>
</div>
<div id="box" style="height:18px;width:200px;white-space:nowrap;overflow:hidden;">
  <ftui-label id="overflow" [text]="text2 | t=>marquee(t,l='1')"></ftui-label>
</div>
<script language="javascript" type="text/javascript">
let l = 0;
function marquee(t){
const box = document.querySelector("#box");
const box_width = box.offsetWidth;
const elem = document.querySelectorAll("#overflow");
if (l==='0'){
  elem[0].mainSlotElement.innerHTML = t;
}
if (l==='1'){
  elem[1].mainSlotElement.innerHTML = t;
}
const label_width = elem[0].offsetWidth;
const label_width2 = elem[1].offsetWidth;
  if (label_width > box_width && l==='0') {
   elem[0].mainSlotElement.innerHTML = '<marquee scrollamount="4">' + t + '</marquee>';
  } else if (l==='0'){
  elem[0].mainSlotElement.innerHTML = t;
  }
  if (label_width2 > box_width && l==='1') {
   elem[1].mainSlotElement.innerHTML = '<marquee scrollamount="4">' + t + '</marquee>';
  } else if (l==='1'){
  elem[1].mainSlotElement.innerHTML = t;
  }
}
</script>


Leichter ist es natürlich wenn setstate ein marquee ins Label einbaut...
LG