Add ImageWidget

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($("<img />"));
+            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);
+
+});

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

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)

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