%matplotlib inline
import matplotlib.pyplot as plt
import numpy as np
from IPython.display import display
from IPython.display import SVG
from IPython.display import Image
from IPython.html.widgets import interact, interactive, fixed
from IPython.display import display

"""
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>
"""

SVG(s)

"""
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'):
    goodies='<svg width="'+str(width)+'" height="'+str(height)+'">\n<circle cx="'+str(cx)+'" cy="'+str(cy)+'" r="'+str(r)+'" fill="'+str(fill)+'" />\n</svg>'
    return SVG(goodies)#returns the value we need using strings for the argument
    #i know now that i could have used %s but i didnt think of it at the time

draw_circle(cx=10, cy=10, r=10, fill='blue')#draws the new circle

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,1),cy=(0,300,1),r=(0,50,1))
#fixes the values of width and height while creating a slider for the other values

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
"""


