In [ ]:

from jp_doodle import dual_canvas
from IPython.display import display
from jp_proxy_widget import notebook_test_helpers
from canvas_test_helpers import ColorTester

validators = notebook_test_helpers.ValidationSuite()

In [ ]:

vf = dual_canvas.DualCanvasWidget(width=320, height=220)
display(vf)
vf.circle(20, 150, 12, "cyan")
x_vector = dict(x=0.5, y=0)
y_vector = dict(x=0.5, y=0.5)
xy_offset = dict(x=20, y=50)
vf.lower_left_axes(50, 50, 280, 180, add_end_points=False)
skew = vf.vector_frame(x_vector, y_vector, xy_offset)
skew.lower_left_axes(
    50, 50, 280, 180, add_end_points=False, 
    tick_line_config=dict(color="red"),
    tick_text_config=dict(color="pink"))
#vf.circle(20, 150, 12, "cyan") # this will fail because the circle is drawn at frame entry point upon redraw
skew.circle(-200, 200, 10, "rgba(100,200,100,1.0)")
vf.request_redraw()

In [ ]:

vf_tester = ColorTester(vf, "vector frame", height=220)
vf_tester.add_check(20, 150, [100, 200, 100, 255])
validators.add_validation(vf, vf_tester.validate)

In [ ]:

#vf_tester.validate()

In [ ]:

rf = dual_canvas.DualCanvasWidget(width=320, height=220)
display(rf)
scale_x = 0.5
scale_y = 2.0
translate_x = 20
translate_y = 10
rf.lower_left_axes(30, 30, 180, 100, add_end_points=False)
rf.circle(20 + 100*0.5, 10 + 2.0*60, 12, "cyan")
scaled = rf.rframe(scale_x, scale_y, translate_x, translate_y)
scaled.lower_left_axes(
    30, 30, 180, 100, add_end_points=False, 
    tick_line_config=dict(color="red"),
    tick_text_config=dict(color="pink"))
#rf.circle(20 + 100*0.5, 10 + 2.0*60, 12, "cyan")  # Not here, it will write over frame
scaled.circle(100, 60, 10, "rgba(100,200,100,1.0)")
rf.request_redraw()

In [ ]:

rf_tester = ColorTester(rf, "rectangular frame", height=220)
rf_tester.add_check(70, 130, [100, 200, 100, 255])
validators.add_validation(rf, rf_tester.validate)
20 + 100*0.5, 10 + 2.0*60

In [ ]:

#rf_tester.validate()

In [ ]:

def make_canvas_with_frame():
    rgf = dual_canvas.DualCanvasWidget(width=320, height=220)
    display(rgf)
    minx = 50
    miny = 30
    maxx = 250
    maxy = 130
    frame_min_x = 20
    frame_max_x = 220
    frame_min_y = 10
    frame_max_y = 210

    rgf.lower_left_axes(minx, miny, maxx, maxy, add_end_points=True, max_tick_count=4)
    rgf.circle(150, 80, 12, "cyan") # circle added before frame...

    the_region = rgf.frame_region(
        minx, miny, maxx, maxy, frame_min_x, frame_min_y, frame_max_x, frame_max_y)

    the_region.lower_left_axes(
        frame_min_x, frame_min_y, frame_max_x, frame_max_y, add_end_points=True, 
        tick_line_config=dict(color="red"),
        tick_text_config=dict(color="pink"),
        max_tick_count=4)
    #rgf.circle(150, 80, 12, "cyan") # not here!
    the_region.circle(120, 110, 10, "rgba(100,200,100,1.0)")
    return rgf

rgf = make_canvas_with_frame()
rgf.request_redraw()

In [ ]:

rgf_tester = ColorTester(rgf, "region frame", height=220)
rgf_tester.add_check(150, 80, [100, 200, 100, 255])
validators.add_validation(rgf, rgf_tester.validate)

In [ ]:

def frame_obscured():
    rgf = make_canvas_with_frame()
    minx=135; miny=65; maxx=165; maxy=95
    obscurer = rgf.frame_region(
        name="obscurer", 
        minx=minx, miny=miny, maxx=maxx, maxy=maxy, 
        frame_minx=0, frame_miny=0, frame_maxx=1, frame_maxy=1)
    # Width and height are in model coordinates
    obscurer.rect(0,0,w=maxx-minx,h=maxy-miny,color="rgba(110,10,130,1.0)")
    return rgf

obscured = frame_obscured()

In [ ]:

obscured_tester = ColorTester(obscured, "obscured frame", height=220)
obscured_tester.add_check(150, 80, [110, 10, 130, 255])
validators.add_validation(obscured, obscured_tester.validate)

In [ ]:

poly = dual_canvas.DualCanvasWidget(width=300, height=150)
display(poly)
poly.js_init("""

var points = [[50,50],[150,50],[150,150],[50,150],];

// Use reference frames for positioning:
element.rect({x:0, y:0, w:300, h:150, color:"cyan"})
var frame = element.frame_region(0, 0, 150, 150, 50, 50, 100, 100);
frame.rect({x:51, y:51, w:99, h:99, color:"yellow"})
//frame.polygon({points: points, color:"green", fill:false, lineWidth:3});
element.fit()
""")

In [ ]:

tframe = dual_canvas.DualCanvasWidget(width=300, height=150)
display(tframe)
tframe.js_init("""
var frame = element.frame_region(50, 50, 150, 150, 0, 0, 100, 100);
frame.text({
    text: "..X..", x:0, y:0, name:"joe",
    color:"pink", background:"rgb(11,222,33)", font: "normal 100px Arial",})
//element.invisible_canvas.show();
element.fit();
""")

In [ ]:

tframe_tester = ColorTester(tframe, "text frame", height=220)
tframe_tester.add_check(20, 150, [11, 222, 33, 255])
validators.add_validation(tframe, tframe_tester.validate)

In [ ]:

def hide_frame():
    fob = frame_obscured()
    fob.set_visibilities(names=["obscurer"], visibility=False)
    return fob

hidden = hide_frame()

In [ ]:

hide_tester = ColorTester(hidden, "hide frame", height=220)
hide_tester.add_check(150, 80, [100, 200, 100, 255])
validators.add_validation(hidden, hide_tester.validate)

In [ ]:

def move_frame():
    mob = frame_obscured()
    mob.change("obscurer", xy_offset={"x":0, "y":0})
    return mob

moved = move_frame()

In [ ]:

moved_tester = ColorTester(moved, "moved frame", height=220)
moved_tester.add_check(150, 80, [100, 200, 100, 255])
validators.add_validation(moved, moved_tester.validate)

In [ ]:

do_validations = True
if do_validations:
    delay_ms = 5000
    display(validators.run_all_in_widget(delay_ms=delay_ms))

In [ ]:

#rf_tester.position_to_color_found

In [ ]: