` content, but we instead pick it up by decoding a `base64` encoded string which is embedded in the page, since this is what we used eventually for the main gallery since the method is more robust **Run** - Fetches code from the editor and sends it to the server and registers handlers for a successful as well as an error response. On receiving the response, the appropriate message boxes are displayed. If the response contains images, they are inserted after the editor **Revert** - Replaces the editor with a backup of the code snippet, which is created when the page loads for the first time Similarly if the code generated something on `STDOUT` or `STDERR`, it is received as part of the response and is inserted appropriately For **setting up a minimal front-end** start with a basic HTML page with a button for `Run` along with an area for the code to exist and one for the output we've used `

STDOUT

STDERR

``` [Source](https://github.com/sharky93/sharky93.github.io/blob/master/demo/index_min.html) We use the jQuery library for certain basic operations, add the following to `head` to include them. ``` ``` We put all the custom JS needed to make the site function in `demo_min.js` available [here](https://github.com/sharky93/sharky93.github.io/blob/master/demo/static/demo_min.js) **Run** - define the `runcode` function. It removes all output from previous runs, fetches code from the **textarea** - `getcode()`, converts it to a legible JSON format and sends an AJAX request to the server and defines handlers for the success and failure case. ``` $.ajax({ type: 'POST', // Provide correct Content-Type, so that Flask will know how to process it. contentType: 'application/json', // Encode your data as JSON. data: jcode, // This is the type of data you're expecting back from the server. dataType: 'json', url: 'http://ci.scipy.org:8000/runcode', success: function (e) { // remove animation, show Run $('.loading').hide(); handleoutput(e); $('#success-message').html("Success: " + e.timestamp + " UTC -5").show(); code_running = false; }, error: function (jqxhr, text_status, error_thrown) { $('.loading').hide(); error_code = jqxhr.status; error_text = jqxhr.statusText; var error_message = $('#error-message').html("Code " + error_code + " " + error_text).show(); code_running = false; } }); ``` [Source](https://github.com/sharky93/sharky93.github.io/blob/master/demo/static/demo_min.js#L56) `handleoutput` - TODO ## Demo [Here](http://sharky93.github.io/demo/index_min.html) is a very minimalist demo [Here](http://sharky93.github.io/demo/) is a spruced up version with more features, it uses the `Ace` editor for editing the code, clicking anywhere inside the code snippet region invokes the editor, pressing `Shift+Enter` runs the code, has the function to `Reload` the original code snippet [Here](https://github.com/sharky93/sharky93.github.io/tree/master/demo) is the code used in the demo Some explanation about **features** from the spruced up demo **Edit** - Extracts the `base64` encoded string, decodes and calls the `editcode` function which takes as input the code snippet ``` $('.editcode').bind('click', function () { var snippet = encodedcode.html(); snippet = Base64.decode(snippet); $('pre').replaceWith('

'); editcode(snippet); }); ``` The `editcode` function initializes the `Ace` editor and loads the snippet inside it, sets the mode as `Python`. We attach a handler to the editor which on `change`, changes the height of the editor making it resizable with content ``` editor = ace.edit("editor"); editor.on('change', function () { var doc = editor.getSession().getDocument(), // line height varies with zoom level and font size // correct way to find height is using the renderer line_height = editor.renderer.lineHeight, code_height = line_height * doc.getLength() + 'px'; $('#editor').height(code_height); editor.resize(); }); // place cursor at end to prevent entire code being selected // after using setValue (which is a feature) editor.setValue(snippet, 1); // editor.setTheme("ace/theme/monokai"); editor.getSession().setMode("ace/mode/python"); ``` Obviously a lot more can be achieved as desired. See the [interactive gallery](http://sharky93.github.io/docs/gallery/auto_examples/) ;) ## Configuration [config.py](https://github.com/scikit-image/skimage-docker/blob/master/config.py) has a few basic parameters defined which can be used to customize the server setup