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
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
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, GridGalleryInit 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
GridGallery widget we will use in UIgrid_gallery = GridGallery(columns_number=3, enable_zoom=False)Set data to GridGallery widget
GridGallery widgetimages_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)
Last updated
Was this helpful?