In a recent stackoverflow.com question I asked for input on how to implemented animated GIFs in SWT table/tree viewer cells. Below is some code of the final solution.
Animation thread
The animation thread can be asked for the “current frame index” (CFI) by interested parties. The CFI thusly denotes the frame of an animated GIF which should be rendered. LabelProviders are the interested parties in this context because they actually render the images.
The thread increments the CFI in its run method. Also, Display#asyncExec is triggered in the run method. During the async execution the table/tree is ask to redraw and update – see lines 69ff.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | /** * This animation thread doesn't actually animate anything itself. However, it acts as a pace maker * for other components that are able to render animated images. In a loop this thread marks * designated columns of a tree viewer (see constructor) for redrawing and calls * update() on the tree itself. Label providers on the other hand ask this thread for * the current frame index whenever they're triggered provide an image for the designated column. * * The viewer's content provider is ideally suited to control the life cycle of this thread. It can * create/destroy a thread instance whenever the viewer's content is updated. * */ public class BuildColorAnimationThread extends Thread { private final TreeViewer viewer; private final int animationColumnIndex; private final ImageLoader sampleImage; private int currentFrameIndex; private boolean cancel; private static BuildColorAnimationThread runningInstance; /** * C'tor which sets this instance to be the one running instance. * * @param viewer the viewer whose content should be animated * @param animationColumnIndex the index of the column to be animated * @param sampleImage a sample image which resembles the animation images in the viewer, the * thread uses it to extract repeat-counts and frame delays * @see BuildColorAnimationThread#getRunningInstance() */ public BuildColorAnimationThread(final TreeViewer viewer, final int animationColumnIndex, final ImageLoader sampleImage) { this.viewer = viewer; this.animationColumnIndex = animationColumnIndex; this.sampleImage = sampleImage; this.currentFrameIndex = 0; BuildColorAnimationThread.setRunningInstance(this); } /** * Returns the running instance of the animation thread or null if there's none. * * @return the running instance of the animation thread or null if there's none */ public static BuildColorAnimationThread getRunningInstance() { return runningInstance; } private static void setRunningInstance(BuildColorAnimationThread runningInstance) { BuildColorAnimationThread.runningInstance = runningInstance; } @Override public void run() { int repeatCount = this.sampleImage.repeatCount; /* * The repeat count takes into consideration that an animated image might not be animated * infinitely but only for a given number of loops. */ while (!this.cancel && !this.viewer.getTree().isDisposed() && (this.sampleImage.repeatCount == 0 || repeatCount > 0)) { this.viewer.getTree().getDisplay().asyncExec(new Runnable() { public void run() { final BuildColorAnimationThread thread = BuildColorAnimationThread.this; final Tree tree = thread.viewer.getTree(); if (!tree.isDisposed()) { final Rectangle clientArea = tree.getClientArea(); // Marks ONLY the animation column to be redrawn and not the entire table! tree.redraw(clientArea.x, clientArea.y, tree.getColumn(thread.animationColumnIndex) .getWidth(), clientArea.height, false); tree.update(); // During the first loop currentFrameIndex=0...then currentFrameIndex=1,etc. thread.currentFrameIndex = (thread.currentFrameIndex + 1) % thread.sampleImage.data.length; } } }); try { int ms = this.sampleImage.data[this.currentFrameIndex].delayTime * 10; if (ms < 20) { ms += 30; } if (ms < 30) { ms += 10; } Thread.sleep(ms); } catch (InterruptedException e) { Thread.currentThread().interrupt(); } /* * If the last frame was signaled as being the current frame, decrement the repeat count and * start again. */ if (this.currentFrameIndex == this.sampleImage.data.length - 1) { repeatCount--; } } } /** * Returns the index of the current frame. Animation providers (i.e. renderers) call this method * in order to find out which frame of an animated image they should render at any given point in * time. * * @return frame index starting at 0 */ public int getCurrentFrameIndex() { return this.currentFrameIndex; } /** * Signals the thread to stop. It will finish the current execution in its run method and will * then stop. */ public void cancel() { this.cancel = true; } } |
LabelProvider
I use my own implementation of an OwnerDrawLableProvider which paints a static image if the icon doesn’t have to be animated. If it needs to be animated (based on some attribute of the row’s input) it paints the frame of an animated GIF. The index of the frame to draw is determined by the animation thread shown above. Hint: the getImage() method is called by paint().
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | /* * For each (animated) job color the provider keeps a map of frame_index-to-image entries. This * speeds up the process of delivering images for rendering because they don't have to be created * all the time from ImageData objects. */ private final Map> imagesMap = new HashMap>(); @Override protected Image getImage(Event event, Object element) { final IJob job = (IJob) element; Image image = BuildColorInfo.getIconImage(job.getColor()); if (job.isRunning()) { final BuildColorAnimationThread animationThread = BuildColorAnimationThread.getRunningInstance(); /* * Should no animation thread be running, the static image fetched a few lines above will be * returned. */ if (animationThread != null) { final int currentFrameIndex = animationThread.getCurrentFrameIndex(); Map images = this.imagesMap.get(job.getColor()); if (images == null) { images = new HashMap(); this.imagesMap.put(job.getColor(), images); } image = images.get(Integer.valueOf(currentFrameIndex)); if (image == null) { image = createNewImage(event, job.getColor(), currentFrameIndex); images.put(Integer.valueOf(currentFrameIndex), image); } } } return image; } private Image createNewImage(Event event, JobColor color, int currentFrameIndex) { final ImageLoader imageLoader = BuildColorInfo.getImageLoader(color); return new Image(event.gc.getDevice(), imageLoader.data[currentFrameIndex]); } |
“Controller”
The controller is responsible to start/stop the animation thread. Basically, whenever the viewer’s input changes the running animation thread must be canceled and a new thread must be started. The best hook for that is the viewer’s content provider – an implementation of I<Tree|Table>ContentProvider as it declares an inputChanged() method.
1 2 3 4 5 6 7 8 9 10 11 | @Override public void inputChanged(Viewer viewer, Object oldInput, Object newInput) { if (this.animationThread != null) { this.animationThread.cancel(); } // Animates the first column. this.animationThread = new BuildColorAnimationThread((TreeViewer) viewer, 0, BuildColorInfo .getImageLoader(JobColor.BLUE_ANIME)); this.animationThread.start(); } |
The code presented here was implemented for H2Eclipse, the Hudson plugin for Eclipse.
Hey, thanks for the example, although not complete.
What is an IJob there and what is the purpose there?
THX
Got it to work anyway, thanks for sharing.
Here I had to issue a global tree update (no clientArea reduction), otherwise my GIF was getting animated only when hovering the tree __line__ with the mouse. Any idea why this is happening?
The table shows IJob objects, it’s my internal inteface for all objects in that table.