MagicMirror Forum

Johans

@mrbone66
wow! very neat.
I like it - i’m afraid to show the picture to my wife.
I already hear her saying: “why can’t you make such a nice mirror”.
but yeah, I have my limits …

Johans

@mykle1 thanks for the update.

For next update, can you include nl-translations?
Here’s the data

{
"Distance from Earth's core = ": "Afstand vanaf middelpunt Aarde = ",
"Distance from sun = ": "Afstand vanaf de Zon = ",
"The next full moon is ": "Volgende Volle Maan is ",
"The next new moon is ": "Volgende Nieuwe Maan is ",
"The current moon is ": "De Huidige Maan is ",
"The moon is ": "De Maan is  ",
"% illuminated": " % verlicht",
" days old": " dagen oud",
"New Moon Phase": "Nieuwe Maan Faze",
"Waxing Crescent Moon": "Wassende Maancikkel",
"First Quarter Half Moon": "Eerste kwartier Halve Maan",
"Waxing Gibbous Moon": "Wassende Gibbous Maan",
"Full Moon": "Volle Maan",
"Waning Gibbous Moon": "Afnemende Gibbous Maan",
"Third Quarter Half Moon": "Derde kwartie Halve Maan",
"Waning Crescent Moon": "Afnemende Wassende Maan",
"When the Moon hits your eye . . .": "Wanneer de Maan zichtbaar is . . ."
}

Johans

@Nystro0m
thanks, learned again something new, on how to remotely connect to the MagicMirror.
Meanwhile problem is solved.

removed the line 400.
these chars created an error ==========

Johans

Nice mirror!
Can you share the module for the digital photo/wall display feeling ?

Johans

@pr05t3n You have to add your language reference also in the MMM-Lunartic.js file.
See example below. That’s how I did.

@mykle1 - correct me if i’m wrong!


    getTranslations: function() {
        return {
            en: "translations/en.json",
            fr: "translations/fr.json",
            es: "translations/es.json",
            de: "translations/de.json",
            nl: "translations/nl.json",
            sv: "translations/sv.json"
                };
    },

Johans

@cowboysdude
works like a charm now.
Thank you very much for this and all the great work you are doing.
much appriciated !!

Johans

Johans

@cowboysdude

OK, than I don’t need to worry.

Johans

@cowboysdude
I did, but got message that topic where old and that is was better to create new topic - so i did.
anyhow i’ll post it there as well

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

Best posts made by Johans

Latest posts made by Johans