Skip to content
nachifur edited this page Dec 14, 2021 · 74 revisions

multiple images viewer

GitHub stars All releases

MulimgViewer

1. Introduction

MulimgViewer is an image viewer, which is capable of displaying multiple images in one window. It is very useful for image comparison, selection and stitching.

Features:

  • Loading images from multiple folders and displaying them side by side
  • Simultaneous magnification of multiple selected areas
  • Image rotation
  • Remote directory support
  • Bulk image resizing

image

Download link: Windows 10 binary package (amd64)

Test images pack download link: https://github.com/nachifur/MulimgViewer/blob/master/img/test_img.zip

Your star is my biggest support in developing and improving this project!

2. Python source code usage

After v3.9.1 only Windows 10 binary package (amd64) will be provided. But you can still use the source code to run the tool on other platforms. It is recommended to use Python 3.6 or newer.

pip installation: (If there is an error in the installation process, you can use conda.)

pip install wxpython pillow pytest-shutil numpy

run:

python3 MulimgViewer.py

3. Windows 10

Execute the provided binary file directly. Or download the source code and run MulimgViewer.py.

After v3.9.3, Windows 10 provides installation version _Setup.exe and portable version _Portable.exe (installation version _Setup.exe starts faster).

4. Application Scenarios

Example 1: Parallel image browsing

How long does it take to browse a dataset - CelebA of 202,599 images? Display 1000 images at once using MulimgViewer — you will be all set in 200 clicks! See details.

image

Example 2: Parallel image selection and saving

Previously, you had to open each image separately, compare them one by one, then find the specific images in a folder and copy them to another place.

Now you can use MulimgViewer to load and display all the images from multiple directories at once, then export the image pairs with one click!

image

In Select output mode images will be copied by default, and moved if MoveFile option is selected. Use Select output mode with Parallel Auto or Parallel Manual input modes and disabled Parallel+Sequential option.

Example 3: Parallel zoom

MulimgViewer supports automatic image stitching, saving and magnification in parallel!

image

You can select any part of the image to magnify that area. Click Zoom 🔍, then click the left mouse button and draw a rectangle. Also you can duplicate the selection (click the right mouse button) and view all magnified areas simultaneously. See details.

image

Example 4: Dataset browsing, paired images

MulimgViewer makes it easy to view and compare paired images.

image

Example 5: One-click generation of paper comparison chart

