@MisterT

When creating your Strava API Application in Step 2, the key value is the Authorisation Callback Domain. This needs to the IP address or domain name you use to access the MagicMirror otherwise subsequent steps will fail. So in your case it looks like you should use 192.128.1.99

Once the API Application is created, add the module to your config.js file with the client_id and client_secret then restart the mirror.

The module should then state Client id unauthorised and provide a link to the authorisation process. At which point you should be able to follow step 5

Here’s two screenshots which might help:

@zolabus said in MMM-Strava:

I can’t use the module anymore
If I try to reauthorize i have this error

{“message”:“Bad Request”,“errors”:[{“resource”:“Authorize”,“field”:“scope”,“code”:“invalid”}]}

Any help please?
Thanks

@zolabus - I’ve just released version 2.0.0 of the plugin which is available via the Master branch. Can you try this version?

When updating please make sure you run npm install --production from the MMM-Strava directory.

If you continue to get these errors, please check the Authorization Callback Domain in your Strava API Settings (https://www.strava.com/settings/api) matches the IP address/URL used to access MagicMirror

@dnovacik

The develop branch for the module contains the changes to support the new authentication approach - I’ll merge that back into the master branch in the coming weeks so the module can continue to be used

@lavolp3

I extended the Strava-v3 package (see https://github.com/ianperrin/MMM-Strava/blob/develop/strava_api.js) to support the new authentication methods. I guess these could be incorporated into a pull request for the core package now that it is active again ;)

@dzsoo said in MMM-Remote-Control module not showing FA icons before menu items:

After a clean install of MagicMirror2 with no errors, i also installed the MMM-Remote-Control module which is not showing the icons before menu items. Can anyone help about this issue?

See this post

Because MMM-Remote-Control menus are created differently to a standard module, a change is required to the modules code in order to adopt the update to Font Awesome icons.

There is a pull request with the fix, so please bear with @Jopyth whilst he tests the change

@sdetweil said in FontAwesome with MM 2.7.1 not showing some icons:

I saw another post on the same issue, and they posted that the module CODE has to change too

https://forum.magicmirror.builders/topic/10205/modules-icons

@sdetweil - the module code should not generally need changing. However, in the case of MMM-SystemStats, font awesome was not being referenced, so a module change was recommended. Otherwise, if that module was the only module included in the config, no icons would display at all.

@Jonas2903 when a module includes font-awesome.css using getStyles in version 2.7, the FA5 css is included as well as the FA4 shims css.

This provides backwards compatibility and means that icons can be referenced by either their old or new alias, in other words both <i class="fa fa-long-arrow-down"> and <i class="fa fa-long-arrow-alt-down"> will display the same icon.

For more info see the font awesome documentation.

So we need to find out what’s affecting your mirror. Could you remove all modules (including the default modules like alert, calendar etc) from your config except MMM-Fuel and see if the icon appears?

@Quesada said in Modules icons:

Another solution i found is “updating” font awesome icons from 4 to 5.
https://forum.magicmirror.builders/topic/8776/update-font-awesome-to-version-5
but the problem is when i start MagicMirror it takes a long time to load and some modules do not load well.

The method in that post was a way of getting FA5 icons in Magic Mirror before version 2.6. So should not be needed in 2.6 or 2.7.

If you do use it, you will load multiple versions of font awesome in the same webpage - which is not recommended and can cause unknown issues.

In 2.7, module developers requiring FA icons should use the getStyles method as per the documentation. MM will take care of ensuring only one link to the fa library is included.

Unfortunately, 2.6 allowed a module to require fa4 or fa5 resulting in multiple versions of FA on your mirror. This should be fixed in 2.7

@Quesada I’m not sure about the weather module but MMM-SystemStats does not appear to reference font awesome in the MMM-SystemStats.js file

It should include the getStyles function similar to the following…

getStyles: function() {
        return ['font-awesome.css'];
    },

If you have just updated your mirror to v2.7 - make sure you run npm install from the MagicMirror directory. This should allow the module to correctly display font awesome 4 and 5 icons

If you are using v2.6, there was an issue where some Font Awesome icons were not working depending on which modules were in use. Upgrading to v2.7 should resolve this.

@Jopyth - the font awesome package was updated in v2.7 so the direct reference to FA in remote.html will need to be updated.

It looks like this line
link rel="stylesheet" type="text/css" href="vendor/node_modules/font-awesome/css/font-awesome.min.css"
Should be changed to
link rel="stylesheet" type="text/css" href="vendor/css/font-awesome.css"

But I’m away from my mirror right now so cannot test it.

@dxfan227 you’ve got it!

You can use almost any word for the titleClass providing you use the same value in the custom.css file. e.g. titleClass: "word" and div.module.calendar td.word - it is possible to include uppercase and lowercase letters (a-z or A-Z) in the word as well as numbers (0-9) or even hyphens (-) and underscores (_), but avoid punctuation and other such characters. There are many recommendations for css class naming conventions, but that’s for another day. I’d say just be clear and descriptive.

The color is defines by the hex value (e.g. #0e66b3) . Here is an overview if you’re not already familiar - https://www.w3schools.com/cssref/css_colors.asp

It’s worth noting the css is defined in the custom.css file. You may find some suggest changing the files within the module directory. Avoid this where ever possible as such changes will make updating modules more difficult.

Remember this customisation is only required because it can’t currently be achieved using the calendar modules configuration options. It’s possible (but less likely) that future changes to the module may break these customisations so watch out if upgrading the mirror.

As you learn you may wish to push changes to the modules code so they become supported configuration options for others to use.

Take it slowly, and enjoy the mirror.

@dxfan227 said in 2 Of the same module but different position via css?:

@ianperrin
Beautiful. Exactly what I was looking for. regarding your example below ( 2 calendars 1 module with different icons) what would it look like if I wanted sat just the title of of the event to be a different color ( but not the “in x amount of days” ) part

I believe the default calendar module allows colors to be configured, but these will affect the whole row, or only the symbol.

To color just the title, try this

1. Change the config to set the titleClass for each calendar, e.g.

{
	module: "calendar",
	header: "Holidays",
	position: "top_left",
	config: {
		calendars: [
			{
				symbol: "calendar",
				url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics",
				titleClass: "red"
			},{
				symbol: "calendar-check",
				url: "webcal://www.calendarlabs.com/ical-calendar/ics/75/UK_Holidays.ics",
				titleClass: "blue"
			}
		]
	}
},

2. Edit the custom.css file located in ~/MagicMirror/css to include the following

div.module.calendar td.red {
    color: #ad0143;
}
div.module.calendar td.blue {
    color: #0e66b3;
}

3. Restart the mirror

@dxfan227 - if you simply want to display two calendars, but are happy for them to appear in one list, you can try the following config - note how different symbols can be used to differentiate between the two calendars

{
	module: "calendar",
	header: "Holidays",
	position: "top_left",
	config: {
		calendars: [
			{
				symbol: "calendar",
				url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics",

			},{
				symbol: "calendar-check",
				url: "webcal://www.calendarlabs.com/ical-calendar/ics/75/UK_Holidays.ics"
			}
		],
		maximumEntries: 20
	}
},

@AdnanAhmed97 - if the default calendar module is being used, it is not necessary to clone it as multiple instances of the module can be added to the config.js file without having to use the clone trick.

@dxfan227 - assuming you are using the default calendar module, and want two calendar to be displayed side by side, try the following:

1. Add two instances of the calendar module to your config.js file

{
	module: "calendar",
	header: "US Holidays",
	position: "top_left",
	config: {
		calendars: [
			{
				symbol: "calendar-check",
				url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics"
			}
		]
	}
},
{
	module: "calendar",
	header: "UK Holidays",
	position: "top_left",
	config: {
		calendars: [
			{
				symbol: "calendar-check",
				url: "webcal://www.calendarlabs.com/ical-calendar/ics/75/UK_Holidays.ics"
			}
		]
	}
},

2. Edit the custom.css file located in ~/MagicMirror/css to include the following

div.module.calendar {
    float: left;
    padding-right: 20px;
}

3. restart the mirror

The result should be something similar to this:

@hattlegr it sounds like you’ve got at least a couple of issues here. One relating to the install of the module and another related to the authorisation process. Let’s take them one at a time.

What command are you running to install the module and which directory are you in at the time?

@hattlegr okay, so the Magic Mirror creates logs in two places.

1. On the Pi itself. If you use pm2 to start your mirror, these can be viewed by running pm2 logs mm

2. In the browser console. These can be viewed in the browser’s Developer Tools (usually activated by CTRL-SHIFT-i).

Let us know what you find.

@hattlegr how about the logs or debug console?

@hattlegr okay so we’re making progress. What is the output in the log file or the debug console in the browser? Once you’ve authorised the module, was a tokens.json file created in the MMM-Strava module folder?

@lavolp3 said in MMM-Strava:

@hattlegr You need to create an application in your strava account to use this module. Have you done that?

1. Go to www.strava.com/settings/api
2. Create an application. As far as I understand the only really important value is the callback domain. I GUESS (!!) this would need to be http://localhost OR the hostname (or IP) of your magicmirror, something like http://magicmirror
3. Then you get a client secret and access token, which you need for the further procedure.

The easiest way to authorise the module is

1. On the My API Application page update the application by entering localhost as the callback domain.

2. Once the Strava API application is updated, copy the client id and client secret from the same page, then use these to update the module configuration in the config.js file and restart the Magic Mirror.

3. Finally, on the Pi itself, browse to http://localhost:8080/MMM-Strava/auth/ and follow the steps.

If it helps, here are the settings I’ve been using to test the module:

@hattlegr thanks for testing and sorry to hear you’re having issues. Perhaps you can post your config and any logs from the mirror.

@lavolp3 said in MMM-Strava:

@ianperrin … it might be worth to think about several rotating charts. Like for weekdays and a range of several months?

Good idea, could you add it as an issue in the Github repository so I don’t forget it?