NEWS
Skript für Lauftextgeschwindigkeit (Marquee) im VIS
-
Hallo zusammen,
ich hätte gerne im VIS Lauftexte um lange Texte (z.B. Titel bei Sonos oder Alexa) entsprechend anzuzeigen wenn diese zu lang sind. Ich habe eine Anleitung dazu allgemein für HTML im Internet gefunden und bis auf das Skript habe ich auch alles zum laufen bekommen.
Die CSS Regeln funktionieren und der Text bewegt sich auch. Allerdings kann ich die Geschwindigkeit nicht ändern. Im Original war das ein Skript für eine Einbindung in HTML.
Wenn ich dieses direkt mit ins HTML Wiget reinkopiere funktioniert er, allerdings nur einmal. In anderen Views (Grid view von Material Design) funktioniert er leider nicht.
Deswegen habe ich die Frage, ob mir bitte jemand helfen kann das Skript so anzupassen, damit ich es unter "Skripte" im VIS nutzen kann.
Folgender HTML Text wird im Standard html Widget verwendet:
<div id="marqueeM" class="marqueeM"><span>{sonos.0.root.192_168_178_55.current_title}</span></div>Folgende CSS Formatierungen werden verwendet:
.marqueeM { max-width: 100vw; /* iOS braucht das */ white-space: nowrap; overflow: hidden; /* hier evtl. noch font-size, color usw. */ } .marqueeM span { display: inline-block; padding-left: 105%; /* die zusätzlichen 5% erzeugen einen verzögerten Start und vermeiden so ein Ruckeln auf langsamen Seiten */ animation: marqueeM 15s linear infinite; } /* Optional: mouseover (oder Tipp auf dem Touchscreen) pausiert die Laufschrift */ .marqueeM span:hover { animation-play-state: paused } /* Make it move */ @keyframes marqueeM { 0% {transform: translate3d(0,0,0);} 100% {transform: translate3d(-100%,0,0);} }Das funktioniert soweit alles. Nun folgt das Skript, welches angepasst werden muss, was mir aber leider nicht gelingt:
<script> if (document.getElementById("marqueeM")) { var laufschrift = document.getElementById("marqueeM"); len = laufschrift.innerHTML.length; var nodes = document.getElementById('marqueeM').getElementsByTagName("span"); for(var i=0; i<nodes.length; i++) { // weil jeder whitespace als child zählt nodes[i].style.animationDuration = len/10 +"s"; } } </script>Ich habe sowas in einem normalen "basic html"
<marquee direction="left" scrollamount="30" style="height: 100px;">{javascript.0.Sonstige.DWD.DWD_Anzahl} Wetterwarnungen vorhanden!<br></marquee>Und da kannst du doch den speed ändern!
Wenn ich helfen konnte, dann Daumen hoch (Pfeil nach oben)!
Danke.
gute Forenbeiträge: https://forum.iobroker.net/topic/51555/hinweise-f%C3%BCr-gute-forenbeitr%C3%A4ge
ScreenToGif :https://www.screentogif.com/downloads.html -
Ich habe sowas in einem normalen "basic html"
<marquee direction="left" scrollamount="30" style="height: 100px;">{javascript.0.Sonstige.DWD.DWD_Anzahl} Wetterwarnungen vorhanden!<br></marquee>Und da kannst du doch den speed ändern!
@bahnuhr
AFAIK ist "marquee" als deprecated markiert.
Wird das überhaupt noch von allen Browsern unterstützt?"Any fool can write code that a computer can understand. Good programmers write code that humans can understand." (Martin Fowler, "Refactoring")
Proxmox 9.1.1 LXC|8 GB|Core i7-6700
HmIP|ZigBee|Tasmota|Unifi
Zabbix Certified Specialist
Konnte ich Dir helfen? Dann benutze bitte das Voting unten rechts im Beitrag -
@bahnuhr
AFAIK ist "marquee" als deprecated markiert.
Wird das überhaupt noch von allen Browsern unterstützt?@codierknecht sagte in Skript für Lauftextgeschwindigkeit (Marquee) im VIS:
AFAIK ist "marquee" als deprecated markiert.
Bitte mal auf Deutsch schreiben. Danke.
-
@bahnuhr
AFAIK ist "marquee" als deprecated markiert.
Wird das überhaupt noch von allen Browsern unterstützt?@codierknecht
die wichtigsten unterstützen es noch bzw. keiner von denen hat es rausgenommen.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee?retiredLocale=de#browser_compatibility -
@codierknecht sagte in Skript für Lauftextgeschwindigkeit (Marquee) im VIS:
AFAIK ist "marquee" als deprecated markiert.
Bitte mal auf Deutsch schreiben. Danke.
@bahnuhr sagte in Skript für Lauftextgeschwindigkeit (Marquee) im VIS:
Bitte mal auf Deutsch schreiben. Danke.
So weit ich weiß, ist das HTML-Tag "marquee" als "veraltet" markiert.
Sorry, war früher zu viel in Newsgroups unterwegs ;-)
AFAIK => as far as I know
IMHO => in my humble opinion
usw."Any fool can write code that a computer can understand. Good programmers write code that humans can understand." (Martin Fowler, "Refactoring")
Proxmox 9.1.1 LXC|8 GB|Core i7-6700
HmIP|ZigBee|Tasmota|Unifi
Zabbix Certified Specialist
Konnte ich Dir helfen? Dann benutze bitte das Voting unten rechts im Beitrag -
Ich habe sowas in einem normalen "basic html"
<marquee direction="left" scrollamount="30" style="height: 100px;">{javascript.0.Sonstige.DWD.DWD_Anzahl} Wetterwarnungen vorhanden!<br></marquee>Und da kannst du doch den speed ändern!
-
@codierknecht
die wichtigsten unterstützen es noch bzw. keiner von denen hat es rausgenommen.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee?retiredLocale=de#browser_compatibility@oliverio sagte in Skript für Lauftextgeschwindigkeit (Marquee) im VIS:
@codierknecht
die wichtigsten unterstützen es noch bzw. keiner von denen hat es rausgenommen.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee?retiredLocale=de#browser_compatibilityIst das so wie bei "request".
Sollte doch auch schon seit Jahren raus. Es funktioniert aber weiterhin.
Wenn ich helfen konnte, dann Daumen hoch (Pfeil nach oben)!
Danke.
gute Forenbeiträge: https://forum.iobroker.net/topic/51555/hinweise-f%C3%BCr-gute-forenbeitr%C3%A4ge
ScreenToGif :https://www.screentogif.com/downloads.html -
@bahnuhr sagte in Skript für Lauftextgeschwindigkeit (Marquee) im VIS:
Bitte mal auf Deutsch schreiben. Danke.
So weit ich weiß, ist das HTML-Tag "marquee" als "veraltet" markiert.
Sorry, war früher zu viel in Newsgroups unterwegs ;-)
AFAIK => as far as I know
IMHO => in my humble opinion
usw.@codierknecht sagte in Skript für Lauftextgeschwindigkeit (Marquee) im VIS:
AFAIK => as far as I know
IMHO => in my humble opinionDeutsch war das jetzt auch nicht ;-)
Hab aber gegoogelt. Danke. -
@oliverio sagte in Skript für Lauftextgeschwindigkeit (Marquee) im VIS:
@codierknecht
die wichtigsten unterstützen es noch bzw. keiner von denen hat es rausgenommen.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee?retiredLocale=de#browser_compatibilityIst das so wie bei "request".
Sollte doch auch schon seit Jahren raus. Es funktioniert aber weiterhin.@bahnuhr sagte in Skript für Lauftextgeschwindigkeit (Marquee) im VIS:
Sollte doch auch schon seit Jahren raus. Es funktioniert aber weiterhin.
Das ist bei vielen Dingen so. Aus gründen der abwärtskompatibilität wird auch solch alter Kram mitgeschleppt.
Es sollte aber in neuem Code nicht mehr verwendet werden. -
@oliverio sagte in Skript für Lauftextgeschwindigkeit (Marquee) im VIS:
@codierknecht
die wichtigsten unterstützen es noch bzw. keiner von denen hat es rausgenommen.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee?retiredLocale=de#browser_compatibilityIst das so wie bei "request".
Sollte doch auch schon seit Jahren raus. Es funktioniert aber weiterhin.@bahnuhr
Ich glaube, das "marquee" wurde ursprünglich mal von MS "erfunden".
Die anderen Hersteller möchten es schon seit Jahren loswerden.
Aber wie soi oft gilt: Provisorien halten sich am längsten ... ;-)"Any fool can write code that a computer can understand. Good programmers write code that humans can understand." (Martin Fowler, "Refactoring")
Proxmox 9.1.1 LXC|8 GB|Core i7-6700
HmIP|ZigBee|Tasmota|Unifi
Zabbix Certified Specialist
Konnte ich Dir helfen? Dann benutze bitte das Voting unten rechts im Beitrag -
@bahnuhr
Ich glaube, das "marquee" wurde ursprünglich mal von MS "erfunden".
Die anderen Hersteller möchten es schon seit Jahren loswerden.
Aber wie soi oft gilt: Provisorien halten sich am längsten ... ;-)korrekt.
aber netscape hatte dafür sein blink
https://en.wikipedia.org/wiki/Marquee_element
alle elemente die nicht inhalts-strukturierend waren mussten daber dann raus.
dafür wurde dann css eingeführt.html stamm übrigens von sgml ab, welche bereits 1990 standardisiert wurde
-
korrekt.
aber netscape hatte dafür sein blink
https://en.wikipedia.org/wiki/Marquee_element
alle elemente die nicht inhalts-strukturierend waren mussten daber dann raus.
dafür wurde dann css eingeführt.html stamm übrigens von sgml ab, welche bereits 1990 standardisiert wurde
@oliverio sagte in Skript für Lauftextgeschwindigkeit (Marquee) im VIS:
alle elemente die nicht inhalts-strukturierend waren mussten daber dann raus.
dafür wurde dann css eingeführt.Die Welt könnte so schön einfach sein ...
-
als im marquee widget des rssadapter habe ich das so gelöst, das man in der konfiguration des widgets einen speedwert definieren kann.
die Anzahl der Zeichen die gescrollte werden soll wird dann durch diesen speedwert geteilt.
das ergebnis wird dann als ganzzahliger sekundenwert dem duration propertie der animation anweisung zugeordnet.in deinem skript/html/css sehe ich, das 15s fix definiert wurde (2.Block,Zeile 11)
Das skript im 3.Block verstehe ich nicht so ganz. Bis Zeile 4 ist noch ok, da hat man dann die Länge, aber der rest?
da versucht man die duration auf alle gefundenen span elemente anzuwenden?
Eigentlich definiert man die animation auf EINEM übergeordneten Element und das wird dann gescrollt.
wenn dann würde ich das lieber mit jquery machen$("marqueeM").css({ 'animation-duration': animationTime + 's' });du kannst di ja mal den rssadapter installieren und dann mit den developer tools mal schauen was da passiert.
@oliverio said in Skript für Lauftextgeschwindigkeit (Marquee) im VIS:
als im marquee widget des rssadapter habe ich das so gelöst, das man in der konfiguration des widgets einen speedwert definieren kann.
die Anzahl der Zeichen die gescrollte werden soll wird dann durch diesen speedwert geteilt.
das ergebnis wird dann als ganzzahliger sekundenwert dem duration propertie der animation anweisung zugeordnet.in deinem skript/html/css sehe ich, das 15s fix definiert wurde (2.Block,Zeile 11)
Das skript im 3.Block verstehe ich nicht so ganz. Bis Zeile 4 ist noch ok, da hat man dann die Länge, aber der rest?
da versucht man die duration auf alle gefundenen span elemente anzuwenden?
Eigentlich definiert man die animation auf EINEM übergeordneten Element und das wird dann gescrollt.
wenn dann würde ich das lieber mit jquery machen$("marqueeM").css({ 'animation-duration': animationTime + 's' });du kannst di ja mal den rssadapter installieren und dann mit den developer tools mal schauen was da passiert.
Danke für die Info. Auf der Seite von der ich die Anleitung habe war die Begründung für das Skript, dass die Geschwindigkeit eben dymanisch an die Zeichnen angepasst wird. Das Skript ermittelt somit die Zeichen und erstellt dann die Dauer.
Ich weiß nicht ob ich hier fremde Webseiten verlinken darf... Die Anleitung (inkl. Erklärung zum Skript) findet ihr wenn ihr nach "marquee - Laufschrift ohne Ruckeln" sucht. Eventuell helfen die Infos weiter.
Support us
428
Online32.5k
Users81.6k
Topics1.3m
Posts