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(rows: int = 1, columns: int = 1, sidebar: bool = True, title: str = 'Bowtie App', basic_auth: bool = False, username: str = 'username', password: str = 'password', theme: Union[str, NoneType] = None, background_color: str = 'White', host: str = '0.0.0.0', port: int = 9991, socketio: str = '', debug: bool = False) → None[source]

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

Create a Bowtie App.

Parameters:
  • 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 widgets.
  • title (str, optional) – Title of the HTML.
  • basic_auth (bool, optional) – Enable basic authentication.
  • username (str, optional) – Username for basic authentication.
  • password (str, optional) – Password for basic authentication.
  • theme (str, optional) – Color for Ant Design components.
  • background_color (str, optional) – Background color of the control pane.
  • host (str, optional) – Host IP address.
  • port (int, optional) – Host port number.
  • socketio (string, optional) – Socket.io path prefix, only change this for advanced deployments.
  • debug (bool, optional) – Enable debugging in Flask. Disable in production!
add(widget: 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:widget (bowtie._Component) – A Bowtie widget instance.
add_route(view, path, exact=True)[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.
listen(event: bowtie._component.Event, *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.

Parameters:
  • event (event) – A Bowtie event.
  • *events (Each is an event, optional) – Additional events.

Examples

Subscribing a function to multiple events.

>>> from bowtie.control import Dropdown, Slider
>>> app = App()
>>> dd = Dropdown()
>>> slide = Slider()
>>> @app.listen(dd.on_change, slide.on_change)
... def callback(dd_item, slide_value):
...     pass
>>> @app.listen(dd.on_change)
... @app.listen(slide.on_change)
... def callback2(value):
...     pass
load(func)[source]

Call a function on page load.

Parameters:func (callable) – Function to be called.
respond(pager: bowtie.pager.Pager, func: Callable) → None[source]

Call a function in response to a page.

When the pager calls notify, the function will be called.

Parameters:
  • pager (Pager) – Pager that to signal when func is called.
  • func (callable) – Function to be called.

Examples

Using the pager to run a callback function.

>>> from bowtie.pager import Pager
>>> app = App()
>>> pager = Pager()
>>> def callback():
...     pass
>>> def scheduledtask():
...     pager.notify()
>>> app.respond(pager, callback)
schedule(seconds, func)[source]

Call a function periodically.

Parameters:
  • seconds (float) – Minimum interval of function calls.
  • func (callable) – Function to be called.
subscribe(func: Callable, event: bowtie._component.Event, *events) → None[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.

Parameters:
  • func (callable) – Function to be called.
  • event (event) – A Bowtie event.
  • *events (Each is an event, optional) – Additional events.

Examples

Subscribing a function to multiple events.

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

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 = True, background_color: str = 'White') → None[source]

Grid of widgets.

Create a new grid.

add(widget: 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:widget (bowtie._Component) – A Bowtie widget instance.
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.

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 → None[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) → bowtie._app.Size[source]

Set the size in ems.

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

Set the fraction of free space to use as an integer.

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

Set the minimum size to auto or content based.

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

Set the minimum size in ems.

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

Set the minimum percentage of free space to use.

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

Set the minimum size in pixels.

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

Set the percentage of free space to use.

pixels(value) → 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 → None[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.