Card
Introduction
Card
widget in Supervisely is a simple widget that can be used to display information or content in a compact format. It can be controlled by setting loading
/lock
properties and can be collapsed to save space. It provides a straightforward and easy-to-use solution for displaying information clearly and concisely.
Function signature
card = Card(
title="Title",
description="Description text",
collapsable=False,
content=Text("some text"),
content_top_right=None,
lock_message="Card content is locked",
widget_id=None,
)

Parameters
title
str
Card widget title
description
str
Description text for card widget
collapsable
bool
Enable collapsable
property to allow minimize card widget
content
Widget
Widget to place in Card widget
content_top_right
Widget
Widget to place in top right corner of Card widget
lock_message
str
Message to display when card will be locked
widget_id
str
Widget ID
title
Card widget title
type: str
default None
card = Card(title="Card title")

description
Description text for card widget
type: str
default None
card = Card(description="card description")

collapsable
Enable collapsable
property to allow minimize card widget
type: bool
default False
card = Card(
title="Card title",
description="card description",
content=Text("some text"),
collapsable=True
)

content
Widget to place in Card widget
type: Widget
default None
card = Card(
title="Card title",
description="card description",
content=Container(widgets=[Text("some text"), Button("Button")])
)

content_top_right
Widget to place in top right corner of Card widget
type: Widget
default None
card = Card(
title="Card title",
description="card description",
content=Text("some text"),
content_top_right=Button("Button"),
)

lock_message
Message to display when card will be locked
type: str
default "Card content is locked"
card = Card(
content=Text("some text"),
lock_message='Press "UNLOCK" button to unlock the card.',
)

widget_id
Widget ID
type: str
default None
Methods and attributes
loading
Get or set loading
property.
collapse()
Minimize card widget.
uncollapse()
Expand card widget.
lock()
Lock card widget and show message.
unlock()
Unlock card widget and hide lock message.
is_locked()
Check if card widget is locked.
Mini App Example
You can find this example in our Github repository:
ui-widgets-demos/layouts and containers/001_card/src/main.py
Import libraries
import os
import random
import supervisely as sly
from dotenv import load_dotenv
from supervisely.app.widgets import Button, Card, Container, Image
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 widgets we will use in Card
widget
Card
widgetButtons to enable loading property, lock and collapse Card
widget:
loading_btn = Button("Loading True")
lock_btn = Button("Lock")
collapse_btn = Button("Collapse")
Buttons to unlock, uncollapse and disable loading property of Card
widget:
unlock_btn = Button("Unlock", button_type="success")
uncollapse_btn = Button("Uncollapse", button_type="success")
refresh_btn = Button("Loading False", button_type="success")
Use Container
widget to join Button
widgets in groups.
btn_container_1 = Container(widgets=[loading_btn, refresh_btn])
btn_container_2 = Container(widgets=[lock_btn, unlock_btn])
btn_container_3 = Container(widgets=[collapse_btn, uncollapse_btn])
containers = Container(
widgets=[btn_container_1, btn_container_2, btn_container_3],
direction="horizontal",
)
Prepare widgets to display some image.
preview_btn = Button("Preview")
image = Image()
Initialize Card
widgets
Card
widgetsInitialize one Card
widget for buttons
buttons_card = Card(content=containers)
Initialize second Card
widget for previewing images.
image_card = Card(
title="Card",
description="Card Description",
content=image,
collapsable=True,
content_top_right=preview_btn,
)
Create app layout
Prepare a layout for app using Card
widget with the content
parameter.
layout = Container(
widgets=[buttons_card, image_card],
direction="horizontal",
fractions=[1, 1],
)
Create app using layout
Create an app object with layout parameter.
app = sly.Application(layout=card)
Add functions to control widgets from python code
@unlock_btn.click
def lock_card():
image_card.unlock()
@uncollapse_btn.click
def lock_card():
image_card.uncollapse()
@refresh_btn.click
def lock_card():
image_card.loading = False
@lock_btn.click
def lock_card():
image_card.lock()
@collapse_btn.click
def lock_card():
image_card.collapse()
@loading_btn.click
def lock_card():
image_card.loading = True
@preview_btn.click
def load_preview_image():
image_card.loading = True
image.set(image_info.full_storage_url)
image_card.loading = False

Last updated
Was this helpful?