How to use the flexx.flx function in flexx

To help you get started, we’ve selected a few flexx examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github flexxui / flexx / flexxamples / demos / drawing.py View on Github external
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)
github flexxui / flexx / flexxamples / howtos / store.py View on Github external
from it.

The ``root`` attribute is available from any component, in Python as well
as in JavaScript.

It may seem like the ``LineEdit`` widgets can represent the source of the
person's name, and they can for smaller apps, but the root is easier accessible,
and the ways to set the name can change without affecting the parts of your
application that react to the name properties.

"""

from flexx import flx


class MyApp(flx.JsComponent):
    """ This the root of the app, accessible via self.root on any component.
    It functions as a central data-store. In this case it is a JsComponent,
    but it can also be a PyComponent if that makes more sense.
    """

    first_name = flx.StringProp(settable=True)
    last_name = flx.StringProp(settable=True)

    def init(self):
        View()


class MyPersonLabel(flx.Widget):
    """ A simple widget that renders the name.
    """
github flexxui / flexx / flexxamples / demos / sine.py View on Github external
# doc-export: SineExample
"""
A sine, with sliders to manipulate phase and amplitude.
"""

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
github flexxui / flexx / flexxamples / howtos / editor_ace.py View on Github external
# doc-export: CodeEditor
"""
This example demonstrates a code editor widget based on Ace.
"""

# todo: Maybe this should be a widget in the library (flexx.ui.Ace) ?

from flexx import flx

# Associate Ace's assets with this module so that Flexx will load
# them when (things from) this module is used.
base_url = 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/'
flx.assets.associate_asset(__name__, base_url + 'ace.js')
flx.assets.associate_asset(__name__, base_url + 'mode-python.js')
flx.assets.associate_asset(__name__, base_url + 'theme-solarized_dark.js')


class CodeEditor(flx.Widget):
    """ A CodeEditor widget based on Ace.
    """

    CSS = """
    .flx-CodeEditor > .ace {
        width: 100%;
        height: 100%;
    }
    """

    def init(self):
github flexxui / flexx / flexxamples / demos / colab_painting.py View on Github external
def init(self, model):
        super().init()
        self.model = model

        # App layout
        with flx.VBox():
            flx.Label(flex=0, text=lambda: model.status)
            flx.Widget(flex=1)
            with flx.HBox(flex=2):
                flx.Widget(flex=1)
                self.canvas = flx.CanvasWidget(flex=0, minsize=400, maxsize=400)
                flx.Widget(flex=1)
            flx.Widget(flex=1)

        # Init context to draw to
        self._ctx = self.canvas.node.getContext('2d')
github flexxui / flexx / flexxamples / howtos / openlayers.py View on Github external
    @flx.action
    def map_init(self):
        global ol
        if not self.initialised:
            self.olview = ol.View({
                "zoom": 8,
                "center": [-80.901813, 22.968599],
                "projection": "EPSG:4326",
                "minZoom": 3,
                "maxZoom": 100
            })

            self.baseLayer = ol.layer.Tile({
                "source": ol.source.OSM(),
            })

            self.vectorLayer = ol.layer.Vector({
github nilsbore / flexxros / src / flexxros / sam_widgets.py View on Github external
def init(self, name, actuator_type, setpoint_topic,
             feedback_topic, cont_enable_topic,
             cont_setpoint_topic, cont_min, cont_max,
             is_angles=False):

        self.setpoint_topic = setpoint_topic
        self.cont_setpoint_topic = cont_setpoint_topic
        self.cont_enable_topic = cont_enable_topic
        self.is_angles = is_angles

        with flx.GroupWidget(title=name, flex=1):
            with flx.FormLayout(flex=1):
                flx.Label(text="Actuator setpoint")
                if is_angles:
                    self.set_slider = flx.Slider(title="0", min=-1.6, max=1.6)
                    self.set_slider2 = flx.Slider(title="0", min=-1.6, max=1.6)
                else:
                    self.set_slider = flx.Slider(title="50", min=0, max=100, value=50)
                flx.Label(text="Controller setpoint")
                self.enable_cont = flx.CheckBox(title="Enabled")
                self.enable_cont.set_checked(True)
                self.cont_slider = flx.Slider(title="0", min=cont_min, max=cont_max, value=0)
                flx.Widget(minsize=20)

        self.announce_publish(setpoint_topic, actuator_type)
        self.announce_publish(cont_setpoint_topic, "std_msgs/Float64")
        self.announce_publish(cont_enable_topic, "std_msgs/Bool")
github nilsbore / flexxros / src / flexxros / sam_widgets.py View on Github external
def init(self, name, actuator_type, setpoint_topic,
             feedback_topic, cont_enable_topic,
             cont_setpoint_topic, cont_min, cont_max,
             is_angles=False):

        self.setpoint_topic = setpoint_topic
        self.cont_setpoint_topic = cont_setpoint_topic
        self.cont_enable_topic = cont_enable_topic
        self.is_angles = is_angles

        with flx.GroupWidget(title=name, flex=1):
            with flx.FormLayout(flex=1):
                flx.Label(text="Actuator setpoint")
                if is_angles:
                    self.set_slider = flx.Slider(title="0", min=-1.6, max=1.6)
                    self.set_slider2 = flx.Slider(title="0", min=-1.6, max=1.6)
                else:
                    self.set_slider = flx.Slider(title="50", min=0, max=100, value=50)
                flx.Label(text="Controller setpoint")
                self.enable_cont = flx.CheckBox(title="Enabled")
                self.enable_cont.set_checked(True)
                self.cont_slider = flx.Slider(title="0", min=cont_min, max=cont_max, value=0)
                flx.Widget(minsize=20)

        self.announce_publish(setpoint_topic, actuator_type)
        self.announce_publish(cont_setpoint_topic, "std_msgs/Float64")
        self.announce_publish(cont_enable_topic, "std_msgs/Bool")
        self.subscribe(setpoint_topic, actuator_type, self._setpoint_callback)
        self.subscribe(cont_setpoint_topic, "std_msgs/Float64", self._cont_callback)
github flexxui / flexx / flexxamples / howtos / hello_world.py View on Github external
def init(self):
        self.b1 = flx.Button(text='Hello')
        self.b2 = flx.Button(text='World')
github flexxui / flexx / flexxamples / howtos / python_in_js.py View on Github external
# 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 !'))
        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()