This example demonstrated that Flexx apps can be run interactively in the notebook.



In [1]:

    
from flexx import app, ui, react
app.init_notebook()









    



Serving apps at http://localhost:49270/






    




Injecting Flexx JS and CSS



In [2]:

    
# A bit of boilerplate to import an example app
import sys
#sys.path.insert(0, r'C:\Users\almar\dev\flexx\examples\ui')
sys.path.insert(0, '/home/almar/dev/pylib/flexx/examples/ui')
from twente_temperature import Twente









    



new ws connection __default__

Any widget can be shown by using it as a cell output:



In [3]:

    
ui.Button(text='push me')

Because apps are really just Widgets, we can show our app in the same way:



In [4]:

    
t = Twente()
t

And we can interact with it, e.g. change input signals, and react to signal changes:



In [5]:

    
t.plot.line_width(10)



In [6]:

    
colors = ['#a00', '#0a0', '#00a', '#990', '#909', '#0990'] * 2 + ['#000']

@react.connect('t.month.value')
def _update_line_color(v):
    t.plot.line_color(colors[int(v)])
    t.plot.marker_color(colors[int(v)])