MagicMirror Forum

Johans

@agp42 Ok, thanks for the tip, I’ll checkup the README file.

Johans

@agp42 Would it be possible to have 2 instances in the config file, working independently?

Johans

@veldrovive said in MMM-Page-Selector: A page switcher that can set positions of modules:

pages: {“all”: “some_position”}

Thanks for the info, I should have read the README first. Sorry.

Johans

@veldrovive
Hi, just made a fresh install, and applied your module and MMM-Page-indicator.

Pages are shown, but page indicator and newsfeed module are not on the screen.
When I disbable MMM-Page-Selector, then Newsfeed & MMM-Page-indicator are visisble.

As far as I understand, config is OK

	modules: [
		{
			module: "alert",
			pages: "all",
		},
		{
			disabled: false,
		        module: "MMM-Page-Selector",
		        position: "top_bar",
		        config: {
			        defaultPage: "Page1",
		                displayTitle: true,
			        selectPageNotif: ["SELECT_PAGE"],
		                incrementPageNotif: ["PAGE_UP"],
		                decrementPageNotif: ["PAGE_DOWN"],
   			        autoChange: {
				     	    interval: 100,    // Change page every 100 sec
				            }
		                   }
		},		

		{
			module: "updatenotification",
			position: "top_bar",
			pages: {"Page1": "top_bar"},
		},
		{
			module: "clock",
			position: "top_left",
			pages: {"Page1": "top_left", "Page2": "top_left", "Page3": "top_left", "Page4": "top_left"},

		},
		{
			module: "compliments",
			position: "lower_third",
			pages: {"Page1": "lower_third", "Page2": "lower_third", "Page3": "lower_third", "Page4": "lower_third"},
		},
		{
		        disabled: false,
			module: "MMM-rain-forecast",
			position: "top_right",   // see mirror setting for options
			pages: {"Page1": "top_right"},
			//header: "Regen Voorspelling", 
			config: {   
		                lat: 50.908529,
		                lon: 3.965639,				
				pleaseWait: "Wachten a.u.b",
				noRainText: "Tot %s GEEN regen",
				fillColour: '#0074d9'   // This is a blue color you can also use blue, cyan etc
				}
		},	

		{
			module: "newsfeed",
			position: "bottom_bar",
			pages: "all",
			config: {
				feeds: [
					{
						title: "New York Times",
						url: "http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml"
					}
				],
				showSourceTitle: true,
				showPublishDate: true
			}
		},
		{
			disabled: false,
		        module: "MMM-page-indicator",
		        position: "bottom_bar",
			pages: "all",
		        config: {
		            //pages: 4,  // No need to set this
		        }
		},	
		{
			module: 'MMM-Cursor',
			pages: "all",
		},
	]

Johans

When I run directly in the browser, it’s OK, but thats not the main goal, should run via the MagicMirror.

Johans

@j-e-f-f
No, It doesn’t come back.
I made a new installation on fresh SD card.
All works fine without installing your module, after that it’s not working anymore.

Johans

@johans
I’ll guess something went wrong when I paste the code

{
			disabled: false, 
			module: "MMM-Widget",
	   	        position: "middle_center",
	 		pages: {"Page1": "lower_third"},
			config: {
			widgets: [
		        { //insert your script or html codes here.
		        html:`     
                         
			
			
			JSTAL MIRROR PLAYER
			
			
			   
		        
			  
			
			
			
			
			<div>
			  <h1>Mirror Webradio / MP3 Player</h1>
			</div>
			
			<div>
			  <div>
			     <p>My Radio Stations</p>
				 <img src="http://localhost:8080/modules/MyPlayer/images/JoeFM.jpg" />
				 
			      <br />
				 <img src="https://upload.wikimedia.org/wikipedia/commons/0/09/Qmusiclogo2015red.jpg" />
				 
			      <br />
				 <img src="https://pbs.twimg.com/profile_images/1612540320/FAMILYRADIO_LOGO_WEB_400x400.jpg" />
				 
			      <br />
			    <img src="https://upload.wikimedia.org/wikipedia/commons/3/36/MNM_logo.png" />
				 
			      <br />	   
			     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Radio_2_Logo.svg/1000px-Radio_2_Logo.svg.png" />
				 
			      <br />
			     <img src="https://pbs.twimg.com/profile_images/1476072724/Logo-alta-resolucao-MusicCityGame.jpg" />
				 
			      <br />		
					
					
			        <hr /><p>Select and Play MP3 from Local database folder </p>
			         <br /> <br />
				<i></i>
			        
			    
					 	   
			
			</div></div>
	
			
                        `,    // Ends of Widget - important to set!
		        width: "460px",
		        height: "525px",
		        backgroundColor: "#256d7b"   //"#FFF"
		      },
			]
		  }
		},

