Music screensaver iteration #4 made on London Music Hack Day 2013

The date has come, and passed! Me, Jonas and Johan are at the Music Hack Day in London like we planned last time. We continued working on PartySaver [Read about iterations #1#2, and #3] and focused on two major additions: a Deezer app and a connection to Philips HUE lamps.

The architecture of PartySaver separates the player app from the party functionalities. Meaning it was pretty simple to create a Deezer app since we already had a Spotify app. (actually, it required quite some refactoring since this is hackathon code :P)

Integrating Philips HUE proved to be quite easy, but also disappointing at the same time. The idea was to take the dominant color from the artist wallpapers and just set the lights to that color. First we noticed that the dominant color was actually most often a shade of gray. The second surprise was how lacking the lights are in the color spectrum. If you don’t send a color it can handle, it will grab the “nearest” thing which is not the nearest color as I’d imagine it (different hue basically) but instead it gets whitened.


The image above shows a CIE color chart, and the little green triangle inside it is what Philips HUE can handle. Not much in the blue/green/yellow space… Next hack I’ll try to find a better color matching algorithm than the built in one.

2013-12-07 23.46.24 2013-12-07 23.47.23 2013-12-07 23.47.31

Oh, a small improvement we made is that to find a party you just go to and it’ll check for parties within your wifi (actually, your public IP).

Next time we’ll also try to create the “standard” party functionality: party queue manager for party guests.

Curious on when we release PartySaver? Sign up on our website!

Update 2013-12-12: There’s a video of our presentation on YouTube. Also, we’ve talked to Deezer yesterday and are aiming at releasing PartySaver on their platform hopefully before Christmas (i.e. next week!)


Spotify screensaver attempt #2 made on Way Out West hack 2013 Gothenburg

About 8 months ago me and my friend Jocke did a screensaver for Spotify, based on an idea I had blogged about earlier. The main idea circles around the web player version of Spotify, because it’s the only way we’ve figured out how to do full screen apps. Our last attempt was a bit of a failure, because nothing was animating (which makes for a really bad screensaver). So during Way Out West I gave it another try, this time with Johan and Jonas who I’ve made Spelkalendern with.

Early we concluded that web app was the only way, again. So we changed our bookmarklet into a Chrome extension. As a little cute trick, the Chrome extension automatically adds a “hack” button to the page when you visit the player. When clicked it opens our app and hacks the iframe around it to allow fullscreen.

Chrome extension that adds this button to the Spotify web player.
Now as Chrome plugin

We really should change it to allow any app to go fullscreen. Hmmm…

We had one small problem though. The app SDK for the web player was no longer supported! It took a few hours to hack around it but we were able to solve it by changing the local server a bit.

Last time we mucked around with WebGL and that slowed us down. So this time it was simple HTML and CSS for the styling. We went with a clean look that’s very appealing. Using a service to get cool desktop sized artist photos and then the regular album art of the upcoming songs.

Since it was coded very modular, we could have a view to show various playlists to start with but we could also visualize anything you’re playing (like search results or just start playing inside some artist page). This was useful at my party last weekend.

Spotify screensaver #2 running on my TV through Apple TV
Spotify screensaver #2 running on my TV through Apple TV

Update: See version 3 of this project.

Spotify screensaver made on Music Hack Day 2013 Stockholm

Some time ago I blogged about an idea of making a Spotify screensaver. This weekend at the MusicHackDay in Stockholm me, Jocke and Vincent finally tried our hands at doing this by creating PartySaver. The first quest was: How do we play music and show music info, in fullscreen?

There’s several ways to play Spotify music: Spotify players (Win, Mac, iOS, etc), Spotify web player, and libspotify. We opted for the web player, but a developer edition which supports apps. We quickly noticed the apps aren’t allowed to run in fullscreen! So we created a bookmarklet that “hacks” the player to allow fullscreen apps.

Then I focused on the new 1.0 API to get the users playlists, and then the tracks from that playlist. While Jocke spent most of his time on WebGL and three.js so we could have the cover arts in a 3D mosaic that would animate and move. Sadly, we never got that far. Regardless, it went pretty good and we’re happy – so we’re going to try a CSS3 version. If we make it, we might even have a sponsor for a real screensaver. The question is, how should it be done?

Update: See version 2 and version 3 of this project.

Idea: Taxi cruise map

Do you ever get the feeling that the taxi you took didn’t go the shortest route? Sure it could be because of traffic or road work, but you still wonder if he’s taking a longer road than necessary. And why wouldn’t you? The driver gets paid by kilometer after all!

The idea would be to have an app that you start when the taxi starts, and then stop when you’ve arrived at the location. It would then plot out the route on a map, with some stats as time taken and lenght “driven”. It would also plot out the Google Map route so you can compare.

Idea: Update watch

There are some simple pages that I’d like to follow, like job postings. They don’t have a RSS feed and are so seldom updated that a simple email notification will suffice.

So I’d like a service where you enter a URL and it will email you when the page is changed. A bookmarklet would work great with the service. Bonus if the mail included a diff to show what had been changed.

What would you follow?

Idea: You have ‘this’ version of .NET installed

With each version of Windows, you can make some assumptions on what .NET Framework version is installed. Sometimes you need to know it on a computer that’s not yours, or you need a user to tell you what version they have, it would be very convenient to tell them to visit a site and tell you what version they have. Microsoft has a KB on this but it involves mucking around in the Windows Registry, which most users aren’t comfortable with it.

Maybe the only way to really do this is through ActiveX if it’s going to be on a website. A simple download .exe would be much easier. There’s already code for this but I haven’t seen a wide use yet. Has anyone done this on a website before?

Idea: Idea voting

There are some good social issue trackers like UserVoice and GetSatisfaction. Not only can people report what’s wrong or what they’d likte to see, but others can join in and vote for the issue. The idea has spread to most issue trackers too which is great. What I’m missing is the voting functionality on personal or corporate ideas. The whole voting concept should be made separate as a service. Maybe you want to decide on the next book to read, or the next game to play.

I want something like Evernote, but for lists where people can vote and help you prioritize. I could use it for my idea blog posts (like this one!) or at work where we come up with small projects. The list should be accessible from other systems. What would you use it for?

Idea: Kinect in presentations

Kinect just got an SDK which probably will lead to a whole bunch of cool videos on YouTube and other projects. The potential is enormous! It’s almost hard not imagining making yourself into the center of the universe (living room) with it. Personally I’m trying to find something that a thousand devs aren’t going to jump at.

While attending a presentation it hit me that Kinect could easily be a new Power Point controller. I’m trying to imagine another gesture than waving for “next slide” since it can look distracting and gimmicky, but one feature I’d love to see is automatic zooming to where you point. Things to make presentations more interactive and alive than regular slides really. Maybe augment it with voice recognition, so it automatically queues in with what you say. I think this could be really interesting.

What ideas do you have for the Kinect SDK?

[Update 2011-07-27] This has now been done:

Project: Read It Later Dashboard Prototype

Me and @bennedich decided to make a prototype of the Reading Statistics idea while keeping it fully hosted in Dropbox. That means pure HTML, CSS and JavaScript (although we wrote the JS using CoffeScript). For fancy graphs we picked Google Chart Tools. Here’s a shot of the final prototype:

Screenshot of the RIL-Dashboard prototype

First we took a look at what the ReadItLater API offered, as we both use the service for our reading. It’s fairly simple and just gives you a list of all the articles, where each article has:

  • Item ID: unique id identifying the url
  • URL: the article url
  • Title: page title
  • Time updated: Unix timestamp of when the item was last added/changed
  • Time added: Unix timestamp of when the item was added to list
  • Tags: user entered, comma-seperated
  • State: read or unread

We thought of a few specific stats we could easily calculate and drew some sketches. Basically some kind of big line chart, and then some numbers around it.

Then we looked at all the chart types provided by Google, grabbed screenshots of them, and ordered them into potential dashboards.

For our first prototype we picked the easiest one just to get all the pieces in place. A simple bar-type distribution chart of how many articles are read after a set amount of time (i.e. X articles on the same day, Y after 1 day, Z on after 2 days, etc). The three main numbers below the chart were average articles added per day, average read per day, and average time between adding an article and reading it.

Parsing and calculating the stats was the easy part. A problem we have is that RIL doesn’t support JSONP. To get around that we used Yahoos YQL service. A potential new project would be a JSON tunnel.

Finally we added a small login-screen, on the same page, put the data in the REST-call and blam! Done!

Now, try it out!

Idea: Warning, that page is old!

As I scour the web for info I often come across blog and forum posts. There’s nothing more irritating than getting swept up in what seems to be exactly what you were looking for, just to find out it’s outdated after reading half the bloody thing.

Google’s search filter for when the results were updated is probably the best approach, but I’d still like a big flashing red light when I’m entering a page older than a year. That’s practically an internet fossil.