Wildcarde/01_Readme.md

## 01_Readme.md

      
    Raw
  

              01_Readme.md
            
          
    This works in a python 3.6 environment with bokeh and flask installed.  To use this you need the following directory structure:
app/
 - templates/
   - hello.html
 - bokeh-slider.py
 - hello.py

After that you need to open two terminals at app/, in the first one you need to run the bokeh server with the command:
bokeh serve ./bokeh-sliders.py --allow-websocket-origin=127.0.0.1:5000
In the second one run the command:
python hello.py
After this the webpage should 'just work' by opening a webpage to http://localhost:5000

  
## bokeh-sliders.py
''' Present an interactive function explorer with slider widgets.
Scrub the sliders to change the properties of the ``sin`` curve, or
type into the title text box to update the title of the plot.
Use the ``bokeh serve`` command to run the example by executing:
    bokeh serve sliders.py
at your command prompt. Then navigate to the URL
    http://localhost:5006/sliders
in your browser.
'''
import numpy as np

from bokeh.io import curdoc
from bokeh.layouts import row, widgetbox
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import Slider, TextInput
from bokeh.plotting import figure

# Set up data
N = 200
x = np.linspace(0, 4*np.pi, N)
y = np.sin(x)
source = ColumnDataSource(data=dict(x=x, y=y))


# Set up plot
plot = figure(plot_height=400, plot_width=400, title="my sine wave",
              tools="crosshair,pan,reset,save,wheel_zoom",
              x_range=[0, 4*np.pi], y_range=[-2.5, 2.5])

plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6)


# Set up widgets
text = TextInput(title="title", value='my sine wave')
offset = Slider(title="offset", value=0.0, start=-5.0, end=5.0, step=0.1)
amplitude = Slider(title="amplitude", value=1.0, start=-5.0, end=5.0)
phase = Slider(title="phase", value=0.0, start=0.0, end=2*np.pi)
freq = Slider(title="frequency", value=1.0, start=0.1, end=5.1)


# Set up callbacks
def update_title(attrname, old, new):
    plot.title.text = text.value

text.on_change('value', update_title)

def update_data(attrname, old, new):

    # Get the current slider values
    a = amplitude.value
    b = offset.value
    w = phase.value
    k = freq.value

    # Generate the new curve
    x = np.linspace(0, 4*np.pi, N)
    y = a*np.sin(k*x + w) + b

    source.data = dict(x=x, y=y)

for w in [offset, amplitude, phase, freq]:
    w.on_change('value', update_data)


# Set up layouts and add to document
inputs = widgetbox(text, offset, amplitude, phase, freq)

curdoc().add_root(row(inputs, plot, width=800))
curdoc().title = "Sliders"

## hello.html
<html>
<head>
    <title>Website</title>
<style>
@import url(http://fonts.googleapis.com/css?family=Amatic+SC:700);


body{
    text-align: center;
}
h1{
    font-family: 'Amatic SC', cursive;
    font-weight: normal;
    color: #8ac640;
    font-size: 2.5em;
}

</style>

</head>
<body>
 <p>Flask embedding Bokeh test</p>
{{ bokS|indent(4)|safe }}

</body>
</html>

## hello.py
from flask import Flask, flash, redirect, render_template, request, session, abort
from bokeh.embed import autoload_server
app = Flask(__name__)

@app.route("/")
def hello():
    script=autoload_server(model=None,app_path="/bokeh-sliders",url="http://localhost:5006")
    return render_template('hello.html',bokS=script)

if __name__ == "__main__":
    app.run()
	''' Present an interactive function explorer with slider widgets.
	Scrub the sliders to change the properties of the ``sin`` curve, or
	type into the title text box to update the title of the plot.
	Use the ``bokeh serve`` command to run the example by executing:
	bokeh serve sliders.py
	at your command prompt. Then navigate to the URL
	http://localhost:5006/sliders
	in your browser.
	'''
	import numpy as np

	from bokeh.io import curdoc
	from bokeh.layouts import row, widgetbox
	from bokeh.models import ColumnDataSource
	from bokeh.models.widgets import Slider, TextInput
	from bokeh.plotting import figure

	# Set up data
	N = 200
	x = np.linspace(0, 4*np.pi, N)
	y = np.sin(x)
	source = ColumnDataSource(data=dict(x=x, y=y))


	# Set up plot
	plot = figure(plot_height=400, plot_width=400, title="my sine wave",
	tools="crosshair,pan,reset,save,wheel_zoom",
	x_range=[0, 4*np.pi], y_range=[-2.5, 2.5])

	plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6)


	# Set up widgets
	text = TextInput(title="title", value='my sine wave')
	offset = Slider(title="offset", value=0.0, start=-5.0, end=5.0, step=0.1)
	amplitude = Slider(title="amplitude", value=1.0, start=-5.0, end=5.0)
	phase = Slider(title="phase", value=0.0, start=0.0, end=2*np.pi)
	freq = Slider(title="frequency", value=1.0, start=0.1, end=5.1)


	# Set up callbacks
	def update_title(attrname, old, new):
	plot.title.text = text.value

	text.on_change('value', update_title)

	def update_data(attrname, old, new):

	# Get the current slider values
	a = amplitude.value
	b = offset.value
	w = phase.value
	k = freq.value

	# Generate the new curve
	x = np.linspace(0, 4*np.pi, N)
	y = anp.sin(kx + w) + b

	source.data = dict(x=x, y=y)

	for w in [offset, amplitude, phase, freq]:
	w.on_change('value', update_data)


	# Set up layouts and add to document
	inputs = widgetbox(text, offset, amplitude, phase, freq)

	curdoc().add_root(row(inputs, plot, width=800))
	curdoc().title = "Sliders"
	<html>
	<head>
	<title>Website</title>
	<style>
	@import url(http://fonts.googleapis.com/css?family=Amatic+SC:700);



	body{
	text-align: center;
	}
	h1{
	font-family: 'Amatic SC', cursive;
	font-weight: normal;
	color: #8ac640;
	font-size: 2.5em;
	}

	</style>

	</head>
	<body>
	<p>Flask embedding Bokeh test</p>
	{{ bokS\|indent(4)\|safe }}

	</body>
	</html>
	from flask import Flask, flash, redirect, render_template, request, session, abort
	from bokeh.embed import autoload_server
	app = Flask(__name__)

	@app.route("/")
	def hello():
	script=autoload_server(model=None,app_path="/bokeh-sliders",url="http://localhost:5006")
	return render_template('hello.html',bokS=script)

	if __name__ == "__main__":
	app.run()