Project Logs

Collapse

• Javascript Fun

  Jeremy • 10/31/2016 at 18:59 • 0 comments

  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.

• Failed Interfaces

  Jeremy • 10/25/2016 at 19:43 • 0 comments

  If I haven't said this before, I'll say it now. I'm not the smartest person out there. If a project doesn't have some good documentation, I might not be able to figure it out. MPD has some API/interface projects out there, but most of them are fairly confusing for a simple man like me.
  

  I tried MPD Web Remote by Thomas Preston. It worked fine, but the interface was too cluttered for a crappy touchscreen. I want the UI to be as easy as the car stereo. On top of that, the touchscreen isn't very accurate so you can easily tap the wrong button if the buttons are small. I could try reusing code, but sometimes it's easier to create than reverse engineer enough to reuse.

  I also tried Mipod, which is a REST API (or websocket if you want) for MPD. It required node.js, which I have never used before. It took a bit to set up. I had to have Mipod listen on a different port so it didn't conflict with Apache. I didn't think the documentation showed how to use the commands well. One of the commands supposedly required a POST method, but I could only get it to work using the GET method.

  Ultimately, I decided against using these APIs for various reasons. The UI I want is basically a swipe-based UI. You start on the Artist level. Swipe left or right to select the artist. Swipe down to see the artist's albums. Swipe left and right to choose an album. Swipe down to see the songs from that album. At any of those levels, if you tap, it will play/pause. None of the APIs organized the data in the artist->album->song hierarchy, probably because MPD doesn't doe this. So I am making a simple PHP script that will handle the logistics. It will probably just execute shell commands and format the output. I'm sure it would be better to figure out how to interface directly with MPD, but as I said, I'm a simple man. And I don't care that much about security. There won't be any sensitive data on the Pi (except my Beastie Boys music) and it will rarely be connected to a network.

  So that's where I'm at right now. Still creating the HTML/Javascript UI and the PHP API.

View all 2 project logs