Skip to content

Instantly share code, notes, and snippets.

@mwcraig

mwcraig/image-widget-display-sizes.ipynb

Last active February 16, 2018 23:57
Show Gist options
  • Save mwcraig/732e0cb75e695f29b9501b19b29795d9 to your computer and use it in GitHub Desktop.
Save mwcraig/732e0cb75e695f29b9501b19b29795d9 to your computer and use it in GitHub Desktop.
Download ZIP
Display the source blob
Display the rendered blob
Raw
image-widget-display-sizes.ipynb
{
"cells": [
{
"cell_type": "code",
"execution_count": 1,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"from __future__ import print_function, division\n",
"from ipywidgets import Image, Box\n",
"import numpy as np\n",
"from scipy.misc import imsave\n",
"from io import BytesIO"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Sizes and the `Image` widget"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Working image\n",
"\n",
"We create an image 600 pixels wide, 300 pixels high. It is a gaussian of width 60 pixels centered at the center of the image."
]
},
{
"cell_type": "code",
"execution_count": 2,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"height = 300\n",
"width = 600"
]
},
{
"cell_type": "code",
"execution_count": 3,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"center_x = height/2\n",
"center_y = width/2\n",
"sigma = height/5\n",
"#data = np.random.randint(0, 255, size=[300, 600])\n",
"positions = np.mgrid[0:height, 0:width]\n",
"x = positions[0, ...]\n",
"y = positions[1, ...]\n",
"\n",
"gaussian = np.exp(-((x - center_x)**2 + (y - center_y)**2)/sigma**2)\n",
"img_buffer = BytesIO()\n",
"\n",
"imsave(img_buffer, gaussian, format='png')\n",
"image = img_buffer.getvalue()"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Expected appearance of this image when opened in a browser taller/wider than image \n",
"\n",
"#### (Screen capture of initial display of `Image` widget)\n",
"\n",
"![image of gaussian](round1.png)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Case 1: `Image` widget with no height/width specified on init\n",
"\n",
"In this case the size of the image displayed depends on the smaller of the image dimensions and the browser window.\n",
"\n",
"If the window is wide and high enough, the image is displayed at its \"natural\" dimensions, 300x600. Otherwise, the image is scaled down fit in the browser."
]
},
{
"cell_type": "code",
"execution_count": 4,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"i = Image(\n",
" value=image,\n",
")"
]
},
{
"cell_type": "code",
"execution_count": 5,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "1f9fda17c86c462f989b21965a628da4",
"version_major": 2,
"version_minor": 0
},
"text/plain": [
"A Jupyter Widget"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"i"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### No property of the image widget indicates the onscreen size of the image"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Case 2: width specified in `Image` init\n",
"\n",
"In this case the image width is the width set in the init, with the image aspect ratio preserved."
]
},
{
"cell_type": "code",
"execution_count": 6,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"i2 = Image(\n",
" value=image,\n",
" width=200\n",
")"
]
},
{
"cell_type": "code",
"execution_count": 7,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "b7dc61e462eb4fd1ade42208eba42e76",
"version_major": 2,
"version_minor": 0
},
"text/plain": [
"A Jupyter Widget"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"i2"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Case 3: height specified in `Image` init\n",
"\n",
"Height is effective ignored. Image is displayed in its \"natural\" height and the aspect ratio is preserved."
]
},
{
"cell_type": "code",
"execution_count": 11,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"i3 = Image(\n",
" value=image,\n",
" height=100\n",
")"
]
},
{
"cell_type": "code",
"execution_count": 12,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "effbcd6877904be29758d2be80dd413a",
"version_major": 2,
"version_minor": 0
},
"text/plain": [
"A Jupyter Widget"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"i3"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Interlude: function to make an `Image` in a `Box`\n",
"\n",
"Any keyword arguments are passed through to the `Image` initializer."
]
},
{
"cell_type": "code",
"execution_count": 17,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"def box_factory(**kwd):\n",
" \"\"\"\n",
" Returns a Box with an Image in it.\n",
" \n",
" Keyword arguments are passed through unmodified to the \n",
" Image widget.\n",
" \n",
" Image value is from an earlier cell.\n",
" \"\"\"\n",
" b = Box()\n",
" i = Image(value=image, **kwd)\n",
" b.children = [i]\n",
" return b"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Case 4 4: Like 1, but with the Image in a Box whose height is set\n",
"\n",
"The box layout height is 400 pixels.\n",
"\n",
"The result is that the image is 396.023 high, 600 wide, because (I think) the box CSS determines the height of the image and some is taken out for the margin (2 pixels) between the `Image` widget and the `Box`. The CSS rule that sets the margin in this case is for the `jupyter-widgets` CSS class."
]
},
{
"cell_type": "code",
"execution_count": 19,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "618abb3541aa47c5bf5b5d35d4c8674e",
"version_major": 2,
"version_minor": 0
},
"text/plain": [
"A Jupyter Widget"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"box4 = box_factory()\n",
"box4.layout.height = '400px'\n",
"box4"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Changing the image *width* after the fact changes the displayed image....changing the *height* does not\n",
"\n",
"Because the CSS rule that applies is the one from the parent container, the `Box`."
]
},
{
"cell_type": "code",
"execution_count": 14,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"# i4.width = 100 # Changes the displayed width"
]
},
{
"cell_type": "code",
"execution_count": 15,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"# i4.height = 200 # Changes nothing"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Case 5: Like 2 (width in image init), but in a box\n",
"\n",
"As in 4, the height of the box is set to 400 pixels, but unlike 400 the `Image` widget width is set to 200 on initialization.\n",
"\n",
"The result is 398.023 high (like in 4) but 200 wide, so nothing like 2. The `Box` CSS, not the image, determines the height."
]
},
{
"cell_type": "code",
"execution_count": 21,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "ed8009bef98644389619c28e96656b86",
"version_major": 2,
"version_minor": 0
},
"text/plain": [
"A Jupyter Widget"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"box5 = box_factory(width=200)\n",
"\n",
"box5.layout.height = '400px'\n",
"box5"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Also like we saw earlier changing the height does not change the image displayed...\n",
"\n",
"...because part of the output area CSS is `height: auto`, and CSS always wins over the image tags."
]
},
{
"cell_type": "code",
"execution_count": 23,
"metadata": {},
"outputs": [],
"source": [
"box5.children[0].height = 100"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Case 6: In a box, height specified in `Image` init\n",
"\n",
"So like 5, but with the height given in init.\n",
"\n",
"The result is 396 high, 600 wide. Image height, like usual, is ignored."
]
},
{
"cell_type": "code",
"execution_count": 24,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "8b3bfdc08f3440c7aca1c33c73c228c7",
"version_major": 2,
"version_minor": 0
},
"text/plain": [
"A Jupyter Widget"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"box6 = box_factory(height=100)\n",
"box6.layout.height = '400px'\n",
"box6"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Case 7: Like 1, but in a box, whose layout width is specified\n",
"\n",
"Result: the width is 200 (the width set by the Box), and the height is the \"natural\" height, 300.\n"
]
},
{
"cell_type": "code",
"execution_count": 44,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "46e94ef0ab6c4dec84874341ca5d7120",
"version_major": 2,
"version_minor": 0
},
"text/plain": [
"A Jupyter Widget"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"b7 = box_factory()\n",
"b7.layout.width = '200px'\n",
"b7"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### BUT, setting the box height takes away the same 4 pixels as before \n",
"\n",
"Odd...well, maybe not odd given the prior behavior but still don't quite understand why this happens to height but not width since margin is the same in both."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Round 8: Box with dimensions matching the image\n",
"\n",
"Result: The displayed image has a height that is 4px smaller than the image, as above. The width is not."
]
},
{
"cell_type": "code",
"execution_count": 45,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "1ce051656ab841c49885ef250cc0a0b4",
"version_major": 2,
"version_minor": 0
},
"text/plain": [
"A Jupyter Widget"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"b8 = box_factory()\n",
"b8.layout.width = str(width) + 'px'\n",
"b8.layout.height = str(height) + 'px'\n",
"b8"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Case 9: Bare `Image` widget, but with some `padding` and `border` in the layout\n",
"\n",
"The border is 20px and the padding 42px, so I would expect the image width to be $600 - 2\\times(20 + 42)=476$, and the height to be $300 - 2\\times(20 + 42)=176$.\n",
"\n",
"What I *actually* get, according to Chrome, is a width of 490 and a height of 245.\n",
"\n",
"Unless I make the browser window wider, then I get a width of 600 and a height of 300. So apparently once the width of the containing div is small enough, the image gets reduced in some non-trivial (and perhaps browser-dependent) way.\n",
"\n",
"The click coordinates of the upper left are always getting returned as roughly 62, 62 which is good. OTOH, the lower right corner has a different click location depending on browser width."
]
},
{
"cell_type": "code",
"execution_count": 46,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "47c8238bd98a4fa788a784831720126c",
"version_major": 2,
"version_minor": 0
},
"text/plain": [
"A Jupyter Widget"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"i9 = Image(value=image)\n",
"i9.layout.border = \"20px solid red\"\n",
"i9.layout.padding = '42px'\n",
"i9"
]
},
{
"cell_type": "code",
"execution_count": 41,
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
"(60.63920593261719, 60.84376525878906)"
]
},
"execution_count": 41,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"i9.x_click, i9.y_click"
]
},
{
"cell_type": "code",
"execution_count": 43,
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
"(63.54261779785156, 61.07670593261719)"
]
},
"execution_count": 43,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"i9.x_click, i9.y_click"
]
},
{
"cell_type": "code",
"execution_count": 48,
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
"(550.0028533935547, 304.8409118652344)"
]
},
"execution_count": 48,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"i9.x_click, i9.y_click"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Code I thought I needed but didn't\n",
"\n",
"This generates an easily compared dict of the layout properties of a widget."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"def print_layout_props(widget):\n",
" more_skips = ['comm', 'cross_validation_lock', 'log', 'model_id']\n",
" props = [p for p in dir(widget.layout) \n",
" if (not p.startswith('_')\n",
" and not callable(widget.layout.__getattribute__(p))\n",
" and not p.startswith('widget')\n",
" and p not in more_skips\n",
" )]\n",
" for p in props:\n",
" print(': '.join([p, str(widget.layout.__getattribute__(p))]))\n",
" return {p: str(widget.layout.__getattribute__(p)) for p in props}"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": []
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 2",
"language": "python",
"name": "python2"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 2
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython2",
"version": "2.7.13"
},
"widgets": {
"application/vnd.jupyter.widget-state+json": {
"state": {
"011ed50990ed4a448b76ec657324d55f": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "1.0.0",
"model_name": "LayoutModel",
"state": {}
},
"0974dc3c89f84f7aa24972bb5987892c": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "1.0.0",
"model_name": "ImageModel",
"state": {
"height": "200",
"layout": "IPY_MODEL_0a8285b7dba94081b6c066204c5db702",
"value": {},
"width": "100",
"x_mouse": 73.63920593261719,
"y_mouse": 389.2130661010742
}
},
"09f0159c707a47569ecef409b9e53983": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "1.0.0",
"model_name": "LayoutModel",
"state": {}
},
"0a8285b7dba94081b6c066204c5db702": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "1.0.0",
"model_name": "LayoutModel",
"state": {}
},
"0ad6bf6c2017420f8a49ec18ccc89fb0": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "1.0.0",
"model_name": "LayoutModel",
"state": {
"border": "20px solid red"
}
},
"0e062cdd703843009a1ea90a87d0f4b9": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "1.0.0",
"model_name": "LayoutModel",
"state": {}
},
"15ba602d197640a4a2ee74b0de7a8bdf": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "1.0.0",
"model_name": "ImageModel",
"state": {
"layout": "IPY_MODEL_9bf9072737134b06846a214456e3acdf",
"value": {},
"x_mouse": 220.09376525878906,
"y_mouse": 227.3096580505371
}
},
"1b360c09eae941a098e7d65eeb0cd3a2": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "1.0.0",
"model_name": "LayoutModel",
"state": {}
},
"1b9f5e9cee2540b981f5dd0a9d19c546": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "1.0.0",
"model_name": "ImageModel",
"state": {
"layout": "IPY_MODEL_c53f9d7a7f724d28a762c7963f3b5d85",
"value": {},
"x_mouse": 86.09376525878906,
"y_mouse": 67.32386779785156
}
},
"1c90669c0312463f95b2f7f714aa2ea8": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "1.0.0",
"model_name": "ImageModel",
"state": {
"layout": "IPY_MODEL_9ca49a1fa35b487c9e962ea1316ab8bb",
"value": {},
"x_mouse": 87.09376525878906,
"y_mouse": 2.323883056640625
}
},
"1ce051656ab841c49885ef250cc0a0b4": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "1.0.0",
"model_name": "BoxModel",
"state": {
"children": [
"IPY_MODEL_41b6582f4be24bf3acb3120cacd7177d"
],
"layout": "IPY_MODEL_fb24bbd5dbd64b0380995b4000e21f1c"
}
},
"1f9fda17c86c462f989b21965a628da4": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "1.0.0",
"model_name": "ImageModel",
"state": {
"layout": "IPY_MODEL_f9598d19dfe6483e8d3576dd26536b0d",
"value": {},
"x_mouse": 584.6392059326172,
"y_mouse": 205.74715900421143
}
},
"2156c5b4d0e9421a9cd2122a7bd63f28": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "1.0.0",
"model_name": "ImageModel",
"state": {
"layout": "IPY_MODEL_cdad9ed76bdd43bdb612167a311bec85",
"value": {},
"x_mouse": 151.6392059326172,
"y_mouse": 2.75567626953125
}
},
"24256d7a7c824e1cb1231912a47a3adb": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "1.0.0",
"model_name": "LayoutModel",
"state": {
"height": "400px"
}
},
"3ccc9b8addac48818b74e67d3d07b810": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "1.0.0",
"model_name": "ImageModel",
"state": {
"layout": "IPY_MODEL_e9bbf53a10b546eeb58d5b3bebd1336b",
"value": {},
"x_click": 63.54261779785156,
"x_mouse": 641.5426177978516,
"y_click": 61.07670593261719,
"y_mouse": 71.53125
}
},
"3eae259f501b4e029d585122d4b6ae36": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "1.0.0",
"model_name": "LayoutModel",
"state": {
"height": "400px"
}
},
"4091484ac59d4a429c63cf03fa8fb3b2": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "1.0.0",
"model_name": "ImageModel",
"state": {
"layout": "IPY_MODEL_6a75d999ea1549bc9b62d02fe773f9ed",
"value": {},
"x_mouse": 138.09376525878906,
"y_mouse": 1.75
}
},
"41b6582f4be24bf3acb3120cacd7177d": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "1.0.0",
"model_name": "ImageModel",
"state": {
"layout": "IPY_MODEL_9b8b3c35b1544cdd91493f74b8bfd204",
"value": {},
"x_click": 165.4204559326172,
"x_mouse": 320.63352966308594,
"y_click": 161.44888305664062,
"y_mouse": 283.0028381347656
}
},
"46e94ef0ab6c4dec84874341ca5d7120": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "1.0.0",
"model_name": "BoxModel",
"state": {
"children": [
"IPY_MODEL_1b9f5e9cee2540b981f5dd0a9d19c546"
],
"layout": "IPY_MODEL_d1445c81cb2e4934abd3347886e9629f"
}
},
"47c8238bd98a4fa788a784831720126c": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "1.0.0",
"model_name": "ImageModel",
"state": {
"layout": "IPY_MODEL_d4063a1bfc68431d8167158196a9e3ee",
"value": {},
"x_click": 550.0028533935547,
"x_mouse": 361.54261779785156,
"y_click": 304.8409118652344,
"y_mouse": 3.91192626953125
}
},
"4b71caf0c4a146e8bd5d33910b2f6dcb": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "1.0.0",
"model_name": "LayoutModel",
"state": {
"height": "300px",
"width": "600px"
}
},
"618abb3541aa47c5bf5b5d35d4c8674e": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "1.0.0",
"model_name": "BoxModel",
"state": {
"children": [
"IPY_MODEL_15ba602d197640a4a2ee74b0de7a8bdf"
],
"layout": "IPY_MODEL_96ed0933afb5454a876c7190abf35852"
}
},
"6a75d999ea1549bc9b62d02fe773f9ed": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "1.0.0",
"model_name": "LayoutModel",
"state": {}
},
"6c2278c456ae4dc2afd4bb0a45171c60": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "1.0.0",
"model_name": "LayoutModel",
"state": {
"height": "400px"
}
},
"6e2d9f3ec6dd427d96b47fb2844137ab": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "1.0.0",
"model_name": "LayoutModel",
"state": {
"height": "400px"
}
},
"720336d198ec4087b7d3ed5646eece4c": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "1.0.0",
"model_name": "BoxModel",
"state": {
"children": [
"IPY_MODEL_1c90669c0312463f95b2f7f714aa2ea8"
],
"layout": "IPY_MODEL_1b360c09eae941a098e7d65eeb0cd3a2"
}
},
"78a59c64cb5d4e6996bae4003a88201d": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "1.0.0",
"model_name": "LayoutModel",
"state": {
"height": "400px"
}
},
"7f2cf8cddf894577b46b3f440ece9c20": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "1.0.0",
"model_name": "BoxModel",
"state": {
"children": [
"IPY_MODEL_2156c5b4d0e9421a9cd2122a7bd63f28"
],
"layout": "IPY_MODEL_3eae259f501b4e029d585122d4b6ae36"
}
},
"82b9d2cd658b47078efe46a145c34f66": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "1.0.0",
"model_name": "ImageModel",
"state": {
"height": "100",
"layout": "IPY_MODEL_e58c0c02c3434f8b913b39cf5cdcd0fd",
"value": {},
"x_mouse": 296.63352966308594,
"y_mouse": 303.3295440673828
}
},
"8b3bfdc08f3440c7aca1c33c73c228c7": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "1.0.0",
"model_name": "BoxModel",
"state": {
"children": [
"IPY_MODEL_82b9d2cd658b47078efe46a145c34f66"
],
"layout": "IPY_MODEL_6c2278c456ae4dc2afd4bb0a45171c60"
}
},
"8e014db5bccd48b6a709ba6f35c4ddb2": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "1.0.0",
"model_name": "ImageModel",
"state": {
"layout": "IPY_MODEL_011ed50990ed4a448b76ec657324d55f",
"value": {},
"x_mouse": 283.6392059326172,
"y_mouse": 0.761383056640625
}
},
"8e1a83573e9c4383b7e1f8286acfec35": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "1.0.0",
"model_name": "ImageModel",
"state": {
"layout": "IPY_MODEL_0ad6bf6c2017420f8a49ec18ccc89fb0",
"value": {}
}
},
"96ed0933afb5454a876c7190abf35852": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "1.0.0",
"model_name": "LayoutModel",
"state": {
"height": "400px"
}
},
"9b8b3c35b1544cdd91493f74b8bfd204": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "1.0.0",
"model_name": "LayoutModel",
"state": {}
},
"9bf9072737134b06846a214456e3acdf": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "1.0.0",
"model_name": "LayoutModel",
"state": {}
},
"9ca49a1fa35b487c9e962ea1316ab8bb": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "1.0.0",
"model_name": "LayoutModel",
"state": {
"height": "auto"
}
},
"9fab70e1a70a4432b6c3d75c9c7a8af7": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "1.0.0",
"model_name": "BoxModel",
"state": {
"children": [
"IPY_MODEL_deb85c2e1a40453dba427e62a457fb4e"
],
"layout": "IPY_MODEL_24256d7a7c824e1cb1231912a47a3adb"
}
},
"ab4fca7eb5194745b836e34a54a97b8d": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "1.0.0",
"model_name": "LayoutModel",
"state": {}
},
"b7dc61e462eb4fd1ade42208eba42e76": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "1.0.0",
"model_name": "ImageModel",
"state": {
"layout": "IPY_MODEL_f22cefb4f5364d96879c185551ae6bbe",
"value": {},
"width": "200",
"x_mouse": 70.09376525878906,
"y_mouse": 82.51705932617188
}
},
"bef9601278e84967a00a5c5fb3866681": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "1.0.0",
"model_name": "LayoutModel",
"state": {}
},
"c53f9d7a7f724d28a762c7963f3b5d85": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "1.0.0",
"model_name": "LayoutModel",
"state": {}
},
"c68f2e37d1e24aed876ad0c7ee3accae": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "1.0.0",
"model_name": "BoxModel",
"state": {
"children": [
"IPY_MODEL_0974dc3c89f84f7aa24972bb5987892c"
],
"layout": "IPY_MODEL_78a59c64cb5d4e6996bae4003a88201d"
}
},
"c9ceabb141274f679460ac7414296986": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "1.0.0",
"model_name": "ImageModel",
"state": {
"height": "100",
"layout": "IPY_MODEL_ab4fca7eb5194745b836e34a54a97b8d",
"value": {},
"width": "300",
"x_mouse": 309.6392059326172,
"y_mouse": 279.3210258483887
}
},
"cdad9ed76bdd43bdb612167a311bec85": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "1.0.0",
"model_name": "LayoutModel",
"state": {}
},
"d1445c81cb2e4934abd3347886e9629f": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "1.0.0",
"model_name": "LayoutModel",
"state": {
"width": "200px"
}
},
"d4063a1bfc68431d8167158196a9e3ee": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "1.0.0",
"model_name": "LayoutModel",
"state": {
"border": "20px solid red",
"padding": "42px"
}
},
"deb85c2e1a40453dba427e62a457fb4e": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "1.0.0",
"model_name": "ImageModel",
"state": {
"layout": "IPY_MODEL_0e062cdd703843009a1ea90a87d0f4b9",
"value": {},
"width": "200"
}
},
"e58c0c02c3434f8b913b39cf5cdcd0fd": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "1.0.0",
"model_name": "LayoutModel",
"state": {}
},
"e9bbf53a10b546eeb58d5b3bebd1336b": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "1.0.0",
"model_name": "LayoutModel",
"state": {
"border": "20px solid red",
"padding": "42px"
}
},
"ed8009bef98644389619c28e96656b86": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "1.0.0",
"model_name": "BoxModel",
"state": {
"children": [
"IPY_MODEL_ffb755e3755f44919f20f82866bc8151"
],
"layout": "IPY_MODEL_6e2d9f3ec6dd427d96b47fb2844137ab"
}
},
"effbcd6877904be29758d2be80dd413a": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "1.0.0",
"model_name": "ImageModel",
"state": {
"height": "100",
"layout": "IPY_MODEL_bef9601278e84967a00a5c5fb3866681",
"value": {},
"x_mouse": 145.36648559570312,
"y_mouse": 150.86648559570312
}
},
"f22cefb4f5364d96879c185551ae6bbe": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "1.0.0",
"model_name": "LayoutModel",
"state": {}
},
"f9598d19dfe6483e8d3576dd26536b0d": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "1.0.0",
"model_name": "LayoutModel",
"state": {}
},
"fb24bbd5dbd64b0380995b4000e21f1c": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "1.0.0",
"model_name": "LayoutModel",
"state": {
"height": "300px",
"width": "600px"
}
},
"fc902e0e3f68430bbd9119ac6b9dea3b": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "1.0.0",
"model_name": "BoxModel",
"state": {
"children": [
"IPY_MODEL_4091484ac59d4a429c63cf03fa8fb3b2"
],
"layout": "IPY_MODEL_4b71caf0c4a146e8bd5d33910b2f6dcb"
}
},
"ffb755e3755f44919f20f82866bc8151": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "1.0.0",
"model_name": "ImageModel",
"state": {
"height": "100",
"layout": "IPY_MODEL_09f0159c707a47569ecef409b9e53983",
"value": {},
"width": "200",
"x_mouse": 176.36648559570312,
"y_mouse": 306.4716033935547
}
}
},
"version_major": 2,
"version_minor": 0
}
}
},
"nbformat": 4,
"nbformat_minor": 2
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment