Skip to Content
Last modified by Ludovic Dubost on 2019/06/17 20:29
From version 5.1
edited by Ludovic Dubost
on 2010/03/27 21:46
Change comment: There is no comment for this version
To version 8.1
edited by Ludovic Dubost
on 2010/03/27 21:55
Change comment: There is no comment for this version

Summary

Details

tvnews-cubeeffect2.jpg
Author
... ... @@ -1,0 +1,1 @@
1 +xwiki:XWiki.ludovic
Size
... ... @@ -1,0 +1,1 @@
1 +172.6 KB
Content
Blog.BlogPostClass[0]
Content
... ... @@ -43,3 +43,37 @@
43 43  
44 44  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>>http://snackr.net/]] and [[NewsTicker>>http://www.nullriver.com/products/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:
45 45  
46 +[[image:tvnews-ticker.jpg||style="width: 824px; height: 82px;"]]
47 +
48 +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.
49 +
50 +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.
51 +
52 +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.
53 +
54 +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.
55 +
56 +All this ended up being easier than what I would have thought initially:
57 +
58 +* I found [[WebSaver>>http://code.google.com/p/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.
59 +
60 +On the left hand side I wanted to display some scrolling news. That's actually the easy part as I was pretty sure [[Scriptaculous>>http://script.aculo.us/]] would give me what I need. As you will see, it did !
61 +
62 +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>>http://ajaxian.com/archives/3d-cube-using-new-css-transformations]]. Check out this [[demo>>http://www.fofronline.com/experiments/cube/multiCubes.html]] and [[this one>>http://www.fofronline.com/experiments/cube-3d/]], 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.
63 +
64 +The result is here:
65 +
66 +[[image:tvnews2.jpg||style="width: 901px; height: 537px;"]]
67 +
68 +
69 +[[image:tvnews-cubeeffect2.jpg||style="width: 900px; height: 592px;"]]
70 +
71 +
72 +You can see the [[live result here>>http://www.ludovic.org/xwiki/bin/view/Main/TVNewsCube4?xpage=popup&cube=1]] (the cube only works on Safari):
73 +
74 +The mashup is fully written in [[XWiki>>http://www.xwiki.org]] scripts with [[velocity>>http://velocity.apache.org/]] and [[groovy>>http://groovy.codehaus.org]].
75 +
76 +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>>http://www.w3.org/TR/css3-3d-transforms/]].
77 +
78 +If only [[IE was keeping up>>http://www.youtube.com/watch?v=vTTzwJsHpU8]] with these innovations.
79 +