Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Skript für Lauftextgeschwindigkeit (Marquee) im VIS

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    Skript für Lauftextgeschwindigkeit (Marquee) im VIS

    This topic has been deleted. Only users with topic management privileges can see it.
    • B
      Bones13 last edited by

      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 bahnuhr 2 Replies Last reply Reply Quote 0
      • OliverIO
        OliverIO @Bones13 last edited by

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

        B 1 Reply Last reply Reply Quote 0
        • bahnuhr
          bahnuhr Forum Testing Most Active @Bones13 last edited by

          @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 OliverIO 2 Replies Last reply Reply Quote 0
          • Codierknecht
            Codierknecht Developer Most Active @bahnuhr last edited by

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

            bahnuhr OliverIO 2 Replies Last reply Reply Quote 0
            • bahnuhr
              bahnuhr Forum Testing Most Active @Codierknecht last edited by

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

              AFAIK ist "marquee" als deprecated markiert.

              Bitte mal auf Deutsch schreiben. Danke.

              Codierknecht 1 Reply Last reply Reply Quote 0
              • OliverIO
                OliverIO @Codierknecht last edited by

                @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

                bahnuhr 1 Reply Last reply Reply Quote 0
                • Codierknecht
                  Codierknecht Developer Most Active @bahnuhr last edited by

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

                  bahnuhr 1 Reply Last reply Reply Quote 0
                  • OliverIO
                    OliverIO @bahnuhr last edited by

                    @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

                    1 Reply Last reply Reply Quote 0
                    • bahnuhr
                      bahnuhr Forum Testing Most Active @OliverIO last edited by

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

                      Thomas Braun Codierknecht 2 Replies Last reply Reply Quote 0
                      • bahnuhr
                        bahnuhr Forum Testing Most Active @Codierknecht last edited by

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

                        1 Reply Last reply Reply Quote 0
                        • Thomas Braun
                          Thomas Braun Most Active @bahnuhr last edited by 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.

                          1 Reply Last reply Reply Quote 0
                          • Codierknecht
                            Codierknecht Developer Most Active @bahnuhr last edited by 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 1 Reply Last reply Reply Quote 0
                            • OliverIO
                              OliverIO @Codierknecht last edited by

                              @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 1 Reply Last reply Reply Quote 0
                              • Codierknecht
                                Codierknecht Developer Most Active @OliverIO last edited by

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

                                1 Reply Last reply Reply Quote 0
                                • B
                                  Bones13 @OliverIO last edited by 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.

                                  1 Reply Last reply Reply Quote 0
                                  • First post
                                    Last post

                                  Support us

                                  ioBroker
                                  Community Adapters
                                  Donate

                                  661
                                  Online

                                  31.9k
                                  Users

                                  80.2k
                                  Topics

                                  1.3m
                                  Posts

                                  5
                                  15
                                  844
                                  Loading More Posts
                                  • Oldest to Newest
                                  • Newest to Oldest
                                  • Most Votes
                                  Reply
                                  • Reply as topic
                                  Log in to reply
                                  Community
                                  Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                  The ioBroker Community 2014-2023
                                  logo