My first cheap £70 attempt :)



  • 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,
    		}
            }
    	]
    
    };
    
    


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

    Right way round photo 🙂

    alt text


  • Project Sponsor Module Developer

    @TipsyNurse

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



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

    Thanks



  • @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 🙂



  • 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;
    }