Way too slow

[duxnobis13]

I know you mention it but even adjusting the proposed figure it is choppy as hell. I feel like an idiot while reading the news as I wait word after word to come out of the ticker. Impossible to read like this. Is there anything you can propose to adjust to get a fluent scroll of the news or is the ticker not coded to show a fluent flow? Anyone else the same issue?

[sdetweil]

I don't know, but what pi are you using, and what modules do you have installed besides this one?

[duxnobis13]

Hi mate. Raspberry Pi 4. All up to date, fresh installation.

• Wallberry Theme
• Wallberry Theme Clock
• default calendar
• MMM-weatherforecast
• default newsfeed
• MMM-SwissStationboard

The Mirror runs on a HP Z32, Wall mount.

[sdetweil]

default newsfeed, why is that still running?
eh?

[duxnobis13]

stupid question...why not?

[sdetweil]

why have two news feed tickers?

[duxnobis13]

thats what you ment. while running the ticker, the default was off as same position.

sam detweiler notifications@github.com schrieb am Mi. 3. Juni 2020 um 19:17:

why have two news feed tickers?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/justjim1220/MMM-NewsFeedTicker/issues/13#issuecomment-638336261, or unsubscribe https://github.com/notifications/unsubscribe-auth/APWPBADLZ2O7RB5ZTIKK3DTRU2ATFANCNFSM4NRZXWSA .

[sdetweil]

no idea what u mean

the default newsreader is module:'newsfeed' has no animation of ticker on or off this one is MMM-NewsFeedTicker has scrolling window

they cannot be in the 'same' location, the can be configured the same position, but 1st in config.js (top to bottom) will be first in the stack at that position and then next will be next, which could push it off screen.

[duxnobis13]

Yes. While the Ticker Module was running, the default was off. Only one was running, the ticker one. But very poor performance. It was so slow that I vouldnt finish to read one headline that it switched to the next.

sam detweiler notifications@github.com schrieb am Mi. 3. Juni 2020 um 20:33:

no idea what u mean

the default newsreader is module:'newsfeed' has no animation of ticker on or off this one is MMM-NewsFeedTicker has scrolling window

they cannot be in the 'same' location, the can be configured the same position, but 1st in config.js (top to bottom) will be first in the stack at that position and then next will be next, which could push it off screen.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/justjim1220/MMM-NewsFeedTicker/issues/13#issuecomment-638383231, or unsubscribe https://github.com/notifications/unsubscribe-auth/APWPBAG4WUCQAK7AH5FNOGLRU2JP7ANCNFSM4NRZXWSA .

[Tippon]

I know you mention it but even adjusting the proposed figure it is choppy as hell. I feel like an idiot while reading the news as I wait word after word to come out of the ticker. Impossible to read like this. Is there anything you can propose to adjust to get a fluent scroll of the news or is the ticker not coded to show a fluent flow? Anyone else the same issue?

I don't know if you still need help, but the advice at the bottom of the main page seems to be wrong.

some users are having issues with speed of the animation. go to the following line in the MMM-NewsFeedTicker.js file and change the number 1000 to a lower number. (some users are finding that changing to 300 works best for them, adjust to your preference)

tickerBody.style.animationDuration = Math.round(this.config.updateInterval / 1000) + "s";

I just increased the number to 2500 from 1000 and the text is scrolling at a decent speed.

Hope this helps :)

[e2m4n]

I found that increasing the divisor just made the animation finish quicker and didn't stop it from switching to the next article before the current one had finished scrolling.

I couldn't really fix it, so I slightly reworked it instead. Now it populates the headline <span> with all of the news articles, and sets the positioning differently so that the animation doesn't end until the entire text moves off-screen.

There are problems with this approach: it guesses at the eventual width of the container by multiplying the number of characters by an average letter width. If you use a different font or font size then the letterWidthPx config variable will need changing. Also the speed is set in pixels per second, which will perform wildly differently depending on the pixel pitch of the screen you use. The default setting of animationSpeedPxSec of 400 is great on high-DPI screens but a bit too fast on the Raspberry Pi official touchscreen, for example.

Here's the diff if anyone's interested:

