ListenAgain 3.2

Another minor upgrade to BBC ListenAgain.

What's new:

- Accessibility (thanks to James Jolley's invaluable advice and testing)
- Volume control
- Hotkeys (left/right = skip, up/down = volume, space = play/pause, s=stop, p=station popup)

This has been developed and tested on Mac 10.5

VoiceOver users: when selecting stations use VoiceOver keys with the arrows to select the station from the menu.

Requires RealPlayer 10.1 Update, RealPlayer 11 doesn't play when Dashboard is hidden. Use RealPlayer 10.1

Download

Troubleshooting:
Try and play directly from the BBC website. If it works there then it will almost certainly work in Dashboard. If not the problem has historically been issues with RealPlayer - try uninstalling and reinstalling RealPlayer using the version from the BBC website. Reboot after the reinstall to restart Dashboard.

Let me know any other problems.

Mac OS X 10.4 Tiger is required. If you're using Safari, click the download link. When the widget download is complete, Show Dashboard, click the Plus sign to display the Widget Bar and click the widget's icon in the Widget Bar to open it. If you're using a browser other than Safari, click the download link. When the widget download is complete, unarchive it and place it in /Library/Widgets/ in your home folder. Show Dashboard, click the Plus sign to display the Widget Bar and click the widget's icon in the Widget Bar to open it.

Leopard Compatibility

I've just upgraded to Leopard. Here's how my widgets fare:

ZX Spectrum - 100% OK
BBC ListenAgain - 100% OK

SOWPODS Word Checker - Updated to version 1.2 now 100% OK
Word Finder - Updated to version 1.1 now 100% OK

TrackIt - Updated to version 1.1. now OK.

Hopefully I'll have updates soon. It'll be nice to use the full release of Dashcode for the first time.

Listen Again v3.1

What's new:

- It works again!

- Can play any day of multi-day programmes.

Download

Troubleshooting: If you cannot play radio streams, and also cannot play streams directly from the BBC web site in Safari then RealPlayer is probbaly not installed or configured properly.

Let me know any other problems.

Mac OS X 10.4 Tiger is required. If you're using Safari, click the download link. When the widget download is complete, Show Dashboard, click the Plus sign to display the Widget Bar and click the widget's icon in the Widget Bar to open it. If you're using a browser other than Safari, click the download link. When the widget download is complete, unarchive it and place it in /Library/Widgets/ in your home folder. Show Dashboard, click the Plus sign to display the Widget Bar and click the widget's icon in the Widget Bar to open it.

Clear a BufferedImage in Java

Lots of cool Animations require a transparent background and, of course, speed.

In Java creating a new BufferedImage for each frame of an animation is slow, but reusing images with transparency from frame to frame is tricky as BufferedImage doesn't have an obvious way to set all of it's pixels to completely transparent.

Unlike other colors we can't just paint a transparent color over the image because, well, it's transparent and won't affect the pixels already in the image.

I had a poke around and found this from IBM DeveloperWorks.

g2D.setComposite(
  AlphaComposite.getInstance(AlphaComposite.CLEAR, 0.0f));
Rectangle2D.Double rect = 
  new Rectangle2D.Double(0,0,width,height); 
g2D.fill(rect);

It would be a lot more useful if clearing to any color was part of the Image API, but until then this is good to know.

Simple Border Resize

Here's a simple way to resize a top or bottom border of the widget, a slight modification will do the sides too. It's nice because it will also handle a border that has a nice gradient fill, and/or rounded corners.

The idea is to have two corner images and a third center image that stretches to horizontally fill whatever gap is between them. AFAIK: this bit requires JavaScript.

- Use your image editor or Dashcode to create the base border (images here shown x3)...


- Open the image in an image editor, such as Gimp.

- Use the crop tool to create three new images, the left corner, the right corder, and a one pixel wide strip from the center. For the corners also include five to ten extra pixels from the width. This is to prevent a rendering artifact when resizing (more on this later)




- So copy the three images into the widget Images folder, add them to the html, and edit their css placement values (or use the inspector in Dashcode). Here's my css as an example:

#bottomleftimage {
 position: absolute;
 bottom: 12px;
 left: 12px;
}

