Developer Blog

Creating Rounded Rectangles with Diffuse

A common design element in Boxee apps is that staple of Web 2.0 called the rounded rectangle. Useful for a number of different interface elements, I frequently get asked how to round the corners of dynamic image controls like thumbnails.

Fortunately, this is easily accomplished with one of the most useful GUI techniques available to Boxee developers: the diffuse attribute. Available on image controls, diffuse allows developers to apply a mask to their image controls that renders with the image in the app. The concept may seem confusing initially, but is very simple in practice.

Let’s take for example on of my first Boxee apps, Associated Press. On the left side of the interface the thumbnail image for the currently selected listitem is displayed. Pictured here, the edges seem a little sharp and harsh to the eye - a perfect candidate to smooth out with a rounded rectangle.

To create the rounded rectangle, first we need to create a mask image. In the image editor of our choice (the GIMP for me), we create an image the same size as the image control we are looking to mask, 480×360. Then we create a white (FFFFFF) rounded rectangle inside the image and save as a transparent png.

Next we need to apply this mask to the image control to get the rounded look we are after. Consider the XML for the image control without the mask.

<control type="image">
	<posx>24</posx>
	<posy>177</posy>
	<width>480</width>
	<height>360</height>
	<texture>$INFO[Container(111).ListItem.Thumb]</texture>
</control>

Adding the mask is super-simple - just add the diffuse attribute to the texture element.

<control type="image">
	<posx>24</posx>
	<posy>177</posy>
	<width>480</width>
	<height>360</height>
	<texture diffuse="mask.png">$INFO[Container(111).ListItem.Thumb]</texture>
</control>

And viola - the image is diffused with our mask, rendering the part of the image we want (the white rectangle) and cropping the part we don’t (the transparency) producing a much smoother look.

The best part about using the diffuse attribute is that it scales with your image controls on multiple resolutions, making your image control render accurately on any aspect ratio. For more info on how to use this element, check out the developer docs for the image control.

May 24, 2010 at 3:18 pm