Garmin Spotify Widget

A Garmin widget that queries and controls your Spotify player using the Connect IQ OAUTH system.

Edge 1030+	Edge 1040

Supported Devices

• Garmin Edge 1030+ (tested on physical device)
• Garmin Edge 1030
• Garmin Edge 1040

Dev Notes

• Populate Keys.mc with values from your own Spotify API app created here: https://developer.spotify.com/dashboard

• In SpotifyButtonDelegate.mc, you need to uncomment the event.getInstance().setState(:stateDefault); call due to a bug in the simulator that fails to reset buttons to their default state after selecting on touch screens. If you don't do this, the button will only be able to be selected once.

• The simulator's oauth browser implementation doesn't seem to support javascript, which Spotify's oauth authorize page needs to function. As a workaround, you can:

  • Separately generate a refresh token:
    • Load this link in a browser (with your spotify client-id inserted)
    • Sign into spotify and approve access request
    • You will be redirected to http://localhost/?code=your-access-code (copy the code from url)
    • Use code and your client-id:client-secret hash to request refresh token:

      curl --location 'https://accounts.spotify.com/api/token' \
      --header 'Authorization: Basic <spotify-client-id-client-secret-hash>' \
      --header 'Content-Type: application/x-www-form-urlencoded' \
      --data-urlencode 'code=<code-copied-from-previous-step>' \
      --data-urlencode 'redirect_uri=http://localhost' \
      --data-urlencode 'grant_type=authorization_code'
      

  • Set refresh token as RefreshToken variable in Keys.mc
  • Uncomment setProperty("refresh_token", $.RefreshToken); in App.mc

Credits

• End icons created by Those Icons - Flaticon