I'm getting there...

I have a UI that functions, mostly.

It's one container DIV with 9 smaller DIVs inside. Three rows: Artists, Albums, and Songs. Three columns: Previous, Current, and Next.

The touchscreen (still crap) is not very sensitive. Here's how the interface will work. When you touch the screen (mousedown) it starts keeping track of your finger movements (mousemove). If you slide in any direction more than the minimum threshold, the UI starts responding by sliding the container DIV. It locks the movement so if you move horizontally beyond the threshold first, then only horizontal movement is allowed. Same for vertical. When you lift your finger (mouseup), it first checks how far you went from your start. If the distance is over a second threshold, it assumes a swipe in that direction and finishes the animation, then calls the associated actions. If the distance is over the movement threshold, but under the second threshold, it animates back to where you started, then does nothing. If your movement wasn't even enough to trigger the initial movement threshold, then it's considered a tap, which means it doesn't animate, but triggers the play/pause action. This lets you do a partial swipe to see what the next song/album/artist is without forcing you to go to the next song/album/artist unless you want to.

I still need to set up the next/previous actions. I also want to update the UI to show which song is playing, how much time, etc. MPD remembers where you left off if you power down without a proper command. That means you don't have to start over every time you turn it off and back on. Much better user experience.

I also need to format the info. Right now it's bare bones and looks like crap. Then again, making things pretty has never been my specialty.

For anyone following this project, I will upload source files once it's ready.