def flexx_run(loop):
"""
Function to start a thread containing the main loop of flexx.
"""
global flexx_app
asyncio.set_event_loop(loop)
event = flexx_app # flexx_app was initialized with an Event()
flexx_app = flx.launch(Example, loop=loop)
event.set()
flx.run()
# doc-export: Main
"""
Simple hello world following the recommended style of writing apps,
using a custom widget that is populated in its ``init()``.
"""
from flexx import flx
class Main(flx.Widget):
def init(self):
self.b1 = flx.Button(text='Hello')
self.b2 = flx.Button(text='World')
if __name__ == '__main__':
m = flx.launch(Main)
flx.run()
# doc-export: MultiApp
"""
Import apps from other example modules, and host these as widgets in a
single app.
"""
from flexx import flx
from flexxamples.demos.drawing import Drawing
from flexxamples.howtos.splitters import Split
from flexxamples.demos.twente import Twente
class MultiApp(flx.TabLayout):
def init(self):
Drawing(title='Drawing')
Split(title='Split')
Twente(title='Twente')
if __name__ == '__main__':
# This example is setup as a desktop app
flx.launch(MultiApp)
flx.run()
class ThemedForm(flx.Widget):
CSS = """
.flx-Button {
background: #9d9;
}
.flx-LineEdit {
border: 2px solid #9d9;
}
"""
def init(self):
with flx.HFix():
with flx.FormLayout() as self.form:
self.b1 = flx.LineEdit(title='Name:', text='Hola')
self.b2 = flx.LineEdit(title='Age:', text='Hello world')
self.b3 = flx.LineEdit(title='Favorite color:', text='Foo bar')
flx.Button(text='Submit')
with flx.FormLayout() as self.form:
self.b4 = flx.LineEdit(title='Name:', text='Hola')
self.b5 = flx.LineEdit(title='Age:', text='Hello world')
self.b6 = flx.LineEdit(title='Favorite color:', text='Foo bar')
flx.Button(text='Submit')
flx.Widget(flex=1) # Add a spacer
if __name__ == '__main__':
m = flx.launch(ThemedForm, 'app')
flx.run()
# doc-export: Main
"""
Simple hello world following the recommended style of writing apps,
using a custom widget that is populated in its ``init()``.
"""
from flexx import flx
class Main(flx.Widget):
def init(self):
self.b1 = flx.Button(text='Hello')
self.b2 = flx.Button(text='World')
if __name__ == '__main__':
m = flx.launch(Main)
flx.run()
with flx.VBox():
self.c1 = flx.ToggleButton(text='apple')
self.c2 = flx.ToggleButton(text='banana')
self.c3 = flx.ToggleButton(text='pear')
self.checklabel = flx.Label(text='...')
@flx.reaction('b1.pointer_click', 'b2.pointer_click', 'b3.pointer_click')
def _button_clicked(self, *events):
ev = events[-1]
self.buttonlabel.set_text('Clicked on the ' + ev.source.text)
@flx.reaction('r1.checked', 'r2.checked', 'r3.checked')
def _radio_changed(self, *events):
# There will also be events for radio buttons being unchecked, but
# Flexx ensures that the last event is for the one being checked
ev = events[-1]
self.radiolabel.set_text('Selected the ' + ev.source.text)
@flx.reaction('c1.checked', 'c2.checked', 'c3.checked')
def _check_changed(self, *events):
selected = [c.text for c in (self.c1, self.c2, self.c3) if c.checked]
if selected:
self.checklabel.set_text('Selected: ' + ', '.join(selected))
else:
self.checklabel.set_text('None selected')
if __name__ == '__main__':
m = flx.launch(Example)
flx.run()
# Associate assets needed by this app.
flx.assets.associate_asset(__name__, "http://code.jquery.com/jquery-1.10.2.js")
flx.assets.associate_asset(__name__, "http://code.jquery.com/ui/1.11.4/jquery-ui.js")
flx.assets.associate_asset(__name__,
"http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css")
class DatePicker(flx.Widget):
def _create_dom(self):
global window
node = window.document.createElement('input')
RawJS('$')(node).datepicker()
return node
class Example(flx.Widget):
def init(self):
with flx.FormLayout():
self.start = DatePicker(title='Start date')
self.end = DatePicker(title='End date')
flx.Widget(flex=1)
if __name__ == '__main__':
m = flx.launch(Example, 'app')
flx.run()
hierachy. Instead of using the star notation to select all children,
one can use a double-star to select also the children's children, and
their children, etc.
"""
from flexx import flx
class DeepEventConnections(flx.Widget):
def init(self):
# Put a label and some sliders deep in the hierarchy
with flx.VBox():
self.label = flx.Label()
with flx.HFix(flex=1):
for j in range(2):
with flx.VBox(flex=1):
for i in range(5):
flx.Slider(value=i / 5)
@flx.reaction('!children**.value')
def on_slider_change(self, *events):
for ev in events:
self.label.set_text('Slider %s changed to %f' %
(ev.source.id, ev.new_value))
if __name__ == '__main__':
m = flx.launch(DeepEventConnections)
flx.run()
# flx.Widget(flex=1) # spacer widget
with flx.VFix(style='border:1px solid #777;'):
flx.Label(text='Flex 0 0 0 (space divided equally)', style='')
with flx.HFix():
self.b1 = flx.Button(text='Hi')
self.b2 = flx.Button(text='Helloooo world!')
self.b3 = flx.Button(text='Foo bar')
flx.Label(text='Flex 1 1 1', style='')
with flx.HFix():
self.b1 = flx.Button(flex=1, text='Hi')
self.b2 = flx.Button(flex=1, text='Helloooo world!')
self.b3 = flx.Button(flex=1, text='Foo bar')
flx.Label(text='Flex 1 0 3 (the widget with zero collapses')
with flx.HFix():
self.b1 = flx.Button(flex=1, text='Hi')
self.b2 = flx.Button(flex=0, text='Helloooo world!')
self.b3 = flx.Button(flex=3, text='Foo bar')
# If we would put a spacer widget with flex 1 here, the
# above widgets would collapse due to their zero flex value.
if __name__ == '__main__':
m = flx.launch(AppLayoutExample)
flx.run()
with flx.HSplit():
self.label = flx.Label(flex=1, style='overflow-y: scroll;')
with flx.TreeWidget(flex=1, max_selected=1) as self.tree:
for t in ['foo', 'bar', 'spam', 'eggs']:
with flx.TreeItem(text=t, checked=None):
for i in range(4):
item2 = flx.TreeItem(text=t + ' %i' % i, checked=False)
if i == 2:
with item2:
flx.TreeItem(title='A', text='more info on A')
flx.TreeItem(title='B', text='more info on B')
@flx.reaction('tree.children**.checked', 'tree.children**.selected',
'tree.children**.collapsed')
def on_event(self, *events):
for ev in events:
id = ev.source.title or ev.source.text
if ev.new_value:
text = id + ' was ' + ev.type
else:
text = id + ' was ' + 'un-' + ev.type
self.label.set_html(text + '<br />' + self.label.html)
if __name__ == '__main__':
m = flx.launch(Example)
flx.run()
"""
from flexx import flx
class SineExample(flx.Widget):
def init(self):
time = [i/100 for i in range(100)]
with flx.VBox():
with flx.HBox():
flx.Label(text='Frequency:')
self.slider1 = flx.Slider(min=1, max=10, value=5, flex=1)
flx.Label(text='Phase:')
self.slider2 = flx.Slider(min=0, max=6, value=0, flex=1)
self.plot = flx.PlotWidget(flex=1, xdata=time, xlabel='time',
ylabel='amplitude', title='a sinusoid')
@flx.reaction
def __update_amplitude(self, *events):
global Math
freq, phase = self.slider1.value, self.slider2.value
ydata = []
for x in self.plot.xdata:
ydata.append(Math.sin(freq*x*2*Math.PI+phase))
self.plot.set_data(self.plot.xdata, ydata)
if __name__ == '__main__':
m = flx.launch(SineExample)
flx.run()
Note that one can also open a webpage from Python:
import webbrowser
webbrowser.open('http://python.org')
"""
from flexx import flx
class Redirect(flx.Widget):
def init(self):
self.but1 = flx.Button(text='Redirect')
self.but2 = flx.Button(text='Open new page')
@flx.reaction('but1.pointer_click')
def on_redirect(self, *events):
global window
window.location.href = 'http://python.org' # allow going back
# window.location.replace('http://python.org') # hard redirect
@flx.reaction('but2.pointer_click')
def on_opennew(self, *events):
global window
window.open('http://python.org', '_blank')
if __name__ == '__main__':
m = flx.launch(Redirect, 'browser')
flx.start()
'locations': country_codes,
'marker': {
'size': [v**0.5 for v in country_gdps],
'color': country_gdps,
'cmin': 0,
'cmax': 2000,
'colorscale': 'Viridis',
'colorbar': {'title': 'GDP'},
'line': {'color': 'black'}
},
'name': 'Europe GDP'
}]
layout = {
'geo': {
'scope': 'europe',
'resolution': 50
}
}
class PlotlyGeoDemo(flx.HBox):
def init(self):
flx.PlotlyWidget(data=data, layout=layout)
if __name__ == '__main__':
flx.launch(PlotlyGeoDemo)
flx.run()
class CodeEditor(flx.Widget):
""" A CodeEditor widget based on Ace.
"""
CSS = """
.flx-CodeEditor > .ace {
width: 100%;
height: 100%;
}
"""
def init(self):
global window
# https://ace.c9.io/#nav=api
self.ace = window.ace.edit(self.node, "editor")
self.ace.setValue("import os\n\ndirs = os.walk")
self.ace.navigateFileEnd() # otherwise all lines highlighted
self.ace.setTheme("ace/theme/solarized_dark")
self.ace.getSession().setMode("ace/mode/python")
@flx.reaction('size')
def __on_size(self, *events):
self.ace.resize()
if __name__ == '__main__':
flx.launch(CodeEditor, 'app')
flx.run()
def init(self):
self.view = SendDataView()
self.view.set_data(data_array)
class SendDataView(flx.Widget):
""" A widget that displays array data.
"""
def init(self):
self.label = flx.Label()
self.apply_style('overflow-y: scroll;') # enable scrolling
@flx.action
def set_data(self, data):
# We receive the data as a typed array.
# If we would send raw bytes, we would receive it as a DataView, which
# we can map to e.g. a Int16Array like so:
# data = Int16Array(blob.buffer, blob.byteOffset, blob.byteLength/2)
# Show the data as text. We could also e.g. plot it.
text = ['%i: %f<br />' % (i, data[i]) for i in range(len(data))]
header = 'This data (%i elements) was send in binary form:<br />' % len(data)
self.label.set_html(header + ''.join(text))
if __name__ == '__main__':
m = flx.launch(SendData, 'app')
flx.run()
self.ab = APPBox(flex=0)
self.fb = FlowBox(flex=0)
self.show = ShowBox(flex=1)
@testpmd.reaction('!output')
def print_testpmd_output(self, *events):
self.show.input.set_disabled(not testpmd.alive)
for ev in events:
for line in ev.buffer:
self.show.testpmdout.add_line(line)
if __name__ == '__main__':
if sys.argv[-1] in ["--help", "-h"]:
print("""
Start Testpmd web GUI in server mode.
Please open URL in broswer Chrome or Firefox
Options:
--flexx-hostname=<host> Host/IP to listen on
--flexx-port=<port> Port number to listen on
--app: Start as application single user mode, quit once page close.
--help(-h) Show this help
""")
elif sys.argv[-1] == "--app":
flx.launch(TestpmdUI)
flx.run()
else:
app.serve(TestpmdUI)
app.start()
"""
Mmmm, cookies ...
Small example for using cookies to (securely) store user data accross sessions.
"""
from flexx import flx
class Cookies(flx.PyWidget):
def init(self):
with flx.Widget():
flx.Label(text='Refreshing the page should '
'maintain the value of the line edit.')
self.edit = flx.LineEdit(placeholder_text='username',
text=self.session.get_cookie('username', ''))
@flx.reaction('edit.text')
def _update_cookie(self, *events):
self.session.set_cookie('username', self.edit.text)
if __name__ == '__main__':
m = flx.launch(Cookies, 'browser')
flx.start()
@flx.reaction('btndraw.pointer_click')
def handle_drawing(self, *events):
self.coords.set_text("Drawing..")
self.map.add_drawing_interaction()
@flx.reaction('btna.pointer_click')
def handle_vector_layers(self, *events):
self.coords.set_text("Adding GEOJSON")
self.map.add_vector_layer()
@flx.reaction('btnosm.pointer_click')
def handle_osm_layers(self, *events):
self.coords.set_text("Adding Openstreetmap")
self.map.add_osm_layers()
@flx.reaction('btnr.pointer_click')
def handle_remove_layers(self, *events):
self.map.remove_layers()
self.coords.set_text("Removing GEOJSON")
@flx.reaction('map.pointer_event')
def map_click(self, *events):
ev = events[-1]
coord = ev['event']['coordinate']
self.coords.set_text("Clicking on coordinate " + str(coord))
if __name__ == '__main__':
flx.launch(MainWidget, 'firefox-browser')
flx.run()
'locations': country_codes,
'marker': {
'size': [v**0.5 for v in country_gdps],
'color': country_gdps,
'cmin': 0,
'cmax': 2000,
'colorscale': 'Viridis',
'colorbar': {'title': 'GDP'},
'line': {'color': 'black'}
},
'name': 'Europe GDP'
}]
layout = {
'geo': {
'scope': 'europe',
'resolution': 50
}
}
class PlotlyGeoDemo(flx.HBox):
def init(self):
flx.PlotlyWidget(data=data, layout=layout)
if __name__ == '__main__':
flx.launch(PlotlyGeoDemo)
flx.run()
degree -= 1
return y
# Import a (PScript-compatible) function from another module. In this case
# Flexx can tell where it was defined and put it in its own module. See
# the page source.
from html import escape
class UsingPython(flx.Widget):
def init(self):
# A rather boring way to present the info. The point is that
# we're using all sorts of Python stuff here, that is automatically
# converted for us.
lines = []
lines.append('This JS was generated from Python ' + version)
lines.append('Person %s is %i years old' % (info['name'], info['age']))
lines.append('Evaling 4*x**2 + 5*x + 6 with x=4: ' + poly(4, 4, 5, 6))
lines.append('... and with x=12: ' + poly(12, 4, 5, 6))
lines.append('String with escaped html: ' + escape('html <tags>!'))
lines.append('String with escaped html: ' + escape('Woezel & Pip'))
self.label = flx.Label(wrap=0, html='<br />'.join(lines))
if __name__ == '__main__':
m = flx.launch(UsingPython, 'browser')
flx.run()
"""
Example of VBox, HBox and StackLayout
"""
from flexx import event, flx
class Example(flx.Widget):
def init(self):
with flx.VBox():
with flx.HBox():
self.buta = flx.Button(text='red')
self.butb = flx.Button(text='green')
self.butc = flx.Button(text='blue')
flx.Widget(flex=1) # space filler
with flx.StackLayout(flex=1) as self.stack:
self.buta.w = flx.Widget(style='background:#a00;')
self.butb.w = flx.Widget(style='background:#0a0;')
self.butc.w = flx.Widget(style='background:#00a;')
@event.reaction('buta.pointer_down', 'butb.pointer_down',
'butc.pointer_down')
def _stacked_current(self, *events):
button = events[-1].source
self.stack.set_current(button.w)
if __name__ == '__main__':
m = flx.launch(Example, 'default-browser')
flx.run()
one can use a double-star to select also the children's children, and
their children, etc.
"""
from flexx import flx
class DeepEventConnections(flx.Widget):
def init(self):
# Put a label and some sliders deep in the hierarchy
with flx.VBox():
self.label = flx.Label()
with flx.HFix(flex=1):
for j in range(2):
with flx.VBox(flex=1):
for i in range(5):
flx.Slider(value=i/5)
@flx.reaction('!children**.value')
def on_slider_change(self, *events):
for ev in events:
self.label.set_text('Slider %s changed to %f' %
(ev.source.id, ev.new_value))
if __name__ == '__main__':
m = flx.launch(DeepEventConnections)
flx.run()
Note that one can also open a webpage from Python:
import webbrowser
webbrowser.open('http://python.org')
"""
from flexx import flx
class Redirect(flx.Widget):
def init(self):
self.but1 = flx.Button(text='Redirect')
self.but2 = flx.Button(text='Open new page')
@flx.reaction('but1.pointer_click')
def on_redirect(self, *events):
global window
window.location.href = 'http://python.org' # allow going back
# window.location.replace('http://python.org') # hard redirect
@flx.reaction('but2.pointer_click')
def on_opennew(self, *events):
global window
window.open('http://python.org', '_blank')
if __name__ == '__main__':
m = flx.launch(Redirect, 'browser')
flx.start()
class KeyboardControlsTester(flx.Widget):
def init(self):
combo_options = ['Paris', 'New York', 'Enschede', 'Tokio']
with flx.HBox():
self.tree = TreeWithControls(flex=1, max_selected=1)
with flx.VBox(flex=1):
self.combo = flx.ComboBox(options=combo_options, editable=True)
flx.Widget(flex=1) # combobox needs space below it to show dropdown
with self.tree:
for cat in ('foo', 'bar', 'spam'):
with flx.TreeItem(text=cat):
for name in ('Martin', 'Kees', 'Hans'):
item = flx.TreeItem(title=name)
item.set_checked(cat=='foo' or None)
@flx.reaction('combo.text')
def _combo_text_changed(self, *events):
for ev in events:
print('combo text is now', ev.new_value)
if __name__ == '__main__':
m = flx.launch(KeyboardControlsTester)
flx.run()
(r"/videos/(.*)", StaticFileHandler, {"path": dirname}),
])
class VideoViewer(flx.Widget):
""" A simple videoviewer that displays a list of videos found on the
server's computer, plus a few online videos. Note that not all videos
may be playable in HTML5.
"""
def init(self):
with flx.HSplit():
with flx.TreeWidget(max_selected=1, flex=1) as self.videolist:
for name in sorted(videos):
flx.TreeItem(text=name)
self.player = flx.VideoWidget(flex=5)
@flx.reaction('videolist.children*.selected')
def on_select(self, *events):
for ev in events:
if ev.source.selected:
fname = ev.source.text
self.player.set_source(videos[fname])
if __name__ == '__main__':
m = flx.launch(VideoViewer)
flx.run()
self.highlight_show(-1)
class KeyboardControlsTester(flx.Widget):
def init(self):
combo_options = ['Paris', 'New York', 'Enschede', 'Tokio']
with flx.HBox():
self.tree = TreeWithControls(flex=1, max_selected=1)
self.combo = flx.ComboBox(flex=1,
options=combo_options,
editable=True)
with self.tree:
for cat in ('foo', 'bar', 'spam'):
with flx.TreeItem(text=cat):
for name in ('Martin', 'Kees', 'Hans'):
item = flx.TreeItem(title=name)
item.set_checked(cat == 'foo' or None)
@flx.reaction('combo.text')
def _combo_text_changed(self, *events):
for ev in events:
print('combo text is now', ev.new_value)
if __name__ == '__main__':
m = flx.launch(KeyboardControlsTester)
flx.run()
This example uses Flexx to collect and compile the Python code to JS modules,
and provide a HTML5 canvas without having to write HTML.
"""
from flexx import flx
from wgpu.gui.flexx import WgpuCanvas # WgpuCanvas is a flx.Canvas subclass
import wgpu.backends.js # noqa: F401, Select JS backend
# Import the (async) function that we must call to run the visualization
import triangle
# todo: how to serialize the shaders? base64 or via a custom hook?
triangle.vertex_shader = "something that flexx can serialize"
triangle.fragment_shader = "something that flexx can serialize"
class Example(flx.Widget):
def init(self):
# All of this gets executed in JS
super().init()
with flx.HBox():
self.canvas = WgpuCanvas()
triangle.main(self.canvas)
if __name__ == "__main__":
m = flx.launch(Example, "chrome-browser")
flx.run()
y = node.y - quad.point.y
s = Math.sqrt(x * x + y * y)
r = node.radius + quad.point.radius
if (s < r):
s = (s - r) / s * .5
x *= s
y *= s
node.x -= x
node.y -= y
quad.point.x += x
quad.point.y += y
return x1 > nx2 or x2 < nx1 or y1 > ny2 or y2 < ny1
return func
class CollisionDemo(flx.Widget):
def init(self):
with flx.VSplit():
with flx.HSplit():
CollisionWidget()
CollisionWidget()
with flx.HSplit():
CollisionWidget()
CollisionWidget()
if __name__ == '__main__':
flx.launch(CollisionDemo, 'app')
flx.run()
def init(self):
with MyHBox():
with MyVBox(flex=2):
with MyVBox(flex=4, spacing=30):
flx.Widget(flex=1, css_class='white')
flx.Widget(flex=1, css_class='white')
with MyVBox(flex=2, css_class='blue'):
flx.Widget(flex=1, css_class='edge')
flx.Widget(flex=1, css_class='edge')
with MyVBox(flex=6):
with MyVBox(flex=4, spacing=30, css_class='red'):
flx.Widget(flex=1, css_class='edge')
flx.Widget(flex=1, css_class='edge')
with MyHBox(flex=2):
flx.Widget(flex=6, css_class='white')
with MyVBox(flex=1):
flx.Widget(flex=1, css_class='white')
flx.Widget(flex=1, css_class='yellow')
if __name__ == '__main__':
m = flx.launch(Mondriaan, 'app')
flx.run()
def init(self):
with flx.VBox(flex=0):
with flx.VBox(flex=0):
src = "https://www.designyourway.net/blog/wp-content/uploads/2019/05/iPad-Pro-wallpaper-54-700x700.jpg"
self.img = flx.ImageWidget(flex=0, stretch=False, source=src)
self.img.set_minsize(500, 500)
self.img.set_maxsize(500, 500)
with flx.HBox(flex=1):
self.b1 = flx.Button(text="Yes")
self.void = flx.Label()
self.b2 = flx.Button(text="No")
self.b1.set_maxsize(40, 40)
self.b2.set_maxsize(40, 40)
self.void.set_maxsize(420, 40)
@flx.reaction("b1.pointer_click")
def b1_clicked(self, *events):
print("yes")
self.img.set_source(
"https://img.memecdn.com/ravioli-ravioli-don-amp-039-t-lewd-the-wendy--lini_o_7165003.jpg"
)
@flx.reaction("b2.pointer_click")
def b2_clicked(self, *events):
print("no")
if __name__ == '__main__':
m = flx.launch(Jank, "app", title="Meme-Beam", size=(510, 540))
flx.run()
degree -= 1
return y
# Import a (PScript-compatible) function from another module. In this case
# Flexx can tell where it was defined and put it in its own module. See
# the page source.
from html import escape
class UsingPython(flx.Widget):
def init(self):
# A rather boring way to present the info. The point is that
# we're using all sorts of Python stuff here, that is automatically
# converted for us.
lines = []
lines.append('This JS was generated from Python ' + version)
lines.append('Person %s is %i years old' % (info['name'], info['age']))
lines.append('Evaling 4*x**2 + 5*x + 6 with x=4: ' + poly(4, 4, 5, 6))
lines.append('... and with x=12: ' + poly(12, 4, 5, 6))
lines.append('String with escaped html: ' + escape('html <tags>!'))
lines.append('String with escaped html: ' + escape('Woezel & Pip'))
self.label = flx.Label(wrap=0, html='<br />'.join(lines))
if __name__ == '__main__':
m = flx.launch(UsingPython, 'browser')
flx.run()
# doc-export: ScrollExample
"""
Example that shows how to make the content of a widget scrollable.
It comes down to setting a style attribute: "overflow-y: auto;".
"""
from flexx import flx
class ScrollExample(flx.Widget):
CSS = """
.flx-ScrollExample {
overflow-y: scroll; // scroll or auto
}
"""
def init(self):
with flx.Widget():
for i in range(100):
flx.Button(text="button " + str(i))
if __name__ == '__main__':
m = flx.launch(ScrollExample)
flx.run()
Panel(text='C is a bit longer', flex=3)
with flx.VBox(flex=1):
flx.Label(html='<b>Fix mode</b> (high level layout)')
flx.Label(text='flex: 1, sub-flexes: 0, 0, 0')
with flx.HFix(flex=1):
Panel(text='A', flex=0)
Panel(text='B', flex=0)
Panel(text='C is a bit longer', flex=0)
flx.Label(text='flex: 0 (collapses), sub-flexes: 1, 1, 1')
with flx.HFix(flex=0):
Panel(text='A', flex=1, style='min-height:5px;')
Panel(text='B', flex=1)
Panel(text='C is a bit longer', flex=1)
flx.Label(text='flex: 1, sub-flexes: 1, 0, 2')
with flx.HFix(flex=1):
Panel(text='A', flex=1)
Panel(text='B', flex=0)
Panel(text='C is a bit longer', flex=2)
flx.Label(text='flex: 2, sub-flexes: 1, 2, 3')
with flx.HFix(flex=2):
Panel(text='A', flex=1)
Panel(text='B', flex=2)
Panel(text='C is a bit longer', flex=3)
if __name__ == '__main__':
m = flx.launch(Boxes)
flx.run()
{'class': 'btn btn-primary mb-2',
'onclick': self._button_clicked
},
'Submit'
),
]
# Create virtual DOM nodes for all persons. We use bootstrap cards
card_nodes = []
for name, info in self.persons:
person_node = flx.create_element('div', {'class': 'card'},
flx.create_element('div', {'class': 'card-body'},
flx.create_element('h5', {'class': 'card-title'}, name),
flx.create_element('p', {'class': 'card-text'}, info),
)
)
card_nodes.append(person_node)
# Compose finaly DOM tree
return flx.create_element('div', {},
flx.create_element('div',
{'class': 'form-inline'},
form_nodes
),
*card_nodes)
if __name__ == '__main__':
m = flx.launch(Example, 'firefox-browser')
flx.run()
with flx.VFix(style='border:1px solid #777;'):
flx.Label(text='Flex 0 0 0 (space divided equally)',
style='')
with flx.HFix():
self.b1 = flx.Button(text='Hi')
self.b2 = flx.Button(text='Helloooo world!')
self.b3 = flx.Button(text='Foo bar')
flx.Label(text='Flex 1 1 1', style='')
with flx.HFix():
self.b1 = flx.Button(flex=1, text='Hi')
self.b2 = flx.Button(flex=1, text='Helloooo world!')
self.b3 = flx.Button(flex=1, text='Foo bar')
flx.Label(
text='Flex 1 0 3 (the widget with zero collapses')
with flx.HFix():
self.b1 = flx.Button(flex=1, text='Hi')
self.b2 = flx.Button(flex=0, text='Helloooo world!')
self.b3 = flx.Button(flex=3, text='Foo bar')
# If we would put a spacer widget with flex 1 here, the
# above widgets would collapse due to their zero flex value.
if __name__ == '__main__':
m = flx.launch(AppLayoutExample)
flx.run()
'rate': 10.0
})
# Setup the URDF client.
self.urdfClient = window.ROS3D.UrdfClient({
'param':
self.robot_description,
'path':
'http://' + self.host_ip + ':' + str(self.resources_port),
'ros':
self.ros,
'tfClient':
self.tfClient,
'rootObject':
self.viewer.scene,
'loader':
window.ROS3D.COLLADA_LOADER_2
})
self.initialised = True
@flx.reaction('size')
def __on_size(self, *events):
if self.viewer:
self.viewer.resize(window.innerWidth, window.innerHeight)
if __name__ == '__main__':
flx.launch(RobotModelWidget, 'app')
flx.run()
"""
def init(self):
self.view = SendDataView()
self.view.set_data(data_array)
class SendDataView(flx.Widget):
""" A widget that displays array data.
"""
def init(self):
self.label = flx.Label()
self.apply_style('overflow-y: scroll;') # enable scrolling
@flx.action
def set_data(self, data):
# We receive the data as a typed array.
# If we would send raw bytes, we would receive it as a DataView, which
# we can map to e.g. a Int16Array like so:
# data = Int16Array(blob.buffer, blob.byteOffset, blob.byteLength/2)
# Show the data as text. We could also e.g. plot it.
text = ['%i: %f<br />' % (i, data[i]) for i in range(len(data))]
header = 'This data (%i elements) was send in binary form:<br />' % len(
data)
self.label.set_html(header + ''.join(text))
if __name__ == '__main__':
m = flx.launch(SendData, 'app')
flx.run()
if i == 2:
with item2:
flx.TreeItem(title='A', text='more info on A')
flx.TreeItem(title='B', text='more info on B')
#@+node:ekr.20181110170328.3: *3* tree.on_event
@flx.reaction(
'tree.children**.checked',
'tree.children**.selected',
'tree.children**.collapsed',
)
def on_event(self, *events):
for ev in events:
# print(ev.source, ev.type)
id_ = ev.source.title or ev.source.text
kind = '' if ev.new_value else 'un-'
text = '%10s: %s' % (id_, kind + ev.type)
assert text
### self.label.set_html(text + '<br />' + self.label.html)
#@-others
#@-others
if __name__ == '__main__':
flx.launch(LeoMainWindow)
flx.run()
# # Runs in browser.
# # `python -m flexx stop 49190` stops the server.
# flx.App(LeoWapp).launch('firefox-browser')
# flx.start()
#@-leo
}, 'Last name')),
flx.create_element('button', {
'class': 'btn btn-primary mb-2',
'onclick': self._button_clicked
}, 'Submit'),
]
# Create virtual DOM nodes for all persons. We use bootstrap cards
card_nodes = []
for name, info in self.persons:
person_node = flx.create_element(
'div', {'class': 'card'},
flx.create_element(
'div',
{'class': 'card-body'},
flx.create_element('h5', {'class': 'card-title'}, name),
flx.create_element('p', {'class': 'card-text'}, info),
))
card_nodes.append(person_node)
# Compose finaly DOM tree
return flx.create_element(
'div', {},
flx.create_element('div', {'class': 'form-inline'}, form_nodes),
*card_nodes)
if __name__ == '__main__':
m = flx.launch(Example, 'firefox-browser')
# flx.run()
flx.start()
Panel(text='C is a bit longer', flex=3)
with flx.VBox(flex=1):
flx.Label(html='<b>Fix mode</b> (high level layout)')
flx.Label(text='flex: 1, sub-flexes: 0, 0, 0')
with flx.HFix(flex=1):
Panel(text='A', flex=0)
Panel(text='B', flex=0)
Panel(text='C is a bit longer', flex=0)
flx.Label(text='flex: 0 (collapses), sub-flexes: 1, 1, 1')
with flx.HFix(flex=0):
Panel(text='A', flex=1, style='min-height:5px;')
Panel(text='B', flex=1)
Panel(text='C is a bit longer', flex=1)
flx.Label(text='flex: 1, sub-flexes: 1, 0, 2')
with flx.HFix(flex=1):
Panel(text='A', flex=1)
Panel(text='B', flex=0)
Panel(text='C is a bit longer', flex=2)
flx.Label(text='flex: 2, sub-flexes: 1, 2, 3')
with flx.HFix(flex=2):
Panel(text='A', flex=1)
Panel(text='B', flex=2)
Panel(text='C is a bit longer', flex=3)
if __name__ == '__main__':
m = flx.launch(Boxes)
flx.run()
@flx.reaction('btna.pointer_click')
def handle_seamap_add(self, *events):
self.leaflet.add_layer('http://t1.openseamap.org/seamark/', 'OpenSeaMap')
@flx.reaction('btnr.pointer_click')
def handle_seamap_remove(self, *events):
self.leaflet.remove_layer('http://t1.openseamap.org/seamark/', 'OpenSeaMap')
# @flx.reaction('cbs.checked', 'cbl.checked')
# def handle_checkboxes(self, *events):
# self.leaflet.set_show_scale(self.cbs.checked
# self.leaflet.show_layers = self.cbl.checked
@flx.reaction('leaflet.pointer_event')
def handle_leaflet_mouse(self, *events):
global L
ev = events[-1]
latlng = tuple(ev['latlng'])
flx.Label(text='%f, %f' % (int(100*latlng[0])/100, int(100*latlng[1])/100),
parent=self.list)
latlng = tuple(ev['latlng'])
if ev['event'] == 'click':
m = L.marker(ev['latlng'])
m.bindTooltip('%f, %f' % (latlng[0], latlng[1]))
m.addTo(self.leaflet.map)
if __name__ == '__main__':
flx.launch(LeafletExample, 'firefox')
flx.run()
@flx.reaction('btna.pointer_click')
def handle_seamap_add(self, *events):
self.leaflet.add_layer('http://t1.openseamap.org/seamark/', 'OpenSeaMap')
@flx.reaction('btnr.pointer_click')
def handle_seamap_remove(self, *events):
self.leaflet.remove_layer('http://t1.openseamap.org/seamark/', 'OpenSeaMap')
# @flx.reaction('cbs.checked', 'cbl.checked')
# def handle_checkboxes(self, *events):
# self.leaflet.set_show_scale(self.cbs.checked
# self.leaflet.show_layers = self.cbl.checked
@flx.reaction('leaflet.pointer_event')
def handle_leaflet_mouse(self, *events):
global L
ev = events[-1]
latlng = tuple(ev['latlng'])
flx.Label(text='%f, %f' % (int(100*latlng[0])/100, int(100*latlng[1])/100),
parent=self.list)
latlng = tuple(ev['latlng'])
if ev['event'] == 'click':
m = L.marker(ev['latlng'])
m.bindTooltip('%f, %f' % (latlng[0], latlng[1]))
m.addTo(self.leaflet.map)
if __name__ == '__main__':
flx.launch(LeafletExample, 'firefox')
flx.run()
flx.TreeItem(title='B',
text='more info on B')
#@+node:ekr.20181110170328.3: *3* tree.on_event
@flx.reaction(
'tree.children**.checked',
'tree.children**.selected',
'tree.children**.collapsed',
)
def on_event(self, *events):
for ev in events:
# print(ev.source, ev.type)
id_ = ev.source.title or ev.source.text
kind = '' if ev.new_value else 'un-'
text = '%10s: %s' % (id_, kind + ev.type)
assert text
### self.label.set_html(text + '<br />' + self.label.html)
#@-others
#@-others
if __name__ == '__main__':
flx.launch(LeoMainWindow)
flx.run()
# # Runs in browser.
# # `python -m flexx stop 49190` stops the server.
# flx.App(LeoWapp).launch('firefox-browser')
# flx.start()
#@-leo
def init(self):
self.amp = flx.Slider(title='Amplitude', max=2, value=1)
self.freq = flx.Slider(title='Frequency', max=10, value=5)
self.phase = flx.Slider(title='Phase', max=3, value=1)
@flx.reaction
def _update_sine(self):
global window
amp, freq, phase = self.amp.value, self.freq.value, self.phase.value
# Get reference to data source
ds = None
plot2 = self.parent.children[1].children[0]
plot = plot2.plot
if plot:
for ren in plot.model.renderers.values():
if ren.data_source:
ds = ren.data_source
break
# Update
if ds:
ds.data.y = [
amp * window.Math.sin(x * freq + phase) for x in ds.data.x
]
ds.change.emit() # or trigger('change') in older versions
if __name__ == '__main__':
m = flx.launch(BokehExample, 'app')
flx.run()
"""
Simple use of a the markdown widget,
using a custom widget that is populated in its ``init()``.
"""
from flexx import flx
class Example(flx.Widget):
def init(self):
content = "# Welcome\n\n" \
"This flexx app is now served with flask! "
flx.Markdown(content=content, style='background:#EAECFF;')
if __name__ == '__main__':
m = flx.launch(Example, 'default-browser', backend='flask')
flx.run()
def init(self):
with flx.VBox():
with flx.HBox():
self.first_edit = flx.LineEdit(placeholder_text='first name',
text='Jane')
self.last_edit = flx.LineEdit(placeholder_text='last name',
text='Doe')
flx.Widget(flex=1) # spacer
with flx.HBox():
flx.Label(text=lambda: self.root.first_name,
style='border:1px solid red')
flx.Label(text=lambda: self.root.last_name,
style='border:1px solid red')
flx.Widget(flex=1) # spacer
MyPersonLabel(style='border:1px solid blue')
flx.Widget(flex=1) # spacer
@flx.reaction
def _update_name(self):
self.root.set_first_name(self.first_edit.text)
self.root.set_last_name(self.last_edit.text)
if __name__ == '__main__':
m = flx.launch(MyApp)
flx.run()
# Associate assets needed by this app.
flx.assets.associate_asset(__name__, "http://code.jquery.com/jquery-1.10.2.js")
flx.assets.associate_asset(__name__, "http://code.jquery.com/ui/1.11.4/jquery-ui.js")
flx.assets.associate_asset(__name__,
"http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css")
class DatePicker(flx.Widget):
def _create_dom(self):
global window
node = window.document.createElement('input')
RawJS('$')(node).datepicker()
return node
class Example(flx.Widget):
def init(self):
with flx.FormLayout():
self.start = DatePicker(title='Start date')
self.end = DatePicker(title='End date')
flx.Widget(flex=1)
if __name__ == '__main__':
m = flx.launch(Example, 'app')
flx.run()
for ev in events:
self.ctx.beginPath()
self.ctx.fillStyle = '#00f'
self.ctx.arc(ev.pos[0], ev.pos[1], 3, 0, 6.2831)
self.ctx.fill()
self.show_pos(ev)
class Main(flx.Widget):
""" Embed in larger widget to test offset.
"""
CSS = """
.flx-Main {background: #eee;}
"""
def init(self):
with flx.VFix():
flx.Widget(flex=1)
with flx.HFix(flex=2):
flx.Widget(flex=1)
Drawing(flex=2)
flx.Widget(flex=1)
flx.Widget(flex=1)
if __name__ == '__main__':
m = flx.launch(Main, 'app')
flx.start()
(r"/videos/(.*)", StaticFileHandler, {"path": dirname}),
])
class VideoViewer(flx.Widget):
""" A simple videoviewer that displays a list of videos found on the
server's computer, plus a few online videos. Note that not all videos
may be playable in HTML5.
"""
def init(self):
with flx.HSplit():
with flx.TreeWidget(max_selected=1, flex=1) as self.videolist:
for name in sorted(videos):
flx.TreeItem(text=name)
self.player = flx.VideoWidget(flex=5)
@flx.reaction('videolist.children*.selected')
def on_select(self, *events):
for ev in events:
if ev.source.selected:
fname = ev.source.text
self.player.set_source(videos[fname])
if __name__ == '__main__':
m = flx.launch(VideoViewer)
flx.run()
def _on_save_file(self, file, pkt):
wrpcap(file, pkt)
self.set_status(f"Saved to file: {file}")
def load_pcap(self):
self.pnl_browser.set_callback(self._on_load_file)
self.activate_panel(self.pnl_browser)
def save_pcap(self, pkt):
self.pnl_browser.set_callback(self._on_save_file, pkt)
self.activate_panel(self.pnl_browser)
if __name__ == '__main__':
if sys.argv[-1] in ["--help","-h"]:
print("""
Start Scapy web GUI in server mode which support multiple users.
Please open URL in broswer Chrome or Firefox
Options:
--flexx-hostname=<host> Host/IP to listen on
--flexx-port=<port> Port number to listen on
--app: Start as application single user mode, quit once page close.
--help(-h) Show this help
""")
elif sys.argv[-1] == "--app":
flx.launch(ScapyUI)
flx.run()
else:
app.serve(ScapyUI)
app.start()
# doc-export: Split
"""
Splitter widgets are cool!
"""
from flexx import flx
class Split(flx.Widget):
def init(self):
with flx.HSplit():
flx.Widget(style='background:#f00')
with flx.VSplit():
flx.Widget(style='background:#0f0')
with flx.HSplit():
flx.Widget(style='background:#ff0')
with flx.VSplit():
flx.Widget(style='background:#f0f')
with flx.HSplit():
flx.Widget(style='background:#0ff')
flx.Widget(style='background:#00f')
if __name__ == '__main__':
m = flx.launch(Split)
flx.run()
with flx.HFix(): # Use minsize in CSS of button widget
with flx.GroupWidget(title='asdas'):
with flx.HFix():
flx.Button(text='foo')
flx.Button(text='bar')
with flx.HFix(minsize=50): # Set minsize prop on container
flx.Button(text='foo')
flx.Button(text='bar')
with flx.HFix(): # Set minsize prop on widget
flx.Button(text='foo', minsize=50)
flx.Button(text='bar')
with flx.HFix(): # Old school setting of style
flx.Button(text='foo', style='min-height:50px;')
flx.Button(text='bar', )
with flx.Widget(): # Singleton widgets (e.g. custom classes)
with flx.HFix():
flx.Button(text='foo')
flx.Button(text='bar')
flx.Widget(flex=1, style='background:#f99;') # spacer
if __name__ == '__main__':
m = flx.launch(Tester, 'firefox')
flx.run()
