custom-draw-lines

custom-draw-lines.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from bokeh.core.properties import Instance\n",
    "from bokeh.io import reset_output, output_notebook, show\n",
    "from bokeh.layouts import column, widgetbox\n",
    "from bokeh.models import ColumnDataSource, Tool, PolyDrawTool, CustomJS\n",
    "from bokeh.plotting import figure\n",
    "from bokeh.util.compiler import TypeScript\n",
    "from bokeh.models.widgets import Button\n",
    "from bokeh import events\n",
    "\n",
    "output_notebook()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "callback_data = {}\n",
    "def plots_server(doc):\n",
    "    source = ColumnDataSource(data=dict(xs=[], ys=[]))\n",
    "    plot = figure(x_range=(0, 10), y_range=(0, 10))\n",
    "    plot.title.text = \"Draw with built-in tool\"\n",
    "    renderer = plot.multi_line('xs', 'ys', line_width=4, line_color='#000000', source=source, line_cap='round')\n",
    "    plot.add_tools(PolyDrawTool(renderers=[renderer]))\n",
    "    def button_callback():\n",
    "        callback_data['data'] = source.data\n",
    "    button = Button(label=\"copy data\")\n",
    "    button.on_click(button_callback)\n",
    "    doc.add_root(column(plot, widgetbox([button,])))\n",
    "show(plots_server)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "callback_data"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "ADD_LINE_JS = \"\"\"\n",
    "            var tool_name = 'test-line-plugin';\n",
    "            // Init globals.\n",
    "            if (window[tool_name] === undefined) {\n",
    "              window[tool_name] = {'state': 'none'};\n",
    "            }\n",
    "            var tool = window[tool_name];\n",
    "            // Shorthands.\n",
    "            var cx = cb_obj.x; // current mouse x\n",
    "            var cy = cb_obj.y; // current mouse y\n",
    "            var xs = data.data.xs; // x of lines\n",
    "            var ys = data.data.ys; // y of lines\n",
    "            // React to mouse events.\n",
    "              if (cb_obj.event_name == 'tap') {\n",
    "                if (tool.state == 'none') {\n",
    "                  // First tap: add start and end point of line.\n",
    "                  tool.state = 'adding';\n",
    "                  // Draw line.\n",
    "                  xs.push([cx, cx]);\n",
    "                  ys.push([cy, cy]);\n",
    "                  // Update the plot.\n",
    "                  data.change.emit();\n",
    "                } else if (tool.state == 'adding') {\n",
    "                  // Second tap: end point of line.\n",
    "                  tool.state = 'none';\n",
    "                  xs[xs.length-1][1] = cx;\n",
    "                  ys[ys.length-1][1] = cy;\n",
    "                  data.change.emit();\n",
    "                }\n",
    "              } else if (cb_obj.event_name == 'mousemove') {\n",
    "                if (tool.state == 'adding') {\n",
    "                  // Between first and second tap: intermediate end point.\n",
    "                  xs[xs.length-1][1] = cx;\n",
    "                  ys[ys.length-1][1] = cy;\n",
    "                  data.change.emit();\n",
    "                }\n",
    "              }\n",
    "        \"\"\"\n",
    "\n",
    "callback_data = {}\n",
    "def plots_server(doc):\n",
    "    source = ColumnDataSource(data=dict(xs=[], ys=[]))\n",
    "    plot = figure(x_range=(0, 10), y_range=(0, 10))\n",
    "    plot.title.text = \"Draw with custom js callbacks\"\n",
    "    renderer = plot.multi_line('xs', 'ys', line_width=4, line_color='#000000', source=source, line_cap='round')\n",
    "    plot.js_on_event(events.Tap, CustomJS(args=dict(data=source), code=ADD_LINE_JS))\n",
    "    plot.js_on_event(events.MouseMove, CustomJS(args=dict(data=source), code=ADD_LINE_JS))\n",
    "    def button_callback():\n",
    "        callback_data['data'] = source.data\n",
    "    button = Button(label=\"copy data\")\n",
    "    button.on_click(button_callback)\n",
    "    doc.add_root(column(plot, widgetbox([button,])))\n",
    "show(plots_server)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "callback_data"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "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.7.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}