MMM-Strava

ianperrin

An updated BETA version of MMM-Strava is available which includes a chartType option to toggle between classic bar chart and a new radial histogram

Below is a sample config and screenshot - note the histogram will display in grayscale, colours can be achieved using custom.css

{
	module: "MMM-Strava",
	header: 'Strava Radial Chart',
	position: "top_right",
	config: {
		client_id: "xxxxx",
		client_secret: "xxxxx",
		mode: "chart",
		chartType: "radial",
		period: "ytd"
	}
},

Please report any comments/issues here, or on github

MisterT

@ianperrin thx for your reply, I’m the noob in .js but i tried to understand the problem and the report is about “toLowerCase”. In MMM-Strava.js, if i modify the three config lines witch contain the synthax “toLowercase”, the result on Magic Mirror is a rotation of MMM-Pages but a message “Undefined” for MMM-Strava

    this.config.mode = this.config.mode.toLowerCase();
    this.config.period = this.config.period.toLowerCase();
    this.config.chartType = this.config.chartType.toLowerCase();

hope these light explanations can help you :face_screaming_in_fear:

ianperrin

@MisterT can you post the modified versions of these lines which enabled MMM-pages to rotate, but caused the undefined error for MMM-Strava?

I’m also curious about the error you posted in the other thread as it seems to refer to a style sheet included by another module…

MisterT

@ianperrin i don’t know what i write and the meaning but if i modified these 2 lines (i don’t have the third line), i have MM rotation but undefined on MMM-Strava

   this.config.mode = this.config.mode.toLowerCase().mode;
  this.config.period = this.config.period.toLowerCase().period;

The other error in wallberry module is a css error but i don’t think that it’s the problem of rotation because MMM-pages works with this error

ianperrin

@MisterT I’ve just pushed an update to the module which may have fixed it. Can you update the module and let me know how it works out?

MisterT

@ianperrin, i update your module and…tada it works :thumbs_up: great job
MMM-Pages rotate and MMM Strava is visible
Everything is good now

I also try your other update about radial chart vizualisation and it’s great. I tested with year to date for bike and run and its’awesome. Just 2 remark:

In my opinion the radial gaphic it’s just a little too big and the graphic overlaps the other module.
I think we need informations about custom css in order to display colors about kilometers like for exemple:
less 10 km for running in a month : red color
from 10 to 30 km for running in a month: orange color
over 30 km for running in a month : green color

see you next time

ianperrin

@MisterT - Great to hear it’s working now 👍

ianperrin

@MisterT said in MMM-Strava:

the radial gaphic it’s just a little too big and the graphic overlaps the other module.
I’m working on making the chart size customisable - watch out for further updates

I think we need informations about custom css in order to display colors about kilometers like for exemple:
less 10 km for running in a month : red color
from 10 to 30 km for running in a month: orange color
over 30 km for running in a month : green color

I like the idea of colouring the bars based on a target. Will think about this one.

In the meantime, to customise the colours of each bar in the radial chart, add the following to the custom.css file in ~/MagicMirror/css.

.MMM-Strava svg path.bar.interval-1 {
  fill: #67b7dc;
}

.MMM-Strava svg path.bar.interval-2 {
  fill: #6794dc;
}

.MMM-Strava svg path.bar.interval-3 {
  fill: #6771dc;
}

.MMM-Strava svg path.bar.interval-4 {
  fill: #8067dc;
}

.MMM-Strava svg path.bar.interval-5 {
  fill: #a367dc;
}

.MMM-Strava svg path.bar.interval-6 {
  fill: #c767dc;
}

.MMM-Strava svg path.bar.interval-7 {
  fill: #dc67ce;
}

.MMM-Strava svg path.bar.interval-8 {
  fill: #dc67ab;
}

.MMM-Strava svg path.bar.interval-9 {
  fill: #dc6788;
}

.MMM-Strava svg path.bar.interval-10 {
  fill: #dc6967;
}

.MMM-Strava svg path.bar.interval-11 {
  fill: #dc8c67;
}

.MMM-Strava svg path.bar.interval-12 {
  fill: #dcaf67;
}

Note: As the radial chart is in beta, the css classes may be subject to change.

mattx38

This post is deleted!

matt216

Hi there. Icons. Recently updated my config to include ‘hike’ activity, and it does, but without the nice little icon beside (like the little shoe beside run activities, and bike beside cycle activities). In ‘chart’ mode. Any ideas?

huso15

why am I getting this error?

pi@raspberrypi:~/MagicMirror/modules/MMM-Strava $ npm install --production
audited 1631 packages in 19.838s

73 packages are looking for funding
run npm fund for details

found 0 vulnerabilities

– how do I fix this funding issue? I don’t have any luck with “nom fund”.

I’m also having difficulties connecting to http://localhost:8080/MMM-Strava/auth/ and I’m thinking it’s because of this funding. Any help would be appreciated.

Thank you!

Wilson101

@ianperrin hello i have tried to run this i am a complete beginner learning as i am going, however trying to get this radial version which i think looks really cool it gets stuck, i launch my magic mirror and then it gets stuck on the “loading…” process

ruudvddries

@ianperrin Is it possible to shrink the radial display from the current 500px width to something smaller. Like 300px?

The radial display for strava is awesome. With its default size it somewhat messes up my MagicMirror layout.

I already tried some CSS and JS adaptions but it not yet helped to achieve what I wanted. Any help is welcome!

Greetings,

Ruud

thymon

Hello
Today I have an error message on display :

502 - undefined

Any idea for this ?

ctatos

Hey Ian, are you aware if the recent changes in API will affect the module? For non-paying Strava users, it seems like the API request goes through but no data is fetched…

From Strava: “We realize these API changes could be especially challenging for some developers, so they’ll be non-breaking for 30 days, returning empty data during that time so they can make necessary adjustments. After June 18th, those endpoints will either omit the data or return an error message.”

lavolp3

@ctatos said in MMM-Strava:

For non-paying Strava users, it seems like the API request goes through but no data is fetched…
From Strava: “We realize these API changes could be especially challenging for some developers, so they’ll be non-breaking for > 30 days, returning empty data during that time so they can make necessary adjustments. After June 18th, those endpoints will
either omit the data or return an error message.”

That’s only valid for segment leaderboards which are not used in this module.
This module only calls user statistics which will still work with the changes.

ctatos

@lavolp3 Oh OK that’s good news. Do you know why the YTD stats stopped working from June 1st? or maybe it’s only on my side…

daymo87

Hi is there a way to display units in imperial for just the strava module & not the whole magic mirror?

Thanks

Damon

Lagmin

Hello,

I can’t get this step:
Authenticate the module to allow access to the Strava API.
Browse to the Strava authentication page: http://localhost:8080/MMM-Strava/auth/ - the exact URL may vary depending on your configuration.

Simply it doesn’t connect to my local host which is 192.168.0.177 (I am replacing with it the “localhost” in page adress).
It is saying that page is not existing… Any ideas?

Arek

ianperrin

@Lagmin where are you accessing the MagicMirror from?

If you are doing this from the Raspberry Pi, the url will probably start with http://localhost:8080

If you are doing this from another computer on your network, the url will start with the IP address, http://192.168.0.177:8080 - though you will need to set the ipWhitelist option in the configuration file first.