Slider

[Marc Walton]

I am trying to create a slider plugin for imagej to compare a two image stack as a "before" and "after" sequence. An example of a html-based tool can be found here: http://zurb.com/playground/twentytwenty.

Has anyone made such a slider for imagej? Also for a novice java programmer, what would be the best approach to creating this?

Best,
Marc

[dscho]

Hi Marc,

On Fri, 18 Apr 2014, Marc Walton wrote:

> I am trying to create a slider plugin for imagej to compare a two image
> stack as a "before" and "after" sequence. An example of a html-based
> tool can be found here: http://zurb.com/playground/twentytwenty.
>
> Has anyone made such a slider for imagej? Also for a novice java
> programmer, what would be the best approach to creating this?

As a rule of thumb, it is harder for novice Java programmers to make a
good GUI than one would naively think. (Most of those endeavors are given
up on when encountering the need for responsive layouts.)

Therefore, I would something completely different: write a macro that
obtains the names of the two images via a dialog
(http://imagej.nih.gov/ij/developer/macro/functions.html#Dialog.addChoice)
and then generates a 50/50 image and monitors the mouse position, updating
the image based on the x coordinate (first image for x = 0, second image
for x = width - 1).

Of course, you could always experiment with writing a plugin with a
preview option that contains a slider (unfortunately, the tutorial at
http://imagingbook.com/imagej-tutorial/ does not yet describe previewing
plugins).

After acquainting yourself with plugin programming by reading Werner
Bailer's tutorial, you will need to look at
http://jenkins.imagej.net/job/ImageJ1-javadoc/javadoc/ij/plugin/filter/ExtendedPlugInFilter.html#showDialog%28ij.ImagePlus,%20java.lang.String,%20ij.plugin.filter.PlugInFilterRunner%29
and at
http://jenkins.imagej.net/job/ImageJ1-javadoc/javadoc/ij/gui/GenericDialog.html#addSlider%28java.lang.String,%20double,%20double,%20double%29

Good luck!
Johannes

--
ImageJ mailing list: http://imagej.nih.gov/ij/list.html

[Michael Schmid]

Hi Marc,

to keep it reasonably simple, you can use the 'preview' function of an ExtendedPlugInFilter, and a slider of a GenericDialog.

The following might also serve as an example for how to use 'preview'.

Beware of line breaks introduced by the mailer!
The file should be named 'Cross_Fader.java', use Compile&Run to compile it.
________________________________________________________________

import ij.*;
import ij.process.*;
import ij.plugin.filter.ExtendedPlugInFilter;
import ij.plugin.filter.PlugInFilterRunner;
import ij.gui.DialogListener;
import ij.gui.GenericDialog;
import java.awt.*;

/**Cross_Fader 1.0 Michael Schmid 2014-04-22
 * Takes a two-slice stack and copies part of the second slice into the current one.
 */

public class Cross_Fader implements ExtendedPlugInFilter, DialogListener {
    private static int FLAGS =      //bitwise or of the following flags:
            STACK_REQUIRED |
            DOES_ALL |              //this plugin processes 8-bit, 16-bit, 32-bit gray & 24-bit/pxl RGB
            KEEP_PREVIEW;           //When using preview, the preview image can be kept as a result

    private double percentage;      //how much of the other slice is shown
    private ImageProcessor otherSlice;  //Image data of the other slice

    /**
     * This method is called by ImageJ for initialization.
     * @param arg Unused here. For plugins in a .jar file this argument string can
     *            be specified in the plugins.config file of the .jar archive.
     * @param imp The ImagePlus containing the image (or stack) to process.
     * @return    The method returns flags (i.e., a bit mask) specifying the
     *            capabilities (supported formats, etc.) and needs of the filter.
     *            See PlugInFilter.java and ExtendedPlugInFilter in the ImageJ
     *            sources for details.
     */
    public int setup (String arg, ImagePlus imp) {
        return FLAGS;
    }

    /** Ask the user for the parameters. This method of an ExtendedPlugInFilter
     *  is called by ImageJ after setup.
     * @param imp       The ImagePlus containing the image (or stack) to process.
     * @param command   The ImageJ command (as it appears the menu) that has invoked this filter
     * @param pfr       A reference to the PlugInFilterRunner, needed for preview
     * @return          Flags, i.e. a code describing supported formats etc.
     */
    public int showDialog (ImagePlus imp, String command, PlugInFilterRunner pfr) {
        if (imp.getNSlices() != 2) {
            IJ.error("stack with two slices required");
            return DONE;
        }
        int currentSliceN = imp.getSlice();
        int otherSliceN = 3 - currentSliceN;  //exchanges 1 & 2
        otherSlice = imp.getStack().getProcessor(otherSliceN);
        GenericDialog gd = new GenericDialog(command+"...");
        gd.addSlider("Fraction to Fade In", 0.0, 100.0, 50.0);
        gd.addPreviewCheckbox(pfr);
        gd.addDialogListener(this);
        gd.showDialog();           // user input (or reading from macro) happens here
        if (gd.wasCanceled())      // dialog cancelled?
            return DONE;
        return FLAGS;              // makes the user process the slice
    }

    /** Listener to modifications of the input fields of the dialog.
     *  Here the parameters should be read from the input dialog.
     *  @param gd The GenericDialog that the input belongs to
     *  @param e  The input event
     *  @return whether the input is valid and the filter may be run with these parameters
     */
    public boolean dialogItemChanged (GenericDialog gd, AWTEvent e) {
        percentage = gd.getNextNumber();
        return !gd.invalidNumber() && percentage>=0 && percentage <=100;
    }

    /**
     * This method is called by ImageJ for processing
     * @param ip The image that should be processed
     */
    public void run (ImageProcessor ip) {
        crossFade(ip, otherSlice, percentage);
    }

    /** And here you do the actual cross-fade */
    private void crossFade(ImageProcessor ip, ImageProcessor otherSlice, double percentage) {
        int width = ip.getWidth();
        int height = ip.getHeight();
        Object pixelsDest = ip.getPixels();
        Object pixelsSource = otherSlice.getPixels();
        int pixelsToCopyPerLine = (int)(width*(percentage/100.));
IJ.log("fade="+ip+"\n"+otherSlice);
        for (int y=0; y<height; y++) {
            System.arraycopy(pixelsSource, y*width, pixelsDest, y*width, pixelsToCopyPerLine);
        }
    }

    /** Set the number of calls of the run(ip) method. This information is
     *  needed for displaying a progress bar; unused here.
     */
    public void setNPasses (int nPasses) {}

}
________________________________________________________________


Michael
________________________________________________________________
On Apr 18, 2014, at 22:33, Marc Walton wrote:

> I am trying to create a slider plugin for imagej to compare a two image stack
> as a "before" and "after" sequence. An example of a html-based tool can be
> found here: http://zurb.com/playground/twentytwenty.
>
> Has anyone made such a slider for imagej? Also for a novice java programmer,
> what would be the best approach to creating this?
>
> Best,
> Marc

--
ImageJ mailing list: http://imagej.nih.gov/ij/list.html

[dscho]

Hi Michael,

On Tue, 22 Apr 2014, Michael Schmid wrote:

> to keep it reasonably simple, you can use the 'preview' function of an ExtendedPlugInFilter, and a slider of a GenericDialog.
>
> The following might also serve as an example for how to use 'preview'.
>
> Beware of line breaks introduced by the mailer!
> The file should be named 'Cross_Fader.java', use Compile&Run to compile it.

This is a great little plugin! And it really invites Marc to modify it,
e.g. by adding semi-transparency to a band in the middle, keyboard
shortcuts to control the slider, etc.

To help with this, I turned it into a Maven project that can be easily
imported into IntelliJ, Netbeans or Eclipse:

        https://github.com/fiji/Cross_Fader

In addition to being easy to import, it now also lives on GitHub, making
it much easier to develop in a cooperative manner.

Thank you so much!
Johannes

--
ImageJ mailing list: http://imagej.nih.gov/ij/list.html

[Marc Walton]

Michael,

This works like a charm! Nice plugin that does exactly what I wanted.

Thanks for the help here.

Best,
Marc