My first cheap £70 attempt :)

TipsyNurse

Firstly, thank you to all of you for your contributions, I learnt a lot reading this forum :)

Got interested in MagicMirror when looking at ways to display ambulance and pharmacy information at work. Unfortunately couldn’t use it there in the end because one of the Chief Nurses didn’t get Linux and kept insisting it was Windows because it had a desktop and so my security analysis was wrong. Ooookay… their loss.

Anyway, thought I would cobble something together with a Pi and old IPS monitor I had at home. I want to do a proper mirror one with a much larger screen and the plug sockets hidden behind as well but thought I would experiment a bit first.

Quite pleased at how it has turned out. It is genuinely useful rather than just being a gimmick. Looking forward to my second!

Photo

alt text

and this is my config

	modules: [
	{
			module: "alert",
		},

{
  module: "MMM-GooglePhotos",
  position: "fullscreen_below",
  config: {
    albumId: ["xxx"], // your album id(s) from result of `auth_and_test.js`
    refreshInterval: 1000*60,  
    scanInterval: 1000*60*10, // too many scans might cause API quota limit also.
    //note(2018-07-29). It is some weird. API documents said temporal image url would live for 1 hour, but it might be broken shorter. So, per 10 min scanning could prevent dead url.

    sort: "random", //'time', 'reverse', 'random'
    showWidth: "100%", // how large the photo will be shown as. (e.g;'100%' for fullscreen)
    showHeight: "100%",
    originalWidthPx: 1920, // original size of loaded image. (related with image quality)
    originalHeightPx: 1080, // Bigger size gives you better quality, but can give you network burden.
    mode: "cover", // "cover" or "contain" 
    //ADDED. "hybrid" : if you set as "hybrid" it will change "cover" and "contain" automatically by aspect ratio.
  }
},
{
			module: 'MMM-GoogleCast',
			position: "bottom_left",
			classes: "default everyone",
		
			config: {
				device: "xxx",
			}
		},

{
    module: 'MMM-Remote-Control'
    // uncomment the following line to show the URL of the remote control on the mirror
     , position: 'bottom_left',
    // you can hide this module afterwards from the remote control itself
    config: {
        customCommand: {},  // Optional, See "Using Custom Commands" below
        customMenu: "custom_menu.json", // Optional, See "Custom Menu Items" below
        showModuleApiMenu: true, // Optional, Enable the Module Controls menu
        apiKey: "",         // Optional, See API/README.md for details
    }
},

		{
			module: "updatenotification",
			position: "top_bar"
		},

{
			module: "calendar",
			header: "Family calendar",
			position: "bottom_left",
			config: {
				calendars: [
					{
						symbol: "calendar-check",
						url: "xxx.ics"
					}
				],
wrapEvents: true,
maxTitleLines: 2,
fadePoint: 0.8,
displaySymbol: false,
dateFormat: "Do MMM",
maximumEntries: 9,


			}
		}, 
		{
			module: "clock",
			position: "top_bar",
config: {
displayType: "analog",
analogShowDate: "false",
analogSize: "590px",
analogFace: "face-003",

}
		}, 

    {
        module: 'MMM-Tado',
        position: 'bottom_left', // This can be any of the regions.
        config: {
            username: 'xxx@', 
            password: 'xxx', 
            updateInterval: 300000
        }
    },


{
  module: "MMM-DarkSkyForecast",
  header: "Weather",
  position: "bottom_right",
  classes: "default everyone",
  disabled: false,
  config: {
    apikey: "xxx",
    latitude: "51.xxxxxx",
    longitude: "-1.xxxxxx",      
    iconset: "1c",
    concise: true,
    forecastLayout: "tiled"
  }
},

{
  module: 'MMM-MyGarbage',
  position: 'bottom_center',
  config: {
          weeksToDisplay: 1,
          limitTo: 99,
          fade: false,
          dateFormat: "'Recycling this week' [This week]",
          fadePoint: 0.25
  }
},
{
		module: 'MMM-Screencast',
		
		config: {
			position: 'center',
			height: 600,
			width: 1000,
		}
        }
	]

};

TipsyNurse

Sorry I can’t work out how to edit the post, this is some strange forum software.

Right way round photo :)

alt text

Mykle1

@TipsyNurse

For an experiment, I would say, it came out rather nicely. Well done.

nobita

@Tipsy
Hello very nice mirror
How to set border and background around your module in mirror

Thanks

TipsyNurse

@nobita in your css/custom.css file

.module {
  background-color:rgba(0,0,0,0.3);
  border-radius:8px;
  padding:8px;
}

You can adjust the 0.3 towards 0 (transparent) or 1 (opaque). Hope that helps :)

TipsyNurse

Oh, also, if you want a “glass” type button you can use box-shadow. I’m never sure which I prefer and tend to swap periodically.

.module {
  background-color:rgba(0,0,0,0.25);
  border-radius:8px;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.16), 0 4px 6px rgba(0,0,0,0.45);
  padding:8px;
}