TrackIt v1.1

Now with Leopard compatibility!

A simple widget that allows you to keep track of whatever number you like: daily, weekly, or whenever...

- Slimmers track your weight
- Dieters track your calorie intake
- Runners track your miles
- Golfers track your score
- Sportsmen track your averages

How to use:
- Enter your number for today and an 'x' will appar on the graph.
- Come back tomorrow (or whenever) and enter the number for tomorrow.
- A graph automatically plots, showing you how the number changes over time.

- Use the left/right buttons to zoom out up to a year.

Track multiple numbers by opening multiple widgets - To do this, open Dashboard, click on the (+) symbol in the bottom left, locate the TrackIt widget from the available list, click the widget and new one will appear.

Version 1.1 - Leopard Compatibility (but probably Tiger incompatibility!)
Version 1.02 fixes a bug when restarting at the end of a month.

10.5 Leopard Users download from here (v1.1)

10.4 Tiger users download from here (v1.02)

IMPORTANT UPGRADE INFORMATION...
If you are upgrading from an earlier version and wish to keep your data you must do the following steps:
- Open the Terminal application from Application/Utilities
- Type: cp .TrackIt/* Desktop
- Your data files will be copied to the Desktop. Open in TextEdit by double clicking.
- In the new version of the widget, press the i to flip it
- Hit the 'Edit Data' button and TextEdit will open an empty data file.
- Copy and Paste the data from the old file to the new file
- Save

Mac OS X 10.5 Leopard 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.

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.