Spotify Display: AZ Touch control - Part 2

After the last part dealt with the basics of data retrieval via the Spotify API, this part deals with a user-friendly presentation on a display. The AZ-Touch is suitable as a display, as it offers a touch function, the microcontroller board only needs to be plugged in and can be operated in the supplied housing in a visually appealing way. The touch function is used to implement control via the API.

This part is based on the first part and assumes the installation of the ESP32 package.

Hardware:

Board with ESP32 chip, for example: Dev Kit C V2 or Dev Kit C V4 USB-C

AZ-Touch (2.8” recommended)

Software:

To operate the ILI9341 display of the AZ-Touch via the ESP, the library TFT_eSPIlibrary from Bodmer. Furthermore, to display the album cover, the TJpeg decoderlibrary is required. To determine the touch coordinates, the XPT2046 library is used to determine the touch coordinates.The libraries can be downloaded as.zip files via the respective link and added in the Arduino IDE under Sketch>Include Library>Add.ZIP Library....If you are using PlatformIO, copy the following under lib_deps in the platformio.ini file:

paulstoffregen/XPT2046_Touchscreen@0.0.0-alpha+sha.26b691b2c8

bodmer/TFT_eSPI@^2.5.43

bodmer/TJpg_Decoder@^1.1.0

bblanchon/ArduinoJson@^7.2.1

The driver and connection definition must be stored in the folder of the TFT_eSPI library folder. To do this, copy the following lines into the user_setup.h file in the library directory:

#define USER_SETUP_INFO "User_Setup"

#define ILI9341_DRIVER  // Generic driver for common displays

#define TFT_RGB_ORDER TFT_BGR  // Color order Blue-Green-Red

#define TFT_WIDTH  240
#define TFT_HEIGHT 320

#define TFT_MISO 19
#define TFT_MOSI 23
#define TFT_SCLK 18
#define TFT_CS  5  // Chip select control pin
#define TFT_DC  4  // Data Command control pin
#define TFT_RST  22

#define TFT_BL  15  // LED back-light control pin
#define TFT_BACKLIGHT_ON LOW  // Level to turn ON back-light (HIGH or LOW)

#define LOAD_FONT2
#define LOAD_FONT4
#define SPI_FREQUENCY  27000000

Alternatively, the file can also be here can be downloaded here.

1 Showing the metadata on the Display

1.1 Name, artist, album

As the data is already stored in the getCurrentPlayingTrack() function, from the first part these now only need to be stored temporarily in the corresponding variables.

String title, artist, album, imgUrl, key;
long progressT, durationT, lastAPIcall;
bool playing, lastStatus;

The representation on the display is in the printScreen() function. A text and a y-value can be specified here, the text is automatically centered in the middle.Furthermore, the method cleanString() method is also available. This removes brackets and hyphens so that the text fits into one line of the display. The length is also limited to 27 characters.

This display of the text information is used in the final program code in the printCurrentData() function in the final program code.

1.2 Album cover

To make the user interface more appealing, the album cover image should be shown on the Display. The API already provides a link to this image. getCurrentPlayingTrack() function, the following line must be inserted:const char* albumImage = doc["item"]["album"]["images"][2]["url"];Three different images are provided By the Three different images are provided By by Three different images are provided By, it is recommended to use the smallest image (index 2; 64x64 px), as otherwise the download would take longer and the size of the internal file system would no longer be sufficient.

The cover image is downloaded using the downloadImage() function to the internal file system.

HTTPClient http;
  http.begin(url);
  int httpCode = http.GET();

  if (httpCode == HTTP_CODE_OK) {
    File file = LittleFS.open(filePath, FILE_WRITE);
    if (!file) {
      Serial.println("Fehler beim Erstellen der Datei!");
      return false;
    }

    WiFiClient* stream = http.getStreamPtr();
    uint8_t buffer[128];
    size_t size;

    while ((size = stream->available()) > 0) {
      int c = stream->readBytes(buffer, sizeof(buffer));
      file.write(buffer, c);
    }

    file.close();
    http.end();
    return true;
  } else {
    Serial.printf("HTTP-Fehler: %d\n", httpCode);
    http.end();
    return false;
  }

First, a connection to the URL of the image is established. A stream is then created and the data from the stream is transferred to the buffer, which is then written to the corresponding file.

Once the file has been downloaded, it is saved in printAlbumCover() with the help of the TJpgDec library to the display.

1.3 Progress bar

A progress bar should also be displayed. In the getCurrentPlayingTrack() function already queries the total duration and the time already played via the API and calculates the current progress as a percentage.However, since the bar is to be updated continuously in order to obtain a smooth Display and the API call takes some time, the internal time is stored temporarily with each API request. In the final calculation, the time that has elapsed since the query is added to the time already played. A rounded rectangle with a maximum length of 300 px is used as the bar. As this length corresponds to 100%, the length can be calculated By progress*3.

This progress bar is displayed in printProgress() and shown on the display.