Johans

@j-e-f-f installed latest version of your nicely build weather forecast module, but now I see that my personal web player is not working anymore.

All content is displayed on the mirror, but there is no reaction when I press a play button (seems play buttons are disabled)

To show the player on my mirror I’ve abused the widget module.

It shows me 6 radio stations and a selection button for MP3’s on the SD card of the raspberry. (All simple stuff – so far no rocket science)

I’m sure problem is related towards the installation of your weather module, as I did a rebuild on another SD card to try -out.

Removing and re-installing your module or the widget module was no solution so far.

Started mirror in dev mode, but here also I don’t see any problem.

As I read here that you updated this module to use the Nunjucks html templating system, I suspect it has a relation with my html code I’m using in the widget module.

See below code in the config. Perhaps somebody can port this code according the Nunjucks html. (sound lick chinees for me  )

   {
   		disabled: false, 
   		module: "MMM-Widget",
      	        position: "middle_center",
    		pages: {"Page1": "lower_third"},
   		config: {
   		widgets: [
   	        { //insert your script or html codes here.
   	        html:`     
                        
   		
   		
   		JSTAL MIRROR PLAYER
   		
   		
   		   
   	        
   		  
   		
   		
   		
   		
   		<div>
   		  <h1>Mirror Webradio / MP3 Player</h1>
   		</div>
   		
   		<div>
   		  <div>
   		     <p>My Radio Stations</p>
   			 <img src="http://localhost:8080/modules/MyPlayer/images/JoeFM.jpg" />
   			 
   		      <br />
   			 <img src="https://upload.wikimedia.org/wikipedia/commons/0/09/Qmusiclogo2015red.jpg" />
   			 
   		      <br />
   			 <img src="https://pbs.twimg.com/profile_images/1612540320/FAMILYRADIO_LOGO_WEB_400x400.jpg" />
   			 
   		      <br />
   		    <img src="https://upload.wikimedia.org/wikipedia/commons/3/36/MNM_logo.png" />
   			 
   		      <br />	   
   		     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Radio_2_Logo.svg/1000px-Radio_2_Logo.svg.png" />
   			 
   		      <br />
   		     <img src="https://pbs.twimg.com/profile_images/1476072724/Logo-alta-resolucao-MusicCityGame.jpg" />
   			 
   		      <br />		
   				
   				
   		        <hr /><p>Select and Play MP3 from Local database folder </p>
   		         <br /> <br />
   			<i></i>
   		        
   		    
   				 	   
   		
   		</div></div>
   
   		
                       `,    // Ends of Widget - important to set!
   	        width: "460px",
   	        height: "525px",
   	        backgroundColor: "#256d7b"   //"#FFF"
   	      },
   		]
   	  }
   	},

For people interested here the CSS details as well.

/* add here some separate css data */
/* Style the body margin: 0  */
body {
    font-family: Arial;
    margin: auto;
    width: 450px;
    height: 500px;
    border: 3px solid #256d7b;
}

/* Header/logo Title  - color = #1abc9c/#008080  of #256d7b */
.header {
    padding: 5px;
    text-align: center;
    background: #256d7b;
    color: white;
}

/* Increase the font size of the heading */
.header h1 {
    font-size: 20px;
}

/* Main column   color = #fcfcfc or white */
.main {   
    -ms-flex: 60%; /* IE10 */   
    flex: 60%;
    background-color: #fcfcfc;
    padding: 20px;
    text-align: center;
}

/* Draw up a vertical line */
hr.vertical
{
   width: 5px;
   height: 100%; /* or height in PX */
} 

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: .4s;
  transition: .4s;
   border-radius: 34px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2ab934;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(55px);
}
/*------ ADDED CSS ---------*/
.slider:after
{
 content:'OFF';
 color: white;
 display: block;
 position: absolute;
 transform: translate(-50%,-50%);
 top: 50%;
 left: 50%;
 font-size: 10px;
 font-family: Verdana, sans-serif;
}

input:checked + .slider:after
{  
  content:'ON';
}

Maybe there are other ways to embed my player on the mirror, but for now MMM-Widget was the only thing I found to do.

Hope somebody can help me out.

Thx.

Johans

@mykle1 FYI
Meanwhile I found the problem of port 8080, due to some malware on that PC, the proxi settings where modified, only option was to re-install OS. Lucky I had some backup so that didn’t took so long.
Now proxi settings are no longer hi-jacked and I can run MM normally.
Problem solved!

Johans

@mykle1
Thanks for the info, can’t find out who is using port 8080, but I changed in the config to use another port.
Now all is working.

Johans

@Johans

Posts made by Johans