TagsListPreview

Introduction

Tags List Preview widget simply displays a list of tags. It can be used to display tags that were selected by the user in the Tags List Selector widget for example.

Function signature

tags_list_preview = TagsListPreview(
        tag_metas=tag_metas,
        max_width=300,
        empty_text=None,
        widget_id=None,
    )

default

Parameters

Parameters	Type	Description
tag_metas	Union[List[ObjClass], ObjClassCollection]	Supervisely tag meta collection or list of tag metas
max_width	int	Max width of the widget
empty_text	str	Text that will be displayed when there are no tags in widget
widget_id	str	ID of the widget

tag_metas

List of TagMeta objects or Supervisely tag meta collection (TagMetaCollection).

type: Union[List[TagMeta], TagMetaCollection]

tags_list_preview = TagsListPreview(
    tag_metas=tag_metas
)

max_width

Set the maximum width of the widget in pixels.

type: int

default 300

tags_list_preview = TagsListPreview(
    tag_metas=tag_metas,
    max_height="100px"
)

empty_text

Text that will be displayed when there are no tags in widget

type: str

default None

empty_text = "No tags selected"
tags_list_preview = TagsListPreview(
    tag_metas=[]
    empty_text=empty_text,
)

empty-text

widget_id

ID of the widget.

type: str

default value: None

Methods and attributes

Attributes and Methods	Description
set()	Set tag metas to widget.

Mini App Example

In this example we will create a mini app with TagsListPreview widget. We will create a TagsListSelector widget and display selected tags with TagsListPreview widget.

You can find this example in our Github repository:

supervisely-ecosystem/ui-widgets-demos/media/018_tags_list_preview/src/main.py

Import libraries

import os
import supervisely as sly
from supervisely.app.widgets import (
    Card,
    Container,
    TagsListPreview,
    TagsListSelector,
    Text,
)
from dotenv import load_dotenv

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

Create list of tag metas and init TagsListSelector widget

cat_tag_meta = sly.TagMeta("cat", sly.TagValueType.NONE)
dog_tag_meta = sly.TagMeta("dog", sly.TagValueType.ANY_NUMBER)
horse_tag_meta = sly.TagMeta("horse", sly.TagValueType.ANY_STRING)
cow_tag_meta = sly.TagMeta("cow", sly.TagValueType.ONEOF_STRING, possible_values=["moo", "mooo"])
zebra_tag_meta = sly.TagMeta("zebra", sly.TagValueType.NONE)
tag_metas = [
    cat_tag_meta,
    dog_tag_meta,
    horse_tag_meta,
    cow_tag_meta,
    zebra_tag_meta,
]

tags_list_selector = TagsListSelector(tag_metas, multiple=True)

Initialize TagsListPreview widget and Text widget for displaying number of selected tags

empty_text = Text("No tags selected", "text")
tags_list_preview = TagsListPreview(empty_text=empty_text)
preview_text = Text(f"Selected Tags: 0 / {len(tag_metas)}", "text")
preview_container = Container([preview_text, tags_list_preview])

Create app layout

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

container = Container(widgets=[tags_list_selector, preview_container])

card = Card(
    title="Tags List Preview",
    content=container,
)

layout = card

Create app using layout

Create an app object with layout parameter.

app = sly.Application(layout=layout)

Add functions to control widgets from python code

@tags_list_selector.selection_changed
def on_selection_changed(selected_tags):
    preview_text.set(f"Selected Tags: {len(selected_tags)} / {len(tag_metas)}", "text")
    tags_list_preview.set(selected_tags)

miniapp-min