https://github.com/filipporaciti/spotifydisplay

This project uses an ESP32 connected to an ILI9341 display, allowing real-time display of various information about the song currently playing on Spotify.
https://github.com/filipporaciti/spotifydisplay

esp32 ili9341 spotify spotify-api tft tft-display

Last synced: 3 months ago
JSON representation

This project uses an ESP32 connected to an ILI9341 display, allowing real-time display of various information about the song currently playing on Spotify.

Host: GitHub
URL: https://github.com/filipporaciti/spotifydisplay
Owner: filipporaciti
License: apache-2.0
Created: 2025-03-11T08:58:35.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2025-03-29T19:07:14.000Z (about 1 year ago)
Last Synced: 2025-03-29T19:28:09.495Z (about 1 year ago)
Topics: esp32, ili9341, spotify, spotify-api, tft, tft-display
Language: C
Homepage:
Size: 4.88 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# 📌 SpotifyDisplay

## 📖 Description
This project uses an **ESP32** connected to an **ILI9341 display**, allowing real-time display of various information about the song currently playing on Spotify.
⚠️ WARNING!!! You have to need a spotify premium account.

## 🛠️ Hardware Used
- **ESP32**
- **ILI9341 display with touchscreen**

## 📦 Dependencies
To compile the project, the following libraries are required:

```
XPT2046_Touchscreen
Adafruit_ILI9341
Arduino_JSON
HTTPClient
JPEGDEC
base64
```

## 🔧 Installation
1. Connect the components following the schematic below:
![schema](./images/Schematic_esp32_display.png)
2. Clone the repository:
```bash
git clone https://github.com/filipporaciti/SpotifyDisplay.git
```
3. Before uploading the project, we need to calculate the calibration values for the touchscreen:
* Open the project in the `displayCalibration` folder
* Upload the project to the ESP32
* Touch the red square and note down the x and y values displayed on the screen
* Touch the yellow square and note down the x and y values displayed on the screen
4. Open the project in the `SpotifyDisplay` folder
5. Change the TS_MINX value with the x value from the red square, TS_MINY with the y value from the red square, TS_MAXX with the x value from the yellow square, TS_MAXY with the y value from the yellow square
6. Rename the `secrets.h.example` file to `secrets.h` and modify it with the correct values:
* WIFI_SSID and WIFI_PASSWORD with correct wifi credentials (you don't have to set both wifi credentials)
* For CLIENT_ID and CLIENT_SECRET values you have to create a new app [here](https://developer.spotify.com/dashboard) (you have to set `Redirect URIs = http://127.0.0.1:5000/redirect` and `APIs used = Web API`)
* For ACCESS_TOKEN and REFRESH_TOKEN you can use [get_spotify_token.py](./get_spotify_token.py) file.
7. Upload the code to the ESP32
8. (Optional) The files to 3D print the case are located in the `case_spotify_display` folder

## 🚀 Features
The firmware allows you to:
* Display the name of the song, artist, and album image currently playing
* Play, pause, skip forward, or go back through the song using the touchscreen
* You can set up to two Wi-Fi networks to connect the ESP32 to the internet

## ❌ Known Issues
* The artist and song names get cut off when they reach the edge of the display (see demo image)
* Sometimes the image may not display (this happened to me only once)

## 📸 Screenshot/Demo
* Currently playing song on Spotify