if(!playing) return;
  float progress;
  progress = (((float)progressT + (float)millis() - (float)lastAPIcall)/(float)durationT) * 100.0;
  if(progress > 100) progress = 100;
  else if(progress < 0) progress = 0;
  tft.fillRoundRect(10, 110, (int) progress * 3, 10, 5, TFT_GREEN);

If nothing is played, the method can be terminated, otherwise the progress is calculated as a percentage. The difference between the current time and the time of the last API query is added to the time retrieved from the API in order to be able to update the progress bar independently of API queries.

You can download the complete program here download.

2 Playback control

To use these functions, a Spotify Premium Account is required.Furthermore, the authentication from the first part must be carried out again with additional authorizations (scopes). Please use the following link: https://accounts.spotify.com/authorize?response_type=code&client_id=YOUR_CLIENT_ID&scope=user-read-currently-playing%20user-read-playback-state%20user-modify-playback-state%20user-read-playback-state&redirect_uri=http://127.0.0.1:8888/callback

The previously saved authorization token must be deleted in setup(). The following commands are required for this:

prefs.begin("Token");
prefs.remove("refresh");
prefs.end();

After the token has been deleted, remove the commands again and upload the program again. Copy the new refresh token to the serial monitor as in the first part.Information on the API calls can be found in the documentation.

To make operation easier, symbols in the form of a double triangle on the left and right (fast-forward, rewind) and a triangle or pause symbol in the middle should be displayed in the bottom line.These symbols are most easily realized using the graphic commands of the Display Library. The two arrows to the left and right can be shown once on the display together with the information.

Displaying the double arrows in the printCurrentData() function:

tft.fillTriangle(30, 190, 60, 175, 60, 205, TFT_WHITE);
  tft.fillTriangle(45, 190, 85, 175, 85, 205, TFT_WHITE);

  tft.fillTriangle(320-30, 190, 320-60, 175, 320-60, 205, TFT_WHITE);
  tft.fillTriangle(320-45, 190, 320-85, 175, 320-85, 205, TFT_WHITE);

The symbol of the middle start/stop button must be changed depending on the status. This is done as with the function printCurrentData() function, which is compared with the current value and the function is only called if there is a change.

There is an extra function for the pause/play character printMidButton():

tft.fillRect(140, 165, 50, 50, TFT_BLACK);
  if(playing) {
    tft.fillRect(150, 175, 10, 30, TFT_WHITE);
    tft.fillRect(170, 175, 10, 30, TFT_WHITE);
  }
  else {
    tft.fillTriangle(175, 190, 145, 175, 145, 205, TFT_WHITE);
  }

First, the existing symbol is overwritten with a black square. Then the corresponding symbol is drawn.

In order to process the user input, the touch coordinates must be queried and assigned. This is done in the method touch():

if(digitalRead(27)) return;
  tone(21, 1000, 100);
  p = ts.getPoint();
  Serial.println("X: " + (String)p.x + " Y: " + (String)p.y);
  if(p.y < 2000) {
    HTTPClient http;
 
    int responsecode;
   
    if(p.x > 2000) {
      Serial.println("rew");
      http.begin("https://api.spotify.com/v1/me/player/previous");
      http.addHeader("Authorization", "Bearer " + accessToken);
      http.addHeader("Content-Length", "0");
      responsecode = http.POST("");

    }
    else if(p.x > 1200) {
      Serial.println("pause");
      if(playing) http.begin("https://api.spotify.com/v1/me/player/pause");
      else http.begin("https://api.spotify.com/v1/me/player/play");
      http.addHeader("Authorization", "Bearer " + accessToken);
      http.addHeader("Content-Length", "0");
      playing = !playing;
      printMidButton();

      responsecode = http.PUT("");
    }
    else if(p.x > 300) {
      Serial.println("fw");
      http.begin("https://api.spotify.com/v1/me/player/next");
      http.addHeader("Authorization", "Bearer " + accessToken);
      http.addHeader("Content-Length", "0");
      responsecode = http.POST("");

    }
   
    Serial.println(responsecode);
    Serial.println(http.getString());
  }

If the display was not touched (interrupt HIGH), the function is aborted. Otherwise the touch coordinates are determined. If the touched point is in a defined area, a connection to the corresponding URL is established. Headers with the authorization and the content length are added for each connection.

Use the output in the serial monitor to check whether the coordinates match the areas and correct them if necessary.

You can download the complete program here download.

Once the project has been tested, the rear of the AZ-Touch housing can be screwed to a wall and operated standalone with a power supply unit. This completes the project. You are also welcome to integrate further functions of the Spotify API. The colors of the icons and the progress bar can also be changed as desired.

Have fun building your own :)

Spotify and Spotify Premium are registered trademarks of Spotify AB. This blog is not affiliated with Spotify AB and is neither sponsored nor endorsed By Spotify AB. All brand names, logos and trademarks used in this post belong to their respective owners and are used for descriptive or identification purposes only.