Badge

Introduction

Badge widget in Supervisely is a versatile tool for displaying notifications or counts on elements such as buttons, text. With customizable types (number, text, or dot), visibility, the Badge can be easily used in Supervisely apps for a seamless user experience.

Function signature

Badge(
    value: Union[int, str, float] = None,
    widget: Optional[Widget] = None,
    max: int = None,
    is_dot: bool = False,
    hidden: bool = False,
    widget_id: str = None,
)

Parameters

value

Badge widget content value

type: Union[int, str, float]

default value: None

badge = Badge("value")

Determine a widget to content in badge

type: Optional[Widget]

default value: None

button = Button()
badge = Badge(widget=button)

max

Determine max value of badge content. Value type has to be a number

type: int

default value: None

button = Button()
badge = Badge(
    widget=button,
    value=10,
    max=5,
)

is_dot

Specifies that badge is displayed as a dot

type: bool

default value: False

button = Button()
badge = Badge(
    widget=button,
    is_dot=True,
)

hidden

Specifies that a badge widget is hidden

type: bool

default value: False

button = Button()
badge = Badge(
    widget=button,
    hidden=True,
)

widget_id

ID of the widget

type: str

default value: None

Methods and attributes

Mini App Example

You can find this example in our Github repository:

supervisely-ecosystem/ui-widgets-demos/status-elements/006_badge/src/main.py

Import libraries

import os

import supervisely as sly
from dotenv import load_dotenv
from supervisely.app.widgets import Badge, Button, Checkbox, Container, Card, Input, InputNumber

Init API client

First, we load environment variables with credentials and init API for communicating with Supervisely Instance:

load_dotenv("local.env")
load_dotenv(os.path.expanduser("~/supervisely.env"))

api = sly.Api()

Prepare `Button`, `Checkbox`, `Input`, `InputNumber` widgets to contain in `Badge` widgets

button_1 = Button("Hide badge")
text_input = Input(placeholder="Enter value")

button_2 = Button("Hide badge")
number_input = InputNumber(min=1, max=100)

button_3 = Button("Toggle visibility")
checkbox = Checkbox("Show badge")

Create `Badge` widgets we will use in UI for demo

text_badge = Badge(widget=button_1, value="new")

number_badge = Badge(widget=button_2, value=1, max=10)

dot_badge = Badge(widget=button_3, is_dot=True)

Create app layout

Prepare a layout for app using Card widget with the content parameter and place widget that we've just created in the Container widget.

text_container = Container([text_badge, text_input])

number_container = Container([number_badge, number_input])

dot_container = Container([dot_badge, checkbox])

container = Container(
    widgets=[text_container, number_container, dot_container],
    direction="horizontal",
)
card = Card(content=container)

Create app using layout

Create an app object with layout parameter.

app = sly.Application(layout=layout)

Add functions to control widgets from code

@text_input.value_changed
def set_badge_text(value):
    text_badge.set_value(value)


@number_input.value_changed
def set_badge_number(value):
    number_badge.set_value(value)


@checkbox.value_changed
def change_badge_visibility(value):
    dot_badge.toggle_visibility()


@button_1.click
def change_badge_visibility():
    text_badge.hide_badge()


@button_2.click
def change_badge_visibility():
    number_badge.hide_badge()


@button_3.click
def change_badge_visibility():
    dot_badge.toggle_visibility()