Skip to main content

Making before/after image sliders in JupyterLab

Project description

Jupyter Splitview

Binder JupyterLight
A cell magic that displays images in splitview using https://github.com/NUKnightLab/juxtapose.
Note : Still work in progress, there will be breaking changes.
Note 2: JupyterLite Demo by pressing JupyterLight will come soon.

Installation

pip install jupyter-splitview

Example

import jupyter_splitview
%%splity

from skimage import data
from skimage.util import random_noise
import matplotlib.pyplot as plt

img = data.chelsea()
noisy_img = random_noise(img, var=0.02)

fig, ax1 = plt.subplots()
ax1.axis("off")
ax1.imshow(img)

fig, ax2 = plt.subplots()
ax2.axis("off")
ax2.imshow(noisy_img)

Note: The split view widget is still responsive after closing and reopening the notebook without running the cell again.

Another example:

%%splity --position 73% --height auto

import matplotlib.pyplot as plt
import numpy as np

array1 = np.full((15, 30), 10)
array2 = np.random.randint(0, 10, size=(15, 30))
fig, ax1 = plt.subplots(figsize=(5, 10))
ax1.imshow(array1)
fig, ax2 = plt.subplots(figsize=(5, 10))
ax2.imshow(array2)

Notebook arguments

  • --position 73% will set the slider start position to 73%.
  • The height of the widget.
  • --height 220 will set the height to 220 pixel.
  • When --heightis not provided, the default height of the widget is 300 pixel.
  • --height auto will set the height by the value of the first image's resolution in vertical direction.
  • The widget's width will always be adjusted automatically.

Notebook formatting

Formatting with black can be done this way:

  1. pip install 'black[jupyter]'
  2. black --python-cell-magics splity splitview_magic.ipynb

Developer Installation

  1. git clone --recurse https://github.com/kolibril13/jupyter-splitview (Note: In case that the repo was already cloned e.g. with the GitHub Desktop client, the GitHub submodule has to be loaded via git submodule update --init --recursive)
  2. poetry install

Changelog

Milestones

  • Handle cases where n ≠ 2 images. Currently: All further img are ignored.

  • implement tests, find out how to test a magic class

  • Idea: Second option without using cell magic:

from splitview import Splity # (does not yet exist)
my_splity = Splity(left_layer=img1, right_layer=img2)
display(my_splity)

* Make this work also in VSCode notebooks, [see this issue](https://github.com/NUKnightLab/juxtapose/issues/178).

0.0.8

  • Fixing problem with cell id and notebook reloading
  • Experimentally lowering the dependencies to ipython = ">=6.0.0" and ipykernel = ">=5.0.0" so that jupyterlite will work hopefully.

0.0.7

  • Rewrite of the import of JavaScript and CSS to make it more robust when closing and opening the notebook
  • First attempt to add a JupyterLite example.

0.0.6

Fix poetry workflow

0.0.5

  • Ship the javascript directly with the package, so no internet connection is required
  • use jinja2 to save HTML in separate file
  • load stylesheet and javascript only once in the beginning, and not in every cell that contains the splitview widget.

0.0.4

  • New --height parameter

0.0.3

  • default slider position
  • updated minimal example
  • internal code restructuring and formatting
  • Handle import in non jupyter context

0.0.2

  • save images in base64 strings and don't load images to disk (increases package security).

0.0.1

  • First release

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

jupyter-splitview-0.0.8.tar.gz (14.3 kB view hashes)

Uploaded Source

Built Distribution

jupyter_splitview-0.0.8-py3-none-any.whl (13.9 kB view hashes)

Uploaded Python 3

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page