btw thanks for the reply!
On Thursday, January 19, 2017 at 11:38:32 AM UTC, Steven Silvester 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/0cf22505-45a2-4eb9-a8f0-2861a184ed74%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
