Change newsfeed title to image/logo?

StrIIker

@cyberphox said in Change newsfeed title to image/logo?:

Ok so to remove the old one and install this, let’s review the steps! :)
Anyone…??

Sure! I assume this is what you want…

Refer to: https://github.com/justjim1220/MMM-NewsFeedTicker for the full install details etc.

Install new news ticker:
Log into your Raspberry Pi as pi and:

cd ~/MagicMirror/modules
git clone https://github.com/justjim1220/MMM-NewsFeedTicker.git

This installs the requisite module into the correct directory.

Remove old news and enable new news
The nice thing with this is that enabling or disabling modules is done simply by adding or deleting entries in the config.js file. The only catch is that it’s touchy with proper syntax so make sure you aren’t missing something simple (like a trailing comma or a misplaced ‘}’ or ‘{’. I suggest backing up your current config.js so that you can revert to it if needed. This is generally a good policy when modifying any config files. To check your config for errors, reference the following article:
https://forum.magicmirror.builders/topic/5399/how-to-check-your-config-for-errors-for-absolute-beginners/2
So, onto making that backup copy…

cd ~/MagicMirror/config
cp config.js config.bak01

Increment the trailing number if you want to retain multiple backup copies. If you make a mistake and want to start over, copy the backup to overwrite the current version of config.js…

cp config.bak01 config.js

Now edit the config file…

nano config.js

To disable the default news reader, delete the following: (you may have additional feeds if you added anything).

{
			"module": "newsfeed",
			"position": "bottom_bar",
			"config": {
				"feeds": [
					{
						"title": "New York Times",
						"url": "http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml"
					},
				],
				"showSourceTitle": true,
				"showPublishDate": true
			}
		},

Now to add the new feed, add the following somewhere in the config (maybe where the old new feed was?) You can customize this by adding or removing news sources based upon what interests you.

{
	disabled: false,
	module: "MMM-NewsFeedTicker",
	position: "bottom_bar",
	//classes: "day_scheduler",
	config: {
	    feeds: [
		{
			title: "New York Times",
			url: "http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml",
			encoding: "UTF-8", //ISO-8859-1
			className: "myClass",
			defaultLogo : ""
		},
		{
			title: "USA Today",
			url: "http://rssfeeds.usatoday.com/UsatodaycomNation-TopStories",
			encoding: "UTF-8", //ISO-8859-1
			className: "myClass",
			defaultLogo : ""
		},
		{
			title: "BBC World News",
			url: "http://feeds.bbci.co.uk/news/world/rss.xml#",
			encoding: "UTF-8", //ISO-8859-1
			className: "myClass",
			defaultLogo : ""
		}
    	    ]
	},

Now you can reload the MagicMirror via Ctrl-R (I find that the system automatically reloads the module once it detects a changed config.js). You should see the new news feed at the bottom.

cyberphox

Got lots of config errors copying that…weird…

Checking file… /home/pi/MagicMirror/config/config.js
Line 192 col 1 Expected ‘}’ to match ‘{’ from line 160 and instead saw ‘]’.
Line 193 col 2 Expected ‘]’ to match ‘[’ from line 28 and instead saw ‘}’.
Line 193 col 3 Expected ‘}’ to match ‘{’ from line 11 and instead saw ‘;’.
Line 193 col 4 Missing semicolon.

Had to add an extra close bracket }

StrIIker

@cyberphox

