Thomas Billenstein

March 11, 2010

Beautyful Ambilight Effect for the HTML 5

By tb, 5:07 pm in HTML 5 | Tagged Javascript | 1 Comment

Sergey Chikuyonok did a great Job when adapting the cool Ambilight feature, well-known from some Philipps TV-Sets, to the HTML 5 <video> tag. Ambient Lighting Technology basically is a LED lighting system, generating lighting effects around the TV that correspond to the video content by adjusting the brightness and color based upon the picture content.

Click on the image below to watch the effect. You will need a browser that supports the <video> tag: Firefox 3.5, Google Chrome 4, Safari 4, Opera 10.5.

The basic algorithm assumes 5 LEDs on the left and the right side of the virtual TV-Set, takes the relevant part of the picture’s frame, divides it into 5 regions and calculates each part’s average color. To get enough light intensity, brightness and saturation of these colors must be boosted. To get a realistic lighting effect Sergey uses a linear gradient and a special mask overlay.

You can find Sergey’s detailed blog post in english here, or if you prefer to read it in russian language, here.

Links

Ambilight Demo
Sergey’s blog post at Splashnology
Sergey’s original blog post

March 7, 2010

WordPress Blog Posts and Comments Integration with SimplePie

By tb, 11:37 pm in PHP | Tagged PHP, RSS, SimplePie, WordPress | 1 Comment

Let’s say you want to show up your latest blog posts and/or comments on a website or on pages outside the scope of your blog, which means that you can not simply use the blog’s internal API to access the data. An easy method to access your posts and comments is via Syndication (RSS, RDF, Atom feeds). By default WordPress supplies these feeds by the following URLs:

http://example-blog.com/feed for the articles
http://example-blog.com/comments/feed for the comments

First, let’s start with a view of the final result.

To keep things simple there are just 2 sections in the Demo Page, one showing the latest posts and the other showing the latest comments of this blog.

Setup SimplePie

SimplePie is a highly recommended PHP class to handle any kind of syndication feeds, so it is very easy to do the job. To use SimplePie you have to follow these steps to setup.

Download and unzip SimplePie
Copy the simplepie.inc file to your webspace
Create a chache subdirectory in the directory where you put the simplepie.inc file (in our case we call it simplepie_cache)
Change the file permissions of the cache subdirectory to be server-writable. This setting varies from webhost to webhost (start trying with 755, then 775, lastly 777) and so does the process of actually changing the file permissions (you can use chmod if you have access to a console on your server or a FTP application if updateing from client side).

Create the Demo Page

The Demo Page is called index.php and will be located in the same directory as the simplepie.inc file. The content of index.php is listed below.

The resulting filesystem structure will look like this:

Take a Look at the Source Code

<?php
	require_once('simplepie.inc');

	$blogUrl = "http://thomasbillenstein.com/blog/";
	$postsUrl = $blogUrl . "feed";
	$commentsUrl = $blogUrl . "comments/feed";

	function getFeedItems($url, $maxCount)
	{
		$feedItems = array();

		$feed = new SimplePie($url, './simplepie_cache', 3600);

		$success = $feed->init();
		if ($success)
		{
			$feed->handle_content_type();

			$count = 0;
			foreach($feed->get_items() as $item)
			{
				$feedItems[$count]['title'] = $item->get_title();
				$feedItems[$count]['permalink'] = $item->get_permalink();

				if (++$count >= $maxCount)
					break;
			}
		}

		return $feedItems;
	}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>WordPress Blog Posts/Comments Integration</title>
</head>
<body>
	<h1>WordPress Blog Posts/Comments Integration</h1>
	<h2>Latest Posts from <a href="<?php echo $blogUrl ?>">the blog</a></h2>
	<ul>
		<?php
			$posts = getFeedItems($postsUrl, 5);
			foreach($posts as $post)
			{
				printf('<li><a href="%s">%s</a></li>', $post['permalink'], $post['title']);
			}
		?>
	</ul>
	<h2>Latest Comments from <a href="<?php echo $blogUrl ?>">the blog</a></h2>
	<ul>
		<?php
			$comments = getFeedItems($commentsUrl, 3);
			foreach($comments as $comment)
			{
				printf('<li><a href="%s">%s</a></li>', $comment['permalink'], $comment['title']);
			}
		?>
	</ul>
</body>
</html>

The PHP part of the source code mainly defines the function getFeedItems()

function getFeedItems($url, $maxCount)

that takes 2 parameters: the URL of the feed that will be integrated and the number of items that will be collected. The implementation is very simple. After obtaining a feed object by invoking the SimplePie constructor

$feed = new SimplePie($url, './simplepie_cache', 3600);

the feed gets initialized and the content of the feed will be retrieved. The constructor takes 3 parameters: the URL of the feed, the cache location and the number of seconds the cache will be used before refreshing the feed. The following loop iterates over the feed items and copies the relevant attributes to the array $feedItems that is returned to the caller.

This data structure supplies the content for the unordered lists in the HTML code of the Demo Page.

<ul>
	<?php
		$posts = getFeedItems($postsUrl, 5);
		foreach($posts as $post)
		{
			printf('<li><a href="%s">%s</a></li>', $post['permalink'], $post['title']);
		}
	?>
</ul>

Conclusion

This small example shows an easy way to include your blog posts and comments into another website with the help of SimplePie.

But that just scratches the surface. Check the SimplePie documention to find out how mighty and helpful this tool really is. The integration of blog posts and comments is just one option, any RSS, RDF, Atom feed can be included in a similar way.

March 6, 2010

Hello world!

By tb, 11:47 pm in Common | Comments Off

Welcome to my Blog! Hope you’ll find some posts of interest.

« Newer Posts

Beautyful Ambilight Effect for the HTML 5 Tag