Links
Comment on page

Part 2 — States and Widgets [Customize modal window]

In this section, we will customize the modal window. We will use a modal window to enter arguments.

Table of contents

  1. 1.
    ​About states​
  2. 2.
    ​Element widgets​
  3. 3.
  4. 4.
    ​Results​

Step 1 — About states

Have you heard about the state machine? It is the same. State fields help the application core store lightweight data and pass it to Python as needed.
​
warning
To use states in our application, we need to initialize them. For a modal window application, this does it in config.json
config.json (partially)
"modal_template_state": {
"timerValue": "10"
},
Remember the states. We'll need them to pass arguments from HTML to Python.

Step 2 — Element widgets

​Element widgets are available in our core. We can easily add an input box:
src/modal.html
<div>
<h3>Timer value (in seconds):</h3>
<el-input-number v-model="state.timerValue" :min="1" :max="60"></el-input-number>
</div>
Have you forgotten about states yet? Using the v-model parameter, we bind the APP core to the UI.

Step 3 — Blind it all together

Python code is a regular timer:
src/main.py
import supervisely_lib as sly
import time
​
import os
from dotenv import load_dotenv # pip install python-dotenv
# don't forget to add to requirements.txt!
​
# Loading env files
load_dotenv("../debug.env")
load_dotenv("../secret_debug.env", override=True)
​
# Extracting variables
address = os.environ['SERVER_ADDRESS']
token = os.environ['API_TOKEN']
​
team_id = int(os.environ['context.teamId'])
workspace_id = int(os.environ['context.workspaceId'])
​
# Extracting world name from modal window
timer_value = int(os.environ['modal.state.timerValue'])
​
​
sly_logger = sly.logger
starting_time = time.time()
​
while time.time() - starting_time < timer_value:
sly_logger.info(f'Time left {timer_value - (time.time() - starting_time)}')
time.sleep(1)
​
sly_logger.warning(f'The timer has rang! DZZZZ')

Step 4 — Results

States and Widgets