--- a/MMM-NewsFeedTicker.css
+++ b/MMM-NewsFeedTicker.css
@@ -1,26 +1,6 @@
-@-webkit-keyframes marquee {
-  0% { left: 100%; }
-  100% { left: -100%; }
-}
-
-@-moz-keyframes marquee {
-  0% { left: 100%; }
-  100% { left: -100%; }
-}
-
-@-ms-keyframes marquee {
-  0% { left: 100%; }
-  100% { left: -100%; }
-}
-
-@-o-keyframes marquee {
-  0% { left: 100%; }
-  100% { left: -100%; }
-}
-
 @keyframes marquee {
-  0% { left: 100%; }
-  100% { left: -100%; }
+    0% { transform: translateX(12%); }
+  100% { transform: translateX(-100%); }
 }

 .MMM-NewsFeedTicker {
@@ -33,16 +13,13 @@

 .MMM-NewsFeedTicker .tickerbody {
   margin: 0 auto;
-  width: 100%;
-  padding-top: 5px;
+  width: auto;
+  padding-top: 12px;
   position: relative;
   white-space: nowrap;
   overflow: visible;
-  -webkit-animation: marquee linear infinite;
-  -moz-animation: marquee linear infinite;
-  -ms-animation: marquee linear infinite;
-  -o-animation: marquee linear infinite;
-  animation: marquee linear infinite;
+  animation: marquee linear 1;
+  display: inline-flex;
 }

 .MMM-NewsFeedTicker .headline {
--- a/MMM-NewsFeedTicker.js
+++ b/MMM-NewsFeedTicker.js
@@ -26,6 +26,8 @@ Module.register("MMM-NewsFeedTicker", {
                 customLogo: "news24.png"
             }
         ],
+       animationSpeedPxSec: 400,  // animation speed in pixels per second
+       letterWidthPx: 16,  // approximately how many pixels wide is a letter - something like font size in px divided by 2.5-ish

         showMarquee: true,
         showIcon: true,
@@ -207,31 +212,25 @@ Module.register("MMM-NewsFeedTicker", {
                     wrapper.appendChild(image);
                 }

-                var tickerBody = document.createElement("div")
+                var tickerBody = document.createElement("div");
                 tickerBody.className = "tickerbody";

                 var headline = document.createElement("span");
                 headline.className = "headline";
-                tickerBody.style.animationDuration = Math.round(this.config.updateInterval / 1000) + "s";
+
                 tickerBody.addEventListener("animationend", () => {
                     headline.innerHTML = "";
                     this.scheduleUpdateInterval();
                 }, false);

-                headline.innerHTML = "<font color= #ffaa00>" + moment(new Date(this.newsItems[this.activeItem].pubdate)).fromNow() + ": &nbsp;" + "</font>" + this.newsItems[this.activeItem].title + "&nbsp; || &nbsp;" + this.newsItems[this.activeItem].description;
-
-                function calcSpeed(speed) {
-                    // Time = Distance/Speed
-                    var spanSelector = document.querySelectorAll("headline"),
-                        i;
-                    for (i = 0; i < spanSelector.length; i++) {
-                        var spanLength = spanSelector[i].offsetWidth,
-                            timeTaken = spanLength / speed;
-                        spanSelector[i].style.animationDuration = timeTaken + "s";
-                    }
-                }
-                calcSpeed(100);
+               for (var i=0;i<this.newsItems.length;i++) {
+                   var newsItem = this.newsItems[i];
+                   headline.innerHTML += "<font color= #ffaa00>" + moment(new Date(newsItem.pubdate)).fromNow() + ": &nbsp;" + "</font>" + newsItem.title + "&nbsp; || &nbsp;" + newsItem.description + "&nbsp:";
+               }

+               // number of visible characters multiplied by average letter width equals approximate width in pixels, divide by animation speed in pixels/sec to get time:
+               // (allow for two empty window widths - the animation starts and ends offscreen)
+               tickerBody.style.animationDuration = Math.round(((headline.innerText.length * this.config.letterWidthPx) + (2 * window.innerWidth)) / this.config.animationSpeedPxSec) + "s";

                 tickerBody.appendChild(headline);

@@ -378,11 +377,6 @@ Module.register("MMM-NewsFeedTicker", {
         var self = this;

         self.updateDom(self.config.animationSpeed);
-
-        timer = setInterval(function() {
-            self.activeItem++;
-            self.updateDom(self.config.animationSpeed);
-        }, this.config.updateInterval);
     },

     /* capitalizeFirstLetter(string)