Simple example

Let this simple Taipy application. Add Taipy Designer (taipy.designer) import to activate it.

from taipy.gui import Gui
from taipy.designer import Page

a = 1
b = 5
c = a + b

page = Page("sliders_value.xprjson")

Gui(page).run(design=True)

Let's save this code into simple_app.py.

This web-application has 3 Python variables: a, b and c. It simply does the addition of a and b into c.

It defines a Taipy Designer page named sliders_value.xprjson, that will contain the GUI definition.

It creates a Gui instance from taipy.gui to host the Taipy Designer page.

Let's run it first:

python simple_app.py

Taipy Designer is automatically started on the browser at http://127.0.0.1:5000.

Let's build its GUI using drag and drop with Taipy Designer.

Widgets are dropped in the Widgets main tabset to the dashboard edition zone.

Add two Horizontal sliders to the dashboard, from Basic inputs & controls category. Similarly, add a KPI display widget from the Basic Displays category.

The dashboard shall look like this:

A simple click on the top-right widget's pencil will open its parameterization sidebar. This form is divided into three tabs: Bindings and Graphical properties and Aspect.

Using this procedure, bind the two sliders to a and b, and the KPI display to c.

To make our dashboard interactive, add the following on_change() callback function as follows:

from taipy.gui import Gui
from taipy.designer import Page

a = 1
b = 5
c = a + b

def on_change(state, var, val):
    if var in ["a", "b"]:
        state.c = state.a + state.b

page = Page("sliders_value.xprjson")

Gui(page).run(design=True)

Your interactive dashboard is ready. Switch to preview tab to play!

We your dashboard is finalized, you have only to set the design parameter to False in the Gui class

gui.run(design=False)

And run your final code:

python simple_app.py

Open your final dashboard on the browser at http://127.0.0.1:5000/.