• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

Default newsfeed - make list?

Scheduled Pinned Locked Moved Requests
14 Posts 3 Posters 7.3k Views 3 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • P Offline
    Pade2204
    last edited by Jan 11, 2018, 12:27 AM

    Is it possible to make the default newsfeed list entries instead of taking 1 at the time and fade out/in.

    List news like this and maybe the list fades to another feed with 5 other news from another source?

    CNN:
    08:55 Trump tower burns to ground
    11:43 The fire was Huuuuge, says President Trump
    16:34 The tower is now rebuild - the bricks paid by Mexico
    20:00 Marty sells the Sports Almanac
    23:15 Great Scott! 1955 is many years ago, says the President

    Is that possible today in some modules?

    Thanks.

    1 Reply Last reply Reply Quote 0
    • H Offline
      holotfi2003
      last edited by Jan 11, 2018, 6:32 PM

      I’m definitely interested in doing this too! Hopefully someone here can help out, cause I’m a total noob and don’t really have the skills necessary.

      1 Reply Last reply Reply Quote 0
      • D Offline
        doubleT Module Developer
        last edited by doubleT Jan 13, 2018, 9:47 PM Jan 13, 2018, 9:43 PM

        I played around with the module a little bit, made a list of 5 news items scrolling vertically, then came back to this thread and saw that I missunderstood your request. Oh, well…

        What I overlooked was the part where you wanted 5 items, then 5 of another source.
        What I saw was a list where an item would be visible for 5 “intervals”. It comes in from the bottom, then the next one comes in, pushing the last one up, and so on. I thought this was just about having news item in view and readable for a longer time while still having some flow.

        Video: https://streamable.com/7a8pq

        If you want to check it out:

        defaults: {
        //... original content
        // NEW:
        	stackNews: true,
        	stackSize: 5
        
        },
        
        getDom: function() {
        	var wrapper = document.createElement("div");
        
        	if (this.config.feedUrl) {
        //... original content
        	}
        	if (this.activeItem >= this.newsItems.length) {
        //... original content
        	}
        // NEW:
        	if (this.config.stackNews) {
        		if (this.newsItems.length > 0) {
        
        			var newsStack = document.createElement("ul");
        			newsStack.setAttribute("id", "newsstack");
        				// 5 empty li-items
        				for (e = 1; e < this.config.stackSize; e++) {
        					var newsStackItem = document.createElement("li");
        					newsStackItem.className = "newsstack0 bright medium light" + (!this.config.wrapTitle ? " no-wrap" : "");
        					
        					newsStackItem.innerHTML = "";
        					newsStack.appendChild(newsStackItem);
        				}
        
        				for (s = 0; s < this.newsItems.length-1; s++) {
        					var newsStackItem = document.createElement("li");
        					newsStackItem.className = "newsstack" + s + " bright medium light" + (!this.config.wrapTitle ? " no-wrap" : "");
        					
        					newsStackItem.innerHTML = this.newsItems[this.activeItem + s].title;
        					newsStack.appendChild(newsStackItem);
        				}
        			wrapper.appendChild(newsStack);
        
        		} else {
        			if (this.config.hideLoading) {
        				this.hide();
        			} else {
        				wrapper.innerHTML = this.translate("LOADING");
        				wrapper.className = "small dimmed";
        			}
        		}
        
        	}
        	else {
        //... original content within else {}
        	}	
        	return wrapper;
        },
        
        scheduleUpdateInterval: function() {
        	var self = this;
        // NEW/CHANGED/UPDATED:
        	self.updateDom(self.config.animationSpeed);
        
        	if (this.config.stackNews) {
        		timer = setInterval(function() {
        			self.newsStack();
        		}, this.config.updateInterval);
        	}
        	else {
        		timer = setInterval(function() {
        			self.activeItem++;
        			self.updateDom(self.config.animationSpeed);
        		}, this.config.updateInterval);
        	}
        },
        newsStack: function() {
        	var self = this;
        	Log.info("delete a line");
        	document.getElementById("newsstack").removeChild(document.getElementById("newsstack").children[0]);
        	Log.info(document.getElementById("newsstack").children.length);
        	if (document.getElementById("newsstack").children.length === 0) {
        		Log.info("start over again");
        		self.updateDom(self.config.animationSpeed);
        	}
        },
        

        custom.css:

        ul#newsstack {
            height: 140px; /* stackSize - 1 * 35 (li height) */
            overflow: hidden; /* or you will see all news list items */
            padding-top: 35px;
            transition: padding-top 1s;
        }
        ul#newsstack:empty {
            padding-top: 0px;
        }
        ul#newsstack li {
            height: 35px;
            margin-top: 0px;
            transition: margin-top 1s;
            list-style-type: none;
        }
        
        ul#newsstack li:first-child {
            margin-top: -33px;
        }
        

        Not sure how this would work with several feeds, yet.

        P 1 Reply Last reply Jan 13, 2018, 10:57 PM Reply Quote 0
        • P Offline
          Pade2204 @doubleT
          last edited by Jan 13, 2018, 10:57 PM

          @doubleT
          Thanks for the effort. Its a nice tweak you have made - its better than the original :)

          Yeah I ment 5 (or what you set) news headline from source 1 - maybe a bullit before each line (or a timestamp)

          then you can fade to another source after some seconds you set.

          Im not good to see, where you edit those things you have made? Can you make a dummy guide for me? hehe :)

          Thanks - have a nice weekend.

          1 Reply Last reply Reply Quote 0
          • D Offline
            doubleT Module Developer
            last edited by Jan 14, 2018, 1:03 AM

            @Pade2204 said in Default newsfeed - make list?:

            Im not good to see, where you edit those things you have made? Can you make a dummy guide for me? hehe :)

            Sure, but I’d suggest reading – and learning – about the basics of JavaScripts first, or this could get a bit complicated.

            I worked directly in the default newsfeed module, which I’d absolutely not suggest doing. a) This could break the default module and you have to rebuild the code. b) With the next update, the code will be reset to its original state and your changes are lost.

            Having said that, to experiment with this module, I changed the /MagicMirror/modules/default/newsfeed/newsfeed.js that I opened in an editor. You’ll see the functions I mentioned above. Note that I commented where the original code of a function was left untouched. In the getDom: I put some part of the original code with the else { } part of an if statement.

            EDIT: I made a git repository of the changes I made. You can look at my code here: https://github.com/TTigges/newsstack/blob/master/newsfeed.js

            1 Reply Last reply Reply Quote 1
            • P Offline
              Pade2204
              last edited by Pade2204 Jan 15, 2018, 4:56 PM Jan 15, 2018, 4:55 PM

              I just tried your code, with default setting (copy/paste into newsfeed.js)

              It looks like this when the feed is loading. Then it counts down and show 1 lines less every second? Is that in purpose?

              Feed at startup

              1 Reply Last reply Reply Quote 0
              • D Offline
                doubleT Module Developer
                last edited by Jan 15, 2018, 4:58 PM

                Yes, but you forgot the custom.css.

                1 Reply Last reply Reply Quote 0
                • P Offline
                  Pade2204
                  last edited by Pade2204 Jan 15, 2018, 5:15 PM Jan 15, 2018, 5:10 PM

                  I have the custom.css file in modules/default/newsfeed/
                  :/

                  and tried to name it custom.css and newsfeed.css

                  1 Reply Last reply Reply Quote 0
                  • D Offline
                    doubleT Module Developer
                    last edited by Jan 15, 2018, 5:18 PM

                    The lines are ment for MagicMirror/css/custom.css – just add them.
                    Alternatively, add this function in the module (probably after start: function():

                    getStyles: function() {
                    	return [
                    		this.file('custom.css')
                    	]
                    },
                    
                    P 1 Reply Last reply Jan 15, 2018, 6:48 PM Reply Quote 0
                    • P Offline
                      Pade2204 @doubleT
                      last edited by Jan 15, 2018, 6:48 PM

                      Thanks. This is great. Now it works with .css file.

                      But:

                      It does not show the headers title for instance “CNN” - and no timestamps? Is it possible to add short timestamp before the news headline?

                      These have no effect:
                      showSourceTitle: true,
                      showPublishDate: true,

                      And 1 last thing - Do you control the speed of the sliding somewhere - Or maybe just slide in new entries when you reach max entries?

                      Thanks, man!

                      1 Reply Last reply Reply Quote 0
                      • 1
                      • 2
                      • 1 / 2
                      1 / 2
                      • First post
                        4/14
                        Last post
                      Enjoying MagicMirror? Please consider a donation!
                      MagicMirror created by Michael Teeuw.
                      Forum managed by Sam, technical setup by Karsten.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy