Flexx demo Scipy 2016



In [1]:

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









    




Injecting Flexx JS and CSS

Basics



In [2]:

    
b = ui.Button(text='push me')
b









    Out[2]:



In [4]:

    
b.text = 'Click meeee'



In [5]:

    
import time

@b.connect('mouse_click')
def on_click(*events):    
    b.text = str(time.time())

Custom widgets



In [ ]:

    
class MyWidget(ui.Widget):
    
    CSS = """
    .flx-MyWidget {}
    """
    
    # Python (i.e. server) stuff goes here
    
    class JS:
        
        pass  # JavaScript (i.e. client) stuff goes here
    
    class Both:
        
        pass  # Stuff that applies to both ends (mostly properties) goes here

Creating a painting app



In [6]:

    
class Painter(ui.CanvasWidget):
    
    class JS:
        
        def init(self):
            self.ctx = self.node.getContext('2d')
        
        @event.connect('mouse_down')
        def paint(self, *events):
            for ev in events:
                self.ctx.beginPath()
                self.ctx.fillStyle = '#ff0000'
                self.ctx.arc(ev.pos[0], ev.pos[1], 5, 0, 6.2831)
                self.ctx.fill()

p = Painter(style='height:200px')
p









    











    Out[6]:

A painting app with properties



In [7]:

    
class Painter(ui.CanvasWidget):
        
    class Both:
        
        @event.prop
        def color(self, color='blue'):
            return str(color)
        
        @event.prop
        def radius(self, radius=7):
            return float(radius)
    
    class JS:
        
        def init(self):
            self.ctx = self.node.getContext('2d')
        
        @event.connect('mouse_down')
        def paint(self, *events):
            for ev in events:
                self.ctx.beginPath()
                self.ctx.fillStyle = self.color
                self.ctx.arc(ev.pos[0], ev.pos[1], self.radius, 0, 6.2831)
                self.ctx.fill()

p = Painter(style='height:200px')
p









    











    Out[7]:



In [8]:

    
p.color = 'yellow'



In [9]:

    
p.radius = 12

A painting app with buttons



In [13]:

    
class PainterWithButtons(ui.Widget):
    
    def init(self):
        with ui.VBox():
            with ui.HBox() as self.buttonbox:
                ui.Button(text='red')
                ui.Button(text='green')
                ui.Button(text='blue')
            self.painter = Painter(flex=1)
    
    class JS:
        @event.connect('buttonbox.children.*.mouse_click')
        def on_button_press(self, *events):
            self.painter.color = events[-1].source.text

p = PainterWithButtons(style='height:200px')
p









    











    Out[13]:

Connections are automatically "maintained":



In [11]:

    
b = ui.Button(parent=p.buttonbox, text='yellow')

Add more Python-side behavior



In [12]:

    
def get_color():
    colors = ['#f00', '#0f0', '#00f', '#ff0', '#f0f', '#00f']
    index = int(time.time() % len(colors))
    return colors[index]



In [14]:

    
import time

class Painter(ui.CanvasWidget):
    
    @event.connect('mouse_down')
    def process_click(self, *events):
        for ev in events:
            self.emit('paint', dict(pos=ev.pos, color=get_color(), radius=8))
    
    class JS:
        def init(self):
            self.ctx = self.node.getContext('2d')
        
        @event.connect('paint')
        def paint(self, *events):
            for ev in events:
                self.ctx.beginPath()
                self.ctx.fillStyle = ev.color
                self.ctx.arc(ev.pos[0], ev.pos[1], ev.radius, 0, 6.2831)
                self.ctx.fill()

p = Painter(style='height:200px')
p









    











    Out[14]:

Taking it further ...

http://flexx.readthedocs.io/en/latest/ui/examples/colab_painting_src.html

http://flexx1.zoof.io



In [ ]: