MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    MagicMirror² v2.20.0 is available! For more information about this release, check out this topic.

    SOLVED MMM-BackgroundSlideshow

    Troubleshooting
    5
    23
    5953
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • CyruS1337
      CyruS1337 Project Sponsor last edited by

      I have a question about the background photos. I’ve found that the images are larger when viewed on the raspberry than when I look at them on the PC.

      I am using the MMM BackgroundSlideshow module to display a new image every 10 seconds.

      In custom.css I have the following codes deposited:

      /*****************************************************
       * Magic Mirror                                      *
       * Custom CSS                                        *
       *                                                   *
       * By Michael Teeuw http://michaelteeuw.nl           *
       * MIT Licensed.                                     *
       *                                                   *
       * Add any custom CSS below.                         *
       * Changes to this files will be ignored by GIT. *
       *****************************************************/
      
      .MMM-SystemStats  {
              color: #CEF6CE;
              } 
      .normal,
      .dimmed,
      header,
      .MMM-BackgroundSlideshow  {
          color: #fff;
      },
      .MMM-EasyPix  {
              font-weight: 400;
              } 
      .MMM-SystemStats {
          font-size: 45%;
      }
      .MMM-darksky-hourly {
      	color: #ffffff;
          }
      

      Can someone tell me why the PI are “bigger” than when I look at them on the PC

      That’s still my config

      /* Magic Mirror Config Sample
       *
       * By Michael Teeuw http://michaelteeuw.nl
       * MIT Licensed.
       *
       * For more information how you can configurate this file
       * See https://github.com/MichMich/MagicMirror#configuration
       *
       */
      
      var config = {
      	address: "0.0.0.0", // Address to listen on, can be:
      	                      // - "localhost", "127.0.0.1", "::1" to listen on loopback interface
      	                      // - another specific IPv4/6 to listen on a specific interface
      	                      // - "", "0.0.0.0", "::" to listen on any interface
      	                      // Default, when address config is left out, is "localhost"
      	port: 8080,
      	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"], // Set [] to allow all IP addresses
      	                                                       // or add a specific IPv4 of 192.168.1.5 :
      	                                                       // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
      	                                                       // or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
      	                                                       // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],
      
      	language: "de",
      	timeFormat: 24,
      	units: "metric",
      
      	modules: [
      		{
      			module: "alert",
      		},
      		{
      			module: "updatenotification",
      			position: "top_bar"
      		},
      		{
      			module: "clock",
      			position: "top_left"
      		},
      		/*{
      			module: "compliments",
      			position: "lower_third"
      		},*/
      		
      	/*{
      	disabled: false,	
          module: "MMM-NewsFeedTicker",
      	position: "bottom_bar",
      	//classes: "day_scheduler",
      	config: {
      	    feeds: [
      				{
      			title: "20 min",
      			url: "https://api.20min.ch/rss/view/67",
      			encoding: "UTF-8", //ISO-8859-1
      			className: "myClass",
      			defaultLogo : ""
      		},
      
          	    ]
      	}
          },
      		
      		{
      	 module: 'internet-monitor',
      	 position: 'top_center',
      	 config: {
      		 type: 'minimal',
      		 maxTime: 7000,
      		 updateInterval: 120000,
      		 verbose: false,
      		 displayStrength: true,
      		 displaySpeed: false,
      		 strengthIconSize: 40,
      		 maxGaugeScale: 25,
      		 wifiSymbol:{
      			 size: 50,
      			 fullColor: '#3afc25',
      			 almostColor: '#ffff0c',
      			 halfColor: '#ff8c00',
      			 noneColor: '#ff1111'
      		 }
      	 }
       },*/
      	
      	 {
          module: 'MMM-darksky-hourly',
          position: 'top_right',  // This can be any of the regions.
          config: {
            // See 'Configuration options' for more information.
            apiKey: 'xxx', // Dark Sky API key.
            latitude:   47.309714,
            longitude: 7.8106514,
      	  
          }
        },
      	
      	
      	
      	{
      		module: 'MMM-SystemStats',
      		position: 'bottom_left', // This can be any of the regions.
      		classes: 'small dimmed', // Add your own styling. Optional.// classes: 'small dimmed', 
      		// header: 'System Stats', // Set the header text OPTIONAL
      		config: {
      			updateInterval: 10000, // every 10 seconds
      			align: 'right', // align labels
      			view: 'textAndIcon',
      		},
      	},
      {
          module: "MMM-EasyPix",
      	header: "WLAN-Code",
      	position: "bottom_right",
      	config: {
      		picName: "guest_wifi_config.png", // Enter the picture file name.
      		maxWidth: "100%",        // Size picture precisely. Retains aspect ratio.
      		}
              },
      		
      	
      	{
          module: 'MMM-BackgroundSlideshow',
          position: 'fullscreen_below',
          config: {
            imagePaths: ['modules/MMM-BackgroundSlideshow/Amerika_2018'],
            transitionImages: true,
            randomizeImageOrder: true
          }
        },
      
      
      /* 
      {
        //disabled:true,
        module: "MMM-AVStock",
        position: "top_right", //"bottom_bar" is better for `mode:ticker`
        config: {
          apiKey : "WPYPLO6M92PTF7PB", // https://www.alphavantage.co/
          timeFormat: "YYYY-MM-DD HH:mm:ss",
          symbols : ["aapl", "GOOGL", "005930.KS", "SCHN.SW", "UBS", "NOVN.VX",],
          alias: ["Apple", "Google", "SAMSUNG Electronics", "Schindler", "UBS", "Novartis",], //Easy name of each symbol. When you use `alias`, the number of symbols and alias should be the same. If value is null or "", symbol string will be used by default.
          tickerDuration: 60, // Ticker will be cycled once per this second.
          chartDays: 90, //For `mode:series`, how much daily data will be taken. (max. 90)
          poolInterval : 1000*15, // If your AV account is free, at least 13 sec is needed.
          mode : "table", // "table", "ticker", "series"
        }
      },*/		
      		
      		
      		
      		
      		/*{
      			module: "newsfeed",
      			position: "bottom_bar",
      			config: {
      				feeds: [
      					{
      						title: "New York Times",
      						url: "http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml"
      					}
      				],
      				showSourceTitle: true,
      				showPublishDate: true
      			}
      		},*/
      	]
      
      };
      
      /*************** DO NOT EDIT THE LINE BELOW ***************/
      if (typeof module !== "undefined") {module.exports = config;}
      
      
      1 Reply Last reply Reply Quote 0
      • CyruS1337
        CyruS1337 Project Sponsor last edited by

        Ok, thanks for your help. I downloaded the program PhotoScape and changed the height and width of all photos. Look, there you go !! Thank you

        1 Reply Last reply Reply Quote 0
        • CyruS1337
          CyruS1337 Project Sponsor last edited by yawns

          Enclosed I send you the two different views. Once on the PI and once on the PC monitor.

          Bild Text

          Bild Text

          ? 1 Reply Last reply Reply Quote 0
          • ?
            A Former User @CyruS1337 last edited by

            @cyrus1337
            I’m not sure, I don’t know anything about backgroundSlideShow, but,

            Your pictures would be greater than resolution of screen.
            Then, your PC viewer might have resized your pictures automatically when they were shown. But backgroundSlideShow might not have that feature. However, there is a possibility of controlling by CSS. Ask to creator.

            CyruS1337 1 Reply Last reply Reply Quote 0
            • CyruS1337
              CyruS1337 Project Sponsor @Guest last edited by

              @sean Thanks for your quick reply.

              garbleflux 1 Reply Last reply Reply Quote 0
              • garbleflux
                garbleflux Project Sponsor @CyruS1337 last edited by

                @cyrus1337 said in MMM-BackgroundSlideshow:

                @sean Thanks for your quick reply.

                I also use this module very successfully. Try to resize the pictures to the resolution of your screen (photoshop), normaly 1920 x 1080, 1024 x 760. Sometimes it is also necessary to set the pictures to the correct aspect ratio 16:9. For me it works fine.
                Regards Mike

                S 1 Reply Last reply Reply Quote 0
                • S
                  sdetweil @garbleflux last edited by

                  @garbleflux i had to modify another image display module to get the correct presentation of images, no zoom in and no crop of portrait mode. does mean that some of the background shows thru, but the pictures are correctly displayed

                  Sam

                  Create a working config
                  How to add modules

                  CyruS1337 1 Reply Last reply Reply Quote -1
                  • CyruS1337
                    CyruS1337 Project Sponsor @sdetweil last edited by

                    @sdetweil And what would be your module 🙂

                    S 1 Reply Last reply Reply Quote 0
                    • S
                      sdetweil @CyruS1337 last edited by sdetweil

                      @cyrus1337 I am using the MMM-ImagePhotos module… but I had to change the code to keep my images properly formatted…

                      landscape
                      https://www.dropbox.com/s/adzzi3bc7wwq8q5/IMG_20181114_102356.jpg?dl=0
                      portrait
                      https://www.dropbox.com/s/htxdm7b8sayqazh/IMG_20181114_102350.jpg?dl=0

                      can’t get the pics to actually display here…

                      Sam

                      Create a working config
                      How to add modules

                      1 Reply Last reply Reply Quote 0
                      • ?
                        A Former User last edited by

                        I made several modules handling photos - MMM-GooglePhotos, MMM-WeatherBackground, MMM-DropboxWallpaper,…

                        All modules can display photos by its aspect-ratio with covering the target area or resizing to show whole picture.
                        Try them.

                        • MMM-DropboxWallpaper (https://github.com/eouia/MMM-DropboxWallpaper)

                        • MMM-GooglePhotos (https://github.com/eouia/MMM-GooglePhotos)
                          0_1532096406799_temp2.jpg

                        S CyruS1337 2 Replies Last reply Reply Quote 0
                        • ?
                          A Former User last edited by A Former User

                          Anyway, If your module would be using img tag for showing photos, module should know the exact image size and calculate to resize it by proper target ratio.
                          Instead, I prefer using Background CSS trick. background-size:cover will cover whole image to entire area of it’s element, background-size:contain will resize image to fit to target element size. Suprisingly, without any calculation.

                          S 1 Reply Last reply Reply Quote 0
                          • 1
                          • 2
                          • 3
                          • 1 / 3
                          • First post
                            Last post
                          Enjoying MagicMirror? Please consider a donation!
                          MagicMirror created by Michael Teeuw.
                          Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                          This forum is using NodeBB as its core | Contributors
                          Contact | Privacy Policy