Listen Again - Last Broadcast

Looks like the ListenAgain widget has played it's last tune.

The widget works by gathering the radio programme information from the iPlayer website. Sometimes the BBC changes the layout of the iPlayer site slightly forcing me to tweak the widget to adapt to the new layout. Unfortunately this time it looks like the changes were much larger, at least internally, and I can't seem to find the URL for the Real Audio stream of each programme. In fact it doesn't look like they use Real Audio at all anymore - only Flash.

This spells the end for the widget I think, from now on you'll have to listen directly with iPlayer.

Listen Again v3.5

Listen to the large archive of recent BBC Radio programmes directly from Dashboard.

Currently supports: Radio 1, 1xtra, Radio 2, Radio 3, Radio 4, 5 live, 5 extra, 6 Music, 7, Asian Network, Radio Scotland, Radio Ulster, Radio Wales, and all local radio. 55 stations in total.

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

Download BBCListenAgain Widget

Shortcut Keys:
Space - Play/Pause
Up/Down - Volume
Left/Right - Skip
s - Stop
v - Voiceover feedback
p - Focus on station popup

What's new:
3.5
- Fixed to work with another iPlayer change
- Added local radio (55 stations in total)

3.4

- Fixed to work with another iPlayer change

- Fixed 'Listen Live'

3.33
- Fixed to work with another iPlayer change
- Added auto update mechanism
- Pressing the 'v' key will enable additional spoken feedback.

3.31
- Descriptions of programmes fixed (broken due to BBC slightly rearranging their iPlayer content)

3.3
- Works with new BBC iPlayer website
- Accessibility: Voiceover use is detected and certain actions are spoken if turned on.
- Better font resizing
- Busy feedback

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.

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.

Listen Again v3.33

Listen to the large archive of recent BBC Radio programmes directly from Dashboard.

Currently supports: Radio 1, 1xtra, Radio 2, Radio 3, Radio 4, 5 live, 5 extra, 6 Music, 7, Asian Network, Radio Scotland, Radio Ulster, Radio Wales

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

Download BBCListenAgain Widget

Shortcut Keys:
Space - Play/Pause
Up/Down - Volume
Left/Right - Skip
s - Stop
v - Voiceover feedback
p - Focus on station popup

What's new:
3.33
- Fixed to work with another iPlayer change
- Added auto update mechanism
- Pressing the 'v' key will enable additional spoken feedback.

3.31
- Descriptions of programmes fixed (broken due to BBC slightly rearranging their iPlayer content)

3.3
- Works with new BBC iPlayer website
- Accessibility: Voiceover use is detected and certain actions are spoken if turned on.
- Better font resizing
- Busy feedback

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.

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.

ListenAgain 3.31

Update: It seems the BBC have changed the format of their iPlayer pages again, causing the widget to not be able to play any of the streams. Look out for version 3.32 shortly

An upgrade to BBC ListenAgain. Programmes had started to disappear from the 3.2 version as the BBC moved its ListenAgain archive to its new iPlayer. This version of the widget restores those programmes.

What's new:
3.31
- Descriptions of programmes fixed (broken due to BBC slightly rearranging their iPlayer content)

3.3
- Works with new BBC iPlayer website
- Accessibility: Voiceover use is detected and certain actions are spoken if turned on.
- Better font resizing
- Busy feedback

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 BBCListenAgain Widget

For blind users there's also an experimental version that gives extra speech feedback if voice over is turned on.Download VoiceOver Version

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.

ListenAgain 3.3

An upgrade to BBC ListenAgain. Programmes had started to disappear from the 3.2 version as the BBC moved its ListenAgain archive to its new iPlayer. This version of the widget restores those programmes.

What's new:

- Works with new BBC iPlayer website
- Accessibility: Voiceover use is detected and certain actions are spoken if turned on.
- Better font resizing
- Busy feedback

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

For blind users there's also an experimental version that gives extra speech feedback if voice over is turned on. Mileage varies from machine to machine Download VoiceOver Version

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.

Creating a Swing Dashboard Widget - Summary

So the original intention was to create a Dashboard style widget UI using Swing.

In nine fairly simple steps we've gone from a blue square:



...to a nice looking widget that hopefully looks at home on the modern Desktop:



The only shortcut I took was not to pull out the maths book and write my own transform filter.

