# ---
# jupyter:
#   jupytext:
#     text_representation:
#       extension: .py
#       format_name: light
#       format_version: '1.5'
#       jupytext_version: 1.14.4
#   kernelspec:
#     display_name: Python 2
#     language: python
#     name: python2
# ---

# + [markdown] deletable=true editable=true
# <img src="interactive_image.png"/>
#
# # Interactive image
#
# The following interactive widget is intended to allow the developer to explore
# images drawn with different parameter settings.
#

# + deletable=true editable=true
# preliminaries
from ipywidgets import interact, interactive, fixed, interact_manual
import ipywidgets as widgets
from jp_doodle import dual_canvas
from IPython.display import display

# + deletable=true editable=true
# Display a canvas with an image which can be adjusted interactively

# Below we configure the canvas using the Python interface.
# This method is terser than using Javascript, but the redraw operations create a jerky effect
# because the canvas displays intermediate states due to roundtrip messages
# between the Python kernal and the Javascript interpreter.

image_canvas = dual_canvas.SnapshotCanvas("interactive_image.png", width=320, height=220)
image_canvas.display_all()

def change_image(x=0, y=0, w=250, h=50, dx=-50, dy=-25,
                  degrees=0, sx=30, sy=15, sWidth=140, sHeight=20, whole=False
                  ): #sx:30, sy:15, sWidth:140, sHeight:20
    if whole:
        sx = sy = sWidth = sHeight = None
    canvas = image_canvas
    with canvas.delay_redraw():
        # This local image reference works in "classic" notebook, but not in Jupyter Lab.
        canvas.reset_canvas()
        mandrill_url = "../mandrill.png"
        image_canvas.name_image_url("mandrill", mandrill_url)
        canvas.named_image("mandrill", 
                           x, y, w, h, degrees, sx, sy, sWidth, sHeight, dx=dx, dy=dy, name=True)
        canvas.fit()
        canvas.lower_left_axes(
            max_tick_count=4
        )
        canvas.circle(x=x, y=y, r=10, color="#999")
        canvas.fit(None, 30)
        #canvas.element.invisible_canvas.show()
    
change_image()

w = interactive(
    change_image, 
    x=(-100, 100), 
    y=(-100,100), 
    dx=(-300, 300), 
    dy=(-300,300), 
    w=(-300,300), 
    h=(-300,300), 
    degrees=(-360,360),
    sx=(0,600),
    sy=(0,600),
    sWidth=(0,600),
    sHeight=(0,600),
)
display(w)

# + deletable=true editable=true
# Display a canvas with an image which can be adjusted interactively

# Using the Javascript interface: 
# This approach requires more typing because Python values must 
# be explicitly mapped to Javascript variables.
# However the canvas configuration is smooth because no intermediate
# results are shown.

image_canvas2 = dual_canvas.SnapshotCanvas("interactive_image.png", width=320, height=220)
image_canvas2.display_all()

def change_rect_js(x=0, y=0, w=250, h=50, dx=-50, dy=-25,
                  degrees=0, sx=30, sy=15, sWidth=140, sHeight=20, whole=False
                  ): #sx:30, sy:15, sWidth:140, sHeight:20
    if whole:
        sx = sy = sWidth = sHeight = None
    canvas = image_canvas2
    canvas.js_init("""
        element.reset_canvas();
        var mandrill_url = "../mandrill.png";
        element.name_image_url("mandrill", mandrill_url);
        element.named_image({image_name: "mandrill",
                 x:x, y:y, dx:dx, dy:dy, w:w, h:h, degrees:degrees,
                 sx:sx, sy:sy, sWidth:sWidth, sHeight:sHeight});
        element.fit();
        element.lower_left_axes({max_tick_count: 4});
        element.circle({x:x, y:y, r:5, color:"#999"});
        element.fit(null, 30);
    """,
                 x=x, y=y, dx=dx, dy=dy, w=w, h=h, degrees=degrees,
                 sx=sx, sy=sy, sWidth=sWidth, sHeight=sHeight)

w = interactive(
    change_rect_js, 
    x=(-100, 100), 
    y=(-100,100), 
    dx=(-300, 300), 
    dy=(-300, 300), 
    w=(-300,300), 
    h=(-300,300), 
    fill=True,
    lineWidth=(0,20),
    degrees=(-360,360),
    red=(0,255),
    green=(0,255),
    blue=(0,255),
    alpha=(0.0,1.0,0.1)
)
display(w)

# + deletable=true editable=true


StarcoderdataJupyterScriptsDedupFiltered