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