Hi Björn,
You can combine the HTML and JavaScript into `_repr_html_`:
```
class MyCircle(object):
def __init__(self, center=(0.0,0.0), radius=1.0, color='blue'):
self.center = center
self.radius = radius
self.color = color
def _repr_html_(self):
return '''
<canvas id='mycircle'/>
<script>
var c = document.getElementById("mycircle");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, {}, 0, 2 * Math.PI);
ctx.stroke();
</script>'''.format(self.radius)
def _repr_svg_(self):
return """<svg width="100px" height="100px">
<circle cx="50" cy="50" r="20" stroke="black" stroke-width="1"
fill="blue"/>
</svg>"""
def _repr_latex_(self):
return r"$\bigcirc \LaTeX$"
```
On Sunday, January 15, 2017 at 10:28:32 AM UTC-6, Björn Johansson wrote:
>
> Hi, I would like to add a javascript representation to the class below. I
> would like to have a circle drawn on a HTML5 canvas. Is this even possible?
> The code below does not work and I do not know very much javascript. I
> would be grateful for help. The code below executes, but nothing is drawn
> in the cell. I have looked at the ipywidgets
> <https://github.com/ipython/ipywidgets>, but it is not clear to me how to
> modify the code below.
>
> *class MyCircle(object):*
>
> * def __init__(self, center=(0.0,0.0), radius=1.0, color='blue'):*
> * self.center = center*
> * self.radius = radius*
> * self.color = color*
>
> * def _repr_html_(self):*
> * return "○ (<b>html</b>)"*
>
> * def _repr_svg_(self):*
> * return """<svg width="100px" height="100px">*
> * <circle cx="50" cy="50" r="20" stroke="black" stroke-width="1"
> fill="blue"/>*
> * </svg>"""*
>
> * def _repr_latex_(self):*
> * return r"$\bigcirc \LaTeX$"*
>
> * def _repr_javascript_(self): *
> * s=( 'var canvas = document.createElement("canvas");' *
> * 'canvas.height= 400;'*
> * 'canvas.width = 400;'*
> * 'var context = canvas.getContext("2d");'*
> * 'document.body.appendChild(canvas);')*
> * return s*
>
--
You received this message because you are subscribed to the Google Groups
"Project Jupyter" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/jupyter/906c60db-c0cf-44a7-aa6f-23f664198265%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
