{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "from jp_doodle import dual_canvas\n",
    "from IPython.display import display\n",
    "from jp_proxy_widget import notebook_test_helpers\n",
    "from canvas_test_helpers import ColorTester\n",
    "\n",
    "validators = notebook_test_helpers.ValidationSuite()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "vf = dual_canvas.DualCanvasWidget(width=320, height=220)\n",
    "display(vf)\n",
    "vf.circle(20, 150, 12, \"cyan\")\n",
    "x_vector = dict(x=0.5, y=0)\n",
    "y_vector = dict(x=0.5, y=0.5)\n",
    "xy_offset = dict(x=20, y=50)\n",
    "vf.lower_left_axes(50, 50, 280, 180, add_end_points=False)\n",
    "skew = vf.vector_frame(x_vector, y_vector, xy_offset)\n",
    "skew.lower_left_axes(\n",
    "    50, 50, 280, 180, add_end_points=False, \n",
    "    tick_line_config=dict(color=\"red\"),\n",
    "    tick_text_config=dict(color=\"pink\"))\n",
    "#vf.circle(20, 150, 12, \"cyan\") # this will fail because the circle is drawn at frame entry point upon redraw\n",
    "skew.circle(-200, 200, 10, \"rgba(100,200,100,1.0)\")\n",
    "vf.request_redraw()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "vf_tester = ColorTester(vf, \"vector frame\", height=220)\n",
    "vf_tester.add_check(20, 150, [100, 200, 100, 255])\n",
    "validators.add_validation(vf, vf_tester.validate)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "#vf_tester.validate()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "rf = dual_canvas.DualCanvasWidget(width=320, height=220)\n",
    "display(rf)\n",
    "scale_x = 0.5\n",
    "scale_y = 2.0\n",
    "translate_x = 20\n",
    "translate_y = 10\n",
    "rf.lower_left_axes(30, 30, 180, 100, add_end_points=False)\n",
    "rf.circle(20 + 100*0.5, 10 + 2.0*60, 12, \"cyan\")\n",
    "scaled = rf.rframe(scale_x, scale_y, translate_x, translate_y)\n",
    "scaled.lower_left_axes(\n",
    "    30, 30, 180, 100, add_end_points=False, \n",
    "    tick_line_config=dict(color=\"red\"),\n",
    "    tick_text_config=dict(color=\"pink\"))\n",
    "#rf.circle(20 + 100*0.5, 10 + 2.0*60, 12, \"cyan\")  # Not here, it will write over frame\n",
    "scaled.circle(100, 60, 10, \"rgba(100,200,100,1.0)\")\n",
    "rf.request_redraw()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "rf_tester = ColorTester(rf, \"rectangular frame\", height=220)\n",
    "rf_tester.add_check(70, 130, [100, 200, 100, 255])\n",
    "validators.add_validation(rf, rf_tester.validate)\n",
    "20 + 100*0.5, 10 + 2.0*60"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "#rf_tester.validate()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "def make_canvas_with_frame():\n",
    "    rgf = dual_canvas.DualCanvasWidget(width=320, height=220)\n",
    "    display(rgf)\n",
    "    minx = 50\n",
    "    miny = 30\n",
    "    maxx = 250\n",
    "    maxy = 130\n",
    "    frame_min_x = 20\n",
    "    frame_max_x = 220\n",
    "    frame_min_y = 10\n",
    "    frame_max_y = 210\n",
    "\n",
    "    rgf.lower_left_axes(minx, miny, maxx, maxy, add_end_points=True, max_tick_count=4)\n",
    "    rgf.circle(150, 80, 12, \"cyan\") # circle added before frame...\n",
    "\n",
    "    the_region = rgf.frame_region(\n",
    "        minx, miny, maxx, maxy, frame_min_x, frame_min_y, frame_max_x, frame_max_y)\n",
    "\n",
    "    the_region.lower_left_axes(\n",
    "        frame_min_x, frame_min_y, frame_max_x, frame_max_y, add_end_points=True, \n",
    "        tick_line_config=dict(color=\"red\"),\n",
    "        tick_text_config=dict(color=\"pink\"),\n",
    "        max_tick_count=4)\n",
    "    #rgf.circle(150, 80, 12, \"cyan\") # not here!\n",
    "    the_region.circle(120, 110, 10, \"rgba(100,200,100,1.0)\")\n",
    "    return rgf\n",
    "\n",
    "rgf = make_canvas_with_frame()\n",
    "rgf.request_redraw()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "rgf_tester = ColorTester(rgf, \"region frame\", height=220)\n",
    "rgf_tester.add_check(150, 80, [100, 200, 100, 255])\n",
    "validators.add_validation(rgf, rgf_tester.validate)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "def frame_obscured():\n",
    "    rgf = make_canvas_with_frame()\n",
    "    minx=135; miny=65; maxx=165; maxy=95\n",
    "    obscurer = rgf.frame_region(\n",
    "        name=\"obscurer\", \n",
    "        minx=minx, miny=miny, maxx=maxx, maxy=maxy, \n",
    "        frame_minx=0, frame_miny=0, frame_maxx=1, frame_maxy=1)\n",
    "    # Width and height are in model coordinates\n",
    "    obscurer.rect(0,0,w=maxx-minx,h=maxy-miny,color=\"rgba(110,10,130,1.0)\")\n",
    "    return rgf\n",
    "\n",
    "obscured = frame_obscured()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "obscured_tester = ColorTester(obscured, \"obscured frame\", height=220)\n",
    "obscured_tester.add_check(150, 80, [110, 10, 130, 255])\n",
    "validators.add_validation(obscured, obscured_tester.validate)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "poly = dual_canvas.DualCanvasWidget(width=300, height=150)\n",
    "display(poly)\n",
    "poly.js_init(\"\"\"\n",
    "\n",
    "var points = [[50,50],[150,50],[150,150],[50,150],];\n",
    "\n",
    "// Use reference frames for positioning:\n",
    "element.rect({x:0, y:0, w:300, h:150, color:\"cyan\"})\n",
    "var frame = element.frame_region(0, 0, 150, 150, 50, 50, 100, 100);\n",
    "frame.rect({x:51, y:51, w:99, h:99, color:\"yellow\"})\n",
    "//frame.polygon({points: points, color:\"green\", fill:false, lineWidth:3});\n",
    "element.fit()\n",
    "\"\"\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "tframe = dual_canvas.DualCanvasWidget(width=300, height=150)\n",
    "display(tframe)\n",
    "tframe.js_init(\"\"\"\n",
    "var frame = element.frame_region(50, 50, 150, 150, 0, 0, 100, 100);\n",
    "frame.text({\n",
    "    text: \"..X..\", x:0, y:0, name:\"joe\",\n",
    "    color:\"pink\", background:\"rgb(11,222,33)\", font: \"normal 100px Arial\",})\n",
    "//element.invisible_canvas.show();\n",
    "element.fit();\n",
    "\"\"\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "tframe_tester = ColorTester(tframe, \"text frame\", height=220)\n",
    "tframe_tester.add_check(20, 150, [11, 222, 33, 255])\n",
    "validators.add_validation(tframe, tframe_tester.validate)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "def hide_frame():\n",
    "    fob = frame_obscured()\n",
    "    fob.set_visibilities(names=[\"obscurer\"], visibility=False)\n",
    "    return fob\n",
    "\n",
    "hidden = hide_frame()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "hide_tester = ColorTester(hidden, \"hide frame\", height=220)\n",
    "hide_tester.add_check(150, 80, [100, 200, 100, 255])\n",
    "validators.add_validation(hidden, hide_tester.validate)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "def move_frame():\n",
    "    mob = frame_obscured()\n",
    "    mob.change(\"obscurer\", xy_offset={\"x\":0, \"y\":0})\n",
    "    return mob\n",
    "\n",
    "moved = move_frame()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "moved_tester = ColorTester(moved, \"moved frame\", height=220)\n",
    "moved_tester.add_check(150, 80, [100, 200, 100, 255])\n",
    "validators.add_validation(moved, moved_tester.validate)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "do_validations = True\n",
    "if do_validations:\n",
    "    delay_ms = 5000\n",
    "    display(validators.run_all_in_widget(delay_ms=delay_ms))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "#rf_tester.position_to_color_found"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}