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