Neues Widget "Scrolllabel" für Laufschriften

Begonnen von eki, 23 Juni 2017, 09:47:50

Vorheriges Thema - Nächstes Thema

eki

Hallo zusammen,

ich habe mir ein Widget für das Darstellen von Texten in Form von Laufschriften (z.B. wenn der Text größer ist als der Platz den man spendieren will) gebaut, vielleicht kanns ja der ein oder andere gebrauchen.
Zusätzlich zum js File gibt es ein css File welches dann in den entsprechenden Ordner gelegt werden muss.
Das Widget basiert auf dem Label Widget, sollte also alles können (einfärben etc.) was das Label Widget kann.

Hier eine Beschreibung der Parameter, die es zusätzlich zum Label Widget gibt, damit erklärt sich, denke ich, auch die Funktionalität:

data-type: muss "scrolllabel" sein (bitte auf die 3 'l's achten  ;)
data-orientation: Kann die Werte "horizontal" und "vertical" haben und legt fest, in welcher Richtung der Text durchgeschoben wird.
data-scrollspeed: Kann die Werte "slow", "normal" und "fast" annehmen und bestimmt wie schnell der Text durchläuft
data-lines: Legt für das vertikale Scrollen fest, wieviele Zeilen gleichzeitig zu sehen sind
data-scroll-lines: Legt fest, um wieviele Zeilen gescrollt wird, bevor die nächste Pause kommt (siehe Klassen "ease" und "linear")

Wenn man dem div die Klasse "linear" gibt, dann läuft der Text dauernd durch, setzt man "ease", was auch der Default ist, dann wird gescrollt und danach eine Pause gemacht (ist manchmal einfacher fürs Lesen).

Edit 25.06.2017: neue Version mit Support für größere Schriften.

Edit 12.12.2017: neue Version mit Korrektur für bold Schriften und Möglichkeit die Scrollrichtung zu invertieren.

rvideobaer

Hallo,

ich habe das Scrolllabel gleich mal getestet, leider funktioniert es nicht mit größeren Schriften die Box für das Label scheint immer gleich groß zu bleiben. Wenn ich eine große Schrift zb. bigger wähle sieht es dann wie auf dem angehängten Bild aus. (Ich verwende bei mir noch eine eigene größere Schrift)

Gruß Rolf
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr

eki

poste mal bitte Deine Konfiguration mit dem Scrolllabel

rvideobaer

Hallo,

ist nur ein versuch in einer sonst leeren html Datei,
<!DOCTYPE html>
<html>
<head>



        <!--
         /* FHEM tablet ui */
         /*
         * Just another dashboard for FHEM
         *
         * Version: 1.4.0
         * Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
         * URL: https://github.com/knowthelist/fhem-tablet-ui
         *
         * Copyright (c) 2015 Mario Stephan <mstephan@shared-files.de>
         * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
         *
         * - create a new folder named 'tablet' in /<fhem-path>/www
         * - copy all files incl. sub folders into /<fhem-path>/www/tablet
         * - add 'define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
         * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
         */
        -->
        <title>FHEM-Tablet-UI</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
       <meta name="gridster_cols" content="38">
<meta name="gridster_rows" content="23">

      <!--
  <meta name="widget_base_width" content="15">
        <meta name="widget_base_height" content="15">
-->


        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
        <meta name="debug" content="0"> <!-- 1=output to console;0=no output -->
<meta http-equiv="Cache-Control" content="no-store" />
       
        <link rel="stylesheet" href="lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="lib/font-awesome.min.css" />
    <link rel="stylesheet" href="lib/jquery.toast.min.css" />
        <link rel="stylesheet" href="lib/openautomation.css" />
    <link rel="stylesheet" href="lib/fhemSVG.css" />

        <!-- define your personal style here, it wont be overwritten  -->
        <link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />

<script src="../pgm2/jquery.min.js"></script>
    <script src="lib/jquery.toast.min.js"></script>
    <script src="lib/jquery.gridster.min.js"></script>
    <script src="js/fhem-tablet-ui.js" defer></script>



<style>

.joinedlabel_get_4 {
    color: #5050FF;
}

.joinedlabel_get_5 {
    color: red;
}

/*
.gridster > ul > li,
.card {
   background-color: transparent;
}
.gridster li header,
.dialog > header,
.card > header {
    background: transparent;
}
*/






</style>

</head>

<body>


<div
 
data-type="scrolllabel"
    data-device="rx601"
data-get="currentTitle"
data-orientation="horizontal"
data-scrollspeed="fast"
class="lime bigger"></div>
</body>
</html>


Gruß Rolf
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr

eki

Kannst Du bitte mal schauen ob es mit der anghängten Version funktioniert.

rvideobaer

Hallo,

habe es gerade getestet, mit der Schriftgröße scheint es jetzt zu funktionieren.
Aber das Scrollen ist noch nicht so das was ich mir Vorstelle. Der Text bewegt sich ruckartig weiter und je nach Textlänge kommt er er damit gut bis überhaupt nicht klar.
Bei kurzen Texten liegen die Teile zeitweilig übereinander oder der Text läuft rückwärts da er soweit vorspringt das er fast an der selben Position landet nur etwas nach hinten verschoben. Ein sanfteres scrollen wäre schöner finde ich. Aber das ist meine Persönliche Meinung. Ich versuche mal ein video anzuhängen.

Gruß Rolf
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr

rvideobaer

Hallo,
anbei noch ein Video mit meiner bisherigen Lösung

<span style="white-space:nowrap; overflow:hidden;width:90%;z-index:0;">
<marquee direction="left" behavior="scroll" scrollamount="6" scrolldelay="1">
<div data-type="label"
    data-device="rx601"
data-get="currentTitle"
class="lime grande3"></div>
</marquee>
</span>

Gruß Rolf
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr

eki

#7
Bist Du sicher, dass Du die zugehörige css Datei heruntergeladen und ins css Verzeichnis geschoben hast? Bei mir sieht das nämlich genauso aus, wie in Deinem Film von 2. Post. Und für die Übergänge sind die Definitionen im css File zuständig.

rvideobaer

Hallo,

ich habe die css Datei nochmal heruntergeladen, da ich schon etwas mit den werten gespielt hatte. Aber es ist immer noch eine Sprunghafte Bewegung.
Daran scheint es bei mir nicht zuliegen.

Gruß Rolf
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr

gloob

Also für mich sieht die Bewegung doch schon relativ flüssig aus.
Raspberry Pi 3 | miniCUL 433MHz | nanoCUL 868 MHz | nanoCUL 433 MHz | MySensors WLAN Gateway | LaCrosse WLAN Gateway | SignalESP 433 MHz | SignalESP 868 MHz | HM-MOD-UART WLAN Gateway | IR - 360 Grad WLAN Gateway

rvideobaer

Hallo,

@gloob
falls Du das dritte Video meinst das ist mit marquee gemacht und nicht mit scolllabel. Das ist in Video 1 und 2 zu sehen.

Gruß Rolf
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr

eki

Zitat von: rvideobaer am 26 Juni 2017, 12:53:31
Hallo,

ich habe die css Datei nochmal heruntergeladen, da ich schon etwas mit den werten gespielt hatte. Aber es ist immer noch eine Sprunghafte Bewegung.
Daran scheint es bei mir nicht zuliegen.

Gruß Rolf

Kannst Du noch mal Deine Definition posten. Welchen Browser verwendest Du?

rvideobaer

Hallo,

ich hatte nur etwas gespielt, jetzt habe ich wieder die Originalwerte. Als Browser habe ich Chrome auf dem Mac und Fully auf dem Tablet verwendet, sah auf beiden ziemlich identisch aus. Laufen soll es sonst nur auf Fully.

Gruß Rolf
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr

eki

Hier mal ein Beispiel, wie das bei mir aussieht (in wirklichkeit noch weniger Ruckeln als im Video, liegt wohl am capture)

rvideobaer

Hallo,

versuche mal eine größere Schrift ich denke um so größer die Schrift um so mehr wird es ruckeln. Meine ist schon recht groß aber ich will das auch ab 2-3 Meter Entfernung noch lesen können.

