How to use the flexx.flx function in flexx

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)

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.
    """

# 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

# 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):

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')

    @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({

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")

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)

def init(self):
        self.b1 = flx.Button(text='Hello')
        self.b2 = flx.Button(text='World')

# 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()