Imageslider

D3Blocks.imageslider(img_before, img_after, scale=True, colorscale=-1, background='#000000', title='Imageslider - D3blocks', filepath='imageslider.html', figsize=[None, None], showfig=True, notebook=False, return_html: bool = False, overwrite=True)

Imageslider Block.

The imageslider allows comparison of two images. This is useful in case there is a before and after state. For demonstration purposes, the example can be loaded from the Southern Nebula image that is taken with the Hubble telescope, and can be easily compared to that of the newest telescope. The javascript code is forked from JohnEdChristensen and then Pythonized to easily make comparisons between images.

Parameters:
  • img_before (String) – absolute path to before image.

  • img_after (String) – absolute path to after image.

  • scale (bool, default: True) –

    Scale image in range [0, 255], by img*(255/max(img))
    • True: Scaling image

    • False: Leave image untouched

  • colorscale (int, default: -1 (untouched)) –

    colour-scaling from opencv.
    • 0: cv2.IMREAD_GRAYSCALE

    • 1: cv2.IMREAD_COLOR

    • 2: cv2.IMREAD_ANYDEPTH

    • 8: cv2.COLOR_GRAY2RGB

    • -1: cv2.IMREAD_UNCHANGED

  • background (String (default: '#000000')) – Background color.

  • title (String, (default: None)) –

    Title of the figure.
    • ’Imageslider’

  • filepath (String, (Default: user temp directory)) –

    • File path to save the output.

    • Temporarily path: ‘d3blocks.html’

    • Relative path: ‘./d3blocks.html’

    • Absolute path: ‘c://temp//d3blocks.html’

    • None: Return HTML

  • figsize (tuple) –

    Size of the figure in the browser, [width, height].
    • [900, 900]

  • showfig (bool, (default: True)) –

    • True: Open browser-window.

    • False: Do not open browser-window.

  • notebook (bool) –

    • True: Use IPython to show chart in notebook.

    • False: Do not use IPython.

  • return_html (bool, (default: False)) –

    • True: Return html

    • False: Nothing is returned

  • overwrite (bool, (default: True)) –

    • True: Overwrite the html in the destination directory.

    • False: Do not overwrite destination file but show warning instead.

Return type:

None.

Examples

>>> # Load d3blocks
>>> from d3blocks import D3Blocks
>>> #
>>> # Initialize
>>> d3 = D3Blocks()
>>> #
>>> # Local images
>>> img_before, img_after = d3.import_example('southern_nebula')
>>> #
>>> # Internet location
>>> img_before, img_after = d3.import_example('southern_nebula_internet')
>>> #
>>> # Read the image in array
>>> img_before = cv2.imread(img_before, -1)
>>> img_after = cv2.imread(img_after, -1)
>>> #
>>> # Plot
>>> d3.imageslider(img_before, img_after)
>>> #
>>> # Plot
>>> d3.imageslider(img_before, img_after, showfig=True, scale=True, colorscale=2, figsize=[400, 400])

References

Input Data

The input dataset are two images.

Two images with different resolution from the Southern Nebula.

fig_m1

fig_m2

Chart