CircleProgress

Introduction

Circle Progress widget is a wrapper for Progress widget to display it in a circular form. This widget display progress only in percentage.

Function signature

CircleProgress(
    progress=progress,
    widget_id=None,
)

default

Parameters

Parameters	Type	Description
progress	Progress	Supervisely Progress widget
widget_id	str	ID of the widget

progress

Supervisely Progress widget. You can read more about it here.

type: Progress

progress = Progress()

widget_id

ID of the widget.

type: str

default value: None

Attributes and Methods	Description
set_status()	Set one of the available statuses: none, exception, success

Mini App Example

You can find this example in our Github repository:

supervisely-ecosystem/ui-widgets-demos/status-elements/009_circle_progress/src/main.py

Import libraries

import os
from time import sleep
import supervisely as sly
from supervisely.app.widgets import Card, CircleProgress, Flexbox, Button, Progress
from dotenv import load_dotenv

Init API client

Init API for communicating with Supervisely Instance. First, we load environment variables with credentials:

load_dotenv("local.env")
load_dotenv(os.path.expanduser("~/supervisely.env"))
api = sly.Api()

Initialize widgets: Progress, Circle Progress and Button

progress = Progress()
circle_progress = CircleProgress(progress=progress)
button = Button("Start", button_size="mini")

Create app layout

Prepare a layout for app using Card widget with the content parameter and place variables circle_progress and button that we've just created to the container variable, which uses Container widget.

container = Container([circle_progress, button])
card = Card(
    title="Circle Progress",
    content=container,
)
layout = card

Create app using layout

Create an app object with layout parameter.

app = sly.Application(layout=layout)

Our app layout is ready. Progress bar will appear after pressing the Start button.

Start progress with button click

Use the decorator as shown below to handle button click. Progress will be updating itself (pbar.update(1)) every half second by 1 point as specified in sleep function until it reaches total.

@button.click
def start_progress():
    circle_progress.set_status("none")
    with progress(message="Processing items ...", total=100) as pbar:
        for _ in range(10):
            sleep(0.5)
            pbar.update(10)
        circle_progress.set_status("success")

miniapp