
%matplotlib inline
import matplotlib.pyplot as plt
import numpy as np
from IPython.html.widgets import interact,interactive, fixed
from IPython.html import widgets
from IPython.display import display
from IPython.display import Image,HTML, SVG
from IPython.display import (
    display_pretty, display_html, display_jpeg,
    display_png, display_json, display_latex, display_svg
)


"""
Explanation: Interact Exercise 5
Imports
Put the standard imports for Matplotlib, Numpy and the IPython widgets in the following cell.
End of explanation
"""


s = """<svg width="100" height="100"><circle cx="50" cy="50" r="20" fill="aquamarine" /></svg>"""
s

SVG(s)

c='<svg width='+'"'+str(100)+'"'+' height='+'"'+str(100)+'">''<circle cx='+'"'+str(25)+'"'+' cy='+'"'+str(25)+'"'+' r='+'"'+str(5)+'"' +' fill='+'"'+'red'+'"'+' />''</svg>'
c

"""
Explanation: Interact with SVG display
SVG is a simple way of drawing vector graphics in the browser. Here is a simple example of how SVG can be used to draw a circle in the Notebook:
End of explanation
"""


def draw_circle(width=100, height=100, cx=25, cy=25, r=5, fill='red'):
    """Draw an SVG circle.
    
    Parameters
    ----------
    width : int
        The width of the svg drawing area in px.
    height : int
        The height of the svg drawing area in px.
    cx : int
        The x position of the center of the circle in px.
    cy : int
        The y position of the center of the circle in px.
    r : int
        The radius of the circle in px.
    fill : str
        The fill color of the circle.
    """
    
    
    c='<svg width='+'"'+str(width)+'"'+' height='+'"'+str(height)+'">''<circle cx='+'"'+str(cx)+'"'+' cy='+'"'+str(cy)+'"'+' r='+'"'+str(r)+'"' +' fill='+'"'+fill+'"'+' />''</svg>'
    display(SVG(c))
    
    

    

draw_circle(cx=10, cy=10, r=10, fill='blue')

assert True # leave this to grade the draw_circle function

"""
Explanation: Write a function named draw_circle that draws a circle using SVG. Your function should take the parameters of the circle  as function arguments and have defaults as shown. You will have to write the raw SVG code as a Python string and then use the IPython.display.SVG object and IPython.display.display function.
End of explanation
"""


w = interactive(draw_circle, width=fixed(300),height=fixed(300),cx=(0,300),cy=(0,300),r=(0,50),fill=('red'))

w

c = w.children
assert c[0].min==0 and c[0].max==300
assert c[1].min==0 and c[1].max==300
assert c[2].min==0 and c[2].max==50
assert c[3].value=='red'

"""
Explanation: Use interactive to build a user interface for exploing the draw_circle function:

width: a fixed value of 300px
height: a fixed value of 300px
cx/cy: a slider in the range [0,300]
r: a slider in the range [0,50]
fill: a text area in which you can type a color's name

Save the return value of interactive to a variable named w.
End of explanation
"""


display(w)

assert True # leave this to grade the display of the widget

"""
Explanation: Use the display function to show the widgets created by interactive:
End of explanation
"""


