GridGallery

Introduction

GridGallery is a widget in Supervisely used for displaying multiple images in a grid format. Allowing for annotations to be displayed on the images, the ability to hide annotations of specific classes, adjust their transparency and zoom level make it a convenient widget for visualizing annotated image results.

Function signature

GridGallery(
    columns_number,
    annotations_opacity=0.5,
    show_opacity_slider=True,
    enable_zoom=False,
    esize_on_zoom=False,
    sync_views=False,
    fill_rectangle=True,
    border_width=3,
    widget_id=None,
)

Parameters

Parameters	Type	Description
columns_number	int	Determines number of columns on GridGallery
annotations_opacity	float	Figures opacity
show_opacity_slider	bool	Determines the presence of opacity slider on GridGallery
enable_zoom	bool	Enable zoom on GridGallery
resize_on_zoom	bool	Resize card to fit figure
sync_views	bool	Sync pan & zoom between views
fill_rectangle	bool	Fill rectange
border_width	int	Border width
empty_message	str	If no images are given, this message will be displayed.
widget_id	str	Id of the widget

columns_number

Determines number of columns on GridGallery.

type: int

default value: 1

grid_gallery = GridGallery(columns_number=4)

annotations_opacity

Figures opacity.

type: float

default value: 0.5

grid_gallery = GridGallery(columns_number=3, annotations_opacity=1)

show_opacity_slider

Determines the presence of opacity slider on GridGallery.

type: bool

default value: true

grid_gallery = GridGallery(columns_number=3, show_opacity_slider=False)

enable_zoom

Enable zoom on GridGallery.

type: bool

default value: false

grid_gallery = GridGallery(columns_number=3, enable_zoom=True)

resize_on_zoom

Resize card to fit figure.

type: bool

default value: false

sync_views

Sync pan & zoom between views.

type: bool

default value: false

grid_gallery = GridGallery(columns_number=3, enable_zoom=True, sync_views=True)

fill_rectangle

Determines to fill rectange figure or not.

type: bool

default value: true

grid_gallery = GridGallery(columns_number=3, fill_rectangle=False)

grid_gallery = GridGallery(columns_number=3)

border_width

Determines border width to rectange figures.

type: int

default value: 3

grid_gallery = GridGallery(columns_number=3, border_width=12)

empty_message

If no images are given, this message will be displayed.

type: str

default value: Gallery is empty

grid_gallery = GridGallery(columns_number=3, empty_message="Set images to gallery to see them here")

widget_id

ID of the widget.

type: str

default value: None

Methods and attributes

Attributes and Methods	Description
loading	Get or set loading property.
get_column_index(incoming_value)	Return column index by given value.
append(image_url, annotation, title, column_index, zoom_to, zoom_factor, title_url)	Add item in GridGallery.
clean_up()	Clean GridGallery from all items.

Mini App Example

You can find this example in our Github repository:

ui-widgets-demos/media/003_grid_gallery/src/main.py

Import libraries

import os

import supervisely as sly
from dotenv import load_dotenv
from supervisely.app.widgets import Card, Container, GridGallery

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

Get project ID and dataset ID from environment variables

project_id = sly.env.project_id()
dataset_id = sly.env.dataset_id()
project_meta = sly.ProjectMeta.from_json(data=api.project.get_meta(id=project_id))

Initialize GridGallery widget we will use in UI

grid_gallery = GridGallery(columns_number=3, enable_zoom=False)

Set data to GridGallery widget

images_infos = api.image.get_list(dataset_id=dataset_id)[: grid_gallery.columns_number]
anns_infos = api.annotation.get_list(dataset_id=dataset_id)[: grid_gallery.columns_number]

for idx, (image_info, ann_info) in enumerate(zip(images_infos, anns_infos)):
    image_name = image_info.name
    image_url = image_info.full_storage_url
    image_ann = sly.Annotation.from_json(data=ann_info.annotation, project_meta=project_meta)

    grid_gallery.append(
        title=image_name, image_url=image_url, annotation=image_ann, column_index=idx
    )

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.

card = Card(
    title="Grid Gallery",
    content=grid_gallery,
)

layout = Container(widgets=[card])

Create app using layout

Create an app object with layout parameter.

app = sly.Application(layout=layout)