App

The App class defines the structure of the application. It contains a root view, what you get when you go to /. It subscribes functions to component events and builds the application.

class bowtie.App(name='__main__', app=None, rows: int = 1, columns: int = 1, sidebar: bool = False, title: str = 'Bowtie App', theme: Optional[str] = None, background_color: str = 'White', socketio: str = '', debug: bool = False)[source]

Core class to layout, connect, build a Bowtie app.

Create a Bowtie App.

Parameters:
  • name (str, optional) – Use __name__ or leave as default if using a single module. Consult the Flask docs on “import_name” for details on more complex apps.
  • app (Flask app, optional) – If you are defining your own Flask app, pass it in here. You only need this if you are doing other stuff with Flask outside of bowtie.
  • row (int, optional) – Number of rows in the grid.
  • columns (int, optional) – Number of columns in the grid.
  • sidebar (bool, optional) – Enable a sidebar for control components.
  • title (str, optional) – Title of the HTML.
  • theme (str, optional) – Color for Ant Design components.
  • background_color (str, optional) – Background color of the control pane.
  • socketio (string, optional) – Socket.io path prefix, only change this for advanced deployments.
  • debug (bool, optional) – Enable debugging in Flask. Disable in production!
add(component: bowtie._component.Component) → None[source]

Add a widget to the grid in the next available cell.

Searches over columns then rows for available cells.

Parameters:component (bowtie._Component) – A Bowtie component instance.
add_route(view: bowtie._app.View, path: str, exact: bool = True) → None[source]

Add a view to the app.

Parameters:
  • view (View) –
  • path (str) –
  • exact (bool, optional) –
add_sidebar(widget: bowtie._component.Component) → None[source]

Add a widget to the sidebar.

Parameters:widget (bowtie._Component) – Add this widget to the sidebar, it will be appended to the end.
load(func: Callable) → Callable[source]

Call a function on page load.

Parameters:func (callable) – Function to be called.
schedule(seconds: float)[source]

Call a function periodically.

Parameters:
  • seconds (float) – Minimum interval of function calls.
  • func (callable) – Function to be called.
subscribe(*events) → Callable[source]

Call a function in response to an event.

If more than one event is given, func will be given as many arguments as there are events.

If the pager calls notify, the decorated function will be called.

Parameters:*event (event or pager) – Bowtie event, must have at least one.

Examples

Subscribing a function to multiple events.

>>> from bowtie.control import Dropdown, Slider
>>> app = App()
>>> dd = Dropdown()
>>> slide = Slider()
>>> @app.subscribe(dd.on_change, slide.on_change)
... def callback(dd_item, slide_value):
...     pass
>>> @app.subscribe(dd.on_change)
... @app.subscribe(slide.on_change)
... def callback2(value):
...     pass

Using the pager to run a callback function.

>>> from bowtie.pager import Pager
>>> app = App()
>>> pager = Pager()
>>> @app.subscribe(pager)
... def callback():
...     pass
>>> def scheduledtask():
...     pager.notify()
wsgi_app(environ, start_response)[source]

Support uwsgi and gunicorn.

View

Views are responsible for laying components out on a webpage. Each view defines a grid and optional sidebar. Each app comes with one root view and you can add as many additional routes and view as you want.

class bowtie.View(rows: int = 1, columns: int = 1, sidebar: bool = False, background_color: str = 'White')[source]

Grid of components.

Create a new grid.

Parameters:
  • rows (int, optional) – Number of rows in the grid.
  • columns (int, optional) – Number of columns in the grid.
  • sidebar (bool, optional) – Enable a sidebar for control components.
  • background_color (str, optional) – Background color of the control pane.
add(component: Union[bowtie._component.Component, Sequence[bowtie._component.Component]]) → None[source]

Add a widget to the grid in the next available cell.

Searches over columns then rows for available cells.

Parameters:components (bowtie._Component) – A Bowtie widget instance.
add_sidebar(component: bowtie._component.Component) → None[source]

Add a widget to the sidebar.

Parameters:component (bowtie._Component) – Add this component to the sidebar, it will be appended to the end.

Size

Each row and column in the app is a Size object. The space used by each row and column can be changed through the following methods.

class bowtie._app.Size[source]

Size of rows and columns in grid.

This is accessed through .rows and .columns from App and View instances.

This uses CSS’s minmax function.

The minmax() CSS function defines a size range greater than or equal to min and less than or equal to max. If max < min, then max is ignored and minmax(min,max) is treated as min. As a maximum, a <flex> value sets the flex factor of a grid track; it is invalid as a minimum.

Examples

Laying out an app with the first row using 1/3 of the space and the second row using 2/3 of the space.

>>> app = App(rows=2, columns=3)
>>> app.rows[0].fraction(1)
1fr
>>> app.rows[1].fraction(2)
2fr

Create a default row or column size with fraction = 1.

auto() → bowtie._app.Size[source]

Set the size to auto or content based.

ems(value: float) → bowtie._app.Size[source]

Set the size in ems.

fraction(value: float) → bowtie._app.Size[source]

Set the fraction of free space to use.

min_auto() → bowtie._app.Size[source]

Set the minimum size to auto or content based.

min_ems(value: float) → bowtie._app.Size[source]

Set the minimum size in ems.

min_percent(value: float) → bowtie._app.Size[source]

Set the minimum percentage of free space to use.

min_pixels(value: float) → bowtie._app.Size[source]

Set the minimum size in pixels.

percent(value: float) → bowtie._app.Size[source]

Set the percentage of free space to use.

pixels(value: float) → bowtie._app.Size[source]

Set the size in pixels.

Gap

Set the margin between the cells of the grid in the App.

class bowtie._app.Gap[source]

Margin between rows or columns of the grid.

This is accessed through .row_gap and .column_gap from App and View instances.

Examples

Create a gap of 5 pixels between all rows.

>>> app = App()
>>> app.row_gap.pixels(5)
5px

Create a default margin of zero.

ems(value: int) → bowtie._app.Gap[source]

Set the margin in ems.

percent(value) → bowtie._app.Gap[source]

Set the margin as a percentage.

pixels(value: int) → bowtie._app.Gap[source]

Set the margin in pixels.