Tool for Determining Image Slice Bounds

[matthewnau]

Feature Outline:

Develop a simple GUI application that allows users to open an image and draw a box over a certain section. Allow the users to load a specified image and then perform a click-and-drag operation where they can "draw" a rectangular box around a cluster of pixels. (Similar to how the "preview" app in MacOS works in regards to cropping)

Once the user has drawn their box, the application would then display the bounds that specific image slice. This return value would be a list of 4 coordinates/bounds that pertain to the pixel location of where the slice starts and stops.

Why is this useful?

When defining output-image validation methods, the typical approach consists of taking an image slice and then performing some form of analysis on it to determine whether it was rendered correctly. But in order to "slice" the image into different pieces, you need to provide the bounds as an argument so the slicer method knows where to start and stop cropping the image.

This feature would be very useful as a tool for developers who choose to use this package. It would make output-image validation many times easier without the need to manually calculate the bounds by comparing the original image dimensions to the slice dimensions. Developers could simply draw their selection and immediately be presented with the bounds of their slice. There would ideally be a simple "copy values" button presented as well.

Challenges and Considerations:

• This feature would essentially require designing and implementing a whole separate standalone application. While extremely useful, its workload may be outside the scope of specific package.
• The user should be able to zoom in and out down to the pixel level. Without being to see individual pixels, there would be no point to the application.
• The application should have a grid that can be toggled on and off if possible. (similar to other photo editing applications)

Example Mockup:

See the figure below as an example of what the GUI application could look/function like. Notice how in the bottom left-hand corner a rectangle is drawn and a pop-up is displayed directly to the right that lists the relevant bounds values.

[matthewnau]

This is a useful stackoverflow answer to use as a starting point for researching approaches to this issue. This specific discussion references using the PyQt library for GUI development. Further research also points to the PySimpleGUI package which simplifies the development work further.

[matthewnau]

Another potentially simpler approach would be to create a simple web-app that offers the intended functionality. This could either be a single file application with HTML, CSS and JS all bundled together or separate. The web-app could just have an "upload image" button that loads the image into cache and manipulates it from there.

This raises the topic of whether the application should have a devtools directory included with it that includes scripts or apps like this. In addition, the devtool should also be easily callable. (e.g. botross --image-slice-tool)

If the command line launcher is implemented, the potential of pre-loading the webapp with a specified image-file via additional arguments should be explored as well. (e.g. botross -i "/users/johndoe/output-image.png" --image-slice-tool)