- {% end %}
-
+
diff --git a/lib/matplotlib/backends/web_backend/ipython_inline_figure.html b/lib/matplotlib/backends/web_backend/ipython_inline_figure.html
new file mode 100644
index 000000000000..0ab029d6e4b3
--- /dev/null
+++ b/lib/matplotlib/backends/web_backend/ipython_inline_figure.html
@@ -0,0 +1,32 @@
+
+
diff --git a/lib/matplotlib/backends/web_backend/mpl.js b/lib/matplotlib/backends/web_backend/mpl.js
index f9d9761801cc..24854df42f74 100644
--- a/lib/matplotlib/backends/web_backend/mpl.js
+++ b/lib/matplotlib/backends/web_backend/mpl.js
@@ -1,6 +1,6 @@
-function figure(fig_id, websocket_url_prefix) {
+function figure(fig_id, websocket_url_prefix, parent_element) {
this.id = fig_id;
-
+
if (typeof(WebSocket) !== 'undefined') {
this.WebSocket = WebSocket;
} else if (typeof(MozWebSocket) !== 'undefined') {
@@ -11,10 +11,10 @@ function figure(fig_id, websocket_url_prefix) {
'Firefox 4 and 5 are also supported but you ' +
'have to enable WebSockets in about:config.');
};
-
-
+
+
this.ws = new this.WebSocket(websocket_url_prefix + fig_id + '/ws');
-
+
this.supports_binary = (this.ws.binaryType != undefined);
if (!this.supports_binary) {
@@ -24,55 +24,44 @@ function figure(fig_id, websocket_url_prefix) {
"This browser does not support binary websocket messages. " +
"Performance may be slow.");
}
-
+
this.imageObj = new Image();
-
+
this.context = undefined;
this.message = undefined;
this.canvas = undefined;
this.rubberband_canvas = undefined;
this.rubberband_context = undefined;
this.format_dropdown = undefined;
-
+
this.focus_on_mousover = false;
-
-}
-figure.prototype.finalize = function (canvas_id_prefix, toolbar_id_prefix, message_id_prefix) {
- // resizing_div_id might be the canvas or a containing div for more control of display
-
- var canvas_id = canvas_id_prefix + '-canvas';
- var rubberband_id = canvas_id_prefix + '-rubberband-canvas';
- var message_id = message_id_prefix + '-message';
-
- this.message = document.getElementById(message_id);
- this.canvas = document.getElementById(canvas_id);
- this.context = this.canvas.getContext("2d");
- this.rubberband_canvas = document.getElementById(rubberband_id);
- this.rubberband_context = this.rubberband_canvas.getContext("2d");
- this.rubberband_context.strokeStyle = "#000000";
-
- this.format_dropdown = document.getElementById(toolbar_id_prefix + '-format_picker');
-
+ this.root = $('');
+ $(parent_element).append(this.root);
+
+ init_mpl_canvas(this);
+ init_mpl_toolbar(this);
+
this.ws.onopen = function () {
- this.ws.send(JSON.stringify(
+ this.send(JSON.stringify(
{type: 'supports_binary',
- value: this.supports_binary}));
+ value: fig.supports_binary}));
}
-
- // attach the onload function to the image object when an
- // image has been recieved via onmessage
+
fig = this
- onload_creator = function(fig) {return function() {fig.context.drawImage(fig.imageObj, 0, 0);};};
+ onload_creator = function(fig) {
+ return function() {
+ fig.context.drawImage(fig.imageObj, 0, 0);
+ };
+ };
this.imageObj.onload = onload_creator(fig);
-
this.imageObj.onunload = function() {
this.ws.close();
}
this.ws.onmessage = gen_on_msg_fn(this);
-};
+}
function gen_on_msg_fn(fig)
@@ -85,7 +74,7 @@ function gen_on_msg_fn(fig)
* Chrome. But how to set the MIME type? It doesn't seem
* to be part of the websocket stream */
evt.data.type = "image/png";
-
+
/* Free the memory for the previous frames */
if (fig.imageObj.src) {
(window.URL || window.webkitURL).revokeObjectURL(
@@ -103,14 +92,14 @@ function gen_on_msg_fn(fig)
return;
}
}
-
+
var msg = JSON.parse(evt.data);
-
+
switch(msg['type']) {
case 'message':
fig.message.textContent = msg['message'];
break;
-
+
case 'cursor':
var cursor = msg['cursor'];
switch(cursor)
@@ -130,7 +119,7 @@ function gen_on_msg_fn(fig)
}
fig.canvas.style.cursor = cursor;
break;
-
+
case 'resize':
var size = msg['size'];
if (size[0] != fig.canvas.width || size[1] != fig.canvas.height) {
@@ -144,7 +133,7 @@ function gen_on_msg_fn(fig)
value: fig.supports_binary}));
}
break;
-
+
case 'rubberband':
var x0 = msg['x0'];
var y0 = fig.canvas.height - msg['y0'];
@@ -158,7 +147,7 @@ function gen_on_msg_fn(fig)
var min_y = Math.min(y0, y1);
var width = Math.abs(x1 - x0);
var height = Math.abs(y1 - y0);
-
+
fig.rubberband_context.clearRect(
0, 0, fig.canvas.width, fig.canvas.height);
fig.rubberband_context.strokeRect(min_x, min_y, width, height);
@@ -167,33 +156,40 @@ function gen_on_msg_fn(fig)
};
};
+// from http://stackoverflow.com/questions/1114465/getting-mouse-location-in-canvas
+
+function findPos(e) {
+ //this section is from http://www.quirksmode.org/js/events_properties.html
+ var targ;
+ if (!e)
+ e = window.event;
+ if (e.target)
+ targ = e.target;
+ else if (e.srcElement)
+ targ = e.srcElement;
+ if (targ.nodeType == 3) // defeat Safari bug
+ targ = targ.parentNode;
+
+ // jQuery normalizes the pageX and pageY
+ // pageX,Y are the mouse positions relative to the document
+ // offset() returns the position of the element relative to the document
+ var x = e.pageX - $(targ).offset().left;
+ var y = e.pageY - $(targ).offset().top;
+
+ return {"x": x, "y": y};
+};
-
-function findPos(obj) {
- // Find the position of the given HTML node.
-
- var curleft = 0, curtop = 0;
- if (obj.offsetParent) {
- do {
- curleft += obj.offsetLeft;
- curtop += obj.offsetTop;
- } while (obj = obj.offsetParent);
- return { x: curleft, y: curtop };
- }
- return undefined;
-}
-
figure.prototype.mouse_event = function(event, name) {
- var canvas_pos = findPos(this.canvas)
-
+ var canvas_pos = findPos(event)
+
if (this.focus_on_mouseover && name === 'motion_notify')
{
this.canvas.focus();
}
-
- var x = event.pageX - canvas_pos.x;
- var y = event.pageY - canvas_pos.y;
+
+ var x = canvas_pos.x;
+ var y = canvas_pos.y;
this.ws.send(JSON.stringify(
{type: name,
@@ -205,7 +201,7 @@ figure.prototype.mouse_event = function(event, name) {
* to control all of the cursor setting manually through the
* 'cursor' event from matplotlib */
event.preventDefault();
- return false;
+ return false;
}
figure.prototype.key_event = function(event, name) {
@@ -241,9 +237,6 @@ figure.prototype.toolbar_button_onclick = function(name) {
}
};
-
figure.prototype.toolbar_button_onmouseover = function(tooltip) {
this.message.textContent = tooltip;
};
-
-
diff --git a/lib/matplotlib/backends/web_backend/mpl_interface.js b/lib/matplotlib/backends/web_backend/mpl_interface.js
index d6f2c046b89b..06b782aaede0 100644
--- a/lib/matplotlib/backends/web_backend/mpl_interface.js
+++ b/lib/matplotlib/backends/web_backend/mpl_interface.js
@@ -6,111 +6,113 @@ var extensions = [{% for filetype, extensions in sorted(canvas.get_supported_fil
var default_extension = '{{ canvas.get_default_filetype() }}';
-function init_mpl_canvas(fig, canvas_div_id, id_prefix) {
-
- var canvas_div = $(document.getElementById(canvas_div_id));
+function init_mpl_canvas(fig) {
+ var canvas_div = $('');
canvas_div.attr('style', 'position: relative; clear: both;');
-
- var canvas = $('', {id: id_prefix + '-canvas'});
- canvas.attr('id', id_prefix + '-canvas');
+ fig.root.append(canvas_div);
+
+ var canvas = $('');
canvas.addClass('mpl-canvas');
canvas.attr('style', "left: 0; top: 0; z-index: 0;")
canvas.attr('width', '800');
canvas.attr('height', '800');
-
+
function canvas_keyboard_event(event) { return fig.key_event(event, event['data']); }
- canvas.keydown('key_press', canvas_keyboard_event);
- canvas.keyup('key_release', canvas_keyboard_event);
-
+ canvas.keydown('key_press', canvas_keyboard_event);
+ canvas.keyup('key_release', canvas_keyboard_event);
+
canvas_div.append(canvas);
-
+
+ fig.canvas = canvas[0];
+ fig.context = canvas[0].getContext("2d");
+ // Let the top level document handle key events.
+ canvas.unbind('keydown');
+ canvas.unbind('keyup');
+
// create a second canvas which floats on top of the first.
- var rubberband = $('', {id: id_prefix + '-rubberband-canvas'});
+ var rubberband = $('');
rubberband.attr('style', "position: absolute; left: 0; top: 0; z-index: 1;")
rubberband.attr('width', '800');
rubberband.attr('height', '800');
function mouse_event_fn(event) {
return fig.mouse_event(event, event['data']);
}
- rubberband.mousedown('button_press', mouse_event_fn);
+ rubberband.mousedown('button_press', mouse_event_fn);
rubberband.mouseup('button_release', mouse_event_fn);
rubberband.mousemove('motion_notify', mouse_event_fn);
canvas_div.append(rubberband);
+
+ fig.rubberband_canvas = rubberband[0];
+ fig.rubberband_context = rubberband[0].getContext("2d");
+ fig.rubberband_context.strokeStyle = "#000000";
};
-function init_mpl_statusbar(container_id, id_prefix) {
- var status_bar = $('');
- var status_id = id_prefix + '-message';
- status_bar.attr('id', status_id);
- $(document.getElementById(container_id)).append(status_bar);
- return status_id
-};
+function init_mpl_toolbar(fig) {
+ var nav_element = $('')
+ nav_element.attr('style', 'width: 600px');
+ fig.root.append(nav_element);
-function init_mpl_toolbar(fig, nav_container_id, nav_elem_id_prefix) {
- // Adds a navigation toolbar to the object found with the given jquery query string
-
- if (nav_elem_id_prefix === undefined) {
- nav_elem_id_prefix = nav_container_id;
- }
-
- // Define a callback function for later on.
- function toolbar_event(event) { return fig.toolbar_button_onclick(event['data']); }
- function toolbar_mouse_event(event) { return fig.toolbar_button_onmouseover(event['data']); }
-
- var nav_element = $(document.getElementById(nav_container_id));
-
- for(var toolbar_ind in toolbar_items){
- var name = toolbar_items[toolbar_ind][0];
- var tooltip = toolbar_items[toolbar_ind][1];
- var image = toolbar_items[toolbar_ind][2];
- var method_name = toolbar_items[toolbar_ind][3];
-
- if (!name) {
- // put a spacer in here.
- continue;
- }
-
- var button = $('');
- button.attr("id", nav_elem_id_prefix + name);
- button.addClass('ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only');
- button.attr('role', 'button');
- button.attr('aria-disabled', 'false');
- button.click(method_name, toolbar_event);
- button.mouseover(tooltip, toolbar_mouse_event);
-
- var icon_img = $('');
- icon_img.addClass('ui-button-icon-primary ui-icon');
- icon_img.addClass(image);
- icon_img.addClass('ui-corner-all');
-
- var tooltip_span = $('');
- tooltip_span.addClass('ui-button-text');
- tooltip_span.html(tooltip);
-
- button.append(icon_img);
- button.append(tooltip_span);
-
- nav_element.append(button);
- }
-
- var fmt_picker_span = $('');
-
- var fmt_picker = $('', {id: nav_elem_id_prefix + '-format_picker'});
- fmt_picker.addClass('mpl-toolbar-option ui-widget ui-widget-content');
- fmt_picker_span.append(fmt_picker);
- nav_element.append(fmt_picker_span);
-
- for (var ind in extensions) {
- var fmt = extensions[ind];
- var option = $('', {selected: fmt === default_extension}).html(fmt);
- fmt_picker.append(option)
+ // Define a callback function for later on.
+ function toolbar_event(event) {
+ return fig.toolbar_button_onclick(event['data']); }
+ function toolbar_mouse_event(event) {
+ return fig.toolbar_button_onmouseover(event['data']); }
+
+ for(var toolbar_ind in toolbar_items){
+ var name = toolbar_items[toolbar_ind][0];
+ var tooltip = toolbar_items[toolbar_ind][1];
+ var image = toolbar_items[toolbar_ind][2];
+ var method_name = toolbar_items[toolbar_ind][3];
+
+ if (!name) {
+ // put a spacer in here.
+ continue;
}
-
-
- // Add hover states to the ui-buttons
- $( ".ui-button" ).hover(
- function() { $(this).addClass("ui-state-hover");},
- function() { $(this).removeClass("ui-state-hover");}
- );
-};
\ No newline at end of file
+
+ var button = $('');
+ button.addClass('ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only');
+ button.attr('role', 'button');
+ button.attr('aria-disabled', 'false');
+ button.click(method_name, toolbar_event);
+ button.mouseover(tooltip, toolbar_mouse_event);
+
+ var icon_img = $('');
+ icon_img.addClass('ui-button-icon-primary ui-icon');
+ icon_img.addClass(image);
+ icon_img.addClass('ui-corner-all');
+
+ var tooltip_span = $('');
+ tooltip_span.addClass('ui-button-text');
+ tooltip_span.html(tooltip);
+
+ button.append(icon_img);
+ button.append(tooltip_span);
+
+ nav_element.append(button);
+ }
+
+ var fmt_picker_span = $('');
+
+ var fmt_picker = $('');
+ fmt_picker.addClass('mpl-toolbar-option ui-widget ui-widget-content');
+ fmt_picker_span.append(fmt_picker);
+ nav_element.append(fmt_picker_span);
+ fig.format_dropdown = fmt_picker;
+
+ for (var ind in extensions) {
+ var fmt = extensions[ind];
+ var option = $('', {selected: fmt === default_extension}).html(fmt);
+ fmt_picker.append(option)
+ }
+
+ // Add hover states to the ui-buttons
+ $( ".ui-button" ).hover(
+ function() { $(this).addClass("ui-state-hover");},
+ function() { $(this).removeClass("ui-state-hover");}
+ );
+
+ var status_bar = $('');
+ nav_element.append(status_bar);
+ fig.message = status_bar[0];
+};
diff --git a/lib/matplotlib/backends/web_backend/single_figure.html b/lib/matplotlib/backends/web_backend/single_figure.html
index 3cbe5a7f1f99..240bfa978ab0 100644
--- a/lib/matplotlib/backends/web_backend/single_figure.html
+++ b/lib/matplotlib/backends/web_backend/single_figure.html
@@ -3,55 +3,36 @@
-
-
-
-
-
-
-
-
-{% set fig_label='Figure: {}'.format(canvas.figure.get_label()) %}
-
-{% if fig_label == 'Figure: ' %}
-{% set fig_label="Figure {}".format(fig_id) %}
-{% end %}
+
+
+
+
+
- MPL | {{ fig_label }}
+
+ {% set fig_label='Figure: {}'.format(canvas.figure.get_label()) %}
+ {% if fig_label == 'Figure: ' %}
+ {% set fig_label="Figure {}".format(fig_id) %}
+ {% end %}
+
+ MPL | {{ fig_label }}
-
-
-
- {{ fig_label }}
+
+
+
+
-
-
-
-
diff --git a/lib/matplotlib/figure.py b/lib/matplotlib/figure.py
index 324fecaeb906..af6fe7babc50 100644
--- a/lib/matplotlib/figure.py
+++ b/lib/matplotlib/figure.py
@@ -339,6 +339,14 @@ def __init__(self,
self.clf()
self._cachedRenderer = None
+ # TODO: I'd like to dynamically add the _repr_html_ method
+ # to the figure in the right context, but then IPython doesn't
+ # use it, for some reason.
+
+ def _repr_html_(self):
+ from matplotlib.backends import backend_webagg
+ return backend_webagg.ipython_inline_display(self)
+
def show(self, warn=True):
"""
If using a GUI backend with pyplot, display the figure window.
diff --git a/lib/matplotlib/pyplot.py b/lib/matplotlib/pyplot.py
index ed8e157ba3c0..c9ee7525a034 100644
--- a/lib/matplotlib/pyplot.py
+++ b/lib/matplotlib/pyplot.py
@@ -143,7 +143,7 @@ def show(*args, **kw):
described above.
"""
global _show
- _show(*args, **kw)
+ return _show(*args, **kw)
def isinteractive():