#bottomimage {
 position: absolute;
 bottom: 12px;
 left: 22px;
 width: 283px;  // default width, this will change on resize
}

#bottomrightimage {
 position: absolute;
 bottom: 12px;
 left: auto;
 right: 12px;
}

- Running the widget now: the border should look good on default size. On resizing it will move the right corner correctly but the center of the border won't stretch. To do the stretch: Just after the window.resize call....

...
window.resizeTo(x,y);
document.getElementById("bottomimage").style.width = 
    (x-42) + "px";
...

The '42' is found by subtracting the total width of the widget minus the width of your border center by default. Try and make the center image overlap by five or so pixels into the corner images, this will stop any gaps appearing during resizing.

- Now when you resize the widget the border will resize nicely too.

Resizing Text Dynamically

In the latest version of the ListenAgain widget the text shrinks and descriptions disappear when the widget is resized to a small size. I think this is quite a nice effect and especially useful in Dashboard where space is very limited.

The trick is to use JavaScript to manipulate the CSS style when the widget resizes.
The hardest thing I found was to find the correct style sheet object. The following bit of code should do the hard work and return the CSS object with the matching name.

function getStyleClass(className) 
{
  for(var s=0; s <  document.styleSheets.length; s++)
  {
    var ret = getStyleClassFromRules(className,
                document.styleSheets[s].cssRules);
    if (ret != null)
      return ret;
  } 
  return null;
}

function getStyleClassFromRules(className, cssRules)
{
  for(var r=0; r<cssRules.length; r++)
  {
    if (cssRules[r].selectorText != null)
 {
   if (cssRules[r].selectorText == className)
     return cssRules[r];
 }
 else if (cssRules[r].styleSheet)
 {
   var ret = getStyleClassFromRules(className, 
                      cssRules[r].styleSheet.cssRules);
   if (ret != null)
     return ret;
 }
  }
  return null;
}

So now in your resize method, grab the CSS Object for the object to shrink and tweak it's style: e.g. To find the style for ".articlebody" and change it's look...

  var descStyle = getStyleClass(".articlebody");
  if (descStyle != null)
  {
   if (y < 280)
     descStyle.style.display = "none"; // hide
   else
     descStyle.style.display = "block"; // show
     
   if (x < 245)
     descStyle.style.fontSize = "11px"; // small
   else if (x < 280)
     descStyle.style.fontSize = "12px"; // larger
   else
     descStyle.style.fontSize = "13px"; // largest
  }

Of course there are loads more style options to change, and from here lots of cool effects are possible. For example, add a simple timer and slowly change an objects opacity to make it fade in or out; or grow and shrink an image as the mouse moves over it.

Listen Again v3.0

Here's a new version of the Listen Again widget.

Changes:
- Better resizing. The previous versions were always a bit large, so you can now shrink down to much smaller sizes and the text will adjust size automatically. Also once the widget is shrunk past a certain size the programme descriptions are automatically hidden.

- Added a 'now playing' icon.

- Added a time code for playing programmes.

- Removed rear side of the widget as there were only two options on there: Show Descriptions, and Volume. The volume control seemed virtually useless considering there are easy machine volume controls on Macs.

- Fixed a bug with the scroll pane during resize.

Enjoy!

Download

Mac OS X 10.4 Tiger is required. If you're using Safari, click the download link. When the widget download is complete, Show Dashboard, click the Plus sign to display the Widget Bar and click the widget's icon in the Widget Bar to open it. If you're using a browser other than Safari, click the download link. When the widget download is complete, unarchive it and place it in /Library/Widgets/ in your home folder. Show Dashboard, click the Plus sign to display the Widget Bar and click the widget's icon in the Widget Bar to open it.

Troubleshooting: If you cannot play radio streams, and also cannot play streams directly from the BBC web site in Safari then RealPlayer is probbaly not installed or configured properly.