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,
)

default

Parameters

Parameters	Type	Description
value	Union[int, str, float]	Badge widget content value
widget	Optional[Widget]	Determine a widget to content in badge
max	int	Determine max value of badge content. Value type has to be a number
is_dot	bool	Specifies that badge is displayed as a dot
hidden	bool	Specifies that a badge widget is hidden
widget_id	str	ID of the widget

value

Badge widget content value

type: Union[int, str, float]

default value: None

badge = Badge("value")

value

widget

Determine a widget to content in badge

type: Optional[Widget]

default value: None

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

widget

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,
)

max

is_dot

Specifies that badge is displayed as a dot

type: bool

default value: False

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

isdot

hidden

Specifies that a badge widget is hidden

type: bool

default value: False

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

hidden

widget_id

ID of the widget

type: str

default value: None

Methods and attributes

Attributes and Methods	Description
set_value(value: Union[str, int, float])	Set badge value
get_value()	Get badge value
clear()	Clear badge value
hide_badge()	Hide badge on widget
show_badge()	Show badge on widget
toggle_visibility()	Toggle visibility of badge on widget

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()

layout