You'll also want to generate a unique ID every time you display, so you don't have the issue of having multiple elements with the same id on the page.
Jason On Thu, Jan 19, 2017, 06:38 Steven Silvester <[email protected]> wrote: > 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 > <https://groups.google.com/d/msgid/jupyter/906c60db-c0cf-44a7-aa6f-23f664198265%40googlegroups.com?utm_medium=email&utm_source=footer> > . > For more options, visit https://groups.google.com/d/optout. > -- 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/CAPDWZHzw3PEhmAQq8N40oiq7X0TzSrAAcpYO1DEgPifSjWO71A%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
