About SuperviselyEcosystemContact usSlack

IFrame

Introduction

IFrame widget in Supervisely allows to render .html template in the app GUI. This widget is useful for displaying custom html content within an app.

Function signature

IFrame(
    path_to_html="static/template.html",
    height="500px",
    width="700px",
    widget_id=None,
)

Parameters

Parameters
Type
Description

path_to_html

str

Path to .html file inside static dir, must not include forward "/"

height

Union[str, int]

Height of the widget in px

width

Union[str, int]

Width of the widget in px

widget_id

str

ID of the widget

path_to_html

Path to .html file inside static dir, must not include forward "/"

type: str

IFrame(path_to_html="static/template.html")

Here is an example of template.html file used on the screenshot below:

<div><p>Hello, World</p></div>

height

Height of the widget in px.

type: str

default value: None

IFrame(
    path_to_html="static/template.html",
    height="300px"
)

width

Width of the widget in px.

type: str

default value: None

IFrame(
    path_to_html="static/template.html",
    width="1000px"
)

widget_id

ID of the widget.

type: str

default value: None

Methods and attributes

Attributes and Methods
Description

set()

Set html template to widget.

set_plot_size(value: str)

Set widget height and width in px.

clean_up()

Clean html template.

Mini App Example

You can find this example in our Github repository:

supervisely-ecosystem/ui-widgets-demos/layouts-and-containers/017_iframe/src/main.py

Import libraries

import os
from pathlib import Path
import supervisely as sly
from supervisely.app.widgets import Card, Container, IFrame, Button
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()

Set path to static directory

static_dir = Path("layouts and containers/017_iframe/static")

Initialize Input widget

iframe = IFrame("static/index_1.html", height="300px", width="300px")

Create buttons to switch between html templates in IFrame widget

button_template_1 = Button("Template 1")
button_template_2 = Button("Template 2")
button_template_3 = Button("Template 3")

button_container = Container(
    widgets=[button_template_1, button_template_2, button_template_3], direction="horizontal"
)

Create app layout

container = Container(widgets=[iframe, button_container])

layout = Card(
    title="IFrame",
    content=container,
)

Create app using layout

Create an app object with layout parameter.

app = sly.Application(layout=layout, static_dir=static_dir)

Add functions to switch html templates in IFrame widget from python code

@button_template_1.click
def set_template_1():
    iframe.set("static/index_1.html", height="300px", width="300px")


@button_template_2.click
def set_template_2():
    iframe.set("static/index_2.html", height="500px", width="500px")


@button_template_3.click
def set_template_3():
    iframe.set("static/index_3.html", height="200px", width="1000px")
miniapp-min
PreviousDialogNextTables

Last updated