MMM-Globe

[Foxy25]

Hi,
I have a question about the module:

I would like to make the background transparent, is that possible? At the moment it is black.

That would help me, because I have a slideshow running in the background and the black background behind the globe doesn’t look so nice …

Would be very grateful if someone could help.

Foxy

[Wenike]

@foxy25 @foxy25 In your custom.css file, see if adding:

.globe { opacity: 0.0; }

Fixes the issue?

[Foxy25]

@wenike
Hi,

i use the command in the styles.css of the modul, not in the custom.css.

It works, but it makes the complete module invisible, not only the background behind the globe.

Thank you for your support.

[ashishtank]

@foxy25 to make globe transparent there are two changes required.

• Module div’s background color
• Globe canvas itself have black color as background.

First one can be easily doable with css but to make globe transparent you will need to change the code as well. Do below to make globe transperent.

• In custom.css add below css

.globe
{
	background-color: unset;
}

• in modules\MMM-Globe\encom-globe.js file find below line and change it to.

from

this.renderer = new THREE.WebGLRenderer( { antialias: true } );

to

this.renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );

---

below is output

Before

After

Let me know how/if it works for you.

[Foxy25]

It works perfect!!!

Thank you so much for you support!!!

Greetings from Germany

Foxy

[ashishtank]

@foxy25 you are welcome :)

[damith]

hi everyone, I’ve tried to install on my PI but it won’t work…am getting black screen, here is my config file… any HELP…?
modules: [

	{
		module: "alert",
	},
	{
		module: "updatenotification",
		position: "top_bar"
	},
	{
		module: "clock",
		position: "top_left"
	},
	{
		module: "calendar",
		header: "Italy Holidays",
		position: "top_left",
		config: {
			calendars: [
				{
					symbol: "calendar-check",
					url: "webcal://www.calendarlabs.com/ical-calendar/ics/53/Italy_Holidays.ics"					}
			]
		}
	},
	{
		module: "compliments",
		position: "top_center"
	},
	{
		module: "weather",
		position: "top_right",
		config: {
			weatherProvider: "openweathermap",
			type: "current",
			location: "ROME",
			locationID: "3169070", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
			apiKey: "492da6299f48937482d3c321215289b0"
		}
	},
	{
		module: "weather",
		position: "top_right",
		header: "Weather Forecast",
		config: {
			weatherProvider: "openweathermap",
			type: "forecast",
			location: "ROME",
			locationID: "3169070", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
			apiKey: "492da6299f48937482d3c321215289b0"
		}
	},
	{
		module: "newsfeed",
		position: "bottom_bar",
		config: {
			feeds: [
				{
					title: "REPUBBLICA",
					url: "https://www.repubblica.it/rss/homepage/rss2.0.xml"
				}
			],
			showSourceTitle: true,
			showPublishDate: true,
			broadcastNewsFeeds: true,
			broadcastNewsUpdates: true
		}
	},
            {
	module: 'MMM-Globe',
	position: 'lower_third',	// This can be any of the regions. Best results in lower_third
	config: {
            size:"x-small", // Globe size. See configuration options below for more options
			dayLength: 38, // (Optional) Rotation speed. See configuration options below
		    viewAngle: 15, // (Optional) Globe tilt. See configuration options below.
			introLinesDuration: 2000,
			receiveExternalLocations: 0,
            locations: [
                // Fill with location Objects if desired
                // e.g.
                   {lat:37.77493,lng:-122.41942, label: "San Francisco"},
                   {lat:-23.5475,lng:-46.63611, label: "Sao Paulo"}

                // Individual values must be seperated by a comma.
                // You can look up the latitude and longitude for a specific location on Google Maps.
                    ]
                    }
            },
]

};

/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== “undefined”) {module.exports = config;}

[thgmirror]

Hi @damith,

May be, you have an issue in the config.js.
You can use the built-in check-tool from within the MagicMirror folder named
npm run config:check

Or use an external Website (I use https://esprima.org/demo/validate.html) to see if it is valed.

Greetings from Germany
Thomas

[damith]

hi@thgmirror
Thank you very much for you reply, I’ve checked with built in check but no errors …!!

pi@raspberrypi:~/MagicMirror $ npm run config:check

magicmirror@2.15.0 config:check /home/pi/MagicMirror
node js/check_config.js

[02.05.2021 12:20.01.503] [INFO] Checking file… /home/pi/MagicMirror/config/config.js
[02.05.2021 12:20.01.719] [INFO] Your configuration file doesn’t contain syntax errors :)
pi@raspberrypi:~/MagicMirror $

[sdetweil]

@damith did u do the npm install in the module folder after git clone?

if u look at the startup messages, where u start mm
npm start
or pm2 logs --lines=100

you might see a message, module not found.
this is the number 1 clue you didn’t do the npm install