Supply global function to multiple CustomJS callbacks?

Community Support
1

I’ve written a javascript dashboard for my new Hubitat hub. There is duplicated code in some of the javascript callbacks. Is there a way to share a function across callbacks.

I tried defining the function (“get_offset”) in one code snippet, but it was not defined for the other callbacks.

Richard

2

(in the meantime, I’ve put a copy of get_offset in both callbacks…)

3

The way to do this is to look into how to embed external resources into an html template using Jinja. Your external resources in this case aren’t a web link pointing some served library (e.g. CDN ), but just a string containing your function.

Most basic walkthrough here:

from bokeh.resources import Resources
from bokeh.embed import components
from jinja2 import Template

from bokeh.plotting import figure
from bokeh.models import CustomJS

#your function/string of js you want globally available on the document
js = '''
    function foo(){console.log('bar')}
    '''

#trigger some CustomJS calling it
f = figure()
f.scatter(x=[0,1],y=[0,1])
f.js_on_event('mousemove',CustomJS(code='''foo()'''))

script, div = components(f)
  
#modelled template off the standard bokeh one (i.e. using bokeh.plotting.save)

template = Template('''<!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="utf-8">
                <title>'''+'''My Title'''+'''</title>
                {{ resources }}
                {{ script }}
            </head>
            <body>
                <div>
                {{ div }}
                </div>
            </body>
        </html>
        ''')
resources = Resources().render()

#appending your resources to the existing resources 
resources = resources + '''\n<script type='text/javascript'> '''+js+'''</script>'''  
#put it together and write it
html = template.render(resources=resources,
                       script=script,
                       div=div)
with open('myOutput.html', mode="w", encoding="utf-8") as out:
    out.write(html)
1 Like
4

Thanks! I’ll check that out. Part of this exercise has been to learn more javascript and how it interplays with bokeh. This should help my general case of providing external code.

5

And it worked. Thanks again! github updated.

2 Likes
6

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.