{"cells": [{"cell_type": "markdown", "metadata": {}, "source": ["# brython, brythonmagic\n", "\n", "[brython](https://github.com/brython-dev/brython) is an implementation of Python in javascript, [byrthonmagic](https://github.com/kikocorreoso/brythonmagic) makes it available from a notebook."]}, {"cell_type": "markdown", "metadata": {}, "source": ["[documentation](https://github.com/kikocorreoso/brythonmagic) [source](https://github.com/kikocorreoso/brythonmagic) [installation](https://github.com/kikocorreoso/brythonmagic) [tutorial](https://github.com/kikocorreoso/brythonmagic)"]}, {"cell_type": "code", "execution_count": 1, "metadata": {}, "outputs": [{"data": {"text/html": ["<div id=\"my_id_menu_nb\">run previous cell, wait for 2 seconds</div>\n", "<script>\n", "function repeat_indent_string(n){\n", "    var a = \"\" ;\n", "    for ( ; n > 0 ; --n)\n", "        a += \"    \";\n", "    return a;\n", "}\n", "// look up into all sections and builds an automated menu //\n", "var update_menu_string = function(begin, lfirst, llast, sformat, send, keep_item, begin_format, end_format) {\n", "    var anchors = document.getElementsByClassName(\"section\");\n", "    if (anchors.length == 0) {\n", "        anchors = document.getElementsByClassName(\"text_cell_render rendered_html\");\n", "    }\n", "    var i,t;\n", "    var text_menu = begin;\n", "    var text_memo = \"<pre>\\nlength:\" + anchors.length + \"\\n\";\n", "    var ind = \"\";\n", "    var memo_level = 1;\n", "    var href;\n", "    var tags = [];\n", "    var main_item = 0;\n", "    var format_open = 0;\n", "    for (i = 0; i <= llast; i++)\n", "        tags.push(\"h\" + i);\n", "\n", "    for (i = 0; i < anchors.length; i++) {\n", "        text_memo += \"**\" + anchors[i].id + \"--\\n\";\n", "\n", "        var child = null;\n", "        for(t = 0; t < tags.length; t++) {\n", "            var r = anchors[i].getElementsByTagName(tags[t]);\n", "            if (r.length > 0) {\n", "child = r[0];\n", "break;\n", "            }\n", "        }\n", "        if (child == null) {\n", "            text_memo += \"null\\n\";\n", "            continue;\n", "        }\n", "        if (anchors[i].hasAttribute(\"id\")) {\n", "            // when converted in RST\n", "            href = anchors[i].id;\n", "            text_memo += \"#1-\" + href;\n", "            // passer \u00e0 child suivant (le chercher)\n", "        }\n", "        else if (child.hasAttribute(\"id\")) {\n", "            // in a notebook\n", "            href = child.id;\n", "            text_memo += \"#2-\" + href;\n", "        }\n", "        else {\n", "            text_memo += \"#3-\" + \"*\" + \"\\n\";\n", "            continue;\n", "        }\n", "        var title = child.textContent;\n", "        var level = parseInt(child.tagName.substring(1,2));\n", "\n", "        text_memo += \"--\" + level + \"?\" + lfirst + \"--\" + title + \"\\n\";\n", "\n", "        if ((level < lfirst) || (level > llast)) {\n", "            continue ;\n", "        }\n", "        if (title.endsWith('\u00b6')) {\n", "            title = title.substring(0,title.length-1).replace(\"<\", \"&lt;\")\n", "         .replace(\">\", \"&gt;\").replace(\"&\", \"&amp;\");\n", "        }\n", "        if (title.length == 0) {\n", "            continue;\n", "        }\n", "\n", "        while (level < memo_level) {\n", "            text_menu += end_format + \"</ul>\\n\";\n", "            format_open -= 1;\n", "            memo_level -= 1;\n", "        }\n", "        if (level == lfirst) {\n", "            main_item += 1;\n", "        }\n", "        if (keep_item != -1 && main_item != keep_item + 1) {\n", "            // alert(main_item + \" - \" + level + \" - \" + keep_item);\n", "            continue;\n", "        }\n", "        while (level > memo_level) {\n", "            text_menu += \"<ul>\\n\";\n", "            memo_level += 1;\n", "        }\n", "        text_menu += repeat_indent_string(level-2);\n", "        text_menu += begin_format + sformat.replace(\"__HREF__\", href).replace(\"__TITLE__\", title);\n", "        format_open += 1;\n", "    }\n", "    while (1 < memo_level) {\n", "        text_menu += end_format + \"</ul>\\n\";\n", "        memo_level -= 1;\n", "        format_open -= 1;\n", "    }\n", "    text_menu += send;\n", "    //text_menu += \"\\n\" + text_memo;\n", "\n", "    while (format_open > 0) {\n", "        text_menu += end_format;\n", "        format_open -= 1;\n", "    }\n", "    return text_menu;\n", "};\n", "var update_menu = function() {\n", "    var sbegin = \"\";\n", "    var sformat = '<a href=\"#__HREF__\">__TITLE__</a>';\n", "    var send = \"\";\n", "    var begin_format = '<li>';\n", "    var end_format = '</li>';\n", "    var keep_item = -1;\n", "    var text_menu = update_menu_string(sbegin, 2, 4, sformat, send, keep_item,\n", "       begin_format, end_format);\n", "    var menu = document.getElementById(\"my_id_menu_nb\");\n", "    menu.innerHTML=text_menu;\n", "};\n", "window.setTimeout(update_menu,2000);\n", "            </script>"], "text/plain": ["<IPython.core.display.HTML object>"]}, "execution_count": 2, "metadata": {}, "output_type": "execute_result"}], "source": ["from jyquickhelper import add_notebook_menu\n", "add_notebook_menu()"]}, {"cell_type": "markdown", "metadata": {}, "source": ["## example"]}, {"cell_type": "code", "execution_count": 2, "metadata": {}, "outputs": [], "source": ["%load_ext brythonmagic"]}, {"cell_type": "code", "execution_count": 3, "metadata": {}, "outputs": [{"data": {"text/html": ["<!--<script type=\"text/javascript\" src=\"http://www.brython.info/src/brython_dist.js\"></script>-->\n", "<script type=\"text/javascript\" src=\"http://brython.info/src/brython.js\">\n", "</script>"], "text/plain": ["<IPython.core.display.HTML object>"]}, "metadata": {}, "output_type": "display_data"}], "source": ["%%html\n", "<!--<script type=\"text/javascript\" src=\"http://www.brython.info/src/brython_dist.js\"></script>-->\n", "<script type=\"text/javascript\" src=\"http://brython.info/src/brython.js\">\n", "</script>"]}, {"cell_type": "code", "execution_count": 4, "metadata": {}, "outputs": [], "source": ["html = \"\"\"\n", "<div id=\"paragraph\">Hi</div>\n", "\"\"\""]}, {"cell_type": "code", "execution_count": 5, "metadata": {}, "outputs": [{"data": {"text/html": ["  <script id=\"91101\" type=\"text/python\">\n", "from browser import doc\n", "\n", "doc[\"paragraph\"].style = {\"color\": \"yellow\",\n", "                          \"fontSize\": \"100px\",\n", "                          \"lineHeight\": \"150px\",\n", "                          \"textAlign\": \"center\",\n", "                          \"backgroundColor\": \"black\"}\n", "  </script>\n", "  <div id=\"html_ex\">\n", "<div id=\"paragraph\">Hi</div>\n", "</div>\n", "  <script type=\"text/javascript\">brython({debug:1, static_stdlib_import: false, ipy_id: [\"91101\"]});</script>\n"], "text/plain": ["<IPython.core.display.HTML object>"]}, "metadata": {}, "output_type": "display_data"}], "source": ["%%brython -c html_ex -h html\n", "from browser import doc\n", "\n", "doc[\"paragraph\"].style = {\"color\": \"yellow\",\n", "                          \"fontSize\": \"100px\",\n", "                          \"lineHeight\": \"150px\",\n", "                          \"textAlign\": \"center\",\n", "                          \"backgroundColor\": \"black\"}"]}, {"cell_type": "code", "execution_count": 6, "metadata": {}, "outputs": [{"data": {"text/html": ["  <script id=\"my_dummy_function\" type=\"text/python\">\n", "def dummy_function(some_text):\n", "    print(some_text)\n", "  </script>\n", "  <div id=\"brython_container_298541\"></div>\n", "  <script type=\"text/javascript\">brython({debug:1, static_stdlib_import: false, ipy_id: [\"my_dummy_function\"]});</script>\n"], "text/plain": ["<IPython.core.display.HTML object>"]}, "metadata": {}, "output_type": "display_data"}], "source": ["%%brython -s my_dummy_function\n", "def dummy_function(some_text):\n", "    print(some_text)"]}, {"cell_type": "code", "execution_count": 7, "metadata": {}, "outputs": [{"data": {"text/html": ["  <script id=\"409594\" type=\"text/python\">\n", "dummy_function('Hi')\n", "  </script>\n", "  <div id=\"brython_container_409594\"></div>\n", "  <script type=\"text/javascript\">brython({debug:1, static_stdlib_import: false, ipy_id: [\"my_dummy_function\", \"409594\"]});</script>\n"], "text/plain": ["<IPython.core.display.HTML object>"]}, "metadata": {}, "output_type": "display_data"}], "source": ["%%brython -S my_dummy_function\n", "dummy_function('Hi')"]}, {"cell_type": "code", "execution_count": 8, "metadata": {}, "outputs": [{"data": {"text/html": ["  <script id=\"544308\" type=\"text/python\">\n", "from browser import doc, html\n", "\n", "for i in range(10):\n", "    doc[\"simple_example\"] <= html.P(i)\n", "  </script>\n", "  <div id=\"simple_example\"></div>\n", "  <script type=\"text/javascript\">brython({debug:1, static_stdlib_import: false, ipy_id: [\"544308\"]});</script>\n"], "text/plain": ["<IPython.core.display.HTML object>"]}, "metadata": {}, "output_type": "display_data"}], "source": ["%%brython -c simple_example\n", "from browser import doc, html\n", "\n", "for i in range(10):\n", "    doc[\"simple_example\"] <= html.P(i)"]}, {"cell_type": "code", "execution_count": 9, "metadata": {}, "outputs": [{"data": {"text/html": ["  <script id=\"673456\" type=\"text/python\">\n", "from browser.timer import request_animation_frame as raf\n", "from browser.timer import cancel_animation_frame as caf\n", "from browser import doc, html\n", "from time import time\n", "import math\n", "\n", "# First we create a table to insert the elements\n", "table = html.TABLE(cellpadding = 10)\n", "btn_anim = html.BUTTON('Animate', Id=\"btn-anim\", type=\"button\")\n", "btn_stop = html.BUTTON('Stop', Id=\"btn-stop\", type=\"button\")\n", "cnvs = html.CANVAS(Id=\"raf-canvas\", width=256, height=256)\n", "\n", "table <= html.TR(html.TD(btn_anim + btn_stop) +\n", "                 html.TD(cnvs))\n", "\n", "doc['canvas_example'] <= table\n", "# Now we access the canvas context\n", "ctx = doc['raf-canvas'].getContext( '2d' ) \n", "\n", "# And we create several functions in charge to animate and stop the draw animation\n", "toggle = True\n", "\n", "def draw():\n", "    t = time() * 3\n", "    x = math.sin(t) * 96 + 128\n", "    y = math.cos(t * 0.9) * 96 + 128\n", "    global toggle\n", "    if toggle:\n", "        toggle = False\n", "    else:\n", "        toggle = True\n", "    ctx.fillStyle = 'rgb(200,200,20)' if toggle else 'rgb(20,20,200)'\n", "    ctx.beginPath()\n", "    ctx.arc( x, y, 6, 0, math.pi * 2, True)\n", "    ctx.closePath()\n", "    ctx.fill()\n", "\n", "def animate(i):\n", "    global id\n", "    id = raf(animate)\n", "    draw()\n", "\n", "def stop(i):\n", "    global id\n", "    print(id)\n", "    caf(id)\n", "\n", "doc[\"btn-anim\"].bind(\"click\", animate)\n", "doc[\"btn-stop\"].bind(\"click\", stop)\n", "  </script>\n", "  <div id=\"canvas_example\"></div>\n", "  <script type=\"text/javascript\">brython({debug:1, static_stdlib_import: false, ipy_id: [\"673456\"]});</script>\n"], "text/plain": ["<IPython.core.display.HTML object>"]}, "metadata": {}, "output_type": "display_data"}], "source": ["%%brython -c canvas_example\n", "from browser.timer import request_animation_frame as raf\n", "from browser.timer import cancel_animation_frame as caf\n", "from browser import doc, html\n", "from time import time\n", "import math\n", "\n", "# First we create a table to insert the elements\n", "table = html.TABLE(cellpadding = 10)\n", "btn_anim = html.BUTTON('Animate', Id=\"btn-anim\", type=\"button\")\n", "btn_stop = html.BUTTON('Stop', Id=\"btn-stop\", type=\"button\")\n", "cnvs = html.CANVAS(Id=\"raf-canvas\", width=256, height=256)\n", "\n", "table <= html.TR(html.TD(btn_anim + btn_stop) +\n", "                 html.TD(cnvs))\n", "\n", "doc['canvas_example'] <= table\n", "# Now we access the canvas context\n", "ctx = doc['raf-canvas'].getContext( '2d' ) \n", "\n", "# And we create several functions in charge to animate and stop the draw animation\n", "toggle = True\n", "\n", "def draw():\n", "    t = time() * 3\n", "    x = math.sin(t) * 96 + 128\n", "    y = math.cos(t * 0.9) * 96 + 128\n", "    global toggle\n", "    if toggle:\n", "        toggle = False\n", "    else:\n", "        toggle = True\n", "    ctx.fillStyle = 'rgb(200,200,20)' if toggle else 'rgb(20,20,200)'\n", "    ctx.beginPath()\n", "    ctx.arc( x, y, 6, 0, math.pi * 2, True)\n", "    ctx.closePath()\n", "    ctx.fill()\n", "\n", "def animate(i):\n", "    global id\n", "    id = raf(animate)\n", "    draw()\n", "\n", "def stop(i):\n", "    global id\n", "    print(id)\n", "    caf(id)\n", "\n", "doc[\"btn-anim\"].bind(\"click\", animate)\n", "doc[\"btn-stop\"].bind(\"click\", stop)"]}, {"cell_type": "code", "execution_count": 10, "metadata": {}, "outputs": [{"data": {"application/javascript": ["\n", "    require(\n", "        [\n", "            \"http://d3js.org/d3.v3.js\"\n", "        ], \n", "        function() {\n", "            console.log(\"Loaded js code from http://d3js.org/d3.v3.js!\");\n", "        }\n", "    );    \n", "    "], "text/plain": ["<IPython.core.display.Javascript object>"]}, "metadata": {}, "output_type": "display_data"}], "source": ["from brythonmagic import load_js_lib\n", "load_js_lib(\"http://d3js.org/d3.v3.js\")"]}, {"cell_type": "code", "execution_count": 11, "metadata": {}, "outputs": [{"data": {"text/html": ["  <script id=\"317524\" type=\"text/python\">\n", "from browser import window, document, html\n", "from javascript import JSObject\n", "\n", "d3 = window.d3\n", "\n", "container = JSObject(d3.select(\"#simple_d3\"))\n", "svg = container.append(\"svg\").attr(\"width\", 100).attr(\"height\", 100)\n", "circle1 = svg.append(\"circle\").style(\"stroke\", \"gray\").style(\"fill\", \"gray\").attr(\"r\", 40)\n", "circle1.attr(\"cx\", 50).attr(\"cy\", 50).attr(\"id\", \"mycircle\")\n", "\n", "circle2 = svg.append(\"circle\").style(\"stroke\", \"gray\").style(\"fill\", \"white\").attr(\"r\", 20)\n", "circle2.attr(\"cx\", 50).attr(\"cy\", 50)\n", "\n", "def over(ev):\n", "    document[\"mycircle\"].style.fill = \"blue\"\n", "\n", "def out(ev):\n", "    document[\"mycircle\"].style.fill = \"gray\"\n", "\n", "document[\"mycircle\"].bind(\"mouseover\", over)\n", "document[\"mycircle\"].bind(\"mouseout\", out)\n", "  </script>\n", "  <div id=\"simple_d3\"></div>\n", "  <script type=\"text/javascript\">brython({debug:1, static_stdlib_import: false, ipy_id: [\"317524\"]});</script>\n"], "text/plain": ["<IPython.core.display.HTML object>"]}, "metadata": {}, "output_type": "display_data"}], "source": ["%%brython -c simple_d3\n", "from browser import window, document, html\n", "from javascript import JSObject\n", "\n", "d3 = window.d3\n", "\n", "container = JSObject(d3.select(\"#simple_d3\"))\n", "svg = container.append(\"svg\").attr(\"width\", 100).attr(\"height\", 100)\n", "circle1 = svg.append(\"circle\").style(\"stroke\", \"gray\").style(\"fill\", \"gray\").attr(\"r\", 40)\n", "circle1.attr(\"cx\", 50).attr(\"cy\", 50).attr(\"id\", \"mycircle\")\n", "\n", "circle2 = svg.append(\"circle\").style(\"stroke\", \"gray\").style(\"fill\", \"white\").attr(\"r\", 20)\n", "circle2.attr(\"cx\", 50).attr(\"cy\", 50)\n", "\n", "def over(ev):\n", "    document[\"mycircle\"].style.fill = \"blue\"\n", "\n", "def out(ev):\n", "    document[\"mycircle\"].style.fill = \"gray\"\n", "\n", "document[\"mycircle\"].bind(\"mouseover\", over)\n", "document[\"mycircle\"].bind(\"mouseout\", out)"]}, {"cell_type": "code", "execution_count": 12, "metadata": {}, "outputs": [{"data": {"text/html": ["  <script id=\"280484\" type=\"text/python\">\n", "from browser import document, html\n", "\n", "def hide(ev):\n", "    divs = document.get(selector = 'div.input')\n", "    for div in divs:\n", "        div.style.display = \"none\"\n", "\n", "def show(ev):\n", "    divs = document.get(selector = 'div.input')\n", "    for div in divs:\n", "        div.style.display = \"inherit\"\n", "\n", "document[\"manipulating\"] <= html.BUTTON('Hide code cells', Id=\"btn-hide\")\n", "document[\"btn-hide\"].bind(\"click\", hide)\n", "\n", "document[\"manipulating\"] <= html.BUTTON('Show code cells', Id=\"btn-show\")\n", "document[\"btn-show\"].bind(\"click\", show)\n", "  </script>\n", "  <div id=\"manipulating\"></div>\n", "  <script type=\"text/javascript\">brython({debug:1, static_stdlib_import: false, ipy_id: [\"280484\"]});</script>\n"], "text/plain": ["<IPython.core.display.HTML object>"]}, "metadata": {}, "output_type": "display_data"}], "source": ["%%brython -c manipulating\n", "from browser import document, html\n", "\n", "def hide(ev):\n", "    divs = document.get(selector = 'div.input')\n", "    for div in divs:\n", "        div.style.display = \"none\"\n", "\n", "def show(ev):\n", "    divs = document.get(selector = 'div.input')\n", "    for div in divs:\n", "        div.style.display = \"inherit\"\n", "\n", "document[\"manipulating\"] <= html.BUTTON('Hide code cells', Id=\"btn-hide\")\n", "document[\"btn-hide\"].bind(\"click\", hide)\n", "\n", "document[\"manipulating\"] <= html.BUTTON('Show code cells', Id=\"btn-show\")\n", "document[\"btn-show\"].bind(\"click\", show)"]}, {"cell_type": "code", "execution_count": 13, "metadata": {}, "outputs": [{"data": {"application/javascript": ["\n", "    require(\n", "        [\n", "            \"https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/OpenLayers.js\"\n", "        ], \n", "        function() {\n", "            console.log(\"Loaded js code from https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/OpenLayers.js!\");\n", "        }\n", "    );    \n", "    "], "text/plain": ["<IPython.core.display.Javascript object>"]}, "metadata": {}, "output_type": "display_data"}], "source": ["load_js_lib(\"https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/OpenLayers.js\")"]}, {"cell_type": "code", "execution_count": 14, "metadata": {}, "outputs": [{"data": {"text/html": ["  <script id=\"879476\" type=\"text/python\">\n", "from browser import document, window\n", "from javascript import JSConstructor, JSObject\n", "\n", "## Div layout\n", "document['ol_map'].style.width = \"800px\"\n", "document['ol_map'].style.height = \"400px\"\n", "document['ol_map'].style.border = \"1px solid black\"\n", "\n", "OpenLayers = window.OpenLayers\n", "\n", "## Map\n", "_map = JSConstructor(OpenLayers.Map)('ol_map')\n", "\n", "## Addition of a OpenStreetMap layer\n", "_layer = JSConstructor(OpenLayers.Layer.OSM)('Simple OSM map')\n", "_map.addLayer(_layer)\n", "\n", "## Map centered on Lon, Lat = (-3.671416, 40.435897) and a zoom = 14\n", "## with a projection = \"EPSG:4326\" (Lat-Lon WGS84)\n", "_proj = JSConstructor(OpenLayers.Projection)(\"EPSG:4326\")\n", "_center = JSConstructor(OpenLayers.LonLat)(-3.671416, 40.435897)\n", "_center.transform(_proj, _map.getProjectionObject())\n", "_map.setCenter(_center, 10)\n", "\n", "## Addition of some points around the defined location\n", "lons = [-3.670, -3.671, -3.672, -3.672, -3.672,\n", "        -3.671, -3.670, -3.670]\n", "lats = [40.435, 40.435, 40.435, 40.436, 40.437,\n", "        40.437, 40.437, 40.436]\n", "\n", "site_points = []\n", "site_style = {}\n", "\n", "points_layer = JSConstructor(OpenLayers.Layer.Vector)(\"Point Layer\")\n", "_map.addLayer(points_layer)\n", "\n", "for lon, lat in zip(lons, lats):\n", "    point = JSConstructor(OpenLayers.Geometry.Point)(lon, lat)\n", "    point.transform(_proj, _map.getProjectionObject())\n", "    _feat = JSConstructor(OpenLayers.Feature.Vector)(point)\n", "    points_layer.addFeatures(_feat)\n", "  </script>\n", "  <div id=\"ol_map\"></div>\n", "  <script type=\"text/javascript\">brython({debug:1, static_stdlib_import: false, ipy_id: [\"879476\"]});</script>\n"], "text/plain": ["<IPython.core.display.HTML object>"]}, "metadata": {}, "output_type": "display_data"}], "source": ["%%brython -c ol_map\n", "from browser import document, window\n", "from javascript import JSConstructor, JSObject\n", "\n", "## Div layout\n", "document['ol_map'].style.width = \"800px\"\n", "document['ol_map'].style.height = \"400px\"\n", "document['ol_map'].style.border = \"1px solid black\"\n", "\n", "OpenLayers = window.OpenLayers\n", "\n", "## Map\n", "_map = JSConstructor(OpenLayers.Map)('ol_map')\n", "\n", "## Addition of a OpenStreetMap layer\n", "_layer = JSConstructor(OpenLayers.Layer.OSM)('Simple OSM map')\n", "_map.addLayer(_layer)\n", "\n", "## Map centered on Lon, Lat = (-3.671416, 40.435897) and a zoom = 14\n", "## with a projection = \"EPSG:4326\" (Lat-Lon WGS84)\n", "_proj = JSConstructor(OpenLayers.Projection)(\"EPSG:4326\")\n", "_center = JSConstructor(OpenLayers.LonLat)(-3.671416, 40.435897)\n", "_center.transform(_proj, _map.getProjectionObject())\n", "_map.setCenter(_center, 10)\n", "\n", "## Addition of some points around the defined location\n", "lons = [-3.670, -3.671, -3.672, -3.672, -3.672,\n", "        -3.671, -3.670, -3.670]\n", "lats = [40.435, 40.435, 40.435, 40.436, 40.437,\n", "        40.437, 40.437, 40.436]\n", "\n", "site_points = []\n", "site_style = {}\n", "\n", "points_layer = JSConstructor(OpenLayers.Layer.Vector)(\"Point Layer\")\n", "_map.addLayer(points_layer)\n", "\n", "for lon, lat in zip(lons, lats):\n", "    point = JSConstructor(OpenLayers.Geometry.Point)(lon, lat)\n", "    point.transform(_proj, _map.getProjectionObject())\n", "    _feat = JSConstructor(OpenLayers.Feature.Vector)(point)\n", "    points_layer.addFeatures(_feat)"]}, {"cell_type": "code", "execution_count": 15, "metadata": {}, "outputs": [{"data": {"application/javascript": ["\n", "    require(\n", "        [\n", "            \"http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js\"\n", "        ], \n", "        function() {\n", "            console.log(\"Loaded js code from http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js!\");\n", "        }\n", "    );    \n", "    "], "text/plain": ["<IPython.core.display.Javascript object>"]}, "metadata": {}, "output_type": "display_data"}], "source": ["load_js_lib(\"http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js\")"]}, {"cell_type": "code", "execution_count": 16, "metadata": {}, "outputs": [{"data": {"text/html": ["  <script id=\"296790\" type=\"text/python\">\n", "from browser import window\n", "from javascript import JSObject\n", "\n", "Raphael = window.Raphael\n", "\n", "paper = JSObject(Raphael(\"raphael_ex\", 400, 400))\n", "\n", "#Draw rectagle\n", "rect = paper.rect(1,1,398,398)\n", "rect.attr(\"stroke\", \"black\")\n", "\n", "#Draw orbits\n", "for rot in range(90,280,60):\n", "    ellipse = paper.ellipse(200, 200, 180, 50)\n", "    ellipse.attr(\"stroke\", \"gray\")\n", "    ellipse.rotate(rot)\n", "\n", "#Draw nucleus\n", "nucleus = paper.circle(200,200,40)\n", "nucleus.attr(\"fill\", \"black\")\n", "\n", "# Draw electrons\n", "electron = paper.circle(200, 20, 10)\n", "electron.attr(\"fill\", \"red\")\n", "electron = paper.circle(44, 290, 10)\n", "electron.attr(\"fill\", \"yellow\")\n", "electron = paper.circle(356, 290, 10)\n", "electron.attr(\"fill\", \"blue\")\n", "  </script>\n", "  <div id=\"raphael_ex\"></div>\n", "  <script type=\"text/javascript\">brython({debug:1, static_stdlib_import: false, ipy_id: [\"296790\"]});</script>\n"], "text/plain": ["<IPython.core.display.HTML object>"]}, "metadata": {}, "output_type": "display_data"}], "source": ["%%brython -c raphael_ex\n", "from browser import window\n", "from javascript import JSObject\n", "\n", "Raphael = window.Raphael\n", "\n", "paper = JSObject(Raphael(\"raphael_ex\", 400, 400))\n", "\n", "#Draw rectagle\n", "rect = paper.rect(1,1,398,398)\n", "rect.attr(\"stroke\", \"black\")\n", "\n", "#Draw orbits\n", "for rot in range(90,280,60):\n", "    ellipse = paper.ellipse(200, 200, 180, 50)\n", "    ellipse.attr(\"stroke\", \"gray\")\n", "    ellipse.rotate(rot)\n", "\n", "#Draw nucleus\n", "nucleus = paper.circle(200,200,40)\n", "nucleus.attr(\"fill\", \"black\")\n", "\n", "# Draw electrons\n", "electron = paper.circle(200, 20, 10)\n", "electron.attr(\"fill\", \"red\")\n", "electron = paper.circle(44, 290, 10)\n", "electron.attr(\"fill\", \"yellow\")\n", "electron = paper.circle(356, 290, 10)\n", "electron.attr(\"fill\", \"blue\")"]}, {"cell_type": "code", "execution_count": 17, "metadata": {}, "outputs": [{"data": {"text/html": ["  <script id=\"804593\" type=\"text/python\">\n", "from browser import doc, html\n", "\n", "def show_cell_number(on = True):\n", "    cells = doc.get(selector = '.input_prompt')\n", "    for i, cell in enumerate(cells):\n", "        if on:\n", "            if 'In' in cell.html and '<br>' not in cell.html:\n", "                cell.html += \"<br>cell #\" + str(i)\n", "        else:\n", "            if 'In' in cell.text:\n", "                cell.html = cell.html.split('<br>')[0]\n", "\n", "show_cell_number(on = True)\n", "  </script>\n", "  <div id=\"brython_container_804593\"></div>\n", "  <script type=\"text/javascript\">brython({debug:1, static_stdlib_import: false, ipy_id: [\"804593\"]});</script>\n"], "text/plain": ["<IPython.core.display.HTML object>"]}, "metadata": {}, "output_type": "display_data"}], "source": ["%%brython\n", "from browser import doc, html\n", "\n", "def show_cell_number(on = True):\n", "    cells = doc.get(selector = '.input_prompt')\n", "    for i, cell in enumerate(cells):\n", "        if on:\n", "            if 'In' in cell.html and '<br>' not in cell.html:\n", "                cell.html += \"<br>cell #\" + str(i)\n", "        else:\n", "            if 'In' in cell.text:\n", "                cell.html = cell.html.split('<br>')[0]\n", "\n", "show_cell_number(on = True)"]}, {"cell_type": "code", "execution_count": 18, "metadata": {}, "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.4"}}, "nbformat": 4, "nbformat_minor": 2}