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",