The Robservatory

Robservations on everything…

 

Create an iTunes song info window using Keyboard Maestro

For those who aren’t aware, Keyboard Maestro is a macro-creation tool, designed to help you automate routine tasks. But its powers let you do some really cool stuff, not all of which could be classified as automation. Such is the case with this project: Creating an iTunes song info pop-up window.

There are lots of apps out there—including Many Tricks own Butler—that can do this for you, and my Keyboard Maestro version is worse than most of those in many respects. However, I wanted to teach myself more about Keyboard Maestro, and this seemed like a good project with which to do so.

I use Buter’s iTunes pop-up info window, which looks like this:

I wasn’t really interested in the rating or volume controls (though they should be doable), but I wanted to see if I could get the album art and song info in a window via Keyboard Maestro. After some struggles, here’s what I came up with in Keyboard Maestro:

My window is larger by design, so I can have somewhat more visible album art (aging eyes). And I can’t decide on a background color or gradient, so it keeps changing—this was the look when I snapped the screenshot, but it’s since changed again.

Read on if you’d like to know more about Keyboard Maestro, and how I used it to create this iTunes info window. (Note that this write-up assume some familiarity with Keyboard Maestro, though I try to explain each step in the process.)

The easy most-of-the-way solution

Keyboard Maestro has a number of bundled iTunes tokens, which include track, artist, and album (along with rating). There’s no artwork, though. But if you don’t need to see the album art, you can create a new macro, add a Display Text Briefly action, then click the Insert Token pop-up, and choose which elements you’d like to see.

This worked reasonably well, appearing as a standard macOS notification panel:

However, I couldn’t find a way to change the window title from “Display Text,” and there’s no album art. Plus there’s no control over where the window appears, nor how long it’s visible.

There are a few other display options—in a window or jumbo sized—but they had similar shortcomings.

The harder but better solution

The folks at Keyboard Maestro pointed me to Custom HTML Prompts as a way to get what I wanted. This Keyboard Maestro action allows you to create an HTML page that’s rendered in a window, and you can pass Keyboard Maestro tokens and variables into the HTML page. However, it’s not a click-and-done operation: You need to provide HTML, CSS, and JavaScript to create the custom window and interact with Keyboard Maestro.

As I knew nothing about any of this, I started with a web search, which led me to Matt Gemmell’s collection of Keyboard Maestro macros. I downloaded the Heads-Up Info Display as a starting point, and started trying to figure out how it worked.

I also went looking for a solution to get iTunes’ artwork into my window, as artwork isn’t one of the standard Keyboard Maestro tokens. Once again, a web search led to the AppleScript I needed.

Even with these data sources, creating a custom HTML prompt turned out to be trickier than I expected, mainly because of my lack of knowledge about JavaScript and creating/passing Keyboard Maestro variables from AppleScript to said JavaScript.

While I eventually wound up with a working solution, it was more of a “0.5 version.” It worked reasonably well, but had really bad JavaScript (because I have no idea what I’m doing), and relied on the HTML table tag to build the layout (because I hate fighting CSS).

Thankfully, I have friends who are really good at this stuff. In this case, I owe a big thank you to James at Out of Control—he greatly cleaned up my JavaScript, trimmed down the AppleScript, and created 100% of the CSS layout. So thanks, James, for turning my little hack into something much nicer!

Before you read any further, you can download the macro and artwork to make it easier to follow along. Expand the archive and double-click the macro to open it in Keyboard Maestro; the other two image files should be moved to the folder where you’ll store the cover artwork (keep reading for details).

In summary form, here’s the final macro:

The first and last entries lock and unlock the macro using semaphore locks, so that I can’t invoke it more than once at a time. The next two commands initialize variables, which are cleared after the macro runs. The real work is done by the Execute AppleScript and Custom HTML Prompt sections; here’s a brief look at each of them. First up, the AppleScript…

This code checks if iTunes is playing, and if so, sets two Keyboard Maestro variables. The first, isPlaying, is used to indicate the player state. The second, hasArtwork, is used to display a different image for tracks that lack artwork. If there is cover art, the AppleScript grabs it and stores it in a file.

You must edit the noted path in the AppleScript in order for the macro to work: You need to specify a path to a folder that will hold the cover.jpg file (the actual artwork for each song), along with the two files included in the download—one is for when no music is playing, the other for songs without artwork.

The second step in the macro is the Custom HTML Prompt Keyboard Maestro action, which is a mix of CSS, HTML, and JavaScript. After James’ help, here’s the final version of that code:

You must edit at least one path in the JavaScript in order for the macro to work: The path to the same folder you referenced in the AppleScript. You don’t need to point directly to a file in the folder, just to the folder. If you choose to rename the other two image files, you need to edit their names, too.

Here’s a quick look each section of that file. Note that this isn’t an in-depth tutorial, because that’s way beyond my experience level, but there are some things to be aware of as you look at each section of the code.

The CSS

This layout is particular to the size of window (380×150) that I wound up using. If you change the window dimensions, you’ll have to adjust values in column, #file, and #file img to keep things aligned properly.

Beyond that, it’s a fairly typical CSS with fonts, colors, sizes, etc.

The HTML

The body tag controls the HTML window’s size and position. Here’s what I wound up using:

<body data-kmwindow="MOUSEX()-9,MOUSEY()+7,380,150">

The data-kmwindow parameter is how you specify the size and location of the window in Keyboard Maestro. If you only use two parameters, you’ll set the window’s size, but not its location. Use four parameters, and the first two specify the location of the top left corner of the window, and the last two describe the width and height of the window. So that’s what I did, with a twist…

By specifying the left and top positions relative to the mouse cursor (using Keyboard Maestro’s MOUSEX and MOUSEY variables), my window appears directly under my mouse (with the pointer actually sitting on the red button), making it both easy to see and close (click or press Escape). If you’d rather just have the window appear at a given location, replace those bits with screen coordinates.

The rest of the body is just div tags with IDs. The content of each div is replaced with data calculated in the JavaScript portion of the code, based on its ID. For example, this bit will display the song title:

<div id="song">iTunes is paused</div>

The JavaScript retrieves the song information from Keyboard Maestro’s tokens, and then places it into the “song” div. When iTunes is paused, the included text remains, showing that iTunes is, well, paused.

The Javascript

I know basically nothing about JavaScript…even after coming up with this little pop-up window! What you see here now is only about 20% my code; the rest was cleaned up and rewritten by James.

I’m not even going to try to explain the code on a line-by-line basis, because I’m sure I’d write something incredibly stupid (if I haven’t already). But basically, the JavaScript does the following:

  • Checks if iTunes is playing, based on the variable created in the earlier AppleScript. The window.KeyboardMaestro.GetVariable command is how you access a Keyboard Maestro within JavaScript.
  • If iTunes is playing, retrieve the song information from Keyboard Maestro’s tokens, and then check if the song has artwork (using the other variable set in the AppleScript). If it does, use it, otherwise use the “missing artwork” image. The one I use—a modified public domain Mona Lisa—is shown at right.
  • If iTunes isn’t playing, the script displays the “not playing” icon. As mentioned earlier, I use the iTunes icon—as seen at right—when iTunes isn’t playing.
  • Because some of these data fields can have incredibly long names, I wrote a little function to limit their length to 50 characters, replacing anything beyond that with an ellipsis.
  • When images are loaded, you’ll notice that they append a random number as a parameter (which is ignored, because there’s no code to do anything with it). Why did I do this? Because of WebKit’s incredible caching, I was always getting a cached image instead of the current image (which was saved to disk by the AppleScript). By appending a random number as a parameter, WebKit always retrieves the file from disk, not cache.
  • One thing you can’t see in the Custom HTML Prompt code is a Keyboard Maestro feature: The ability to have the action time out and end. Click the gear icon at the top right of the Custom HTML Action and choose Set Action Timeout to display this simple sheet:

    Set this way, my dialog will vanish after four seconds, if I haven’t already clicked the close button or pressed Escape.

Wrap up

In the end, I built something that doesn’t work quite as well as the info window in Butler (which pops up automatically on song change, and includes the rating and volume controls), but I taught myself a lot about Keyboard Macro (and a bit about JavaScript) in the process, so it was worth the time invested.

If you’d like to use/modify the macro, feel free: Download the zipped macro and artwork. After expanding the archive, then (assuming you have Keyboard Maestro installed) double-click on the macro file to open it in Keyboard Maestro.

Create a new folder for the images, and move the two included images into that folder (or create your own versions). Remember to edit the paths in the AppleScript and JavaScript to point to the folder you created.

If you have any troubles, please let me know – the macro should be ready to use once the path statements have been edited and the folder structure created in Finder. Remember to create a keyboard shortcut for the macro, so you can call it at will.

Leave a Reply

The Robservatory © 2017 Built from the Frontier theme