from flask import Flask, jsonify
from jinja2 import Template
import numpy as np
from bokeh.plotting import figure
from bokeh.models import AjaxDataSource, Slider
from bokeh.models.callbacks import CustomJS
from bokeh.embed import components
from bokeh.layouts import column
from bokeh.resources import INLINE
app = Flask(__name__)
a, b = 1, 0
@app.route("/data", methods=['POST'])
def get_x():
    global a, b
    a += 1      # in real use case, I would like to get the value of the "slider1"
    b += 1      #                                                    ... "slider2"
    x = np.arange(100)
    y = a * np.sin(x) + b
    print(y)
    return jsonify(x=x.tolist(), y=y.tolist())
template = Template('''<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Streaming Example</title> {{ js_resources }} {{ css_resources }} </head> <body> {{ plot_div }} {{ plot_script }} </body> </html> ''')
@app.route("/")
def simple():
    source = AjaxDataSource(data_url="http://127.0.0.1:5000/data", polling_interval=None, mode='replace')
    fig = figure(title="Streaming Example")
    fig.line('x', 'y', source=source)
    callback = CustomJS(args=dict(source=source), code="""source.get_data(source.mode);""")
    slider1 = Slider(start=1, end=5, value=1, step=1, title="a")
    slider1.js_on_change('value', callback)
    slider2 = Slider(start=0, end=20, value=0, step=1, title="b")
    slider2.js_on_change('value', callback)
    layout = column(fig, slider1, slider2)
    script, div = components(layout, INLINE)
    html = template.render(plot_script=script, plot_div=div, js_resources=INLINE.render_js(), css_resources=INLINE.render_css())
    return html
app.run(debug=True)