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
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
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_dotenvInit 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 directorystatic_dir = Path("layouts and containers/017_iframe/static")Initialize Input widget
Input widgetiframe = IFrame("static/index_1.html", height="300px", width="300px")Create buttons to switch between html templates in IFrame widget
IFrame widgetbutton_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
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")Last updated
Was this helpful?