I'm very pleased with the result, it was a lot easier than I thought it would be. Hopefully this exercise proves (again) that Swing can be more than just a boring, gray, toolkit suitable for boring, gray, form-filling applications.
The new transparency features especially allow vibrant, modern looking UI's that are relatively simple and quick to create.

So that's really it for the UI.

A few non-UI remarks...

Java widgets have a number of benefits over other widgets systems:
- No framework or widget manager needed
- Platform independent
- Installed from a web-page
- The extensive JDK library available as standard
- Sandboxed and secure automatically
- Familiar language with powerful UI toolkit
- Customizable, fast, accelerated painting (try that in Javascript)

There are still a few non-UI things to do before making this code truly useful: preferences and desktop startup spring immediately to mind.

Performance is also an issue. On my machine the two widgets take about 20 MB of RAM each and 0 CPU cycles when just sitting there. 20MB is considerably more than a simple Widget in Apple's Dashboard for example.
However, in modern machines with RAMs of 1GB+ as standard, and depending who you're asking, maybe this is an increasingly unimportant issue. Especially if the widget is useful.

Feel free to use the Source Code. Don't forget you'll need the filters classes from JHLabs.

Source Code Download

Creating a Swing Dashboard Widget - Part 9 (Examples)

So the widget code is beta complete. With some tidying and refactoring it's time to create some simple examples.

Clock Widget Launch
Weather Widget Launch
(Systems other than OSX* require Java 6 update 10)



With the widget specific code pushed into a base class, these two examples just needed code to gather some information and paint themselves: About 100 lines each.

ClockWidget Code:<br />public class ClockWidget extends PlainWidget {<br /> private static DateFormat dateFormat12 = new SimpleDateFormat("kk:mm");<br /> private static DateFormat dateFormat24 = new SimpleDateFormat("hh:mm");<br /> private static DateFormat df = dateFormat12;<br /><br /> private ClockWidget() {<br /> super();<br /> }<br /><br /> public Dimension getPreferredSize() {<br /> return new Dimension(220, 130);<br /> }<br /><br /> @Override<br /> protected JComponent createFront() {<br /> // --- Edited out boring front creation code ---<br /> panel.add(new ClockPanel());<br /> return panel;<br /> }<br /><br /> @Override<br /> protected JComponent createBack() {<br /> JComponent back = super.createBack();<br /> // --- Edited out boring back creation code ---<br /> return p;<br /> }<br /><br /> protected Point getCloseButtonLocation() {<br /> return new Point(0, 18);<br /> }<br /><br /> private class ClockPanel extends JComponent {<br /> private Font f = new Font("Arial", Font.BOLD, 65);<br /> private Font amf = new Font("Arial", Font.BOLD, 12);<br /> private static DateFormat dateFormat12am = new SimpleDateFormat("a");<br /> private Timer t;<br /><br /> private ClockPanel() {<br /> Timer t = new Timer(1000, new ActionListener() {<br /> public void actionPerformed(ActionEvent ae) {<br /> widgetComp.repaint();<br /> }<br /> });<br /> t.setRepeats(true);<br /> t.start();<br /> }<br /><br /> public void paint(Graphics g) {<br /> Graphics2D g2 = (Graphics2D)g.create();<br /> g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,<br /> RenderingHints.VALUE_ANTIALIAS_ON);<br /> g2.setFont(f);<br /> g2.setColor(Color.WHITE);<br /> g2.drawString(df.format(new Date()), 0, 51);<br /><br /> if (df == dateFormat12) {<br /> g2.setFont(amf);<br /> g2.drawString(dateFormat12am.format(new Date()),<br /> getWidth() - 18, 16);<br /> }<br /> }<br /> }<br /><br /> public static void main(String[] args) {<br /> new ClockWidget();<br /> }<br />}<br />These examples are just a taste of what's possible, rather than meant be really useful as working widgets - e.g. the weather widget is hard coded to San Francisco and could do with some better graphics.
They also illustrate one real advantage over traditional Javascript widgets in the use of the familiar libraries which are shipped as part of the base JDK. The weather reads an Yahoo XML feed and the clock uses a date formatter, both easily done in Java with no external libraries to download, license, ship, or understand.

Source code and summary next.

*I managed to fix the earlier OSX rendering problems by explicitly clearing the graphics before each frame. The widgets will now run on OSX with no additional downloads (Java 1.5).

Creating a Swing Dashboard Widget - Part 8 (Close Animation)

To prove that its possible to produce, fairly easily, and faithful interpretation of a UI it's important to get the little touches right.

When I added the close button I mentioned that the close action has a nice swoosh animation as the widget is removed but conveniently didn't implement it.

So I took a shot, and it actually it wasn't too bad.

There's already the basis for it:
- The code that is used in the flipping animation snaps an image of a component and transforms it.
- The marvelous Filter library from JHLabs provides various image distortion filters, or if you want to use no libraries and are good at matrix maths then roll your own BufferedImageOp )

I factored out the general component animation from the flipping animation code to create a simple framework that can visually filter a component over time - just supply the distortion or adjustment.

Using the Image Processing Editor I tried out different filters with different setting. It looks like Dashboard is using a Pinch filter to distort the widget away to nothingness.

The distortion code is quite small: use a pinch filter and gradually adjust the pinch amount and radius over time (once per timerTick()). The same image is painted every few milliseconds, and using this filter it displays the animation.
Oh, and the widget should fade over time too, so gradually reduce the alpha:
<br />public class CloseTransition extends AnimatedTransition<br />{<br /> private float alpha = 1.2f;<br /> private float alphaStep = 0.02f;<br /> private PinchFilter pinchFilter = new PinchFilter();<br /><br /> public CloseTransition(JComponent startComp, JLayeredPane layerPane)<br /> {<br /> super(startComp, startComp, layerPane);<br /><br /> pinchFilter.setCentreX(0.01f);<br /> pinchFilter.setCentreY(0.1f);<br /> pinchFilter.setRadius(Math.min(startComp.getWidth(),<br /> startComp.getHeight()));<br /> }<br /><br /> protected void updateInterImage()<br /> {<br /> }<br /><br /> protected boolean timerTick()<br /> {<br /> pinchFilter.setRadius(pinchFilter.getRadius() * 1.07f);<br /> pinchFilter.setAmount(pinchFilter.getAmount() * 1.05f);<br /> alphaStep *= 1.07;<br /> alpha = Math.max(0f, alpha - alphaStep);<br /> return alpha <= 0f;<br /> }<br /><br /> protected void paintInterImage(Graphics2D g2, int width, int height)<br /> {<br /> g2.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER,<br /> Math.min(1f, alpha)));<br /> g2.drawImage(startImage, pinchFilter, 0, 0);<br /> }<br />}<br />
Sccchhhuuuupppppppp.....


