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
Copy 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
Parameters Type Description Badge widget content value
Determine a widget to content in badge
Determine max value of badge content. Value type has to be a number
Specifies that badge is displayed as a dot
Specifies that a badge widget is hidden
value
Badge widget content value
type: Union[int, str, float]
default value: None
Copy badge = Badge ( "value" )
widget
Determine a widget to content in badge
type: Optional[Widget]
default value: None
Copy 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
Copy 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
Copy button = Button ()
badge = Badge (
widget = button,
is_dot = True ,
)
hidden
Specifies that a badge widget is hidden
type: bool
default value: False
Copy button = Button ()
badge = Badge (
widget = button,
hidden = True ,
)
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])
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
Copy 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:
Copy 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
Copy 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
Copy 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.
Copy 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.
Copy app = sly . Application (layout = layout)
Add functions to control widgets from code
Copy @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 ()