, and instead do things\n",
" # like draw to the HTML canvas. In this case though, we change the\n",
" # contents of the
, based on the current slider value.\n",
" @$el.html(\"
#{ @model.text }: #{ @model.slider.value }
\")\n",
" @$('h1').css({ 'color': '#686d8e', 'background-color': '#2a3153' })\n",
"\n",
"class Custom extends LayoutDOM.Model\n",
"\n",
" # If there is an associated view, this is boilerplate.\n",
" default_view: CustomView\n",
"\n",
" # The ``type`` class attribute should generally match exactly the name\n",
" # of the corresponding Python class.\n",
" type: \"Custom\"\n",
"\n",
" # The @define block adds corresponding \"properties\" to the JS model. These\n",
" # should basically line up 1-1 with the Python model class. Most property\n",
" # types have counterparts, e.g. bokeh.core.properties.String will be\n",
" # p.String in the JS implementation. Where the JS type system is not yet\n",
" # as rich, you can use p.Any as a \"wildcard\" property type.\n",
" @define {\n",
" text: [ p.String ]\n",
" slider: [ p.Any ]\n",
" }\n",
"\n",
"# This is boilerplate. Every implementation should export a Model\n",
"# and (when applicable) also a View.\n",
"module.exports =\n",
" Model: Custom\n",
" View: CustomView\n",
"\"\"\""
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"This JavaScript implememtation is then attached to a corresponding Python Bokeh model:"
]
},
{
"cell_type": "code",
"execution_count": 24,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"from bokeh.core.properties import String, Instance\n",
"from bokeh.models import LayoutDOM, Slider\n",
"\n",
"class Custom(LayoutDOM):\n",
"\n",
" __implementation__ = JS_CODE\n",
"\n",
" text = String(default=\"Custom text\")\n",
"\n",
" slider = Instance(Slider)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Then the new model can be used seamlessly in the same way as any built-in Bokeh model:"
]
},
{
"cell_type": "code",
"execution_count": 25,
"metadata": {
"collapsed": false,
"scrolled": false
},
"outputs": [
{
"data": {
"text/html": [
"\n",
"\n",
"
\n",
""
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"from bokeh.io import show\n",
"from bokeh.layouts import column\n",
"from bokeh.models import Slider\n",
"\n",
"slider = Slider(start=0, end=10, step=0.1, value=0, title=\"value\")\n",
"\n",
"custom = Custom(text=\"Special Slider Display\", slider=slider)\n",
"\n",
"layout = column(slider, custom)\n",
"\n",
"show(layout)"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": []
}
],
"metadata": {
"anaconda-cloud": {},
"kernelspec": {
"display_name": "Python [default]",
"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.5.2"
}
},
"nbformat": 4,
"nbformat_minor": 0
}