Docstrings

Introduction

In this tutorial, you will learn how to use the Docstring widget in the Supervisely app. The Docstring widget allows you to display a given docstring as HTML-formatted content.

Read this tutorial in the developer portal.

Function signature

Docstring(
    content="",
    is_html=False,
    widget_id=None,
)

Parameters

Type

Description

content

str

HTML content

is_html

bool

Determine if the given content has an HTML format

widget_id

str

ID of the widget

content

Determine input HTML content.

type: str

default value: ""

docstring = Docstring(content="Some content")

is_html

Determine if the given content has an HTML format.

type: bool

default value: False

docstring = Docstring(content="<h2>Some title</h2><p>some text</p>", is_html=True)

widget_id

ID of the widget.

type: str

default value: None

Methods and attributes

Attributes and Methods

Description

set_content(content: str, is_html: bool)

Set Docstring content

get_content()

Return Docstring content

clear()

Clear Docstring content

Mini App Example

You can find this example in our Github repository:

supervisely-ecosystem/ui-widgets-demos/misc/docstring/src/main.py

Import libraries

import os

from dotenv import load_dotenv

import supervisely as sly
from supervisely.api.image_api import ImageApi  # we will use ImageApi class docstring as examples
from supervisely.app.widgets import Card, Container, Docstring

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

You can use 2 types of content:

raw docstring as a str type

docstring_example_1 = ImageApi.__doc__

html format string

docstring_example_2 = """<html>
<head>
<style>
table, th, td { border: 1px solid black; border-collapse: collapse; }
th, td { padding: 5px; }
th { text-align: left; }
</style>
</head>
<body>

<table>
  <tr> <th>Class name</th> <th>Images count</th> <th>Labels count</th> </tr>
  <tr> <td>Lemon</td> <td>6</td> <td>6</td> </tr>
  <tr> <td>Kiwi</td> <td>6</td> <td>20</td> </tr>
</table>
</body>
</html>"""

Initialize `Docstring` widgets and set content types and values

docstring_1 = Docstring(content=docstring_example_1)

docstring_2 = Docstring()
docstring_2.set_content(content=docstring_example_2, is_html=True)

Create app layout

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

card_1 = Card(title="Docstring example 1", content=docstring_1)
card_2 = Card(title="Docstring example 2", content=docstring_2)

layout = Container(widgets=[card_1, card_2])

Create app using layout

Create an app object with the layout parameter.

app = sly.Application(layout=layout)

PreviousElementTagsList NextMedia

Last updated 6 days ago

Was this helpful?