Hide keyboard shortcuts

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

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

""" 

@file 

@brief Drawing from a canvas 

""" 

 

import IPython 

from IPython.core.display import display_html, display_javascript, Javascript 

 

from .path_helper import local_d3js 

 

 

def display_canvas_point(html_id, width=800, heigth=400, var_name="points"): 

""" 

Adds a canvas to draw from a notebook, the code use javascript. 

 

@param height height 

@param width width 

@param html_id the function adds a div section, it should be different for every canevas 

@param var_name the function adds this variable to the kernel workspace 

 

@return the list of points 

""" 

js_libs = local_d3js() 

 

# http://jsfiddle.net/yonester/9tr7w/2/ 

html_src = """ 

<div id="{0}"></div> 

""".format(html_id) 

 

points = [] 

 

test_d3_js = """ 

var r; 

 

var command0 ="__VARNAME__=[]"; 

var kernel = IPython.notebook.kernel; 

kernel.execute(command0); 

 

var vis = d3.select("#__ID__").append("svg") 

.attr("width", __WIDTH__) 

.attr("height", __HEIGHT__) 

.style('border', '1px solid black') 

.on("mousedown", mousedown) 

; 

 

function mousedown() { 

var m = d3.mouse(this); 

r = vis.append("rect") 

.attr("class", "myrect") 

.attr("style", "fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,255);") 

.attr("x", m[0]) 

.attr("y", m[1]) 

.attr("width", 5) 

.attr("height", 5); 

var command = "__VARNAME__.append( (" + m[0] + ", -" + m[1] + ") )"; 

kernel.execute(command); 

} 

""" .replace("__WIDTH__", str(width)) \ 

.replace("__HEIGHT__", str(heigth)) \ 

.replace("__ID__", html_id)\ 

.replace("__VARNAME__", var_name) 

js_libs = [js_libs] 

display_html(IPython.core.display.HTML(data=html_src)) 

display_javascript(Javascript(data=test_d3_js, lib=js_libs)) 

 

return points