diff --git a/IPython/html/static/notebook/js/widgets/basic_widgets.js b/IPython/html/static/notebook/js/widgets/basic_widgets.js index c5ab8b5..6d3b0d2 100644 --- a/IPython/html/static/notebook/js/widgets/basic_widgets.js +++ b/IPython/html/static/notebook/js/widgets/basic_widgets.js @@ -15,6 +15,7 @@ define([ "notebook/js/widgets/container", "notebook/js/widgets/float", "notebook/js/widgets/float_range", + "notebook/js/widgets/image", "notebook/js/widgets/int", "notebook/js/widgets/int_range", "notebook/js/widgets/multicontainer", diff --git a/IPython/html/static/notebook/js/widgets/image.js b/IPython/html/static/notebook/js/widgets/image.js new file mode 100644 index 0000000..dfe5fee --- /dev/null +++ b/IPython/html/static/notebook/js/widgets/image.js @@ -0,0 +1,55 @@ +//---------------------------------------------------------------------------- +// Copyright (C) 2013 The IPython Development Team +// +// Distributed under the terms of the BSD License. The full license is in +// the file COPYING, distributed as part of this software. +//---------------------------------------------------------------------------- + +//============================================================================ +// ImageWidget +//============================================================================ + +/** + * @module IPython + * @namespace IPython + **/ + +define(["notebook/js/widget"], function(widget_manager){ + var ImageWidgetModel = IPython.WidgetModel.extend({}); + widget_manager.register_widget_model('ImageWidgetModel', ImageWidgetModel); + + var ImageView = IPython.WidgetView.extend({ + + // Called when view is rendered. + render : function(){ + this.setElement($("")); + this.update(); // Set defaults. + }, + + // Handles: Backend -> Frontend Sync + // Frontent -> Frontend Sync + update : function(){ + var image_src = 'data:image/' + this.model.get('image_format') + ';base64,' + this.model.get('_b64value'); + this.$el.attr('src', image_src); + + var width = this.model.get('width'); + if (width !== undefined && width.length > 0) { + this.$el.attr('width', width); + } else { + this.$el.removeAttr('width'); + } + + var height = this.model.get('height'); + if (height !== undefined && height.length > 0) { + this.$el.attr('height', height); + } else { + this.$el.removeAttr('height'); + } + return IPython.WidgetView.prototype.update.call(this); + }, + + }); + + widget_manager.register_widget_view('ImageView', ImageView); + +}); diff --git a/IPython/html/widgets/__init__.py b/IPython/html/widgets/__init__.py index c239d48..6202414 100644 --- a/IPython/html/widgets/__init__.py +++ b/IPython/html/widgets/__init__.py @@ -5,6 +5,7 @@ from .widget_button import ButtonWidget from .widget_container import ContainerWidget from .widget_float import FloatWidget from .widget_float_range import FloatRangeWidget +from .widget_image import ImageWidget from .widget_int import IntWidget from .widget_int_range import IntRangeWidget from .widget_multicontainer import MulticontainerWidget diff --git a/IPython/html/widgets/widget_image.py b/IPython/html/widgets/widget_image.py new file mode 100644 index 0000000..1b3f448 --- /dev/null +++ b/IPython/html/widgets/widget_image.py @@ -0,0 +1,38 @@ +"""ButtonWidget class. + +Represents a button in the frontend using a widget. Allows user to listen for +click events on the button and trigger backend code when the clicks are fired. +""" +#----------------------------------------------------------------------------- +# Copyright (c) 2013, the IPython Development Team. +# +# Distributed under the terms of the Modified BSD License. +# +# The full license is in the file COPYING.txt, distributed with this software. +#----------------------------------------------------------------------------- + +#----------------------------------------------------------------------------- +# Imports +#----------------------------------------------------------------------------- +import base64 + +from .widget import Widget +from IPython.utils.traitlets import Unicode, Bytes + +#----------------------------------------------------------------------------- +# Classes +#----------------------------------------------------------------------------- +class ImageWidget(Widget): + target_name = Unicode('ImageWidgetModel') + default_view_name = Unicode('ImageView') + + # Define the custom state properties to sync with the front-end + _keys = ['image_format', 'width', 'height', '_b64value'] + image_format = Unicode('png') + width = Unicode() + height = Unicode() + _b64value = Unicode() + + value = Bytes() + def _value_changed(self, name, old, new): + self._b64value = base64.b64encode(new) \ No newline at end of file diff --git a/examples/widgets/Part 1 - Basics.ipynb b/examples/widgets/Part 1 - Basics.ipynb index 307f873..ae6ea3b 100644 --- a/examples/widgets/Part 1 - Basics.ipynb +++ b/examples/widgets/Part 1 - Basics.ipynb @@ -49,6 +49,7 @@ "- BoolWidget : boolean \n", "- FloatRangeWidget : bounded float \n", "- FloatWidget : unbounded float \n", + "- ImageWidget : image\n", "- IntRangeWidget : bounded integer \n", "- IntWidget : unbounded integer \n", "- SelectionWidget : enumeration \n", @@ -82,6 +83,7 @@ " 'ContainerWidget',\n", " 'FloatRangeWidget',\n", " 'FloatWidget',\n", + " 'ImageWidget',\n", " 'IntRangeWidget',\n", " 'IntWidget',\n", " 'MulticontainerWidget',\n", @@ -154,8 +156,6 @@ "text": [ "['visible',\n", " '_css',\n", - " '_add_class',\n", - " '_remove_class',\n", " 'value',\n", " 'step',\n", " 'max',\n", @@ -303,6 +303,7 @@ "| | FloatTextView |\n", "| | ProgressView |\n", "| FloatWidget | *FloatTextView* |\n", + "| ImageWidget | *ImageView* |\n", "| IntRangeWidget | *IntSliderView* |\n", "| | IntTextView |\n", "| | ProgressView |\n",