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.
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
poste mal bitte Deine Konfiguration mit dem Scrolllabel
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
Kannst Du bitte mal schauen ob es mit der anghängten Version funktioniert.
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
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
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.
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
Also für mich sieht die Bewegung doch schon relativ flüssig aus.
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
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?
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
Hier mal ein Beispiel, wie das bei mir aussieht (in wirklichkeit noch weniger Ruckeln als im Video, liegt wohl am capture)
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
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).
Hallo,
ich habe die Zeile eingefügt, aber keine Änderung habe es noch mit Safari und Firefox getestet überall das selbe.
Gruß Rolf
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" />
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
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.
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
Hallo,
wenn ich während der Text läuft die Breite des Fensters ändere gibt es Interessante Effekte (Postkutschen Effekt zb.)
Rolf
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.
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
Fräge: Wenn es salonfähig ist, wird das dann ins Automatische Update integriert oder muss ich mir das selber schnorren? :D
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="   "
als zusätzlichen Parameter in die Definition einfügst, macht er 3 Leerzeichen Abstand (entsprechend mehr "non breaking spaces" also " " 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.
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
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).
Hallo,
ich habe jetzt alles eingerichtet und werde das mal eine Weile Testen.
Erst einmal vielen Dank für deine Geduld.
Gruß Rolf
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.
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).
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.
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
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.
hallo,
wenn Du zb. statt data-offset data-pre-text="   " angeben würdest begänne der Text weiter rechts da ja vorher die geschützten Leerzeichen wären.
Rolf
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.
Schieben in umgekehrter Richtung geht jetzt auch (parameter data-invert="true") mit der neuen Version im 1. Eintrag dieses Threads.
ist das schon im offizielen FHEM Update vorhanden ??
Gruß
Sascha
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).
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
Hast Du die Datei "ftui_scrolllabel.css" ins CSS Verzeichnis kopiert?
Claro!
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.
Ahhh... ich hatte die aus Deinem Post #27 genommen. Habe jetzt die aus #1 geholt - damit geht's!
Vielen Dank & viele Grüße
Martin
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
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.
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.
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.
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