MMM-Globe

oli28

What a beautiful modul! Any chance to change the font size to be able to fit more destinations next to each others? I did try to find it in the .css but had no luck yet.

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 $