|
| 1 | +# Color Kit Grande Spotify Controller |
| 2 | + |
| 3 | +[](https://github.com/ThingPulse/esp32-spotify-remote/actions) |
| 4 | + |
| 5 | +Spotify controller application for the [ThingPulse Color Kit Grande](https://thingpulse.com/product/esp32-wifi-color-display-kit-grande/). |
| 6 | + |
| 7 | +[](https://thingpulse.com/product/esp32-wifi-color-display-kit-grande/) |
| 8 | + |
| 9 | +## Purpose of this project |
| 10 | + |
| 11 | +Using the ThingPulse Spotify Controller you control a Spotify player (phone, browser, etc) from an Espressif ESP32 microcontroller. |
| 12 | +Album artwork as well as title and artist name are loaded from the Spotify Web API over WiFi and displayed on a color TFT touch-screen. |
| 13 | +The currently playing song can be paused, resumed and skipped to the next or previous song in the playlist. |
| 14 | + |
| 15 | +A full OAuth 2.0 web flow is used to acquire the necessary access and refresh tokens to permit the user to control the player. |
| 16 | +In order to run this project on your device, you will need to setup an application on your Spotify dashboard (instructions below). |
| 17 | + |
| 18 | +## Features |
| 19 | + |
| 20 | + - Artwork download |
| 21 | + - Control player on touch screen: play, Pause, next, prev |
| 22 | + - Authentication and authorization (OAuth 2.0 flow) on device. |
| 23 | + |
| 24 | +## Service level promise |
| 25 | + |
| 26 | +<table><tr><td><img src="https://thingpulse.com/assets/ThingPulse-open-source-community.png" width="150"> |
| 27 | +</td><td>This is a ThingPulse <em>community</em> project. See our <a href="https://thingpulse.com/about/open-source-commitment/">open-source commitment declaration</a> for what this means.</td></tr></table> |
| 28 | + |
| 29 | +## Setup instructions |
| 30 | + |
| 31 | +### Precondition |
| 32 | + |
| 33 | +The below instructions assume a properly configured Visual Studio Code installation with PlatformIO. |
| 34 | +See our [instructions](https://docs.thingpulse.com/guides/esp32-color-kit-grande/#development-environment) if you need help with this. |
| 35 | + |
| 36 | +### Get access to the Spotify API |
| 37 | + |
| 38 | +1. Go to [https://developer.spotify.com/dashboard/login](https://developer.spotify.com/dashboard/login) and login to or sign up for the Spotify Developer Dashboard |
| 39 | + |
| 40 | +2. Select "My New App" |
| 41 | + |
| 42 | + <img src="./images/SpotifyDashboard.png" width="400"> |
| 43 | + |
| 44 | +3. Fill out the form. Give your new app a name you can attribute to this project. |
| 45 | +It's safe to select "I don't know" for the type of application. |
| 46 | + |
| 47 | + <img src="./images/SpotifyAppSignUp1.png" width="400"> |
| 48 | + |
| 49 | +4. At the end of the 3 steps click "Submit" |
| 50 | + |
| 51 | + <img src="./images/SpotifyppSignUp3.png" width="400"> |
| 52 | + |
| 53 | +5. Set the unique Client ID and Client Secret as values for the respective variables in `settings.h`. |
| 54 | + |
| 55 | + <img src="./images/SpotifyCredentials.png" width="400"> |
| 56 | + |
| 57 | +6. Click on "Edit Settings". Add "http://tp-spotify.local/callback/" to the Redirect URIs section. |
| 58 | + |
| 59 | + **NOTE** If you are running more than ThingPulse Spotify Remote in the same WiFi network, you should choose a unique name rather than "tp-spotify". Regardless of what you choose it has to reflect what you set for `SPOTIFY_ESPOTIFIER_NODE_NAME` in `settings.h` in the project. |
| 60 | + |
| 61 | + <img src="./images/SpotifyAppSettings.png" width="400"> |
| 62 | + |
| 63 | +7. Don't forget to save your settings. |
| 64 | + <img src="./images/SpotifyAppSettingsSave.png" width="400"> |
0 commit comments