Default newsfeed - make list?

Pade2204

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.

holotfi2003

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.

doubleT

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.

Pade2204

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

doubleT

@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

Pade2204

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

doubleT

Yes, but you forgot the custom.css.

Pade2204

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

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

doubleT

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')
	]
},

Pade2204

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!