{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Notes taken from the online [tutorial](https://jakevdp.github.io/blog/2013/06/01/ipython-notebook-javascript-python-communication/) about embedding javascript in ipython notebook"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "##Learning Notes\n",
    "### Executing python from within javascript\n",
    "\n",
    "The key functionality needed for interaction between javascript and the `IPython kernel` is the kernel object in the IPython Javascript package. Use `IPython.display.HTML` for embedded html and javascript display \n",
    "\n",
    "```javascript\n",
    "var kernel = IPython.notebook.kernel;\n",
    "kernel.execute(command);\n",
    "```\n",
    "\n",
    "or with a callback function in javascript\n",
    "\n",
    "```javascript\n",
    "var kernel = IPython.notebook.kernel;\n",
    "function callback(out_type, out_data){\n",
    "    // do_something\n",
    "}\n",
    "kernel.execute(command, {\"output\": callback});\n",
    "```"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<div style=\"background-color:gainsboro; border:solid black; width:300px; padding:20px;\">\n",
       "Variable Name: <input type=\"text\" id=\"var_name\" value=\"foo\"><br>\n",
       "Variable Value: <input type=\"text\" id=\"var_value\" value=\"bar\"><br>\n",
       "<button onclick=\"set_value()\">Set Value</button>\n",
       "</div>\n",
       "\n",
       "<script type=\"text/Javascript\">\n",
       "    function set_value(){\n",
       "        var var_name = document.getElementById('var_name').value;\n",
       "        var var_value = document.getElementById('var_value').value;\n",
       "        var command = var_name + \" = '\" + var_value + \"'\";\n",
       "        console.log(\"Executing Command: \" + command);\n",
       "        \n",
       "        var kernel = IPython.notebook.kernel;\n",
       "        kernel.execute(command);\n",
       "    }\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from IPython.display import HTML\n",
    "\n",
    "input_form = \"\"\"\n",
    "<div style=\"background-color:gainsboro; border:solid black; width:300px; padding:20px;\">\n",
    "Variable Name: <input type=\"text\" id=\"var_name\" value=\"foo\"><br>\n",
    "Variable Value: <input type=\"text\" id=\"var_value\" value=\"bar\"><br>\n",
    "<button onclick=\"set_value()\">Set Value</button>\n",
    "</div>\n",
    "\"\"\"\n",
    "\n",
    "javascript = \"\"\"\n",
    "<script type=\"text/Javascript\">\n",
    "    function set_value(){\n",
    "        var var_name = document.getElementById('var_name').value;\n",
    "        var var_value = document.getElementById('var_value').value;\n",
    "        var command = var_name + \" = '\" + var_value + \"'\";\n",
    "        console.log(\"Executing Command: \" + command);\n",
    "        \n",
    "        var kernel = IPython.notebook.kernel;\n",
    "        kernel.execute(command);\n",
    "    }\n",
    "</script>\n",
    "\"\"\"\n",
    "\n",
    "HTML(input_form + javascript)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "ename": "NameError",
     "evalue": "name 'foo' is not defined",
     "output_type": "error",
     "traceback": [
      "\u001b[1;31m---------------------------------------------------------------------------\u001b[0m",
      "\u001b[1;31mNameError\u001b[0m                                 Traceback (most recent call last)",
      "\u001b[1;32m<ipython-input-2-512cd49e65f5>\u001b[0m in \u001b[0;36m<module>\u001b[1;34m()\u001b[0m\n\u001b[1;32m----> 1\u001b[1;33m \u001b[1;32mprint\u001b[0m \u001b[0mfoo\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0m",
      "\u001b[1;31mNameError\u001b[0m: name 'foo' is not defined"
     ]
    }
   ],
   "source": [
    "print foo"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<div style=\"background-color:gainsboro; border:solid black; width:600px; padding:20px;\">\n",
       "Code: <input type=\"text\" id=\"code_input\" size=\"50\" height=\"2\" value=\"sin(pi / 2)\"><br>\n",
       "Result: <input type=\"text\" id=\"result_output\" size=\"50\" value=\"1.0\"><br>\n",
       "<button onclick=\"exec_code()\">Execute</button>\n",
       "</div>\n",
       "\n",
       "<script type=\"text/Javascript\">\n",
       "    function handle_output(out_type, out){\n",
       "        console.log(out_type);\n",
       "        console.log(out);\n",
       "        var res = null;\n",
       "         // if output is a print statement\n",
       "        if(out_type == \"stream\"){\n",
       "            res = out.data;\n",
       "        }\n",
       "        // if output is a python object\n",
       "        else if(out_type === \"pyout\"){\n",
       "            res = out.data[\"text/plain\"];\n",
       "        }\n",
       "        // if output is a python error\n",
       "        else if(out_type == \"pyerr\"){\n",
       "            res = out.ename + \": \" + out.evalue;\n",
       "        }\n",
       "        // if output is something we haven't thought of\n",
       "        else{\n",
       "            res = \"[out type not implemented]\";   \n",
       "        }\n",
       "        document.getElementById(\"result_output\").value = res;\n",
       "    }\n",
       "    \n",
       "    function exec_code(){\n",
       "        var code_input = document.getElementById('code_input').value;\n",
       "        var kernel = IPython.notebook.kernel;\n",
       "        var callbacks = {'output' : handle_output};\n",
       "        document.getElementById(\"result_output\").value = \"\";  // clear output box\n",
       "        var msg_id = kernel.execute(code_input, callbacks, {silent:false});\n",
       "        console.log(\"button pressed\");\n",
       "    }\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# Add an input form similar to what we saw above\n",
    "input_form = \"\"\"\n",
    "<div style=\"background-color:gainsboro; border:solid black; width:600px; padding:20px;\">\n",
    "Code: <input type=\"text\" id=\"code_input\" size=\"50\" height=\"2\" value=\"sin(pi / 2)\"><br>\n",
    "Result: <input type=\"text\" id=\"result_output\" size=\"50\" value=\"1.0\"><br>\n",
    "<button onclick=\"exec_code()\">Execute</button>\n",
    "</div>\n",
    "\"\"\"\n",
    "\n",
    "# here the javascript has a function to execute the code\n",
    "# within the input box, and a callback to handle the output.\n",
    "javascript = \"\"\"\n",
    "<script type=\"text/Javascript\">\n",
    "    function handle_output(out_type, out){\n",
    "        console.log(out_type);\n",
    "        console.log(out);\n",
    "        var res = null;\n",
    "         // if output is a print statement\n",
    "        if(out_type == \"stream\"){\n",
    "            res = out.data;\n",
    "        }\n",
    "        // if output is a python object\n",
    "        else if(out_type === \"pyout\"){\n",
    "            res = out.data[\"text/plain\"];\n",
    "        }\n",
    "        // if output is a python error\n",
    "        else if(out_type == \"pyerr\"){\n",
    "            res = out.ename + \": \" + out.evalue;\n",
    "        }\n",
    "        // if output is something we haven't thought of\n",
    "        else{\n",
    "            res = \"[out type not implemented]\";   \n",
    "        }\n",
    "        document.getElementById(\"result_output\").value = res;\n",
    "    }\n",
    "    \n",
    "    function exec_code(){\n",
    "        var code_input = document.getElementById('code_input').value;\n",
    "        var kernel = IPython.notebook.kernel;\n",
    "        var callbacks = {'output' : handle_output};\n",
    "        document.getElementById(\"result_output\").value = \"\";  // clear output box\n",
    "        var msg_id = kernel.execute(code_input, callbacks, {silent:false});\n",
    "        console.log(\"button pressed\");\n",
    "    }\n",
    "</script>\n",
    "\"\"\"\n",
    "\n",
    "HTML(input_form + javascript)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "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.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}