Hot-keys on this page
r m x p toggle line displays
j k next/prev highlighted chunk
0 (zero) top of page
1 (one) first highlighted chunk
1"""
2@file
3@brief Drawing from a canvas
4"""
6import IPython
7from IPython.core.display import display_html, display_javascript, Javascript
9from .path_helper import local_d3js
12def display_canvas_point(html_id, width=800, heigth=400, var_name="points"):
13 """
14 Adds a canvas to draw from a notebook, the code use javascript.
16 @param height height
17 @param width width
18 @param html_id the function adds a div section, it should be different for every canevas
19 @param var_name the function adds this variable to the kernel workspace
21 @return the list of points
22 """
23 js_libs = local_d3js()
25 # http://jsfiddle.net/yonester/9tr7w/2/
26 html_src = """
27 <div id="{0}"></div>
28 """.format(html_id)
30 points = []
32 test_d3_js = """
33 var r;
35 var command0 ="__VARNAME__=[]";
36 var kernel = IPython.notebook.kernel;
37 kernel.execute(command0);
39 var vis = d3.select("#__ID__").append("svg")
40 .attr("width", __WIDTH__)
41 .attr("height", __HEIGHT__)
42 .style('border', '1px solid black')
43 .on("mousedown", mousedown)
44 ;
46 function mousedown() {
47 var m = d3.mouse(this);
48 r = vis.append("rect")
49 .attr("class", "myrect")
50 .attr("style", "fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,255);")
51 .attr("x", m[0])
52 .attr("y", m[1])
53 .attr("width", 5)
54 .attr("height", 5);
55 var command = "__VARNAME__.append( (" + m[0] + ", -" + m[1] + ") )";
56 kernel.execute(command);
57 }
58 """ .replace("__WIDTH__", str(width)) \
59 .replace("__HEIGHT__", str(heigth)) \
60 .replace("__ID__", html_id)\
61 .replace("__VARNAME__", var_name)
62 js_libs = [js_libs]
63 display_html(IPython.core.display.HTML(data=html_src))
64 display_javascript(Javascript(data=test_d3_js, lib=js_libs))
66 return points