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:
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()
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: -
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 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.
Gap¶
Set the margin between the cells of the grid in the App.