MMM-newsfeedtouch - News so hot you wanna touch it

[Ralf]

@broberg Perfect, works great. The description appear now on top of the screen (module position is bottom_bar), but thats right what i want.
Looks great. Thanks a lot.

[broberg]

@Ralf Glad it works, even though it doesn’t work as I thought it would!
just a question, are you using another browser to display the MM or is it the built in browser that comes with MM?

Since my css code behaves differently for you than it does for me I would really like to know why :D

[Ralf]

@broberg I’m still using the built in browser that comes with MM.
Strange.

[cowboysdude]

Well finally got my touch frame up and running and this module is not working for me…

Where are you supposed to touch to get it to work? It’s not working for me :(

[broberg]

@cowboysdude the headline is what is clickable, are you using the latest version of MM? 2.1.1?

Is it just the newsfeed you can’t click?

[cowboysdude]

@broberg Let me fire it up in a bit and make sure I’m using the correct versions. I just started working on the big mirror again yesterday so it’s likely there is some updating that needs to happen ;)

OK my bad… I should have known better… I built the big mirror software a while ago and just fired it back up yesterday after a couple months… it’s working perfectly!!

Thanks for reminding me to check better next time :)

[number1dan]

@broberg Hi, great module it works well for me. however… After seeing this I though OH MAYBE I WANT A VIDEO TO PLAY WHEN I CLICK ON SOMETHING, so i tried to make a module for it and then it just wouldn’t work. So i sort of fiddled with this one to have 1 hardcoded “headline” which when clicked on, opened an iframe element and played the latest video from a youtube playlist as shown below.

//codechange
                        var title = document.createElement("div");
                        title.className = "bright small regular fed";


                        title.innerHTML = "Zero Punctuation Review";
                        title.addEventListener("click", () => showdesc(this)); //Show description on click
                        wrapper.appendChild(title);


                        //below is the function to show description and hide title
                        function showdesc(thisdesc) {
                                thisdesc.intpause();    //clear interval
                                title.style.display="none";
/*                              var readTimer = setTimeout(function() {hidedesc(thisdesc)}, thisdesc.config.readInterval); //sets timeout for the description
                                description = document.createElement("div");
                                description.className = "infoCenter";
                                description.innerHTML = thisdesc.newsItems[thisdesc.activeItem].description;
                                description.addEventListener("click", () => hidedesc(thisdesc));  //Hide description on click
                                description.addEventListener("click", () => clearTimeout(readTimer)); //Stop timer when clicked so the next title doesn't reload again.
*/

                                description = document.createElement ("iframe");
                                description.className = "vid";
                                description.src = 'https://www.youtube.com/embed/htm+lastest?list=PLAbMhAYRuCUhawCEV2oXZGrienoKTN16X&autoplay=1';
                                description.autoplay = true;
                                description.addEventListener("click", () => hidedesc(thisdesc));  //Hide description on click
                                description.addEventListener("click", () => clearTimeout(readTimer)); //Stop timer when clicked so the next title doesn't reload again.

//                              wr.appendChild(video);







                                wrapper.appendChild(description);


                        };

                        //and to close the description on click and get next title
                        function hidedesc(thisdesc) {
                                thisdesc.activeItem++;
                                thisdesc.intresume();   //resume the interval
                                description.style.display="none";
                        };

//codechange end

Just a Suggestion in case you wanted in the future to incorporate playing the news release video as an option for your module. Sorry for playing with it!

[emlowe]

This module only seems to work properly when used in top_bar or bottom_bar - or something that spans the entire “middle” of the screen.

The description doesn’t work properly when used in top_right or bottom_right, although the rest of the module does work - the description doesn’t work.

It’s possible there is some magic css that would make it work properly.

I’m trying it on a 7" touchscreen, so real estate is limited

-Earle

[broberg]

@emlowe yes, position and size is done with css and do need adjusting when used on smaller layouts. Look at the css code in the module for the class names and copy it to you custom.css and then play around with position and size.

[emlowe]

Just to followup on my CSS, the following should center the content pretty well on most setups - I can’t figure out why I have to manually set the height though, but if I don’t the border doesn’t draw around all the text.

This creates something like a “pop-up” in the middle of your screen for the content, which works pretty well for me.

.infoCenter {  
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%); // This centers the box
  width: 80vw; // set the width to about 80% of the screen
  height: 20vw; // set the height to about 20% of the screen
}