It's been a long time that I wanted a beefed up screen saver which shows relevant information to me. I like very much the RSS Screen Server of Mac OS X (or the Time Machine version which is also nice) which can display an RSS feed but found it too limited as it does not display enough articles and enough of the content of the feed.
My initial idea is to have a nice graphical display of relevant and LIVE news, which would scroll news and use as much of your screen real estate. In my vision, I'd like ultimately to see this application running on an external screen (a big LCD or an iPad) in my home.
I started doing some research on how to create a relevant live news feed, which at the same time would not be overloaded. After looking at some calendar sources of live events, I ended up looking at XMLTV, which allows to capture TV programs in a standard format. I ended up on kazer.org, which is a french source for XML-TV.
After looking at the content of the TV programs, I realized that TV program is a cheap and quite ok source for live events tough limited to sports and politics, and has the advantage to avoid too much redundancy.
So I started working on a mashup gathering the currently running TV programs of the correct category (sports and politics) and a set of the major channels running sports. I limited the search to any program that has finished for less than 15 minutes, any program that is running and any program starting in the next three hours (of course these are configurable). This gave me a nice list of running programs:
For instance, right now (Saturday 27th 21.00), it gives me:
- Sport + 2010/03/27 19:00 2010/03/27 20:45 Basket-ball Hyères-Toulon / Paris-Levallois
- Eurosport France 2010/03/27 19:00 2010/03/27 20:30 Cyclisme sur piste
- Canal+ Sport 2010/03/27 20:00 2010/03/27 22:00 Football Real Majorque / FC Barcelone
- France 3 2010/03/27 20:35 2010/03/27 22:55 Football Bordeaux (L1) / Marseille (L1)
- Sport + 2010/03/27 20:45 2010/03/27 22:00 Golf Open d'Andalousie
This is not too bad and catches the soccer final playing on the third channel. The next step is to now gather some news concerning these events. I gathered a google news RSS feed with each of the program's title in the query. The result is here:
The next step now is to allow to display this content a little more dynamically. The idea has been to use a News Ticker and to use Apple's RSS Screen Saver. I looked for a few News Ticker including Snakr and NewsTicker. Snackr looked nice, but seemed to not behave very well when the feed was updated, so I finally used NewsTicker. The result is below:
As you can see, the programs are scrolling at the bottom of the screen and if you hover over one of them you'll get the title of the news. The feed can also display HTML but NewsTicker does not support it.
The same feed can be used in Apple's RSS Screen Saver which shows you four items corresponding to four programs. This is a bit limited and also has a problem because the screen saver takes the four "latest" news which are the programs the most in the future instead of the four running programs.
This is why a nicer displayer is needed. Another reason is to make a better use of the screen real estate. Now Apple's RSS screen saver has some nice 3D effects and writing a screen saver in native Apple APIs is not something I wanted to learn.
Also, I thought it would be nice to be able to reuse the screen saver in normal window mode. This is why I looked at what could be done in HTML and AJAX, and also at how it is possible to display a web page as the screen saver.
All this ended up being easier than what I would have thought initially:
- I found WebSaver, which allows to show a web page as a screen saver. It also has an auto-reload. It's just perfect for what I need.
On the left hand side I wanted to display some scrolling news. That's actually the easy part as I was pretty sure Scriptaculous would give me what I need. As you will see, it did !
On the right hand side I wanted a 3D effect. I thought of SVG, Canvas 3D as I had seen cool demos of what could be done with these technologies. But I looked of for "cube effect" and I found this article on Ajaxian. Check out this demo and this one, it's pretty cool. The second demo was exactly what I needed with the Cube turning. A bummer, is that it only works in Safari, but I suspected WebSaver was using the Webkit engine so I loaded the demo in WebSaver and not only it worked well but even the cube transition worked when I used the arrow keys without stopping the screen saver ! So I started some coding to display my mashup data in news blocks on the left and display some of the news web pages on the faces of the cube, finally adding an automatic Sciptaculous transition for the news and a Javascript rotation of the cube.
The result is here:
You can see the live result here (the cube only works on Safari):
The mashup is fully written in XWiki scripts with velocity and groovy.
HTML/JS/CSS is marvelous, because the directive used for this are all (advanced) CSS and (simple) Javascript. It's really amazing what can be done now in modern browsers. The particular feature used here is CSS 3D Transforms.
If only IE was keeping up with these innovations.