Gruß Rolf
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr

eki

#15
Die Größe der Schrift hat auf den Effekt bei mir überhaupt keinen Einfluss (habe bis class "tall" probiert ohne irgenwelches zusätzliches Ruckeln).

So wie Deine Videos aussehen, wird der "transition" effekt gar nicht benutzt (das widget macht nichts anderes als die Texte vor einem "Fenster im Hintergrund in Schritten zu verschieben und durch die transitions wird das Ganze dann weich verschoben).

rvideobaer

Hallo,

ich habe die Zeile eingefügt, aber keine Änderung habe es noch mit Safari und Firefox getestet überall das selbe.

Gruß Rolf
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr

eki

Kannst Du mal den Verweis auf das css File direkt in Dein HTML einbauen. Also folgende Zeile:

<link rel="stylesheet" href="css/ftui_scrolllabel.css" />

vor
<link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />

rvideobaer

Hallo,

ich habe es jetzt so eingetragen, und wiklich es läuft flüssig sogar recht schnell fast zu schnell.
Aber einen Fehler mit übereinander liegenden Schriftzügen habe ich immer noch. Siehe Bild.

Gruß Rolf
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr

eki

Ist das immer so, oder nur teilweise. Eventuell kannst Du mal eine Beispiel HTML posten, bei der das auftritt, dann kann ich versuchen, das bei mir nachzuvollziehen.

rvideobaer

Hallo,

es ist nicht immer so, das Beispiel ist das bereits gepostete. Der Text ist die Titelanzeige meines Webradios. Der ende des Textes wird vom Anfang des selben überdeckt. Eventuell abhängig von der Länge? Die ist hier ja ständig anders von 2 Worten bis halbe Romane je nach dem was der Sender liefert.

Gruß Rolf
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr

rvideobaer

Hallo,

wenn ich während der Text läuft die Breite des Fensters ändere gibt es Interessante Effekte (Postkutschen Effekt zb.)

Rolf
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr

eki

Ich habe mit Deinen Hinweisen das Problem bei mir nachstellen können. Mit der anghängten Version sollte das mit den Überlagerungen wenn sich das Reading ändert weg sein. Grundsätzlich passiert beim Ändern der Größe intern das gleiche wie beim Update des Readings, daher könnte sich auch das beobachtete Verhalten (was auch immer Postkutscheneffekte in diesem Zusammenhang sind) beim Größe Ändern verbessern.

rvideobaer

Hallo,

was ich bis jetzt getestet habe scheint zu funktionieren. Wäre es möglich es noch langsamer laufen zu lassen? Ich werde es jetzt mal in meine Anzeige integrieren und schauen wie es sich im Alltag bewährt. Kannst du noch zwischen den Wiederholungen des Textes etwas Abstand einbauen so das man besser merkt wenn es von Vorn losgeht.

PS. Der Postkutschen Effekt ist in alten Filmen (Western) das die Räder der Postkutsche sich optisch rückwärts drehen wo sie doch offensichtlich vorwärts fährt. Das Hängt mit den Speichen und der  Bildfrequenz zusammen. Das nächste Bild zeigte eine Speiche die rein optisch hinter der alten Speiche zu sehen war, obwohl sie sich nach vorn bewegt hatte. Da sie aber mehr als der Speichenabstand vorgerollt ist kommt so der Effekt der rückwärts Bewegung zustande. Und so war es auch hier, es hat sich so schnell so weit vorwärts bewegt das es aussah als bewege es sich rückwärts.

Gruß Rolf
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr

accessburn

Fräge: Wenn es salonfähig ist, wird das dann ins Automatische Update integriert oder muss ich mir das selber schnorren?  :D
Wezzy Rpi2b> FHEM, Elro, Intenso, FTUI, Jeelink v3, Max!Cube, Fire5, Foscam, NAS, Fritz!Box + Fon, Max!Wandthermostat, Amazon Echo
Wezzy Rp3b> OctoPi
Jessie Rp3b> UPNP, NAS, Pi-Hole

eki

Zitat von: rvideobaer am 27 Juni 2017, 11:47:08
Hallo,

was ich bis jetzt getestet habe scheint zu funktionieren. Wäre es möglich es noch langsamer laufen zu lassen? Ich werde es jetzt mal in meine Anzeige integrieren und schauen wie es sich im Alltag bewährt. Kannst du noch zwischen den Wiederholungen des Textes etwas Abstand einbauen so das man besser merkt wenn es von Vorn losgeht.

PS. Der Postkutschen Effekt ist in alten Filmen (Western) das die Räder der Postkutsche sich optisch rückwärts drehen wo sie doch offensichtlich vorwärts fährt. Das Hängt mit den Speichen und der  Bildfrequenz zusammen. Das nächste Bild zeigte eine Speiche die rein optisch hinter der alten Speiche zu sehen war, obwohl sie sich nach vorn bewegt hatte. Da sie aber mehr als der Speichenabstand vorgerollt ist kommt so der Effekt der rückwärts Bewegung zustande. Und so war es auch hier, es hat sich so schnell so weit vorwärts bewegt das es aussah als bewege es sich rückwärts.

Gruß Rolf

Das mit dem Abstand sollte mit einem kleinen Trick auch jetzt schon gehen (kann ich aber auch noch etwas komfortabler als Parameter vorsehen). Wenn Du
data-post-text="&nbsp&nbsp&nbsp"

als zusätzlichen Parameter in die Definition einfügst, macht er 3 Leerzeichen Abstand (entsprechend mehr "non breaking spaces" also "&nbsp" machen den Abstand größer.
Bei der Geschwindigkeit gibt es ja schon 3 (data-scrollspeed='fast'|'normal'|'slow'). Ist Dir auch der langsamste zu schnell? Ich schau mal wie ich das erweitern kann.

rvideobaer

Hallo,

ja bei der Größe des Textes macht es bei der Geschwindigkeit viel Unruhe.
Mit den Geschützen Leerzeichen das werde ich gleich machen.

Gruß Rolf
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr

eki

Zitat von: rvideobaer am 27 Juni 2017, 11:47:08
...Kannst du noch zwischen den Wiederholungen des Textes etwas Abstand einbauen so das man besser merkt wenn es von Vorn losgeht.
...

Angehängt jetzt mal eine neue Version mit einem neuen Parameter und einer Parameteranpassung (braucht auch neues css File):

data-offset: Neuer Parameter mit Zahl, die angibt, wie viele spaces als Trenner zwischen einem Durchlauf und dem nächsten eingefügt werden sollen.
data-scrollspeed: Kann jetzt auch ein Zahl sein, die dann die Dauer eines Durchlaufes in ms angibt (Wert 'slow' entspricht bei horizontalem Scrollen 4000 ms).

rvideobaer

Hallo,

ich habe jetzt alles eingerichtet und werde das mal eine Weile Testen.
Erst einmal vielen Dank für deine Geduld.

Gruß Rolf
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr

Bastian0302

Guten Tag,

ich versuche gerade die Lösung hier nach zu bauen. Scheitere aber.
Ich hab die letzte Version mit css Datei eingefügt.
Allerdings bewegt sich da nix.
Könnte bitte jemand sein funktionierendes Beispiel als HTML Code posten.
Wird an diesem Thema noch gearbeitet?

Danke im Voraus.
Raspbarry Pi 3, Panstamp NRG 2, Cul 433Mhz Sender/Empfänger, Mcp23017 Ein/Ausgabebaugruppe, TabletUi, Doorpi mit Nextion/RFID und Integration in Fhem, Sonos

eki

#30
vielleicht schickst Du mal Deine Definition dann kann ich versuchen das Problem einzugrenzen.

Was mir immer mal wieder passiert ist, war ein Schreibfehler (scrollabel statt scrolllabel mit 2 'l'). Das Ganze scrollt auch nur, wenn der Platz nicht reicht (also die Größe des Fensters nicht groß genug ist um allen Text aufzunehmen).

Bastian0302

Guten Tag,

<div align="center" data-type="classchanger" data-device="Device" data-get="Stream" data-get-on="0" data-off-class="hide">
                                <div  style="width: 50% ;overflow: hidden; height: 21px">
                                      <div data-device="Device" data-get="currentTitle" data-type="scolllabel" data-orientation="horizontal" data-scrollspeed="slow"  class="big linear"></div>
                                </div>
                </div>


das ist mein Versuch. Mit normalen Label geht das auch es wird zentriert mit einer Breite von 50% der Box.
Stelle ich es nun auf srolllabel um bleibt es leer. Hatte auch schon versucht über joinedlabel eine art Laufschrift hinzukriegen wie sie im wiki beschrieben wird,
aber ich will keine festen px Werte sondern Prozent damit es auf verschiedenen Bildschirmgrößen immer gleich aussieht.
aber selbst wenn ich diese Lösung einfach übernehme geht sie nicht. aber das gehört hie nicht rein.

Ich habe auch nochmal kontrolliert, dass ich die aktuellste Version hab.

Benutze google chrome.
Im Anhang der jetzige Aufbau, das scolllabel sollte zwischen der Buttonreihe und der Anzeige der Position des Songs sein. Ist aber leer.

Danke für die schnelle Antwort.
Raspbarry Pi 3, Panstamp NRG 2, Cul 433Mhz Sender/Empfänger, Mcp23017 Ein/Ausgabebaugruppe, TabletUi, Doorpi mit Nextion/RFID und Integration in Fhem, Sonos

rvideobaer

Hallo,

bei mir sieht das so aus:
<div data-type="scrolllabel"
    data-device="rx601"
data-get="currentTitle"
data-orientation="horizontal"
data-scrollspeed="7000"
data-offset="3"
class="top lime grande3"></div>

vielleicht solltest Du erst einmal das Grundgerüst ans laufen bekommen bevor Du versuchst die Formatierungen und Styles anzuwenden. Nicht das sich da etwas ins Gehege kommt.

Rolf
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr

Bastian0302

#33
Danke schön, habs bisschen verändert und nun gehts erstmal.
Jetzt folgt die Feinjustierung. Poste dann das Ergebnis.

Edit: Es funktioniert jetzt.

<div align="center" data-type="classchanger" data-device="Device" data-get="Stream" data-get-on="0" data-off-class="hide">
                                <div style="width: 65%;height: 7%">
                                     <div data-device="Device" data-get="currentTitle" data-type="scrolllabel" data-orientation="horizontal" data-scrollspeed="6000" data-offset="20" class="top-space big"></div>
                                </div>
                </div>

Bei class:"bold" schneidet der ein Teil des Titels zum Ende hin ab.
Gibt es noch weitere Eigenschaften??

Ich würde gern folgendes realisieren.
Einstellmöglichkeit:
1. Wo die Laufschrift anfängt ob links (was standard zu scheinen ist) oder zb rechts (läuft von rechts nach links durch) oder halt eine art % angabe zb 50% startet in der Mitte des Labels.
2. Es soll einmal durchlaufen und dann neu starten. Bisher ist es ja so, dass dazwischen nur Platz ist und das quasi eine Endlosschleife ist.
3. Eine Einstellbare Zeit die vergehen muss, nach welcher der Durchlauf von neuem beginnt.

Ich versuch mich mal dran aber hab leider noch nicht so viel Erfahrung.

Danke für die Hilfe.
Raspbarry Pi 3, Panstamp NRG 2, Cul 433Mhz Sender/Empfänger, Mcp23017 Ein/Ausgabebaugruppe, TabletUi, Doorpi mit Nextion/RFID und Integration in Fhem, Sonos

rvideobaer

hallo,

wenn Du zb. statt data-offset data-pre-text="&nbsp&nbsp&nbsp" angeben würdest begänne der Text weiter rechts da ja vorher die geschützten Leerzeichen wären.

Rolf
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr

eki

Zitat von: Bastian0302 am 09 Dezember 2017, 15:17:01
...
Bei class:"bold" schneidet der ein Teil des Titels zum Ende hin ab.
Gibt es noch weitere Eigenschaften??

Ich würde gern folgendes realisieren.
Einstellmöglichkeit:
1. Wo die Laufschrift anfängt ob links (was standard zu scheinen ist) oder zb rechts (läuft von rechts nach links durch) oder halt eine art % angabe zb 50% startet in der Mitte des Labels.
2. Es soll einmal durchlaufen und dann neu starten. Bisher ist es ja so, dass dazwischen nur Platz ist und das quasi eine Endlosschleife ist.
3. Eine Einstellbare Zeit die vergehen muss, nach welcher der Durchlauf von neuem beginnt.

Ich versuch mich mal dran aber hab leider noch nicht so viel Erfahrung.

Danke für die Hilfe.

Das mit dem nicht dauerhaft durchlaufen geht über die Klasse 'ease'. Beim horizontalen scrollen ist der Standard 'linear' beim vertikalen scrollen 'ease'. Wenn Du also willst, dass beim horizontalen Scrollen immer geschoben und gewartet wird, dann musst Du 'ease' als Klasse explizit setzen (das Scrollen wird dann aber immer um die Breite des sichtbaren Fensters geschoben, dann wird gewartet, und dann weiter geschoben). Die Wartedauer ergibt sich aus den im ftui_scrollabel.css definierten Zeiten. Da könnte man natürlich auch noch was anpassen.

Bezüglich Bold habe ich noch eine Anpassung gemacht, werde ich demnächst hier veröffentlichen.

Das Schieben in negativer Richtung ist ein bisschen Aufwand, kann ich mir aber mal anschauen.

eki

Schieben in umgekehrter Richtung geht jetzt auch (parameter data-invert="true") mit der neuen Version im 1. Eintrag dieses Threads.

sash.sc

ist das schon im offizielen FHEM Update vorhanden ??

Gruß
Sascha
Raspi 4B+ Bullseye ;LaCrosse; HomeMatic; MapleCUL; ZigBee; Signalduino ESP32 ; Shellys; MQTT2; Grafana mit Influxdb

eki

Nein, das widget ist bisher gar nicht im offiziellen Verteiler. Du musst es also erst mal von hier nehmen. Ich spreche mal mit setstate, ob er es aufnimmt (das google maps widget, das auch von mir kommt ist ja ebenso nicht enthalten).

dadoc

Hi Eki,
wieder mal (wie schon beim Chart Widget) bist Du mit Deinem Scrolllabel-Widget mein "Mann der Stunde" - genau das fehlte mir für die Anzeige überlanger Songtitel.
Allerdings scrollt es bei mir nicht, sondern es wird zuerst der erste Teil des Titels auf einen Schlag angezeigt, dann nach kurzer Verzögerung der zweite Teil auf einen Schlag (in Firefox und Chrome).
Das ist mein Testcode:

            <div data-type="scrolllabel"
data-device="SB_Denon"
                data-get="currentTitle"
data-scrollspeed="slow"
                class="linear big top-space">
            </div>

Hab ich da noch etwas falsch? Bzw. welche sind die aktuellen Versionen von js und css - die aus Post #1 oder die, die Du später mal geposted hattest?
Danke & Grüße
Martin
Standort 1: FS20 mit CUL und FHEM auf Raspi. HM-Komponenten (Heizung, Rollladen, Schalter). HM IP über Raspimatic (testweise)
Standort 2: Homematic (Wired) über CCU2 und PocketHome HD
3 x Raspi3 mit piCorePlayer/Kodi für Multiroom Audio (+ Tablets/iPeng/iPods

eki

Hast Du die Datei "ftui_scrolllabel.css" ins CSS Verzeichnis kopiert?

dadoc

Standort 1: FS20 mit CUL und FHEM auf Raspi. HM-Komponenten (Heizung, Rollladen, Schalter). HM IP über Raspimatic (testweise)
Standort 2: Homematic (Wired) über CCU2 und PocketHome HD
3 x Raspi3 mit piCorePlayer/Kodi für Multiroom Audio (+ Tablets/iPeng/iPods

eki

#42
Immer die Anhänge im ersten Post nehmen (wenn ich dazwischen was poste ist das in der Regel nur zum Testen).

Ich werde mal mit Deiner Einstellung testen und melde mich dann. Könntest Du mal eine Minimalversion (index.html) basteln, die ich bei mir aufrufen kann um das nachzuvollziehen.

dadoc

Ahhh... ich hatte die aus Deinem Post #27 genommen. Habe jetzt die aus #1 geholt - damit geht's!
Vielen Dank & viele Grüße
Martin
Standort 1: FS20 mit CUL und FHEM auf Raspi. HM-Komponenten (Heizung, Rollladen, Schalter). HM IP über Raspimatic (testweise)
Standort 2: Homematic (Wired) über CCU2 und PocketHome HD
3 x Raspi3 mit piCorePlayer/Kodi für Multiroom Audio (+ Tablets/iPeng/iPods

thumu

Halle eki,

tolles Widget - genau das, was ich gesucht habe.

Ich habe noch das Problem, dass das Label nur aktualisiert wird, solange das Reading in FHEM auch wirklich existiert. Wird das Reading gelöscht, so bleibt der letzte Wert des Readings im Scrolllabel erhalten.
Wie schaffe ich es, dass das Scrolllabel ebenfalls verschwindet, wenn es das Reading aus 'data-get' nicht mehr gibt?

Gruß
thumu

gloob

Zitat von: thumu am 29 April 2018, 11:51:28
Halle eki,

tolles Widget - genau das, was ich gesucht habe.

Ich habe noch das Problem, dass das Label nur aktualisiert wird, solange das Reading in FHEM auch wirklich existiert. Wird das Reading gelöscht, so bleibt der letzte Wert des Readings im Scrolllabel erhalten.
Wie schaffe ich es, dass das Scrolllabel ebenfalls verschwindet, wenn es das Reading aus 'data-get' nicht mehr gibt?

Gruß
thumu

Setz das Reading doch einfach leer.
Raspberry Pi 3 | miniCUL 433MHz | nanoCUL 868 MHz | nanoCUL 433 MHz | MySensors WLAN Gateway | LaCrosse WLAN Gateway | SignalESP 433 MHz | SignalESP 868 MHz | HM-MOD-UART WLAN Gateway | IR - 360 Grad WLAN Gateway

thumu

Zitat von: gloob am 29 April 2018, 12:10:55
Setz das Reading doch einfach leer.

Hmmm. Mal sehen, ob es mir gelingt, das HTTMOD-Modul dazu zu überreden.

eki

Das scheint ein grundsätzliches Problem von FTUI zu sein (ist mir auch schon vor einiger Zeit aufgefallen, bin aber noch nicht dazu gekommen das mal zu melden). Um Zeit zu sparen bzw. schon etwas anzeigen zu können bevor die Verbindung zu FHEM Daten liefert, verwendet das Script fhem-tablet-ui.js den letzten Stand aller Readings aus dem "local Storage" des Browsers (es holt sich die letzten Daten und speichert diesen auch wieder beim Verlassen dort ab). Wenn nun ein Reading gelöscht wird oder aus sonstigen Gründen verschwindet, dann ist da immer noch der letzte Stand im local Storage, wird am Anfang gelesen und angezeigt und dann nicht weiter verändert, weil ja FHEM keine Änderungen mehr meldet. Man kann den local Storage löschen (Browser Debug Bereich und dort "Storage"), aber selbst das bringt nichts, weil vor Verlassen ja der letzte Status aus dem Speicher des Javascripts zurück geschrieben wird.

@setstate: Das könntest Du Dir mal anschauen.

kalle86

Hallo,

Bei mir werden die Readings in FTUI nicht automatisch aktualisiert. Nur nachdem ich die index im Browser aktualisiere bekomme ich auch die neuen News auf dem Tablet angezeigt.

So wie ich es verstanden habe werden die Readings des Scrolllabels in FTUI neu gelesen sobald sich ein Reading in FHEM ändert?
Longpoll in FTUI ist übrigens auf 1.

Bin über jeden Rat Dankbar!

Gruß
Kalle