Hallo,
ich habe das Device rssFeed installiert, was mir (mehrere) Readings mit Nachrichten erzeugt.
Die würde ich gerne nacheinander (also mehrere Readings hintereinander) als Laufschrift in der Tablet UI anzeigen.
Ich habe mich mal hieran orientiert http://www.animiertegifs.de/java-scripts/laufschrift.php bekomme
es aber nicht gebacken.
Hat dies (oder so was ähnliches) schon jemand mal gemacht -und kann den Code mal posten ?
Gruß
Ralf
Man könnte das so machen:
CSS @-webkit-keyframes marquee {
0% { text-indent: 100% }
100% { text-indent: 0% }
}
@keyframes marquee {
0% { text-indent: 100% }
100% { text-indent: 0% }
}
.marquee {
width: 100%;
margin: auto;
padding: 2px;
overflow: hidden;
white-space: nowrap;
animation: marquee 10s linear infinite;
-webkit-animation: marquee 10s linear infinite;
}
HTML
<div data-type="label"data-device="dummy1" class="marquee"></div>
Aber diese Art CSS Animation verursacht so viel CPU Last, dass ich das bis jetzt nicht fest eingebaut habe.
Ich habe mir vor einiger Zeit mal ein widget für Laufschriften aufbauend auf ein Beispiel im Internet gestrickt (funktioniert ähnlich wie das Label Widget nur dass eben wenn der Platz nicht reicht bei mehrzeiligem Text der Text als vertikale Laufschrift durchgescrollt wird. Außerdem hält der Text an wenn man mit der Maus darüber geht). Vielleicht hilft es ja, ist angehängt.
Konfiguration sollte in etwa so aussehen:
<div data-type="scrolllabel"
data-device="AgroWeather"
data-get="temperature"
data-limits="[-50,0,10,25,30,40]"
data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]'
data-unit=" °C">
</div>
Zitat von: eki am 01 Februar 2016, 16:46:22
Ich habe mir vor einiger Zeit mal ein widget für Laufschriften aufbauend auf ein Beispiel im Internet gestrickt (funktioniert ähnlich wie das Label Widget nur dass eben wenn der Platz nicht reicht bei mehrzeiligem Text der Text als vertikale Laufschrift durchgescrollt wird. Außerdem hält der Text an wenn man mit der Maus darüber geht). Vielleicht hilft es ja, ist angehängt.
Konfiguration sollte in etwa so aussehen:
<div data-type="scrolllabel"
data-device="AgroWeather"
data-get="temperature"
data-limits="[-50,0,10,25,30,40]"
data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]'
data-unit=" °C">
</div>
Danke! Funktioniert!
Hallo,
funktioniert ....fast !
Die Schrift läuft von rechts nach links und sie den linken Rand berührt geht es von
vorne los anstatt durchzulaufen. Wo kann man das einstellen ?
Gruss
Ralf
Zitat von: setstate am 01 Februar 2016, 09:18:47
Man könnte das so machen:
CSS @-webkit-keyframes marquee {
0% { text-indent: 100% }
100% { text-indent: 0% }
}
@keyframes marquee {
0% { text-indent: 100% }
100% { text-indent: 0% }
}
.marquee {
width: 100%;
margin: auto;
padding: 2px;
overflow: hidden;
white-space: nowrap;
animation: marquee 10s linear infinite;
-webkit-animation: marquee 10s linear infinite;
}
HTML
<div data-type="label"data-device="dummy1" class="marquee"></div>
Aber diese Art CSS Animation verursacht so viel CPU Last, dass ich das bis jetzt nicht fest eingebaut habe.
Zitat
Ich habe mir vor einiger Zeit mal ein widget für Laufschriften aufbauend auf ein Beispiel im Internet gestrickt (funktioniert ähnlich wie das Label Widget nur dass eben wenn der Platz nicht reicht bei mehrzeiligem Text der Text als vertikale Laufschrift durchgescrollt wird. Außerdem hält der Text an wenn man mit der Maus darüber geht). Vielleicht hilft es ja, ist angehängt.
Konfiguration sollte in etwa so aussehen:
<div data-type="scrolllabel"
data-device="AgroWeather"
data-get="temperature"
data-limits="[-50,0,10,25,30,40]"
data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]'
data-unit=" °C">
</div>
Leider funktioniert deine Lösung bei mir nicht ganz. Ich muss gestehen sie auch nicht vollständig verstanden zu haben. Ich habe einen rss feed mit 10 Zeilen Nachrichten. Diesen möchte ich als 3 Zeiligen vertical scollenden Text darstellen. Dafür habe ich
<div data-type="scrolllabel"
data-device="myNews"
data-get="schlagzeilen">
</div>bei mir eingebaut. Ich sehe aber nur eine Zeile und auch nur die erste Nachricht. Aus dem scrolllabel.js habe ich so etwas wie lines als Parameter gesehen. Das brachte aber keine Veränderung. Kann das, was ich möchte überhaupt funktionieren?
Danke
Folgendes CSS Konstrukt funktioniert bei mir:
@keyframes scrolltext {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
.scrolltext {
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
}
.scrolltext span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation: scrolltext 20s linear infinite;
-webkit-animation: scrolltext 20s linear infinite;
}
Das Ganze wird dann so eingebaut (Anzeige für ein SONOS Device):
<div id="radiodisplay" class="label-border top-space scrolltext">
<span>
<div data-type="label" data-device="d_sonos_Mobil"
data-get="infoSummarize1"
class="medium horizontal-c">
</div>
</span>
</div>
Die id im ersten div benötige ich nur, um das Scrolling bei Bedarf ein- oder auszuschalten.
Hallo,
diese Variante habe ich auch schon probiert, aber leider Läuft das nicht auf dem dafür vorgesehen Android Gerät mit webviewcontrol. Auch habe ich noch das Problem das bei einem leeren Reading Datum und Uhrzeit angezeigt wird.
Gruß Rolf
Die Klassen "label-border" und "horizontal-c" in meinem Beispiel oben sind weg zu lassen. Die sind keine Bestandteile von Tablet-UI.
Datum/Uhrzeit in einem leeren Label war früher mal ein Thema, wurde aber m.E. gefixt. Zumindest in meiner 2.0 beta tritt das nicht mehr auf.
Hallo,
ja mit der 2.0 beta ist das Datum weg, aber webviewcontrol das ich da nutzte reagiert nicht mehr.
Gruß Rolf
Hallo,
ich habe für mein Wandtablet eine Anzeige für Titel, Album usw. mit einem Label realisiert. Das Label wird als Lauftext angezeigt, aber der Text läuft immer auch wenn der Text nur kurz ist. Jetzt wollte ich das "scrolllabel" widget noch mal probieren. Aber leider funktioniert dies unter FTUI 2.4 nicht. Könnte das widget angepasst werden?
Gruß Rolf