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

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>

@haus-automatisierung

Ja alles gut. Bin ja schon froh, dass alles soweit funktioniert

Habe übrigens eine Lösung gefunden, welche jetzt für meine Zwecke sehr gut funktioniert:
Ich verwende in meiner vis hauptsächlich den Material Adapter mit den dazugehörigen Widgets. Dort setzte ich für alle Seiten das Widget "Grid-Views" ein. Ich habe nun einfach zwei verschiedene "Müll-Views" erstellt. Ein normales und ein kleines. In den jeweiligen Einstellungen des Grid-View habe ich bei einem dann ausgewählt, dass es bei einer Auflösung von größer als 500px angezeigt wird und bei dem anderen kleiner als 500px. Somit kommt immer der jeweilige View. Funktioniert bis jetzt perfekt.

Hallo zusammen, hat jemand eine Idee, ob uns falls ja wie man das Widget so hinbekommt, dass sich die Größe anpasst? Also auf dem Handy bzw. auf dem Tablet. So wie ich es jetzt habe sieht es auf dem Tablet gut aus, ist aber auf dem Handy viel zu groß.

@axelf1977
Auch wenn der Beitrag inzwischen doch echt alt ist wollte ich mal kurz Fragen wie du es mit Material Design hinbekommen hast auf der ersten Seite, dass du verschieden Breite Spalten hast und direkt auch die Cards untereinander.
Ich bekomme mit Grid Views oder Masonry Views immer nur eine Lösung hin. Nie klappt es in einer Spalte z.B. mit verschiedenen Höhen. Wäre nett wenn du mir dazu vielleich einen Export machen könntes.

Danke!

Hey, super dass endlich mal jemand sich um nen passenden Adapter kümmert

Habe selbst nen Siemens Backofen, also kann da gerne meine Erfahrungen dann teilen.

Wie bei den Anderen klappt die Verbindung ohne Probleme und Objekte werden auch angezeigt.