Bidirectional.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from IPython.display import Javascript, display, HTML"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "From javascript code, to assing a value to a python variable, use:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "Jupyter.notebook.kernel.execute('x=\"chao\"')"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "Jupyter.notebook.kernel.execute('x=\"chao\"')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You can then recover the value of the variable in python code using:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "chao\n"
     ]
    }
   ],
   "source": [
    "print(x)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "From python code, to assign a value to a javascript variable, use:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 23,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "window.greeting='hallo'"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "execution_count": 23,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "Javascript(\"window.greeting='hallo'\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You can then recover the value of the variable in javascript using:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 24,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "element.append(greeting)"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "element.append(greeting)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You can also with pure javascript assign a value to a variable and execute a cell:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "Jupyter.notebook.kernel.execute('x=25')\n",
       "Jupyter.notebook.get_cell(11).execute()"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "Jupyter.notebook.kernel.execute('x=25')\n",
    "Jupyter.notebook.get_cell(11).execute()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "By appending a function to the browser's `window` object, you can now use GUI elements injected in javascript to select options in your python code. The following will insert 3 buttons. Clicking on them will set the value of a python variable and execute a function to display it:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "5\n"
     ]
    }
   ],
   "source": [
    "'''\n",
    "This is cell #12\n",
    "If you add anything before, the number will change, though\n",
    "'''\n",
    "def test(v):\n",
    "    print(v);\n",
    "test(x)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "window.select = function select(val) {\n",
       "    Jupyter.notebook.kernel.execute('x='+val)\n",
       "    Jupyter.notebook.get_cell(12).execute(); // This will execute cell #12\n",
       "}\n",
       "select(5)"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "window.select = function select(val) {\n",
    "    Jupyter.notebook.kernel.execute('x='+val)\n",
    "    Jupyter.notebook.get_cell(12).execute(); // This will execute cell #12\n",
    "}\n",
    "select(5)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "element.append([\n",
       "    '<button onclick=\"select(1)\">One</button>',\n",
       "    '<button onclick=\"select(2)\">Two</button>',\n",
       "    '<button onclick=\"select(3)\">Three</button>'\n",
       "].join(' '))"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "element.append([\n",
    "    '<button onclick=\"select(1)\">One</button>',\n",
    "    '<button onclick=\"select(2)\">Two</button>',\n",
    "    '<button onclick=\"select(3)\">Three</button>'\n",
    "].join(' '))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The following javascript function allows to find notebook's cells by a name. To name a cell, add at its beginning the tag `#name=the_name`, where `the_name` is the name you want to give it."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "window.numberOfCellWithName = function numberOfCellWithName(name) {\n",
       "  var num=-1;\n",
       "    $(\".cell\").map(function(i,c) {\n",
       "    var k=$(c).find(\".cm-comment\").text();\n",
       "    if(k.search(/#name=/i)==0) {\n",
       "        if(k.split('=')[1]==name) {\n",
       "            num=i;\n",
       "        }\n",
       "    }\n",
       "  });\n",
       "    return num;\n",
       "}"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "window.numberOfCellWithName = function numberOfCellWithName(name) {\n",
    "  var num=-1;\n",
    "    $(\".cell\").map(function(i,c) {\n",
    "    var k=$(c).find(\".cm-comment\").text();\n",
    "    if(k.search(/#name=/i)==0) {\n",
    "        if(k.split('=')[1]==name) {\n",
    "            num=i;\n",
    "        }\n",
    "    }\n",
    "  });\n",
    "    return num;\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Here are two examples of named cells, one called `juan`, the other called `maria`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "10\n"
     ]
    }
   ],
   "source": [
    "#name=juan\n",
    "test(x)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Con ustedes\n",
      "15\n"
     ]
    }
   ],
   "source": [
    "#name=maria\n",
    "print(\"Con ustedes\");\n",
    "test(x);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The following javascript function will execute cells using their names:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "window.selectUsingName = function select(val,name) {\n",
       "    Jupyter.notebook.kernel.execute('x='+val)\n",
       "    var num=numberOfCellWithName(name);\n",
       "    if(num<0) {\n",
       "        element.html(\"Can't find cell named '\"+name+\"'\");\n",
       "        return;\n",
       "    }\n",
       "    Jupyter.notebook.get_cell(num).execute(); // This will execute the cell with the given name\n",
       "}\n",
       "selectUsingName(10,'juan')\n",
       "selectUsingName(15,'maria')"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "window.selectUsingName = function select(val,name) {\n",
    "    Jupyter.notebook.kernel.execute('x='+val)\n",
    "    var num=numberOfCellWithName(name);\n",
    "    if(num<0) {\n",
    "        element.html(\"Can't find cell named '\"+name+\"'\");\n",
    "        return;\n",
    "    }\n",
    "    Jupyter.notebook.get_cell(num).execute(); // This will execute the cell with the given name\n",
    "}\n",
    "selectUsingName(10,'juan')\n",
    "selectUsingName(15,'maria')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now, GUI elements pass values to named python cells:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "element.append([\n",
       "    '<button onclick=\"selectUsingName(1,\\'juan\\')\">One</button>',\n",
       "    '<button onclick=\"selectUsingName(2,\\'juan\\')\">Two</button>',\n",
       "    '<button onclick=\"selectUsingName(3,\\'juan\\')\">Three</button>',\n",
       "    '<button onclick=\"selectUsingName(4,\\'maria\\')\">Four</button>',\n",
       "    '<button onclick=\"selectUsingName(5,\\'maria\\')\">Five</button>',\n",
       "    '<button onclick=\"selectUsingName(6,\\'maria\\')\">Six</button>'\n",
       "].join(' '))"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "element.append([\n",
    "    '<button onclick=\"selectUsingName(1,\\'juan\\')\">One</button>',\n",
    "    '<button onclick=\"selectUsingName(2,\\'juan\\')\">Two</button>',\n",
    "    '<button onclick=\"selectUsingName(3,\\'juan\\')\">Three</button>',\n",
    "    '<button onclick=\"selectUsingName(4,\\'maria\\')\">Four</button>',\n",
    "    '<button onclick=\"selectUsingName(5,\\'maria\\')\">Five</button>',\n",
    "    '<button onclick=\"selectUsingName(6,\\'maria\\')\">Six</button>'\n",
    "].join(' '))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## An interactive javascript/python calculator"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "window.add=function add(c) {\n",
       "    if(c==\"C\") {\n",
       "        // clear the expression\n",
       "        Jupyter.notebook.kernel.execute('calc=\"\"');\n",
       "        element.html(\"\");\n",
       "    } else {\n",
       "        // add to the expression\n",
       "        var cmd='calc=calc+\"'+c.toString()+'\"';\n",
       "        element.append(c);\n",
       "        $('#expr').text(element.text());\n",
       "        Jupyter.notebook.kernel.execute(cmd)\n",
       "    }\n",
       "}\n",
       "window.execute=function execute() {\n",
       "    // evaluate the expression and clear\n",
       "    var num=numberOfCellWithName(\"calculator\");\n",
       "    Jupyter.notebook.get_cell(num).execute(); // This will execute the cell with the given name\n",
       "    element.html(\"\");\n",
       "}"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "window.add=function add(c) {\n",
    "    if(c==\"C\") {\n",
    "        // clear the expression\n",
    "        Jupyter.notebook.kernel.execute('calc=\"\"');\n",
    "        element.html(\"\");\n",
    "    } else {\n",
    "        // add to the expression\n",
    "        var cmd='calc=calc+\"'+c.toString()+'\"';\n",
    "        element.append(c);\n",
    "        $('#expr').text(element.text());\n",
    "        Jupyter.notebook.kernel.execute(cmd)\n",
    "    }\n",
    "}\n",
    "window.execute=function execute() {\n",
    "    // evaluate the expression and clear\n",
    "    var num=numberOfCellWithName(\"calculator\");\n",
    "    Jupyter.notebook.get_cell(num).execute(); // This will execute the cell with the given name\n",
    "    element.html(\"\");\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>$(\"#expr\").text(\"4\")</script>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "#name=calculator\n",
    "if calc:\n",
    "    res=eval(calc);\n",
    "    display(HTML('<script>$(\"#expr\").text(\"'+str(res)+'\")</script>'))\n",
    "    !!say {res}\n",
    "else:\n",
    "    print(\"nothing\");\n",
    "calc=\"\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "element.append([\n",
       "    '<div id=\"expr\">--</div>',\n",
       "    '<style>.a{width:30px};.c{width:98px};.d{width:139px}</style>',\n",
       "    '<button class=\"a\" onclick=\"add(\\'C\\')\">C</button>',\n",
       "    '<button class=\"a\" onclick=\"add(\\'(\\')\">(</button>',\n",
       "    '<button class=\"a\" onclick=\"add(\\')\\')\">)</button>',\n",
       "    '<button class=\"a\" onclick=\"add(\\'/\\')\">/</button>','<br/>',\n",
       "    '<button class=\"a\" onclick=\"add(7)\">7</button>',\n",
       "    '<button class=\"a\" onclick=\"add(8)\">8</button>',\n",
       "    '<button class=\"a\" onclick=\"add(9)\">9</button>',\n",
       "    '<button class=\"a\" onclick=\"add(\\'*\\')\">*</button>','<br/>',\n",
       "    '<button class=\"a\" onclick=\"add(4)\">4</button>',\n",
       "    '<button class=\"a\" onclick=\"add(5)\">5</button>',\n",
       "    '<button class=\"a\" onclick=\"add(6)\">6</button>',\n",
       "    '<button class=\"a\" onclick=\"add(\\'-\\')\">-</button>','<br/>',\n",
       "    '<button class=\"a\" onclick=\"add(1)\">1</button>',\n",
       "    '<button class=\"a\" onclick=\"add(2)\">2</button>',\n",
       "    '<button class=\"a\" onclick=\"add(3)\">3</button>',\n",
       "    '<button class=\"a\" onclick=\"add(\\'+\\')\">+</button>','<br/>',\n",
       "    '<button class=\"c\" onclick=\"add(0)\">0</button>',\n",
       "    '<button class=\"a\" onclick=\"add(\\'.\\')\">.</button>','<br/>',\n",
       "    '<button class=\"d\" onclick=\"execute()\">=</button>'\n",
       "].join(' '))"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "element.append([\n",
    "    '<div id=\"expr\">--</div>',\n",
    "    '<style>.a{width:30px};.c{width:98px};.d{width:139px}</style>',\n",
    "    '<button class=\"a\" onclick=\"add(\\'C\\')\">C</button>',\n",
    "    '<button class=\"a\" onclick=\"add(\\'(\\')\">(</button>',\n",
    "    '<button class=\"a\" onclick=\"add(\\')\\')\">)</button>',\n",
    "    '<button class=\"a\" onclick=\"add(\\'/\\')\">/</button>','<br/>',\n",
    "    '<button class=\"a\" onclick=\"add(7)\">7</button>',\n",
    "    '<button class=\"a\" onclick=\"add(8)\">8</button>',\n",
    "    '<button class=\"a\" onclick=\"add(9)\">9</button>',\n",
    "    '<button class=\"a\" onclick=\"add(\\'*\\')\">*</button>','<br/>',\n",
    "    '<button class=\"a\" onclick=\"add(4)\">4</button>',\n",
    "    '<button class=\"a\" onclick=\"add(5)\">5</button>',\n",
    "    '<button class=\"a\" onclick=\"add(6)\">6</button>',\n",
    "    '<button class=\"a\" onclick=\"add(\\'-\\')\">-</button>','<br/>',\n",
    "    '<button class=\"a\" onclick=\"add(1)\">1</button>',\n",
    "    '<button class=\"a\" onclick=\"add(2)\">2</button>',\n",
    "    '<button class=\"a\" onclick=\"add(3)\">3</button>',\n",
    "    '<button class=\"a\" onclick=\"add(\\'+\\')\">+</button>','<br/>',\n",
    "    '<button class=\"c\" onclick=\"add(0)\">0</button>',\n",
    "    '<button class=\"a\" onclick=\"add(\\'.\\')\">.</button>','<br/>',\n",
    "    '<button class=\"d\" onclick=\"execute()\">=</button>'\n",
    "].join(' '))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 288,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "image/svg+xml": [
       "<svg viewBox=\"0 0 100 20\" xmlns=\"http://www.w3.org/2000/svg\">\n",
       "  <circle cx=\"10\" cy=\"10\" fill=\"red\" id=\"circle\" r=\"10\"/>\n",
       "</svg>"
      ],
      "text/plain": [
       "<IPython.core.display.SVG object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%svg\n",
    "<svg viewBox=\"0 0 100 20\" xmlns=\"http://www.w3.org/2000/svg\">\n",
    "  <circle id=\"circle\" cx=\"10\" cy=\"10\" r=\"10\" fill=\"red\"/>\n",
    "</svg>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 292,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "$('#circle').attr('cx',40)"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "$('#circle').attr('cx',40)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python [Root]",
   "language": "python",
   "name": "Python [Root]"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.12"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}