Python

MusicShare v0.4 – New Look, New Features!

I am super excited to share the next major update to MusicShare today! With the core functionality of the app finished in v0.1-0.2, the next updates were focused more on the visual, presentation, and user interface of the app! In v0.3 I put a big focus on the home page of the app and how the user is presented with the main information that the app provides, replacing the old style rectangles with a custom-made, very nice looking overflow, scrolling page. I love this look and how nice it looks with the album art zoomed in and the title with the user’s profile picture at the top. Another part of this new look that I wanted to put a lot of emphasis on was animations. It now has really nice animations when the app opens, when a page appears, when you choose to listen to what your friends are listening to, etc. I really think it’s important to signify selections or options that the user selects with a nice looking animation.

I think this new homepage look gives a nice and elegant feel to the app. Here is a layout of what each version accomplished:

v0.1: Basic functionality – Getting the core purpose of the app working.
v0.2: Basic visuals – Making a basic homepage layout
v0.3: Visual overhaul – New homepage with animation work
v0.4: Profile overhaul – New profile look, features, and customization options

One thing I have always thought about most social media services is how bland the profiles look. I understand keeping consistency with branding and company imagery is a thing, but since when does that mean we have to throw out customization? While there are still more things to add and improve on, I am liking the look and feel of the profile page for right now, and am happy that it gives me room to build off of it. A big goal of mine is too really make the profile page special with a lot of customization. The profile page right now has options for profile picture, banner, profile color (accent your profile with a color for others to see), and something that I just finished: profile backgrounds!

This is just step 1 of profile customization, but I’m happy with how the feature is starting to turn out. It has a selection of animated banners that the user can choose to replace their banner with. The final form of this is going to be much grander and more robust, going well above just the banner, but the underlying code is complete and should be more about implementation going forward.

What’s next: Up until now I have seldom worked on this project, just here and there, maybe a few days a month at most. I plan to dedicate a lot more time to this, so development, and therefor development updates, should come more frequent and the app should start progressing much faster.

So, I am divided over a few choices to make. First, do I keep it Apple Music only. I think this is the first choice I have to make because all my future ideas rely on this. For example, I have also been debating adding a direct messaging feature, right now the message button opens a text message to that person. If I keep it Apple Music only I think this would be a good way to keep it, but if I make it work with other music services like Spotify, I would probably want to implement my own messaging system and not rely on text messaging. Next, accounts. Right now it has a rudimentary accounts and user system, if I am going to stick with Apple Music only, then I will incorporate Sign in with Apple as the only authentication method, as staying with Apple Music only will keep the app on Apple devices only. If I build functionality for other services, then I will probably put focus on a more robust custom user and accounts system, then incorporate the Sign in with Apple feature to work with the custom authentication system. I also have some really great ideas to further the customization and profile improvements, I’m super excited to make it, it’s going to be really great!

I’ll be sharing progress with a new post here and also on my Twitter and LinkedIn accounts. Excited to make some really cool things in this app! Thanks for anyone that’s reading and following along! 🙂

SpotifyGUI 2 – Touchscreen Controller for Spotify

SpotifyGUI 2

I am back with an update to SpotifyGUI! Since this thing has been working so well, it just sits on my desk and constantly updates with whatever I am playing, I have not had a need to update to much, other than to add more features! So… I ended up rewriting the entire app! The reason I did was because I felt like I was reaching the limitations what Python offers in visuals. Every new feature I thought about making for it I found myself thinking “Well, will Python be able to handle this?”

Python is a great language to do a lot of simple things really quickly, but consequently it makes implementing complex things that much harder, when compared to another language. I found that throughout development, especially towards the later stages of creating and designing the UI, I would think “Wow, it would be so much easier to do this in C.” or “This would be one line of JS…” This is what ultimately led me to rewriting the project. The language I chose was JavaScript, for many reasons, but mainly because of it’s ease of creating really nice looking UIs.

Don’t you worry though! Our best bud Python is still there under the hood! The new codebase consists of a Python back-end that handles the communication with the various APIs (Spotify, Lyrics, etc.), that then hands that information off to a JavaScript front-end that handles the task of making it pretty! And oh my is it better. I really liked the design that I had made with the Python-made GUI so I set out to just remake it with JS/CSS. Then, integrated it into the Linux distro for automatically running in a web app that is nice and neat to execute at startup, with it also being managed from the Python back-end.

Another big update is the display! I opted to go with this 10-inch OLED touchscreen that I feel better allows the elements the space they need! The upgrade from LCD w/ IPS panel to OLED makes the visually really pop out and gives an amazing vibrancy to the colors than the prior display! With the new space I definitely looking at ways to redesign the UI to make better use of the new real estate!

It’s a whole lot nicer. It’s snappier, it’s quicker. It’s responsiv-…er. It always for all of the multi-threaded capabilities of JavaScript with the reliability of Python. This includes and magnitude less amount of error-handling, and no longer being reliant on GTK.

While rewriting I also completed most of the goals I had set out to on the last post and more!

I reversed engineered the Spotify Canvaz API. It now downloads the short mini clips that are usually only available within the Spotify mobile apps and replaces the album art with the video on loop.
Refactored the background color picker. Now it picks a color that makes a lot more sense, including a gradient but only if it determines if it would be better than a single color. This is in contrast to the previous algorithm which would pick an average of the 5 more common occurring colors in the album art.

And more! Here are some new things implemented as well!

Transitions! Oh the wonders of CSS and JS. The app now has full and proper transitions for all elements. So when changing songs the text, controls, album art, and other elements fade out and the new ones fade in. The background fades into the new color. Lyrics fade between lines. It all looks really nice and modern.
Progress bar at the bottom keeps track of where in the song you are currently listening (with the progress color also having another determined color that contrasts with the background color.
Background gradient but only when it looks the best! The color picking algorithm is a whole lot better and it will determine if the album art has enough differing colors to make a good looking gradient, or if it should just stick to a single color background.

Wow. Lots of changes! Still more to go! I am happy were it is right now, but I will be updating it here and there because I have a new set of goals and ideas! So here goes:

Proper use of space. Empty space should be filled and elements should find their home in more general areas instead of at the edges.
Image modification. Admittedly, the image modification of the album art is easier in Python than it is in JS, which is why right now there are no rounding of corners and vibrancy changes to match the background like there is in the Python version before.
Sidebar menu to pick music, playlists, artists, etc. from recently played or Spotify main page.

Stay tuned! Lots of great things to come!

January 11, 2025 by brandon Devices Graphics JavaScript Music Programming Python Raspberry Pi Raspberry Pi 4 UI/UX 0

MusicShare – Stay Connected With Your Friends Through Music

Why can’t music be a social experience? This is the question I asked myself before I created this app, but now I don’t ask myself that anymore because I made it one! Back in my day we all used to gather around the campfire and listen to our tunes on the old radio… together! (I’m joking, I’m a Gen X).

You get the point. Now, I listen to my Taylor Swift alone with my headphones on, not getting to experience the great music with anybody else. No longer! MusicShare is an iOS app that fills in what’s missing in this age of ‘solo-listening’ (I just came up with that)!

MusicShare is an easy way to quickly see what your friends and family are currently listening! The app provides a streamlined interface that shows what you are listening too as well as a list of your friends currently playing, updates in the background as music changes, with a built in user profile system that establishes an account on a remote server including user-selectable profile pictures.

In addition to these features, MusicShare also allows you to interact with your friends and what they are currently listening too. Simply tapping on your friends name reveals a menu that lets you either “Play Song” which plays the song for yourself, or “Listen Along” which opens a listening session between you and your friend, allowing you to follow allow with what they’re listening to so you can rock out together! The listen along with keep you in sync with your friends playback, even if they scrub, seek, skip, or switch to a whole new thing altogether! When this session is opened, MusicShare finds a new home in your Dynamic Island (on supported devices) to indicate that it is maintaining its connection with your friend. In a future version this ability will be expanded on, allow for bidirectional control after permission is requested and your friend accepts, as well as controls to request/accept/deny that permission directly from the Dynamic Island. Take that, ‘solo-listeners’!

The app is written in Swift and utilizes SwiftUI for the design, graphics, animations, etc, MediaPlayer for playback capture, MusicKit for lookup of media metadata like album art, and PhotosUI for photo selection complete with permission-less upload. The backend server is written in Python and MySQL, storing the user accounts as well as currently playing information in the database, accessible through SSL requests.

I had a lot of fun creating this app and can’t wait to update it even more to include many more features!

Stay tuned for updates!

MusicShare: Say Goodbye to Solo-Listening™

August 7, 2024 by brandon Graphics Music MySQL Operating System Programming Python Swift UI/UX Uncategorized iOS iPhone 0

SpotifyGUI – Touchscreen Controller for Spotify

The last thing I would have thought a beautiful GUI could be made in was only one language: Python. One of the most diverse languages, Python is known to be the perfect tool in a developers arsenal for a wide variety of logistical tasks and projects. Being the most used scripting language in the world, as well as used by the biggest companies, Google, Facebook, Chase, Spotify, and that’s just to name a few. Python does a lot of things well, but one language you don’t reach for to make a GUI? The answer is also Python.

Now, while I could have made this in C to make it more native, JavaScript to make it prettier, or Java to give me a headache, I chose Python. Once I figure out why I did this I will update.

What I have made is a Python application that uses the Spotipy library (which is just a wrapper of the Spotify HTTP API) to facilitate an OAuth2 login to a Spotify account by opening a Spotify login screen, as well as hosting an HTTP server to recieve the localhost callback from the web browser to grab the authorization token provided by Spotify for the users account. This token is then stored locally and the proper steps as designed by Spotify are used to “refresh” that token with the user’s account information to generate new tokens without the need for a login each use.

The program then goes on to use the built-in “TKinter” Python library to create a scene and frames that are used to construct the GUI. TKinter is a really great library as it does not depend on a particular OS support and a GUI can be made that will operate on any platform (Windows, Mac OS, Linux, etc.), anywhere Python can be run.

Functions are defined to control each element of the GUI with all visuals being contrast-reversible. The program upon startup and after authentication, will go on to poll the Spotify API for the user’s currently playing information. Spotify provides this through there API in a JSON-formatted string which is parsed by the application to determine the key values that are needed for the program, such as the name of the device playback is currently on, the track title, the artist title, as well as the tracks length as well as the current track progress, so the progress bar can be drawn along the bottom of the display. After this information is displayed it waits for a change from either the on-screen controls, or another Spotify Connect device, as it will recognize and work with any other Spotify Connect device and keep up to date even when music playback is controlled elsewhere.

After this information is parsed, the program downloads the lyrics from a 3rd-party source (as Spotify nor their lyrics partner Musixmatch provide publicly available APIs), parses the data to separate at what second each line is being sung at any particular time. It then compares this information with the current position in the currently playing song and displays the line when it reaches the right time.

At the same time, multithreading is implemented to also download the album art of the current song from Spotify’s endpoint and display it, after some modifications. First, it runs the image through an algorithm to determine it’s “dominant” color. Now, I’ve bounced around re-designing this part a few times now, the rudimentary implementation being shrinking down the image to 1 pixel and having PIL determine what color that pixel should be, to what it is now which creates an entire color palate of the images, determining similar colors, then calculating the most used color from combining the similar colors… and I still think it has room for improvement The Pillow library is then used to draw circles on each corner, offset them, then crop the opposite out to white, which is then replaced with the color result of the aforementioned algorithm, this is what creates the curved edges of the album art. At the same time is also replaces the background of the entire screen with that same color. Then, that color is run through a luminance index to determine the perceived brightness of a particular color (which has also gone through many revisions), this then puts the color onto a brightness scale and recolors the UI elements either to black or white if it is past of the point where readability is impacted.

The screen will also detect if no music is playing and open a device selection screen which polls the Spotify API for all available devices by name on the user’s Spotify account and puts them in a list, where when a device is selected, playback starts on that device. After a predetermined amount of time of no playback the display will enter a limited sleep mode where the screen is dimmed, then later into a complete sleep mode where the display is off. Tapping the display will reactive the program and continue where it left off. Once playback starts the device selection screen is automatically closed and the now playing screen returns.

The device is fairly simple, a Raspberry Pi 4 wired to a capacitive touchscreen and connected via HDMI for picture. The Pi is running a lightweight Linux distro with no desktop environment or window manager installed, I also program the Python application to connect directly to the Linux system to start a purpose-built X server and bootstrap itself into it so there is no overhead. The result is a pretty speedy system that is very responsive and fully boots with Spotify connected in ~6s. Initially I was considering what hardware I was going to run this on and an Arduino-like device such as an ESP32 came to mind, however while this started as a small app with a small screen, the upgrades made along the way, driving the display and the amount of code that this project evolved to called for those ideas to be scraped, however I may make a version with less features later if I find I can reduce it’s footprint to become embedded. It now uses a 3:1 7.4 inch screen with a 3D printed case and stand to prop it up and is powered by one USB type-C cable and is completely self contained in the printed case.

The program also features a self-updater that reaches out to my server on each startup to look for a new build, downloads and installs the update before starting the bootstrapping process. I also created a single start install script written in both Bash and Batch for easy installation. The script reaches out to the update server but this time for a complete install, downloads all packages and assets (including required libraries), installs to the application directories for the respective OS, and creates and installs a Systemd/Init.d service on Linux or a Windows Service on Windows. The script has proper exception handling and sets the service up for bootup with a handler Python script that takes control of the display and does the aforementioned X server handling on startup.

The results are something I actually never expected when I first started this project on a tiny 1.4 inch, non-touch SPI display! It has grown and grown and there are still many features to add! There are so many more ideas I have to improve so I may update this post here with new features as I add them! To name a few:

Reverse engineer Spotify’s Canvaz API (which is obfuscated and not publicly available) to download short mini clips to each song and play this video in place of the album art.
Refactor background color to better choose a complementing color(s), after this is perfected, expand to multiple colors to render a gradient to better compliment the album art.
Groundwork already laid for a built-in voice assistant that will allow for hands-free control of playback.

There’s a lot to come and I am excited to continue working on it! Stayed tuned for more updates!

January 25, 2023 by brandon Devices Graphics Programming Python Raspberry Pi Raspberry Pi 4 UI/UX Uncategorized 0