MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Help with MMM-EmbedURL

    Scheduled Pinned Locked Moved Troubleshooting
    28 Posts 3 Posters 9.5k Views 3 Watching
    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.
    • T Offline
      TK421_VT @wishmaster270
      last edited by

      @wishmaster270 Thanks I will give that a try, I know the IP as I set it statically.

      T 1 Reply Last reply Reply Quote 0
      • T Offline
        TK421_VT @TK421_VT
        last edited by

        @TK421_VT Sorry for the delay, I have been busy with Holiday stuff. I added the IP address in the config file
        00ba9d0f-db1b-4624-ae57-5d273a951a84-image.png

        it still doesn’t load anything in the top right region.
        30d26cba-872d-4503-9a23-f56a98e2d9b2-image.png

        This is what is in the module section in the config file
        5e8b119a-35f1-4cc2-a9c8-3b7e144fe77b-image.png

        Any other thoughts?

        wishmaster270W 1 Reply Last reply Reply Quote 0
        • wishmaster270W Offline
          wishmaster270 Module Developer @TK421_VT
          last edited by

          @TK421_VT Hi,

          that’s weird.
          Do you still have Webview enabled in the config with:

          electronOptions: {
            webPreferences: {
              webviewTag: true,
            }
          },
          
          T 2 Replies Last reply Reply Quote 0
          • T Offline
            TK421_VT @wishmaster270
            last edited by

            @wishmaster270 I will look, I ‘think’ so. but I am not sure.

            1 Reply Last reply Reply Quote 0
            • T Offline
              TK421_VT @wishmaster270
              last edited by

              @wishmaster270 4837fc51-8285-4256-8090-f0ecbb1bdd52-image.png

              wishmaster270W 1 Reply Last reply Reply Quote 0
              • wishmaster270W Offline
                wishmaster270 Module Developer @TK421_VT
                last edited by

                @TK421_VT Sorry for the late response. I will need to set up a identical environment to debug the problem. I will try to figure things out in the next days.

                wishmaster270W T 2 Replies Last reply Reply Quote 0
                • wishmaster270W Offline
                  wishmaster270 Module Developer @wishmaster270
                  last edited by

                  @TK421_VT

                  I setup a new environment today and tested your configuration. There are a few issues with it i did not see cause you did not use the code signs to paste your configuration in the forum.
                  Please use the
                  ```
                  YOUR CONFIGURATION
                  ```

                  which results in

                  YOUR CONFIGURATION
                  

                  next time.

                  First thing is that you set the basicElementType and embedElementType in the wrong level. They need to be set as child object of config.

                  The second problem is that you use a wrong time of double quotes. It looks like your editor uses a wired type of encoding.

                  “
                  

                  is not the same as

                  "
                  

                  With the following config everything works well:

                  /* Magic Mirror Config Sample
                   *
                   * By Michael Teeuw https://michaelteeuw.nl
                   * MIT Licensed.
                   *
                   * For more information on how you can configure this file
                   * see https://docs.magicmirror.builders/getting-started/configuration.html#general
                   * and https://docs.magicmirror.builders/modules/configuration.html
                   */
                  let config = {
                  	electronOptions: {
                  		webPreferences: {
                  			webSecurity: false,
                  			webviewTag: true,
                  		},
                  		fullscreen: true,
                  		alwaysOnTop: false
                  	},
                  	// ignoreXOriginHeader: true,
                  	// ignoreContentSecurityPolicy: true,
                  	address: "192.168.1.1", // 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 or empty, is "localhost"
                  	port: 8080,
                  	basePath: "/", // The URL path where MagicMirror is hosted. If you are using a Reverse proxy
                  	// you must set the sub path here. basePath must end with a /
                  	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1", "10.18.8.0/24"], // 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"],
                  
                  	useHttps: false, // Support HTTPS or not, default "false" will use HTTP
                  	httpsPrivateKey: "", // HTTPS private key path, only require when useHttps is true
                  	httpsCertificate: "", // HTTPS Certificate path, only require when useHttps is true
                  
                  	language: "de",
                  	locale: "de-DE",
                  	logLevel: ["INFO", "LOG", "WARN", "ERROR"], // Add "DEBUG" for even more logging
                  	timeFormat: 24,
                  	units: "metric",
                  	// serverOnly:  true/false/"local" ,
                  	// local for armv6l processors, default
                  	//   starts serveronly and then starts chrome browser
                  	// false, default for all NON-armv6l devices
                  	// true, force serveronly mode, because you want to.. no UI on this device
                  
                  	modules: [
                  		{
                  			module: "clock",
                  			position: "top_center",
                  		},
                  		{
                  			module: "MMM-EmbedURL",
                  			position: "top_right",
                  			header: "Current Weather",
                  			config: {
                  				embedElementType: "webview",
                  				basicElementType: "div",
                  				updateInterval: 120,
                  				attributes: [
                  					"frameborder=0",
                  				],
                  				embed: [
                  					“https://www.wunderground.com/dashboard/pws/KVTCAMBR4?cm_ven=localwx_pwsdash”
                  				]
                  			},
                  		},
                  		{
                  			module: "MMM-Touch",
                  			position: "bottom_center",
                  			config: {
                  				debug: true,
                  				useDisplay: false,
                  				defaultMode: "default",
                  				gestureCommands: {
                  					default: {
                  						TAP_1: (commander) => {
                  							commander.sendNotification("USER_PRESENCE", true);
                  						},
                  						PRESS_1: (commander) => {
                  							commander.sendNotification("SCREEN_TOGGLE", { forced: true });
                  						},
                  						SWIPE_UP_1: (commander) => {
                  							commander.sendNotification("SCREEN_ON", { forced: true });
                  						},
                  						SWIPE_DOWN_1: (commander) => {
                  							commander.sendNotification("SCREEN_OFF", { forced: true });
                  						},
                  						SWIPE_LEFT_1: (commander) => {
                  							commander.sendNotification("PROFILE_INCREMENT_HORIZONTAL", null);
                  						},
                  						SWIPE_RIGHT_1: (commander) => {
                  							commander.sendNotification("PROFILE_DECREMENT_HORIZONTAL", null);
                  						}
                  					}
                  				}
                  			}
                  		},
                  	]
                  };
                  
                  /*************** DO NOT EDIT THE LINE BELOW ***************/
                  if (typeof module !== "undefined") {
                  	module.exports = config;
                  }
                  
                  S T 2 Replies Last reply Reply Quote 0
                  • S Do not disturb
                    sdetweil @wishmaster270
                    last edited by sdetweil

                    @wishmaster270 the bad " is because of the no code wrapper

                    see this

                    "something"
                    

                    vs this
                    “something”

                    copy/paste of the second will cause bad config message

                    @TK421_VT to use the code wrapper

                    paste your text in the message editor, select it all
                    the hit the button above the edit that looks like </>

                    note the code wrapper tag MUST start and end on a blank line…

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    1 Reply Last reply Reply Quote 0
                    • T Offline
                      TK421_VT @wishmaster270
                      last edited by

                      @wishmaster270 Moving basicElementType & embedElementTpe into the correct location seemed to work.
                      dd86d950-3915-40c3-9b91-338c788cd75b-image.png

                      Is there any way to make the window Wider or Longer? Or is it this size because of the region it is set in?

                      T wishmaster270W 2 Replies Last reply Reply Quote 0
                      • T Offline
                        TK421_VT @TK421_VT
                        last edited by sdetweil

                        YOUR CONFIGURATION
                        
                        /* MagicMirror² Config Sample
                         *
                         * By Michael Teeuw https://michaelteeuw.nl
                         * MIT Licensed.
                         *
                         * For more information on how you can configure this file
                         * see https://docs.magicmirror.builders/configuration/introduction.html
                         * and https://docs.magicmirror.builders/modules/configuration.html
                         */
                        let config = {
                          electronOptions: {
                            webPreferences: {
                              webviewTag: true,
                            }
                          },
                        	address: "192.168.1.40", 	// 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 or empty, is "localhost"
                        	port: 8080,
                        	basePath: "/", 	// The URL path where MagicMirror² is hosted. If you are using a Reverse proxy
                        					// you must set the sub path here. basePath must end with a /
                        	ipWhitelist: ["192.168.1.40", "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"],
                        
                        	useHttps: false, 		// Support HTTPS or not, default "false" will use HTTP
                        	httpsPrivateKey: "", 	// HTTPS private key path, only require when useHttps is true
                        	httpsCertificate: "", 	// HTTPS Certificate path, only require when useHttps is true
                        
                        	language: "en",
                        	locale: "en-US",
                        	logLevel: ["INFO", "LOG", "WARN", "ERROR"], // Add "DEBUG" for even more logging
                        	timeFormat: 12,
                        	units: "english",
                        	// serverOnly:  true/false/"local" ,
                        	// local for armv6l processors, default
                        	//   starts serveronly and then starts chrome browser
                        	// false, default for all NON-armv6l devices
                        	// true, force serveronly mode, because you want to.. no UI on this device
                        
                        	modules: [
                        		
                        		{
                        			module: "clock",
                        			position: "top_left",
                        			config: {
                        			timeFormat: "12",
                        			displaySeconds: "false",
                        			showPeriod: "true"
                        				}
                        		},		
                                {
                            module: "MMM-Bring",
                            position: "bottom_bar",
                            config: {
                               email: 'xxxxxx@xxxx.com',
                               password: 'xxxxxx',
                               updateInterval: 1, // in Minutes
                               listName: "Costco", // optional
                               showListName: false,
                               activeItemColor: "#EE524F",
                               latestItemColor: "#4FABA2",
                               showLatestItems: false,
                               maxItems: 0,
                               maxLatestItems: 0,
                               locale: "en-US",
                               useKeyboard: false,
                               customTitle: "Costco List", // optional
                               listDropdown: false
                            }
                        },
                        {
                        		module: "MMM-CalendarWeek",
                        		position: "middle_center",	// This can be any of the regions. Best results in bottom region.
                        		config: {
                        	colored: true,
                        	coloredSymbolOnly: false,
                        	maximumNumberOfDays: 21,
                        	maximumDaysPerLine: 7,
                        	wrapEvents: true,
                        	showEndDate: true,
                        	calendars: [
                        		{
                        			url: 'https://calendar.google.com/calendar/ical/xxxxxxgmail.com/public/basic.ics',
                        			symbol: 'calendar',
                        			auth: {
                        			    user: 'xxxxxxxx',
                        			    pass: 'xxxxxxxx',
                        			    method: 'basic'
                        			}
                        		},
                        	],
                        }
                        },
                        {
                          module: "MMM-EmbedURL",
                          position: "top_right",
                          header: "Current Weather",
                          config: {
                            embedElementType: "webview",
                            basicElementType: "div",
                            updateInterval: 120,
                            attributes: [
                                "frameborder=0",
                            ],
                              embed: [
                                "https://www.wunderground.com/dashboard/pws/KVTCAMBR4?cm_ven=localwx_pwsdash"
                            ]
                          },
                        },
                        	]
                        };
                        
                        /*************** DO NOT EDIT THE LINE BELOW ***************/
                        if (typeof module !== "undefined") {module.exports = config;}
                        
                        S 1 Reply Last reply Reply Quote 0
                        • T Offline
                          TK421_VT @wishmaster270
                          last edited by

                          @wishmaster270 No worries on the late reply, the holidays are a busy time!

                          wishmaster270W 1 Reply Last reply Reply Quote 0
                          • S Do not disturb
                            sdetweil @TK421_VT
                            last edited by

                            @TK421_VT note that I edited your post to add code wrapper around your config.js content

                            you placed it around the words 'your configuration ', which was supposed to mean the content of the config.js on you MagicMirror installation

                            Sam

                            How to add modules

                            learning how to use browser developers window for css changes

                            1 Reply Last reply Reply Quote 0
                            • wishmaster270W Offline
                              wishmaster270 Module Developer @TK421_VT
                              last edited by wishmaster270

                              @TK421_VT
                              I took your whole config, copied to my mirror and only changed the ip address to my needs. Everything is working fine here. It takes a second to fetch the information of the weather but it is displayed as it should.

                              The only thing i think is left that can cause the problems is that not electron is used to display the mirror.

                              Edit:
                              Did not see that it is working now. Please read my other post about sizing instead

                              1 Reply Last reply Reply Quote 0
                              • wishmaster270W Offline
                                wishmaster270 Module Developer @TK421_VT
                                last edited by

                                @TK421_VT
                                Hi and sorry,

                                i did not see that it is working now. Yes you can adjust the size (as suggested in the documentation) by adding a few lines to your custom.css file:

                                .MMM-EmbedURL .embed .embeded {
                                    width: 800px;
                                    height: 400px;
                                }
                                
                                T 1 Reply Last reply Reply Quote 0
                                • T Offline
                                  TK421_VT @wishmaster270
                                  last edited by

                                  @wishmaster270 Ok, this sounds great, but one more dumb question, where is the custom.css file?

                                  Please forgive all my dumb questions and bad posts; this forum is new to me, and I am not a coder by trade, I am more of a hardware guy.

                                  S 1 Reply Last reply Reply Quote 0
                                  • T Offline
                                    TK421_VT
                                    last edited by

                                    I see this in the Readme, but It doesn’t mean much to me:
                                    6d326645-1a01-41b3-89be-f3f3747b9d34-image.png

                                    1 Reply Last reply Reply Quote 0
                                    • S Do not disturb
                                      sdetweil @TK421_VT
                                      last edited by

                                      @TK421_VT custom.css is an optional file u can create in the css folder.

                                      if you use my install script I create it for you

                                      Sam

                                      How to add modules

                                      learning how to use browser developers window for css changes

                                      1 Reply Last reply Reply Quote 0

                                      Hello! It looks like you're interested in this conversation, but you don't have an account yet.

                                      Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

                                      With your input, this post could be even better 💗

                                      Register Login
                                      • 1
                                      • 2
                                      • 1 / 2
                                      • First post
                                        Last post
                                      Enjoying MagicMirror? Please consider a donation!
                                      MagicMirror created by Michael Teeuw.
                                      Forum managed by Sam, technical setup by Karsten.
                                      This forum is using NodeBB as its core | Contributors
                                      Contact | Privacy Policy