Webstart the demo (Java 6 update 10 is needed or it'll look funny). Hold 'Alt' to get the close button to appear.

Creating a Swing Dashboard Widget - Part 7 (Moving)

Widgets can be moved around by clicking almost anywhere their surface and dragging.
OSX provides this by default when the window decoration is turned off. On Windows a mouse listener has to be attached directly to the widget, and some simple repositioning code added.

With this, and some other tidying up, a demo of progress up till now is possible.

Remember you'll need the Java 6 update 10 for this to work properly. Anything less certainly won't do the transparency and will look poor.

OSX will run it but, as there's no Java 6 update 10 to try, you'll see bad transparency rendering issues (still worth a look though). I still hope the transparency can be fixed without using an additional external library.
Also the font alignment is frustratingly different on different platforms, making the 'Done' and 'i' text buttons look poor on OSX, but this will be fixed [at the cost of writing more code].

Launch Demo

Creating a Swing Dashboard Widget - Part 6 (Flipping)

When the info button is pressed the widget should flip over to reveal the back.
Using a flippable component to hold a blue front and green back, and hooking it up to the info button gives a very nice flipping transition, but with horrifying artifacts on OSX:



Also, on Windows the corners of the widget aren't transparent as expected:



After a little struggling I found that on Windows JPanels were causing the corner painting problem. Although marked as non-opaque their backgrounds were still being cleared to white every repaint! Turning off double buffering by passing false in the JPanel constructor fixed this:



OSX problems remain unresolved for now.

Creating a Swing Dashboard Widget - Part 5 (Info Button)

Widgets have an info button which when pressed flips the widget over to the back so the user can edit their preferences.

It has a number of visual states:
- usually invisible
- when cursor is over the widget the 'i' fades in.
- when the cursor is over the button a background appears

Changing the state of the button's ButtonModel as the mouse cursor moves over various code is simple. The painting code looks at the model to decide what to paint.
Fading is more tricky, especially as the TimingFramework isn't integrated into the JDK.
So I just used a straight forward Swing Timer that varies the alpha value of the button 'i'. When the state changes the timer is kicked off, and for every timer beat the painting transparency is slightly altered until it's either completely transparent or completely opaque.
It would have been better to use a curve rather than the liner adjustment.

<br />public class InfoButton extends AbstractButton {<br /> private float textAlpha = 0f;<br /><br /> private Timer fadeTimer = new Timer(25, new ActionListener(){<br /> public void actionPerformed(ActionEvent ae){<br /> if (getModel().isRollover()) {<br /> textAlpha += 0.06;<br /> if (textAlpha >= 1f) {<br /> textAlpha = 1f;<br /> fadeTimer.stop();<br /> }<br /> }<br /> else {<br /> textAlpha -= 0.06;<br /> if (textAlpha <= 0f) {<br /> textAlpha = 0f;<br /> fadeTimer.stop();<br /> }<br /> }<br /> repaint();<br /> }<br /> });<br /><br /> public InfoButton(JComponent rolloverComp) {<br /> setOpaque(false);<br /> setSize(new Dimension(13, 13));<br /> setModel(new DefaultButtonModel());<br /> setFont(new Font("Serif", Font.BOLD | Font.ITALIC, 13));<br /><br /> addMouseListener(new MouseAdapter() {<br /> public void mouseClicked(MouseEvent e) {<br /> if (getShape().contains(e.getPoint()))<br /> fireActionPerformed(new ActionEvent(InfoButton.this,<br /> ActionEvent.ACTION_PERFORMED,<br /> "Info"));<br /> }<br /><br /> public void mouseEntered(MouseEvent e) {<br /> getModel().setArmed(true);<br /> getModel().setRollover(true);<br /> }<br /><br /> public void mouseExited(MouseEvent e) {<br /> getModel().setArmed(false);<br /> }<br /> });<br /><br /> rolloverComp.addMouseListener(new MouseAdapter() {<br /> public void mouseEntered(MouseEvent e) {<br /> getModel().setRollover(true);<br /> fadeTimer.start();<br /> }<br /><br /> public void mouseExited(MouseEvent e) {<br /> getModel().setRollover(false);<br /> fadeTimer.start();<br /> }<br /> });<br /> }<br /><br /> private Shape getShape() {<br /> return new Ellipse2D.Float(0, 0, getWidth() - 1, getHeight() - 1);<br /> }<br /><br /> @Override<br /> protected void paintComponent(Graphics g) {<br /> super.paintComponent(g);<br /> Graphics2D g2 = (Graphics2D)g.create();<br /> g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,<br /> RenderingHints.VALUE_ANTIALIAS_ON);<br /><br /> Shape disc = getShape();<br /><br /> // background<br /> if (getModel().isArmed()) {<br /> g2.setColor(new Color(1f, 1f, 1f, .2f));<br /> g2.fill(disc);<br /> }<br /><br /> // symbol<br /> g2.setFont(getFont());<br /> g2.setColor(new Color(1f, 1f, 1f, textAlpha));<br /> int iw = SwingUtilities.computeStringWidth(g2.getFontMetrics(), "i");<br /> g2.drawString("i", (getWidth() / 2) - (iw / 2),<br /> (getHeight() / 2) + g2.getFontMetrics().getHeight() / 2 -<br /> 2);<br /> }<br />}
So now I have this:

Creating a Swing Dashboard Widget - Part 4 (Close)

Widgets have a close button, it has the following properties:
- Is positioned above the widget just over the top left corner
- It only appears when the user has 'Alt' pressed
- Clicking it causes the widget to close (with a nice swoosh animation)

Well, the animation will have to wait, but the button is easy to knock up in Swing.

- The button will extend AbstractButton and draw it's own close icon of a white cross inside a black disc.
- The button will listen for mouse clicks inside the disc area, and call System.exit(0) to close the widget.
- The widget frame has a JLayeredPane allowing arbitrary placement of the button above the main panel
- Add input/action entries on the widget frame to respond to the alt key and call button.setVisible(true/false).
<br />public class CloseButton extends AbstractButton {<br /><br /> private static int INSET = 2;<br /><br /> public CloseButton() {<br /> setForeground(Color.WHITE);<br /> setBackground(Color.BLACK);<br /> setOpaque(false);<br /> setSize(new Dimension(25, 25));<br /> if (!WidgetFrame.isOSX())<br /> setVisible(false);<br /><br /> addMouseListener(new MouseAdapter() {<br /> public void mouseClicked(MouseEvent e) {<br /> e.translatePoint(-INSET, -INSET);<br /> if (getShape().contains(e.getPoint()))<br /> System.exit(0); // dumb exit<br /> }<br /> });<br /> }<br /><br /> private Shape getShape() {<br /> return new Ellipse2D.Float(INSET, INSET, getWidth() - INSET - INSET - 1,<br /> getHeight() - INSET - INSET - 1);<br /> }<br /><br /> @Override<br /> protected void paintComponent(Graphics g) {<br /> super.paintComponent(g);<br /> Graphics2D g2 = (Graphics2D)g.create();<br /> g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,<br /> RenderingHints.VALUE_ANTIALIAS_ON);<br /><br /> Shape disc = getShape();<br /> <br /> // background<br /> g2.setColor(getBackground());<br /> g2.fill(disc);<br /><br /> // faint outline<br /> g2.setColor(new Color(0, 0, 0, 80));<br /> g2.setStroke(new BasicStroke(3f, BasicStroke.CAP_ROUND,<br /> BasicStroke.JOIN_ROUND));<br /> g2.draw(disc);<br /><br /> // edge<br /> g2.setColor(getForeground());<br /> g2.setStroke(new BasicStroke(2.5f, BasicStroke.CAP_ROUND,<br /> BasicStroke.JOIN_ROUND));<br /> g2.draw(disc);<br /><br /> // cross<br /> int i = 9;<br /> g2.drawLine(i, i, getWidth() - i - 1, getHeight() - i - 1);<br /> g2.drawLine(getWidth() - i - 1, i, i, getHeight() - i - 1);<br /> }<br />}<br />
In the main widget frame class add the button to a high layer, and set up the 'Alt' input actions:
<br /> private void addCloseButton() {<br /> final CloseButton closeButton = new CloseButton();<br /> getLayeredPane().add(closeButton, JLayeredPane.DRAG_LAYER - 1);<br /> closeButton.setLocation(18, 16);<br /><br /> if (!isOSX()) {<br /> final String SHOW_CLOSE = "show-close";<br /> KeyStroke altDown =<br /> KeyStroke.getKeyStroke(KeyEvent.VK_ALT, InputEvent.ALT_DOWN_MASK,<br /> false);<br /> getRootPane().getInputMap(JComponent.WHEN_IN_FOCUSED_WINDOW).put(altDown,<br /> SHOW_CLOSE);<br /> getRootPane().getActionMap().put(SHOW_CLOSE, new AbstractAction() {<br /> public void actionPerformed(ActionEvent e) {<br /> closeButton.setVisible(true);<br /> }<br /> });<br /><br /> final String HIDE_CLOSE = "hide-close";<br /> KeyStroke altUp = KeyStroke.getKeyStroke(KeyEvent.VK_ALT, 0, true);<br /> getRootPane().getInputMap(JComponent.WHEN_IN_FOCUSED_WINDOW).put(altUp,<br /> HIDE_CLOSE);<br /> getRootPane().getActionMap().put(HIDE_CLOSE, new AbstractAction() {<br /> public void actionPerformed(ActionEvent e) {<br /> closeButton.setVisible(false);<br /> }<br /> });<br /> }<br /> }<br />
Gives this beauty...



Update: Pressing the 'Alt' key is pretty unintuitive for users to close the widgets. Dashboard has a widget manager which offers an alternate more intuitive method to close them. As the Java widgets are trying to avoid the need for a widget engine, I'll just make the close button fade in and out as the mouse moves in or out of the widget - just like the info button in the next part...

Creating a Swing Dashboard Widget - Part 3 (Transparency)

Now we're talking!

To make the background transparent in Java 6 u10 is simple, just call AWTUtilities.setWindowOpaque(this, false);.

Things for me are more complicated as I'm developing on OSX which doesn't have a u10 build available (Apple are at least a year behind the rest of Java). Luckily OSX has long been able to make Java windows transparent just by setting the window background color a transparent one. Why Sun didn't follow this pattern???

So, to make the JFrame transparent on all platforms:
<br /> private void makeTransparent() {<br /> setUndecorated(true); // remove the window controls<br /> setResizable(false); // remove the resize control<br /><br /> // OSX transparency<br /> setBackground(new Color(0f,0f,0f,0f));<br /><br /> // Non-reflection version for Java 6 SE u10:<br /> // AWTUtilities.setWindowOpaque(this, false);<br /> //<br /> // Reflection version (to compile on Java 1.5):<br /> try<br /> {<br /> Class clazz = Class.forName("com.sun.awt.AWTUtilities");<br /> Method method = clazz.getMethod("setWindowOpaque",<br /> new Class[]{Window.class, Boolean.TYPE});<br /> method.invoke(clazz, new Object[]{this, false});<br /> }<br /> catch (ClassNotFoundException e)<br /> {<br /> // Oh well, not Java 6 u10<br /> } catch (NoSuchMethodException e)<br /> {<br /> } catch (IllegalAccessException e)<br /> {<br /> } catch (InvocationTargetException e)<br /> {<br /> }<br /> }<br />

This gives a distinctly widgetty looking...



OSX is even kinder by allowing this widget to be dragged around, Windows will have to get a special mouse listener later.

Creating a Swing Dashboard Widget - Part 2 (Border)

Widgets have nice rounded borders. The LineBorder in the JDK doesn't really cut it: It's not anti-aliased, it draws weird artifacts, and it's tough to have the outside of the border transparent while inside the border is opaque.
While there are separate ways to fix these things, it's fairly easy to write one:

<br />public class RoundedBorder extends AbstractBorder {<br /> private Insets insets;<br /> private Stroke stroke;<br /> private Color strokeColor;<br /> private int arc;<br /> private float strokeWidth;<br /> <br /> /**<br /> * Simple rounded border with no outline<br /> * @param arc<br /> */<br /> public RoundedBorder(int arc) {<br /> this.arc = arc;<br /> int i = (int)(arc / Math.PI) / 2;<br /> insets = new Insets(i, i, i, i);<br /> }<br /><br /> /**<br /> * Rounded border with an outline<br /> * @param arc<br /> * @param strokeWidth width of the outline<br /> * @param color color of the outline<br /> */<br /> public RoundedBorder(int arc, float strokeWidth, Color color) {<br /> this.arc = arc;<br /> int i = (int)((arc / Math.PI) + ((strokeWidth * 2) / (Math.PI)));<br /> insets = new Insets(i, i, i, i);<br /> this.stroke = new BasicStroke(strokeWidth);<br /> this.strokeColor = color;<br /> this.strokeWidth = strokeWidth;<br /> }<br /><br /> public void paintBorder(Component c, Graphics g, int x, int y, int width,<br /> int height) {<br /> Graphics2D g2 = (Graphics2D)g.create();<br /> g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,<br /> RenderingHints.VALUE_ANTIALIAS_ON);<br /><br /> // In real code optimize by preserving the rect between calls<br /> if (stroke != null) {<br /> int i = (int)strokeWidth / 2;<br /> RoundRectangle2D.Float rect =<br /> new RoundRectangle2D.Float(i, i, width - strokeWidth,<br /> height - strokeWidth, arc, arc);<br /> g2.translate(x, y);<br /> g2.setColor(c.getBackground());<br /> g2.fill(rect);<br /><br /> g2.setColor(strokeColor);<br /> g2.setStroke(stroke);<br /> g2.draw(rect);<br /> } else {<br /> RoundRectangle2D.Float rect =<br /> new RoundRectangle2D.Float(0, 0, width, height, arc, arc);<br /> g2.translate(x, y);<br /> g2.setColor(c.getBackground());<br /> g2.fill(rect);<br /> }<br /> }<br /><br /> // boring stuff from here on...<br /><br /> public Insets getBorderInsets(Component c) {<br /> return insets;<br /> }<br /><br /> public Insets getBorderInsets(Component c, Insets insets) {<br /> return insets;<br /> }<br /><br /> public Rectangle getInteriorRectangle(Component c, int x, int y, int width,<br /> int height) {<br /> return getInteriorRectangle(c, this, x, y, width, height);<br /> }<br /><br /> public static Rectangle getInteriorRectangle(Component c, Border b, int x,<br /> int y, int width, int height) {<br /> Insets insets;<br /> if (b != null)<br /> insets = b.getBorderInsets(c);<br /> else<br /> insets = new Insets(0, 0, 0, 0);<br /> return new Rectangle(x + insets.left, y + insets.top,<br /> width - insets.right - insets.left,<br /> height - insets.top - insets.bottom);<br /> }<br />}<br />

As this border does the job of filling the entire background of the component with the component's background color, we can make the actual component transparent and this will leave nice transparent areas outside the curves of the corners. (Opaque components fill their entire bounds with the background color).
The drawback of this is that the border is painted after the component's contents, so custom painting for the widget content must be done in the paint method rather than the paintComponent or it won't show up.

Creating a Swing Dashboard Widget

Java 6 u10 will allow transparent windows and undockable applets. This should allow the creation of some Dashboard widget like Swing apps.

I'll see how close I can get to creating a basic widget in Swing. I'll take it one step at the time and post all the code and a demo at the end.

The exercise is purely a UI one. The code marvelousness and resource usage won't be a top concern here.

Step 1 - Test app with basic widget

In this case a blue square that does nothing. In the next few steps I'll try and get it more widget like.

<br />public class Frame1<br /> extends JFrame<br />{<br /> public Frame1()<br /> {<br /> setLayout(new FlowLayout());<br /> ((JComponent)this.getContentPane()).setBorder(<br /> BorderFactory.createEmptyBorder(20,20,20,20));<br /> setSize( new Dimension(220, 240));<br /> setTitle("Widget");<br /> add(createComp()); <br /> <br /> setLocationRelativeTo(null);<br /> setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );<br /> setVisible(true);<br /> }<br /><br /><br /> private JComponent createComp()<br /> {<br /> JPanel panel = new JPanel();<br /> panel.setPreferredSize(new Dimension(160,160));<br /> panel.setOpaque(true);<br /> panel.setBackground(new Color(20,50,110));<br /><br /> return panel;<br /> } <br /> <br /> public static void main(String[] args)<br /> {<br /> new Frame1();<br /> }<br />}<br />

Looks like this:

Flippable Swing Components

One of the nice things about Dashboard widgets is that their preferences are presented on the reverse of each widget. Doing this means that preferences don't take any extra screen real estate, they don't need a dedicated preferences dialog, and a nice flipping animation gives users a natural sense of their location.

Here's a basic implementation for Java Swing components. Webstart Demo





How it's done
A new ReversibleComponent takes a front and back component and does the following:
The front and back components are placed on top of each other in a JLayeredPane, the back one is initially hidden with setVisible(false).
Pressing the 'i' button starts the transition to the back. The transition animation technique is pretty much the same as my animated tree (why does JRoller delete hosted images after a while??). An image of each of the front and back components is captured, then temporary 'tween' images are composited and displayed in a layer above the real components during the animation.
The animation uses a perspective transform from JHLabs to gradually spin the front image away and the back image in. A semi transparent gradient is also drawn over the top to darken the end of the image spinning 'away' from the user giving a better sense of depth.
Once the animation is complete, the front component is hidden, the back one made visible and the 'tween' image overlay is removed. Voila! A spinning JComponent.

Source Code

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.

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.

Dashcode Beta Expired

Looks like Apple made good on their original expiry date for Dashcode Beta. Starting yesterday Dashcode will simply display a dialog saying the beta has expired. Annoyingly, this date was originally set to be after the release of Leopard allowing developers to upgrade the OS and keep working and supporting their widgets. Apple slipped the release of Leopard, but didn't similarly move the Dashcode expiry date.

Choices now are:
- Upgrade to Apple Select (for $500) and install a pre-release (flaky) version of Leopard.
- Wait patiently till October.
- TextEdit + Safari + Webkit debugger + a big headache.
- Set the date back on your machine while starting Dashcode Beta - this, amazingly, works. You'll have to have downloaded the beta already as it's no longer available on Apple Developer Center.