Comment on page
Part 2 — UI Rendering [Simplest UI Application]
In this part, you will learn to create a basic UI application.
- 1.
- 2.
- 4.
This is very similar to a modal window application.
But now instead of a modal window — a whole browser page!
Let's create some simple HTML:
src/gui.html
<div>
<sly-field title="INFO: Test massage"
description="this is a common template for displaying information"
style="padding-top: 0; padding-bottom: 0">
<sly-icon slot="icon" :options="{ color: '#13ce66', bgColor: '#e1f7eb', rounded: false }">
<i class="zmdi zmdi-info"></i>
</sly-icon>
</sly-field>
<sly-field title="WARNING: Test message"
description="this is a common template for displaying warnings">
<sly-icon slot="icon" :options="{ color: '#fba607', bgColor: '#ffeee3', rounded: false }">
<i class="zmdi zmdi-alert-triangle"></i>
</sly-icon>
</sly-field>
<sly-field title="ERROR: Test message"
description="this is a common template for displaying errors">
<sly-icon slot="icon" :options="{ color: '#de1212', bgColor: '#ffebeb', rounded: false }">
<i class="zmdi zmdi-alert-circle"></i>
</sly-icon>
</sly-field>
</div>
To keep the application running all the time, we will use the
app.run method.src/main.py
import supervisely_lib as sly
from dotenv import load_dotenv # pip install python-dotenv
# don't forget to add to requirements.txt!
load_dotenv("../debug.env")
load_dotenv("../secret_debug.env", override=True)
app = sly.AppService()
def main():
sly.logger.info('Application starting...')
app.run()
if __name__ == "__main__":
sly.main_wrapper("main", main)
- 1.Write
TASK_IDWhile True Script from Part 7 todebug.envWe also need to specify the path along which our application can cache debugging dataDEBUG_APP_DIRandDEBUG_CACHE_DIR
debug.env
PYTHONUNBUFFERED=1
TASK_ID=7715
context.teamId=238
context.workspaceId=333
DEBUG_APP_DIR="/home/user/app_debug_data/"
DEBUG_CACHE_DIR="/home/user/app_debug_cache/"
LOG_LEVEL="debug"
- 1.Write path to GUI file to
config.json
config.json
{
"name": "UI Rendering",
"type": "app",
"categories": [
"quickstart"
],
"description": "There will be some description",
"docker_image": "supervisely/base-py-sdk:6.1.93",
"main_script": "chapter-03-headless/part-02-ui-rendering/src/main.py",
"gui_template": "chapter-03-headless/part-02-ui-rendering/src/gui.html",
"task_location": "workspace_tasks",
"icon": "https://img.icons8.com/color/100/000000/2.png",
"icon_background": "#FFFFFF"
}
UI Rendering