MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    1. Home
    2. synint
    3. Posts
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.
    S
    Offline
    • Profile
    • Following 0
    • Followers 0
    • Topics 5
    • Posts 22
    • Groups 1

    Posts

    Recent Best Controversial
    • RE: Trying to create a white background with black text to the clock module title block.

      Did not attach image on past post.

      @synint 20240510_200104-01.jpeg

      posted in Development
      S
      synint
    • RE: Trying to create a white background with black text to the clock module title block.

      @sdetweil

      Hi Sam,

      It has taken me some time but I have now managed to get white boxes around the module text. The white box was created adding additional lines of code to custom.css file see code below. However I was unable to change the text colour in the white boxes so ended up changing the root section of the main.css file see code below. I know you said do not change the root code but could not find any other way of changing font colour.

      The one thing I would still like to do is remove image and date/time at the bottom right hand corner.

      Cheers,
      John

      Custom CSS Code

      /* Custom CSS Sample
       *
       * Change color and fonts here.
       *
       * Beware that properties cannot be unitless, so for example write '--gap-body: 0px;' instead of just '--gap-body: 0;'
       */
      
      /* Uncomment and adjust accordingly if you want to import another font from the google-fonts-api: */
      /* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap'); */
      
      
      .clock {
         background-color:rgba(255,255,255,0.5);
         border-radius:8px;
         padding:8px;
      }
      .clock .time{
       	color: black;
      }
      
      
       .MMM-OpenmapWeather {
         background-color:rgba(255,255,255,0.5);
         border-radius:8px;
         padding:8px;
      }
      
      .calendar {
         background-color:rgba(255,255,255,0.5);
         border-radius:8px;
         padding:8px;
      }
      
      .newsfeed {
         background-color:rgba(255,255,255,0.5);
         border-radius:8px;
         padding:8px;
      
      }
      .newsfeed .module-content{
         color: black;
         
      }
      

      main.css file code

      :root {
        --color-text: #OOOOOO;
        --color-text-dimmed: #OOOOOO;
        --color-text-bright: #OOOOOO;
        --color-background: #000;
        --font-primary: "Roboto Condensed";
        --font-secondary: "Roboto";
        --font-size: 20px;
        --font-size-xsmall: 0.75rem;
        --font-size-small: 1rem;
        --font-size-medium: 1.5rem;
        --font-size-large: 3.25rem;
        --font-size-xlarge: 3.75rem;
        --gap-body-top: 60px;
        --gap-body-right: 60px;
        --gap-body-bottom: 60px;
        --gap-body-left: 60px;
        --gap-modules: 30px;
      }
      
      

      ![0_1715368462168_20240510_200104-01.jpeg](Uploading 34%)

      posted in Development
      S
      synint
    • RE: Trying to create a white background with black text to the clock module title block.

      @sdetweil

      Hi Sam,

      Thank you for the link and I am going to try and sort the style issue over the weekend.

      I will let you know how I get on.

      Cheers,
      John

      posted in Development
      S
      synint
    • RE: Trying to create a white background with black text to the clock module title block.

      @sdetweil

      Hi Sam,

      Thank you and based on your comments the clock is now working correctly.

      I have 3 other modules I am trying to apply the same styling and using the CSS Customer file as detailed below I am getting the following visual appearance.

      clock - Working
      calendar - White box appears but text is also white
      MMM-OpenmapWeather - No change to appearance
      newsfeed - No change to appearance

      /* Custom CSS Sample
       *
       * Change color and fonts here.
       *
       * Beware that properties cannot be unitless, so for example write '--gap-body: 0px;' instead of just '--gap-body: 0;'
       */
      
      /* Uncomment and adjust accordingly if you want to import another font from the google-fonts-api: */
      /* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap'); */
      
      
      .clock {
         background-color:white;
         border-radius:8px;
         padding:8px;
      }
      .clock .time, .date{
       	color: black;
      }
      
      .calendar {
         background-color:white;
         border-radius:8px;
         padding:8px;
      }
      .calendar .calendar-check{
       	color: black;
      
      .MMM-OpenmapWeather {
         background-color:white;
         border-radius:8px;
         padding:8px;
      }
      .MMM-OpenmapWeather {
       	color: black;
      }
      
      .newsfeed {
         background-color:white;
         border-radius:8px;
         padding:8px;
      }
      .newsfeed {
       	color: black;
      }
      

      Kind regards,
      John

      posted in Development
      S
      synint
    • RE: Trying to create a white background with black text to the clock module title block.

      @sdetweil

      Hi Sam,

      I thought it would be easier if I showed an image of my MagicMirror screen and explain what I mean.

      As you can see the clock text top left of the image covers the image and when the image has a light background you can not see/read the text easily. So I would like to make the background of the text white with say 50% opacity and the text black. I have also added below the last CSS.Custom file but still not showing white background.

      20240501_183629-02.jpeg

      CSS Custom file

      /* Custom CSS Sample
       *
       * Change color and fonts here.
       *
       * Beware that properties cannot be unitless, so for example write '--gap-body: 0px;' instead of just '--gap-body: 0;'
       */
      
      /* Uncomment and adjust accordingly if you want to import another font from the google-fonts-api: */
      /* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap'); */
      
      
      }
      .module.clock (
         background-color:rgba(255,255,255,0.5);
         border-radius:8px;
         padding:8px;
      )
      )
      

      Cheers,
      John

      posted in Development
      S
      synint
    • RE: Trying to create a white background with black text to the clock module title block.

      @sdetweil

      His Sam applied the changes as detailed below but it still has not added a white background,

      /* Custom CSS Sample
       *
       * Change color and fonts here.
       *
       * Beware that properties cannot be unitless, so for example write '--gap-body: 0px;' instead of just '--gap-body: 0;'
       */
      
      /* Uncomment and adjust accordingly if you want to import another font from the google-fonts-api: */
      /* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap'); */
      
      :root {
        --color-text: #000;
        --color-text-dimmed: #000;
        --color-text-bright: #000;
        --color-background: black;
      
        --font-primary: "Roboto Condensed";
        --font-secondary: "Roboto";
      
        --font-size: 20px;
        --font-size-small: 0.75rem;
      
        --gap-body-top: 60px;
        --gap-body-right: 60px;
        --gap-body-bottom: 60px;
        --gap-body-left: 60px;
      
        --gap-modules: 30px;
       
      .clock {
         background-color:white;
         border-radius:8px;
         padding:8px;
      }
      .clock .time{
       	color: black;
      }
      
      posted in Development
      S
      synint
    • Trying to create a white background with black text to the clock module title block.

      I am trying to create a white background with black text to the clock module title block.

      The custom CSS file I am using (see below) does not seem to effect the clock title block and all I am getting is white text and no white background. Any help would be appreciated.

      Custom CSS File

      /* Custom CSS Sample
       *
       * Change color and fonts here.
       *
       * Beware that properties cannot be unitless, so for example write '--gap-body: 0px;' instead of just '--gap-body: 0;'
       */
      
      /* Uncomment and adjust accordingly if you want to import another font from the google-fonts-api: */
      /* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap'); */
      
      :root {
        --color-text: #000;
        --color-text-dimmed: #000;
        --color-text-bright: #000;
        --color-background: black;
      
        --font-primary: "Roboto Condensed";
        --font-secondary: "Roboto";
      
        --font-size: 20px;
        --font-size-small: 0.75rem;
      
        --gap-body-top: 60px;
        --gap-body-right: 60px;
        --gap-body-bottom: 60px;
        --gap-body-left: 60px;
      
        --gap-modules: 30px;
      }
      .module.clock (
         background-color:rgba(255,255,255,0.5);
         border-radius:8px;
         padding:8px;
      )
      )
      
      posted in Development
      S
      synint
    • RE: Googlr Photos not syncing with MagicMirror

      @synint

      RESOLVED

      Hi Sam, I have resolved it and thank you, thank you and thank you it was only through your guidance and help that made me look deeper to resolve the issue.

      SOLUTION

      In a YouTube video I had seen it advised setting the minWidth 1366 and maxHeight to 768 this is the resolution of the TV I am using. Looking at a post on Git hub some one said change the minWidth and maxHeight to null and it does not matter what size your images are (see config file below) and after reboot everything works as it should.

      Cheers,
      John

      {
      				module: "MMM-GooglePhotos",
      				position: "fullscreen_below",
      				
      				config: {
      				albums: ["MagicMirror2024"], // Set your album name. like ["My wedding", "family share", "Travle to Paris"]
      				updateInterval: 15 * 800, // minimum 10 seconds.
      				sort: "random", // "old", "random"
      				uploadAlbum: null, // Only album created by `create_uploadable_album.js`.
      				condition: {
      				fromDate: null, // Or "2018-03", RFC ... format available
      				toDate: null, // Or "2019-12-25",
      				minWidth: null, // Or 400
      				maxWidth: null, // Or 8000
      				minHeight: null, // Or 400
      				maxHeight: null, // Or 8000
      				minWHRatio: null,
      				maxWHRatio: null,
      				// WHRatio = Width/Height ratio ( ==1 : Squared Photo,   < 1 : Portraited Photo, > 1 : Landscaped Photo)
      				},
      				showWidth: 800, // These values will be used for quality of downloaded photos to show. real size to show in your MagicMirror region is recommended.
      				showHeight: 1200,
      				timeFormat: "YYYY/MM/DD HH:mm", // Or `relative` can be used.
      				debug: true,
        }
      },
      
      posted in Troubleshooting
      S
      synint
    • RE: Googlr Photos not syncing with MagicMirror

      @sdetweil

      Hi Sam, I have changed the reference to albums as detailed in your response above e.g. albums: [“MasterJH”], and still have the same issue of only two images showing.

      I have now deleted MasterJH on Google Photos and and created a MagicMirror2024 folder see Config file below and when I run MagicMirror it still show the two images from the original folder even after I have deleted the folder. I am thinking may be the next step would be to rebuild MagicMirror on a new SD card and see if I cam run it without the errors. However, any other suggestions would be appreciated as I feel I am so close to getting MajgicMirror up and running.

      Latest Config file

      {
      				module: "MMM-GooglePhotos",
      				position: "fullscreen_below",
      				
      				config: {
      				albums: ["MagicMirror2024"], // Set your album name. like ["My wedding", "family share", "Travle to Paris"]
      				updateInterval: 10 * 800, // minimum 10 seconds.
      				sort: "new", // "old", "random"
      				uploadAlbum: null, // Only album created by `create_uploadable_album.js`.
      				condition: {
      				fromDate: null, // Or "2018-03", RFC ... format available
      				toDate: null, // Or "2019-12-25",
      				minWidth: 1366, // Or 400
      				maxWidth: 1366, // Or 8000
      				minHeight: 768, // Or 400
      				maxHeight: 768, // Or 8000
      				minWHRatio: null,
      				maxWHRatio: null,
      				// WHRatio = Width/Height ratio ( ==1 : Squared Photo,   < 1 : Portraited Photo, > 1 : Landscaped Photo)
      				},
      				showWidth: 800, // These values will be used for quality of downloaded photos to show. real size to show in your MagicMirror region is recommended.
      				showHeight: 1200,
      				timeFormat: "YYYY/MM/DD HH:mm", // Or `relative` can be used.
        }
      },
      
      posted in Troubleshooting
      S
      synint
    • RE: Googlr Photos not syncing with MagicMirror

      @sdetweil Hi Sam,

      I have removed the trailing comma and has made no difference.

      Entered the following text in terminal and got the following message:

      synint@raspberrypi:~ $ f running pm2 to auto launch, then
      pm2 logs --lines=50
      bash: f: command not found
      bash: pm2: command not found

      Entered the following text in terminal and Magic Mirror started but only showing 2 images

      pm2 stop all
      cd ~/MagicMirror
      npm start

      The following is the text he terminal returned after entering the above text. I have also noticed that he Google News Feed is repeating the same two items.

      10.5.0; pm2: 
      ### OTHER:    timeZone: Europe/London; ELECTRON_ENABLE_GPU: undefined 
      [2024-04-29 19:28:18.876] [INFO]  Initialization complete! 
      [2024-04-29 19:28:18.877] [INFO]  Start first scanning. 
      [2024-04-29 19:28:18.880] [INFO]  Start Album scanning 
      [2024-04-29 19:28:18.883] [INFO]  Getting album list 
      [2024-04-29 19:28:19.725] [INFO]  Newsfeed-Fetcher: Broadcasting 37 items. 
      [2024-04-29 19:28:20.767] [WARN]  Can't find "M" in your album list. 
      [2024-04-29 19:28:20.769] [WARN]  Can't find "a" in your album list. 
      [2024-04-29 19:28:20.770] [WARN]  Can't find "s" in your album list. 
      [2024-04-29 19:28:20.772] [WARN]  Can't find "t" in your album list. 
      [2024-04-29 19:28:20.773] [WARN]  Can't find "e" in your album list. 
      [2024-04-29 19:28:20.775] [WARN]  Can't find "r" in your album list. 
      [2024-04-29 19:28:20.776] [WARN]  Can't find "J" in your album list. 
      [2024-04-29 19:28:20.778] [WARN]  Can't find "H" in your album list. 
      [2024-04-29 19:28:20.798] [INFO]  Finish Album scanning. Properly scanned : 0 
      [2024-04-29 19:28:20.809] [INFO]  Albums:  
      [2024-04-29 19:28:20.814] [WARN]  There is no album to get photos. 
      [2024-04-29 19:28:20.821] [INFO]  Next scan will be at 2024-04-29T19:23:18.879Z 
      [2024-04-29 19:28:25.332] [INFO]  Calendar-Fetcher: Broadcasting 130 events from https://calendar.google.com/calendar/ical/john%40totrain.co.uk/public/basic.ics. 
      [2024-04-29 19:28:31.192] [INFO]  Used last pic in list 
      [3011:0429/192844.418749:ERROR:atom_cache.cc(229)] Add WM_CHANGE_STATE to kAtomsToCache
      [2024-04-29 19:28:52.172] [INFO]  Used last pic in list 
      [2024-04-29 19:29:12.169] [INFO]  Used last pic in list 
      [2024-04-29 19:29:32.167] [INFO]  Used last pic in list 
      [2024-04-29 19:30:06.212] [INFO]  Used last pic in list 
      
      
      
      
      posted in Troubleshooting
      S
      synint
    • RE: Googlr Photos not syncing with MagicMirror

      @sdetweil Hi Sam,

      I am unclear where to put or do with the following code:

      f running pm2 to auto launch, then
      pm2 logs --lines=xxx
      xxx is a number, try 50 but
      you may need more, say 100
      
      or
      
      pm2 stop all
      cd ~/MagicMirror
      npm start
      

      I am also getting the following error message “Can’t find “MasterJH,” in your album list.” see text from terminal after launching Magic Mirror. The odd thing is it is showing 2 images from the MasterJH folder.

      [2024-04-29 16:42:45.933] [LOG]   Create new calendarfetcher for url: https://ics.calendarlabs.com/75/15394d28/UK_Holidays.ics - Interval: 604800000 
      [2024-04-29 16:42:46.354] [LOG]   Create new calendarfetcher for url: https://calendar.google.com/calendar/ical/john%40totrain.co.uk/public/basic.ics - Interval: 3600000 
      [2024-04-29 16:42:46.485] [LOG]   Create new newsfetcher for url: https://news.google.com/rss - Interval: 300000 
      [2024-04-29 16:42:46.496] [INFO]  Starting Initialization 
      [2024-04-29 16:42:48.141] [INFO]  Calendar-Fetcher: Broadcasting 9 events from https://ics.calendarlabs.com/75/15394d28/UK_Holidays.ics. 
      [2024-04-29 16:42:49.104] [INFO]  Newsfeed-Fetcher: Broadcasting 38 items. 
      [2024-04-29 16:42:49.139] [INFO]  Initialization complete! 
      [2024-04-29 16:42:49.140] [INFO]  Start first scanning. 
      [2024-04-29 16:42:49.144] [INFO]  Start Album scanning 
      [2024-04-29 16:42:49.147] [INFO]  Getting album list 
      [2024-04-29 16:42:51.099] [WARN]  Can't find "MasterJH," in your album list. 
      [2024-04-29 16:42:51.109] [INFO]  Finish Album scanning. Properly scanned : 0 
      [2024-04-29 16:42:51.111] [INFO]  Albums:  
      [2024-04-29 16:42:51.116] [WARN]  There is no album to get photos. 
      [2024-04-29 16:42:51.123] [INFO]  Next scan will be at 2024-04-29T16:37:49.143Z 
      [2024-04-29 16:42:57.143] [INFO]  Calendar-Fetcher: Broadcasting 130 events from https://calendar.google.com/calendar/ical/john%40totrain.co.uk/public/basic.ics. 
      [2024-04-29 16:43:02.020] [INFO]  Used last pic in list 
      [6158:0429/164315.992073:ERROR:atom_cache.cc(229)] Add WM_CHANGE_STATE to kAtomsToCache
      [2024-04-29 16:43:21.191] [INFO]  Used last pic in list 
      
      
      posted in Troubleshooting
      S
      synint
    • RE: Googlr Photos not syncing with MagicMirror

      @sdetweil Hi Sam GP Config file I am using below.

      {
      				module: "MMM-GooglePhotos",
      				position: "fullscreen_below",
      				
      				config: {
      				albums: ["MasterJH,"], // Set your album name. like ["My wedding", "family share", "Travle to Paris"]
      				updateInterval: 10 * 800, // minimum 10 seconds.
      				sort: "new", // "old", "random"
      				uploadAlbum: null, // Only album created by `create_uploadable_album.js`.
      				condition: {
      				fromDate: null, // Or "2018-03", RFC ... format available
      				toDate: null, // Or "2019-12-25",
      				minWidth: 1366, // Or 400
      				maxWidth: 1366, // Or 8000
      				minHeight: 768, // Or 400
      				maxHeight: 768, // Or 8000
      				minWHRatio: null,
      				maxWHRatio: null,
      				// WHRatio = Width/Height ratio ( ==1 : Squared Photo,   < 1 : Portraited Photo, > 1 : Landscaped Photo)
      				},
      				showWidth: 800, // These values will be used for quality of downloaded photos to show. real size to show in your MagicMirror region is recommended.
      				showHeight: 1200,
      				timeFormat: "YYYY/MM/DD HH:mm", // Or `relative` can be used.
        }
      },
      		
      
      posted in Troubleshooting
      S
      synint
    • RE: Positioning Google Photo Module

      @sdetweil Sorry Sam should have mentioned it in the last post. I set the maxWidth and maxHeight to the mointor size which is a TV e.g. 1366px x 768px. I also changed the postion of the moduler to Fullscreen_below and re booted. I do not know if this helped but reduced my images size to less than 1366px x 768px. Does not look exactly as I originally envisaged but looks good enough. I did not chane the CSS file settings as this is beyond my knowledge but afeter looking athe CSS settings realised by changing them you can get it to look exactly how you want it. Cheers, John

      posted in Troubleshooting
      S
      synint
    • Googlr Photos not syncing with MagicMirror

      Just when you think you have cracked it then there is another hurdle. I have recently got my MagicMirror up amd running and addedsome more photos to my Google Photos folder (original No. of photos was two to test it) but the added photos are not syncing with MagicMirror. I have rebooted and shut down the Raspberry Pi but then when I re start the Raspberry Pi the photos are still not syncing with MagicMirror. Does anybody know how to resolve this issue.

      posted in Troubleshooting
      S
      synint
    • RE: Positioning Google Photo Module

      @sdetweil Hi Sam I now have a MagicMirror that works and would not have been possibe without your support and help which I would like to thank you for.

      posted in Troubleshooting
      S
      synint
    • RE: Positioning Google Photo Module

      @sdetweil

      Apologies for my lack of knowledge. I have commented out sizes vales using // but did not resolve the situation. I am using Geany text editor to amend the config file but but do not see a button that looks like </>. The only CSS file I can find looks like this:

      :root {
        --color-text: #999;
        --color-text-dimmed: #666;
        --color-text-bright: #fff;
        --color-background: #000;
        --font-primary: "Roboto Condensed";
        --font-secondary: "Roboto";
        --font-size: 20px;
        --font-size-xsmall: 0.75rem;
        --font-size-small: 1rem;
        --font-size-medium: 1.5rem;
        --font-size-large: 3.25rem;
        --font-size-xlarge: 3.75rem;
        --gap-body-top: 60px;
        --gap-body-right: 60px;
        --gap-body-bottom: 60px;
        --gap-body-left: 60px;
        --gap-modules: 30px;
      }
      
      html {
        cursor: none;
        overflow: hidden;
        background: var(--color-background);
        user-select: none;
        font-size: var(--font-size);
      }
      
      ::-webkit-scrollbar {
        display: none;
      }
      
      body {
        margin: var(--gap-body-top) var(--gap-body-right) var(--gap-body-bottom) var(--gap-body-left);
        position: absolute;
        height: calc(100% - var(--gap-body-top) - var(--gap-body-bottom));
        width: calc(100% - var(--gap-body-right) - var(--gap-body-left));
        background: var(--color-background);
        color: var(--color-text);
        font-family: var(--font-primary), sans-serif;
        font-weight: 400;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
      }
      
      /**
       * Default styles.
       */
      
      .dimmed {
        color: var(--color-text-dimmed);
      }
      
      .normal {
        color: var(--color-text);
      }
      
      .bright {
        color: var(--color-text-bright);
      }
      
      .xsmall {
        font-size: var(--font-size-xsmall);
        line-height: 1.275;
      }
      
      .small {
        font-size: var(--font-size-small);
        line-height: 1.25;
      }
      
      .medium {
        font-size: var(--font-size-medium);
        line-height: 1.225;
      }
      
      .large {
        font-size: var(--font-size-large);
        line-height: 1;
      }
      
      .xlarge {
        font-size: var(--font-size-xlarge);
        line-height: 1;
        letter-spacing: -3px;
      }
      
      .thin {
        font-family: var(--font-secondary), sans-serif;
        font-weight: 100;
      }
      
      .light {
        font-family: var(--font-primary), sans-serif;
        font-weight: 300;
      }
      
      .regular {
        font-family: var(--font-primary), sans-serif;
        font-weight: 400;
      }
      
      .bold {
        font-family: var(--font-primary), sans-serif;
        font-weight: 700;
      }
      
      .align-right {
        text-align: right;
      }
      
      .align-left {
        text-align: left;
      }
      
      header {
        text-transform: uppercase;
        font-size: var(--font-size-xsmall);
        font-family: var(--font-primary), Arial, Helvetica, sans-serif;
        font-weight: 400;
        border-bottom: 1px solid var(--color-text-dimmed);
        line-height: 15px;
        padding-bottom: 5px;
        margin-bottom: 10px;
        color: var(--color-text);
      }
      
      sup {
        font-size: 50%;
        line-height: 50%;
      }
      
      /**
       * Module styles.
       */
      
      .module {
        margin-bottom: var(--gap-modules);
      }
      
      .module.hidden {
        pointer-events: none;
      }
      
      .module:not(.hidden) {
        pointer-events: auto;
      }
      
      .region.bottom .module {
        margin-top: var(--gap-modules);
        margin-bottom: 0;
      }
      
      .no-wrap {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .pre-line {
        white-space: pre-line;
      }
      
      /**
       * Region Definitions.
       */
      
      .region {
        position: absolute;
      }
      
      .region.fullscreen {
        position: absolute;
        inset: calc(-1 * var(--gap-body-top)) calc(-1 * var(--gap-body-right)) calc(-1 * var(--gap-body-bottom)) calc(-1 * var(--gap-body-left));
        pointer-events: none;
      }
      
      .region.right {
        right: 0;
        text-align: right;
      }
      
      .region.top {
        top: 0;
      }
      
      .region.top.center,
      .region.bottom.center {
        left: 50%;
        transform: translateX(-50%);
      }
      
      .region.top.right,
      .region.top.left,
      .region.top.center {
        top: 100%;
      }
      
      .region.bottom {
        bottom: 0;
      }
      
      .region.bottom.right,
      .region.bottom.center,
      .region.bottom.left {
        bottom: 100%;
      }
      
      .region.bar {
        width: 100%;
        text-align: center;
      }
      
      .region.third,
      .region.middle.center {
        width: 100%;
        text-align: center;
        transform: translateY(-50%);
      }
      
      .region.upper.third {
        top: 33%;
      }
      
      .region.middle.center {
        top: 50%;
      }
      
      .region.lower.third {
        top: 66%;
      }
      
      .region.left {
        text-align: left;
      }
      
      .region table {
        width: 100%;
        border-spacing: 0;
        border-collapse: separate;
      }
      
      posted in Troubleshooting
      S
      synint
    • Positioning Google Photo Module

      I have managed to set up Google Photos on my MagicMirror but I am having difficulty positioning the photos below the three items located on the top bar e.g Clock, Google Calendar and Weather. My preference would be to have the photos in the middle of the MagicMirror

      You can see below the code in the Config file I am using and I have also include a image of how the MagicMirror crrently looks. I am thinking it may have something to do with image sized in the Google Album.

      Any help or guidance would be appreciated.

      Cheers,
      John

      {
      				module: "MMM-GooglePhotos",
      				position: "middle_center",
      				config: {
      				albums: ["Master"], // Set your album name. like ["My wedding", "family share", "Travle to Paris"]
      				updateInterval: 10 * 10, // minimum 10 seconds.
      				sort: "new", // "old", "random"
      				uploadAlbum: null, // Only album created by `create_uploadable_album.js`.
      				condition: {
      				fromDate: null, // Or "2018-03", RFC ... format available
      				toDate: null, // Or "2019-12-25",
      				minWidth: 800, // Or 400
      				maxWidth: 2500, // Or 8000
      				minHeight: 400, // Or 400
      				maxHeight: 800, // Or 8000
      				minWHRatio: null,
      				maxWHRatio: null,
      				// WHRatio = Width/Height ratio ( ==1 : Squared Photo,   < 1 : Portraited Photo, > 1 : Landscaped Photo)
      				},
      				showWidth: 800, // These values will be used for quality of downloaded photos to show. real size to show in your MagicMirror region is recommended.
      				showHeight: 1200,
      				timeFormat: "YYYY/MM/DD HH:mm", // Or `relative` can be used.
        }
      },
      		
      	]
      	
      };
      

      20240422_105929 (2)-01.jpeg

      This is the image I am trying to post:

      20240422_105929 (2)-01.jpeg

      posted in Troubleshooting
      S
      synint
    • RE: Unable to link Google calandar with calendar Module

      @sdetweil

      Hi Sam just got back off holiday and applied you suggestion and it works.

      Thank you for your response.

      Kind reagards,
      John

      posted in Troubleshooting
      S
      synint
    • Unable to link Google calandar with calendar Module

      I am trying to populate the Calendar Module with details from my google calendar. I have detailed below the Config file I am running and the Error message in the terminal:

      **Config file details**
      
      {
      			module: "calendar",
      			header: "uk Holidays",
      			position: "top_center",
      			config: {
      				calendars: [
      					{
      						fetchInterval: 7 * 24 * 60 * 60 * 1000,
      						symbol: "calendar-check",
      						url: "https://calendar.google.com/calendar/embed?src=john%40totrain.co.uk&ctz=Europe%2FLondon"
      						//url: "https://ics.calendarlabs.com/76/mm3137/US_Holidays.ics"
      						
      					}
      				]
      			}
      		},
      

      Terminal Error message:
      synint@raspberrypi:~/MagicMirror $ npm run start

      > magicmirror@2.27.0 start
      > DISPLAY="${DISPLAY:=:0}" ./node_modules/.bin/electron js/electron.js
      
      [2024-04-10 20:29:35.630] [LOG]   Starting MagicMirror: v2.27.0 
      [2024-04-10 20:29:35.709] [LOG]   Loading config ... 
      [2024-04-10 20:29:35.718] [LOG]   config template file not exists, no envsubst 
      [2024-04-10 20:29:35.732] [LOG]   Loading module helpers ... 
      [2024-04-10 20:29:35.739] [LOG]   No helper found for module: MMM-OpenmapWeather. 
      [2024-04-10 20:29:35.743] [LOG]   No helper found for module: alert. 
      [2024-04-10 20:29:36.453] [LOG]   Initializing new module helper ... 
      [2024-04-10 20:29:36.455] [LOG]   Module helper loaded: updatenotification 
      [2024-04-10 20:29:36.459] [LOG]   No helper found for module: clock. 
      [2024-04-10 20:29:36.868] [LOG]   Initializing new module helper ... 
      [2024-04-10 20:29:36.869] [LOG]   Module helper loaded: calendar 
      [2024-04-10 20:29:37.168] [LOG]   Initializing new module helper ... 
      [2024-04-10 20:29:37.169] [LOG]   Module helper loaded: newsfeed 
      [2024-04-10 20:29:37.170] [LOG]   All module helpers loaded. 
      [2024-04-10 20:29:37.199] [LOG]   Starting server on port 8080 ...  
      [2024-04-10 20:29:40.028] [LOG]   Server started ... 
      [2024-04-10 20:29:40.032] [LOG]   Connecting socket for: updatenotification 
      [2024-04-10 20:29:40.036] [LOG]   Starting module helper: updatenotification 
      [2024-04-10 20:29:40.038] [LOG]   Connecting socket for: calendar 
      [2024-04-10 20:29:40.061] [LOG]   Starting node helper for: calendar 
      [2024-04-10 20:29:40.062] [LOG]   Connecting socket for: newsfeed 
      [2024-04-10 20:29:40.064] [LOG]   Starting node helper for: newsfeed 
      [2024-04-10 20:29:40.066] [LOG]   Sockets connected & modules started ... 
      [2024-04-10 20:29:41.284] [LOG]   Launching application. 
      [2024-04-10 20:29:49.222] [LOG]   Create new calendarfetcher for url: https://calendar.google.com/calendar/embed?src=john%40totrain.co.uk&ctz=Europe%2FLondon - Interval: 604800000 
      [2024-04-10 20:29:49.775] [LOG]   Create new newsfetcher for url: https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml - Interval: 300000 
      [2024-04-10 20:29:49.807] [INFO]  updatenotification: Updater Class Loaded! 
      [2024-04-10 20:29:49.809] [INFO]  updatenotification: Checking PM2 using... 
      [2024-04-10 20:29:49.827] [INFO]  Checking git for module: MMM-OpenmapWeather 
      [2024-04-10 20:29:50.048] [INFO]  updatenotification: [PM2] You are not using pm2 
      [2024-04-10 20:29:50.306] [INFO]  Checking git for module: MagicMirror 
      [2024-04-10 20:29:50.982] [ERROR] Calendar Error. Could not fetch calendar:  https://calendar.google.com/calendar/embed?src=john%40totrain.co.uk&ctz=Europe%2FLondon Error: Unauthorized
          at NodeHelper.checkFetchStatus (/home/synint/MagicMirror/js/node_helper.js:110:9)
          at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 
      [2024-04-10 20:29:52.010] [INFO]  Newsfeed-Fetcher: Broadcasting 28 items. 
      [2024-04-10 20:29:53.432] [INFO]  System information:
      ### SYSTEM:   manufacturer: Raspberry Pi Foundation; model: Raspberry Pi 3 Model B Plus Rev 1.3; raspberry: [object Object]; virtual: false
      ### OS:       platform: linux; distro: Raspbian GNU/Linux; release: 11; arch: arm; kernel: 6.1.21-v7+
      ### VERSIONS: electron: 29.1.6; used node: 20.9.0; installed node: 21.7.1; npm: 10.5.0; pm2: 5.3.1
      ### OTHER:    timeZone: Europe/London; ELECTRON_ENABLE_GPU: undefined 
      [4483:0410/203006.520013:ERROR:atom_cache.cc(229)] Add WM_CHANGE_STATE to kAtomsToCache
      

      Any help or guidance would be appreciated.

      Kind regards,
      John

      posted in Troubleshooting
      S
      synint
    • RE: Module: MMM-OpenmapWeather

      @sdetweil You have made an old man very happy and thank you. Added a comma after the last curly bracket and it now works.

      posted in Troubleshooting
      S
      synint
    • 1
    • 2
    • 1 / 2