Grid

Introduction

Grid widget in Supervisely is a widget that enables users to arrange other widgets in a flexible and responsive grid layout. Users can customize the layout by setting the gap between widgets and number of columns. With the Grid widget, users can easily create dynamic and adaptable layouts that can be optimized for different devices and screen sizes

Function signature

Grid(
    widgets=[Input(), Input(), Input(), Input()],
    columns=2,
    gap=10,
    widget_id=None,
)

Parameters

Parameters	Type	Description
widgets	List[Widget]	List if widgets to display on Grid
columns	int	Number of columns on Grid
gap	int	Gap between widgets on Grid
widget_id	str	ID of the widget

widgets

Determine list of Widgets to display on Grid.

type: List[Widget]

Grid(
    widgets=[Input()],
)

columns

Number of columns on Grid.

type: int

default value: 1

grid = Grid(
    widgets=[Input(), Input(), Input(), Input()],
    columns=2,
)

gap

Determine gap between Widgets on Grid.

type: int

default value: 10

grid = Grid(
    widgets=[Input(), Input(), Input(), Input()],
    gap=50,
)

grid = Grid(
    widgets=[Input(), Input(), Input(), Input()],
    columns=3,
    gap=50,
)

widget_id

ID of the widget.

type: str

default value: None

Mini App Example

You can find this example in our Github repository:

ui-widgets-demos/layouts and containers/006_grid/src/main.py

Import libraries

import os

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

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

Initialize widgets we will use in UI

obj_class_cat = sly.ObjClass(name="cat", geometry_type=sly.Bitmap, color=[255, 0, 0])
obj_class_dog = sly.ObjClass(name="dog", geometry_type=sly.Bitmap, color=[0, 255, 0])
obj_class_sheep = sly.ObjClass(name="sheep", geometry_type=sly.Bitmap, color=[0, 0, 255])
obj_class_horse = sly.ObjClass(name="horse", geometry_type=sly.Bitmap, color=[255, 255, 0])
obj_class_squirrel = sly.ObjClass(name="squirrel", geometry_type=sly.Bitmap, color=[255, 0, 255])

obj_classes = [
    obj_class_cat,
    obj_class_dog,
    obj_class_sheep,
    obj_class_horse,
    obj_class_squirrel,
]

obj_class_view_widgets = [ObjectClassView(obj_class=obj_class) for obj_class in obj_classes]

Initialize Grid widget

grid = Grid(
    widgets=obj_class_view_widgets,
    columns=3,
    gap=50,
)

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",
    content=grid,
)

layout = Container(widgets=[card])

Create app using layout

Create an app object with layout parameter.

app = sly.Application(layout=layout)