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.
- 1.
- 2.
- 4.
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.
To use
states in our application, we need to initialize them.
For a modal window application, this does it in config.jsonconfig.json (partially)
"modal_template_state": {
"timerValue": "10"
},
Remember the states.
We'll need them to pass arguments from HTML to Python.
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.
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')
States and Widgets
Last modified 1yr ago