Raspberry Pi Spotify Status - The Sequel

 Background

Around a year ago, I set up a Raspberry Pi with a screen to show my Spotify status using a project on Github called "Nowify." While this is an excellent project and worked well for most of my needs, I simply did not know how it was set up, as I was modifying someone else's project rather than just making my own. While possible, it became quite tricky to look through the project and add features according to my needs (automatic screen on/off, fixed scaling at small screen sizes, etc.) because I simply had no idea how the project had been put together.

CS50

Over summer break and into the school year, I had been taking Harvard's free CS50 course, learning C, Python, and eventually HTML and CSS. For the final project for the course, I took a crack at recreating my favorite parts of Nowify, but with a few modifications to fit my needs. I was using my new knowledge of web app development, and hosting Python web apps with Flask, and got a rough demo together pretty quickly. I turned in the project in late November with a video, but I've continued working on it after in order to fix bugs and add features.

How it Works

I started my project by setting up a basic site to show raw JSON of my Spotify data utilizing Spotipy, an open source Spotify Python API. Later on, I wrote some JavaScript to poll the Spotify API every two seconds to check for changes. If the song has changed, the page is refreshed with the new info.

I compute the color palette using a JavaScript library called ColorThief which grabs the dominant color for the background, and a contrasting alternate color from the palette for the text. The text color is not just black or white, but instead samples a few alternate colors to form an entire palette, and finds a color from that palette that contrasts with the selected background color.

I use Google Material Symbols for the playback control icons. This allows for easy scaling to different screen sizes without needing separate images.

Difficulties and Struggles

Getting arrangement of elements on screen and scaling for different displays was a challenge. I wanted it to look at least tolerable on anything from a PC with a landscape screen, to something like a mobile phone. It isn't perfect, but it's fairly solid. Additionally, finding at what point the text should be white instead of black was difficult. I had to make sure that the song details would be easily readable no matter what song was playing at that moment.

Next Steps

Currently, only myself and up to 19 other people I invite can use my Spotify Status website unless they host it themselves. This is because of the fact that the Spotify API limits you to 20 users until you request a quota extension, which requires a real person working at Spotify to look over your project and approve you. I have yet to send in this request, but I fully intend to do so. For now though, head to the Github repo for this project (which can be found here), and you can host it yourself using a service like Fly.io or manually, and create your own Spotify developer app.