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
Copy IFrame(
path_to_html="static/template.html",
height="500px",
width="700px",
widget_id=None,
)
Parameters
Parameters
Type
Description
Path to .html file inside static dir, must not include forward "/"
Height of the widget in px
Width of the widget in px
path_to_html
Path to .html file inside static dir, must not include forward "/"
type: str
Copy IFrame(path_to_html="static/template.html")
Here is an example of template.html
file used on the screenshot below:
Copy <div><p>Hello, World</p></div>
height
Height of the widget in px.
type: str
default value: None
Copy IFrame(
path_to_html="static/template.html",
height="300px"
)
width
Width of the widget in px.
type: str
default value: None
Copy 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 html template to widget.
set_plot_size(value: str)
Set widget height and width in px.
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
Copy 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:
Copy load_dotenv("local.env")
load_dotenv(os.path.expanduser("~/supervisely.env"))
api = sly.Api()
Set path to static
directory
Copy static_dir = Path("layouts and containers/017_iframe/static")
Initialize Input
widget
Copy iframe = IFrame("static/index_1.html", height="300px", width="300px")
Create buttons to switch between html templates in IFrame
widget
Copy 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
Copy container = Container(widgets=[iframe, button_container])
layout = Card(
title="IFrame",
content=container,
)
Create app using layout
Create an app object with layout parameter.
Copy app = sly.Application(layout=layout, static_dir=static_dir)
Add functions to switch html templates in IFrame
widget from python code
Copy @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")