[UserStory] Getting an image to scale to the window

[CamiJolly1]

User Story

Essential components

• Title describes the story
• Stakeholder type is identified
• Outcome is described
• Rationale is explicit
• Acceptance criteria are verifiable and from the perspective of the stakeholder

Story

As a student
I want the picture to be resized so it can be seen in the window of ImageLab instead of cutting off the image
so that to product looks nicer in the end result.

Acceptance Criteria

• If the picture is larger than the window, it will scale down.
• If the picture is below a certain threshold, scale up.

Supporting Information

At the moment, when adding an image to ImageLab, the image will appear, but it does not fit in the window, and it does not allow you to scroll down to look at the complete image. This does not allow the user to filter the entire image, but instead, just a portion of which is not selected by the user.

Dependencies

Depends On

[UserStory] Notify Users of an unrecognizable file type and let user select a new file #83
[UserStory] Dealing with an image larger than the window #124

Dependents

None

[CamiJolly1]

I would like to be assigned to this issue.

[jody]

@CamiJolly1 This suggests a particular solution (scaling) to the problem (inability to view all parts of the loaded image). The problem being newly identified suggests that we should consider more potential solutions before settling on one (or more) to implement.

Just as one example, another solution would be to provide the ability to "pan" the image within the window.

Let's define this issue as identifying the problem and have the maintainers (likely you) review the issue more critically and identify several solutions from which to choose.

[jody]

The rationale ("product looks nicer in the end result") is an aesthetic that does not have an objective metric. This also suggests that the outcome is offering a solution rather than problem.

Here are some thoughts based on the design and intents of the product:

• Imagelab attempts to shows all pixels of a loaded image.
• This is not possible in the case where the loaded image is larger than the display area of the system.
• Imagelab currently addresses this by cropping the displayed image.
• Other options may be more desirable for individual users, such as
  • Allow the user to pan the image (window as viewport)
    • Maintains the objective of seeing all pixels, but not simultaneously
    • This requires modification of the product, in particular the rendering of images to the screen
  • Allow the user to scale the image, removing and/or replacing some pixels (e.g., averaging)
    • This behavior is already realizable within Imagelab through the use of a "scaling" filter
    • Such a filter could be incorporated into the product or available as an option

[jody]

FYI, here's source code for an ImageLab filter, QuarterSize, that creates a new image that is one-quarter the size of the original by averaging the values of four pixels into a single pixel. (Note: This is not a general solution for the scaling issue because the new image has less information than the original, thus the original image cannot be recovered by rescaling.)

package filters;
import imagelab.*;
/**
 * An imageLab filter that shrinks the image.
 * @author Dr. Jody Paul
 */
public class QuarterSize implements ImageFilter {
    
    ImgProvider filteredImage;
    
    /**
     * The filter itself.
     * @param ip the image to be filtered.
     */
    public void filter (ImgProvider ip) {
        int tmp;
        short[][] red = ip.getRed();     // Red plane
        short[][] green = ip.getGreen(); // Green plane
        short[][] blue = ip.getBlue();   // Blue plane
        short[][] alpha = ip.getAlpha(); // Alpha channel
    
        int height = red.length;
        int width  = red[0].length;

        if (height < 2 || width < 2) {
            filteredImage = new ImgProvider();
            filteredImage.setColors(red, green, blue, alpha);
            filteredImage.showPix("1 Pixel - Can go no smaller!");
            return;
        }

        int newHeight = height / 2;
        int newWidth  = width / 2;
    
        short[][] newRed = new short[newHeight][newWidth];     // Red plane
        short[][] newGreen = new short[newHeight][newWidth]; // Green plane
        short[][] newBlue = new short[newHeight][newWidth];   // Blue plane
        short[][] newAlpha = new short[newHeight][newWidth]; // Alpha channel
    
    
       //System.out.println("Filtering image number " + ip.getid());
        
        for (int row = 0; row < newHeight; row++) {
            for (int column=0; column < newWidth; column++) {
                tmp =   (red[row*2][column*2]
                        +red[row*2+1][column*2]
                        +red[row*2][column*2+1]
                        +red[row*2+1][column*2+1])/4;
                newRed[row][column] = (short)tmp;
                tmp =   (green[row*2][column*2]
                        +green[row*2+1][column*2]
                        +green[row*2][column*2+1]
                        +green[row*2+1][column*2+1])/4;
                newGreen[row][column] = (short)tmp;
                tmp =   (blue[row*2][column*2]
                        +blue[row*2+1][column*2]
                        +blue[row*2][column*2+1]
                        +blue[row*2+1][column*2+1])/4;
                newBlue[row][column] = (short)tmp;
                tmp =   (alpha[row*2][column*2]
                        +alpha[row*2+1][column*2]
                        +alpha[row*2][column*2+1]
                        +alpha[row*2+1][column*2+1])/4;
                newAlpha[row][column] = (short)tmp;
            }//for column
        }//for row
    
        filteredImage = new ImgProvider();
        filteredImage.setColors(newRed, newGreen, newBlue, newAlpha);
        filteredImage.showPix("QuarterSize");
    }//filter
    
    /**
     * Retrieve the filtered image.
     * @return the filtered image.
     */
    public ImgProvider getImgProvider() {
        return filteredImage;
    }//getImgProvider
    
    /**
     * Retrieve the name of the filter to add to the menu.
     * @return the filter's menu item label
     */
    public String getMenuLabel() {
        return "QuarterSize";
    } //getMenuLabel
    
}

[Li-es]

Hello, can you assign me to this issues

[jody]

Please check to see if the "QuarterSize" filter results in showing an appropriately scaled image as a visual confirmation that the information from the image that was larger than the window is being preserved even though it is not visible.

[CamiJolly1]

So I do not see a "QuarterSize" filter in ImageLab or in the code. I have three filters: RBSwap, Generic, and HFlip.

[jody]

So I do not see a "QuarterSize" filter in ImageLab or in the code. I have three filters: RBSwap, Generic, and HFlip.

The code is in comment: #114 (comment)

[CamiJolly1]

Okay. To make sure I'm on the same page, do you want me to add it to ImageLab? Or just test with it?

[jody]

Just test it... I've done some preliminary tests that indicate that the entire image information is preserved even though the entire image is not displayed.

So I think we can close this issue and defer to issue #124