Yeah, I have spent a lot of time trying to figure out where I was missing something… Generally it was a missing comma at the end of a config line which had additional content following it or misplacing the { or }.
Also, the modules are loaded in order as they appear in the config so if you want a couple of things in the top left (denoted by the location parameter “position”: “top_left”, the first module will be the top left and the second module read would be just below that.

cyberphox

I have it working now after adding the extra bracket, but as stated above its’ a little big for portrait mode…it’s running a bit sluggish but i expect thats more of a raspberry pi issue…changing the font % in custom.css didnt seem to shrink it any for me

justjim1220

@StrIIker
@cyberphox

My Apologies for the issues you are having, but, I am looking over the code to make these fixes and I am not seeing any of the problems you are describing…

Any way you could show me the specific places these errors are occurring?

I ran it through an error checker and it’s not finding any errors…

cyberphox

@justjim1220 My apologies to you! The module is working just fine for me now…took a little tinkering but I got it.

The only issue I’m having now is re-sizing and maybe getting it to run a little smoother (again that might be a limitation of the Pi) Can’t seem to get a full headline in before it switches…but I’ll mess around with it

Great module…thanks for your work

Mykle1

@cyberphox said in Change newsfeed title to image/logo?:

again that might be a limitation of the Pi

It is

justjim1220

@cyberphox

Thanks!
Glad you like it.

What did you have to tinker with to get it working?

cyberphox

@mykle1 I have a Synology NAS running Docker…I really need to learn how to install this all in a docker package and edit it and run it from the Server…

cyberphox

@justjim1220 Literally I was just missing a } after copying and pasting somehow…

StrIIker

@justjim1220 said in Change newsfeed title to image/logo?:

@striiker

Add this to custom.css, Make the changes you want in it…
.MMM-NewsFeedTicker {
    height: 100px;
    background-color: maroon;
    opacity: 1.0;
}

.MMM-NewsFeedTicker .headline {
    padding-top: 15px;
    font-size: 100%;
}

.MMM-NewsFeedTicker .image {
  height: 100px;
  background-color: #FFF;
}
Let me know if you have any problems with this.

I am glad that you like it! :smiling_face_with_sunglasses:

I added the lines to the custom.css and adjusted as follows. I still see the scrolling text as full size / cut off (screenshot of section included…

.MMM-NewsFeedTicker {
    height: 50px;
    background-color: maroon;
    opacity: 0.5;
}

.MMM-NewsFeedTicker .headline {
    padding-top: 15px;
    font-size: 50%;
}

.MMM-NewsFeedTicker .image {
  height: 50px;
  background-color: #FFF;
}

0_1540509375376_Screen Shot 2018-10-25 at 7.14.32 PM.png

StrIIker

@justjim1220 said in Change newsfeed title to image/logo?:

@StrIIker
@cyberphox

My Apologies for the issues you are having, but, I am looking over the code to make these fixes and I am not seeing any of the problems you are describing…

Any way you could show me the specific places these errors are occurring?

I ran it through an error checker and it’s not finding any errors…

Th example config on your git page is missing a trailing ‘}’ This is why people have had issues adding to their config.js

cyberphox

@striiker

Same issue here

justjim1220

@striiker

Another apology…

When I was working with this module I had the font set to xlarge or large in the MMM-NewsFeedTicker.js file.

It makes it easier for these old eyes to see changes,

So, in the following section of the js file…

 var headline = document.createElement("span");
                headline.setAttribute("style", "padding-bottom:25px");
                headline.className = "bold xlarge bright";
                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;
                tickerBody.appendChild(headline);

Change the ‘xlarge’ to small

cyberphox

@striiker That’s the config issue i was having and solved it with the }

justjim1220

@cyberphox See last post…

justjim1220

@cyberphox
@StrIIker

Thanks for the heads-up on the error. I have it fixed now.
Much Appreciated!!! :smiling_face_with_sunglasses:

cyberphox

@justjim1220 That definitely made it smaller! Thanks!

justjim1220

@cyberphox

Your very welcome!

StrIIker

@justjim1220 said in Change newsfeed title to image/logo?:

@striiker

Another apology…

When I was working with this module I had the font set to xlarge or large in the MMM-NewsFeedTicker.js file.

It makes it easier for these old eyes to see changes,

So, in the following section of the js file…
 var headline = document.createElement("span");
                headline.setAttribute("style", "padding-bottom:25px");
                headline.className = "bold xlarge bright";
                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;
                tickerBody.appendChild(headline);
Change the ‘xlarge’ to small

This has resolved the issue I had. I tried small and it was a little too small so I set that value to medium and it’s perfect for me. Thank you for pointing this out and providing the solution! Now this will stream my news.