Skript für Lauftextgeschwindigkeit (Marquee) im VIS

[Bones13]

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>

[OliverIO]

@bones13

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.

https://github.com/oweitman/ioBroker.rssfeed/blob/41fd898e4d2521ca311e7c196072f57f4699877c/widgets/rssfeed/js/rssfeed.js#L523

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.

[bahnuhr]

@bones13

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]

@bahnuhr
AFAIK ist "marquee" als deprecated markiert.
Wird das überhaupt noch von allen Browsern unterstützt?

[bahnuhr]

@codierknecht sagte in Skript für Lauftextgeschwindigkeit (Marquee) im VIS:

AFAIK ist "marquee" als deprecated markiert.

Bitte mal auf Deutsch schreiben. Danke.

[OliverIO]

@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]

@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.

[OliverIO]

@bahnuhr sagte in Skript für Lauftextgeschwindigkeit (Marquee) im VIS:

Und da kannst du doch den speed ändern!

ja, kann man in beiden fällen.
beim TE ändert sich halt nix, weil es keine gute codevorlage war

[bahnuhr]

@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_compatibility

Ist das so wie bei "request".
Sollte doch auch schon seit Jahren raus. Es funktioniert aber weiterhin.

[bahnuhr]

@codierknecht sagte in Skript für Lauftextgeschwindigkeit (Marquee) im VIS:

AFAIK => as far as I know
IMHO => in my humble opinion

Deutsch war das jetzt auch nicht
Hab aber gegoogelt. Danke.

[Thomas Braun]

@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.

[Codierknecht]

@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 ...

[OliverIO]

@codierknecht

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

[Codierknecht]

@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 ...

[Bones13]

@oliverio said in Skript für Lauftextgeschwindigkeit (Marquee) im VIS:

@bones13

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.

https://github.com/oweitman/ioBroker.rssfeed/blob/41fd898e4d2521ca311e7c196072f57f4699877c/widgets/rssfeed/js/rssfeed.js#L523

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.