Support to display the title and adjust the box position. When the box position is middle bottom, it is recommended to 🔍️Scale=-1,-1; if you choose other positions mode, adjust 🔍️Scale by yourself, for example: 🔍️Scale=1.5,1.5. [See details] (#5.4.14)

image

Show the half of an image. when NumPerimg=2, combine two images into one image. When Gap(x,y)=*,*,0,*,*, the gap is eliminated.

image

Example 6: Browse images in a remote directory

After mounting a remote directory you can open that directory in MulimgViewer to view the images.

  1. Ubuntu: In the example below we connected to server stfp://10.8.0.4 using Ubuntu's file manager nautilus.
  1. win10: After installing WinFsp and SSHFS-Win, fill in the remote server ip in the file explorer, for example: \\sshfs\user@ip!port

Example 7: Click to rotate

Click Rotate ↷, then click the left mouse button to rotate an image.

image

Example 8: Batch image resizing

It is possible to batch resize images using the auto-save function. Step-by-step instructions:

  1. Input mode: Sequential. Choose the input directory;
  2. Choose the output directory;
  3. Check AutoSaveAll;
  4. Set TruthResolution to a fixed size, for example 256,256;
  5. Click Save 💾️.

5. Usage Instructions

5.1 Shortcut bar

image

5.2 Process Flow

  1. Fill in the layout parameters in the Settings panel: Row (number of images in a row), NumPerImg (number of sub-images that will be combined into a single image), Col (number of images in a column).

  2. File->Open, select input mode:

    2.1. Sequential: Multiple images in one folder.

    2.2. Parallel Auto: One folder with several subfolders, each subfolder contains multiple images.

    2.3. Parallel Manual: Manually select multiple folders.

    2.4. Image File List: Import images according to a given list of filenames (TXT, CSV).

  3. After loading the images you can use the Next and Previous buttons to switch between them.

  4. File->Output path, Select the output path.

5.3 Keyboard shortcuts

Input path:

  • Sequential: Ctrl+E
  • Parallel Auto: Ctrl+A
  • Parallel Manual: Ctrl+M
  • Image File List: Ctrl+F

Output path: Ctrl+O

Next: Ctrl+N

Previous Ctrl+L

Save: Ctrl+S

Refresh: Ctrl+R (Or right mouse button)

Use the keyboard arrow keys (up, down, left, right) to move the image in the image panel.

5.4 Functionality description

5.4.1 Input mode

Sequential is a serial browsing mode. It is used to display and stitch multiple images with different filenames contained in a single folder.

Parallel Auto and Parallel Manual are parallel browsing modes (subfolders with different names). In order to compare the images, each folder or subfolder must contain the images with the same filenames.

Image File List is a custom mode. You can import a list of images from TXT or CSV file. CSV supports multi-line and multi-column mode.

For automatic image arrangement set NumPerImg to -1.

5.4.2 Output mode

stitch: Save the stitched image to the stitch_images directory.

select: Save the currently displaying images to a different folder. By default the images will be copied to a new location, you can select MoveFile to move them instead.

magnifer: Save all the magnified areas separately.

Other modes are just the different combinations of the three modes listed above.

5.4.3 Automatic image arrangement

By default NumPerImg = -1 and this is an automatic layout mode. NumPerImg means that several images are combined into a single image.

If NumPerImg = 1 or >1, then the image layout is in manual mode. In this mode Row and Col numbers can be adjusted.

5.4.4. Sequential browsing in a parallel mode

By selecting Parallel+Sequential option, you can simultaneously view the first n images in folders 1-12, n can be set by NumPerImg.

For example: Row=5, NumPerImg=4, Col=1 means that MulimgViewer will show 4 images from 5 parallel directories at once, 20 images in total. Check Vertical to change the image layout direction.

Modify Row and Col to control the two-dimensional arrangement of parallel folders.

image

Parallel->Sequential: Generate a image list containing all pictures in multiple folders, and then display them in serial.

5.4.5 Auto save

Select AutoSaveAll, then click Save 💾️.

5.4.6 Image size normalization

Fill: Image size is the largest image in a group, filling mode (keep the original pixel resolution).

Crop: Image size is the smallest image in a group, cropping mode (keep the original pixel resolution).

Resize: Image size is an average size of all the images in a group, scaling mode (don't keep the original pixel resolution).

5.4.7 Gap between images

image

5.4.8 Color fill

You can use custom background and foreground colors and transparency.

5.4.9 Parallel Manual mode supports file list import and export

5.4.10 Independent display and output sizes

This feature provides independent view and output scales.

Application scenario:

  1. When you need to display a lot of images at the same time and the screen can’t fit them all, just set Scale:Show to shrink the images.
  2. Stitched images at 100% scale can be very large, but you can control the dimensions of the individual images by setting Scale:Out.

5.4.11 Parallel zoom

Process Flow:

  1. Click Zoom 🔍️;
  1. Mouse pointer will be turned into a crosshair cursor. Now you can make a selection;
  2. To make a selection press and hold the left mouse button, drag mouse to draw a rectangle and then release the button — a magnified area will be displayed;
  3. Click the right mouse button to duplicate the selection.

Tips:

  1. 🔍️KeepSize — keep the image and the magnified area aspect ratios the same.
  2. 🔍️Scale by default is set to -1,1, which means the scaling factor will be chosen automatically.
  3. Select Vertical, then press Crtl+R to place the magnified area on the right side of the original image.
  4. Use 🔍️Scale to change the magnification factor, but keep in mind that the maximum size will not exceed the original image size. For example, 3,3 means enlargement by a scale factor of 3.
  5. Set Box:Width to 0 to hide the selection border.
  6. Box:Width is set in pixels and remains the same in all zoom levels. If the selection border width is suitable when Scale:show is set to 0.1,0.1 and Scale:Out is set to 1,1, then it will probably be much thinner in the output image.
  7. After clicking Zoom 🔍️, select the image by clicking the image with the left mouse button, and then use ctrl + mouse wheel to zoom the image globally.
  8. The scroll wheel zoom function is controlled by a zoom factor. Every time you manually fill in Scale:Show and press Enter, the zoom factor is cleared to zero.

Adjust the position of the selection:

  1. Check SelectBox;
  2. Position the mouse pointer inside the selection border and click the left mouse button to select it;
  3. Use the keyboard arrow keys to adjust the position of the selection;
  4. Uncheck SelectBox.

Note: After selecting SelectBox option you cannot make a new selection by pressing the left mouse button, but you can still duplicate an exsisting selection by pressing the right mouse button.

Clear a box:

Method 1:

  1. Check SelectBox, click the left mouse button on a selection, press Del to clear the chosen selection;
  2. Unheck SelectBox, press Del to clear all selections.

Method 2:

  1. Uncheck SelectBox;
  2. Double-click the left mouse button on the image;
  3. Press Ctrl+R to clear all the selections and refresh the view.

Do not show box/img:

  1. Uncheck Box:InBox, remove the box on the original picture
  2. Uncheck Box:In🔍️, remove the box on the enlarged picture
  3. Uncheck ShowImg, the original picture will not be displayed
  4. Uncheck Show🔍️, the enlarged picture will not be displayed

5.4.12 Automatic window size adjustment

Enable AutoWinSize for automatic window resizing.

5.4.13 Browse images, precise positioning

Move the slider for coarse positioning.

  1. Help->Index Table;
  2. Find the serial number of the image;
  3. Enter the serial number and press Enter.

5.4.14 Title

title

  1. After closing Title:Auto, you can customize the display title
  2. In the Sequential input mode, the file name is 01_DSC.jpg, and the Prefix and Suffix are not selected, the file is displayed as DSC. Use numbers to sort image files.

Font

  1. It is recommended to use the installation version _Setup.exe
  2. Copy the font 1_Calibri-Light.ttf to the installation directory C:\Program Files (x86)\MulimgViewer\font\using
  3. The smaller the number in 1_Calibri-Light.ttf, the higher the font order in the GUI

6. Important information and useful tips

6.1 Parallel mode

  1. Make sure that image filenames in all folders/subfolders are the same when using the multi-image modes (Parallel Manual and Parallel Auto).
  2. Subfolder naming is also important. If the names are 0,1,2...10,11, then you should change them to 00,01,02...10,11. Otherwise MulimgViewer will sort them as 0,1,10,11,2...

Recommended file renaming tool:

win10: uTools

Ubuntu:

  1. purrr. sudo apt install purrr
  2. Thunar-Bulk Rename Files. sudo apt install thunar

6.2 Multi-image stitching, high resolution images, window size issues

  1. Disable AutoWinSize and maximize the window.
  2. Adjust Scale:Show as needed. For example, 0.2,0.2 to shrink, 2,2 to enlarge images.
  3. Set TruthResolution to resize all the images to the same size for your viewing convenience.

7. Future enhancements

Thanks for your comments! Leave your suggestions, ideas and feedback in the issues, and I will try to implement the most useful ones! If you want to cooperate with me in development, please contact me!

  • Add precise positioning (currently there is a slider)
  • Add image index view to facilitate precise positioning
  • Parallel partial zoom function (used for contrast experiment pictures in the paper needed urgently!)
  • Input method, new: import and storage of path files (@nothingeasy provides suggestions for improvement)
  • Add delete function (perfect filter function)
  • Save the original framed image (@JuZiSYJ provides suggestions for improvement)
  • Each image can be rotated after clicking
  • Add multi-box zoom function (@JuZiSYJ provides suggestions for improvement)
  • Remove the box of cropped images (@stefanklut provides suggestions for improvement)
  • Comparison of high-definition images, and 1:1 output of enlarged images (@Faberman provides suggestions for improvement)
  • Add title for each image (@Faberman provides suggestions for improvement)

8. Acknowledgements

  • Everyone in the QQ group;
  • nothingeasy: improvement opinions-(input method, new addition: import and storage of path files);
  • JuZiSYJ: Suggestions for improvement-(Save original image with frame + parallel zoom);
  • Faberman: Suggestions for improvement-(add titile for each image + magnified image 1:1 output);
  • stefanklut: Suggestions for improvement-(Do not display the bounding box of the enlarged image);
  • FunkyKoki: Suggestions for improvement-(show half of the image + add enlarged image arrangement method).

9. Cite This Project

If you use this project in your research please use the following BibTeX entry.

@misc{MulimgViewer2020,
  author =       {Liu, Jiawei},
  title =        {{MulimgViewer: A multi-image viewer for image comparison and image stitching}},
  howpublished = {\url{https://github.com/nachifur/MulimgViewer}},
  year =         {2020}
}

10. Terms of use

License

GPL-3.0 License:https://www.gnu.org/licenses/gpl-3.0.en.html

Additiona terms of use

Clone this wiki locally