I am new to MM and need help. I am trying to embed a WeatherUnderground url of my personal Weather station to my MM. I have loaded the module and added the basic code to my config file, but I get nothing. It sounds like it might be an issue with Embed sites that forbid embedding and Cookie banners, but I don’t understand how to remove it. I see the Chrome extension Requestly, but I don’t understand how or where to use it.

Here is an example of a webpage that I want to use: https://www.wunderground.com/dashboard/pws/KVTCAMBR4?cm_ven=localwx_pwsdash

Any help would be greatly appprecated.

@wishmaster270 said in Help with MMM-EmbedURL:

embedElementType: “webview”

I am guessing I run Requestly on the PI itself on the default Browers? I don’t currently have Firefox or Chrome loaded on it (not that it is that hard to install).

Honestly, I have no idea if I am running in Server Mode. I install the basic 64 bit PI OS. I am guessing that is not the Server Mode?

I tried adding WebView to the Config file with no change:

{
module: “MMM-EmbedURL”,
position: “top_right”,
header: “Current Weather”,
config: {
updateInterval: 120,
attributes: [
“frameborder=0”,
],
embedElementType: “webview”,
embed: [
“https://www.wunderground.com/dashboard/pws/KVTCAMBR4?cm_ven=localwx_pwsdash”
]
},
},

Thoughts?

I see this in the Readme, but It doesn’t mean much to me:

@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.

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

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

@wishmaster270 Moving basicElementType & embedElementTpe into the correct location seemed to work.

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

@wishmaster270

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

@TK421_VT Sorry for the delay, I have been busy with Holiday stuff. I added the IP address in the config file

it still doesn’t load anything in the top right region.

This is what is in the module section in the config file

Any other thoughts?

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

@sdetweil Thank you for trying to help, but even after reading the readme there are terms or concepts I don’t follow.

This is at the beginning of the config file:

let config = {
electronOptions: {
webPreferences: {
webviewTag: true,
}
},
address: “localhost”, // Address to listen on, can be:

Then this in the module:

{
module: “MMM-EmbedURL”,
position: “top_right”,
header: “Current Weather”,
embedElementType: “webview”,
basicElementType: “div”,
config: {
updateInterval: 120,
attributes: [
“frameborder=0”,
],
embed: [
“https://www.wunderground.com/dashboard/pws/KVTCAMBR4?cm_ven=localwx_pwsdash”
]
},
},

this is what I see in the terminal log:

[16.12.2022 21:55.38.765] [ERROR] (node:57092) electron: Failed to load URL: https://www.wunderground.com/dashboard/pws/KVTCAMBR4?cm_ven=localwx_pwsdash with error: ERR_BLOCKED_BY_RESPONSE