{ "metadata": { "name": "" }, "nbformat": 3, "nbformat_minor": 0, "worksheets": [ { "cells": [ { "cell_type": "heading", "level": 1, "metadata": {}, "source": [ "Embrasing web standards" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "One of the main reason that allowed us to developp the current notebook web application \n", "was to embrase the web technology. \n", "\n", "By beeing a pure web application using HTML, Javascript and CSS, the Notebook can get \n", "all the web technology improvement for free. Thus, as browsers support for different \n", "media extend, The notebook web app should be able to be compatible without modification. \n", "\n", "This is also true with performance of the User Interface as the speed of javascript VM increase. " ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "The other advantage of using only web technology is that the code of the interface is fully accessible to the end user, and modifiable live.\n", "Even if this task is not always easy, we strive to keep our code as accessible and reusable as possible.\n", "This should allow with minimum effort to develop small extensions that customize the behavior of the web interface. " ] }, { "cell_type": "heading", "level": 2, "metadata": {}, "source": [ "Tempering with Notebook app" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "The first tool that is availlable to you and that you shoudl be aware of are browser \"developpers tool\". The exact naming can change across browser, and might require the installation of extensions. But basically they can allow you to inspect/modify the DOM, and interact with the javascript code that run the frontend.\n", "\n", " - In Chrome and safari Developper tools are in the menu [Put mmenu name in english here] \n", " - In firefox you might need to install [Firebug](http://getfirebug.com/)\n", " - others ?\n", " \n", "Those will be your best friends to debug and try different approach for your extensions." ] }, { "cell_type": "heading", "level": 3, "metadata": {}, "source": [ "Injecting JS" ] }, { "cell_type": "heading", "level": 4, "metadata": {}, "source": [ "using magics" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Above tools can be tedious to edit long javascipt files. Hopefully we provide the `%%javascript` magic. This allows you to quickly inject javascript into the notebook. Still the javascript injected this way will not survive reloading. Hence it is a good tool for testing an refinig a script.\n", "\n", "You might see here and there people modifying css and injecting js into notebook by reading file and publishing them into the notebook.\n", "Not only this often break the flow of the notebook and make the re-execution of the notebook broken, but it also mean that you need to execute those cells on all the notebook every time you need to update the code.\n", "\n", "This can still be usefull in some cases, like the `%autosave` magic that allows to control the time between each save. But this can be replaced by a Javascript dropdown menu to select save interval." ] }, { "cell_type": "code", "collapsed": false, "input": [ "## you can inspect the autosave code to see what it does.\n", "%autosave??" ], "language": "python", "metadata": {}, "outputs": [] }, { "cell_type": "heading", "level": 4, "metadata": {}, "source": [ "custom.js" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "To inject Javascript we provide an entry point: `custom.js` that allow teh user to execute and load other resources into the notebook.\n", "Javascript code in `custom.js` will be executed when the notebook app start and can then be used to customise almost anything in the UI and in the behavior of the notebook.\n", "\n", "`custom.js` can be found in IPython profile dir, and so you can have different UI modification on a per profile basis, as well as share your modfication with others." ] }, { "cell_type": "heading", "level": 5, "metadata": {}, "source": [ "Because we like you...." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "You have been provided with an already existing profile folder with this tutorial...\n", "start the notebook from the root of the tutorial directory with :\n", "\n", "```bash\n", "$ ipython notebook --ProfileDir.location=./profile_euroscipy\n", "```" ] }, { "cell_type": "heading", "level": 5, "metadata": {}, "source": [ "but back to theory" ] }, { "cell_type": "code", "collapsed": false, "input": [ "profile_dir = ! ipython locate\n", "profile_dir = profile_dir[0]\n", "profile_dir" ], "language": "python", "metadata": {}, "outputs": [ { "metadata": {}, "output_type": "pyout", "prompt_number": 1, "text": [ "'/Users/bussonniermatthias/.ipython'" ] } ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "and custom js is in " ] }, { "cell_type": "code", "collapsed": false, "input": [ "import os.path\n", "custom_js_path = os.path.join(profile_dir,'profile_default','static','custom','custom.js')" ], "language": "python", "metadata": {}, "outputs": [] }, { "cell_type": "code", "collapsed": false, "input": [ "# my custom js\n", "with open(custom_js_path) as f:\n", " for l in f: \n", " print l," ], "language": "python", "metadata": {}, "outputs": [ { "output_type": "stream", "stream": "stdout", "text": [ "// we want strict javascript that fails\n", "// on ambiguous syntax\n", "\"using strict\";\n", "\n", "// notebook loaded is not perfect as it is re-triggerd on\n", "// revert to checkpoint but this allow extesnsion to be loaded\n", "// late enough to work.\n", "$([IPython.events]).on('notebook_loaded.Notebook', function(){\n", "\n", "\n", " /** Use path to js file relative to /static/ dir without leading slash, or\n", " * js extension.\n", " * Link directly to file is js extension isa simple file\n", " *\n", " * first argument of require is a **list** that can contains several modules if needed.\n", " **/\n", "\n", " //require(['custom/noscroll']);\n", " // require(['custom/clean_start'])\n", " // require(['custom/toggle_all_line_number'])\n", " // require(['custom/gist_it']);\n", " // require(['custom/autosavetime']);\n", "\n", " /**\n", " * Link to entrypoint if extesnsion is a folder.\n", " * to be consistent with commonjs module, the entrypoint is main.js\n", " * here youcan also trigger a custom function on load that will do extra\n", " * action with the module if needed\n", " **/\n", " require(['custom/slidemode/main'])\n", "\n", " // require(['custom/autoscroll']);\n", "\n", " //require(['custom/css_selector/main'])\n", " require(['custom/pre_exec_strip']);\n", " // require(['custom/no_exec_dunder']);\n", " // load_ext('nbviewer_theme')\n", "\n", "\n", " require(['custom/clippytip/main']);\n", "\n", " IPython.toolbar.add_buttons_group([\n", " {\n", " 'label' : 'run qtconsole',\n", " 'icon' : 'icon-paper-clip', // select your icon from http://jqueryui.com/themeroller/\n", " 'callback': function(){\n", " IPython.tooltip.remove_and_cancel_tooltip(true)\n", " $('#tooltip').empty() \n", " $('#tooltip').attr('style','') \n", " IPython.tooltip = new IPython.ClippyTip()\n", " }\n", " },\n", " {\n", " 'label' : 'run qtconsole',\n", " 'icon' : 'icon-th-large', // select your icon from http://jqueryui.com/themeroller/\n", " 'callback': function(){\n", " IPython.tooltip.remove_and_cancel_tooltip(true)\n", " $('#tooltip').empty() \n", " $('#tooltip').attr('style','')\n", " IPython.tooltip = new IPython.Tooltip()\n", " }\n", " }\n", " // add more button here if needed.\n", " ]);\n", " //\n", "\n", "});\n", "\n", "/*\n", "$([IPython.events]).on('notebook_loaded.Notebook', function(){\n", " IPython.toolbar.add_buttons_group([\n", " {\n", " 'label' : 'run qtconsole',\n", " 'icon' : 'ui-icon-calculator',\n", " 'callback': function(){IPython.notebook.kernel.execute('%qtconsole')}\n", " }\n", " ]);\n", "});\n", "*/\n", "\n", "//$([IPython.events]).on('notebook_loaded.Notebook', function(){\n", "// mobile_preset = []\n", "// var edit = function(div, cell) {\n", "// var button_container = $(div);\n", "// var button = $('
').button({icons:{primary:'ui-icon-pencil'}});\n", "// button.click(function(){\n", "// cell.edit()\n", "// })\n", "// button_container.append(button);\n", "// }\n", "//\n", "// IPython.CellToolbar.register_callback('mobile.edit',edit);\n", "// mobile_preset.push('mobile.edit');\n", "//\n", "// IPython.CellToolbar.register_preset('Mobile',mobile_preset);\n", "//});\n" ] } ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Note that `custom.js` is ment to be modified by user, when writing a script, you can define it in a separate file and add a line of configuration into `custom.js` that will fetch and execute the file." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "**Warning** : even if modification of `custom.js` take effect immediately after browser refresh (except if browser cache is aggressive), *creating* a file in `static/` directory need a **server restart**." ] }, { "cell_type": "heading", "level": 2, "metadata": {}, "source": [ "Exercise :" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ " - Create a `custom.js` in the right location with the following content:\n", "```javascript\n", "alert(\"hello world from custom.js\")\n", "```\n", "\n", " - Restart your server and open any notebook.\n", " - Be greeted by custom.js" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Have a look at [default custom.js](https://github.com/ipython/ipython/blob/1.x/IPython/html/static/custom/custom.js), to see it's content and some more explanation." ] }, { "cell_type": "heading", "level": 4, "metadata": {}, "source": [ "For the quick ones : " ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "We've seen above that you can change the autosave rate by using a magic. This is typically something I don't want to type everytime, and that I don't like to embed into my workwlow and documents. (reader don't care what my autosave time is), let's build an extension that allow to do it. " ] }, { "cell_type": "markdown", "metadata": { "foo": true }, "source": [ "Create a dropdow elemement in the toolbar (DOM `IPython.toolbar.element`), you will need \n", "\n", "- `IPython.notebook.set_autosave_interval(miliseconds)`\n", "- know that 1min = 60 sec, and 1 sec = 1000 ms" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "```javascript\n", "\n", "var label = jQuery('