and
// instead do things like draw to the HTML canvas. In this case though,
// the program changes the contents of the
based on the current
// slider value.
super.render()
this.content_el = div({style: {
textAlign: "center",
fontSize: "1.2em",
padding: "2px",
color: "#b88d8e",
backgroundColor: "#2a3153",
}})
this.shadow_el.appendChild(this.content_el)
this._update_text()
}
private _update_text(): void {
this.content_el.textContent = `${this.model.text}: ${this.model.slider.value}`
}
}
export namespace Custom {
export type Attrs = p.AttrsOf
export type Props = UIElement.Props & {
text: p.Property
slider: p.Property
}
}
export interface Custom extends Custom.Attrs {}
export class Custom extends UIElement {
properties: Custom.Props
__view_type__: CustomView
constructor(attrs?: Partial) {
super(attrs)
}
static {
// If there is an associated view, this is typically boilerplate.
this.prototype.default_view = CustomView
// The this.define() block adds corresponding "properties" to the JS
// model. These should normally line up 1-1 with the Python model
// class. Most property types have counterparts. For example,
// bokeh.core.properties.String will correspond to ``String`` in the
// JS implementation. Where JS lacks a given type, you can use
// ``p.Any`` as a "wildcard" property type.
this.define(({String, Ref}) => ({
text: [ String, "Custom text" ],
slider: [ Ref(Slider) ],
}))
}
}
"""
# ### Define the Python Model
#
# This JavaScript implementation is then attached to a corresponding Python Bokeh model:
# In[ ]:
from bokeh.core.properties import Instance, Required, String
class Custom(UIElement):
__implementation__ = TypeScript(CODE)
text = String(default="Custom text")
slider = Required(Instance(Slider))
# ### Use the Python Model
#
# Then the new model can be used seamlessly in the same way as any built-in Bokeh model:
# In[ ]:
from bokeh.io import show, output_file
from bokeh.layouts import column
from bokeh.models import Slider
slider = Slider(start=0, end=10, step=0.1, value=0, title="value")
custom = Custom(text="Special Slider Display", slider=slider)
layout = column(slider, custom)
show(layout)
# Necessary to explicitly reload BokehJS to pick up new extension code
output_notebook()
# In[ ]:
show(layout)
# # Next Section
# To explore the next topic in the appendices, click on this link: [A2 - Visualizing Big Data with Datashader](A2%20-%20Visualizing%20Big%20Data%20with%20Datashader.ipynb)
#
# To go back to the overview, click [here](00%20-%20Introduction%20and%20Setup.ipynb).
# In[ ]: